/* SilverStripe Opening Hours Widget
   Design-Variablen:
   --oh-brand:       #4d0322  (coffee-color)
   --oh-brand-light: #f9f0f3  (heller Ton vom Brand-Color)
   --oh-open:        #2d7a3a
   --oh-closed:      #c0392b
   --oh-text:        #555555  (body-color)
   --oh-heading:     #000000  (heading-color)
   --oh-white:       #ffffff
*/

.opening-hours-widget {
    background: #ffffff;
    border: 1px solid #e8dde0;
    border-top: 3px solid #4d0322;
    border-radius: 4px;
    padding: 24px;
    margin: 15px 0;
    font-family: 'Poppins', sans-serif;
    color: #555555;
}

/* ── Status Card ───────────────────────────── */
.status-card {
    text-align: center;
    margin-bottom: 24px;
}

.status-indicator {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}

.status-indicator.open {
    background: #2d7a3a;
}

.status-indicator.closed {
    background: #c0392b;
}

.status-indicator.exception {
    background: #4d0322;
}

#opening-status-message {
    font-family: 'PT Sans', sans-serif;
    font-size: 1.35em;
    font-weight: 700;
    color: #000000;
    margin: 0 0 8px 0;
}

#opening-time-info {
    font-size: 0.9em;
    color: #555555;
    margin-bottom: 8px;
}

/* ── Exception Info ────────────────────────── */
.exception-info {
    background: #f9f0f3;
    border: 1px solid #e8dde0;
    border-left: 3px solid #4d0322;
    border-radius: 4px;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 0.875em;
}

.exception-holiday  { color: #4d0322; font-weight: 600; }
.exception-vacation { color: #c0392b; font-weight: 600; }
.exception-special  { color: #2d7a3a; font-weight: 600; }
.exception-closed   { color: #555555; font-weight: 500; }

.exception-until {
    font-size: 0.85em;
    color: #4d0322;
    margin-top: 4px;
    opacity: 0.8;
}

/* Upcoming exception preview (not active today) */
.exception-upcoming {
    opacity: 0.8;
    border-left-color: #888888;
}

/* ── Schedule Section ──────────────────────── */
.schedule-section {
    border-top: 1px solid #e8dde0;
    padding-top: 20px;
}

.schedule-section h4 {
    font-family: 'PT Sans', sans-serif;
    font-size: 1em;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 14px 0;
}

.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 0.85em;
}

.schedule-day {
    display: flex;
    justify-content: space-between;
    padding: 7px 12px;
    background: #faf8f8;
    border-radius: 3px;
    border-left: 3px solid #4d0322;
}

.schedule-day.today {
    background: #f9f0f3;
    border-left-color: #4d0322;
    font-weight: 600;
    color: #000000;
}

.schedule-day.closed {
    background: #faf8f8;
    border-left-color: #e8dde0;
    color: #aaaaaa;
}

.day-name  { font-weight: 500; color: #000000; }
.day-hours { color: #555555; }

.schedule-day.today .day-name,
.schedule-day.today .day-hours { color: #4d0322; }

.schedule-day.closed .day-name,
.schedule-day.closed .day-hours { color: #aaaaaa; }

/* ── Loading State ─────────────────────────── */
.loading { opacity: 0.5; }

.loading .status-indicator {
    background: #ccbbbc;
    animation: oh-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes oh-pulse {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 768px) {
    .opening-hours-widget { padding: 16px; }

    .schedule-grid {
        grid-template-columns: 1fr;
        font-size: 0.9em;
    }

    .status-indicator { width: 48px; height: 48px; font-size: 18px; }

    #opening-status-message { font-size: 1.15em; }
}

@media (max-width: 480px) {
    .opening-hours-widget { padding: 12px; }
    .schedule-day { padding: 6px 10px; }
}