/* ===========================
   Generic primary button
   =========================== */
.sa-btn-primary {
    background-color: var(--sa-btn-primary);
    color: var(--sa-text-third);
    border: 1px solid var(--sa-btn-primary-border);
    border-radius: var(--sa-btn-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0; /* allow flex children to shrink for ellipsis */
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

    /* hover state using your theme variables */
    .sa-btn-primary:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-primary);
        color: var(--sa-btn-primary-contrast);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-primary-shadow-rgb), .30);
    }

    /* glossy sweep */
    .sa-btn-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.28) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
        z-index: 0;
    }

    .sa-btn-primary:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    /* keep inner content above sweep */
    .sa-btn-primary > * {
        position: relative;
        z-index: 1;
    }

/* ===========================
   Generic secondary button
   =========================== */
.sa-btn-secondary {
    background-color: var(--sa-btn-secondary, var(--bs-card-bg));
    color: var(--sa-text);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

    /* hover state – uses secondary vars if defined, falls back to primary-ish look */
    .sa-btn-secondary:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-secondary, var(--bs-card-bg));
        color: var(--sa-text);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-primary-shadow-rgb, var(--sa-btn-primary-shadow-rgb)), .30);
    }

    /* glossy sweep (same as primary) */
    .sa-btn-secondary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.28) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
        z-index: 0;
    }

    .sa-btn-secondary:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    /* keep inner content above sweep */
    .sa-btn-secondary > * {
        position: relative;
        z-index: 1;
    }

/* ===========================
   Outline / ghost primary button
   =========================== */
.sa-btn-outline-primary {
    background-color: var(--bs-card-bg);
    color: var(--bs-heading-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0; /* allow flex children to shrink for ellipsis */
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

    /* hover state using your theme variables */
    .sa-btn-outline-primary:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-primary);
        color: var(--sa-btn-primary-contrast);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-primary-shadow-rgb), .30);
    }

    /* glossy sweep */
    .sa-btn-outline-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.28) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
        z-index: 0;
    }

    .sa-btn-outline-primary:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    /* keep inner content above sweep */
    .sa-btn-outline-primary > * {
        position: relative;
        z-index: 1;
    }

/* ===========================
   Generic success button
   =========================== */
.sa-btn-success {
    background-color: var(--sa-btn-success, #22c55e); /* green-500 fallback */
    color: var(--sa-btn-success-contrast, #ffffff);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

    /* hover */
    .sa-btn-success:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-success);
        color: var(--sa-btn-success-contrast);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-success-shadow-rgb, 34,197,94), .30);
    }

    /* glossy sweep */
    .sa-btn-success::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.28) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
        z-index: 0;
    }

    .sa-btn-success:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    /* keep inner content above sweep */
    .sa-btn-success > * {
        position: relative;
        z-index: 1;
    }

/* ===========================
   Outline success button
   =========================== */
.sa-btn-outline-success {
    background-color: var(--bs-card-bg);
    color: var(--sa-btn-success, #22c55e);
    border: 1px solid var(--sa-btn-success, #22c55e);
    border-radius: var(--bs-border-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

    .sa-btn-outline-success:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-success, #22c55e);
        color: var(--sa-btn-success-contrast, #ffffff);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-success-shadow-rgb, 34,197,94), .30);
    }

    /* same sweep */
    .sa-btn-outline-success::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.28) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
    }

    .sa-btn-outline-success:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    .sa-btn-outline-success > * {
        position: relative;
        z-index: 1;
    }

/* ===========================
   Generic danger button
   =========================== */
.sa-btn-danger {
    background-color: var(--sa-btn-danger);
    color: var(--sa-btn-danger-contrast);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

    /* hover */
    .sa-btn-danger:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-danger-hover);
        color: var(--sa-btn-danger-contrast);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-danger-shadow-rgb), .30);
    }

    /* active / pressed */
    .sa-btn-danger:active {
        transform: translateY(0);
        background-color: var(--sa-btn-danger-active);
        box-shadow: 0 6px 14px rgba(var(--sa-btn-danger-shadow-rgb), .25);
    }

    /* glossy sweep */
    .sa-btn-danger::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.26) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
        z-index: 0;
    }

    .sa-btn-danger:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    /* keep content above sweep */
    .sa-btn-danger > * {
        position: relative;
        z-index: 1;
    }

/* ===========================
   Outline danger button
   =========================== */
.sa-btn-outline-danger {
    background-color: var(--bs-card-bg);
    color: var(--sa-btn-danger);
    border: 1px solid var(--sa-btn-danger);
    border-radius: var(--bs-border-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .sa-btn-outline-danger:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-danger-hover);
        color: var(--sa-btn-danger-contrast);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-danger-shadow-rgb), .30);
    }

    /* active */
    .sa-btn-outline-danger:active {
        background-color: var(--sa-btn-danger-active);
    }

    /* sweep */
    .sa-btn-outline-danger::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.26) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
    }

    .sa-btn-outline-danger:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    .sa-btn-outline-danger > * {
        position: relative;
        z-index: 1;
    }

.sa-btn-sm {
    padding: .35rem .65rem;
    font-size: 12px;
    border-radius: calc(var(--sa-radius) - 2px);
    line-height: 1.2;
}

.sa-btn-disabled {
    background-color: var(--sa-btn-disabled-color);
    border-color: var(--sa-btn-disabled-color);
    color: var(--sa-text);
    opacity: 0.9 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ===========================
   Generic Warning button
   =========================== */
.sa-btn-warning {
    background-color: var(--sa-btn-warning);
    color: var(--sa-btn-success-contrast, #ffffff);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

    /* hover */
    .sa-btn-warning:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-warning);
        color: var(--sa-btn-success-contrast);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-success-shadow-rgb, 34,197,94), .30);
    }

    /* glossy sweep */
    .sa-btn-warning::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.28) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
        z-index: 0;
    }

    .sa-btn-warning:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    /* keep inner content above sweep */
    .sa-btn-warning > * {
        position: relative;
        z-index: 1;
    }

/* ===========================
   Outline warning button
   =========================== */
.sa-btn-outline-warning {
    background-color: var(--bs-card-bg);
    color: var(--sa-btn-success, #22c55e);
    border: 1px solid var(--sa-btn-success, #22c55e);
    border-radius: var(--bs-border-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

    .sa-btn-outline-warning:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-success, #22c55e);
        color: var(--sa-btn-success-contrast, #ffffff);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-success-shadow-rgb, 34,197,94), .30);
    }

    /* same sweep */
    .sa-btn-outline-warning::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.28) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
    }

    .sa-btn-outline-warning:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    .sa-btn-outline-warning > * {
        position: relative;
        z-index: 1;
    }

    /* Fix icon vertical alignment inside SA buttons */
    .sa-btn-primary i,
    .sa-btn-secondary i,
    .sa-btn-outline-primary i,
    .sa-btn-danger i,
    .sa-btn-outline-danger i,
    .sa-btn-cta i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        vertical-align: middle;
    }
/* ------------------------------------------
   PREMIUM SHINE SWEEP HOVER EFFECT
   Reusable class: .shine-sweep
   Use: Add class to any card/box/item
   ------------------------------------------ */

.shine-sweep {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

    /* Soft premium shadow on hover */
    .shine-sweep:hover {
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }

    /* The shimmer light strip */
    .shine-sweep::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent );
        transform: skewX(-20deg);
        transition: transform 0.6s ease;
    }

    /* Sweep animation */
    .shine-sweep:hover::before {
        transform: translateX(260%);
    }


/* ======================================================
   UNIVERSAL PREMIUM CARD HOVER EFFECT
   Reusable on ANY card: .premium-hover
   Also image zoom class: .premium-img-hover
   ====================================================== */

/* Base card effect */
.premium-hover {
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

    /* Lift + soft shadow */
    .premium-hover:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(var(--sa-primary-rgb), 0.16);
    }

/* Image zoom effect (optional) */
.premium-img-hover img,
.premium-img-hover .zoom-img {
    transition: transform 0.65s ease; /* slower, smoother */
}

.premium-img-hover:hover img,
.premium-img-hover:hover .zoom-img {
    transform: scale(1.05); /* smaller zoom */
}

/* Optional Shine Sweep Add-on */
.premium-hover.shine-sweep::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.45), transparent );
    transform: skewX(-20deg);
    transition: transform 0.6s ease;
}

.premium-hover.shine-sweep:hover::before {
    transform: translateX(260%);
}

/* ====== isolated auth menu styling ====== */
.sa-auth-wrapper {
    position: relative;
    margin-inline-start: 8px;
}

/* ====== AUTH BUTTON (guest + logged in) ====== */
.sa-auth-btn,
.sa-auth-btn * {
    line-height: 1 !important;
}

.sa-auth-btn {
    background-color: var(--sa-btn-secondary);
    color: var(--sa-text);
    border: 1px solid var(--sa-btn-secondary-border);
    border-radius: var(--sa-btn-radius);
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 0; /* allow flex children to shrink for ellipsis */

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

    .sa-auth-btn i {
        font-size: 18px;
        color: currentColor; /* icon = same color as text */
    }

    /* fancy hover */
    .sa-auth-btn:hover {
        transform: translateY(-1px);
        background-color: var(--sa-btn-secondary-hover);
        color: var(--sa-btn-secondary-contrast);
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(var(--sa-btn-secondary-shadow-rgb), .30);
    }

    /* glossy sweep */
    .sa-auth-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.28) 35%, rgba(255,255,255,.12) 50%, transparent 70% );
        transform: skewX(-25deg) translateX(-150%);
        transition: transform .6s ease;
        pointer-events: none;
        z-index: 0;
    }

    .sa-auth-btn:hover::after {
        transform: skewX(-25deg) translateX(150%);
    }

    /* keep content above glossy sweep */
    .sa-auth-btn > * {
        position: relative;
        z-index: 1;
    }

/* ===== handle long display names ===== */
.sa-auth-name {
    max-width: 8rem; /* limit width so header doesn't stretch */
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    text-align: right;
    direction: rtl;
}

/* ===== dropdown panel ===== */
.sa-auth-menu {
    position: absolute;
    top: calc(100% + 8px);
    width: 220px;
    padding: 10px 0;
    background: var(--sa-card-bg);
    border-radius: var(--sa-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border: 1px solid var(--sa-border-color);
    display: none; /* closed by default */
    flex-direction: column;
    text-align: right;
    z-index: 9999;
}

    .sa-auth-menu.show {
        display: flex;
    }

.sa-auth-item {
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sa-auth-item:hover {
        background: var(--sa-navbar-item-hover-color);
    }

    .sa-auth-item i {
        font-size: 18px;
    }

/* logout button reset */
.sa-auth-logout {
    all: unset; /* remove ALL browser default styles */
    display: flex;
    width: 100%;
    padding: 10px 16px;
    cursor: pointer;
    color: var(--sa-primary);
    gap: 8px;
    align-items: center;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

    .sa-auth-logout i {
        font-size: 18px;
    }

    .sa-auth-logout:hover {
        background: var(--sa-secondary);
    }

/* DESKTOP: show name */
@media (min-width: 992px) {
    .sa-auth-name {
        display: inline;
    }
}

/* MOBILE: hide the name */
@media (max-width: 991px) {
    .sa-auth-name {
        display: none !important;
    }
}

/* ================================
                   CART BUTTON
        ================================= */
.sa-cart-btn {
    background-color: var(--sa-btn-secondary);
    color: var(--sa-text);
    border: 1px solid var(--sa-btn-secondary-border);
    border-radius: var(--sa-btn-radius);
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    position: relative;
    transition: .2s;
    text-decoration: none;
    line-height: 1;
}

    .sa-cart-btn i {
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: currentColor;
    }

    .sa-cart-btn:hover {
        border-color:transparent;
        transform: translateY(-1px);
        background: var(--sa-btn-secondary-hover);
        color: var(--sa-btn-secondary-contrast);
        box-shadow: 0 10px 24px rgba(var(--sa-btn-secondary-shadow-rgb), .3);
    }

/* Counter Badge */
.sa-cart-badge {
    background: var(--sa-primary);
    color: #fff;
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 999px;
    position: absolute;
    bottom: -6px;
    inset-inline-start: 0;
}

/* ================================
           PANEL
================================= */
.sa-cart-wrapper {
    position: relative !important;
}

.sa-cart-panel {
    position: absolute !important;
    inset-inline-end: 0 !important;
    width: 430px;
    background: var(--sa-card-bg);
    border-radius: var(--sa-radius);
    border: 1px solid var(--sa-border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    padding: 14px 0;
    display: none;
    z-index: 99999;
}

    /* .show  → desktop hover
       .is-open → touch toggle */
    .sa-cart-panel.show,
    .sa-cart-panel.is-open {
        display: block;
    }

.sa-cart-empty {
    padding: 30px;
    text-align: center;
    color: var(--sa-text);
}

    .sa-cart-empty i {
        font-size: 40px;
        opacity: .5;
    }

.sa-cart-panel:has(.sa-cart-empty) {
    width: 280px;
}

/* ================================
           ITEMS
================================= */
.sa-cart-items {
    max-height: 400px;
    overflow-y: auto;
    padding: 0 12px;
}

.sa-cart-item {
    display: flex;
    align-items: flex-start !important;
    gap: 16px;
    margin: 0 -12px;
    padding: 14px 12px;
    border-bottom: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
}

    .sa-cart-item:last-child {
        border-bottom: none !important;
    }

.sa-cart-item-img img {
    width: 100px !important;
    border-radius: 10px;
}

/* ================================
       HEADER (TITLE + TRASH ICON)
       RTL GRID → PERFECT ALIGNMENT
================================= */
.sa-cart-item-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.sa-cart-item-info .title {
    font-size: 17px;
    font-weight: 700;
    text-align: right;
}

.sa-cart-item-info .detail {
    font-size: 13px;
    color: var(--sa-muted-text);
    text-align: right;
}

.sa-cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Quantity */
.sa-cart-qty {
    font-size: 15px;
    font-weight: 700;
    color: var(--sa-heading-color);
    text-align: right;
}

/* Remove button */
.sa-cart-remove-btn {
    background: transparent;
    border: none;
    padding-left: 12px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .sa-cart-remove-btn i {
        font-size: 18px;
        color: var(--sa-btn-danger) !important;
        transition: opacity .2s;
    }

    .sa-cart-remove-btn:hover i {
        opacity: .7;
    }

/* Color + Size */
.sa-cart-item-info .color-size {
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: right;
}

    .sa-cart-item-info .color-size .dot {
        display: inline-flex;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-left: 4px;
        vertical-align: middle;
        overflow: hidden;
    }

/* Availability row background */
.status-soldout {
    background: #ffe5e5 !important;
}

.status-notavailable {
    background: #f3f3f3 !important;
}

/* ================================
       TABLET  (768px – 991px)
================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    .sa-cart-panel {
        width: 360px;
    }

        .sa-cart-panel:has(.sa-cart-empty) {
            width: 240px;
        }
}

/* ================================
       MOBILE  (< 768px)
================================= */
@media (max-width: 767.98px) {
    .sa-cart-panel {
        /* Fill available screen width without overflowing viewport.
           inset-inline-end: 0 stays — correct for RTL and LTR both.
           We cap the width so it never clips off the left edge. */
        width: calc(100vw - 32px) !important;
        max-height: 70vh;
        overflow-y: auto;
    }

        .sa-cart-panel:has(.sa-cart-empty) {
            width: calc(100vw - 32px) !important;
        }

    .sa-cart-items {
        max-height: calc(70vh - 80px);
    }

    .sa-cart-item-img img {
        width: 72px !important;
    }

    .sa-cart-item {
        gap: 10px;
        padding: 12px;
    }

    .sa-cart-item-info .title {
        font-size: 14px;
    }

    .sa-cart-qty {
        font-size: 13px;
    }
}
/* ================================
              PRICE SECTION – FIXED GRID
              ALWAYS 2 COLUMNS (RTL)
        ================================= */
.cart-price-box {
    margin-top: 12px;
}

.price-row {
    display: grid !important;
    grid-template-columns: 1fr auto; /* RTL: right column flexible, left auto */
    align-items: center;
    width: 100%;
}

.discount-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
}
    .discount-column .text-danger {
        color: var(--sa-primary) !important;
    }

    .discount-column span {
        font-size: 15px;
        font-weight: 600;
    }

.old-price {
    text-decoration: line-through;
    font-size: 13px;
    color: var(--sa-muted-text);
    text-align: left;
}

.new-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--sa-heading-color);
    text-align: left;
}


.price-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 12px !important;
}

/* ================================
                   FOOTER
        ================================= */
.sa-cart-footer {
    padding: 10px 14px 0;
    border-top: 1px solid #eee;
}

.sa-cart-btn-checkout {
    display: block;
    padding: 10px;
    background: var(--sa-btn-primary);
    color: var(--sa-btn-primary-contrast) !important;
    text-align: center;
    border-radius: var(--sa-btn-radius);
    font-size: 15px;
    text-decoration: none !important;
}
/* ============================================================
   FILE: wwwroot/css/search-box.css
============================================================ */

/* ===== WRAPPER ===== */
.sa-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
}

/* ===== SEARCH BOX ===== */
.sa-search-box {
    background-color: var(--sa-input-bg);
    border: 1px solid var(--sa-input-border-color);
    border-radius: var(--sa-radius);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .sa-search-box:focus-within {
        border-color: var(--sa-input-border-focus);
        box-shadow: 0 0 0 3px rgba(var(--sa-input-shadow-rgb), .15);
    }

.sa-search-icon {
    font-size: 18px;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

.sa-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--sa-text);
    min-width: 0;
}

    .sa-search-input::placeholder {
        color: var(--bs-secondary-color);
    }

.sa-search-shortcut {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--bs-secondary-color);
    font-family: inherit;
    flex-shrink: 0;
}

/* ===== DROPDOWN ===== */
.sa-search-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--sa-input-bg);
    border: 1px solid var(--sa-border-color);
    border-radius: var(--sa-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    max-height: 500px;
    overflow-y: auto;
    z-index: 9999;
}

    .sa-search-dropdown.show {
        display: flex;
    }

/* ===== HEADER (Total Count + View All) ===== */
.sa-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sa-border-color);
    background: var(--sa-body-bg-secondary);
}

.sa-search-total {
    font-size: 13px;
    color: var(--sa-text);
}

    .sa-search-total strong {
        color: var(--bs-body-color);
        font-weight: 600;
    }

.sa-search-viewall {
    font-size: 13px;
    color: var(--sa-btn-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity .2s;
}

    .sa-search-viewall:hover {
        color : var(--sa-warning);
        opacity: 0.8;
        text-decoration: underline;
    }

/* ===== SECTIONS ===== */
.sa-search-section {
    padding: 8px 0;
}

    .sa-search-section:not(:last-child) {
        border-bottom: 1px solid var(--bs-border-color);
    }

.sa-search-section-title {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sa-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== SUGGESTION ITEM ===== */
.sa-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s ease;
    text-decoration: none;
    color: var(--bs-body-color);
}

    .sa-suggestion-item:hover {
        background: rgba(var(--sa-btn-success-shadow-rgb), 0.8);
    }

.sa-suggestion-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

    .sa-suggestion-icon.category {
        background: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
    }

    .sa-suggestion-icon.tag {
        background: rgba(var(--bs-success-rgb), 0.1);
        color: var(--bs-success);
    }

.sa-suggestion-text {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-suggestion-count {
    font-size: 12px;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

/* ===== PRODUCTS GRID (2 columns) ===== */
.sa-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

/* ===== PRODUCT CARD - HORIZONTAL LAYOUT (RTL) ===== */
.sa-product-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* ← Changed from center to flex-start (top align) */
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    text-decoration: none;
    color: var(--bs-body-color);
    transition: background .15s ease;
    gap: 12px;
}

/* Add right border to left column cards */
.sa-products-grid .sa-product-card:nth-child(odd) {
    border-left: 1px solid var(--bs-border-color);
}

.sa-product-card:hover {
    background: rgba(var(--sa-btn-success-shadow-rgb), 0.8);
}

.sa-product-card.unavailable {
    opacity: 0.6;
}

/* Product Image */
.sa-product-card-image {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-top: 4px; /* Small offset to align with first line of text */
}

    .sa-product-card-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }

/* Discount Badge */
.sa-product-badge {
    position: absolute;
    bottom: -4px;
    left: -4px; /* RTL: badge on left side of image */
    background: var(--sa-badge-primary-bg);
    color: var(--sa-text-second);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
}

/* Unavailable Badge */
.sa-product-unavailable-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Product Info */
.sa-product-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    text-align: right;
}

.sa-product-card-name {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    height: 39px; /* Fixed height = 2 lines (13px * 1.5 * 2) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sa-text);
}

/* Product Price */
.sa-product-card-price {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.sa-product-card-price-final {
    font-size: 15px;
    font-weight: 600;
    color: var(--sa-heading-color);
}

.sa-product-card-price-old {
    font-size: 14px;
    color: var(--sa-muted-text);
    text-decoration: line-through;
}

.sa-product-card-price-currency {
    font-size: 11px;
    color: var(--sa-muted-text);
}

/* ===== Mobile: 1 card per row ===== */
@media (max-width: 576px) {
    .sa-products-grid {
        grid-template-columns: 1fr;
    }

        .sa-products-grid .sa-product-card:nth-child(odd) {
            border-left: none;
        }
}


/* ===== LOADING & EMPTY ===== */
.sa-search-loading,
.sa-search-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--sa-text);
    font-size: 14px;
}

    .sa-search-empty i {
        font-size: 24px;
    }

/* ===== MOBILE ADJUSTMENTS ===== */
.sa-search-wrapper--mobile {
    max-width: 100%;
}

.sa-search-dropdown--mobile {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
}

    .sa-search-dropdown--mobile .sa-products-grid {
        grid-template-columns: 1fr;
    }


/* =========================================================
   Bootstrap Modal — always above header (10100)
   ========================================================= */
.modal-backdrop {
    z-index: 10150 !important;
}

.modal {
    z-index: 10200 !important;
}

/* =========================================================
  Logo content
========================================================= */
.theme-logo {
    content: var(--sa-logo-url);
}

/* Prevents transition animations on page load (e.g. theme toggle snap).
   Applied briefly via JS on <html>, removed after first frame. */
.no-transitions * {
    transition: none !important;
}