/*
 * Souq theme — local marketplace look on top of storefront-market.css.
 * Scoped to html[data-theme="souq"]. Deep navy with a warm amber accent
 * (amber only behind navy text), friendly 10–16px radii, units-sold line on
 * product cards and a tab bar at the bottom on phones.
 */

html[data-theme="souq"] {
    --sf-mk-gap: 14px;
    --sf-mk-radius: 12px;
    --souq-amber: var(--theme-color-secondary, #ffb020);
    --souq-navy: var(--theme-color-primary, #071b33);
}

/* ---------- Announcement bar: navy with amber icons ---------- */

html[data-theme="souq"] .sf-ticker {
    background: var(--souq-navy);
    color: #ffffff;
    border-bottom: 0;
}

html[data-theme="souq"] .sf-ticker .bi {
    color: var(--souq-amber);
}

/* ---------- Masthead ---------- */

html[data-theme="souq"] .sf-masthead {
    border-bottom: 0;
}

html[data-theme="souq"] .sf-masthead .sf-search-input {
    border: 2px solid var(--souq-navy);
    border-inline-end: 0;
    border-radius: 10px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

html[data-theme="souq"] .sf-search-btn {
    border-radius: 0 10px 10px 0;
    background: var(--souq-amber);
    color: var(--souq-navy);
}

[dir="rtl"][data-theme="souq"] .sf-search-btn {
    border-radius: 10px 0 0 10px;
}

html[data-theme="souq"] .sf-search-btn:hover {
    background: #ffc24d;
}

html[data-theme="souq"] .sf-cart-badge {
    background: var(--souq-amber);
    color: var(--souq-navy);
}

/* ---------- Category bar: navy, amber underline ---------- */

@media (min-width: 992px) {
    html[data-theme="souq"] .sf-catbar {
        background: var(--souq-navy);
        border-bottom: 0;
    }

    html[data-theme="souq"] .sf-catbar-link,
    html[data-theme="souq"] .sf-catbar-secondary .sf-catbar-link {
        color: #ffffff;
        font-weight: 600;
        border-bottom-width: 3px;
    }

    html[data-theme="souq"] .sf-catbar-link:hover,
    html[data-theme="souq"] .sf-catbar-link.active {
        color: var(--souq-amber);
        border-bottom-color: var(--souq-amber);
    }

    html[data-theme="souq"] .sf-catbar-link.is-all {
        color: var(--souq-navy);
        background: var(--souq-amber);
        border-radius: 10px;
        border-bottom-color: transparent;
        padding: 0.35rem 0.9rem;
        margin-block: 0.35rem;
    }
}

/* ---------- Page & section titles ---------- */

html[data-theme="souq"] .sf-main:has(.sf-home) {
    background: #ffffff;
}

html[data-theme="souq"] .sf-block {
    margin-top: 2.25rem;
}

html[data-theme="souq"] .sf-row-title {
    position: relative;
    padding-inline-start: 14px;
    font-weight: 800;
    color: var(--souq-navy);
}

/* Amber bar before each section title */
html[data-theme="souq"] .sf-row-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 5px;
    border-radius: 3px;
    background: var(--souq-amber);
}

html[data-theme="souq"] .sf-row-link {
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--theme-color-primary-soft);
    color: var(--souq-navy);
    font-weight: 700;
}

html[data-theme="souq"] .sf-row-link:hover {
    background: var(--souq-navy);
    color: #ffffff;
}

/* ---------- Hero ---------- */

html[data-theme="souq"] .sf-hero-main {
    border-radius: var(--theme-radius-lg);
}

html[data-theme="souq"] .sf-hero-tag {
    border-radius: 8px;
    background: var(--souq-amber);
    color: var(--souq-navy);
}

html[data-theme="souq"] .sf-btn-light {
    border-radius: 10px;
    background: var(--souq-amber);
    border-color: var(--souq-amber);
    color: var(--souq-navy);
}

html[data-theme="souq"] .sf-btn-light:hover {
    background: #ffc24d;
    color: var(--souq-navy);
}

html[data-theme="souq"] .sf-promo-tile,
html[data-theme="souq"] .sf-promo-tile:hover {
    border-radius: var(--theme-radius-lg);
    background: var(--souq-navy);
    color: #ffffff;
    box-shadow: none;
}

html[data-theme="souq"] .sf-promo-tile.is-alt,
html[data-theme="souq"] .sf-promo-tile.is-alt:hover {
    background: var(--souq-amber);
    color: var(--souq-navy);
}

html[data-theme="souq"] .sf-promo-tile .sf-promo-tag {
    border-radius: 8px;
    background: var(--souq-amber);
    color: var(--souq-navy);
    font-weight: 700;
}

html[data-theme="souq"] .sf-promo-tile.is-alt .sf-promo-tag {
    background: var(--souq-navy);
    color: #ffffff;
}

/* ---------- Category chips ---------- */

html[data-theme="souq"] .sf-chip-media {
    border: 2px solid var(--theme-color-border);
    background: var(--theme-color-surface);
}

html[data-theme="souq"] .sf-chip:hover .sf-chip-media,
html[data-theme="souq"] .sf-chip:focus-visible .sf-chip-media {
    border-color: var(--souq-amber);
}

html[data-theme="souq"] .sf-chip-label {
    font-weight: 600;
}

/* ---------- Product card ---------- */

html[data-theme="souq"] .sf-product-card {
    border: 1px solid var(--theme-color-border);
    border-radius: var(--sf-mk-radius);
    box-shadow: var(--theme-shadow-sm);
}

html[data-theme="souq"] .sf-product-card:hover {
    border-color: var(--souq-amber);
}

html[data-theme="souq"] .sf-product-card .sf-product-media {
    background: #ffffff;
    border-bottom: 0;
}

html[data-theme="souq"] .sf-price-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--souq-navy);
}

html[data-theme="souq"] .sf-sold {
    display: block;
    color: var(--theme-color-text-muted);
    font-size: 0.75rem;
}

html[data-theme="souq"] .sf-flag {
    border-radius: 6px;
    font-weight: 700;
}

html[data-theme="souq"] .sf-flag.is-rank {
    background: var(--souq-amber);
    color: var(--souq-navy);
}

html[data-theme="souq"] .sf-product-card .sf-product-actions .btn-primary {
    background: var(--souq-navy);
    border-color: var(--souq-navy);
    border-radius: 10px;
}

html[data-theme="souq"] .sf-product-card .sf-product-actions .btn-primary:hover,
html[data-theme="souq"] .sf-product-card .sf-product-actions .btn-primary:focus-visible {
    background: var(--souq-amber);
    border-color: var(--souq-amber);
    color: var(--souq-navy);
}

/* ---------- Budget, reasons, brands, newsletter ---------- */

html[data-theme="souq"] .sf-budget-card {
    border: 2px solid var(--theme-color-border);
    border-radius: var(--theme-radius-lg);
}

html[data-theme="souq"] .sf-budget-card:hover {
    border-color: var(--souq-amber);
}

html[data-theme="souq"] .sf-budget-amount {
    color: var(--souq-navy);
    font-weight: 800;
}

html[data-theme="souq"] .sf-reason {
    border: 0;
    border-radius: var(--theme-radius-lg);
    background: var(--theme-color-surface);
}

html[data-theme="souq"] .sf-reason > .bi {
    background: var(--souq-navy);
    color: var(--souq-amber);
}

html[data-theme="souq"] .sf-brands .sf-brand-logo {
    border: 1px solid var(--theme-color-border);
    background: #ffffff;
    border-radius: var(--theme-radius-md);
}

html[data-theme="souq"] .sf-newsletter {
    border: 0;
    border-radius: var(--theme-radius-lg);
    background: var(--souq-navy);
    color: rgba(255, 255, 255, 0.82);
}

html[data-theme="souq"] .sf-newsletter .sf-row-title {
    color: #ffffff;
}

html[data-theme="souq"] .sf-newsletter-form .btn {
    background: var(--souq-amber);
    border-color: var(--souq-amber);
    color: var(--souq-navy);
    font-weight: 700;
}

/* ---------- Page-builder tiles (Souq template) ---------- */

/* Builder headings get the same amber bar as the section titles */
html[data-theme="souq"] .bpr-widget--heading > :is(h1, h2, h3, h4) {
    padding-inline-start: 14px;
    border-inline-start: 5px solid var(--souq-amber);
}

html[data-theme="souq"] .bpr-widget--imagebox .bpr-ib {
    background: var(--theme-color-surface);
    border-radius: var(--theme-radius-lg);
    overflow: hidden;
    padding: 0 0 14px;
}

html[data-theme="souq"] .bpr-widget--imagebox .bpr-ib > div:last-child {
    padding-inline: 14px;
}

html[data-theme="souq"] .bpr-widget--imagebox .bpr-ib p {
    color: var(--theme-color-text-muted) !important;
    font-size: 0.85rem;
}

/* ---------- Phone tab bar ---------- */

@media (max-width: 767.98px) {
    html[data-theme="souq"] .sf-tabbar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
        background: #ffffff;
        border-top: 1px solid var(--theme-color-border);
        box-shadow: 0 -4px 16px rgba(7, 27, 51, 0.08);
    }

    html[data-theme="souq"] .sf-tabbar-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 58px;
        color: var(--theme-color-text-muted);
        font-size: 0.72rem;
        font-weight: 600;
        text-decoration: none;
    }

    html[data-theme="souq"] .sf-tabbar-link .bi {
        font-size: 1.25rem;
    }

    html[data-theme="souq"] .sf-tabbar-link.is-active {
        color: var(--souq-navy);
    }

    html[data-theme="souq"] .sf-tabbar-link.is-active .bi {
        color: var(--souq-navy);
        text-shadow: 0 0 0 var(--souq-amber);
    }

    /* Keep the footer clear of the tab bar */
    html[data-theme="souq"] body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom));
    }
}