/* ============================================================
   Ballour Admin Theme v2 — Home Customizer
   ------------------------------------------------------------
   Scope: admin/settings/update/home  (resources/views/admin/settings/home.blade.php)

   What this file fixes:
     • The customizer side-panel (.customize_section) inherits the
       v2 navy left-sidebar background. We force a clean white panel.
     • Modernise the publish (نشر) button, exit link, and accordion
       buttons (الاعلان النصى / الالوان / الشعار / ...).
     • Polish the preview area to feel like a proper canvas.
     • Keep ALL existing IDs/classes intact — JS hooks are untouched.

   Markup we restyle (from home-setting-aside.blade.php):
     <aside class="left-sidebar customize_section">
       <div class="customiz_head"> ... publish + exit ... </div>
       <div class="scond_customiz_head"> ... theme name ... </div>
       <div class="third_customiz_head"> ... back + section title ... </div>
       <div class="scroll-sidebar2">
         <div class="customiz_contain">
           <div class="main_tittle"><ul><li><button>...</button></li></ul></div>
           <div class="home_page_times"> ... add/sort sections ... </div>
           <div class="Site_color_contain"> ... </div>
           <div class="site_logo_contain"> ... </div>
           <div class="Site_Name_contain"> ... </div>
           <div class="text_add_contain"> ... </div>
           <div class="customFontsContain"> ... </div>
         </div>
       </div>
     </aside>
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1.  PANEL FRAME — undo navy bg from v2 sidebar layer
   ───────────────────────────────────────────────────────────── */
body.theme-v2 aside.left-sidebar.customize_section,
body.theme-v2 aside.customize_section {
    background: #fff !important;
    color: var(--bl-text) !important;
    width: 360px !important;
    border-inline-end: 1px solid var(--bl-border);
    box-shadow: 0 0 24px rgba(15, 23, 42, .06);
    border-radius: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1040;
}
body.theme-v2 aside.left-sidebar.customize_section::after {
    display: none !important;
}

body.theme-v2 .customize_section .scroll-sidebar2 {
    background: var(--bl-surface-2);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
}
body.theme-v2 .customize_section .customiz_contain {
    margin-bottom: 80px !important;
    background: var(--bl-surface-2);
    padding: 0;
}


/* ─────────────────────────────────────────────────────────────
   2.  TOP HEADER — publish button + exit
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .customiz_head {
    background: #fff !important;
    border-bottom: 1px solid var(--bl-border) !important;
    padding: 12px 16px !important;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-direction: row-reverse; /* publish button on the start side */
}
html[dir="ltr"] body.theme-v2 .customize_section .customiz_head {
    flex-direction: row;
}

/* Exit link */
body.theme-v2 .customize_section .customiz_head .close_Customization_options2 {
    width: auto !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    background: var(--bl-surface) !important;
    color: var(--bl-text) !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all .15s ease !important;
}
body.theme-v2 .customize_section .customiz_head .close_Customization_options2:hover {
    background: var(--bl-tint-red-bg, #fee2e2) !important;
    color: var(--bl-tint-red-fg, #dc2626) !important;
    border-color: var(--bl-tint-red-fg, #dc2626) !important;
    border-top: 1px solid var(--bl-tint-red-fg, #dc2626) !important;
}
body.theme-v2 .customize_section .customiz_head .close_Customization_options2 i {
    font-size: 14px !important;
    margin: 0 !important;
}

/* Publish button (نشر) */
body.theme-v2 .customize_section .customiz_head .save_home_edits {
    background: var(--bl-brand) !important;
    border: 1px solid var(--bl-brand) !important;
    color: #fff !important;
    padding: 0 18px !important;
    height: 36px !important;
    border-radius: var(--bl-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: all .15s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .2);
}
body.theme-v2 .customize_section .customiz_head .save_home_edits:hover {
    background: var(--bl-brand-600) !important;
    border-color: var(--bl-brand-600) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
    transform: translateY(-1px);
}
body.theme-v2 .customize_section .customiz_head .save_home_edits i {
    font-size: 14px !important;
}


/* ─────────────────────────────────────────────────────────────
   3.  THEME-NAME STRIP  (scond_customiz_head)
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .scond_customiz_head {
    background: #fff !important;
}
body.theme-v2 .customize_section .scond_customiz_head_contain {
    background: #fff !important;
    padding: 14px 18px !important;
    min-height: auto !important;
    border-bottom: 1px solid var(--bl-border) !important;
    gap: 4px;
}
body.theme-v2 .customize_section .scond_customiz_head_contain span {
    font-size: 12px !important;
    color: var(--bl-text-muted) !important;
    line-height: 1.3;
}
body.theme-v2 .customize_section .scond_customiz_head_contain span.font-bold {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--bl-heading) !important;
    letter-spacing: -.01em;
}


/* ─────────────────────────────────────────────────────────────
   4.  CURRENT-SECTION STRIP  (third_customiz_head with back btn)
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .third_customiz_head_contain {
    background: var(--bl-surface-2) !important;
    border-bottom: 1px solid var(--bl-border) !important;
    padding: 6px 12px !important;
    min-height: 56px !important;
    gap: 4px;
}
body.theme-v2 .customize_section .third_customiz_head_contain .back_buton button {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    background: #fff !important;
    color: var(--bl-text) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    transition: all .15s ease !important;
}
body.theme-v2 .customize_section .third_customiz_head_contain .back_buton button:hover {
    background: var(--bl-tint-blue-bg) !important;
    color: var(--bl-tint-blue-fg) !important;
    border-color: var(--bl-tint-blue-fg) !important;
}
body.theme-v2 .customize_section .third_customiz_head_contain .customize_data {
    margin-inline: 10px !important;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.theme-v2 .customize_section .third_customiz_head_contain .customize_data span {
    font-size: 11px !important;
    color: var(--bl-text-muted) !important;
    line-height: 1.2;
}
body.theme-v2 .customize_section .third_customiz_head_contain .customize_data span.font-bold {
    font-size: 14px !important;
    color: var(--bl-heading) !important;
    font-weight: 700 !important;
}


/* ─────────────────────────────────────────────────────────────
   5.  ACCORDION MENU — main_tittle (الاعلان النصى, الالوان, ...)
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .main_tittle {
    padding: 12px;
    background: var(--bl-surface-2);
}
body.theme-v2 .customize_section .main_tittle ul {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.theme-v2 .customize_section .main_tittle ul li {
    margin: 0 !important;
}
body.theme-v2 .customize_section .main_tittle ul li button {
    background: #fff !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    color: var(--bl-text) !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    transition: all .15s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
body.theme-v2 .customize_section .main_tittle ul li button::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background .15s ease;
}
body.theme-v2 .customize_section .main_tittle ul li button:hover {
    background: var(--bl-tint-blue-bg) !important;
    color: var(--bl-tint-blue-fg) !important;
    border-color: var(--bl-tint-blue-fg) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
}
body.theme-v2 .customize_section .main_tittle ul li button:hover::before {
    background: var(--bl-brand);
}
body.theme-v2 .customize_section .main_tittle ul li button > span {
    line-height: 1.2;
    flex: 1;
    text-align: start;
}
body.theme-v2 .customize_section .main_tittle ul li button i {
    font-size: 12px;
    color: var(--bl-text-muted);
    transition: transform .2s ease;
}
body.theme-v2 .customize_section .main_tittle ul li button:hover i {
    color: var(--bl-tint-blue-fg);
}

/* RTL — flip caret to point inline-end */
html[dir="rtl"] body.theme-v2 .customize_section .main_tittle ul li button i.fa-caret-down {
    transform: rotate(-90deg);
}
html[dir="ltr"] body.theme-v2 .customize_section .main_tittle ul li button i.fa-caret-down {
    transform: rotate(-90deg);
}


/* ─────────────────────────────────────────────────────────────
   6.  HOME-PAGE SECTIONS PANEL  (Add section / Sort)
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .home_page_times {
    padding: 16px;
    background: var(--bl-surface-2);
}
body.theme-v2 .customize_section .home_page_times > .custom_but1 {
    background: var(--bl-brand) !important;
    border: 1px solid var(--bl-brand) !important;
    color: #fff !important;
    padding: 0 14px !important;
    height: 38px !important;
    border-radius: var(--bl-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 4px 8px 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: all .15s ease;
}
body.theme-v2 .customize_section .home_page_times > .custom_but1:hover {
    background: var(--bl-brand-600) !important;
    border-color: var(--bl-brand-600) !important;
}
body.theme-v2 .customize_section .home_page_times > #Sort_sections.custom_but1,
body.theme-v2 .customize_section .home_page_times > #save_Sort_sections.custom_but1:not(.hide):not([hidden]) {
    background: #fff !important;
    color: var(--bl-text) !important;
    border-color: var(--bl-border) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    display: inline-flex !important;
}
body.theme-v2 .customize_section .home_page_times > #Sort_sections.custom_but1:hover,
body.theme-v2 .customize_section .home_page_times > #save_Sort_sections.custom_but1:not(.hide):not([hidden]):hover {
    background: var(--bl-tint-blue-bg) !important;
    color: var(--bl-tint-blue-fg) !important;
    border-color: var(--bl-tint-blue-fg) !important;
}
/* "حفظ الترتيب" — hidden until "ترتيب التصنيفات" is clicked */
body.theme-v2 .customize_section .home_page_times > #save_Sort_sections.hide,
body.theme-v2 .customize_section .home_page_times > #save_Sort_sections[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    border: none !important;
}
body.theme-v2 .customize_section .home_page_times > #Sort_sections.hide,
body.theme-v2 .customize_section .home_page_times > #Sort_sections[hidden] {
    display: none !important;
}

/* Inner cards inside home_page_times (add_section, sort_sections, etc.) */
body.theme-v2 .customize_section .home_page_times .card,
body.theme-v2 .customize_section .home_page_times .theem_section .card {
    background: #fff !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    margin-bottom: 12px;
}


/* ─────────────────────────────────────────────────────────────
   7.  GENERIC SECTION CONTAIN (Site_color_contain, site_logo_contain, ...)
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .Site_color_contain,
body.theme-v2 .customize_section .site_logo_contain,
body.theme-v2 .customize_section .Site_Name_contain,
body.theme-v2 .customize_section .text_add_contain,
body.theme-v2 .customize_section .customFontsContain {
    background: var(--bl-surface-2);
    padding: 16px !important;
    border: none;
}
body.theme-v2 .customize_section .Site_color_contain .card,
body.theme-v2 .customize_section .site_logo_contain .card,
body.theme-v2 .customize_section .Site_Name_contain .card,
body.theme-v2 .customize_section .text_add_contain .card,
body.theme-v2 .customize_section .customFontsContain .card {
    background: #fff !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    margin-bottom: 12px;
}


/* ─────────────────────────────────────────────────────────────
   8.  HOME-PAGE-SECTIONS LIST  (.all_section ul li)
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .all_section ul {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.theme-v2 .customize_section .all_section ul li {
    margin: 0 !important;
    background: #fff;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius-sm);
    overflow: hidden;
    transition: all .15s ease;
}
body.theme-v2 .customize_section .all_section ul li:hover {
    border-color: var(--bl-brand);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}
body.theme-v2 .customize_section .all_section ul li button.home_page_sections {
    background: transparent !important;
    border: none !important;
    color: var(--bl-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 14px !important;
}
body.theme-v2 .customize_section .all_section ul li button.home_page_sections:hover {
    background: var(--bl-tint-blue-bg) !important;
    color: var(--bl-tint-blue-fg) !important;
}


/* ─────────────────────────────────────────────────────────────
   9.  PREVIEW CANVAS  (.previwe_theem)
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .previwe_theem {
    margin: 0 !important;
    padding: 24px;
    background: var(--bl-surface-2);
    min-height: 100vh;
}
body.theme-v2 .previwe_theem iframe {
    width: 100% !important;
    height: calc(100vh - 48px) !important;
    background: #fff !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    display: block;
}

/* When iframe hasn't loaded yet, the empty placeholder gets a soft grid bg */
body.theme-v2 .previwe_theem:empty,
body.theme-v2 .col-12 > .previwe_theem:not(:has(iframe)) {
    background:
        linear-gradient(var(--bl-border) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--bl-border) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--bl-surface-2);
    border: 1px dashed var(--bl-border);
    border-radius: var(--bl-radius);
    margin: 24px !important;
    min-height: calc(100vh - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.theme-v2 .previwe_theem:empty::before,
body.theme-v2 .col-12 > .previwe_theem:not(:has(iframe))::before {
    content: "Preview…";
    font-size: 14px;
    color: var(--bl-text-muted);
    font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   10.  FORM CONTROLS INSIDE THE CUSTOMIZER
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .form-group {
    margin-bottom: 14px;
}
body.theme-v2 .customize_section .form-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--bl-heading) !important;
    margin-bottom: 6px !important;
    display: block;
}
body.theme-v2 .customize_section .form-control,
body.theme-v2 .customize_section input.form-control,
body.theme-v2 .customize_section select.form-control,
body.theme-v2 .customize_section textarea.form-control,
body.theme-v2 .customize_section .custom-select {
    background: #fff !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    color: var(--bl-text) !important;
    font-size: 13px !important;
    height: 40px !important;
    padding: 0 12px !important;
    box-shadow: none !important;
    transition: all .15s ease;
}
body.theme-v2 .customize_section .form-control:focus {
    border-color: var(--bl-brand) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
body.theme-v2 .customize_section textarea.form-control {
    height: auto !important;
    padding: 10px 12px !important;
    min-height: 80px;
}


/* ─────────────────────────────────────────────────────────────
   11.  POSITION THE PREVIEW NEXT TO THE CUSTOMIZER PANEL
   ------------------------------------------------------------
   On desktop, the customizer is fixed (380 px). The preview must
   start AFTER the customizer in RTL (i.e. push from the right edge).
   On RTL: .customize_section sits on the inline-end edge → preview
   must push margin-inline-end to clear it.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    /* Customizer panel anchors to the inline-start edge:
        RTL → right side  (matches legacy markup expectation)
        LTR → left side                                              */
    body.theme-v2 .customize_section {
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
    }
    /* Hide the regular v2 admin sidebar ONLY when the customizer panel
       is present on the page (i.e. on /admin/settings/update/home).
       Without :has() this rule used to apply to every page, hiding the
       main navigation everywhere — fixed below. */
    body.theme-v2:has(aside.customize_section) aside.left-sidebar:not(.customize_section) {
        display: none !important;
    }
    /* Push the page-wrapper to clear the customizer panel. */
    body.theme-v2 .Customize_page_wrapper {
        margin-inline-start: 360px !important;
        margin-inline-end: 0 !important;
        padding-top: 0 !important;
    }
    body.theme-v2 .col-12 > .previwe_theem,
    body.theme-v2 .previwe_theem {
        margin-inline-end: 0 !important;
        margin-inline-start: 0 !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   12.  MOBILE / TABLET LAYOUT
   ------------------------------------------------------------
   On mobile we abandon the desktop side-panel layout entirely:
     • Hide the v2 main admin sidebar (the customize panel takes
       over as the primary nav for this screen).
     • Let the customize panel become a normal full-width block
       in the document flow instead of a fixed 360 px column.
     • Reset the .Customize_page_wrapper margins so the preview
       isn't shoved off-screen.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {

    /* ── Hide main nav sidebar on this page ── */
    body.theme-v2:has(aside.customize_section) aside.left-sidebar:not(.customize_section),
    body.theme-v2:has(aside.customize_section) .sidebartoggler {
        display: none !important;
    }

    /* ── Topbar stays on top ── */
    body.theme-v2:has(aside.customize_section) header.topbar {
        z-index: 1055;
    }

    /* ── Preview wrapper: full screen ── */
    body.theme-v2 .Customize_page_wrapper {
        margin: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
        padding-bottom: 0 !important;
        width: 100% !important;
    }

    /* ── Preview fills the remaining screen ── */
    body.theme-v2 .previwe_theem {
        padding: 0 !important;
        min-height: calc(100vh - 68px - 56px) !important;
    }
    body.theme-v2 .previwe_theem iframe {
        height: calc(100vh - 68px - 56px) !important;
        border-radius: 0 !important;
        border: none !important;
    }

    /* ── Customize panel: off-canvas drawer (hidden by default) ── */
    body.theme-v2 aside.left-sidebar.customize_section,
    body.theme-v2 aside.customize_section {
        position: fixed !important;
        top: 68px !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        width: min(85vw, 340px) !important;
        max-width: min(85vw, 340px) !important;
        height: calc(100vh - 68px) !important;
        max-height: calc(100vh - 68px) !important;
        overflow: hidden !important;
        z-index: 1060 !important;
        padding-top: 0 !important;
        /* slide out by default */
        transform: translateX(105%) !important;
        transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
        box-shadow: 4px 0 24px rgba(15,23,42,.18) !important;
    }
    html[dir="ltr"] body.theme-v2 aside.left-sidebar.customize_section,
    html[dir="ltr"] body.theme-v2 aside.customize_section {
        transform: translateX(-105%) !important;
    }

    /* ── Panel slides IN when show-sidebar is active ── */
    body.theme-v2.show-sidebar aside.left-sidebar.customize_section,
    body.theme-v2.show-sidebar aside.customize_section {
        transform: translateX(0) !important;
    }

    /* ── Scrim behind the open drawer (home customizer only) ──
       Must stay below the panel (1060). Do not use backdrop-filter —
       it was painting above the main nav drawer on other pages. */
    body.theme-v2:has(aside.customize_section).show-sidebar::before {
        content: "" !important;
        position: fixed !important;
        top: 68px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(15,23,42,.5) !important;
        z-index: 1058 !important;
        pointer-events: auto !important;
        animation: bl-fade-in .2s ease !important;
    }
    body.theme-v2:has(aside.customize_section).show-sidebar {
        overflow: hidden !important;
    }

    /* ── Scrollable area inside drawer ── */
    body.theme-v2 .customize_section .scroll-sidebar2 {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch;
    }

    body.theme-v2 .customize_section .customiz_contain {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }

    /* ── customiz_head back to normal (no sticky override needed) ── */
    body.theme-v2 .customize_section .customiz_head {
        position: relative !important;
        top: auto !important;
        background: #fff !important;
        border-bottom: 1px solid var(--bl-border) !important;
        padding: 12px 16px !important;
        min-height: 60px !important;
        box-shadow: none !important;
        gap: 10px !important;
    }
    body.theme-v2 .customize_section .customiz_head .save_home_edits {
        flex: 1 !important;
        justify-content: center !important;
        background: var(--bl-brand, #2563eb) !important;
        color: #fff !important;
        border-color: var(--bl-brand, #2563eb) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        height: 38px !important;
    }
    body.theme-v2 .customize_section .customiz_head .close_Customization_options2 {
        background: var(--bl-surface-2) !important;
        border-color: var(--bl-border) !important;
        color: var(--bl-text) !important;
        height: 38px !important;
        font-size: 12px !important;
    }

    /* ── pageControl bar (hamburger + title + exit) ── */
    body.theme-v2 .pageControl {
        display: flex !important;
        background: #fff;
        border-bottom: 1px solid var(--bl-border);
        padding: 10px 14px;
        height: 56px;
        box-shadow: 0 1px 4px rgba(15,23,42,.06);
        position: sticky;
        top: 68px;
        z-index: 10;
    }
    body.theme-v2 .pageControl .right p {
        color: var(--bl-heading);
        font-weight: 700;
        font-size: 14px;
        margin: 0;
    }
    body.theme-v2 .pageControl .right button.nav-toggler {
        width: 38px;
        height: 38px;
        border-radius: var(--bl-radius-sm);
        background: var(--bl-surface-2);
        border: 1px solid var(--bl-border);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    body.theme-v2 .pageControl .right button.nav-toggler svg path {
        fill: var(--bl-text);
    }
    body.theme-v2 .pageControl .lavePage {
        background: var(--bl-tint-red-bg, #fee2e2);
        color: var(--bl-tint-red-fg, #dc2626);
        border-radius: var(--bl-radius-sm);
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 16px;
    }
}


/* ─────────────────────────────────────────────────────────────
   13.  HIDE THE V2 MAIN-SIDEBAR HEADER (logo) for this page
   ------------------------------------------------------------
   The home customizer hides the legacy aside via .Main_aside { display:none }
   in the page's <style>. The v2 sidebar header (.bl-side-head) sits inside
   the regular admin sidebar, which is also hidden. Make sure no leftover
   v2 sidebar bits leak into the customizer panel.
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .bl-side-head,
body.theme-v2 .customize_section .sidebar-nav,
body.theme-v2 .customize_section .nav-small-cap {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────
   14.  DESIGNS DROPDOWN (التصاميم) — avoid clipping in panel
   ───────────────────────────────────────────────────────────── */
body.theme-v2 .customize_section .add_section,
body.theme-v2 .customize_section .add_section .card,
body.theme-v2 .customize_section .Edit_thems,
body.theme-v2 .customize_section .Edit_thems .card,
body.theme-v2 .customize_section .Add_product_section,
body.theme-v2 .customize_section .Custom_select,
body.theme-v2 .customize_section .Custom_select .select-dropdown {
    overflow: visible !important;
}

body.theme-v2 .customize_section .select-dropdown__list.bl-dropdown-fixed {
    position: fixed !important;
    z-index: 1075 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .15) !important;
    padding-bottom: 8px !important;
}

body.theme-v2 .customize_section .select-dropdown__list.bl-dropdown-fixed .select-dropdown__list-item {
    color: var(--bl-text) !important;
    padding: 8px 12px !important;
    min-height: 48px;
}

body.theme-v2 .customize_section .select-dropdown__list.bl-dropdown-fixed .select-dropdown__list-item:hover {
    color: var(--bl-brand) !important;
    background: var(--bl-tint-blue-bg) !important;
}