/* ==========================================================================
   ATF NAMAZ VAKİTLERİ — Design-System
   Helles Theme (Standard: Handy/Desktop) + dunkles TV-Theme (?admin)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN-TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Marke */
    --red: #d40011;              /* ATF-Rot (Logo: #e3000f) */
    --red-soft: #fff1f2;

    /* Flächen & Text (helles Theme) */
    --bg-gradient: linear-gradient(180deg, #f7f9fc 0%, #eaeef6 100%);
    --surface: #ffffff;
    --card: #f8fafc;
    --border: #e3e9f2;
    --text: #1a2740;
    --muted: #5b6b84;

    /* Akzent für "aktive Gebetszeit" + Countdown (hell = Rot) */
    --accent: #d40011;
    --accent-contrast: #ffffff;
    --accent-soft: #fff5f5;
    --accent-glow: rgba(212, 0, 17, 0.18);

    /* Live-Punkt */
    --live: #1fab61;

    /* Schriften */
    --font-sans: 'Montserrat', sans-serif;

    /* Radien & Schatten */
    --radius-lg: 28px;
    --radius-md: 16px;
    --shadow-widget: 0 20px 50px rgba(23, 43, 77, 0.08);
}

/* --------------------------------------------------------------------------
   2. GRUNDLAYOUT & TYPOGRAFIE
   -------------------------------------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-sans);
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

.container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. LOGO & TITEL
   -------------------------------------------------------------------------- */
.logo-top {
    width: 391px; /* Höhe ≈ 34px, exakt an .title-red angeglichen */
    max-width: 60%;
    height: auto;
    margin-top: 4px;
}

.title-red {
    color: var(--red);
    font-size: clamp(14px, 4.5vw, 28px); /* an Höhe des ATF-Logos (.logo-top) angeglichen */
    font-weight: 800;
    letter-spacing: 0.16em;
    text-indent: 0.16em; /* gleicht das Letter-Spacing des letzten Zeichens aus */
    margin: 16px 0 22px 0; /* mehr Abstand zu Suche/Dropdowns darunter */
    text-transform: uppercase;
    text-align: center;
}

.title-city {
    font-family: 'Grand Hotel', cursive;
    font-weight: 400;
    color: var(--text);
    font-size: clamp(40px, 7vw, 90px);
    line-height: 1.05;
    margin: 6px 0 0 0;
    text-align: center;
}


/* --------------------------------------------------------------------------
   4. DATUMSZEILE
   -------------------------------------------------------------------------- */
.date-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 10px 0 20px 0;
    flex-wrap: wrap;
}

#güncel-tarih,
#hicri-tarih {
    margin: 0 !important;
    white-space: nowrap;
    font-size: clamp(15px, 2vw, 21px);
    font-weight: 600;
    color: var(--muted);
}

.date-sep {
    color: var(--accent);
    font-weight: 800;
    font-size: clamp(15px, 2vw, 21px);
}

/* Live-Uhr: dezent zwischen den Datumsangaben */
#live-clock {
    font-size: clamp(16px, 2.1vw, 22px);
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. SUCHE & STADT-AUSWAHL
   -------------------------------------------------------------------------- */
.search-wrapper {
    width: 260px;
    max-width: 90vw;
    margin: 5px 0;
    position: relative;
    z-index: 9999;
}

.input-group {
    display: flex;
    height: 48px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group:focus-within {
    border-color: var(--red);
    box-shadow: 0 4px 18px var(--accent-glow);
}

#city-search-input {
    flex: 1;
    min-width: 0; /* erlaubt dem Feld zu schrumpfen, sonst verdrängt es den Button */
    border: none;
    padding: 0 16px;
    font-size: 17px;
    font-family: var(--font-sans);
    outline: none;
    height: 100%;
    background: transparent;
    color: var(--text);
}

#location-btn {
    flex-shrink: 0; /* Button (Icon bzw. "ARANIYOR..."-Text) bleibt immer vollstaendig sichtbar */
    display: flex;
    align-items: center;
    white-space: nowrap;
    background: var(--card);
    border: none;
    border-left: 1px solid var(--border);
    padding: 0 15px;
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.2s;
}

#location-btn:hover { background: var(--border); }

#search-results {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    background: var(--surface);
    color: var(--text);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 14px 30px rgba(23, 43, 77, 0.18);
    display: none;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-top: none;
    z-index: 10000;
}

#search-results > div:hover { background: var(--card); }

/* Suche + Dropdowns: alle drei in einer Zeile auf breiten Bildschirmen,
   untereinander gestapelt auf schmalen (Mobile) */
.selector-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0 10px;
    width: 100%;
    position: relative;
    z-index: 1;
}

#country-select,
#state-select,
#city-select {
    width: 260px !important;
    max-width: 90vw !important;
    margin: 5px 0 !important;
    box-sizing: border-box !important;
    height: 48px !important;
    padding: 10px 15px;
    font-size: 17px;
    font-family: var(--font-sans);
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

@media (max-width: 640px) {
    .selector-row { flex-direction: column; align-items: center; gap: 0; }
    .search-wrapper { width: 100%; max-width: 360px; margin: 5px 0; }
    #country-select,
    #state-select,
    #city-select {
        width: 100% !important;
        max-width: 360px !important;
        margin: 5px auto !important;
    }
}

/* Desktop: alle vier Felder (Suche + 3 Dropdowns) in einer Zeile */
@media (min-width: 900px) {
    .selector-row { flex-wrap: nowrap; }
    .search-wrapper,
    #country-select,
    #state-select,
    #city-select {
        width: 220px !important;
    }
}

/* --------------------------------------------------------------------------
   6. HAUPT-WIDGET: UHR + COUNTDOWN + ZEITEN
   -------------------------------------------------------------------------- */
.custom-widget {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: clamp(20px, 3vw, 34px);
    box-shadow: var(--shadow-widget);
    width: 95%;
    max-width: 1200px;
    text-align: center;
    border: 1px solid var(--border);
    box-sizing: border-box;
    transition: opacity 0.4s ease;
}

/* --- Hero-Zeile: links Uhr, rechts Countdown --- */
.hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3.5vw, 52px);
    padding-bottom: clamp(16px, 2.5vh, 26px);
    margin-bottom: clamp(16px, 2.5vh, 26px);
    border-bottom: 1px solid var(--border);
}

.hero-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.hero-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    font-size: clamp(12px, 1.5vw, 17px);
    margin-bottom: 10px;
    color: var(--accent);
}

.hero-label strong { font-weight: 800; }

/* --- Countdown --- */
.countdown-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(6px, 1vw, 14px);
    color: var(--accent);
}

.countdown-number {
    font-size: clamp(42px, 8vw, 92px);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown-number.colon { opacity: 0.45; }

.countdown-block small {
    display: block;
    margin-top: 7px;
    font-size: clamp(9px, 1.1vw, 13px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- Zeiten-Grid --- */
.vakit-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(10px, 1.2vw, 18px);
}

.vakit-item {
    position: relative;
    padding: clamp(14px, 1.8vh, 22px) 5px;
    background: var(--card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-color 0.25s ease, background 0.25s ease;
}

.vakit-name {
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

.vakit-time {
    font-size: clamp(20px, 2.8vw, 36px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Aktive (laufende) Gebetszeit */
.vakit-item.active {
    border: 2px solid var(--accent);
    background: var(--accent-soft);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--accent-glow);
}

.vakit-item.active .vakit-name { color: var(--accent); font-weight: 800; }
.vakit-item.active .vakit-time { color: var(--accent); }

.vakit-item.active::after {
    content: 'ŞİMDİ';
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. WOCHENTABELLE
   -------------------------------------------------------------------------- */
#weekly-container {
    display: none;
    margin-top: 25px !important;
    margin-bottom: 0 !important;
}

#weekly-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#weekly-table th {
    padding: 10px;
    border-bottom: 2px solid var(--red);
    font-size: 14px;
    color: var(--text);
}

#weekly-table td {
    padding: 12px 5px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

#weekly-table tr:nth-child(even) { background-color: var(--card); }
#weekly-table tr:hover { background-color: var(--accent-soft); }

#weekly-toggle-text {
    transition: all 0.2s ease;
    user-select: none;
    cursor: pointer;
}

#weekly-toggle-text:hover { color: var(--text); background-color: var(--card); }
#weekly-toggle-text:active { transform: scale(0.98); }

.weekly-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
}

.weekly-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--red);
}

/* --------------------------------------------------------------------------
   8. AYET & FOOTER
   -------------------------------------------------------------------------- */
#ayet-container {
    display: none;
    margin-top: 25px !important;
    margin-bottom: 0 !important;
    text-align: center;
}

.ayet-label-box {
    color: var(--red);
    font-weight: 800;
    font-size: clamp(12px, 1.4vw, 15px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 6px;
}

#ayet-text {
    font-family: var(--font-sans);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.9vw, 23px);
    color: var(--text);
    line-height: 1.6;
    word-wrap: break-word;
    margin-top: 10px;
}

#ayet-text::before { content: '\201C'; color: var(--accent); margin-right: 2px; }
#ayet-text::after  { content: '\201D'; color: var(--accent); margin-left: 2px; }

#ayet-quelle {
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    font-size: clamp(12px, 1.4vw, 15px);
    margin-top: 8px;
}

.footer {
    width: 100%;
    text-align: center;
    margin-top: 25px !important;
    padding-bottom: 20px;
}

.footer-slogan {
    color: var(--red);
    font-weight: 800;
    font-size: clamp(16px, 2.2vw, 24px);
    letter-spacing: 0.06em;
}

.footer-copyright {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   9. TV-MODUS (?admin) — Layout & Größen für 16:9-Bildschirme
   -------------------------------------------------------------------------- */
body.admin-mode { cursor: none; }

body.admin-mode .container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    justify-content: flex-start;
    padding: 3vh 3vw 2.6vh 3vw;
}

/* Auswahl-Elemente sicher ausblenden (JS blendet ebenfalls aus) */
body.admin-mode .search-wrapper,
body.admin-mode .selector-row,
body.admin-mode #weekly-container { display: none !important; }

/* Logo wandert in den Footer */
body.admin-mode .logo-top { display: none !important; }
body.admin-mode .footer img[src="favicon.png"] { display: none; }
body.admin-mode .footer .admin-footer-logo {
    display: inline-block !important;
    height: 3.2vh; /* Referenzgröße für footer-slogan/-copyright darunter */
    width: auto;
    opacity: 0.95;
}

/* Titelbereich */
body.admin-mode .title-red {
    font-size: 2.2vh;
    margin: 0;
}

/* Kompakter Kopfbereich: Titel mittig oben */
body.admin-mode .title-city {
    font-size: 11.4vh;
    line-height: 1.3; /* Platz für Unterlängen der Schreibschrift (g, y) */
    margin: 0.4vh 0 0 0;
}

/* Datum oben-links, Uhr oben-rechts – absolut in die Ecken gesetzt */
body.admin-mode .date-container {
    position: absolute;
    top: 3vh;
    left: 0;
    right: 0;
    display: block;
    margin: 0;
    z-index: 5;
}

body.admin-mode #güncel-tarih {
    position: absolute;
    top: 0;
    left: 3vw;
    text-align: left;
    line-height: 1.25;
}

body.admin-mode #hicri-tarih {
    position: absolute;
    top: 3.3vh;
    left: 3vw;
    text-align: left;
    line-height: 1.25;
}

body.admin-mode #live-clock {
    position: absolute;
    top: 0;
    right: 3vw;
}

body.admin-mode .date-sep { display: none; }

body.admin-mode #güncel-tarih,
body.admin-mode #hicri-tarih { font-size: 2.6vh; }

body.admin-mode #live-clock { font-size: 3.4vh; }

/* Widget – Breite = Container-Innenbreite, gleiche Kantenabstände wie Datum/Uhr (3vw) */
body.admin-mode .custom-widget {
    width: 100%;
    max-width: none;
    padding: 3vh 3vw 3.4vh 3vw;
    border-radius: 34px;
}

/* Kopf + Widget sitzen oben; kleiner Abstand ersetzt das entfernte Icon;
   Restplatz verteilt sich unter dem Widget */
body.admin-mode #main-widget { margin-top: 2vh; }

body.admin-mode .hero-row {
    gap: 4.5vw;
    padding-bottom: 2.6vh;
    margin-bottom: 2.8vh;
}

body.admin-mode .hero-label { font-size: 2.2vh; margin-bottom: 1.4vh; }

body.admin-mode .countdown-number { font-size: 11.76vh; }

body.admin-mode .countdown-block small {
    font-size: 1.55vh;
    margin-top: 1vh;
}

/* Zeiten-Grid */
body.admin-mode .vakit-grid { gap: 1.4vw; }

body.admin-mode .vakit-item {
    padding: 2vh 0.4vw;
    border-radius: 20px;
}

body.admin-mode .vakit-name { font-size: 2.5vh; margin-bottom: 1vh; }
body.admin-mode .vakit-time { font-size: 4.9vh; }

body.admin-mode .vakit-item.active::after {
    font-size: 1.4vh;
    top: -1.5vh;
    padding: 0.4vh 1.4vh;
}

/* Ayet – gleiche Breite/Kantenabstände wie das Widget */
body.admin-mode #ayet-container {
    width: 100%;
    max-width: none;
    margin-top: auto !important;
    padding: 2vh 3vw 2.4vh 3vw;
}

body.admin-mode .ayet-label-box { font-size: 1.85vh; padding-bottom: 1vh; }

body.admin-mode #ayet-text {
    font-size: 2.8vh; /* Basisgröße; JS verkleinert bei Bedarf (fitAyetToScreen) */
    line-height: 1.45;
    margin-top: 0.8vh;
}

body.admin-mode #ayet-quelle { font-size: 2.1vh; margin-top: 0.6vh; }

/* Footer */
body.admin-mode .footer {
    margin-top: auto !important;
    padding-bottom: 0;
}

body.admin-mode .footer-slogan { font-size: 2.835vh; }   /* etwas kleiner als das ATF-Logo (3.2vh) */
body.admin-mode .footer-copyright { font-size: 1.6vh; } /* deutlich kleiner als das ATF-Logo */

/* --------------------------------------------------------------------------
   10. RESPONSIVE (Handy & Tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .vakit-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    .container { height: auto; min-height: 100vh; }
    .vakit-grid { grid-template-columns: repeat(2, 1fr); }
    .countdown-number { font-size: 40px; }
    .date-container { flex-direction: column; gap: 3px; }
    .date-sep { display: none; }
    #live-clock { display: none; } /* Uhr auf dem Handy ausblenden */
    #weekly-table { font-size: 12px; }
}

/* Weniger Bewegung für empfindliche Nutzer */
@media (prefers-reduced-motion: reduce) {
    .vakit-item { transition: none; }
}

html.embedded,body.embedded,html.embedded .container{min-height:0;height:auto}html.embedded .container{justify-content:flex-start;padding:20px 16px}.widget-status{margin:15px 0 0;text-align:center;font:13px/1.6 Montserrat,Arial,sans-serif;color:#5b6b84}.widget-status.error{color:#a01529}.widget-retry{margin:10px 0;border:1px solid #e3e9f2;border-radius:9px;background:#fff;padding:10px 18px;color:#1a2740;cursor:pointer}.widget-status[hidden],.widget-retry[hidden]{display:none}