/* ============================================================
   Saudi Riyal symbol font (U+20C1) + helper class
   ============================================================ */

/* تعريف الخط المخصص */
@font-face {
    font-family: 'SaudiRiyal';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    /* قصر الخط على رمز الريال فقط حتى لا يتأثر شكل الأرقام */
    unicode-range: U+20C1, U+FDFC;
}

/*
 * Root fix:
 * أضف نفس خط SaudiRiyal كـ fallback داخل خطوط الثيم (بنطاق Unicode محدود للرمز فقط).
 * هذا يجعل الرمز يظهر داخل أي عنصر يستخدم خط الثيم بدون الحاجة لإضافة <span>.
 */
@font-face {
    font-family: 'Work Sans';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    /* Theme1 primary font (via --first-font): add SAR glyph fallback only */
    font-family: 'TheYearofHandicrafts';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Montserrat';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Outfit';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Mulish';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Poppins';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Jost';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Roboto';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Cairo';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Tajawal';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}
@font-face {
    font-family: 'Inter';
    src: url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.woff') format('woff');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+20C1, U+FDFC;
}

/* فئة CSS لفرض ظهور الرمز */
.sar-symbol {
    font-family: 'SaudiRiyal', sans-serif !important;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    vertical-align: -0.1em;
    font-size: 1.15em; /* أكبر قليلاً */
    line-height: 1;
    margin-inline: 0 6px; /* مسافة أوضح بين الرمز والرقم */
    display: inline-block;
}

/* تكبير إضافي للرمز في بعض الأماكن (مثل شريط السلة) */
.sar-symbol--big {
    font-size: 18.5px;
    text-align: left;
    letter-spacing: 0px;
    padding-left: 2px;
    padding-right: 2px;
}
/* تكبير خفيف (مثل أسعار التوصيل/الخصم داخل النص) */
.sar-symbol--med {
    font-size: 1.25em;
}

/* استخدم خط SaudiRiyal كأولوية للرمز فقط (بفضل unicode-range) */
.currency-sar :where(
    .price,
    .currency,
    .amount,
    td.total,
    .cart-bar-price,
    .view-cart-bar-price,
    .cart-btn-price,
    .variation_price1,
    #cart-bottom-total-price,
    #view-cart-total-price,
    #checkout-total-price,
    .delivery-price-display,
    #order-summary-total,
    .order-summary-total-amount,
    .delivery-badge-inline,
    .price-badge-inline,
    .price-badge-inline .subtotal,
    .distance-pricing-note-accent,
    .notes-text
) {
    font-family: 'SaudiRiyal', 'Work Sans', 'Montserrat', 'Outfit', 'Mulish', 'Poppins', 'Jost', 'Roboto', 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}

/* Theme1 cart: qty badge (used when qty spinner is hidden) */
.qty-badge-inline {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 4px !important;
    background: #E0F7FA;
    border: 1px solid #E0F7FA;
    color: #00c5b4;
    border-radius: 6px;
    padding: 2px 6px;
    font-weight: 500;
    font-size: 10px;
    width: fit-content !important;
    max-width: 100%;
}

/* Theme1 cart: show prices inside the badge where qty used to be */
.qty-badge-inline.price-badge-inline {
    gap: 8px !important;
    padding: 4px 8px !important;
    font-size: 12px !important; /* السعر الحالي أوضح */
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 6px !important;
}
.qty-badge-inline.price-badge-inline .subtotal {
    margin: 0 !important;
    white-space: nowrap !important;
}
.qty-badge-inline.price-badge-inline .price-old {
    font-size: 10px !important;
    opacity: 0.65;
    /* Use custom diagonal strike (robust across themes/browsers) */
    display: inline-block;
    position: relative;
    text-decoration: none !important;
}
/* Fallback: draw a 1px red line even if some CSS resets <del> decoration */
.qty-badge-inline.price-badge-inline .price-old::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    /* slightly above the middle (higher on the number) */
    top: 42%;
    height: 1px;
    background: #ef4444;
    transform: translateY(-50%) rotate(-12deg);
    transform-origin: center;
    opacity: 0.85;
    pointer-events: none;
}

/* Cart: delivery location mismatch banner (above cart items) */
.cart-location-mismatch-wrap {
    margin: 0 0 12px;
}
.cart-location-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.cart-location-header-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cart-location-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    flex-shrink: 0;
}
.cart-location-icon svg {
    width: 16px;
    height: 16px;
}
.cart-location-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-location-change-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--theme-color, #2bb3c0);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    flex-shrink: 0;
}
.cart-location-change-btn svg {
    color: inherit;
}
.cart-location-warning {
    background: #fde8ea;
    color: #c62828;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    line-height: 1.4;
}

/* Wrapper لضمان: الرمز يسار + الرقم يمين (بشكل ثابت حتى مع RTL/Bidi) */
.sar-money {
    display: inline-flex;
    flex-direction: row; /* الرمز أولاً (يسار) ثم الرقم (يمين) */
    align-items: baseline;
    gap: 6px;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.sar-amount {
    font-size: 14px;
    font-weight: 500;
}

.sar-money .sar-symbol {
    margin-inline: 0; /* نعتمد على gap */
}

.order-chat-bubble .sar-money {
    align-items: center;
    gap: 3px;
    line-height: 1;
    vertical-align: middle;
}
.order-chat-bubble .sar-money .sar-symbol,
.order-chat-bubble .sar-symbol {
    font-size: 1.2em;
    vertical-align: 0;
    line-height: 1;
    margin-inline: 0;
}
.order-chat-bubble-total-amt-cur .sar-symbol,
.order-chat-bubble-total .sar-money .sar-symbol {
    font-size: 1.25em;
    vertical-align: 0;
}

/* بدون مسافة بين الرمز والرقم (للأماكن التي طلبتها: التوصيل/الخصم) */
.sar-money--tight {
    gap: 0 !important;
}

/* Quickview: price chip next to close (X) */
#quickview-modal .modal-inner {
    position: relative;
}

#quickview-modal .qv-close-price {
    position: absolute;
    top: 12px;
    right: 52px; /* leave room for the (X) button */
    left: auto;
    display: none !important; /* hide top price chip permanently */
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

/* ============================================================
   Prevent background scroll when any modal is open (mobile-safe)
   ============================================================ */
html.no-scroll,
html.no_scroll {
    overflow: hidden !important;
    /* height: 100% !important;  <-- REMOVED: This causes page to jump to top */
    height: auto !important; 
}
body.no-scroll,
body.no_scroll {
    overflow: hidden !important;
    /* height: 100% !important; */
}
/* Avoid scroll chaining/bounce into the page behind the modal */
#quickview-modal,
#quickview-modal .modal-inner {
    overscroll-behavior: contain;
}

/* Quickview (mobile): move close button to the left + make it slightly transparent,
   and remove the extra white space above the product image */
@media (max-width: 768px) {
    /* remove top padding that creates white space above the image */
    #quickview-modal .modal-inner .modal-body {
        /* force remove any spacing so the image sticks to the top */
        padding: 0 !important;
    }

    /* close button: left side + translucent */
    #quickview-modal .modal-inner .modal-close.close-button.product-view-close {
        display: flex !important; /* theme1 hides it by default */
        align-items: center;
        justify-content: center;
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        right: auto !important;
        /* Neutralize logical insets so RTL stylesheets can't push it to the right */
        inset-inline-start: unset !important;
        inset-inline-end: unset !important;
        inset-inline: unset !important;
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.55) !important; /* أعلى شفافية */
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
        z-index: 5;
        opacity: 1 !important;
    }

    /* also ensure the slider wrapper doesn't add padding/margin on top */
    #quickview-modal .qv-slider-wrp {
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important; /* anchor dots inside the image */
    }

    /* Put quickview dots INSIDE the product image area */
    #quickview-modal .qv-slider-wrp .qv-dots {
        position: absolute !important;
        bottom: 14px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 50 !important;
        pointer-events: auto !important;
    }

    #quickview-modal .qv-main-slider,
    #quickview-modal .qv-itm-img {
        overflow: hidden !important;
        touch-action: pan-y;
    }

    /* RTL: keep dots layout stable (mapping is handled in JS in theme1/rtl-custom.js) */
    [dir="rtl"] #quickview-modal .qv-slider-wrp .qv-dots {
        direction: ltr;
        flex-direction: row !important;
    }

    /* RTL: make the swipe hint arrows match the actual gesture direction */
    [dir="rtl"] #quickview-modal .scroll-arrows {
        transform: scaleX(-1);
    }

    /* HARD OVERRIDE:
       theme1-v1-rtl.css styles `.modal-inner .modal-close` as "رجوع" and positions it using logical inset.
       We neutralize those properties for quickview close button only. */
    #quickview-modal .modal-inner button.modal-close.close-button {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;   /* physical left */
        right: auto !important;
        inset: 15px auto auto 15px !important;
        inset-inline-start: unset !important;
        inset-inline-end: unset !important;
        inset-inline: unset !important;
        inset-block-start: unset !important;
        padding: 0 !important;
        min-height: 0 !important;
        gap: 0 !important;
        font: inherit !important;
    }

    /* Ensure no "رجوع" text/arrow leaks in */
    #quickview-modal .modal-inner button.modal-close.close-button::after {
        content: "" !important;
    }

    /* Higher transparency + keep same shape */
    #quickview-modal .modal-inner button.modal-close.close-button.product-view-close {
        background: rgba(255, 255, 255, 0.55) !important;
        opacity: 1 !important;
    }

    /* Keep close button pinned while scrolling inside quickview (mobile) */
    #quickview-modal .modal-inner .modal-close.close-button,
    #quickview-modal .modal-inner .modal-close.close-button.product-view-close {
        position: sticky !important;
        top: 15px !important;
        left: 15px !important;
        right: auto !important;
        inset: 15px auto auto 15px !important;
        inset-inline-start: unset !important;
        inset-inline-end: unset !important;
        margin-top: -40px !important; /* prevent extra white space */
        margin-right: auto !important;
        margin-left: 8px !important;
        align-self: flex-end !important; /* physical left in RTL flex */
    }
}

/* Hard override: remove any top spacing above the image in quickview */
#quickview-modal .modal-inner,
#quickview-modal .modal-inner .modal-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.pwa-launch-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pwa-splash-bg, #fbe100);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}

html.sf-pwa-launching,
html.sf-pwa-launching body,
html.sf-pwa-launching.dark-mode,
html.sf-pwa-launching.dark-mode body {
    background: var(--pwa-splash-bg, #fbe100) !important;
}

html.sf-pwa-launching .pwa-launch-splash {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pwa-launch-splash__logo {
    width: min(72vw, 220px);
    height: auto;
    object-fit: contain;
    display: block;
    transform: translateY(-9vh);
    opacity: 0;
    transition: opacity .2s ease;
}

.pwa-launch-splash.is-logo-ready .pwa-launch-splash__logo {
    opacity: 1;
}

.pwa-launch-celebration {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    pointer-events: none;
    overflow: hidden;
}

.pwa-launch-firework-core {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 40%);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--c, #ffffff);
    box-shadow: 0 0 18px var(--c, #ffffff), 0 0 36px var(--c, #ffffff);
    opacity: 0.95;
    animation: pwa-firework-core .9s ease-out forwards;
}

.pwa-launch-firework-spark {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 40%);
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--c, #ffffff);
    box-shadow: 0 0 8px var(--c, #ffffff);
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
    animation: pwa-firework-spark 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}

.pwa-launch-firework-trail {
    position: absolute;
    left: var(--x, 50%);
    top: calc(var(--y, 40%) + 26%);
    width: 2px;
    height: 72px;
    margin-left: -1px;
    background: linear-gradient(to top, transparent, var(--c, #ffffff), transparent);
    opacity: .8;
    transform-origin: bottom center;
    animation: pwa-firework-trail .55s ease-out forwards;
}

@keyframes pwa-firework-trail {
    0% {
        opacity: 0;
        transform: scaleY(0.2) translateY(30px);
    }
    30% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: scaleY(1) translateY(-10px);
    }
}

@keyframes pwa-firework-core {
    0% { transform: scale(0.2); opacity: .9; }
    65% { transform: scale(1.15); opacity: .85; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes pwa-firework-spark {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.45);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx, 0px), var(--dy, 120px)) scale(1);
    }
}