/* ==========================================================================
   SETTINGS DRAWER STANDARDIZATION (GOLDEN STANDARD: MENU EDIT SERVICE)
   This stylesheet standardizes all components in all {setting}-drawer screens
   to match the exact design tokens of the Menu Configuration Drawer (Edit Service).
   ========================================================================== */

/* ─── 1. Drawer Root & Frame Shell (Standardized to modalAddMenu: Right-Side, width var(--px-640)) ─── */
.sl-drawer,
.pl-drawer,
.dc-drawer,
.pp-drawer,
.csh-drawer,
.ic-drawer,
.trn-drawer,
.pm-drawer,
.tl-drawer,
.mp-drawer,
.ta-drawer,
.tt-drawer,
.ig-drawer,
.ta-modal,
.tt-modal,
.ig-modal,
.ii-modal,
.tc-modal,
.sc-modal,
#cr-modal,
#cc-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: var(--px-640) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background-color: #151a20 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.6) !important;
    z-index: 9999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Active State for all drawers & modals */
.sl-drawer.active,
.pl-drawer.active,
.dc-drawer.active,
.pp-drawer.active,
.csh-drawer.active,
.ic-drawer.active,
.trn-drawer.active,
.pm-drawer.active,
.tl-drawer.active,
.mp-drawer.active,
.ta-drawer.active,
.tt-drawer.active,
.ig-drawer.active,
.ta-modal.active,
.tt-modal.active,
.ig-modal.active,
.ii-modal.active,
.tc-modal.active,
.sc-modal.active,
#cr-modal.active,
#cc-modal.active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Modal right-side & Bootstrap Offcanvas width synchronization */
.modal-right-side,
#modalAddMenu {
    width: var(--px-640) !important;
    max-width: 100vw !important;
}

.modal-right-side .modal-content,
#modalAddMenu .modal-content,
.offcanvas.offcanvas-end#offcanvasItemDef,
.offcanvas.offcanvas-end#offcanvasLanguageEdit {
    width: var(--px-640) !important;
    max-width: 100vw !important;
    background-color: #151a20 !important;
    color: #ffffff !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.6) !important;
    border-radius: 0 !important;
}

.sl-drawer-content,
.pl-drawer-content,
.dc-drawer-content,
.pp-drawer-content,
.csh-drawer-content,
.ic-drawer-content,
.trn-drawer-content,
.pm-drawer-content,
.tl-drawer-content,
.mp-drawer-content,
.ta-drawer-content,
.tt-drawer-content,
.ig-drawer-content,
.ta-modal-content,
.tt-modal-content,
.ig-modal-content,
.tc-modal-content,
.sc-modal-content,
.ii-modal-content,
#cr-modal-content,
#cc-modal-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #151a20 !important;
    color: #ffffff !important;
}

/* ─── 2. Drawer Header & Action Buttons ─── */
.sl-detail-header,
.sl-drawer-header,
.pl-detail-header,
.pl-drawer-header,
.dc-detail-header,
.dc-drawer-header,
.pp-detail-header,
.pp-drawer-header,
.csh-drawer-header,
.ic-detail-header,
.ic-drawer-header,
.trn-detail-header,
.trn-drawer-header,
.pm-detail-header,
.pm-drawer-header,
.tl-detail-header,
.tl-drawer-header,
.mp-detail-header,
.mp-drawer-header,
.ta-detail-header,
.ta-drawer-header,
.ta-modal-header,
.tt-detail-header,
.tt-drawer-header,
.tt-modal-header,
.ig-detail-header,
.ig-drawer-header,
.ig-modal-header,
.ii-modal-header,
.tc-modal-header,
.sc-modal-header,
.cr-modal-header,
#modalAddMenu .modal-header,
#offcanvasItemDef .offcanvas-header,
#offcanvasLanguageEdit .offcanvas-header {
    background: #151a20 !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.sl-detail-header h3,
.sl-detail-header h4,
.sl-detail-header h5,
.sl-drawer-header h3,
.pl-detail-header h3,
.pl-detail-header h4,
.pl-detail-header h5,
.pl-drawer-header h3,
.dc-detail-header h3,
.dc-detail-header h4,
.dc-detail-header h5,
.dc-drawer-header h3,
.pp-detail-header h3,
.pp-detail-header h4,
.pp-detail-header h5,
.pp-drawer-header h3,
.csh-drawer-header h3,
.csh-drawer-header h4,
.csh-drawer-header h5,
.ic-detail-header h3,
.ic-detail-header h4,
.ic-detail-header h5,
.ic-drawer-header h3,
.trn-detail-header h3,
.trn-detail-header h4,
.trn-detail-header h5,
.trn-drawer-header h3,
.pm-detail-header h3,
.pm-detail-header h4,
.pm-detail-header h5,
.pm-drawer-header h3,
.tl-detail-header h3,
.tl-detail-header h4,
.tl-detail-header h5,
.tl-drawer-header h3,
.mp-detail-header h3,
.mp-detail-header h4,
.mp-detail-header h5,
.mp-drawer-header h3,
.ta-detail-header h3,
.ta-modal-header h3,
.ta-modal-header h4,
.ta-modal-header h5,
.tt-detail-header h3,
.tt-modal-header h3,
.tt-modal-header h4,
.tt-modal-header h5,
.ig-detail-header h3,
.ig-modal-header h3,
.ig-modal-header h4,
.ig-modal-header h5,
.ii-modal-header h3,
.ii-modal-header h4,
.ii-modal-header h5,
.tc-modal-header h3,
.tc-modal-header h4,
.tc-modal-header h5,
.sc-modal-header h3,
.sc-modal-header h4,
.sc-modal-header h5,
.cr-modal-header h3,
.cr-modal-header h4,
.cr-modal-header h5,
#offcanvasItemDef .offcanvas-header h5,
#offcanvasLanguageEdit .offcanvas-header h5,
.modal-title,
.modal-title#modal-title-add-id {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Close / Back button in header: Square with rounded corners, dark surface, thin border */
button.closed,
.sl-detail-close,
.sl-drawer-close,
.pl-detail-close,
.pl-drawer-close,
.dc-detail-close,
.dc-drawer-close,
.pp-detail-close,
.pp-drawer-close,
.csh-drawer-close,
.ic-detail-close,
.ic-drawer-close,
.trn-detail-close,
.trn-drawer-close,
.pm-detail-close,
.pm-drawer-close,
.tl-detail-close,
.tl-drawer-close,
.mp-detail-close,
.mp-drawer-close,
.ta-detail-close,
.ta-modal-close,
.tt-detail-close,
.tt-modal-close,
.ig-detail-close,
.ig-modal-close,
.ii-modal-close,
.tc-modal-close,
.sc-modal-close,
.cr-modal-close,
#modalAddMenu button.closed {
    background: #1e2632 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #cbd5e1 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.sl-detail-close:hover,
.sl-drawer-close:hover,
.pl-detail-close:hover,
.pl-drawer-close:hover,
.dc-detail-close:hover,
.dc-drawer-close:hover,
.pp-detail-close:hover,
.pp-drawer-close:hover,
.csh-drawer-close:hover,
.ic-detail-close:hover,
.ic-drawer-close:hover,
.trn-detail-close:hover,
.trn-drawer-close:hover,
.pm-detail-close:hover,
.pm-drawer-close:hover,
.tl-detail-close:hover,
.tl-drawer-close:hover,
.mp-detail-close:hover,
.mp-drawer-close:hover,
.ta-detail-close:hover,
.tt-detail-close:hover,
.ig-detail-close:hover,
.ii-modal-close:hover,
.tc-modal-close:hover,
.sc-modal-close:hover,
.cr-modal-close:hover,
#modalAddMenu button.closed:hover {
    background: #2a3647 !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

/* ─── 3. Drawer Body & Field Items ─── */
.sl-detail-body,
.pl-detail-body,
.dc-detail-body,
.pp-detail-body,
.csh-drawer-body,
.ic-detail-body,
.trn-detail-body,
.pm-detail-body,
.tl-detail-body,
.mp-detail-body,
.ii-modal-body,
.tc-modal-body,
.sc-modal-body,
.cr-modal-body,
#modalAddMenu .modal-body {
    padding: 20px 24px !important;
    background-color: #151a20 !important;
}

.sl-field-item,
.ic-field-item,
.trn-field-item,
.trn-form-group,
.pm-field-item,
.pm-form-group,
.tl-field-item,
.tl-form-group,
.mp-field-item,
.mp-form-group,
.ta-field-item,
.tt-field-item,
.ig-field-item,
.pl-form-group,
.dc-form-group,
.pp-form-group,
.csh-form-group,
.ii-form-group,
.tc-form-group,
.sc-form-group,
.cr-form-group,
.cc-form-group,
.form--input {
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ─── 4. Form Labels (Exact: 14px, normal case, soft light grey #cbd5e1) ─── */
.sl-field-label,
.ic-field-label,
.trn-field-label,
.pm-field-label,
.tl-field-label,
.mp-field-label,
.ta-field-label,
.tt-field-label,
.ig-field-label,
.pl-form-group label,
.dc-form-group label,
.pp-form-group label,
.csh-form-group label,
.ii-form-group label,
.tc-form-group label,
.sc-form-group label,
.cr-form-group label,
.cc-form-group label,
.trn-form-group label,
.pm-form-group label,
.tl-form-group label,
.mp-form-group label,
.form--input label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Required Indicator */
.sl-required,
.ic-required,
.trn-required,
.required,
.text-danger {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

/* ─── 5. Form Inputs (Exact: 44px height, 6px radius, #1e2632 background) ─── */
.sl-form-control,
.ic-form-control,
.trn-form-control,
.pm-form-control,
.tl-form-control,
.mp-form-control,
.ta-form-control,
.tt-form-control,
.ig-form-control,
.pl-form-control,
.dc-form-control,
.pp-form-control,
.csh-form-control,
.ii-form-control,
.tc-form-control,
.sc-form-control,
.cr-form-control,
.cc-form-control,
.form--input input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    background-color: #1e2632 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.sl-form-control:focus,
.ic-form-control:focus,
.trn-form-control:focus,
.pm-form-control:focus,
.tl-form-control:focus,
.mp-form-control:focus,
.ta-form-control:focus,
.tt-form-control:focus,
.ig-form-control:focus,
.pl-form-control:focus,
.dc-form-control:focus,
.pp-form-control:focus,
.csh-form-control:focus,
.ii-form-control:focus,
.tc-form-control:focus,
.sc-form-control:focus,
.cr-form-control:focus,
.cc-form-control:focus,
.form--input input:focus {
    border-color: var(--bs-main, #ee6119) !important;
    background-color: #222c3a !important;
    box-shadow: 0 0 0 2px rgba(238, 97, 25, 0.25) !important;
    outline: none !important;
}

.sl-form-control:disabled,
.sl-form-control[readonly],
.ic-form-control:disabled,
.ic-form-control[readonly],
.trn-form-control:disabled,
.trn-form-control[readonly],
.pm-form-control:disabled,
.pm-form-control[readonly],
.tl-form-control:disabled,
.tl-form-control[readonly],
.mp-form-control:disabled,
.mp-form-control[readonly],
.pl-form-control:disabled,
.pl-form-control[readonly],
.dc-form-control:disabled,
.dc-form-control[readonly],
.pp-form-control:disabled,
.pp-form-control[readonly],
.csh-form-control:disabled,
.csh-form-control[readonly],
.form--input input:disabled,
.form--input input[readonly] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed !important;
}

/* ─── 6. Select Dropdowns (Exact: 44px, custom caret, #1e2632 background) ─── */
select.sl-form-control,
select.ic-form-control,
select.trn-form-control,
select.pm-form-control,
select.tl-form-control,
select.mp-form-control,
select.ta-form-control,
select.tt-form-control,
select.ig-form-control,
select.pl-form-control,
select.dc-form-control,
select.pp-form-control,
select.csh-form-control,
select.ii-form-control,
select.tc-form-control,
select.sc-form-control,
select.cr-form-control,
select.cc-form-control,
.form--input select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #1e2632 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

/* Select2 container standardization inside all drawers */
.sl-drawer .select2-container--default .select2-selection--single,
.ic-drawer .select2-container--default .select2-selection--single,
.trn-drawer .select2-container--default .select2-selection--single,
.pm-drawer .select2-container--default .select2-selection--single,
.tl-drawer .select2-container--default .select2-selection--single,
.mp-drawer .select2-container--default .select2-selection--single,
.pl-drawer .select2-container--default .select2-selection--single,
.dc-drawer .select2-container--default .select2-selection--single,
.pp-drawer .select2-container--default .select2-selection--single,
.csh-drawer .select2-container--default .select2-selection--single,
#modalAddMenu .select2-container--default .select2-selection--single {
    background-color: #1e2632 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

.sl-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.ic-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.trn-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.pm-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.tl-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.mp-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.pl-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.dc-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.pp-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.csh-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
#modalAddMenu .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
    padding-left: 12px !important;
}

/* ─── 7. Checkboxes & Options (Exact: 2-col grid, square orange check from image) ─── */
.menu-option-select,
.ic-checkbox-wrapper,
.pl-checkbox-group,
.dc-checkbox-group,
.pp-checkbox-group,
.csh-checkbox-group,
.sl-status-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 16px !important;
    width: 100% !important;
}

.ic-checkbox-item,
.pl-checkbox-label,
.dc-checkbox-label,
.pp-checkbox-label,
.csh-checkbox-label,
.ii-checkbox-label,
.tc-checkbox-label,
.sc-checkbox-label,
.sl-checkbox-container,
.ic-checkbox-container,
.trn-checkbox-container,
.pm-checkbox-container,
.tl-checkbox-container,
.mp-checkbox-container,
.pl-checkbox-container,
.dc-checkbox-container,
.pp-checkbox-container,
.csh-checkbox-container,
.ii-checkbox-container,
.tc-checkbox-container,
.sc-checkbox-container,
.cr-checkbox-container,
.cc-checkbox-container,
.policy-checkbox-container,
.policy-checkbox-wrapper,
.sl-radio-option,
/* .option.select-radio, */
[class*="-checkbox-container"],
[class*="-checkbox-item"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    user-select: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

/* Explicit bright text for all inner text spans and labels inside checkbox containers */
.pl-checkbox-container span,
.dc-checkbox-container span,
.pp-checkbox-container span,
.tc-checkbox-container span,
.sc-checkbox-container span,
.csh-checkbox-container span,
.sl-checkbox-container span,
.ic-checkbox-container span,
.trn-checkbox-container span,
.pm-checkbox-container span,
.tl-checkbox-container span,
.mp-checkbox-container span,
.ic-checkbox-item span,
.policy-checkbox-label,
[class*="-checkbox-container"] > span:not([class*="checkmark"]),
[class*="-checkbox-container"] label,
[class*="-checkbox-item"] span:not([class*="checkmark"]) {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Fieldset Legends (such as in Price Policy Valid On, Get Free) */
.pp-legend,
.dc-legend,
.pl-legend,
.tc-legend,
.sc-legend,
fieldset.pp-fieldset legend,
fieldset legend {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Disabled Checkbox state */
[class*="-checkbox-container"].disabled,
[class*="-checkbox-container"].disabled span,
[class*="-checkbox-container"] input:disabled ~ span,
[class*="-checkbox-item"].disabled,
[class*="-checkbox-item"].disabled span {
    color: #64748b !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Checkbox Square Box */
.checkmark,
.ic-checkmark,
.pl-checkbox-checkmark,
.dc-checkbox-checkmark,
.pp-checkbox-checkmark,
.csh-checkbox-checkmark,
.ii-checkbox-checkmark,
.tc-checkbox-checkmark,
.sc-checkbox-checkmark {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    background-color: #1e2632 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 4px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
}

/* When checked: Solid Brand Orange background */
input[type="checkbox"]:checked ~ .checkmark,
input[type="checkbox"]:checked ~ .ic-checkmark,
input[type="checkbox"]:checked ~ .pl-checkbox-checkmark,
input[type="checkbox"]:checked ~ .dc-checkbox-checkmark,
input[type="checkbox"]:checked ~ .pp-checkbox-checkmark,
input[type="checkbox"]:checked ~ .csh-checkbox-checkmark,
input[type="checkbox"]:checked ~ .ii-checkbox-checkmark,
input[type="checkbox"]:checked ~ .tc-checkbox-checkmark,
input[type="checkbox"]:checked ~ .sc-checkbox-checkmark,
.option.select-radio.active .checkmark,
.sl-radio-option.active .sl-radio-circle {
    background-color: var(--bs-main, #ee6119) !important;
    border-color: var(--bs-main, #ee6119) !important;
}

/* Checkmark White Tick Icon ✓ */
.checkmark:after,
.ic-checkmark:after,
.pl-checkbox-checkmark:after,
.dc-checkbox-checkmark:after,
.pp-checkbox-checkmark:after,
.csh-checkbox-checkmark:after,
.ii-checkbox-checkmark:after,
.tc-checkbox-checkmark:after,
.sc-checkbox-checkmark:after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
    left: 6px !important;
    top: 2px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

input[type="checkbox"]:checked ~ .checkmark:after,
input[type="checkbox"]:checked ~ .ic-checkmark:after,
input[type="checkbox"]:checked ~ .pl-checkbox-checkmark:after,
input[type="checkbox"]:checked ~ .dc-checkbox-checkmark:after,
input[type="checkbox"]:checked ~ .pp-checkbox-checkmark:after,
input[type="checkbox"]:checked ~ .csh-checkbox-checkmark:after,
input[type="checkbox"]:checked ~ .ii-checkbox-checkmark:after,
input[type="checkbox"]:checked ~ .tc-checkbox-checkmark:after,
input[type="checkbox"]:checked ~ .sc-checkbox-checkmark:after,
.option.select-radio.active .checkmark:after {
    display: block !important;
}

/* Radio circle for sl-radio-option */
.sl-radio-circle {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 50% !important;
    background-color: #1e2632 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.sl-radio-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    display: none !important;
}

.sl-radio-option.active .sl-radio-dot {
    display: block !important;
}

/* Disabled / dimmed options */
.option.select-radio.disabled,
.ic-checkbox-item.disabled,
.sl-radio-option.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.option.select-radio.disabled .next,
.ic-checkbox-item.disabled span,
.sl-radio-option.disabled span {
    color: #64748b !important;
}

/* ─── 8. Textarea (Note / Description) ─── */
textarea.sl-form-control,
textarea.ic-form-control,
textarea.trn-form-control,
textarea.pm-form-control,
textarea.tl-form-control,
textarea.mp-form-control,
textarea.ta-form-control,
textarea.tt-form-control,
textarea.ig-form-control,
textarea.pl-form-control,
textarea.dc-form-control,
textarea.pp-form-control,
textarea.csh-form-control,
textarea.ii-form-control,
textarea.tc-form-control,
textarea.sc-form-control,
.form--input textarea {
    background: #1e2632 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    min-height: 80px !important;
    width: 100% !important;
    resize: vertical !important;
    outline: none !important;
    box-sizing: border-box !important;
}

textarea.sl-form-control:focus,
textarea.ic-form-control:focus,
textarea.trn-form-control:focus,
textarea.pm-form-control:focus,
textarea.tl-form-control:focus,
textarea.mp-form-control:focus,
textarea.ta-form-control:focus,
textarea.tt-form-control:focus,
textarea.ig-form-control:focus,
textarea.pl-form-control:focus,
textarea.dc-form-control:focus,
textarea.pp-form-control:focus,
textarea.csh-form-control:focus,
textarea.ii-form-control:focus,
textarea.tc-form-control:focus,
textarea.sc-form-control:focus,
.form--input textarea:focus {
    border-color: var(--bs-main, #ee6119) !important;
    box-shadow: 0 0 0 2px rgba(238, 97, 25, 0.25) !important;
    background: #222c3a !important;
}

/* ─── 9. Request Options / Badges List (from Image) ─── */
.option-item,
.request-option-item,
.pl-port-item,
.dc-discount-item {
    background: #1e2632 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.option-list .remove-option,
.request-option-item .remove-option,
.pl-port-item .remove-option {
    color: #f87171 !important;
    background: transparent !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 4px !important;
}

/* ─── 10. Action Buttons (Primary / Save / Add and Secondary / Cancel) ─── */
.sl-btn-primary,
.ic-btn-primary,
.trn-btn-primary,
.pm-btn-primary,
.tl-btn-primary,
.mp-btn-primary,
.ta-btn-primary,
.tt-btn-primary,
.ig-btn-primary,
.pl-btn-primary,
.dc-btn-primary,
.pp-btn-primary,
.csh-btn-primary,
.ii-btn-primary,
.tc-btn-primary,
.sc-btn-primary,
.cr-btn-primary,
.cc-btn-primary,
.add-option-btn,
.btn-save,
.sl-detail-header button[type="submit"],
.pl-detail-header button[type="submit"],
.dc-detail-header button[type="submit"],
.pp-detail-header button[type="submit"],
.csh-drawer-header button[type="submit"],
.ic-detail-header button[type="submit"],
.trn-detail-header button[type="submit"],
.pm-detail-header button[type="submit"],
.tl-detail-header button[type="submit"],
.mp-detail-header button[type="submit"],
.ta-detail-header button[type="submit"],
.ta-modal-header button[type="submit"],
.tt-detail-header button[type="submit"],
.tt-modal-header button[type="submit"],
.ig-detail-header button[type="submit"],
.ig-modal-header button[type="submit"],
.ii-modal-header button[type="submit"],
.tc-modal-header button[type="submit"],
.sc-modal-header button[type="submit"],
.cr-modal-header button[type="submit"],
#offcanvasItemDef .offcanvas-header button[type="submit"],
#offcanvasLanguageEdit .offcanvas-header button[type="submit"],
#modalAddMenu button[onclick="settingMenu.save()"] {
    background: var(--bs-main, #ee6119) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 20px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
}

.sl-btn-primary:hover,
.ic-btn-primary:hover,
.trn-btn-primary:hover,
.pm-btn-primary:hover,
.tl-btn-primary:hover,
.mp-btn-primary:hover,
.ta-btn-primary:hover,
.tt-btn-primary:hover,
.ig-btn-primary:hover,
.pl-btn-primary:hover,
.dc-btn-primary:hover,
.pp-btn-primary:hover,
.csh-btn-primary:hover,
.ii-btn-primary:hover,
.tc-btn-primary:hover,
.sc-btn-primary:hover,
.cr-btn-primary:hover,
.cc-btn-primary:hover,
.add-option-btn:hover,
.btn-save:hover,
.sl-detail-header button[type="submit"]:hover,
.pl-detail-header button[type="submit"]:hover,
.dc-detail-header button[type="submit"]:hover,
.pp-detail-header button[type="submit"]:hover,
.csh-drawer-header button[type="submit"]:hover,
.ic-detail-header button[type="submit"]:hover,
.trn-detail-header button[type="submit"]:hover,
.pm-detail-header button[type="submit"]:hover,
.tl-detail-header button[type="submit"]:hover,
.mp-detail-header button[type="submit"]:hover,
.ta-detail-header button[type="submit"]:hover,
.ta-modal-header button[type="submit"]:hover,
.tt-detail-header button[type="submit"]:hover,
.tt-modal-header button[type="submit"]:hover,
.ig-detail-header button[type="submit"]:hover,
.ig-modal-header button[type="submit"]:hover,
.ii-modal-header button[type="submit"]:hover,
.tc-modal-header button[type="submit"]:hover,
.sc-modal-header button[type="submit"]:hover,
.cr-modal-header button[type="submit"]:hover,
#offcanvasItemDef .offcanvas-header button[type="submit"]:hover,
#offcanvasLanguageEdit .offcanvas-header button[type="submit"]:hover,
#modalAddMenu button[onclick="settingMenu.save()"]:hover {
    background: #ff7828 !important;
}

.sl-btn-secondary,
.ic-btn-secondary,
.trn-btn-secondary,
.pm-btn-secondary,
.tl-btn-secondary,
.mp-btn-secondary,
.ta-btn-secondary,
.tt-btn-secondary,
.ig-btn-secondary,
.pl-btn-secondary,
.dc-btn-secondary,
.pp-btn-secondary,
.csh-btn-secondary,
.ii-btn-secondary,
.tc-btn-secondary,
.sc-btn-secondary,
.cr-btn-secondary,
.cc-btn-secondary,
.btn-cancel {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 18px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background 0.2s ease !important;
}

.sl-btn-secondary:hover,
.ic-btn-secondary:hover,
.trn-btn-secondary:hover,
.pm-btn-secondary:hover,
.tl-btn-secondary:hover,
.mp-btn-secondary:hover,
.ta-btn-secondary:hover,
.tt-btn-secondary:hover,
.ig-btn-secondary:hover,
.pl-btn-secondary:hover,
.dc-btn-secondary:hover,
.pp-btn-secondary:hover,
.csh-btn-secondary:hover,
.ii-btn-secondary:hover,
.tc-btn-secondary:hover,
.sc-btn-secondary:hover,
.cr-btn-secondary:hover,
.cc-btn-secondary:hover,
.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

/* ─── 11. Drawer Footer Bar (Deprecated / Hidden - actions moved to Header) ─── */
.sl-form-actions,
.ic-form-actions,
.trn-form-actions,
.pm-form-actions,
.tl-form-actions,
.mp-form-actions,
.ta-form-actions,
.tt-form-actions,
.ig-form-actions,
.pl-form-actions,
.dc-form-actions,
.pp-form-actions,
.csh-drawer-footer,
.ii-modal-footer,
.tc-modal-footer,
.sc-modal-footer,
.cr-modal-footer,
.ta-modal-footer,
.tt-modal-footer,
.ig-modal-footer,
#offcanvasItemDef .group-btn-setting,
#offcanvasLanguageEdit .group-btn-setting {
    display: none !important;
}