/* =========================================================
   JEENA • style.css
   ========================================================= */

/* =========================================================
   0) RESET + GLOBAL
   ========================================================= */
html,
body {
    overflow-x: hidden;
}

body {
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
}

/* =========================================================
   1) THEME TOKENS
   ========================================================= */
:root {
    --jn-navy: #061333;
    --jn-navy2: #0b1e49;
    --jn-gold: #c9a24d;
    --jn-gold2: #f1d58a;

    --jn-line: rgba(0, 0, 0, 0.08);
    --jn-glass: rgba(255, 255, 255, 0.62);
    --jn-glass2: rgba(255, 255, 255, 0.78);

    --jn-textMuted: #5b6476;
}

/* =========================================================
   2) REVEAL SYSTEM (UNIFIED) + LEGACY SUPPORT
   ========================================================= */
:where(.jn-reveal, .reveal, .jeena-reveal) {
    opacity: 0;
    transform: translate3d(0, var(--jn-reveal-y, 14px), 0);
    transition:
        opacity var(--jn-reveal-opacity, 520ms) ease-out,
        transform var(--jn-reveal-transform, 640ms)
            cubic-bezier(0.2, 0.7, 0.2, 1),
        filter var(--jn-reveal-filter, 0ms) ease;
    transition-delay: var(--jn-reveal-delay, 0ms);
    will-change: opacity, transform;
}

:where(
    .jn-reveal.jn-from-bottom,
    .reveal.from-bottom,
    .jeena-reveal.jn-from-bottom
) {
    transform: translate3d(0, 16px, 0);
}

:where(.jn-reveal.jn-from-top, .reveal.from-top, .jeena-reveal.jn-from-top) {
    transform: translate3d(0, -16px, 0);
}

:where(.jn-reveal.jn-from-left, .reveal.from-left, .jeena-reveal.jn-from-left) {
    transform: translate3d(-40px, 0, 0);
}

:where(
    .jn-reveal.jn-from-right,
    .reveal.from-right,
    .jeena-reveal.jn-from-right
) {
    transform: translate3d(40px, 0, 0);
}

:where(.jn-reveal.jn-in, .reveal.is-in, .jeena-reveal.is-visible) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    :where(.jn-reveal, .reveal, .jeena-reveal) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }
}

/* =========================================================
   10) LAZY IMAGES (global blur until loaded)
   ========================================================= */
img.jn-lazy[data-src],
img.jeena-lazy[data-src] {
    filter: blur(10px);
    transform: scale(1.02);
    transition:
        filter 0.35s ease,
        transform 0.35s ease,
        opacity 0.35s ease;
    opacity: 0.92;
}

img.jn-lazy:not([data-src]),
img.jeena-lazy:not([data-src]) {
    filter: blur(0);
    transform: none;
    opacity: 1;
}

/* =========================================================
   3) SHARED UI HELPERS (buttons / chips / inputs)
   ========================================================= */
.jeena-hidden {
    display: none;
}

.jn-divider {
    height: 1px;
    background: var(--jn-line);
}

.jn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(11, 30, 73, 0.75);
    font-weight: 800;
    font-size: 12px;
}

.jn-pill-gold {
    background: rgba(201, 162, 77, 0.14);
    border-color: rgba(201, 162, 77, 0.28);
    color: rgba(11, 30, 73, 0.92);
}

.jn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    font-weight: 900;
    letter-spacing: 0.2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
    user-select: none;
    text-decoration: none;
}

.jn-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 60px -40px rgba(0, 0, 0, 0.45);
}

.jn-btn-primary {
    background: var(--jn-navy2);
    color: #fff;
    border-color: rgba(11, 30, 73, 0.18);
}

.jn-btn-primary:hover {
    box-shadow: 0 26px 70px -50px rgba(11, 30, 73, 0.8);
}

.jn-btn-ghost {
    background: rgba(255, 255, 255, 0.7);
    color: rgba(11, 30, 73, 0.9);
}

.jn-btn-soft {
    background: rgba(11, 30, 73, 0.06);
    color: rgba(11, 30, 73, 0.92);
    border-color: rgba(11, 30, 73, 0.1);
}

.jn-circleBtn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(11, 30, 73, 0.9);
    font-weight: 900;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.jn-circleBtn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 60px -44px rgba(0, 0, 0, 0.45);
}

.jn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 36px;
    padding: 0 0.95rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.7);
    font-weight: 800;
    font-size: 12px;
    color: rgba(11, 30, 73, 0.88);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.jn-chip:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(201, 162, 93, 0.55);
    box-shadow: 0 14px 40px -28px rgba(11, 30, 73, 0.25);
    transform: translateY(-1px);
}

.jn-chip:active {
    transform: translateY(0);
}

.jn-chip.is-active,
.jn-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, #c9a25d 0%, #b8914d 100%);
    color: #fff;
    border-color: rgba(201, 162, 93, 0.95);
    box-shadow: 0 16px 44px -30px rgba(201, 162, 93, 0.55);
}

.jn-input {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.84);
    padding: 12px 14px;
    font-weight: 850;
    font-size: 13px;
    color: rgba(11, 30, 73, 0.95);
    outline: none;
}

.jn-input:focus {
    box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.28);
}

.jn-matteCard {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    box-shadow: 0 32px 90px -70px rgba(0, 0, 0, 0.45);
}

body.services-page .matte {
    background: rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 30px 80px -60px rgba(0, 0, 0, 0.35);
}

.jn-softCard {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 30px 90px -70px rgba(0, 0, 0, 0.35);
}

.jn-includedItem {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 50px -42px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   4) BREADCRUMB
   ========================================================= */
.jn-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 12px;
    color: rgba(11, 30, 73, 0.7);
}

.jn-breadcrumb a {
    color: rgba(11, 30, 73, 0.86);
    text-decoration: none;
    border-bottom: 1px dashed rgba(11, 30, 73, 0.25);
}

.jn-breadcrumb a:hover {
    border-bottom-color: rgba(201, 162, 77, 0.75);
}

.jn-bcSep {
    opacity: 0.55;
}

.jn-bcCurrent {
    color: rgba(11, 30, 73, 0.92);
    background: rgba(201, 162, 77, 0.14);
    border: 1px solid rgba(201, 162, 77, 0.28);
    padding: 6px 10px;
    border-radius: 999px;
}

/* =========================================================
   5) HEADER
   ========================================================= */
.jn-headRow {
    display: flex;
    gap: 18px;
    align-items: stretch;
    justify-content: space-between;
}

.jn-headLeft {
    min-width: 0;
}

.jn-headTitle {
    margin-top: 14px;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.1;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.98);
}

.jn-headSub {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(91, 100, 118, 0.95);
}

.jn-liveCard {
    flex: 0 0 220px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--jn-navy2), var(--jn-navy));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 26px 80px -58px rgba(6, 19, 51, 0.75);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.jn-liveTop {
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.14em;
    opacity: 0.82;
}

.jn-liveNum {
    margin-top: 6px;
    font-size: 34px;
    font-weight: 1100;
    color: var(--jn-gold2);
    letter-spacing: 0.04em;
}

.jn-liveSub {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 900;
    opacity: 0.82;
}

@media (max-width: 740px) {
    .jn-headRow {
        flex-direction: column;
        align-items: flex-start;
    }

    .jn-liveCard {
        width: 100%;
        flex-basis: auto;
        text-align: left;
        align-items: flex-start;
    }

    .jn-liveNum {
        font-size: 32px;
    }
}

/* =========================================================
   HERO BACKGROUND SLIDER
   ========================================================= */
.jn-heroBgSlider {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.jn-heroBgSlide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.jn-heroBgSlide.is-active {
    opacity: 1;
}

.jn-heroBgSlide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.05);
    animation: jnHeroBgZoom 8s linear infinite;
}

@keyframes jnHeroBgZoom {
    0% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jn-heroBgSlide {
        transition: none !important;
    }

    .jn-heroBgSlide img {
        animation: none !important;
        transform: scale(1.05);
    }
}

/* =========================================================
   9) SPLIT LIST (service branch)
   ========================================================= */
.jn-split {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 18px;
}

@media (max-width: 1024px) {
    .jn-split {
        grid-template-columns: 1fr;
    }
}

.jn-panel {
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 32px 90px -70px rgba(0, 0, 0, 0.45);
}

.jn-row {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 14px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.72);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
    overflow: hidden;
    text-decoration: none;
}

.jn-row:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 26px 70px -60px rgba(0, 0, 0, 0.4);
}

.jn-thumb {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    aspect-ratio: 4 / 3;
}

.jn-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jn-miniTag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.74);
    font-weight: 900;
    font-size: 11px;
    color: rgba(11, 30, 73, 0.86);
    gap: 8px;
}

.jn-miniTag i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--jn-gold);
    display: inline-block;
}

.jn-rowEnd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding-left: 4px;
}

.jn-rowPrice {
    font-size: 13px;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.96);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .jn-row {
        grid-template-columns: 74px 1fr;
        grid-template-rows: auto auto;
        align-items: start;
    }

    .jn-rowEnd {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 0;
        margin-top: 4px;
    }

    .jn-rowPrice {
        white-space: normal;
    }
}

/* =========================================================
   19) CHECKOUT PAYMENT (Scoped)
   ========================================================= */
body[data-page="checkout-payment"] :focus-visible {
    outline: 3px solid rgba(201, 162, 77, 0.45);
    outline-offset: 2px;
}

body[data-page="checkout-payment"] * {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="checkout-payment"] .jn-checkoutCard {
    background: var(--jn-glass);
    border: 1px solid var(--jn-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 28px;
    box-shadow: 0 32px 90px -70px rgba(0, 0, 0, 0.45);
}

body[data-page="checkout-payment"] .jn-msg-ok {
    color: rgba(5, 150, 105, 0.95);
}
body[data-page="checkout-payment"] .jn-msg-err {
    color: rgba(220, 38, 38, 0.95);
}
body[data-page="checkout-payment"] .jn-msg-muted {
    color: rgba(91, 100, 118, 0.95);
}

body[data-page="checkout-payment"] input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.28);
    border-radius: 999px;
}

@media (max-width: 1023.98px) {
    body[data-page="checkout-payment"] .jn-stickyOff {
        position: static !important;
        top: auto !important;
    }
}

/* =========================================================
   11) JEENA BIALNASI (Premium Gold Hero)
   ========================================================= */
.jn-bial {
    position: relative;
    overflow: hidden;
    background: #050b1d;
    padding: 84px 18px;
}

.jn-bial-bg {
    position: absolute;
    inset: 0;
    background-image: url("./img/jeena-half-gold-hero.webp");
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    filter: saturate(1.05);
}

.jn-bial-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            900px 500px at 75% 25%,
            rgba(217, 167, 71, 0.18),
            transparent 65%
        ),
        linear-gradient(
            120deg,
            rgba(35, 24, 6, 0.82),
            rgba(88, 60, 15, 0.72),
            rgba(140, 100, 35, 0.55)
        );
}

.jn-bial-wrap {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

.jn-bial-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 34px;
    align-items: center;
}

.jn-bial-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.jn-bial-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 120px -110px rgba(0, 0, 0, 0.9);
    text-decoration: none;
}

.jn-bial-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.03);
}

.jn-bial-cardShade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78),
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0.05)
    );
}

.jn-bial-card--big {
    grid-column: 1 / -1;
    height: 240px;
    border-radius: 26px;
}

.jn-bial-card--sm {
    height: 150px;
}

.jn-bial-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 72px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(217, 167, 71, 0.55);
    backdrop-filter: blur(10px);
    color: #f1d58a;
    text-align: center;
    padding: 10px 8px;
}

.jn-bial-badgeTop,
.jn-bial-badgeBot {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.jn-bial-badgeNum {
    font-size: 22px;
    font-weight: 1100;
}

.jn-bial-cardText {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    color: #fff;
}

.jn-bial-cardTag {
    font-size: 12px;
    font-weight: 800;
    color: #f1d58a;
}

.jn-bial-cardTitle {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 1000;
    letter-spacing: 0.2px;
}

.jn-bial-cardTextSm {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    color: #fff;
}

.jn-bial-miniTag {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(217, 167, 71, 0.4);
    font-size: 11px;
    font-weight: 900;
    color: #f1d58a;
}

.jn-bial-miniTitle {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 1000;
}

.jn-bial-topPill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(217, 167, 71, 0.4);
    background: rgba(217, 167, 71, 0.15);
    color: #f1d58a;
    font-weight: 900;
    font-size: 12px;
}

.jn-bial-brand {
    margin-top: 18px;
    font-family: "Playfair Display", serif;
    font-size: 54px;
    font-weight: 900;
    background: linear-gradient(90deg, #f1d58a, #c9a24d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 3px 25px rgba(0, 0, 0, 0.65);
}

.jn-bial-title {
    margin-top: 10px;
    font-size: clamp(36px, 4.2vw, 62px);
    font-weight: 1100;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
    line-height: 1.05;
}

.jn-bial-plus {
    display: block;
    margin-top: 6px;
    font-size: clamp(40px, 4.6vw, 70px);
    background: linear-gradient(90deg, #f8e7b0, #d9a747);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.jn-bial-sub {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 650;
    line-height: 1.85;
    max-width: 560px;
}

.jn-bial-chips {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jn-bial-chip {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(217, 167, 71, 0.35);
    color: #fff;
    font-weight: 850;
    font-size: 12px;
}

.jn-bial-ctaRow {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.jn-bial-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c9a24d, #f1d58a);
    color: #061333;
    font-weight: 1000;
    text-decoration: none;
    box-shadow: 0 28px 90px -70px rgba(217, 167, 71, 0.55);
}

.jn-bial-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
}

.jn-bial-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 850;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
}

.jn-bial-link:hover {
    color: #fff;
    border-bottom-color: rgba(217, 167, 71, 0.7);
}

.jn-bial-countdown {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.85);
}

.jn-bial-countLabel {
    font-weight: 900;
    font-size: 12px;
}

.jn-bial-time {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jn-bial-timeBox {
    width: 70px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(217, 167, 71, 0.35);
    text-align: center;
}

.jn-bial-timeNum {
    font-size: 18px;
    font-weight: 1100;
    color: #f1d58a;
}

.jn-bial-timeTxt {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 900;
    opacity: 0.75;
}

.jn-bial-note {
    width: 100%;
    font-size: 11px;
    font-weight: 800;
    opacity: 0.65;
    margin-top: 6px;
}

@media (max-width: 1024px) {
    .jn-bial-grid {
        grid-template-columns: 1fr;
    }

    .jn-bial-brand {
        font-size: 46px;
    }
}

@media (max-width: 640px) {
    .jn-bial {
        padding: 64px 14px;
    }

    .jn-bial-card--big {
        height: 210px;
    }

    .jn-bial-card--sm {
        height: 140px;
    }

    .jn-bial-timeBox {
        width: 64px;
    }
}

/* =========================================================
   12) JEENA BIALNASI PAGE BACKGROUND + EFFECTS
   ========================================================= */
body.jeena-bialnasi-page {
    background-image:
        linear-gradient(
            135deg,
            rgba(252, 246, 238, 0.72),
            rgba(242, 230, 214, 0.68),
            rgba(226, 205, 178, 0.66)
        ),
        radial-gradient(
            900px 520px at 70% 20%,
            rgba(255, 255, 255, 0.22),
            transparent 64%
        ),
        radial-gradient(
            900px 520px at 20% 85%,
            rgba(217, 161, 90, 0.12),
            transparent 70%
        ),
        url("./img/jeena-half-gold-hero.webp");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.matte {
    background: rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 30px 80px -60px rgba(0, 0, 0, 0.35);
}

.spotlight {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #b9853d, #e8c9a0, #c9924a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.spotlight::after {
    content: "";
    position: absolute;
    inset: -12px -18px;
    background: radial-gradient(
        520px 180px at 30% 50%,
        rgba(255, 255, 255, 0.3),
        transparent 60%
    );
    filter: blur(10px);
    opacity: 0.75;
    pointer-events: none;
    transform: translateX(var(--sx, 0px));
    transition: transform 0.2s ease;
}
#half-jeena-marquee {
    overflow: hidden;
}

.jeena-marquee {
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee-track {
    display: flex;
    flex-shrink: 0;
    min-width: max-content;
}

@media (prefers-reduced-motion: reduce) {
    .jeena-marquee {
        transform: none !important;
    }
}
/* =========================================================
   13) SCRATCH SECTION
   ========================================================= */
.jn-scratchWrap {
    padding: 0 1rem 3.5rem;
}

@media (min-width: 640px) {
    .jn-scratchWrap {
        padding: 0 1.5rem 4rem;
    }
}

@media (min-width: 1024px) {
    .jn-scratchWrap {
        padding: 0 2rem 4.5rem;
    }
}

.jn-scratchCard {
    max-width: 80rem;
    margin: 0 auto;
    border-radius: 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 30px 80px -60px rgba(0, 0, 0, 0.35);
    padding: 1.75rem;
}

@media (min-width: 640px) {
    .jn-scratchCard {
        padding: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .jn-scratchCard {
        padding: 2.75rem;
    }
}

.jn-scratchGrid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .jn-scratchGrid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 2.5rem;
    }
}

.jn-scratchPill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 800;
    font-size: 12px;
    color: rgba(11, 30, 73, 0.75);
    width: fit-content;
}

.jn-scratchTitle {
    margin-top: 1.1rem;
    font-weight: 1000;
    line-height: 1.03;
    letter-spacing: -0.02em;
    font-size: clamp(32px, 4.2vw, 60px);
    color: #0b1e49;
}

.jn-scratchTitle .gold {
    color: transparent;
    background: linear-gradient(to right, #b9853d, #e8c9a0, #c9924a);
    -webkit-background-clip: text;
    background-clip: text;
}

.jn-scratchDesc {
    margin-top: 1rem;
    max-width: 42rem;
    color: rgba(42, 27, 18, 0.72);
    font-weight: 650;
    line-height: 1.7;
    font-size: 15px;
}

.jn-prizeList {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.9rem;
    max-width: 520px;
}

.jn-prizeRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 50px -40px rgba(0, 0, 0, 0.22);
    flex-wrap: wrap;
}

.jn-prizeLeft {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.jn-prizeIcon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 162, 77, 0.16);
    border: 1px solid rgba(201, 162, 77, 0.24);
    font-size: 20px;
    flex: 0 0 auto;
}

.jn-prizeText {
    min-width: 0;
}

.jn-prizeLabel {
    font-size: 12px;
    font-weight: 900;
    color: rgba(91, 100, 118, 0.85);
}

.jn-prizeValue {
    margin-top: 0.15rem;
    font-size: 16px;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.96);
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
}

.jn-prizeTag {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: rgba(201, 162, 77, 0.95);
    background: rgba(201, 162, 77, 0.14);
    border: 1px solid rgba(201, 162, 77, 0.25);
    flex: 0 0 auto;
}

.jn-scratchRight {
    display: flex;
    justify-content: center;
}

.jn-cardMock {
    width: min(420px, 100%);
    border-radius: 32px;
    background: linear-gradient(180deg, #0a255f, #0b1e49);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 110px -90px rgba(6, 19, 51, 0.85);
    padding: 1.4rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.jn-cardMock:before {
    content: "";
    position: absolute;
    right: -140px;
    top: -140px;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.jn-cardTopSmall {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    opacity: 0.78;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-transform: uppercase;
}

.jn-cardTitle {
    margin-top: 0.9rem;
    text-align: center;
    font-weight: 1000;
    font-size: 28px;
    line-height: 1.12;
}

.jn-cardScratchArea {
    margin-top: 1.1rem;
    border-radius: 22px;
    height: 260px;
    background:
        linear-gradient(
            0deg,
            rgba(201, 162, 77, 0.86),
            rgba(201, 162, 77, 0.7)
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.22) 0 60px,
            rgba(255, 255, 255, 0.12) 60px 120px
        );
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(11, 30, 73, 0.65);
    font-weight: 1000;
}

.jn-cardFooterNote {
    margin-top: 0.9rem;
    font-size: 12px;
    font-weight: 800;
    opacity: 0.75;
    text-align: center;
}

.jn-scratchBottomNotes {
    margin-top: 1rem;
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: rgba(91, 100, 118, 0.88);
    font-size: 12px;
    font-weight: 800;
}

#scratch,
.jn-scratchWrap,
.jn-scratchCard {
    overflow: hidden;
}

@media (max-width: 1024px) {
    .jn-scratchCard {
        border-radius: 30px;
    }

    .jn-scratchGrid {
        grid-template-columns: 1fr;
    }

    .jn-scratchRight {
        justify-content: flex-start;
    }

    .jn-cardMock {
        width: min(520px, 100%);
    }
}

@media (max-width: 640px) {
    .jn-scratchWrap {
        padding: 0 14px 42px;
    }

    .jn-scratchCard {
        padding: 16px;
        border-radius: 26px;
    }

    .jn-scratchPill {
        font-size: 11px;
        padding: 8px 10px;
        gap: 8px;
    }

    .jn-scratchTitle {
        font-size: 28px;
        line-height: 1.08;
        margin-top: 12px;
    }

    .jn-scratchDesc {
        font-size: 13px;
        margin-top: 10px;
    }

    .jn-prizeRow {
        padding: 12px;
        border-radius: 16px;
    }

    .jn-prizeIcon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 18px;
    }

    .jn-prizeLabel {
        font-size: 11px;
    }

    .jn-prizeValue {
        font-size: 14px;
    }

    .jn-prizeTag {
        font-size: 11px;
        padding: 6px 10px;
    }

    .jn-cardMock {
        border-radius: 26px;
        padding: 14px;
    }

    .jn-cardTitle {
        font-size: 22px;
    }

    .jn-cardScratchArea {
        height: 220px;
        border-radius: 18px;
        font-size: 14px;
    }

    .jn-scratchBottomNotes {
        margin-top: 14px;
        gap: 10px;
        font-size: 11px;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .jn-scratchTitle {
        font-size: 24px;
    }

    .jn-cardScratchArea {
        height: 200px;
    }
}

/* =========================================================
   14) DETAILS HERO SPLIT (jeenabialnosi details page)
   ========================================================= */
.jn-heroWrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 0;
}

.jn-heroShell {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 0;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 40px 120px -90px rgba(0, 0, 0, 0.55);
}

.jn-heroLeft {
    background:
        radial-gradient(
            900px 520px at 50% 40%,
            rgba(255, 255, 255, 0.4),
            transparent 60%
        ),
        linear-gradient(180deg, #0b245d 0%, #07163a 70%, #061333 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 34px;
}

.jn-heroImg {
    width: 200px;
    height: 200px;
    object-fit: contain;
    filter: drop-shadow(0 28px 55px rgba(0, 0, 0, 0.35));
    transform: translateY(6px);
}

.jn-heroRight {
    background: rgba(246, 242, 236, 0.78);
    padding: 54px 56px;
}

.jn-heroPill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.55);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(11, 30, 73, 0.78);
}

.jn-heroPill i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #c9a24d;
    display: inline-block;
}

.jn-heroTitle {
    margin-top: 18px;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: 1.02;
    color: #0b1e49;
}

.jn-heroTitle .gold {
    background: linear-gradient(90deg, #c9a24d, #d4b466);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.jn-heroDesc {
    margin-top: 16px;
    max-width: 760px;
    color: rgba(91, 100, 118, 0.95);
    font-weight: 650;
    line-height: 1.8;
    font-size: 15px;
}

.jn-heroChips {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jn-heroChip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.55);
    font-weight: 850;
    font-size: 13px;
    color: rgba(11, 30, 73, 0.82);
}

.jn-heroPriceBar {
    margin-top: 26px;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.06);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.jn-offPill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.26);
    color: rgba(153, 27, 27, 0.95);
    font-weight: 1000;
    font-size: 13px;
}

.jn-oldPrice {
    font-weight: 900;
    color: rgba(11, 30, 73, 0.4);
    text-decoration: line-through;
    font-size: 13px;
}

.jn-now {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.jn-nowNum {
    font-weight: 1000;
    font-size: 42px;
    color: #0b1e49;
    letter-spacing: -0.02em;
}

.jn-nowUnit {
    font-weight: 900;
    font-size: 13px;
    color: rgba(11, 30, 73, 0.55);
}

.jn-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 850;
    font-size: 13px;
    color: rgba(11, 30, 73, 0.55);
    white-space: nowrap;
}

.jn-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.jn-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.55);
    display: inline-block;
}

@media (max-width: 1024px) {
    .jn-heroShell {
        grid-template-columns: 1fr;
    }

    .jn-heroRight {
        padding: 34px 20px;
    }

    .jn-heroLeft {
        padding: 40px 20px;
    }

    .jn-heroPriceBar {
        flex-direction: column;
        align-items: flex-start;
    }

    .jn-meta {
        white-space: normal;
        flex-wrap: wrap;
    }
}

.jn-included {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.08);
    align-items: center;
}

.jn-included img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
}

.jn-inc-title {
    font-weight: 800;
    font-size: 14px;
    color: #0b1e49;
}

.jn-inc-sub {
    font-size: 12px;
    font-weight: 600;
    color: rgba(11, 30, 73, 0.6);
}

.jn-qty-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    font-weight: 900;
}

/* =========================================================
   15) WEEKEND DEALS HOVER
   ========================================================= */
.jn-weekend-deals .jn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 34px 110px -85px rgba(0, 0, 0, 0.55);
}

.jn-weekend-card {
    position: relative;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.jn-weekend-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 50px 120px -70px rgba(0, 0, 0, 0.65);
    border-color: rgba(201, 162, 77, 0.35);
}

.jn-weekend-card img {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jn-weekend-card:hover img {
    transform: scale(1.08);
}

.jn-weekend-hero {
    position: relative;
    overflow: hidden;
}

.jn-weekend-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.35)
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.jn-weekend-card:hover .jn-weekend-hero::after {
    opacity: 1;
}

.jn-weekend-arrow {
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.jn-weekend-card:hover .jn-weekend-arrow {
    transform: translateX(4px);
    background: rgba(201, 162, 77, 0.25);
    box-shadow: 0 15px 40px -30px rgba(201, 162, 77, 0.6);
}

/* =========================================================
   16) HEADER VISIBILITY FIX (Desktop vs Mobile)
   ========================================================= */
@media (min-width: 1024px) {
    #navDesktop,
    #ctaDesktop {
        display: flex !important;
    }

    #navOpen {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {
    #navDesktop,
    #ctaDesktop {
        display: none !important;
    }

    #navOpen {
        display: flex !important;
    }
}

.jn-offers-shell,
.jn-offer-card {
    box-shadow: 0 30px 90px -70px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.jn-offers-shell {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.jn-offer-card {
    box-shadow: 0 25px 70px -60px rgba(0, 0, 0, 0.28);
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/* =========================================================
   18) PROFILE PAGE ONLY
   ========================================================= */
body[data-page="profile"] {
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
}

body[data-page="profile"] .jn-heading {
    font-family: "Playfair Display", serif;
}

body[data-page="profile"] .jn-prof-bg {
    background: linear-gradient(135deg, #fbf6ee 0%, #f3e9db 45%, #eef2f7 100%);
}

body[data-page="profile"] .jn-prof-blur {
    position: fixed;
    width: 520px;
    height: 520px;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.65;
    pointer-events: none;
    z-index: -5;
}

body[data-page="profile"] .jn-prof-blur-1 {
    top: -160px;
    right: -160px;
    background: radial-gradient(
        circle,
        rgba(11, 30, 73, 0.12) 0%,
        transparent 70%
    );
}

body[data-page="profile"] .jn-prof-blur-2 {
    bottom: -160px;
    left: -160px;
    background: radial-gradient(
        circle,
        rgba(201, 162, 93, 0.15) 0%,
        transparent 70%
    );
}

.jn-prof-tab {
    border-bottom: 3px solid transparent;
}

.jn-prof-tab[data-active="true"] {
    border-bottom: 3px solid #c9a25d;
}

@keyframes jnPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

body[data-page="profile"] .jn-pulse {
    animation: jnPulse 1.8s ease-in-out infinite;
}

body[data-page="profile"] .jn-toggle {
    width: 52px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 0.2s ease;
}

body[data-page="profile"] .jn-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
}

body[data-page="profile"] .jn-toggle[aria-pressed="true"] {
    background: rgba(201, 162, 93, 0.3);
    border-color: rgba(201, 162, 93, 0.45);
}

body[data-page="profile"] .jn-toggle[aria-pressed="true"]::after {
    left: 26px;
}

body[data-page="profile"] .jn-prof-tab {
    position: relative;
}

body[data-page="profile"] .jn-prof-tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c9a25d, #b8914d);
    transition: width 0.25s ease;
}

body[data-page="profile"] .jn-prof-tab.is-active::after {
    width: 100%;
}

/* =========================================================
   19) CHECKOUT PAYMENT (Scoped)
   ========================================================= */
body[data-page="checkout-payment"] :focus-visible {
    outline: 3px solid rgba(201, 162, 77, 0.45);
    outline-offset: 2px;
}

body[data-page="checkout-payment"] * {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="checkout-payment"] .jn-checkoutCard {
    background: var(--jn-glass);
    border: 1px solid var(--jn-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 28px;
    box-shadow: 0 32px 90px -70px rgba(0, 0, 0, 0.45);
}

body[data-page="checkout-payment"] .jn-msg-ok {
    color: rgba(5, 150, 105, 0.95);
}
body[data-page="checkout-payment"] .jn-msg-err {
    color: rgba(220, 38, 38, 0.95);
}
body[data-page="checkout-payment"] .jn-msg-muted {
    color: rgba(91, 100, 118, 0.95);
}

body[data-page="checkout-payment"] input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.28);
    border-radius: 999px;
}

@media (max-width: 1023.98px) {
    body[data-page="checkout-payment"] .jn-stickyOff {
        position: static !important;
        top: auto !important;
    }
}

/* =========================================================
   20) SEARCH SIMPLE SELECTS
   ========================================================= */
#jeena-search-simple select {
    color: #111111;
}

#jeena-search-simple select:invalid {
    color: #6b7280;
}

#jeena-search-simple option {
    color: #111111;
}

/* =========================================================
   21) JEENAAI PORTAL — SCOPED CSS
   ========================================================= */
.jeena-portal-section,
.jeena-portal-section * {
    box-sizing: border-box;
}

.jeena-portal-section {
    position: relative;
    width: 100%;
    min-height: 72vh;
    margin: 0;
    overflow: hidden;
    padding: 3rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            700px 360px at 20% 20%,
            rgba(255, 215, 0, 0.06),
            transparent 60%
        ),
        radial-gradient(
            700px 360px at 80% 30%,
            rgba(255, 165, 0, 0.05),
            transparent 55%
        ),
        linear-gradient(180deg, #f7f3ea 0%, #efe7d8 100%);
}

/* Stars */
.jeena-portal-section .stars-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

.jeena-portal-section .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #d1a437;
    border-radius: 50%;
    animation: jeenaPortalTwinkle 3s infinite ease-in-out;
    filter: drop-shadow(0 0 6px rgba(209, 164, 55, 0.35));
}

@keyframes jeenaPortalTwinkle {
    0%,
    100% {
        opacity: 0.12;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.35);
    }
}

/* Split layout */
.jeena-portal-section .portal-shell {
    position: relative;
    z-index: 10;
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: 440px 1fr;
    align-items: center;
    gap: 48px;
}

.jeena-portal-section .portal-left {
    display: flex;
    justify-content: flex-start;
}

.jeena-portal-section .portal-copy {
    max-width: 520px;
}

.jeena-portal-section .portal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(201, 162, 77, 0.1);
    border: 1px solid rgba(201, 162, 77, 0.24);
    color: #8a6423;
    font-weight: 900;
    font-size: 0.82rem;
    margin-bottom: 14px;
}

.jeena-portal-section .glow-title {
    margin: 0 0 12px;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.06;
    background: linear-gradient(135deg, #0b1e49, #1a3a7a, #c9a24d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.jeena-portal-section .subtitle {
    margin: 0;
    max-width: 48ch;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(11, 30, 73, 0.75);
}

/* Circular Portal */
.jeena-portal-section .portal-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 26px;
    border-radius: 36px;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 215, 0, 0.1),
            transparent 60%
        ),
        linear-gradient(180deg, #0a1128 0%, #001845 50%, #0a1128 100%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.18),
        inset 0 0 30px rgba(255, 215, 0, 0.04);
}

.jeena-portal-section .portal-core {
    position: relative;
    width: min(320px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.jeena-portal-section .portal-aura {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 215, 0, 0.1),
        rgba(255, 165, 0, 0.05),
        transparent 72%
    );
    filter: blur(18px);
    animation: jeenaPortalAuraPulse 4.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes jeenaPortalAuraPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

.jeena-portal-section .portal-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    pointer-events: none;
}

.jeena-portal-section .ring-1 {
    inset: 0;
    box-shadow:
        0 0 24px rgba(255, 215, 0, 0.1),
        inset 0 0 24px rgba(255, 215, 0, 0.05);
    animation: jeenaPortalSpinSlow 18s linear infinite;
}

.jeena-portal-section .ring-2 {
    inset: 9%;
    border-style: dashed;
    border-color: rgba(255, 215, 0, 0.22);
    animation: jeenaPortalSpinReverse 14s linear infinite;
}

.jeena-portal-section .ring-3 {
    inset: 18%;
    border-color: rgba(255, 255, 255, 0.1);
    animation: jeenaPortalSpinSlow 11s linear infinite;
}

.jeena-portal-section .ring-4 {
    inset: 28%;
    border-color: rgba(255, 215, 0, 0.16);
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.08);
    animation: jeenaPortalPulseRing 3.4s ease-in-out infinite;
}

@keyframes jeenaPortalSpinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes jeenaPortalSpinReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes jeenaPortalPulseRing {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.03);
        opacity: 1;
    }
}

.jeena-portal-section .portal-orbit {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    animation: jeenaPortalSpinSlow 12s linear infinite;
    pointer-events: none;
}

.jeena-portal-section .orb {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #ffd700 0%,
        #ffa500 70%,
        rgba(255, 165, 0, 0.35) 100%
    );
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.55);
}

.jeena-portal-section .orb-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.jeena-portal-section .orb-2 {
    top: 22%;
    right: 8%;
}

.jeena-portal-section .orb-3 {
    right: 14%;
    bottom: 18%;
}

.jeena-portal-section .orb-4 {
    left: 16%;
    bottom: 14%;
}

.jeena-portal-section .orb-5 {
    top: 26%;
    left: 8%;
}

.jeena-portal-section .portal-center {
    position: relative;
    width: 48%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 215, 0, 0.22),
        rgba(255, 165, 0, 0.1) 35%,
        rgba(0, 24, 69, 0.86) 75%,
        rgba(10, 17, 40, 0.96) 100%
    );
    border: 2px solid rgba(255, 215, 0, 0.28);
    box-shadow:
        0 0 24px rgba(255, 215, 0, 0.15),
        0 0 60px rgba(255, 165, 0, 0.08),
        inset 0 0 30px rgba(255, 215, 0, 0.08);
}

.jeena-portal-section .portal-center::before {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.16);
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.06);
}

.jeena-portal-section .portal-core.is-open .portal-center {
    animation: jeenaPortalOpen 1.25s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes jeenaPortalOpen {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 24px rgba(255, 215, 0, 0.15),
            0 0 60px rgba(255, 165, 0, 0.08),
            inset 0 0 30px rgba(255, 215, 0, 0.08);
    }
    55% {
        transform: scale(1.08);
        box-shadow:
            0 0 40px rgba(255, 215, 0, 0.28),
            0 0 100px rgba(255, 165, 0, 0.16),
            inset 0 0 46px rgba(255, 215, 0, 0.15);
    }
    100% {
        transform: scale(1.18);
        box-shadow:
            0 0 54px rgba(255, 215, 0, 0.34),
            0 0 130px rgba(255, 165, 0, 0.22),
            inset 0 0 52px rgba(255, 215, 0, 0.18);
    }
}

.jeena-portal-section .portal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.jeena-portal-section .enter-button {
    position: relative;
    z-index: 20;
    pointer-events: all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 0.9rem 1.4rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 215, 0, 0.75);
    background: rgba(0, 24, 69, 0.78);
    color: rgba(255, 215, 0, 0.95);
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.2),
        0 0 24px rgba(255, 165, 0, 0.1);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.jeena-portal-section .enter-button:hover {
    transform: translateY(-4px) scale(1.02);
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border-color: rgba(255, 215, 0, 0.95);
    color: #071022;
    box-shadow: 0 20px 50px rgba(255, 215, 0, 0.22);
    filter: brightness(1.02);
}

/* Energy particles */
.jeena-portal-section .energy-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: jeenaPortalFlowToCore 6s infinite ease-in;
}

@keyframes jeenaPortalFlowToCore {
    0% {
        transform: translate(var(--startX), var(--startY)) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
}

/* Scoped Modal */
#portalModal.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
    background: rgba(6, 10, 25, 0.96);
    backdrop-filter: blur(8px);
}

#portalModal.modal.active {
    display: flex;
}

#portalModal .modal-content {
    width: min(1080px, 96vw);
    max-height: 90vh;
    overflow: auto;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, #0a1128 0%, #050b1d 50%, #0a1128 100%);
    border: 1px solid rgba(255, 215, 0, 0.16);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
    color: #ffd700;
}

#portalModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

#portalModal .modal-title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 1.8rem;
}

#portalModal .icon-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.28);
    color: #ffd700;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 14px;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.12s ease;
}

#portalModal .icon-btn:hover {
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border-color: rgba(255, 215, 0, 0.95);
    color: #071022;
    transform: translateY(-1px);
}

#portalModal .icon-btn:focus-visible {
    outline: 3px solid rgba(255, 215, 0, 0.35);
    outline-offset: 2px;
}

#portalModal .icon {
    width: 22px;
    height: 22px;
}

#portalModal .hidden {
    display: none !important;
}

#portalModal .grid {
    display: grid;
    gap: 12px;
}

#portalModal .card {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.12);
}

#portalModal .small-note {
    text-align: center;
    color: rgba(255, 215, 0, 0.55);
    font-size: 0.85rem;
}

/* Inputs */
#portalModal textarea,
#portalModal input,
#portalModal select {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #111111;
    outline: none;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

#portalModal textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.7;
}

#portalModal textarea::placeholder,
#portalModal input::placeholder {
    color: #6b7280;
    font-weight: 600;
}

#portalModal textarea:focus,
#portalModal input:focus,
#portalModal select:focus {
    background: #ffffff;
    border-color: rgba(201, 162, 77, 0.58);
    box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.16);
}

/* Select */
#portalModal .select-wrap {
    position: relative;
}

#portalModal .select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 56px;
    background: #ffffff;
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#portalModal .select-wrap select:invalid {
    color: #6b7280;
}

#portalModal .select-wrap select option {
    background: #ffffff;
    color: #111111;
}

#portalModal .select-wrap::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(17, 17, 17, 0.72);
    border-bottom: 2px solid rgba(17, 17, 17, 0.72);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

#portalModal .select-wrap::before {
    content: "";
    position: absolute;
    right: 44px;
    top: 50%;
    width: 1px;
    height: 22px;
    background: rgba(0, 0, 0, 0.1);
    transform: translateY(-50%);
    pointer-events: none;
}

#portalModal input[type="file"] {
    padding: 12px;
    border: 1px dashed rgba(201, 162, 77, 0.42);
    background: rgba(255, 255, 255, 0.96);
    color: #111111;
}

/* Upload preview */
#portalModal .uploader {
    display: grid;
    gap: 10px;
}

#portalModal .preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#portalModal .preview {
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.14);
    background: rgba(0, 0, 0, 0.25);
}

#portalModal .preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Vision Layout */
#portalModal .vision-wrap {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 14px;
    align-items: start;
}

#portalModal .jeena-vision-column {
    display: grid;
    gap: 12px;
}

#portalModal .vision-title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 1.4rem;
}

#portalModal .vision-bullets {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

#portalModal .vision-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.12);
}

#portalModal .dot {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-weight: 900;
    background: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.25);
}

#portalModal .txt strong {
    display: block;
    margin-bottom: 2px;
    color: #ffd700;
    font-weight: 900;
}

#portalModal .txt span {
    display: block;
    color: rgba(255, 215, 0, 0.75);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Chat */
#portalModal .jeena-chat-card {
    display: grid;
    gap: 12px;
    min-height: auto;
    height: auto;
    align-content: start;
}

#portalModal .jeena-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#portalModal .jeena-chat-title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 1.2rem;
    color: #ffd700;
}

#portalModal .jeena-chat-sub {
    margin: 6px 0 0;
    color: rgba(255, 215, 0, 0.62);
    font-size: 0.9rem;
    line-height: 1.6;
}

#portalModal .chat-shell {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

#portalModal .chat-log-lg {
    min-height: 280px;
    max-height: 420px;
    overflow: auto;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.02)
    );
    border: 1px solid rgba(255, 215, 0, 0.12);
}

#portalModal .msg {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

#portalModal .msg.user {
    background: rgba(255, 255, 255, 0.05);
}

#portalModal .msg.ai {
    background: rgba(255, 215, 0, 0.08);
}

#portalModal .msg .who {
    margin-bottom: 6px;
    font-weight: 900;
    font-size: 0.9rem;
}

#portalModal .msg .text {
    color: rgba(255, 215, 0, 0.85);
    line-height: 1.75;
    font-size: 0.95rem;
}

#portalModal .chat-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
}

#portalModal .chat-box-stacked {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#portalModal .jeena-chat-input {
    min-height: 110px;
    resize: vertical;
}

#portalModal .jeena-chat-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#portalModal .jeena-step-actions {
    display: flex;
    justify-content: flex-start;
}

#portalModal .type-cursor {
    display: inline-block;
    width: 10px;
    margin-left: 4px;
    color: rgba(255, 215, 0, 0.9);
    animation: jeenaPortalBlink 1s infinite;
}

@keyframes jeenaPortalBlink {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

/* Gallery / Videos */
#portalModal .gallery {
    display: grid;
    gap: 10px;
}

#portalModal .g-card {
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.12);
}

#portalModal .g-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

#portalModal .g-cap {
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    color: rgba(255, 215, 0, 0.8);
    font-weight: 800;
    font-size: 0.9rem;
}

#portalModal .videos a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none;
    color: rgba(255, 215, 0, 0.92);
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.12);
}

#portalModal .videos a:hover {
    border-color: rgba(255, 215, 0, 0.28);
    background: rgba(0, 0, 0, 0.26);
}

#portalModal .meta {
    color: rgba(255, 215, 0, 0.6);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Buttons */
#portalModal .btn {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    cursor: pointer;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#portalModal .btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 50px -38px rgba(0, 0, 0, 0.45);
}

#portalModal #btnGenerateVision,
#portalModal #btnGoBudget,
#portalModal #btnShowRecommendations,
#portalModal #btnGoPackages,
#portalModal .jeena-primary-btn {
    background: linear-gradient(135deg, #c9a24d, #f1d58a);
    color: #061333;
    border-color: rgba(201, 162, 77, 0.85);
    box-shadow: 0 20px 50px -38px rgba(201, 162, 77, 0.38);
}

#portalModal #btnGenerateVision:hover,
#portalModal #btnGoBudget:hover,
#portalModal #btnShowRecommendations:hover,
#portalModal #btnGoPackages:hover,
#portalModal .jeena-primary-btn:hover {
    background: linear-gradient(135deg, #d4ad59, #f4df9b);
    color: #061333;
    border-color: rgba(201, 162, 77, 0.95);
    box-shadow: 0 24px 60px -40px rgba(201, 162, 77, 0.48);
}

#portalModal #btnGoPackages {
    min-height: 54px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 900;
}

/* Services cards */
#portalModal .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

#portalModal .svc-card {
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.12);
}

#portalModal .svc-img {
    position: relative;
    height: 120px;
    overflow: hidden;
    background: #0b1e49;
}

#portalModal .svc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    display: block;
}

#portalModal .svc-body {
    padding: 12px;
}

#portalModal .svc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 900;
}

#portalModal .svc-name {
    color: #ffd700;
    font-weight: 900;
}

#portalModal .svc-sub {
    margin-bottom: 10px;
    color: rgba(255, 215, 0, 0.6);
    font-size: 0.82rem;
}

#portalModal .svc-book {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.24);
    color: #ffd700;
    text-decoration: none;
    font-weight: 800;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.12s ease;
}

#portalModal .svc-book:hover {
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border-color: rgba(255, 215, 0, 0.95);
    color: #071022;
    transform: translateY(-1px);
}

/* Paid packages */
#portalModal .paid-wrap {
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.14);
}

#portalModal .paid-header {
    padding: 10px 10px 0;
    text-align: center;
}

#portalModal .paid-badge {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.26);
    color: rgba(255, 215, 0, 0.95);
    font-weight: 900;
}

#portalModal .paid-title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 1.55rem;
    color: rgba(255, 215, 0, 0.95);
}

#portalModal .paid-sub {
    margin: 6px 0 0;
    color: rgba(255, 215, 0, 0.65);
    font-size: 0.92rem;
}

#portalModal .paid-stats {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

#portalModal .paid-stat {
    padding: 10px;
    border-radius: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.12);
}

#portalModal .paid-stat .k {
    display: block;
    color: rgba(255, 215, 0, 0.6);
    font-weight: 800;
    font-size: 0.82rem;
}

#portalModal .paid-stat .v {
    display: block;
    margin-top: 4px;
    color: rgba(255, 215, 0, 0.95);
    font-weight: 900;
}

#portalModal .pkg-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

#portalModal .pkg-card {
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.14);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

#portalModal .pkg-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.28);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

#portalModal .pkg-card.is-selected {
    background: rgba(255, 215, 0, 0.06);
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow: 0 18px 60px rgba(255, 215, 0, 0.1);
}

#portalModal .pkg-top {
    padding: 14px 14px 10px;
}

#portalModal .pkg-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.78rem;
    border: 1px solid rgba(255, 215, 0, 0.22);
    background: rgba(0, 24, 69, 0.55);
    color: rgba(255, 215, 0, 0.95);
}

#portalModal .pkg-price {
    margin-top: 10px;
    font-size: 1.85rem;
    font-weight: 900;
    color: rgba(255, 215, 0, 0.98);
    letter-spacing: 0.2px;
}

#portalModal .pkg-fee {
    margin-top: 4px;
    color: rgba(255, 215, 0, 0.65);
    font-size: 0.85rem;
    font-weight: 700;
}

#portalModal .pkg-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 215, 0, 0.72);
    font-size: 0.86rem;
    font-weight: 800;
}

#portalModal .pkg-meta .dotsep {
    width: 4px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 215, 0, 0.35);
    display: inline-block;
}

#portalModal .pkg-chips {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#portalModal .pkg-chip {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.12);
    color: rgba(255, 215, 0, 0.78);
    font-size: 0.78rem;
    font-weight: 800;
}

#portalModal .pkg-cta {
    padding: 0 14px 14px;
}

#portalModal .pkg-select {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.24);
    color: #f6e08c;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
    transition:
        transform 0.12s ease,
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

#portalModal .pkg-select:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border-color: rgba(255, 215, 0, 0.95);
    color: #071022;
    box-shadow: 0 14px 40px rgba(255, 215, 0, 0.18);
}

#portalModal .pkg-details {
    margin-top: 14px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.14);
}

#portalModal .pkg-details-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

#portalModal .pkg-details-title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 1.25rem;
    color: rgba(255, 215, 0, 0.95);
}

#portalModal .price-pill {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.22);
    font-weight: 900;
    color: rgba(255, 215, 0, 0.95);
}

#portalModal .pkg-details-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#portalModal .detail-box {
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.12);
}

#portalModal .detail-label {
    display: block;
    font-weight: 900;
    color: rgba(255, 215, 0, 0.75);
    font-size: 0.86rem;
}

#portalModal .detail-value {
    display: block;
    margin-top: 6px;
    color: rgba(255, 215, 0, 0.95);
    font-weight: 900;
}

#portalModal .details-actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#portalModal .big-gold {
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-weight: 900;
    font-size: 14px;
    background: linear-gradient(135deg, #ffd700, #d9a441);
    color: #0b1735;
    box-shadow: 0 18px 60px rgba(255, 215, 0, 0.12);
    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}

#portalModal .big-gold:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
}

#portalModal .mini-note {
    margin-top: 10px;
    text-align: center;
    color: rgba(255, 215, 0, 0.6);
    font-size: 0.85rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .jeena-portal-section .portal-shell {
        grid-template-columns: 1fr;
        gap: 26px;
        text-align: center;
    }

    .jeena-portal-section .portal-left {
        justify-content: center;
    }

    .jeena-portal-section .portal-copy {
        max-width: 620px;
        margin: 0 auto;
    }

    .jeena-portal-section .subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    #portalModal .vision-wrap {
        grid-template-columns: 1fr;
    }

    #portalModal .jeena-chat-card {
        min-height: auto;
    }

    #portalModal .chat-log-lg {
        min-height: 240px;
        max-height: 320px;
    }

    #portalModal .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #portalModal .paid-stats {
        grid-template-columns: 1fr;
    }

    #portalModal .pkg-grid {
        grid-template-columns: 1fr;
    }

    #portalModal .pkg-details-grid {
        grid-template-columns: 1fr;
    }

    #portalModal .details-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .jeena-portal-section {
        min-height: auto;
        padding: 2.5rem 1rem;
    }

    .jeena-portal-section .portal-wrapper {
        max-width: 360px;
        padding: 20px;
        border-radius: 28px;
    }

    .jeena-portal-section .portal-core {
        width: min(260px, 100%);
    }

    .jeena-portal-section .glow-title {
        font-size: 1.8rem;
    }

    .jeena-portal-section .subtitle {
        font-size: 0.94rem;
    }

    #portalModal .jeena-chat-actions {
        grid-template-columns: 1fr;
    }

    #portalModal .jeena-chat-input {
        min-height: 96px;
    }

    #portalModal .btn,
    #portalModal .pkg-select,
    #portalModal .big-gold {
        min-height: 46px;
        padding: 12px 14px;
        font-size: 13px;
    }

    #portalModal textarea,
    #portalModal input,
    #portalModal select {
        padding: 12px 13px;
        font-size: 13px;
    }
}

/* =========================================================
   20) ALL SERVICES PAGE (Scoped)
   Page flag: <body data-page="all-services">
   ========================================================= */

body[data-page="all-services"] .jn-services-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1.05rem;
    border-radius: 999px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);

    color: #0b1e49;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.01em;

    box-shadow: 0 10px 28px -22px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

body[data-page="all-services"] .jn-services-chip:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(201, 162, 77, 0.48);

    box-shadow: 0 18px 40px -26px rgba(11, 30, 73, 0.35);
}

body[data-page="all-services"] .jn-services-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, #0b1e49, #10285f);
    color: #fff;
    border-color: #0b1e49;

    box-shadow: 0 20px 45px -28px rgba(11, 30, 73, 0.55);
}

body[data-page="all-services"] .jn-services-chip:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(201, 162, 77, 0.35),
        0 18px 40px -26px rgba(11, 30, 73, 0.35);
}

body[data-page="all-services"] .jn-services-chip:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(201, 162, 77, 0.48);
    box-shadow: 0 16px 40px -30px rgba(11, 30, 73, 0.25);
}

body[data-page="all-services"] .jn-services-chip[aria-pressed="true"] {
    background: #0b1e49;
    color: #fff;
    border-color: rgba(11, 30, 73, 0.35);
    box-shadow: 0 16px 40px -30px rgba(11, 30, 73, 0.35);
}

body[data-page="all-services"] .jn-services-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.35);
}

body[data-page="all-services"] .jn-services-card {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

body[data-page="all-services"] .jn-services-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(201, 162, 77, 0.26);
    box-shadow: 0 26px 70px -46px rgba(0, 0, 0, 0.35);
}

body[data-page="all-services"] .jn-services-tag {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.65);
}

body[data-page="all-services"] #grid > .hidden {
    display: none !important;
}

/* =========================================================
   offer page slider
   ========================================================= */

#offersHeroSlider {
    position: relative;
}

#offersHeroSlider .jn-offerHeroSlide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}

#offersHeroSlider .jn-offerHeroSlide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* =========================================================
   22) I18N + RTL SUPPORT
   ========================================================= */

html[dir="rtl"] body {
    direction: rtl;
}

html[dir="ltr"] body {
    direction: ltr;
}

/* Arabic font */
html[lang="ar"] body {
    font-family:
        "Tajawal",
        "Cairo",
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
}

/* English font */
html[lang="en"] body {
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
}

/* Inputs / textarea / select direction */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select {
    direction: ltr;
    text-align: left;
}

/* Placeholder alignment */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    text-align: right;
}

html[dir="ltr"] input::placeholder,
html[dir="ltr"] textarea::placeholder {
    text-align: left;
}

/* Dropdown menus */
html[dir="rtl"] #langMenu,
html[dir="rtl"] #profileMenu {
    right: auto;
    left: 0;
}

html[dir="ltr"] #langMenu,
html[dir="ltr"] #profileMenu {
    right: 0;
    left: auto;
}

/* Hero text alignment */
html[dir="rtl"] #hero .text-white.max-w-xl {
    text-align: right;
}

html[dir="ltr"] #hero .text-white.max-w-xl {
    text-align: left;
}

/* Generic helpers */
html[dir="rtl"] .i18n-text-start {
    text-align: right;
}

html[dir="ltr"] .i18n-text-start {
    text-align: left;
}

html[dir="rtl"] .i18n-text-end {
    text-align: left;
}

html[dir="ltr"] .i18n-text-end {
    text-align: right;
}

/* Optional: flip directional icons in RTL */
html[dir="rtl"] .flip-rtl {
    transform: scaleX(-1);
}

/* =========================================================
   23) CONTACT PAGE (Scoped)

   ========================================================= */

body[data-page="contact"] .jn-contactPage {
    --jn-contact-ink: #0b1e49;
    --jn-contact-gold: #c9a24d;
    --jn-contact-cream: #f7f1e7;
    --jn-contact-cream2: #f4ebdd;
    --jn-contact-card: rgba(255, 255, 255, 0.58);
    --jn-contact-stroke: rgba(0, 0, 0, 0.1);
    --jn-contact-shadow: 0 40px 120px -90px rgba(0, 0, 0, 0.55);

    background:
        radial-gradient(
            1200px 600px at 15% 10%,
            rgba(255, 255, 255, 0.65),
            transparent 62%
        ),
        radial-gradient(
            1000px 520px at 85% 18%,
            rgba(201, 162, 77, 0.14),
            transparent 60%
        ),
        linear-gradient(
            180deg,
            var(--jn-contact-cream),
            var(--jn-contact-cream2)
        );
}

body[data-page="contact"] .jn-contactHeader {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    justify-content: space-between;
}

body[data-page="contact"] .jn-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--jn-contact-stroke);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 900;
    font-size: 12px;
    color: rgba(11, 30, 73, 0.72);
}

body[data-page="contact"] .jn-contactDot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--jn-contact-gold);
}

body[data-page="contact"] .jn-title {
    margin-top: 12px;
    font-weight: 1000;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--jn-contact-ink);
    font-size: clamp(28px, 4vw, 48px);
}

body[data-page="contact"] .jn-subtitle {
    margin-top: 10px;
    max-width: 60ch;
    color: rgba(11, 30, 73, 0.6);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.7;
}

body[data-page="contact"] .jn-contactGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    gap: 18px;
    align-items: start;
}

body[data-page="contact"] .jn-contactCard {
    border-radius: 26px;
    background: var(--jn-contact-card);
    border: 1px solid var(--jn-contact-stroke);
    box-shadow: var(--jn-contact-shadow);
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body[data-page="contact"] .jn-cardForm {
    padding: 18px;
}

body[data-page="contact"] .jn-labelTop {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: rgba(11, 30, 73, 0.55);
    margin-bottom: 10px;
}

body[data-page="contact"] .jn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body[data-page="contact"] .jn-contactChip {
    appearance: none;
    border: 1px solid var(--jn-contact-stroke);
    background: rgba(255, 255, 255, 0.5);
    color: rgba(11, 30, 73, 0.72);
    font-weight: 900;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

body[data-page="contact"] .jn-contactChip:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.72);
}

body[data-page="contact"] .jn-contactChip.is-active {
    background: rgba(201, 162, 77, 0.22);
    border-color: rgba(201, 162, 77, 0.35);
    color: rgba(11, 30, 73, 0.88);
}

body[data-page="contact"] .jn-form {
    margin-top: 14px;
}

body[data-page="contact"] .jn-twoCols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

body[data-page="contact"] .jn-field {
    margin-top: 12px;
}

body[data-page="contact"] .jn-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 900;
    color: rgba(11, 30, 73, 0.55);
    margin-bottom: 7px;
}

body[data-page="contact"] .jn-contactInput {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.65);
    padding: 12px;
    font-weight: 800;
    font-size: 13px;
    color: rgba(11, 30, 73, 0.86);
    outline: none;
    transition:
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

body[data-page="contact"] .jn-contactInput:focus {
    border-color: rgba(201, 162, 77, 0.55);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.16);
}

body[data-page="contact"] .jn-textarea {
    resize: vertical;
    min-height: 120px;
}

body[data-page="contact"] .jn-upload {
    position: relative;
    margin-top: 12px;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.35);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}

body[data-page="contact"] .jn-uploadInput {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

body[data-page="contact"] .jn-uploadIcon {
    font-size: 20px;
}

body[data-page="contact"] .jn-uploadTitle {
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.86);
    font-size: 13px;
}

body[data-page="contact"] .jn-uploadHint {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(11, 30, 73, 0.55);
}

body[data-page="contact"] .jn-muted {
    color: rgba(11, 30, 73, 0.55);
    font-weight: 900;
}

body[data-page="contact"] .jn-btnPrimary {
    margin-top: 14px;
    width: 100%;
    border: 1px solid rgba(201, 162, 77, 0.55);
    background: linear-gradient(180deg, #12306b, #0a1e4a);
    color: #fff;
    font-weight: 1000;
    padding: 13px 14px;
    border-radius: 16px;
    box-shadow: 0 26px 70px -60px rgba(10, 30, 74, 0.85);
    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        box-shadow 0.15s ease;
}

body[data-page="contact"] .jn-btnPrimary:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

body[data-page="contact"] .jn-terms {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(11, 30, 73, 0.5);
}

body[data-page="contact"] .jn-link {
    color: rgba(11, 30, 73, 0.78);
    font-weight: 900;
    text-decoration: underline;
}

body[data-page="contact"] .jn-quickConnect {
    padding: 16px;
}

body[data-page="contact"] .jn-quickTitle {
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.82);
    margin-bottom: 10px;
}

body[data-page="contact"] .jn-quickGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

body[data-page="contact"] .jn-quickItem {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

body[data-page="contact"] .jn-quickItem:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.7);
}

body[data-page="contact"] .jn-quickIcon {
    font-size: 18px;
}

body[data-page="contact"] .jn-quickKicker {
    font-size: 10px;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.55);
    letter-spacing: 0.12em;
}

body[data-page="contact"] .jn-quickMain {
    font-size: 14px;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.88);
}

body[data-page="contact"] .jn-quickSub {
    font-size: 12px;
    font-weight: 800;
    color: rgba(11, 30, 73, 0.55);
    margin-top: 2px;
}

body[data-page="contact"] .jn-quickWhats {
    background: rgba(176, 255, 196, 0.22);
    border-color: rgba(82, 190, 120, 0.28);
}

body[data-page="contact"] .jn-faqCard {
    padding: 16px;
}

body[data-page="contact"] .jn-faqTitle {
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.82);
    margin-bottom: 8px;
}

body[data-page="contact"] .jn-accItem {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body[data-page="contact"] .jn-accItem:first-child {
    border-top: none;
}

body[data-page="contact"] .jn-accBtn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 6px;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.84);
    background: transparent;
}

body[data-page="contact"] .jn-accIcon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.55);
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.75);
}

body[data-page="contact"] .jn-accPanel {
    padding: 0 6px 14px 6px;
    color: rgba(11, 30, 73, 0.6);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.7;
    display: none;
}

body[data-page="contact"] .jn-accPanel.is-open {
    display: block;
}

body[data-page="contact"] .jn-sidebar {
    position: sticky;
    top: 18px;
}

body[data-page="contact"] .jn-sideCard {
    padding: 14px;
}

body[data-page="contact"] .jn-sideHead {
    padding-bottom: 12px;
}

body[data-page="contact"] .jn-sideKicker {
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.55);
}

body[data-page="contact"] .jn-sideTitle {
    margin-top: 6px;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.88);
}

body[data-page="contact"] .jn-sideSub {
    margin-top: 4px;
    font-weight: 800;
    color: rgba(11, 30, 73, 0.55);
    font-size: 12px;
}

body[data-page="contact"] .jn-miniLink {
    display: inline-block;
    margin-top: 6px;
    font-weight: 1000;
    font-size: 12px;
    color: rgba(201, 162, 77, 0.95);
    text-decoration: none;
}

body[data-page="contact"] .jn-mapMock {
    border-radius: 18px;
    background: linear-gradient(180deg, #0d2c66, #071b3c);
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    min-height: 160px;
}

body[data-page="contact"] .jn-pin {
    font-size: 22px;
}

body[data-page="contact"] .jn-mapText {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 900;
    font-size: 12px;
}

body[data-page="contact"] .jn-blockTitle {
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.82);
    margin-bottom: 10px;
}

body[data-page="contact"] .jn-channelRow {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    margin-top: 10px;
    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

body[data-page="contact"] .jn-channelRow:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.7);
}

body[data-page="contact"] .jn-channelIcon {
    font-size: 18px;
}

body[data-page="contact"] .jn-channelTop {
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.55);
}

body[data-page="contact"] .jn-channelMain {
    margin-top: 2px;
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.88);
}

body[data-page="contact"] .jn-channelSub {
    margin-top: 2px;
    font-weight: 800;
    color: rgba(11, 30, 73, 0.55);
    font-size: 12px;
}

body[data-page="contact"] .jn-socialGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body[data-page="contact"] .jn-social {
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-weight: 1000;
    font-size: 12px;
    color: rgba(11, 30, 73, 0.78);
    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

body[data-page="contact"] .jn-social:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.72);
}

body[data-page="contact"] .jn-hours {
    margin-top: 6px;
}

body[data-page="contact"] .jn-hourRow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body[data-page="contact"] .jn-hourRow:first-child {
    border-top: none;
}

body[data-page="contact"] .jn-hourDay {
    font-weight: 900;
    color: rgba(11, 30, 73, 0.75);
    font-size: 12px;
}

body[data-page="contact"] .jn-hourTime {
    font-weight: 1000;
    color: rgba(11, 30, 73, 0.88);
    font-size: 12px;
}

body[data-page="contact"] .jn-pillOpen {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(176, 255, 196, 0.22);
    border: 1px solid rgba(82, 190, 120, 0.28);
    font-weight: 1000;
    font-size: 11px;
    color: rgba(34, 130, 78, 0.95);
}

body[data-page="contact"] .jn-hoursHint {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(11, 30, 73, 0.55);
    line-height: 1.6;
}

@media (max-width: 1023px) {
    body[data-page="contact"] .jn-contactGrid {
        grid-template-columns: 1fr;
    }

    body[data-page="contact"] .jn-sidebar {
        position: static;
    }
}

@media (max-width: 639px) {
    body[data-page="contact"] .jn-cardForm {
        padding: 14px;
        border-radius: 22px;
    }

    body[data-page="contact"] .jn-twoCols {
        grid-template-columns: 1fr;
    }

    body[data-page="contact"] .jn-quickGrid {
        grid-template-columns: 1fr;
    }

    body[data-page="contact"] .jn-hourRow {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   24) SERVICE DETAILS PAGE (Scoped) —

   ========================================================= */

body[data-page="service-details"] {
    background:
        radial-gradient(
            1200px 700px at 12% 8%,
            rgba(255, 255, 255, 0.62),
            transparent 60%
        ),
        radial-gradient(
            980px 560px at 86% 16%,
            rgba(201, 162, 77, 0.12),
            transparent 58%
        ),
        linear-gradient(180deg, #fbf6ee 0%, #f3e9db 52%, #eef2f7 100%);
}

body[data-page="service-details"] main {
    position: relative;
}

/* main cards */
body[data-page="service-details"] section.rounded-\[28px\],
body[data-page="service-details"] .web-panel,
body[data-page="service-details"] aside > div.sticky {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

body[data-page="service-details"] .web-panel:hover,
body[data-page="service-details"] aside > div.sticky:hover {
    box-shadow: 0 24px 70px -50px rgba(0, 0, 0, 0.2);
}

/* hero image area */
body[data-page="service-details"] .lg\:col-span-7 img {
    transition: transform 0.7s ease;
}

body[data-page="service-details"] .lg\:col-span-7:hover img {
    transform: scale(1.04);
}

/* metric cards */
body[data-page="service-details"] .grid.grid-cols-2 > div.rounded-2xl,
body[data-page="service-details"]
    .rounded-3xl.border.border-black\/10.bg-white.p-5,
body[data-page="service-details"]
    .rounded-2xl.border.border-black\/10.bg-white.p-4 {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

body[data-page="service-details"] .grid.grid-cols-2 > div.rounded-2xl:hover,
body[data-page="service-details"]
    .rounded-3xl.border.border-black\/10.bg-white.p-5:hover,
body[data-page="service-details"]
    .rounded-2xl.border.border-black\/10.bg-white.p-4:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(201, 162, 77, 0.25);
    box-shadow: 0 22px 55px -40px rgba(0, 0, 0, 0.18);
}

/* =========================================
   TABS
   ========================================= */
body[data-page="service-details"] #webServiceTabs {
    gap: 0.65rem;
}

body[data-page="service-details"] .web-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.82);
    color: #0b1e49;
    font-size: 0.875rem;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

body[data-page="service-details"] .web-tab:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(201, 162, 77, 0.34);
    box-shadow: 0 16px 44px -34px rgba(11, 30, 73, 0.22);
}

body[data-page="service-details"] .web-tab.is-active {
    background: #0b1e49;
    color: #fff;
    border-color: #0b1e49;
    box-shadow: 0 18px 50px -32px rgba(11, 30, 73, 0.42);
}

/* panels */
body[data-page="service-details"] .web-panel.hidden {
    display: none !important;
}

body[data-page="service-details"] .web-panel {
    animation: jnServicePanelIn 0.35s ease;
}

@keyframes jnServicePanelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SERVICE OPTIONS
   ========================================= */
body[data-page="service-details"] .service-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.82);
    color: #0b1e49;
    font-size: 0.8rem;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

body[data-page="service-details"] .service-option:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(201, 162, 77, 0.38);
    box-shadow: 0 16px 40px -32px rgba(11, 30, 73, 0.24);
}

body[data-page="service-details"] .service-option.is-active {
    background: #0b1e49;
    color: #fff;
    border-color: #0b1e49;
    box-shadow: 0 18px 48px -32px rgba(11, 30, 73, 0.45);
}

/* buttons */
body[data-page="service-details"] #addToCartBtn,
body[data-page="service-details"] a[href="payment.html"] {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

body[data-page="service-details"] #addToCartBtn:hover,
body[data-page="service-details"] a[href="payment.html"]:hover {
    transform: translateY(-2px);
}

/* gallery */
body[data-page="service-details"] #galleryPanel .overflow-hidden {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

body[data-page="service-details"] #galleryPanel .overflow-hidden:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 65px -40px rgba(0, 0, 0, 0.24);
}

body[data-page="service-details"] #galleryPanel img {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body[data-page="service-details"] #galleryPanel .overflow-hidden:hover img {
    transform: scale(1.06);
}

/* reviews */
body[data-page="service-details"] #reviewsPanel .rounded-3xl {
    position: relative;
    overflow: hidden;
}

body[data-page="service-details"] #reviewsPanel .rounded-3xl::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #c9a24d, #e8c98e);
    opacity: 0.8;
}

/* faq */
body[data-page="service-details"] details {
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

body[data-page="service-details"] details:hover {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(201, 162, 77, 0.24);
}

body[data-page="service-details"] details[open] {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(201, 162, 77, 0.28);
    box-shadow: 0 18px 50px -42px rgba(0, 0, 0, 0.22);
}

body[data-page="service-details"] details summary {
    list-style: none;
}

body[data-page="service-details"] details summary::-webkit-details-marker {
    display: none;
}

/* sticky right side */
@media (max-width: 1023.98px) {
    body[data-page="service-details"] aside .sticky {
        position: static !important;
        top: auto !important;
    }
}

/* mobile tabs */
@media (max-width: 639px) {
    body[data-page="service-details"] #webServiceTabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    body[data-page="service-details"] #webServiceTabs::-webkit-scrollbar {
        display: none;
    }

    body[data-page="service-details"] .web-tab {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* =========================================================
   RELATED SECTION (SCOPED HOVER)
   ========================================================= */

.jn-related article {
    transition: all 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
    position: relative;
}

.jn-related article:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 40px 120px -60px rgba(0, 0, 0, 0.35);
}

/* الصورة */
.jn-related article img {
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jn-related article:hover img {
    transform: scale(1.08);
}

/* overlay */
.jn-related .jn-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(6, 19, 51, 0.65),
        rgba(6, 19, 51, 0.1),
        transparent
    );
    opacity: 0;
    transition: 0.4s ease;
}

.jn-related article:hover .jn-overlay {
    opacity: 1;
}

.jn-related article h3 {
    transition: 0.3s ease;
}

.jn-related article:hover h3 {
    color: var(--jn-gold);
}

.jn-related article .text-xl {
    transition: 0.3s ease;
}

.jn-related article:hover .text-xl {
    transform: scale(1.06);
}

.jn-related article a {
    transition: all 0.3s ease;
}

.jn-related article:hover a {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px -20px rgba(201, 162, 77, 0.55);
}

.jn-related .jn-cardActions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(-10px);
    transition: 0.3s ease;
}

.jn-related article:hover .jn-cardActions {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   COMPONENT: FLOATING CART
   ========================================= */

.jn-floatingCart {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;

    width: 56px;
    height: 56px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    color: #0b1e49;

    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.35);

    transition: all 0.3s ease;
}

.jn-floatingCart:hover {
    transform: translateY(-3px) scale(1.05);
    background: #c9a24d;
    color: #fff;
}

.jn-floatingCart svg {
    width: 22px;
    height: 22px;
}

.jn-cartBadge {
    position: absolute;
    top: -4px;
    right: -4px;

    width: 20px;
    height: 20px;
    border-radius: 50%;

    background: #c9a24d;
    color: #fff;

    font-size: 11px;
    font-weight: 800;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
}

/* سSTARS REVIEWS */
.jn-rateStar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.96);
    color: #d1d5db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.jn-rateStar:hover {
    transform: translateY(-1px);
    border-color: rgba(201, 162, 77, 0.4);
    background: #fff;
    box-shadow: 0 14px 36px -28px rgba(0, 0, 0, 0.18);
}

.jn-rateStar.is-active {
    color: #c9a24d;
    background: rgba(201, 162, 77, 0.1);
    border-color: rgba(201, 162, 77, 0.35);
}

.jn-rateStar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.2);
}

.jn-reviewBox {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition:
        max-height 0.5s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
}

.jn-reviewBox.is-open {
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   GLOBAL CART UI
   ========================================================= */

#serviceFloatingCart,
#floatingCart {
    position: fixed;
    top: 96px;
    right: 20px;
    z-index: 9998;
}

#floatingCartCount.hidden {
    display: none !important;
}

#serviceFloatingCart .jn-cartBadge,
#floatingCart .jn-cartBadge {
    background: #ef4444;
    color: #fff;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 900;
    border: 2px solid #fff;
}

#cartToast {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

#cartToast.is-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width: 640px) {
    #serviceFloatingCart,
    #floatingCart {
        top: 84px;
        right: 14px;
        width: 52px;
        height: 52px;
    }
}

/* =========================================================
   JEENA OFFERS HERO SLIDER (SCOPED)
   ========================================================= */
#jeenaOffersHeroSection .jeena-hero-copy {
    direction: ltr;
    text-align: left;
}

#jeenaOffersHeroSection .jeena-hero-copy.is-rtl {
    direction: rtl;
    text-align: right;
    align-items: stretch;
}

#jeenaOffersHeroSection .jeena-hero-copy.is-ltr {
    direction: ltr;
    text-align: left;
    align-items: stretch;
}

#jeenaOffersHeroSection .jeena-hero-copy.is-rtl .jeena-hero-bottom {
    direction: rtl;
}

#jeenaOffersHeroSection .jeena-hero-copy.is-ltr .jeena-hero-bottom {
    direction: ltr;
}

#jeenaOffersHeroSection .jeena-hero-copy.is-rtl .max-w-2xl {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

#jeenaOffersHeroSection .jeena-hero-copy.is-ltr .max-w-2xl {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

#jeenaOffersHeroSection .jeena-hero-copy.is-rtl .self-start {
    align-self: flex-end;
}

#jeenaOffersHeroSection .jeena-hero-copy.is-ltr .self-start {
    align-self: flex-start;
}

@media (max-width: 640px) {
    #jeenaOffersHeroSection .jeena-hero-copy.is-rtl .jeena-hero-bottom,
    #jeenaOffersHeroSection .jeena-hero-copy.is-ltr .jeena-hero-bottom {
        direction: ltr;
    }

    #jeenaOffersHeroSection .jeena-hero-copy.is-rtl .max-w-2xl,
    #jeenaOffersHeroSection .jeena-hero-copy.is-ltr .max-w-2xl {
        margin-left: 0;
        margin-right: 0;
    }
}

#confirmToast {
    opacity: 0;
    transform: translate(-50%, 12px);
}

#confirmToast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.web-tab {
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    color: #0b1e49;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.web-tab:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.web-tab.is-active {
    background: #0b1e49;
    color: white;
    border-color: #0b1e49;
}