.schedule-header h5, .subtitle {
    letter-spacing: .15em;
    text-transform: uppercase
}

.countdown-label, .digit-block .lbl, .mini-card .mc-label, .schedule-header h5, .subtitle, .tab-btn, table.schedule thead th {
    text-transform: uppercase
}

.toast-msg, .toast-wrap, body::before {
    pointer-events: none
}

:root {
    --night: #0a0e1a;
    --card: #141c35;
    --card2: #1a2442;
    --gold: #c9a84c;
    --gold-l: #e8c97a;
    --gold-d: #7a5f2a;
    --silver: #a8b4cc;
    --text: #d6e0f5;
    --dim: #6b7a99;
    --sahur: #4a90d9;
    --iftar: #e8913a;
    --border: rgba(201, 168, 76, 0.2);
    --today-bg: rgba(201, 168, 76, 0.10);
    --today-brd: #c9a84c
}

.countdown-card, .location-bar {
    border: 1px solid var(--border)
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    background: var(--night);
    color: var(--text);
    font-family: Cairo,sans-serif;
    min-height: 100vh;
    overflow-x: hidden
}

    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
        background-image: radial-gradient(1px 1px at 20% 15%,rgba(255,255,255,.6) 0,transparent 100%),radial-gradient(1px 1px at 80% 25%,rgba(255,255,255,.4) 0,transparent 100%),radial-gradient(1.5px 1.5px at 40% 60%,rgba(255,255,255,.5) 0,transparent 100%),radial-gradient(1px 1px at 60% 80%,rgba(255,255,255,.3) 0,transparent 100%),radial-gradient(1px 1px at 10% 70%,rgba(255,255,255,.4) 0,transparent 100%),radial-gradient(1px 1px at 90% 50%,rgba(255,255,255,.3) 0,transparent 100%),radial-gradient(1.5px 1.5px at 55% 35%,rgba(255,255,255,.5) 0,transparent 100%),radial-gradient(1px 1px at 75% 10%,rgba(255,255,255,.4) 0,transparent 100%),radial-gradient(1px 1px at 35% 45%,rgba(255,255,255,.25) 0,transparent 100%)
    }

.wrapper {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 16px 60px
}

.site-header {
    text-align: center;
    padding: 28px 0 16px
}

.crescent {
    font-size: 2.2rem;
    display: block;
    animation: 3s ease-in-out infinite pulse-glow
}

@keyframes pulse-glow {
    0%,100% {
        text-shadow: 0 0 10px rgba(201,168,76,.4)
    }

    50% {
        text-shadow: 0 0 30px rgba(201,168,76,.8),0 0 60px rgba(201,168,76,.3)
    }
}

.arabic-title {
    font-family: Amiri,serif;
    font-size: 1.9rem;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(201,168,76,.4)
}

.subtitle {
    font-size: .75rem;
    color: var(--dim);
    margin-top: 4px
}

.live-clock {
    text-align: center;
    margin: 8px 0 14px
}

.clock-date {
    font-size: .92rem;
    color: var(--gold);
    font-weight: 600
}

.clock-time, .disclaimer p strong, .location-left {
    color: var(--silver)
}

.clock-time {
    font-size: .95rem;
    letter-spacing: .1em
}

.btn-locate-full, .tab-btn {
    letter-spacing: .08em;
    font-weight: 600
}

.location-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--card);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 12px
}

.btn-locate-full, .btn-locate-mini {
    background: 0 0;
    white-space: nowrap;
    display: flex;
    cursor: pointer;
    font-family: Cairo,sans-serif
}

.location-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    min-width: 0;
    flex: 1
}

    .location-left i {
        color: var(--gold);
        font-size: 1rem;
        flex-shrink: 0
    }

.location-name {
    color: var(--gold-l);
    font-weight: 700
}

.btn-locate-full, .btn-locate-mini:hover {
    color: var(--gold)
}

.btn-locate-full {
    border: 1px solid var(--gold-d);
    font-size: .78rem;
    padding: 7px 16px;
    border-radius: 8px;
    align-items: center;
    gap: 6px;
    transition: .2s;
    flex-shrink: 0
}

    .btn-locate-full:hover {
        background: rgba(201,168,76,.1);
        border-color: var(--gold)
    }

    .btn-locate-full:disabled {
        opacity: .5;
        cursor: not-allowed
    }

.btn-locate-mini {
    border: none;
    color: var(--dim);
    font-size: .75rem;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: color .2s;
    flex-shrink: 0
}

    .btn-locate-mini i {
        font-size: .8rem
    }

.disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(201,168,76,.06);
    border: 1px solid rgba(201,168,76,.15);
    border-radius: 12px;
    padding: 11px 15px;
    margin-bottom: 18px
}

    .disclaimer.hidden, .tab-pane {
        display: none
    }

    .disclaimer i {
        color: var(--gold-d);
        font-size: .95rem;
        flex-shrink: 0;
        margin-top: 2px
    }

    .disclaimer p {
        font-size: .78rem;
        color: var(--dim);
        line-height: 1.6;
        margin: 0
    }

.custom-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px
}

.tab-btn {
    flex: 1;
    background: 0 0;
    border: none;
    color: var(--dim);
    font-family: Cairo,sans-serif;
    font-size: .85rem;
    padding: 11px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: .25s
}

.countdown-type, .digit-block .num {
    transition: color .5s;
    font-weight: 700
}

.tab-btn i {
    margin-right: 5px
}

.tab-btn:hover, table.schedule tbody tr.today-row .td-date {
    color: var(--gold-l)
}

.tab-btn.active {
    color: var(--gold);
    border-bottom-color: var(--gold)
}

.tab-pane.active {
    display: block
}

.countdown-card {
    background: var(--card);
    border-radius: 20px;
    padding: 32px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 18px
}

.digit-block, .mini-card {
    border: 1px solid var(--border)
}

.countdown-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center,rgba(201,168,76,.05) 0,transparent 60%);
    pointer-events: none
}

.countdown-label {
    font-size: .7rem;
    letter-spacing: .2em;
    color: var(--dim);
    margin-bottom: 6px
}

.countdown-type {
    font-size: 1.3rem;
    margin-bottom: 24px
}

    .countdown-type.sahur, .digit-block.sahur .num, .mini-card.sahur .mc-time {
        color: var(--sahur)
    }

    .countdown-type.iftar, .digit-block.iftar .num, .mini-card.iftar .mc-time {
        color: var(--iftar)
    }

.countdown-digits {
    display: flex;
    justify-content: center;
    gap: clamp(6px,2vw,14px);
    align-items: center
}

.digit-block {
    background: var(--card2);
    border-radius: 14px;
    min-width: clamp(64px,18vw,88px);
    padding: 14px 10px 10px
}

.mini-card, .status-bar {
    background: var(--card);
    text-align: center
}

.digit-block .num {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    line-height: 1;
    font-variant-numeric: tabular-nums
}

.digit-block .lbl {
    font-size: .6rem;
    letter-spacing: .12em;
    color: var(--dim);
    margin-top: 6px
}

.digit-sep {
    font-size: clamp(1.6rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--dim);
    line-height: 1;
    margin-bottom: 14px
}

.today-mini-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px
}

.schedule-header, .status-bar {
    display: flex;
    align-items: center
}

.mini-card {
    border-radius: 16px;
    padding: 16px
}

.search-input, .status-bar {
    border: 1px solid var(--border)
}

.mini-card .mc-icon {
    font-size: 1.4rem;
    margin-bottom: 6px
}

.mini-card .mc-label {
    font-size: .65rem;
    letter-spacing: .12em;
    color: var(--dim);
    margin-bottom: 4px
}

.mini-card .mc-time {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    font-weight: 700
}

.mini-card .mc-date, table.schedule .td-day {
    color: var(--dim);
    font-size: .72rem
}

.mini-card .mc-date {
    margin-top: 4px
}

.status-bar {
    border-radius: 12px;
    padding: 11px 18px;
    justify-content: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--silver);
    margin-bottom: 8px
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    animation: 1.5s ease-in-out infinite blink
}

@keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .2
    }
}

.schedule-header {
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px
}

    .schedule-header h5 {
        font-size: .82rem;
        color: var(--gold);
        margin: 0
    }

.search-input {
    background: var(--card);
    border-radius: 10px;
    color: var(--text);
    font-family: Cairo,sans-serif;
    font-size: .8rem;
    padding: 6px 12px;
    outline: 0;
    width: 160px;
    transition: border-color .2s
}

    .search-input::placeholder {
        color: var(--dim)
    }

    .search-input:focus {
        border-color: var(--gold-d)
    }

.schedule-table-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    max-height: 60vh;
    overflow-y: auto
}

    .schedule-table-wrap::-webkit-scrollbar {
        width: 4px
    }

    .schedule-table-wrap::-webkit-scrollbar-track {
        background: 0 0
    }

    .schedule-table-wrap::-webkit-scrollbar-thumb {
        background: var(--gold-d);
        border-radius: 4px
    }

table.schedule {
    width: 100%;
    border-collapse: collapse
}

    table.schedule thead {
        position: sticky;
        top: 0;
        z-index: 2
    }

        table.schedule thead th {
            background: var(--card2);
            padding: 13px 14px;
            font-size: .68rem;
            letter-spacing: .16em;
            color: var(--gold);
            text-align: left;
            border-bottom: 1px solid var(--border)
        }

    table.schedule tbody tr {
        border-bottom: 1px solid rgba(201,168,76,.08);
        transition: background .15s
    }

        table.schedule tbody tr:last-child {
            border-bottom: none
        }

        table.schedule tbody tr:hover {
            background: rgba(201,168,76,.04)
        }

        table.schedule tbody tr.today-row {
            background: var(--today-bg);
            box-shadow: inset 3px 0 0 var(--today-brd)
        }

            table.schedule tbody tr.today-row .td-iftar, table.schedule tbody tr.today-row .td-sahur {
                font-size: 1.05rem
            }

    table.schedule tbody td {
        padding: 11px 14px;
        font-size: .85rem
    }

    table.schedule .td-date {
        color: var(--text);
        font-weight: 600
    }

    table.schedule .td-sahur {
        color: var(--sahur);
        font-weight: 700;
        font-size: .95rem
    }

    table.schedule .td-iftar {
        color: var(--iftar);
        font-weight: 700;
        font-size: .95rem
    }

.badge-today {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--gold);
    color: var(--night);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle
}

.loading-screen {
    text-align: center;
    padding: 70px 20px;
    color: var(--dim)
}

.loading-spinner {
    font-size: 2.2rem;
    color: var(--gold);
    animation: 1.5s linear infinite spin;
    display: block;
    margin-bottom: 14px
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.error-box {
    background: rgba(220,53,69,.1);
    border: 1px solid rgba(220,53,69,.3);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #f87171
}

.toast-wrap {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: calc(100% - 32px);
    max-width: 420px
}

.toast-msg {
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: .8rem;
    color: var(--silver);
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    opacity: 0;
    transition: opacity .3s
}

    .toast-msg.show {
        opacity: 1
    }

@keyframes spin-icon {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.spin-icon {
    display: inline-block;
    animation: .8s linear infinite spin-icon
}

@media (max-width:768px) {
    .wrapper {
        padding: 16px 12px 50px
    }

    .site-header {
        padding: 20px 0 12px
    }

    .arabic-title {
        font-size: 1.6rem
    }

    .crescent {
        font-size: 2rem
    }

    .search-input {
        width: 130px
    }

    .schedule-table-wrap {
        max-height: 55vh
    }
}

@media (max-width:480px) {
    .location-bar, .schedule-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .btn-locate-full {
        width: 100%;
        justify-content: center
    }

    .search-input {
        width: 100%
    }

    .tab-btn {
        font-size: .75rem;
        letter-spacing: .04em;
        padding: 10px 0
    }

        .tab-btn i {
            margin-right: 3px
        }

    .today-mini-cards {
        gap: 8px
    }

    .mini-card {
        padding: 13px 10px;
        border-radius: 12px
    }

        .mini-card .mc-icon {
            font-size: 1.2rem
        }

    .countdown-card {
        padding: 24px 14px;
        border-radius: 16px
    }

    table.schedule thead th {
        padding: 10px;
        font-size: .62rem
    }

    table.schedule tbody td {
        padding: 9px 10px
    }

    .badge-today {
        display: none
    }

    .status-bar {
        font-size: .75rem;
        padding: 9px 12px
    }
}

@media (max-width:360px) {
    .arabic-title {
        font-size: 1.3rem
    }

    .digit-sep {
        font-size: 1.4rem
    }
}