/* iiSHEEG Islamic Calendar Showcase V1
   Scope: Islamic Calendar result panel only. */

#ii-calendar-panel{
    overflow:visible;
}

#iiCalendarResult{
    margin-top:14px;
}

.ii-islamic-showcase{
    --ii-ink:#f8fbff;
    --ii-muted:rgba(238,247,255,.70);
    --ii-soft:rgba(238,247,255,.48);
    --ii-teal:#5eead4;
    --ii-green:#34d399;
    --ii-gold:#f4c76b;
    --ii-deep:#071a2f;
    position:relative;
    display:grid;
    gap:18px;
    padding:18px;
    border:1px solid rgba(94,234,212,.24);
    border-radius:18px;
    background:
        radial-gradient(circle at 78% 0%,rgba(244,199,107,.08),transparent 30%),
        radial-gradient(circle at 10% 15%,rgba(52,211,153,.10),transparent 34%),
        linear-gradient(145deg,#071a2f 0%,#0a2440 52%,#081b31 100%);
    box-shadow:0 18px 50px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04);
    color:var(--ii-ink);
    overflow:hidden;
}

.ii-islamic-showcase::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background-image:
        linear-gradient(30deg,transparent 48%,rgba(244,199,107,.14) 49%,rgba(244,199,107,.14) 51%,transparent 52%),
        linear-gradient(150deg,transparent 48%,rgba(94,234,212,.08) 49%,rgba(94,234,212,.08) 51%,transparent 52%);
    background-size:44px 76px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 42%);
}

.ii-calendar-summary-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(190px,.75fr) minmax(190px,.75fr) minmax(320px,1.7fr);
    gap:12px;
}

.ii-date-panel,
.ii-hijri-progress-panel{
    position:relative;
    min-width:0;
    border:1px solid rgba(244,199,107,.20);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.ii-date-panel{
    display:flex;
    align-items:center;
    gap:13px;
    padding:18px;
}

.ii-date-icon{
    display:grid;
    place-items:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    border:1px solid rgba(94,234,212,.25);
    border-radius:50%;
    background:rgba(20,184,166,.14);
    color:var(--ii-teal);
    font-size:20px;
}

.ii-date-panel small,
.ii-hijri-progress-copy span,
.ii-event-kicker,
.ii-countdown-metrics span{
    display:block;
    color:var(--ii-teal);
    font-size:20px;
    font-weight:850;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.ii-date-panel strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:18px;
    line-height:1.25;
}

.ii-hijri-progress-panel{
    padding:17px 18px 15px;
}

.ii-hijri-progress-copy strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:13px;
    line-height:1.45;
}

.ii-hijri-progress-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    margin-top:14px;
}

.ii-hijri-track,
.ii-event-track,
.ii-hajj-rail{
    position:relative;
    height:8px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}

.ii-hijri-track i,
.ii-event-track i,
.ii-hajj-rail i{
    position:absolute;
    inset:0 auto 0 0;
    display:block;
    border-radius:inherit;
}

.ii-hijri-track i{
    background:linear-gradient(90deg,#14b8a6,#67e8f9);
    box-shadow:0 0 14px rgba(94,234,212,.42);
    transition:width .8s cubic-bezier(.2,.8,.2,1);
}

.ii-hijri-progress-row b{
    color:var(--ii-teal);
    font-size:17px;
}

.ii-hijri-progress-panel p{
    margin:10px 0 0;
    color:var(--ii-muted);
    font-size:11px;
    line-height:1.55;
}

.ii-event-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1.12fr;
    gap:14px;
}

.ii-event-card{
    position:relative;
    display:grid;
    gap:15px;
    min-width:0;
    padding:20px;
    border:1px solid rgba(244,199,107,.32);
    border-radius:17px;
    overflow:hidden;
    isolation:isolate;
    transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.ii-event-card:hover{
    transform:translateY(-2px);
    border-color:rgba(244,199,107,.55);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.ii-ramadan-card{
    background:
        radial-gradient(circle at 10% 80%,rgba(244,199,107,.11),transparent 26%),
        radial-gradient(circle at 75% 20%,rgba(52,211,153,.12),transparent 34%),
        linear-gradient(145deg,#073631,#082c32 58%,#071f2d);
}

.ii-hajj-card{
    background:
        radial-gradient(circle at 92% 70%,rgba(244,199,107,.13),transparent 27%),
        linear-gradient(145deg,#081f3a,#0a2947 58%,#071b31);
}

.ii-event-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.16;
    background-image:radial-gradient(circle,rgba(255,255,255,.30) 1px,transparent 1px);
    background-size:19px 19px;
    mask-image:linear-gradient(135deg,#000,transparent 58%);
}

.ii-card-ornament{
    position:absolute;
    top:7px;
    color:rgba(244,199,107,.58);
    font-size:17px;
}

.ii-card-ornament-left{left:10px}
.ii-card-ornament-right{right:10px}

.ii-event-header{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.ii-event-emblem{
    display:grid;
    place-items:center;
    flex:0 0 43px;
    width:43px;
    height:43px;
    border:1px solid rgba(244,199,107,.28);
    border-radius:50%;
    background:rgba(244,199,107,.10);
    color:var(--ii-gold);
    font-size:21px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.ii-event-header h3{
    margin:4px 0 3px;
    color:#fff;
    font-size:19px;
    line-height:1.2;
}

.ii-event-header p{
    margin:0;
    color:var(--ii-muted);
    font-size:22px;
    line-height:1.55;
}

.ii-hajj-card .ii-event-kicker,
.ii-hajj-card .ii-event-emblem{
    color:var(--ii-gold);
}

.ii-countdown-metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.ii-countdown-metrics>div{
    padding:12px 13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:rgba(3,15,28,.25);
}

.ii-countdown-metrics strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:15px;
    line-height:1.35;
}

.ii-event-date-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 12px;
    border:1px solid rgba(94,234,212,.18);
    border-radius:11px;
    background:rgba(3,15,28,.22);
}

.ii-event-date-pill span{
    color:var(--ii-teal);
    font-size:20px;
    font-weight:850;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.ii-event-date-pill strong{
    color:#fff;
    font-size:14px;
    line-height:1.3;
    text-align:right;
}

.ii-hajj-date-pill{
    border-color:rgba(244,199,107,.24);
}

.ii-hajj-date-pill span{
    color:var(--ii-gold);
}

.ii-estimated-days{
    display:flex!important;
    align-items:baseline;
    gap:9px;
    margin-top:5px!important;
}

.ii-estimated-days b{
    color:#fff;
    font-size:32px;
    font-weight:900;
    line-height:.95;
    letter-spacing:-.035em;
}

.ii-ramadan-card .ii-estimated-days b{
    color:var(--ii-teal);
    text-shadow:0 0 18px rgba(94,234,212,.18);
}

.ii-hajj-card .ii-estimated-days b{
    color:var(--ii-gold);
    text-shadow:0 0 18px rgba(244,199,107,.18);
}

.ii-estimated-days small{
    color:rgba(255,255,255,.76);
    font-size:24px;
    font-weight:750;
    line-height:1.25;
}

.ii-ramadan-visual{
    position:relative;
    min-height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px 8px 2px 38px;
}

.ii-lantern{
    position:absolute;
    left:4px;
    top:3px;
    display:grid;
    place-items:center;
    width:30px;
    height:50px;
    border:1px solid rgba(244,199,107,.45);
    border-radius:10px 10px 13px 13px;
    color:var(--ii-gold);
    background:radial-gradient(circle,rgba(244,199,107,.28),transparent 58%);
    box-shadow:0 0 24px rgba(244,199,107,.13);
    animation:iiLanternGlow 3.2s ease-in-out infinite;
}

.ii-lantern::before{
    content:"";
    position:absolute;
    top:-7px;
    width:13px;
    height:8px;
    border:1px solid rgba(244,199,107,.45);
    border-bottom:0;
    border-radius:8px 8px 0 0;
}

.ii-moon-phases{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    width:100%;
}

.ii-moon-phase{
    --ii-moon-dark:#07302f;
    position:relative;
    display:block;
    width:22px;
    height:22px;
    flex:0 0 22px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#fff4c9,#f4c76b 62%,#c68d2e);
    box-shadow:0 0 10px rgba(244,199,107,.22);
    overflow:hidden;
    animation:iiMoonBreathe 4.6s ease-in-out infinite;
    animation-delay:calc(var(--ii-phase-index) * .13s);
}

.ii-moon-phase::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:50%;
    background:var(--ii-moon-dark);
}

.ii-moon-phase-1::after{transform:translateX(-4px)}
.ii-moon-phase-2::after{transform:translateX(-8px)}
.ii-moon-phase-3::after{transform:translateX(-13px)}
.ii-moon-phase-4::after{transform:translateX(-18px)}
.ii-moon-phase-5::after{display:none}
.ii-moon-phase-6::after{transform:translateX(18px)}
.ii-moon-phase-7::after{transform:translateX(13px)}
.ii-moon-phase-8::after{transform:translateX(8px)}
.ii-moon-phase-9::after{transform:translateX(4px)}

.ii-moon-phase.is-current{
    outline:2px solid var(--ii-teal);
    outline-offset:3px;
    box-shadow:0 0 20px rgba(94,234,212,.42);
}

.ii-event-progress{
    display:grid;
    gap:7px;
}

.ii-event-progress-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:var(--ii-muted);
    font-size:10px;
}

.ii-event-progress-head strong{
    color:#fff;
}

.ii-event-track i{
    width:var(--ii-event-progress);
    background:linear-gradient(90deg,#14b8a6,#67e8f9);
    box-shadow:0 0 14px rgba(94,234,212,.32);
    transition:width .8s cubic-bezier(.2,.8,.2,1);
}

.ii-event-track b{
    position:absolute;
    top:50%;
    left:clamp(2%,var(--ii-event-progress),97%);
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    width:23px;
    height:23px;
    border:1px solid rgba(94,234,212,.42);
    border-radius:50%;
    background:#0a3440;
    color:#fff;
    font-size:13px;
    transition:left .8s cubic-bezier(.2,.8,.2,1);
}

.ii-hajj-journey{
    display:grid;
    gap:12px;
    padding-top:12px;
}

.ii-hajj-rail{
    height:5px;
    margin:0 18px;
    background:rgba(244,199,107,.14);
}

.ii-hajj-rail i{
    width:var(--ii-hajj-progress);
    background:linear-gradient(90deg,#d89d39,#ffe29a);
    box-shadow:0 0 14px rgba(244,199,107,.36);
    transition:width .9s cubic-bezier(.2,.8,.2,1);
}

.ii-pilgrim-marker{
    position:absolute;
    left:clamp(2%,var(--ii-hajj-progress),93%);
    bottom:2px;
    width:31px;
    color:#d7a647;
    transform:translateX(-50%);
    filter:drop-shadow(0 5px 6px rgba(0,0,0,.28));
    transition:left .9s cubic-bezier(.2,.8,.2,1);
    animation:iiPilgrimStep 2.2s ease-in-out infinite;
}

.ii-pilgrim-svg{
    display:block;
    width:31px;
    height:auto;
}

.ii-kaaba-goal{
    position:absolute;
    right:-12px;
    top:50%;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border:1px solid rgba(244,199,107,.45);
    border-radius:50%;
    background:#102642;
    font-size:15px;
    box-shadow:0 0 18px rgba(244,199,107,.20);
}

.ii-hajj-stages{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;
}

.ii-hajj-stage{
    display:grid;
    justify-items:center;
    gap:4px;
    color:rgba(255,255,255,.33);
    text-align:center;
    transition:color .3s ease,transform .3s ease;
}

.ii-hajj-stage b{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    background:rgba(255,255,255,.025);
    font-size:12px;
}

.ii-hajj-stage small{
    font-size:8px;
}

.ii-hajj-stage.is-reached{
    color:var(--ii-gold);
    transform:translateY(-1px);
}

.ii-hajj-stage.is-reached b{
    border-color:rgba(244,199,107,.40);
    background:rgba(244,199,107,.10);
}

.ii-event-footer{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding-top:11px;
    border-top:1px solid rgba(255,255,255,.08);
    color:var(--ii-soft);
    font-size:18px;
    line-height:1.45;
}

.ii-event-footer strong{
    color:#fff;
}

.ii-calendar-disclaimer{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:10px 12px;
    border-top:1px solid rgba(94,234,212,.16);
    color:var(--ii-muted);
}

.ii-calendar-disclaimer span{
    color:var(--ii-teal);
    font-size:15px;
}

.ii-calendar-disclaimer p{
    margin:0;
    font-size:18px;
    line-height:1.55;
}

@keyframes iiMoonBreathe{
    0%,100%{transform:translateY(0) scale(.95);opacity:.72}
    50%{transform:translateY(-2px) scale(1.05);opacity:1}
}

@keyframes iiLanternGlow{
    0%,100%{filter:brightness(.9);transform:translateY(0)}
    50%{filter:brightness(1.18);transform:translateY(-2px)}
}

@keyframes iiPilgrimStep{
    0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)}
    50%{transform:translateX(-50%) translateY(-2px) rotate(1deg)}
}

@media(max-width:1050px){
    .ii-calendar-summary-grid{
        grid-template-columns:1fr 1fr;
    }

    .ii-hijri-progress-panel{
        grid-column:1/-1;
    }

    .ii-event-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:680px){
    .ii-islamic-showcase{
        padding:12px;
        gap:12px;
    }

    .ii-calendar-summary-grid,
    .ii-countdown-metrics{
        grid-template-columns:1fr;
    }

    .ii-event-card{
        padding:16px;
    }

    .ii-event-footer{
        flex-direction:column;
        gap:4px;
    }

    .ii-event-date-pill{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

    .ii-event-date-pill strong{
        text-align:left;
    }

    .ii-estimated-days b{
        font-size:30px;
    }

    .ii-event-kicker,
    .ii-countdown-metrics span,
    .ii-event-date-pill span{
        font-size:16px;
    }

    .ii-event-header p{
        font-size:18px;
    }

    .ii-estimated-days small{
        font-size:18px;
    }

    .ii-event-footer{
        font-size:15px;
    }

    .ii-calendar-disclaimer p{
        font-size:15px;
    }

    .ii-moon-phases{
        gap:5px;
    }

    .ii-moon-phase{
        width:18px;
        height:18px;
        flex-basis:18px;
    }

    .ii-hajj-stage small{
        font-size:7px;
    }
}

@media(prefers-reduced-motion:reduce){
    .ii-islamic-showcase *,
    .ii-islamic-showcase *::before,
    .ii-islamic-showcase *::after{
        animation:none!important;
        transition:none!important;
    }
}