/**
 * Rozen Flora Pro — Header & Navigation (refactored, single source of truth).
 * هيدر وتنظيم القائمة: ملف واحد منظم بدون تعارضات.
 *
 * Layout strategy:
 *  - DESKTOP (>900px): 3-column grid — [search | logo center | actions], sticky.
 *  - MOBILE  (≤900px): flex row — [actions + toggle] on edges, logo absolutely centered.
 *    Nav becomes a slide-in drawer from the inline-end edge.
 *
 * @package Rozen_Flora_Pro
 */

/* =========================================================
 * Top bar — الشريط العلوي (متمركز بالكامل)
 * ========================================================= */

/* Top bar — deep burgundy with a refined gold underline.
   الشريط العلوي: نبيذي عميق مع خط ذهبي راقٍ. */
.rf-topbar {
    background: linear-gradient(180deg, var(--rf-burgundy-dark) 0%, var(--rf-burgundy) 100%);
    color: var(--rf-cream);
    font-size: 12.5px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: inset 0 -1px 0 var(--rf-gold);
}

.rf-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;       /* محتوى متمركز دائماً */
    min-height: 40px;
    gap: 20px;
    text-align: center;
}

/* Hide side contact (kept in footer) — إخفاء تواصل الجانب */
.rf-topbar-contact { display: none; }

.rf-topbar-meta {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rf-topbar-announcement {
    color: var(--rf-gold-light);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Marquee — شريط متحرك */
.rf-topbar-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rf-marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    white-space: nowrap;
    animation: rf-marquee 28s linear infinite;
    will-change: transform;
}
.rf-marquee-group {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    padding-inline-end: 36px;
    flex: 0 0 auto;
}
.rf-marquee-sep { color: var(--rf-gold); opacity: 0.7; font-size: 10px; }
.rf-topbar:hover .rf-marquee-track { animation-play-state: paused; }

@keyframes rf-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* =========================================================
 * Header container — حاوية الهيدر
 * ========================================================= */

.rf-header { position: relative; }

/* Header main — refined professional colors with subtle gradient + shadow.
   الهيدر الرئيسي: تدرّج ناعم + ظل احترافي. */
.rf-header-main {
    background: linear-gradient(180deg, #ffffff 0%, #fdfaf6 100%);
    border-bottom: 1px solid var(--rf-line);
    position: relative;
    z-index: 100;
    transition: background var(--rf-transition), box-shadow var(--rf-transition), min-height var(--rf-transition);
}

/* Subtle gold accent line under the header — خط ذهبي رفيع تحت الهيدر */
.rf-header-main::after {
    content: '';
    position: absolute;
    bottom: -1px;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--rf-gold) 30%, var(--rf-gold-light) 50%, var(--rf-gold) 70%, transparent 100%);
    opacity: 0.55;
}

/* DESKTOP ONLY: sticky via dynamic-styles.php (@media min-width:901px) */

/* Shrunk state on scroll (desktop) — حالة التصغير */
.rf-header.rf-header-scrolled .rf-header-main {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 8px 32px rgba(114, 47, 55, 0.14);
}
.rf-header.rf-header-scrolled .rf-header-main::after { opacity: 0.8; }
.rf-header.rf-header-scrolled .rf-header-row { min-height: 64px; }

/* =========================================================
 * Header row — صف الهيدر
 * DESKTOP: 3-column grid. MOBILE: handled in @media below.
 * ========================================================= */

.rf-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    min-height: var(--rf-header-h);
    padding: 16px 24px;
}

/* Column alignment (desktop) */
.rf-search-col { justify-self: start; max-width: 300px; }
.rf-logo-col   { justify-self: center; text-align: center; }
.rf-actions-col{ justify-self: end; }

/* =========================================================
 * Logo column — عمود اللوقو
 * ========================================================= */

.rf-logo-col .custom-logo-link { display: block; line-height: 0; }

/* SINGLE source of truth for logo height (desktop).
   Clamps the Customizer value (up to 160px) to a safe 110px so the header
   never overflows. Mobile sizes override below in @media.
   مصدر واحد لارتفاع اللوقو على الديسكتوب (يحصر قيمة الـ Customizer بـ 110px). */
.rf-logo-col .custom-logo {
    max-height: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform var(--rf-transition);
}
.rf-logo-col .custom-logo-link:hover .custom-logo { transform: scale(1.03); }

/* Text logo fallback — لوقو نصي احتياطي */
.rf-logo-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 6px 10px;
}
.rf-logo-symbol { font-size: 24px; color: var(--rf-burgundy); line-height: 1; }
.rf-logo-text { display: flex; flex-direction: column; align-items: center; line-height: 1.15; margin-top: 2px; }
.rf-logo-primary {
    font-family: var(--rf-font-serif);
    font-size: 30px; font-weight: 700;
    color: var(--rf-burgundy);
    letter-spacing: 4px;
}
.rf-logo-divider { color: var(--rf-gold); font-size: 10px; margin: 1px 0; }
.rf-logo-secondary {
    font-family: var(--rf-font-decor);
    font-size: 11px; letter-spacing: 5px;
    color: var(--rf-gold);
    text-transform: uppercase;
}

/* =========================================================
 * Search column — عمود البحث
 * ========================================================= */

.rf-search-form {
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, #faf6f0 0%, #f5ede4 100%);
    border: 1.5px solid var(--rf-line);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(114, 47, 55, 0.04);
    transition: border-color var(--rf-transition), box-shadow var(--rf-transition), background var(--rf-transition);
}
.rf-search-form:focus-within {
    border-color: var(--rf-gold);
    background: var(--rf-white);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15), inset 0 1px 3px rgba(114, 47, 55, 0.04);
}
.rf-search-input {
    flex: 1;
    border: 0; background: transparent;
    padding: 13px 20px;
    font-family: var(--rf-font-body);
    font-size: 14px;
    color: var(--rf-ink);
    outline: none;
}
.rf-search-input::placeholder { color: var(--rf-ink-soft); opacity: 0.7; }
.rf-search-btn {
    flex: 0 0 auto;
    border: 0;
    background: linear-gradient(180deg, #7d353f 0%, #6e2c35 100%);
    color: #fff;
    width: 52px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--rf-transition);
}
.rf-search-btn:hover { background: linear-gradient(180deg, var(--rf-gold) 0%, var(--rf-gold-dark) 100%); }

/* =========================================================
 * Actions column — عمود الإجراءات
 * ========================================================= */

.rf-actions-col {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rf-icon-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    color: var(--rf-burgundy);
    text-decoration: none;
    border-radius: var(--rf-radius-sm);
    transition: background var(--rf-transition), color var(--rf-transition);
}
.rf-icon-btn:hover { background: var(--rf-cream); color: var(--rf-burgundy-dark); }
.rf-icon-label { font-size: 11px; font-weight: 500; letter-spacing: 0.3px; }

.rf-cart-count {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    background: var(--rf-gold);
    color: var(--rf-burgundy-dark);
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--rf-white);
}
.rf-cart-count:not(:empty) { display: flex; }

/* =========================================================
 * Mobile menu toggle — زر قائمة الجوال (مخفي افتراضياً)
 * ========================================================= */

.rf-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    background: transparent;
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-sm);
    cursor: pointer;
    padding: 0 10px;
}
.rf-menu-toggle span {
    display: block;
    height: 2px;
    background: var(--rf-burgundy);
    border-radius: 2px;
    transition: transform var(--rf-transition), opacity var(--rf-transition);
}
body.rf-nav-open .rf-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.rf-nav-open .rf-menu-toggle span:nth-child(2) { opacity: 0; }
body.rf-nav-open .rf-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
 * Primary navigation — القائمة الرئيسية (ديسكتوب)
 * ========================================================= */

/* Primary nav — rich burgundy gradient with depth + gold accent line.
   القائمة الرئيسية: تدرّج نبيذي غني بعمق + خط ذهبي. */
.rf-primary-nav {
    background: linear-gradient(180deg, #7d353f 0%, #6e2c35 55%, #5e252e 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow:
        inset 0 -3px 0 var(--rf-gold),
        0 2px 12px rgba(90, 36, 43, 0.18);
}

.rf-nav-menu,
.rf-nav-default {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.rf-nav-menu > li,
.rf-nav-default > li { position: relative; }

.rf-nav-menu > li > a,
.rf-nav-default > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 16px 22px;
    color: var(--rf-cream);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.3px;
    position: relative;
    transition: color var(--rf-transition);
}
.rf-nav-menu > li > a::after,
.rf-nav-default > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline: 22px;
    height: 2px;
    background: var(--rf-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--rf-transition);
}
.rf-nav-menu > li > a:hover,
.rf-nav-menu > li.current-menu-item > a,
.rf-nav-default > li > a:hover {
    color: var(--rf-gold-light);
}
.rf-nav-menu > li > a:hover::after,
.rf-nav-menu > li.current-menu-item > a::after,
.rf-nav-default > li > a:hover::after {
    transform: scaleX(1);
}

/* Sub-menu — قائمة فرعية */
.rf-nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    background: var(--rf-white);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-sm);
    box-shadow: var(--rf-shadow-lg);
    min-width: 220px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--rf-transition);
    list-style: none;
    z-index: 50;
}
.rf-nav-menu li:hover > .sub-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}
.rf-nav-menu .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--rf-ink);
    text-decoration: none;
    font-size: 14px;
    transition: background var(--rf-transition), color var(--rf-transition);
}
.rf-nav-menu .sub-menu a:hover {
    background: var(--rf-cream);
    color: var(--rf-burgundy);
    padding-inline-start: 26px;
}

/* =========================================================
 * Mobile overlay — طبقة الجوال
 * ========================================================= */

.rf-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 31, 34, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--rf-transition);
    z-index: 999;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
body.rf-nav-open .rf-mobile-overlay {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
 * RESPONSIVE — الجوال (≤900px)
 * ========================================================= */

@media (max-width: 1024px) {
    .rf-search-col { max-width: 280px; }
    .rf-icon-label { display: none; }
}

@media (max-width: 900px) {
    :root { --rf-header-h: 72px; }

    /* Hide desktop-only elements — إخفاء عناصر الديسكتوب */
    .rf-search-col { display: none; }
    .rf-menu-toggle { display: flex; }

    /* MOBILE HEADER ROW: flex with logo absolutely centered.
       The actions + toggle sit at the edges; the logo floats dead-center.
       صف الهيدر: اللوقو متمركز تماماً بتموضع مطلق. */
    .rf-header-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 72px;
        padding: 10px 16px;
        gap: 12px;
    }
    .rf-logo-col {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        text-align: center;
        pointer-events: none;
    }
    .rf-logo-col .custom-logo-link { pointer-events: auto; }
    /* MOBILE logo: capped well below the 72px header height. !important wins
       over the desktop 110px rule. اللوقو على الجوال محصور تحت ارتفاع الهيدر. */
    .rf-logo-col .custom-logo { max-height: 48px !important; }
    .rf-actions-col { position: relative; z-index: 3; }
    .rf-menu-toggle { position: relative; z-index: 3; }

    /* MOBILE NAV: slide-in drawer from inline-end edge.
       القائمة المنزلقة من الحافة. */
    .rf-primary-nav {
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        background: var(--rf-white);
        box-shadow: var(--rf-shadow-lg);
        z-index: 1000;
        overflow-y: auto;
        padding: 0 0 40px;
        transition: transform var(--rf-transition);
        box-shadow: inset 0 -3px 0 var(--rf-gold); /* keep gold accent */
    }
    [dir="rtl"] .rf-primary-nav { transform: translateX(-100%); }
    [dir="ltr"] .rf-primary-nav { transform: translateX(100%); }
    [dir="rtl"] body.rf-nav-open .rf-primary-nav { transform: translateX(0); }
    [dir="ltr"] body.rf-nav-open .rf-primary-nav { transform: translateX(0); }

    /* Mobile nav links — dark text on white drawer — روابط داكنة على القائمة البيضاء */
    .rf-nav-menu, .rf-nav-default {
        flex-direction: column;
        align-items: stretch;
        padding: 0 16px;
    }
    .rf-nav-menu > li > a,
    .rf-nav-default > li > a {
        display: block;
        padding: 14px 16px;
        color: var(--rf-burgundy);
        border-bottom: 1px solid var(--rf-line-soft);
        font-size: 16px;
    }
    .rf-nav-menu > li > a:hover,
    .rf-nav-default > li > a:hover { color: var(--rf-gold-dark); }
    .rf-nav-menu > li > a::after { display: none; }

    /* Close button inside drawer — زر الإغلاق */
    .rf-nav-close {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 2px solid var(--rf-gold);
        margin-bottom: 8px;
    }
    .rf-nav-close-title {
        font-family: var(--rf-font-serif);
        color: var(--rf-burgundy);
        font-weight: 600;
        font-size: 17px;
    }
    .rf-nav-close-btn {
        width: 40px; height: 40px;
        border: 1px solid var(--rf-line);
        border-radius: var(--rf-radius-sm);
        background: var(--rf-white);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        position: relative;
    }
    .rf-nav-close-btn::before,
    .rf-nav-close-btn::after {
        content: '';
        position: absolute;
        width: 16px; height: 2px;
        background: var(--rf-burgundy);
        border-radius: 2px;
    }
    .rf-nav-close-btn::before { transform: rotate(45deg); }
    .rf-nav-close-btn::after  { transform: rotate(-45deg); }

    /* CRITICAL: demote sticky header to static while nav is open,
       so its stacking context can't cover the drawer.
       الهيدر اللاصق يصبح static عند فتح القائمة لمنع تغطيتها. */
    body.rf-nav-open .rf-header-main {
        position: static !important;
        z-index: auto !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (max-width: 560px) {
    .rf-container { padding: 0 16px; }
    .rf-header-row { padding: 10px 12px; gap: 8px; }
    .rf-logo-col .custom-logo { max-height: 42px !important; }
    .rf-icon-btn { padding: 8px; }
    .rf-icon-label { display: none; }
    .rf-topbar-inner { min-height: 34px; font-size: 11.5px; }
}

/* =========================================================
 * RTL fine-tuning — تحسينات RTL
 * ========================================================= */

[dir="rtl"] .rf-search-input { text-align: right; }
[dir="rtl"] .rf-nav-menu .sub-menu { inset-inline-start: auto; inset-inline-end: 0; }