/**
 * Laufhaus Venus
 * Öffnungsstatus im Hero, Footer und auf der Kontaktseite
 *
 * Server-Pfad: assets/css/opening-status.css
 * Einbinden in includes/header.php nach main.css
 */

/* ================================================
   Hero-Badge
   ================================================ */
.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 26px;
    padding: 11px 24px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 30px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .95rem;
    letter-spacing: .4px;
    color: #e8e2d4;
}

.hero-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-status.is-open {
    border-color: rgba(70, 200, 110, .5);
}
.hero-status.is-open .hero-status__dot {
    background: #46c86e;
    box-shadow: 0 0 0 0 rgba(70, 200, 110, .7);
    animation: venusPulse 2.2s infinite;
}
.hero-status.is-open .hero-status__text {
    color: #b8f0c8;
}

.hero-status.is-closed {
    border-color: rgba(176, 26, 26, .5);
}
.hero-status.is-closed .hero-status__dot {
    background: #b01a1a;
}
.hero-status.is-closed .hero-status__text {
    color: #e6c9c9;
}

@keyframes venusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(70, 200, 110, .65); }
    70%  { box-shadow: 0 0 0 12px rgba(70, 200, 110, 0); }
    100% { box-shadow: 0 0 0 0 rgba(70, 200, 110, 0); }
}

/* ================================================
   Footer: Zeiten und Status
   ================================================ */
.footer-hours {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.footer-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    font-size: .9rem;
}

.footer-hours__day {
    color: #b9b0a0;
    white-space: nowrap;
}

.footer-hours__time {
    color: #d4af37;
    white-space: nowrap;
}

.footer-hours__row.is-closed .footer-hours__time {
    color: #7a7a7a;
    font-style: italic;
}

.footer-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(212, 175, 55, .15);
    font-size: .84rem;
}

.footer-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.footer-status.is-open            { color: #8fdca5; }
.footer-status.is-open .footer-status__dot   { background: #46c86e; }
.footer-status.is-closed          { color: #c99; }
.footer-status.is-closed .footer-status__dot { background: #b01a1a; }

/* Einrückung der zweiten Adresszeile */
.footer-indent {
    display: inline-block;
    width: 22px;
}

/* ================================================
   Kontaktseite
   ================================================ */
.opening-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 11px 16px;
    border-radius: 6px;
    font-size: .92rem;
}

.opening-status__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.opening-status.is-open {
    background: rgba(70, 200, 110, .12);
    border-left: 3px solid #46c86e;
    color: #8fdca5;
}
.opening-status.is-open .opening-status__dot {
    background: #46c86e;
    animation: venusPulse 2.2s infinite;
}

.opening-status.is-closed {
    background: rgba(176, 26, 26, .12);
    border-left: 3px solid #b01a1a;
    color: #d9a8a8;
}
.opening-status.is-closed .opening-status__dot {
    background: #b01a1a;
}

.opening-hours li.is-closed .hours {
    color: #7a7a7a;
    font-style: italic;
}

/* ================================================
   Responsive
   ================================================ */
@media (max-width: 768px) {
    .hero-status {
        font-size: .84rem;
        padding: 9px 18px;
        margin-bottom: 20px;
    }
    .footer-hours__row {
        font-size: .84rem;
    }
}

@media (max-width: 420px) {
    .hero-status {
        flex-direction: row;
        text-align: left;
    }
    .footer-hours__row {
        flex-direction: column;
        gap: 2px;
        padding: 6px 0;
    }
}

/* ================================================
   Länderflaggen

   main.css setzt .gallery-item img auf 100 % Breite und Höhe,
   girl.css dasselbe für .similar-girl-item img. Diese Regeln
   sind spezifischer als eine einzelne Klasse und würden die
   Flagge auf Kartengröße aufblasen. Darum hier durchgängig
   img.venus-flag und die Elternklasse mitschreiben.
   ================================================ */
img.venus-flag,
.gallery-item img.venus-flag,
.gallery-overlay img.venus-flag,
.similar-girl-item img.venus-flag,
.similar-girl-info img.venus-flag,
.girl-details img.venus-flag,
td img.venus-flag {
    display: inline-block;
    width: 24px;
    height: 16px;
    min-width: 24px;
    max-width: 24px;
    object-fit: cover;
    border: 1px solid rgba(212, 175, 55, .45);
    border-radius: 2px;
    vertical-align: middle;
    flex: 0 0 auto;
    filter: none;          /* main.css legt Graustufen auf Kartenbilder */
    transition: none;
    transform: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

img.venus-flag--medium,
.gallery-item img.venus-flag--medium,
.gallery-overlay img.venus-flag--medium,
.girl-details img.venus-flag--medium,
td img.venus-flag--medium {
    width: 32px;
    height: 21px;
    min-width: 32px;
    max-width: 32px;
}

img.venus-flag--large,
.gallery-item img.venus-flag--large,
.girl-details img.venus-flag--large,
td img.venus-flag--large {
    width: 44px;
    height: 29px;
    min-width: 44px;
    max-width: 44px;
}

/* Kein Zoom beim Überfahren der Karte */
.gallery-item:hover img.venus-flag,
.similar-girl-item:hover img.venus-flag {
    transform: none;
    filter: none;
}

/* Name und Flagge nebeneinander */
.gallery-overlay h3,
.similar-girl-info h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: nowrap;
}

/* Flagge und Ländername als Paar */
.venus-country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* In der Detail-Tabelle vor dem Ländernamen */
.girl-details td img.venus-flag {
    margin-right: 8px;
}