/* =====================================================================
   Template Web 02 — third-party plugins themed with Shopeers tokens
   (load after the vendor CSS and after shopeers.css)
   ===================================================================== */

/* ── Select2 ── */
.select2-container { font-family: var(--sp-font); font-size: .835rem; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 40px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius); background: var(--sp-surface); box-shadow: var(--sp-shadow-xs);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; color: var(--sp-text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; }
.select2-container--default .select2-selection--multiple { padding: 3px 6px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 3px 4px 3px 0; padding: 2px 8px 2px 22px; border: 0; border-radius: 6px; background: var(--sp-primary-soft); color: var(--sp-primary-text); font-size: .75rem; font-weight: 500; position: relative;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { border: 0; color: var(--sp-primary-text); left: 4px; top: 50%; transform: translateY(-50%); position: absolute; padding: 0 3px; background: transparent; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background: transparent; color: var(--sp-danger); }
.select2-container--default .select2-search--inline .select2-search__field { font-family: var(--sp-font); color: var(--sp-text); margin-top: 6px; height: 22px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-primary-ring); }
.select2-dropdown { border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius-md) !important; background: var(--sp-surface); box-shadow: var(--sp-shadow-lg); overflow: hidden; margin-top: 4px; padding: 4px; }
.select2-container--open .select2-dropdown--above { margin-top: -4px; }
.select2-results__option { border-radius: 8px; padding: 7px 10px; font-size: .82rem; color: var(--sp-text-2); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--sp-surface-hover); color: var(--sp-text); }
.select2-container--default .select2-results__option--selected { background: var(--sp-primary-soft); color: var(--sp-primary-text); font-weight: 500; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--sp-border) !important; border-radius: 8px; background: var(--sp-surface-2); color: var(--sp-text); padding: 6px 10px; outline: 0; }

/* ── DateRangePicker ── */
.daterangepicker { font-family: var(--sp-font); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); background: var(--sp-surface); box-shadow: var(--sp-shadow-lg); color: var(--sp-text); padding: 6px; margin-top: 8px; }
.daterangepicker::before, .daterangepicker::after { display: none; }
.daterangepicker .calendar-table { background: var(--sp-surface); border: 0; }
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { font-size: .74rem; width: 34px; height: 32px; border-radius: 8px; border: 0; }
.daterangepicker .calendar-table th { color: var(--sp-muted); font-weight: 500; }
.daterangepicker .calendar-table th.month { color: var(--sp-text); font-weight: 600; font-size: .82rem; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--sp-surface-3); color: var(--sp-text); }
.daterangepicker td.in-range { background: var(--sp-primary-soft); color: var(--sp-primary-text); border-radius: 0; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--sp-primary); color: #fff; border-radius: 8px; }
.daterangepicker td.off, .daterangepicker td.off.in-range { background: transparent; color: var(--sp-subtle); }
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { border-color: var(--sp-text-2); }
.daterangepicker .ranges li { font-size: .78rem; border-radius: 8px; padding: 7px 12px; color: var(--sp-text-2); }
.daterangepicker .ranges li:hover { background: var(--sp-surface-hover); }
.daterangepicker .ranges li.active { background: var(--sp-primary-soft); color: var(--sp-primary-text); font-weight: 600; }
.daterangepicker .drp-buttons { border-top: 1px solid var(--sp-divider); padding: 10px; }
.daterangepicker .drp-selected { font-size: .74rem; color: var(--sp-muted); }
.daterangepicker .drp-buttons .btn { min-height: 30px; font-size: .76rem; padding: 4px 12px; }
.daterangepicker.show-ranges.ltr .drp-calendar.left { border-left: 1px solid var(--sp-divider); }
.daterangepicker select.monthselect, .daterangepicker select.yearselect { background: var(--sp-surface); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: 6px; font-size: .74rem; }

/* ── noUiSlider ── */
.noUi-target { background: var(--sp-surface-3); border: 0; box-shadow: none; border-radius: 99px; }
.noUi-horizontal { height: 6px; }
.noUi-connect { background: var(--sp-primary); }
.noUi-horizontal .noUi-handle { width: 20px; height: 20px; right: -10px; top: -7px; border-radius: 50%; border: 2px solid var(--sp-primary); background: var(--sp-surface); box-shadow: var(--sp-shadow-sm); cursor: grab; }
.noUi-handle::before, .noUi-handle::after { display: none; }
.noUi-handle:focus { outline: 0; box-shadow: 0 0 0 4px var(--sp-primary-ring); }
.noUi-tooltip { font-family: var(--sp-font); font-size: .68rem; font-weight: 600; border: 0; border-radius: 6px; background: var(--sp-text); color: var(--sp-surface); padding: 3px 6px; }

/* ── FullCalendar 6 ── */
.fc { --fc-border-color: var(--sp-divider); --fc-page-bg-color: var(--sp-surface); --fc-neutral-bg-color: var(--sp-surface-2); --fc-today-bg-color: var(--sp-primary-soft); --fc-event-bg-color: var(--sp-primary); --fc-event-border-color: var(--sp-primary); --fc-button-bg-color: var(--sp-surface); --fc-button-border-color: var(--sp-border); --fc-button-text-color: var(--sp-text-2); --fc-button-hover-bg-color: var(--sp-surface-hover); --fc-button-hover-border-color: var(--sp-border-strong); --fc-button-active-bg-color: var(--sp-primary-soft); --fc-button-active-border-color: var(--sp-primary-soft-2); --fc-list-event-hover-bg-color: var(--sp-surface-hover); font-family: var(--sp-font); font-size: .8rem; }
.fc .fc-toolbar-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; color: var(--sp-text); }
.fc .fc-button { font-size: .76rem; font-weight: 500; padding: 6px 12px; border-radius: 8px; box-shadow: none !important; text-transform: capitalize; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: var(--sp-primary-text); }
.fc .fc-button-group > .fc-button { border-radius: 0; }
.fc .fc-button-group > .fc-button:first-child { border-radius: 8px 0 0 8px; }
.fc .fc-button-group > .fc-button:last-child { border-radius: 0 8px 8px 0; }
.fc .fc-col-header-cell-cushion { font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--sp-muted); padding: 8px 4px; }
.fc .fc-daygrid-day-number { font-size: .74rem; color: var(--sp-text-2); padding: 6px 8px; }
.fc .fc-day-today .fc-daygrid-day-number { background: var(--sp-primary); color: #fff; border-radius: 7px; margin: 4px; padding: 2px 7px; }
.fc .fc-daygrid-event { border-radius: 6px; padding: 1px 6px; font-size: .7rem; font-weight: 500; border: 0; }
.fc .fc-h-event .fc-event-main { color: #fff; }
.fc .fc-event.ev-soft { background: var(--sp-primary-soft); }
.fc .fc-event.ev-soft .fc-event-main, .fc .fc-event.ev-soft .fc-event-title { color: var(--sp-primary-text); }
.fc .fc-event.ev-green { background: var(--sp-success-soft); } .fc .fc-event.ev-green .fc-event-main { color: var(--sp-success-text); }
.fc .fc-event.ev-orange { background: var(--sp-warning-soft); } .fc .fc-event.ev-orange .fc-event-main { color: var(--sp-warning-text); }
.fc .fc-event.ev-red { background: var(--sp-danger-soft); } .fc .fc-event.ev-red .fc-event-main { color: var(--sp-danger-text); }
.fc .fc-daygrid-dot-event:hover { background: var(--sp-surface-hover); }
.fc-theme-standard .fc-scrollgrid { border-radius: var(--sp-radius-md); overflow: hidden; }
.fc .fc-popover { background: var(--sp-surface); border-color: var(--sp-border); box-shadow: var(--sp-shadow-lg); border-radius: 12px; }

/* ── DataTables (bootstrap5) ── */
div.dataTables_wrapper { font-size: .8rem; color: var(--sp-text-2); }
div.dataTables_wrapper div.dataTables_length select { min-height: 32px; padding: 2px 28px 2px 10px; border-radius: 8px; font-size: .78rem; }
div.dataTables_wrapper div.dataTables_filter input { min-height: 34px; border-radius: 999px; padding: 4px 12px; margin-left: 8px; font-size: .78rem; background: var(--sp-surface-2); }
div.dataTables_wrapper div.dataTables_info { font-size: .76rem; color: var(--sp-muted); padding-top: 14px; }
div.dataTables_wrapper div.dataTables_paginate { padding-top: 10px; }
table.dataTable.table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--sp-surface-2); --bs-table-hover-bg: var(--sp-surface-hover); --bs-table-color: var(--sp-text-2); --bs-table-border-color: var(--sp-divider); --bs-table-striped-color: var(--sp-text-2); --bs-table-hover-color: var(--sp-text); margin-top: 10px !important; }
table.dataTable thead th { font-size: .66rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-muted); border-bottom: 1px solid var(--sp-divider) !important; }
table.dataTable td { padding: 11px 10px; border-color: var(--sp-divider); }
table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after { opacity: .25; }
table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_desc::after { opacity: .9; color: var(--sp-primary); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--sp-text-2); --bs-table-border-color: var(--sp-divider); }

/* ── Quill ── */
.ql-toolbar.ql-snow { border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md) var(--sp-radius-md) 0 0; background: var(--sp-surface-2); font-family: var(--sp-font); padding: 8px 10px; }
.ql-container.ql-snow { border: 1px solid var(--sp-border); border-top: 0; border-radius: 0 0 var(--sp-radius-md) var(--sp-radius-md); font-family: var(--sp-font); font-size: .85rem; color: var(--sp-text); background: var(--sp-surface); }
.ql-editor.ql-blank::before { color: var(--sp-placeholder); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--sp-text-2); }
.ql-snow .ql-fill { fill: var(--sp-text-2); }
.ql-snow .ql-picker { color: var(--sp-text-2); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--sp-primary); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--sp-primary); }
.ql-snow .ql-picker-options { background: var(--sp-surface); border-color: var(--sp-border) !important; border-radius: 8px; box-shadow: var(--sp-shadow-md); }

/* ── Dropzone ── */
.dropzone.sp-dropzone { min-height: 180px; border: 1.5px dashed var(--sp-border-strong); border-radius: var(--sp-radius-lg); background: var(--sp-surface-2); padding: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
.dropzone.sp-dropzone:hover, .dropzone.sp-dropzone.dz-drag-hover { border-color: var(--sp-primary); background: var(--sp-primary-soft); }
.dropzone.sp-dropzone .dz-message { margin: 0; text-align: center; color: var(--sp-muted); font-size: .8rem; }
.dropzone .dz-preview .dz-image { border-radius: 12px; }
.dropzone .dz-preview .dz-details { font-family: var(--sp-font); }
.dropzone .dz-preview .dz-progress .dz-upload { background: var(--sp-primary); }

/* ── SweetAlert2 ── */
.swal2-popup { font-family: var(--sp-font) !important; border-radius: var(--sp-radius-xl) !important; background: var(--sp-surface) !important; color: var(--sp-text) !important; border: 1px solid var(--sp-border); box-shadow: var(--sp-shadow-lg); padding: 24px 22px !important; }
.swal2-title { font-size: 1.15rem !important; font-weight: 600 !important; color: var(--sp-text) !important; }
.swal2-html-container { font-size: .85rem !important; color: var(--sp-muted) !important; }
.swal2-actions { gap: 8px; }
.swal2-styled { border-radius: var(--sp-radius) !important; font-size: .82rem !important; font-weight: 500 !important; padding: 9px 18px !important; margin: 0 !important; }
.swal2-styled.swal2-confirm { background: var(--sp-primary-grad) !important; box-shadow: var(--sp-shadow-btn) !important; }
.swal2-styled.swal2-cancel { background: var(--sp-surface) !important; color: var(--sp-text-2) !important; border: 1px solid var(--sp-border) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--sp-primary-ring) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--sp-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--sp-success) 30%, transparent) !important; }
.swal2-container.swal2-backdrop-show { background: var(--sp-overlay) !important; }
[data-bs-theme="dark"] .swal2-icon.swal2-success .swal2-success-circular-line-left,
[data-bs-theme="dark"] .swal2-icon.swal2-success .swal2-success-circular-line-right,
[data-bs-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix { background: var(--sp-surface) !important; }

/* ── simplebar ── */
.simplebar-scrollbar::before { background: var(--sp-border-strong); }