/* ============================================================
   Ballour Admin Theme v2 — Form Pages (Create/Edit screens)
   ------------------------------------------------------------
   Pure CSS polish for the existing markup. No JS or HTML
   restructuring — just a clearer visual hierarchy for big
   forms (products/create, products/edit, settings/*).

   Layout map:
     [section heading] .card-title.head_text  →  modern with bar
     [section card]    .card / .card-body     →  airy + light bg
     [labels & inputs] .form-control / label  →  taller / soft
     [submit button]   .custom_but1           →  shadow + icon
     [sticky save bar] .bl-form-savebar       →  bottom CTA pad
   ============================================================ */


/* ============================================================
   1. PAGE-HEAD ROW  (h4.head_text inside col-12 mt-3)
      Most create/edit pages start with a `.row > .col-sm-12.mt-3`
      and an `<h4 class="head_text">{{title}}</h4>` heading.

      We turn the whole row into a topbar-like band: title large,
      bold, on the start side; a soft underline below the row.
   ============================================================ */
body.theme-v2 .row:has(> [class*="col-"].mt-3:first-child > h4.head_text):first-of-type,
body.theme-v2 .row:has(> [class*="col-"].mt-3:first-child > h4.head_text:first-child) {
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow-sm, 0 1px 2px rgba(15, 23, 42, .04));
    padding: 16px 22px;
    margin-inline: 0;
    margin-bottom: 6px;
    align-items: center;
}
body.theme-v2 .row > [class*="col-"].mt-3:first-child > h4.head_text:only-child,
body.theme-v2 .row > [class*="col-"].mt-3:first-child > h4.head_text:first-child {
    font-size: 20px !important;
    font-weight: 800;
    color: var(--bl-heading) !important;
    margin: 0;
    line-height: 1.25;
    border: none;
    letter-spacing: -.01em;
    position: relative;
    padding-inline-start: 18px !important;
    padding-inline-end: 0 !important;
    padding-block: 0 !important;
}

/* Accent bar before the page title — kept clear of the first
   letter so it never visually overlaps with Arabic / Hebrew
   characters that start with a tall vertical stroke. */
body.theme-v2 .row > [class*="col-"].mt-3:first-child > h4.head_text:only-child::before,
body.theme-v2 .row > [class*="col-"].mt-3:first-child > h4.head_text:first-child::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    background: var(--bl-brand);
    border-radius: 2px;
}
/* page-head row: keep its inner col padding zero so title sits flush
   with the band edges, and zero out mt-3 since the band already pads. */
body.theme-v2 .row:has(> [class*="col-"].mt-3:first-child > h4.head_text):first-of-type
> [class*="col-"].mt-3:first-child {
    padding-inline: 0 !important;
    margin-top: 0 !important;
}
/* Right-side area inside the page-head row (Navigation_arrows on edit
   pages, "Add new" buttons on listings, etc.). Push them to the end. */
body.theme-v2 .row:has(> [class*="col-"].mt-3:first-child > h4.head_text):first-of-type
> [class*="col-"].mt-3:not(:first-child),
body.theme-v2 .row:has(> [class*="col-"].mt-3:first-child > h4.head_text):first-of-type
> [class*="col-"].mt-3.text-left,
body.theme-v2 .row:has(> [class*="col-"].mt-3:first-child > h4.head_text):first-of-type
> [class*="col-"].mt-3.text-right {
    margin-top: 0 !important;
    padding-inline: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
/* The .orderDetailsHead row pattern (used on order details + product edit)
   already handles its own layout; reset our band there to keep it inline. */
body.theme-v2 .row > .orderDetailsHead {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}


/* ============================================================
   2. SECTION CARD HEADERS  (.card-title.head_text inside cards)
   ------------------------------------------------------------
   Markup we restyle is:
     <h4 class="card-title head_text d-inline-block">
       <span class="head_iicon"><i class="..."></i></span>
       Title text
     </h4>
     <span class="d-inline-block popup_info">...</span>   ← optional
     <button class="show_more_less_but f-l">...</button>   ← optional

   We keep head_text as inline (so popup_info sits next to it)
   and let the row sit on top of a border-bottom drawn with a
   pseudo-element on the card-body.
   ============================================================ */
body.theme-v2 .card .card-body > .card-title.head_text,
body.theme-v2 .card .card-body .card-title.head_text {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bl-heading) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    line-height: 1.2;
    position: relative;
}
body.theme-v2 .card .card-body > .card-title.head_text::before,
body.theme-v2 .card .card-body .card-title.head_text::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--bl-brand);
    border-radius: 2px;
    flex-shrink: 0;
    margin-inline-end: 4px;
}

/* draw a section underline using the card-body's first .row,
   so the heading stays inline but a border separates the header
   row from the form body. */
body.theme-v2 .card .card-body > .card-title.head_text + .popup_info,
body.theme-v2 .card .card-body > .card-title.head_text {
    margin-bottom: 16px !important;
}
body.theme-v2 .card .card-body > .card-title.head_text ~ .row,
body.theme-v2 .card .card-body > .show_more_less_but ~ .row,
body.theme-v2 .card .card-body > .popup_info ~ .row {
    border-top: 1px solid var(--bl-border);
    padding-top: 18px;
    margin-top: 4px;
}

/* tiny info icon next to a section title */
body.theme-v2 .popup_info {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bl-surface-2);
    color: var(--bl-text-soft);
    font-size: 12px;
    margin-inline-start: 6px;
    margin-bottom: 16px;
    cursor: help;
    transition: all .15s ease;
    vertical-align: middle;
}
body.theme-v2 .popup_info:hover {
    background: var(--bl-tint-blue-bg);
    color: var(--bl-tint-blue-fg);
}
body.theme-v2 .popup_info i { font-size: 12px; }

/* show_more_less_but — circular toggle on the far end of section title */
body.theme-v2 .show_more_less_but,
body.theme-v2 button.show_more_less_but.custom_but2 {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--bl-surface-2) !important;
    border: 1px solid var(--bl-border) !important;
    color: var(--bl-text-muted) !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}
body.theme-v2 .show_more_less_but:hover,
body.theme-v2 button.show_more_less_but.custom_but2: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 .show_more_less_but i { font-size: 14px !important; }

/* head_iicon — small tinted square that sits before a head_text */
body.theme-v2 .head_iicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bl-tint-blue-bg);
    color: var(--bl-tint-blue-fg);
    font-size: 14px;
    margin-inline-end: 4px;
    flex-shrink: 0;
}
body.theme-v2 .card-title.head_text .head_iicon { margin: 0; }


/* ============================================================
   3. CARDS
   ============================================================ */
body.theme-v2 .ADD_producte .card,
body.theme-v2 .row > [class*="col-"] > .card {
    background: var(--bl-surface);
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow-xs);
    margin-bottom: 16px;
}
body.theme-v2 .ADD_producte .card .card-body,
body.theme-v2 .row > [class*="col-"] > .card .card-body {
    padding: 22px;
}


/* ============================================================
   4. LABELS & INPUTS
   ============================================================ */
body.theme-v2 .form-group { margin-bottom: 16px; }

body.theme-v2 label,
body.theme-v2 .form-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bl-heading) !important;
    margin-bottom: 6px !important;
    display: inline-block;
    vertical-align: middle;
}

/* Required asterisk legacy support — many forms use:
   <label>name</label> <span class="font-20 text-danger d-inline">*</span>
   Keep the asterisk inline with the label, never on a new line. */
body.theme-v2 .form-group span.text-danger.d-inline,
body.theme-v2 .form-group span.font-20.text-danger,
body.theme-v2 .form-group label + span.text-danger,
body.theme-v2 label + span.text-danger.d-inline,
body.theme-v2 label + span.font-20.text-danger {
    display: inline-block !important;
    color: var(--bl-danger) !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1;
    margin-inline-start: 4px;
    margin-bottom: 6px;
    vertical-align: middle;
}

body.theme-v2 label.required::after,
body.theme-v2 .required-label::after {
    content: " *";
    color: var(--bl-danger);
}

/* Inputs */
body.theme-v2 .form-group .form-control,
body.theme-v2 input.form-control,
body.theme-v2 textarea.form-control,
body.theme-v2 select.form-control {
    background: var(--bl-surface) !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    color: var(--bl-text) !important;
    font-size: 13px !important;
    line-height: 1.4;
    padding: 9px 12px !important;
    height: 40px;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.theme-v2 textarea.form-control { height: auto !important; min-height: 96px; }

body.theme-v2 .form-group .form-control:focus,
body.theme-v2 input.form-control:focus,
body.theme-v2 textarea.form-control:focus,
body.theme-v2 select.form-control:focus {
    border-color: var(--bl-brand) !important;
    box-shadow: 0 0 0 3px rgba(1, 82, 154, 0.12) !important;
    outline: none;
}

body.theme-v2 .form-control::placeholder { color: var(--bl-text-soft); }
body.theme-v2 .form-control[disabled],
body.theme-v2 .form-control:disabled {
    background: var(--bl-surface-2) !important;
    color: var(--bl-text-muted) !important;
    cursor: not-allowed;
}


/* ============================================================
   5. CURRENCY-SUFFIX FIELDS  (.salaryInputs > .currencyName)
      Used heavily on price/cost fields.
   ============================================================ */
body.theme-v2 .form-group.salaryInputs {
    position: relative;
}
body.theme-v2 .form-group.salaryInputs .form-control {
    padding-inline-end: 56px !important;
}
body.theme-v2 .form-group.salaryInputs .currencyName {
    position: absolute;
    inset-inline-end: 1px;
    top: 28px; /* aligns with the input top after the label */
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    background: var(--bl-surface-2);
    color: var(--bl-text-muted);
    font-size: 11px;
    font-weight: 700;
    border-inline-start: 1px solid var(--bl-border);
    border-radius: 0;
    pointer-events: none;
}
body.theme-v2 [dir="rtl"] .form-group.salaryInputs .currencyName,
body.theme-v2:lang(ar) .form-group.salaryInputs .currencyName {
    border-radius: var(--bl-radius-sm) 0 0 var(--bl-radius-sm);
}
body.theme-v2 [dir="ltr"] .form-group.salaryInputs .currencyName,
body.theme-v2:lang(en) .form-group.salaryInputs .currencyName {
    border-radius: 0 var(--bl-radius-sm) var(--bl-radius-sm) 0;
}
/* For groups without label (rare) - keep currency centered vertically */
body.theme-v2 .form-group.salaryInputs:not(:has(label)) .currencyName {
    top: 1px;
}


/* ============================================================
   6. VALIDATION ERROR MESSAGES
   ============================================================ */
body.theme-v2 .text-danger.validation_error,
body.theme-v2 .text-danger[class*="_error"],
body.theme-v2 span.text-danger:empty + br + span.text-danger,
body.theme-v2 .invalid-feedback,
body.theme-v2 .error-message,
body.theme-v2 span.error {
    display: block;
    font-size: 11px !important;
    color: var(--bl-danger) !important;
    margin-top: 4px;
    font-weight: 500;
    line-height: 1.4;
    min-height: 0;
}

/* Form-page main submit button — feel important */
body.theme-v2 button[type="submit"].custom_but1,
body.theme-v2 #add_product_btn,
body.theme-v2 #edit_product_btn {
    box-shadow: 0 6px 16px rgba(1, 82, 154, 0.22);
    height: 44px;
    padding: 0 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: var(--bl-radius-sm) !important;
}


/* ============================================================
   7. SELECT2 PLUGIN — modern look (form pages use it heavily)
   ============================================================ */
body.theme-v2 .select2-container--default .select2-selection--single,
body.theme-v2 .select2-container--default .select2-selection--multiple {
    background: var(--bl-surface) !important;
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    min-height: 40px !important;
    padding: 4px 8px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.theme-v2 .select2-container--default.select2-container--focus .select2-selection,
body.theme-v2 .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--bl-brand) !important;
    box-shadow: 0 0 0 3px rgba(1, 82, 154, 0.12) !important;
}
body.theme-v2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bl-text) !important;
    line-height: 30px !important;
    padding: 0 4px !important;
    font-size: 13px !important;
}
body.theme-v2 .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--bl-text-soft) !important;
}
body.theme-v2 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    top: 0 !important;
}
body.theme-v2 .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--bl-tint-blue-bg) !important;
    color: var(--bl-tint-blue-fg) !important;
    border: none !important;
    border-radius: var(--bl-radius-pill) !important;
    padding: 2px 10px !important;
    font-size: 12px;
    font-weight: 600;
    margin-top: 5px !important;
}
body.theme-v2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bl-tint-blue-fg) !important;
    margin-inline-end: 4px;
    margin-inline-start: 0;
}
body.theme-v2 .select2-dropdown {
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    box-shadow: var(--bl-shadow) !important;
    overflow: hidden;
}
body.theme-v2 .select2-results__option--highlighted[aria-selected] {
    background: var(--bl-brand) !important;
    color: #fff !important;
}
body.theme-v2 .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    padding: 6px 10px !important;
}


/* ============================================================
   8. DROPIFY UPLOAD ZONE — make it feel native to v2
   ============================================================ */
body.theme-v2 .dropify-wrapper {
    background: var(--bl-surface-2) !important;
    border: 1.5px dashed var(--bl-border) !important;
    border-radius: var(--bl-radius) !important;
    color: var(--bl-text-muted) !important;
    transition: all .15s ease;
    min-height: 180px !important;
}
body.theme-v2 .dropify-wrapper:hover {
    background: var(--bl-tint-blue-bg) !important;
    border-color: var(--bl-brand) !important;
    color: var(--bl-tint-blue-fg) !important;
}
body.theme-v2 .dropify-wrapper .dropify-message p {
    font-size: 13px !important;
    font-weight: 600 !important;
}
body.theme-v2 .dropify-wrapper .dropify-message span.file-icon {
    font-size: 11px !important;
    color: var(--bl-text-soft);
}
body.theme-v2 .dropify-wrapper .dropify-message span.file-icon::before {
    content: "\F006C"; /* mdi-cloud-upload-outline */
    font-family: "Material Design Icons";
    font-size: 32px;
    color: var(--bl-brand);
    display: block;
    margin-bottom: 8px;
}
body.theme-v2 .dropify-wrapper .dropify-preview {
    background: var(--bl-surface) !important;
    border-radius: var(--bl-radius) !important;
}
body.theme-v2 .dropify-wrapper .dropify-clear {
    background: var(--bl-danger) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--bl-radius-sm) !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600;
}


/* ============================================================
   9. RADIO + CHECKBOX  (form group ones)
   ============================================================ */
body.theme-v2 .form-check-input,
body.theme-v2 input[type="checkbox"]:not(.cheacboxall):not(.change_status):not(.switch input),
body.theme-v2 input[type="radio"] {
    accent-color: var(--bl-brand);
    width: 16px;
    height: 16px;
    cursor: pointer;
}


/* ============================================================
   10. STICKY FORM SAVE BAR  (bottom action bar)
   ------------------------------------------------------------
   Targets common patterns in the existing admin:
     • .row.mt-3.ADD_producte > .col-12.text-left:last-child   (products create)
     • .row.mt-3.ADD_producte > .col-12.text-right:last-child  (products edit)
     • .col-12.text-center:last-child  (forms with centered submit)
     • .col-12.text-left:last-child / .col-12.text-right:last-child
       — but only when they directly contain a submit button.
     • .bl-form-savebar  (explicit opt-in class)
   ============================================================ */
body.theme-v2 .bl-form-savebar,
body.theme-v2 .row.ADD_producte > [class*="col-"][class*="text-"]:last-child:has(> button[type="submit"]),
body.theme-v2 .row.ADD_producte > [class*="col-"][class*="text-"]:last-child:has(> button#add_product_btn),
body.theme-v2 .row.ADD_producte > [class*="col-"][class*="text-"]:last-child:has(> button#edit_product_btn),
body.theme-v2 .row > .col-12[class*="text-"]:last-child:has(> button[type="submit"]),
/* Catch generic admin pages: any .row > col-X.text-* :last-child whose
   only/last child is a primary action button — covers offers, prices_plans,
   socialMedia, settings, designs, sub-categories, home-sections, etc.    */
body.theme-v2 .row > [class*="col-"][class*="text-"]:last-child:has(> button.custom_but1),
body.theme-v2 .row > [class*="col-"][class*="text-"]:last-child:has(> button.custom_but2),
body.theme-v2 .row > [class*="col-"][class*="text-"]:last-child:has(> a.custom_but1) {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: var(--bl-surface);
    border-top: 1px solid var(--bl-border);
    padding: 14px 22px !important;
    margin: 32px -15px 0;
    border-radius: 0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
body.theme-v2 .bl-form-savebar > .bl-form-savebar__cancel,
body.theme-v2 .bl-form-savebar__cancel {
    background: transparent !important;
    color: var(--bl-text) !important;
    border: 1px solid var(--bl-border) !important;
    padding: 0 18px !important;
    height: 40px !important;
    border-radius: var(--bl-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: all .15s ease;
    margin: 0 !important;
}
body.theme-v2 .bl-form-savebar__cancel:hover {
    background: var(--bl-surface-2) !important;
    color: var(--bl-text) !important;
    text-decoration: none !important;
}
body.theme-v2 .bl-form-savebar__spacer { flex: 1; }

/* When auto-applied, the existing submit button remains the main CTA.
   Overrides margin-top from .mt-3 since we already pad the bar. */
body.theme-v2 .row.ADD_producte > [class*="col-"][class*="text-"]:last-child > button {
    margin-top: 0 !important;
}


/* ============================================================
   11. CARDS WITH SECTION DESCRIPTION HEADER
       (helper class .bl-form-section-head)
   ============================================================ */
body.theme-v2 .bl-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--bl-border);
}
body.theme-v2 .bl-form-section-head__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--bl-radius-sm);
    background: var(--bl-tint-blue-bg);
    color: var(--bl-tint-blue-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
body.theme-v2 .bl-form-section-head__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bl-heading);
    margin: 0 0 2px;
    line-height: 1.3;
}
body.theme-v2 .bl-form-section-head__sub {
    font-size: 12px;
    color: var(--bl-text-muted);
    margin: 0;
    line-height: 1.5;
}


/* ============================================================
   12. SECTION PILLS / STEPPER (helper class — kept from v1)
   ============================================================ */
body.theme-v2 .bl-form-stepper {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius-pill);
    padding: 4px;
    margin-bottom: 14px;
    box-shadow: var(--bl-shadow-xs);
}
body.theme-v2 .bl-form-step {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bl-text-muted);
    border-radius: var(--bl-radius-pill);
    cursor: pointer;
    transition: all .15s ease;
}
body.theme-v2 .bl-form-step:hover {
    background: var(--bl-surface-2);
    color: var(--bl-text);
}
body.theme-v2 .bl-form-step.is-active {
    background: var(--bl-brand);
    color: #fff;
}


/* ============================================================
   13. INPUT-GROUP / PREPEND / APPEND
   ------------------------------------------------------------
   Covers both Bootstrap 4 helpers (.input-group-prepend /
   -append / -text) AND the Bootstrap 3 legacy markup still
   used by settings/shop:
       <div class="input-group">
           <div class="input-group-addon"><i ...></div>
           <input class="form-control">
       </div>
   We unify both into a single rounded pill, using logical
   corner properties so RTL and LTR work without per-language
   selectors.
   ============================================================ */
body.theme-v2 .input-group {
    display: flex !important;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
}

/* Reset radii on every direct child first — the merge rules
   below then chip off only the inner corners. */
body.theme-v2 .input-group > .form-control,
body.theme-v2 .input-group > .input-group-addon,
body.theme-v2 .input-group > .input-group-text,
body.theme-v2 .input-group > .input-group-prepend,
body.theme-v2 .input-group > .input-group-append,
body.theme-v2 .input-group > .btn {
    border-radius: var(--bl-radius-sm, 6px) !important;
    margin: 0 !important;
}

body.theme-v2 .input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: auto;
}

/* Legacy Bootstrap 3 addon — Bootstrap 4 dropped this helper. */
body.theme-v2 .input-group > .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 12px;
    min-width: 44px;
    background: var(--bl-surface-2);
    border: 1px solid var(--bl-border);
    color: var(--bl-text);
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}

body.theme-v2 .input-group > .input-group-addon > i,
body.theme-v2 .input-group > .input-group-addon > img,
body.theme-v2 .input-group > .input-group-addon > svg {
    font-size: 16px;
    color: var(--bl-text);
    line-height: 1;
}

/* Bootstrap 4 helpers — keep visual parity with the addon. */
body.theme-v2 .input-group-text,
body.theme-v2 .input-group-prepend > .input-group-text,
body.theme-v2 .input-group-append > .input-group-text {
    background: var(--bl-surface-2);
    border: 1px solid var(--bl-border);
    color: var(--bl-text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px;
    height: 40px;
    border-radius: var(--bl-radius-sm, 6px);
}

/* Merge inner corners between siblings using logical
   properties — works automatically in both RTL and LTR. */
body.theme-v2 .input-group > *:not(:first-child) {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}

body.theme-v2 .input-group > *:not(:last-child) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
    border-inline-end-width: 0 !important;
}

/* Make sure the input visually butts up against the addon by
   stripping the duplicated inline border that Bootstrap adds. */
body.theme-v2 .input-group > .form-control:focus {
    z-index: 3;
    position: relative;
}


/* ============================================================
   14. SWITCHES INSIDE FORMS (use existing .switch styling
       defined in listings.css — make sure spacing is good).
   ============================================================ */
body.theme-v2 .form-group.bl-switch-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bl-surface-2);
    border-radius: var(--bl-radius-sm);
    border: 1px solid var(--bl-border);
}
body.theme-v2 .form-group.bl-switch-group label {
    margin: 0 !important;
    flex: 1;
}
body.theme-v2 .form-group.bl-switch-group .switch { margin: 0; }


/* ============================================================
   15. BS4 TABS INSIDE FORMS  (used on settings/edit pages)
   ============================================================ */
body.theme-v2 .nav.nav-tabs {
    border-bottom: 1px solid var(--bl-border) !important;
    margin-bottom: 16px;
    gap: 4px;
}
body.theme-v2 .nav.nav-tabs .nav-item .nav-link {
    color: var(--bl-text-muted) !important;
    border: none !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--bl-radius-sm) var(--bl-radius-sm) 0 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
}
body.theme-v2 .nav.nav-tabs .nav-item .nav-link:hover {
    color: var(--bl-text) !important;
    background: var(--bl-surface-2) !important;
}
body.theme-v2 .nav.nav-tabs .nav-item .nav-link.active {
    color: var(--bl-brand) !important;
    border-bottom-color: var(--bl-brand) !important;
    background: transparent !important;
}


/* ============================================================
   16. COLOR PICKER FIELDS (.colorpicker-input etc.)
   ============================================================ */
body.theme-v2 input[type="color"] {
    width: 40px;
    height: 40px;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius-sm);
    padding: 4px;
    cursor: pointer;
}


/* ============================================================
   17. MISC: textarea + WYSIWYG containers
   ============================================================ */
body.theme-v2 .summernote,
body.theme-v2 .note-editor.note-frame,
body.theme-v2 .wysihtml5-toolbar {
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius-sm) !important;
    background: var(--bl-surface) !important;
}
body.theme-v2 .note-editor.note-frame .note-toolbar,
body.theme-v2 .wysihtml5-toolbar {
    background: var(--bl-surface-2) !important;
    border-bottom: 1px solid var(--bl-border) !important;
}


/* ============================================================
   ============================================================
   v2 FORM PAGE LAYOUT  (top-bar + 2-col grid + sidebar +
                         accordion + sticky savebar)
   ------------------------------------------------------------
   Used by resources/views_v2/admin/products/create.blade.php
   (and forthcoming edit.blade.php). Class prefixes:
     • bl-form-topbar  — header bar with title + actions
     • bl-form-grid    — 2-column wrapper around form + sidebar
     • bl-acc-card     — collapsible section card
     • bl-side-card    — sticky sidebar card
     • bl-preview      — live product preview block
     • bl-form-savebar — bottom sticky save bar
   ============================================================
   ============================================================ */


/* ============================================================
   F-1.  TOP BAR — title, breadcrumb, action buttons
   ============================================================ */
body.theme-v2 .bl-form-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 0 18px;
}
body.theme-v2 .bl-form-topbar__titles { min-width: 0; }
body.theme-v2 .bl-form-topbar__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--bl-heading);
    line-height: 1.2;
}
body.theme-v2 .bl-form-topbar__crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--bl-text-muted);
    margin-top: 4px;
}
body.theme-v2 .bl-form-topbar__crumb a {
    color: var(--bl-text-muted);
    text-decoration: none;
    transition: color .15s ease;
}
body.theme-v2 .bl-form-topbar__crumb a:hover { color: var(--bl-brand); }
body.theme-v2 .bl-form-topbar__crumb i { font-size: 16px; color: var(--bl-text-soft); }
body.theme-v2 .bl-form-topbar__crumb span { color: var(--bl-text); font-weight: 600; }

body.theme-v2 .bl-form-topbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* primary save button in topbar with chevron drop indicator */
body.theme-v2 .bl-form-topbar__primary {
    height: 40px;
    padding: 0 20px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(1, 82, 154, 0.18) !important;
}
body.theme-v2 .bl-btn--dropdown::after {
    content: "\F0140"; /* mdi-chevron-down */
    font-family: "Material Design Icons";
    font-size: 14px;
    margin-inline-start: 4px;
    opacity: .8;
}


/* ============================================================
   F-2.  MAIN GRID  (form 8/12  +  sidebar 4/12)
   ============================================================ */
body.theme-v2 .bl-form-grid { row-gap: 0; }

body.theme-v2 .bl-form-main { padding-bottom: 16px; }
body.theme-v2 .bl-form-side { padding-bottom: 16px; }

@media (min-width: 992px) {
    body.theme-v2 .bl-form-side {
        position: sticky;
        top: 88px;       /* below the global header bar */
        align-self: flex-start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: thin;
        padding-inline-start: 20px;
    }
    body.theme-v2 .bl-form-side::-webkit-scrollbar { width: 4px; }
    body.theme-v2 .bl-form-side::-webkit-scrollbar-thumb {
        background: var(--bl-border);
        border-radius: 2px;
    }
}


/* ============================================================
   F-3.  ACCORDION CARDS  (collapsible form sections)
   ============================================================ */
body.theme-v2 .bl-acc-card {
    margin-bottom: 16px !important;
    transition: box-shadow .15s ease;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border) !important;
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow-xs);
}
body.theme-v2 .bl-acc-card:hover { box-shadow: var(--bl-shadow-sm); }

body.theme-v2 .bl-acc-card .card-body {
    padding: 18px 22px !important;
    transition: padding .2s ease;
}

body.theme-v2 .bl-acc-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
body.theme-v2 .bl-acc-titles {
    flex: 1;
    min-width: 0;
}

/* override the legacy underline for accordion-card titles */
body.theme-v2 .bl-acc-card .card-body .card-title.head_text.bl-acc-title {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bl-heading) !important;
    border: none !important;
}
body.theme-v2 .bl-acc-card .card-body .card-title.head_text.bl-acc-title::before {
    content: none !important;
}

body.theme-v2 .bl-acc-sub {
    margin: 4px 0 0 36px;
    font-size: 12px;
    color: var(--bl-text-muted);
    line-height: 1.5;
}
body.theme-v2 [dir="rtl"] .bl-acc-sub,
body.theme-v2:lang(ar) .bl-acc-sub { margin: 4px 36px 0 0; }

/* Toggle (chevron) button */
body.theme-v2 .bl-acc-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bl-surface-2);
    border: 1px solid var(--bl-border);
    color: var(--bl-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all .2s ease;
}
body.theme-v2 .bl-acc-toggle:hover {
    background: var(--bl-tint-blue-bg);
    color: var(--bl-tint-blue-fg);
    border-color: var(--bl-tint-blue-fg);
}
body.theme-v2 .bl-acc-toggle i {
    font-size: 18px;
    transition: transform .2s ease;
}
body.theme-v2 .bl-acc-card.is-open .bl-acc-toggle i { transform: rotate(180deg); }

/* Body open/close — max-height animation (reliable, no content bleed) */
body.theme-v2 .bl-acc-body {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    border-top: 0 solid var(--bl-border);
    transition: max-height .3s cubic-bezier(.4, 0, .2, 1),
                margin-top .25s ease,
                padding-top .25s ease;
    pointer-events: none;
    visibility: hidden;
}
body.theme-v2 .bl-acc-card.is-open .bl-acc-body {
    max-height: 6000px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bl-border);
    pointer-events: auto;
    visibility: visible;
    overflow: visible;
}
/* keep card chrome happy */
body.theme-v2 .bl-acc-card { overflow: hidden; }
body.theme-v2 .bl-acc-card.is-open { overflow: visible; }

/* head_iicon variants */
body.theme-v2 .head_iicon.bl-tint-purple { background: var(--bl-tint-purple-bg); color: var(--bl-tint-purple-fg); }
body.theme-v2 .head_iicon.bl-tint-cyan   { background: var(--bl-tint-cyan-bg);   color: var(--bl-tint-cyan-fg); }
body.theme-v2 .head_iicon.bl-tint-orange { background: var(--bl-tint-orange-bg); color: var(--bl-tint-orange-fg); }
body.theme-v2 .head_iicon.bl-tint-green  { background: var(--bl-tint-green-bg);  color: var(--bl-tint-green-fg); }
body.theme-v2 .head_iicon.bl-tint-red    { background: var(--bl-tint-red-bg);    color: var(--bl-tint-red-fg); }
body.theme-v2 .head_iicon.bl-tint-yellow { background: var(--bl-tint-yellow-bg, #fef3c7); color: var(--bl-tint-yellow-fg, #92400e); }


/* ============================================================
   F-4.  SIDEBAR CARDS  (preview / status / help)
   ============================================================ */
body.theme-v2 .bl-side-card {
    margin-bottom: 14px !important;
    border-radius: var(--bl-radius) !important;
    box-shadow: var(--bl-shadow-xs) !important;
    border: 1px solid var(--bl-border) !important;
}
body.theme-v2 .bl-side-card .card-body { padding: 18px !important; }

body.theme-v2 .bl-side-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
body.theme-v2 .bl-side-card__title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--bl-heading);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.theme-v2 .bl-side-card__title i {
    font-size: 16px;
    color: var(--bl-text-muted);
}


/* ----- Live Preview ----- */
body.theme-v2 .bl-preview {
    text-align: center;
}
body.theme-v2 .bl-preview__image-wrap {
    background: var(--bl-surface-2);
    border-radius: var(--bl-radius);
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid var(--bl-border);
}
body.theme-v2 .bl-preview__image {
    aspect-ratio: 1;
    width: 100%;
    border-radius: var(--bl-radius-sm);
    background: var(--bl-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
body.theme-v2 .bl-preview__image img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    opacity: .55;
    transition: all .2s ease;
}
body.theme-v2 .bl-preview__image.has-image img {
    max-width: 100%;
    max-height: 100%;
    opacity: 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
body.theme-v2 .bl-preview__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--bl-heading);
    margin-bottom: 4px;
    line-height: 1.3;
    word-break: break-word;
}
body.theme-v2 .bl-preview__price {
    font-size: 18px;
    font-weight: 800;
    color: var(--bl-danger);
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}
body.theme-v2 .bl-preview__price .currencyName {
    font-size: 12px;
    color: var(--bl-text-muted);
    font-weight: 600;
}
body.theme-v2 .bl-preview__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--bl-border);
    font-size: 11px;
    color: var(--bl-text-muted);
}
body.theme-v2 .bl-preview__sku b { color: var(--bl-heading); font-weight: 600; }
body.theme-v2 .bl-preview__stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bl-tint-green-fg);
    font-weight: 600;
}
body.theme-v2 .bl-preview__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bl-tint-green-fg);
    box-shadow: 0 0 0 2px var(--bl-tint-green-bg);
}


/* ----- Product Status select with green dot ----- */
body.theme-v2 .bl-status-select {
    position: relative;
}
body.theme-v2 .bl-status-select__dot {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bl-tint-green-fg);
    box-shadow: 0 0 0 2px var(--bl-tint-green-bg);
    pointer-events: none;
    z-index: 2;
}
body.theme-v2 .bl-status-select select.form-control {
    padding-inline-start: 32px !important;
    font-weight: 600;
    color: var(--bl-heading) !important;
}


/* ----- Help Card ----- */
body.theme-v2 .bl-side-card--help .card-body {
    background: linear-gradient(135deg, var(--bl-tint-blue-bg) 0%, var(--bl-surface) 100%);
}
body.theme-v2 .bl-help {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
body.theme-v2 .bl-help__icon {
    font-size: 28px;
    color: var(--bl-tint-blue-fg);
    flex-shrink: 0;
    margin-top: 2px;
}
body.theme-v2 .bl-help__title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bl-heading);
}
body.theme-v2 .bl-help__text {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--bl-text-muted);
    line-height: 1.5;
}
body.theme-v2 .bl-help__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bl-brand);
    text-decoration: none;
    transition: color .15s ease;
}
body.theme-v2 .bl-help__link:hover {
    color: var(--bl-brand-600);
    text-decoration: underline;
}


/* ----- Share Product Card (edit page only) ----- */
body.theme-v2 .bl-share { display: flex; flex-direction: column; gap: 10px; }
body.theme-v2 .bl-share__url {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius-sm);
    background: var(--bl-surface-2);
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}
body.theme-v2 .bl-share__url:hover { border-color: var(--bl-brand); background: var(--bl-surface); }
body.theme-v2 .bl-share__url > .form-control,
body.theme-v2 .bl-share__url > .bl-share__input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    height: 36px !important;
    font-size: 12px !important;
    color: var(--bl-text-muted) !important;
    padding: 0 10px !important;
    box-shadow: none !important;
    direction: ltr;
    text-align: start;
}
body.theme-v2 .bl-share__url > .form-control[readonly],
body.theme-v2 .bl-share__url > .bl-share__input[readonly] {
    cursor: default;
    pointer-events: none;
    user-select: all;
    -webkit-user-select: all;
}
body.theme-v2 .bl-share__url > .form-control[readonly]:focus,
body.theme-v2 .bl-share__url > .bl-share__input[readonly]:focus {
    outline: none !important;
    box-shadow: none !important;
}
body.theme-v2 .bl-share__copy {
    width: 38px;
    height: auto;
    border: none;
    border-inline-start: 1px solid var(--bl-border);
    background: transparent;
    color: var(--bl-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
body.theme-v2 .bl-share__copy:hover { background: var(--bl-tint-blue-bg); color: var(--bl-tint-blue-fg); }
body.theme-v2 .bl-share__copy.is-copied { background: var(--bl-tint-green-bg); color: var(--bl-tint-green-fg); }
body.theme-v2 .bl-share__copy.is-copied i::before { content: "\F012C"; }

body.theme-v2 .bl-share__actions {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 6px;
}
body.theme-v2 .bl-share__btn {
    height: 36px;
    border-radius: var(--bl-radius-sm);
    border: 1px solid var(--bl-border);
    background: var(--bl-surface);
    color: var(--bl-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 0 8px;
    transition: all .15s ease;
}
body.theme-v2 .bl-share__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    text-decoration: none;
}
body.theme-v2 .bl-share__btn--view {
    background: var(--bl-brand);
    border-color: var(--bl-brand);
    color: #fff;
}
body.theme-v2 .bl-share__btn--view:hover { background: var(--bl-brand-600); color: #fff; }
body.theme-v2 .bl-share__btn--wa { color: #25D366; width: 36px; padding: 0; }
body.theme-v2 .bl-share__btn--wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
body.theme-v2 .bl-share__btn--fb { color: #1877F2; width: 36px; padding: 0; }
body.theme-v2 .bl-share__btn--fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
body.theme-v2 .bl-share__btn--tw { color: #0f172a; width: 36px; padding: 0; }
body.theme-v2 .bl-share__btn--tw:hover { background: #0f172a; color: #fff; border-color: #0f172a; }
body.theme-v2 .bl-share__btn i { font-size: 14px; }


/* ----- Status select dot color (sync with select value) ----- */
body.theme-v2 .bl-status-select__dot.is-inactive,
body.theme-v2 .bl-status-select__dot.is-draft {
    background: var(--bl-tint-orange-fg, #f59e0b) !important;
    box-shadow: 0 0 0 4px var(--bl-tint-orange-bg, rgba(245, 158, 11, .15)) !important;
}


/* ----- Top bar nav arrows (used on edit pages with prev/next) ----- */
body.theme-v2 .bl-form-topbar__nav.Navigation_arrows {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}
body.theme-v2 .bl-form-topbar__nav.Navigation_arrows a {
    width: 36px;
    height: 36px;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius-sm);
    background: var(--bl-surface);
    color: var(--bl-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all .15s ease;
    text-decoration: none;
}
body.theme-v2 .bl-form-topbar__nav.Navigation_arrows a:hover {
    background: var(--bl-tint-blue-bg);
    color: var(--bl-tint-blue-fg);
    border-color: var(--bl-tint-blue-fg);
}


/* ============================================================
   F-5.  STICKY SAVE BAR  (fixed at the bottom of the viewport)
   ============================================================ */
body.theme-v2 .bl-form-savebar.bl-form-savebar--fixed {
    position: fixed;
    bottom: 0;
    inset-inline-start: var(--bl-sidebar-w, 260px);
    inset-inline-end: 0;
    z-index: 100;
    background: var(--bl-surface);
    border-top: 1px solid var(--bl-border);
    padding: 12px 24px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    margin: 0 !important;
}
body.theme-v2.mini-sidebar .bl-form-savebar.bl-form-savebar--fixed {
    inset-inline-start: var(--bl-sidebar-w-mini, 80px);
}
@media (max-width: 991.98px) {
    body.theme-v2 .bl-form-savebar.bl-form-savebar--fixed {
        inset-inline-start: 0;
    }
}
body.theme-v2 .bl-form-savebar.bl-form-savebar--fixed .bl-form-savebar__cancel { margin-inline-end: auto; }
body.theme-v2 .bl-form-savebar .bl-btn--lg {
    height: 44px;
    padding: 0 24px !important;
    font-size: 14px !important;
}


/* ============================================================
   F-6.  SCOPED OVERRIDES inside accordion bodies
   ------------------------------------------------------------
   The legacy section below `.show_more_less` adds an underline
   under the heading. Suppress it inside accordion cards.
   ============================================================ */
body.theme-v2 .bl-acc-card .card-body > .card-title.head_text ~ .row,
body.theme-v2 .bl-acc-card .card-body > .show_more_less_but ~ .row,
body.theme-v2 .bl-acc-card .card-body > .popup_info ~ .row {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* hide legacy show_more_less_but inside accordion cards (we use bl-acc-toggle) */
body.theme-v2 .bl-acc-card .show_more_less_but { display: none !important; }

/* Override the v1 .show_more_less effect (height: 55px; overflow: hidden)
   that legacy CSS applies to sections 3, 5, 6, 7. Our v2 accordion
   handles open/close via .bl-acc-body — the legacy clipping must be off. */
body.theme-v2 .bl-acc-card .card-body.show_more_less,
body.theme-v2 .bl-acc-card.is-open .card-body.show_more_less {
    height: auto !important;
    overflow: visible !important;
}

/* Override the listings.css 40×40 cap on .buton_padding_icon for
   text+icon buttons inside accordion bodies (e.g. Add Variant,
   Add Quantity Offer, Save Image, Upload, etc.). */
body.theme-v2 .bl-acc-card .buton_padding_icon,
body.theme-v2 .bl-acc-card .custom_but1.buton_padding_icon,
body.theme-v2 .bl-acc-card .custom_but2.buton_padding_icon {
    width: auto !important;
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: var(--bl-radius-sm) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px !important;
    font-weight: 600 !important;
}
body.theme-v2 .bl-acc-card .buton_padding_icon i { margin: 0 !important; }
body.theme-v2 .bl-acc-card .buton_padding_icon i.p-1 { padding: 0 !important; }


/* ============================================================
   F-7.  PRODUCT IMAGE CROPPER  (legacy plugin scoped fix)
   ------------------------------------------------------------
   The cropper area was originally placed in a half-width column
   (`col-md-6`) so the image plugin's canvas had a natural max
   size. In the v2 accordion layout it lives in a full-width
   `col-12`, which made the empty canvas stretch ~660px wide
   (showing the transparent checkerboard).

   Constrain the upload zone to a sensible max width and cap the
   image preview / canvas height so it never expands beyond view.
   ============================================================ */
body.theme-v2 .bl-acc-card .add_photo_section {
    max-width: 520px;
    margin-inline: auto;
    background: var(--bl-surface-2) !important;
    border: 1.5px dashed var(--bl-border) !important;
    border-radius: var(--bl-radius) !important;
    padding: 24px !important;
    transition: border-color .15s ease, background .15s ease;
}
body.theme-v2 .bl-acc-card .add_photo_section:hover {
    border-color: var(--bl-brand) !important;
    background: var(--bl-tint-blue-bg) !important;
}

/* empty (placeholder) state */
body.theme-v2 .bl-acc-card .add_photo_section .crrooper_cover {
    padding: 8px 0;
}
body.theme-v2 .bl-acc-card .add_photo_section .crrooper_cover img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
    opacity: .85;
}
body.theme-v2 .bl-acc-card .add_photo_section .crrooper_cover p {
    font-size: 13px;
    color: var(--bl-text-muted);
    margin: 0 0 6px;
    font-weight: 600;
}
body.theme-v2 .bl-acc-card .add_photo_section .crrooper_cover p.text-danger {
    color: var(--bl-text-soft) !important;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.5;
}
body.theme-v2 .bl-acc-card .add_photo_section .crrooper_cover p.text-danger .text-dark {
    color: var(--bl-text) !important;
    font-weight: 600;
}

/* CROPPER active state — limit canvas size */
body.theme-v2 .bl-acc-card .add_photo_section .img-container {
    max-height: 340px !important;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--bl-radius-sm);
    background: #fff;
}
body.theme-v2 .bl-acc-card .add_photo_section .img-container img,
body.theme-v2 .bl-acc-card .add_photo_section .img-container .cropper-container {
    max-height: 340px !important;
    max-width: 100%;
}
body.theme-v2 .bl-acc-card .add_photo_section .cropper-canvas,
body.theme-v2 .bl-acc-card .add_photo_section .cropper-wrap-box {
    max-height: 340px !important;
}

/* upload + save buttons row */
body.theme-v2 .bl-acc-card .add_photo_section .cropper_img .docs-buttons {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
body.theme-v2 .bl-acc-card .add_photo_section .cropper_img .custom_but1,
body.theme-v2 .bl-acc-card .add_photo_section .cropper_img .custom_but2 {
    margin: 0 !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    border-radius: var(--bl-radius-sm) !important;
}

/* uploaded photos gallery row (.show_photo) */
body.theme-v2 .bl-acc-card .show_photo {
    margin-top: 16px;
    padding: 12px;
    background: var(--bl-surface-2);
    border-radius: var(--bl-radius-sm);
    border: 1px solid var(--bl-border);
    gap: 8px;
}
body.theme-v2 .bl-acc-card .show_photo .imgContent {
    border-radius: var(--bl-radius-sm) !important;
    overflow: hidden;
    border: 2px solid var(--bl-border);
}
body.theme-v2 .bl-acc-card .show_photo .imgContent.Main_photo,
body.theme-v2 .bl-acc-card .show_photo .imgContent.main_image_active {
    border-color: var(--bl-brand) !important;
}