/**
 * ==========================================================================
 * RSA Universal Search Box Component (rsa-search-box.css)
 * WhatsApp-Style Native Aesthetic for Mobile & Desktop.
 * Fully responsive with clear icon, readable placeholder, and clear button.
 * ==========================================================================
 */

.rsa-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Unified Search Icon: Matches navbar native crisp Boxicons SVG shape */
.rsa-search-box .rsa-search-box__icon,
.rsa-search-box > .material-symbols-outlined,
.rsa-search-box > i,
.rsa-search-box__icon {
  position: absolute !important;
  left: 1.15rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  display: inline-block !important;
  background-color: var(--bs-secondary-color, #707070) !important;
  -webkit-mask-image: var(--app-search-icon-svg, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 18a7.95 7.95 0 0 0 4.897-1.688l4.396 4.396l1.414-1.414l-4.396-4.396A7.95 7.95 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8s3.589 8 8 8m0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6s-6-2.691-6-6s2.691-6 6-6'/%3E%3C/svg%3E")) !important;
  mask-image: var(--app-search-icon-svg, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 18a7.95 7.95 0 0 0 4.897-1.688l4.396 4.396l1.414-1.414l-4.396-4.396A7.95 7.95 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8s3.589 8 8 8m0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6s-6-2.691-6-6s2.691-6 6-6'/%3E%3C/svg%3E")) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  font-size: 0 !important;
  color: transparent !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: background-color var(--rsa-transition-fast, 0.15s ease) !important;
}

/* WhatsApp-Style Pill Input */
.rsa-search-box .rsa-search-box__input,
input.form-control.rsa-search-box__input,
.rsa-search-box__input {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-left: 2.45rem !important;
  padding-right: 2.75rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  border-radius: 50rem !important;
  -webkit-border-radius: 50rem !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  color: var(--bs-heading-color);
  background-color: var(--bs-search-box-bg, var(--bs-paper-bg, #ffffff)) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Universal Search Box: Absolutely NO scale, border addition, or hover animation */
.rsa-search-box .rsa-search-box__input:hover,
input.form-control.rsa-search-box__input:hover,
.rsa-search-box__input:hover,
.rsa-search-box:hover .rsa-search-box__input {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  outline: none !important;
  transition: none !important;
}

/* Placeholder Styling: High readability, comfortable font size */
.rsa-search-box__input::placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: 1 !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
}

/* Focus & Active State: Border matches primary brand, NO box shadow, background stays default */
.rsa-search-box .rsa-search-box__input:focus,
.rsa-search-box .rsa-search-box__input:active,
input.form-control.rsa-search-box__input:focus,
input.form-control.rsa-search-box__input:active,
.rsa-search-box__input:focus,
.rsa-search-box__input:active {
  border-color: var(--bs-primary) !important;
  box-shadow: none !important;
  color: var(--bs-heading-color);
  outline: none !important;
}

/* Light mode explicit preservation: keep bg identical to normal default (#ffffff / var(--bs-paper-bg)) */
:root .rsa-search-box .rsa-search-box__input:focus,
:root .rsa-search-box .rsa-search-box__input:active,
:root input.form-control.rsa-search-box__input:focus,
:root input.form-control.rsa-search-box__input:active,
[data-bs-theme="light"] .rsa-search-box .rsa-search-box__input:focus,
[data-bs-theme="light"] .rsa-search-box .rsa-search-box__input:active,
[data-bs-theme="light"] input.form-control.rsa-search-box__input:focus,
[data-bs-theme="light"] input.form-control.rsa-search-box__input:active,
[data-bs-theme="light"] .search-filter-toolbar input.form-control:focus,
[data-bs-theme="light"] .search-filter-toolbar input.form-control:active,
[data-bs-theme="light"] .rsa-search-box__input:focus,
[data-bs-theme="light"] .rsa-search-box__input:active {
  background-color: var(--bs-search-box-bg, #ffffff) !important;
  border-color: var(--bs-primary) !important;
}

.rsa-search-box:not(:has(.rsa-search-box__input:disabled)):focus-within .rsa-search-box__icon,
.rsa-search-box:not(:has(.rsa-search-box__input:disabled)):focus-within > .material-symbols-outlined,
.rsa-search-box:not(:has(.rsa-search-box__input:disabled)):focus-within > i {
  background-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

/* ==========================================================================
   Disabled State: Preserves Native Styling with Unified Opacity Token
   Strictly retains active shape, background, border, and color.
   ONLY applies unified opacity: var(--app-disabled-opacity, 0.55) & cursor: not-allowed.
   ========================================================================== */

/* Search Box Container when Disabled */
.rsa-search-box:has(.rsa-search-box__input:disabled),
.rsa-search-box:has(.rsa-search-box__input[disabled]),
.rsa-search-box:has(input:disabled),
.rsa-search-box.disabled,
.rsa-search-box.is-disabled,
.search-filter-toolbar .rsa-search-box:has(input:disabled) {
  opacity: var(--app-disabled-opacity, 0.55) !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

[data-bs-theme="dark"] .rsa-search-box:has(.rsa-search-box__input:disabled),
[data-bs-theme="dark"] .rsa-search-box:has(.rsa-search-box__input[disabled]),
[data-bs-theme="dark"] .rsa-search-box:has(input:disabled),
[data-bs-theme="dark"] .rsa-search-box.disabled,
[data-bs-theme="dark"] .rsa-search-box.is-disabled,
[data-bs-theme="dark"] .search-filter-toolbar .rsa-search-box:has(input:disabled) {
  opacity: var(--app-disabled-opacity, 0.55) !important;
}

/* Search Box Input when Disabled: Retains native styling, locks cursor and shadow */
.rsa-search-box .rsa-search-box__input:disabled,
.rsa-search-box .rsa-search-box__input[disabled],
.rsa-search-box .rsa-search-box__input:disabled:focus,
.rsa-search-box .rsa-search-box__input:disabled:active,
input.form-control.rsa-search-box__input:disabled,
input.form-control.rsa-search-box__input[disabled],
input.form-control.rsa-search-box__input:disabled:focus,
input.form-control.rsa-search-box__input:disabled:active,
.search-filter-toolbar input.form-control:disabled,
.search-filter-toolbar input.form-control[disabled],
.search-filter-toolbar input.form-control:disabled:focus,
.search-filter-toolbar input.form-control:disabled:active {
  cursor: not-allowed !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-color: var(--bs-search-box-bg, #ffffff) !important;
  border: 1px solid var(--bs-border-color, #e0e0e0) !important;
  pointer-events: none !important;
}

/* Light mode explicit: ensure background is pure white and border is crisp identical to active */
:root .rsa-search-box .rsa-search-box__input:disabled,
:root .rsa-search-box .rsa-search-box__input[disabled],
:root input.form-control.rsa-search-box__input:disabled,
:root input.form-control.rsa-search-box__input[disabled],
:root .rsa-search-box input:disabled,
[data-bs-theme="light"] .rsa-search-box .rsa-search-box__input:disabled,
[data-bs-theme="light"] .rsa-search-box .rsa-search-box__input[disabled],
[data-bs-theme="light"] input.form-control.rsa-search-box__input:disabled,
[data-bs-theme="light"] input.form-control.rsa-search-box__input[disabled],
[data-bs-theme="light"] .rsa-search-box input:disabled,
[data-bs-theme="light"] .search-filter-toolbar input.form-control:disabled,
[data-bs-theme="light"] .search-filter-toolbar input.form-control[disabled],
.search-filter-toolbar .rsa-search-box input:disabled,
.search-filter-toolbar .rsa-search-box input[disabled] {
  background-color: #ffffff !important;
  border: 1px solid var(--bs-border-color, #e0e0e0) !important;
  border-radius: 50rem !important;
  -webkit-border-radius: 50rem !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  opacity: 1 !important;
}

/* Dark mode explicit disabled */
[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input:disabled,
[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input[disabled],
[data-bs-theme="dark"] input.form-control.rsa-search-box__input:disabled,
[data-bs-theme="dark"] input.form-control.rsa-search-box__input[disabled],
[data-bs-theme="dark"] .rsa-search-box input:disabled,
[data-bs-theme="dark"] .search-filter-toolbar input.form-control:disabled,
[data-bs-theme="dark"] .search-filter-toolbar input.form-control[disabled],
[data-bs-theme="dark"] .search-filter-toolbar .rsa-search-box input:disabled {
  background-color: var(--bs-search-box-bg, var(--bs-surface-elevated)) !important;
  border: 1px solid transparent !important;
  border-radius: 50rem !important;
  -webkit-border-radius: 50rem !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  opacity: 1 !important;
}

/* Muted icon when input is disabled */
.rsa-search-box:has(.rsa-search-box__input:disabled) .rsa-search-box__icon,
.rsa-search-box:has(.rsa-search-box__input:disabled) > .material-symbols-outlined,
.rsa-search-box:has(.rsa-search-box__input[disabled]) .rsa-search-box__icon,
.rsa-search-box:has(.rsa-search-box__input[disabled]) > .material-symbols-outlined,
.rsa-search-box.disabled .rsa-search-box__icon,
.rsa-search-box.is-disabled .rsa-search-box__icon,
.search-filter-toolbar:has(input:disabled) .rsa-search-box__icon,
.search-filter-toolbar:has(input:disabled) > .material-symbols-outlined {
  cursor: not-allowed !important;
}

/* Hide clear button when disabled */
.rsa-search-box .rsa-search-box__input:disabled ~ .rsa-search-box__clear,
.rsa-search-box .rsa-search-box__input[disabled] ~ .rsa-search-box__clear {
  display: none !important;
}

/* Toolbar Filter & Sort Buttons: Active (Enabled) Outline Primary Styling */
.toolbar-filter-btn:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
.toolbar-sort-btn:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
.search-filter-toolbar button[data-bs-target="#modalFilters"]:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
#notesMobileSortWrapper > button:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
[id*="sortWrapper"] > button:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
[id*="SortWrapper"] > button:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary) {
  border: 1.5px solid var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background-color: transparent !important;
  transition: var(--btn-transition, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease) !important;
}

.toolbar-filter-btn:not(:disabled):not(.disabled) *,
.toolbar-sort-btn:not(:disabled):not(.disabled) *,
.search-filter-toolbar button[data-bs-target="#modalFilters"]:not(:disabled):not(.disabled) *,
#notesMobileSortWrapper > button:not(:disabled):not(.disabled) *,
[id*="sortWrapper"] > button:not(:disabled):not(.disabled) * {
  color: var(--bs-primary) !important;
  background-color: transparent !important;
}

/* Hover: Fills whole pill button with soft primary tint */
.toolbar-filter-btn:hover:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
.toolbar-sort-btn:hover:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
.search-filter-toolbar button[data-bs-target="#modalFilters"]:hover:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
#notesMobileSortWrapper > button:hover:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
[id*="sortWrapper"] > button:hover:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
[id*="SortWrapper"] > button:hover:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary) {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

/* Active / Pressed: Slightly deeper primary tint */
.toolbar-filter-btn:active:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
.toolbar-sort-btn:active:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
.search-filter-toolbar button[data-bs-target="#modalFilters"]:active:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
#notesMobileSortWrapper > button:active:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
[id*="sortWrapper"] > button:active:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary),
[id*="SortWrapper"] > button:active:not(:disabled):not(.disabled):not(.btn-primary):not(.btn-label-primary) {
  background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

/* Toolbar Filter & Sort Buttons: Disabled State with Identical 0.55 Opacity & 0-Saturation Monochrome */
/* Toolbar Filter & Sort Buttons: Disabled State with Unified Opacity (Preserves native styling, NO color/bg modification) */
.search-filter-toolbar .toolbar-filter-btn:disabled,
.search-filter-toolbar .toolbar-sort-btn:disabled,
.search-filter-toolbar button[data-bs-target="#modalFilters"]:disabled,
.toolbar-filter-btn:disabled,
.toolbar-sort-btn:disabled,
button.toolbar-filter-btn:disabled,
button.toolbar-sort-btn:disabled,
.toolbar-filter-btn.disabled,
.toolbar-sort-btn.disabled,
#notesMobileSortWrapper > button:disabled,
[id*="sortWrapper"] > button:disabled,
[id*="SortWrapper"] > button:disabled,
.search-filter-toolbar .toolbar-filter-btn:disabled:hover,
.search-filter-toolbar .toolbar-sort-btn:disabled:hover,
.search-filter-toolbar button[data-bs-target="#modalFilters"]:disabled:hover,
.toolbar-filter-btn:disabled:hover,
.toolbar-sort-btn:disabled:hover,
button.toolbar-filter-btn:disabled:hover,
button.toolbar-sort-btn:disabled:hover,
#notesMobileSortWrapper > button:disabled:hover,
[id*="sortWrapper"] > button:disabled:hover,
[id*="SortWrapper"] > button:disabled:hover,
.search-filter-toolbar .toolbar-filter-btn:disabled:focus,
.search-filter-toolbar .toolbar-sort-btn:disabled:focus,
.toolbar-filter-btn:disabled:focus,
.toolbar-sort-btn:disabled:focus,
.search-filter-toolbar .toolbar-filter-btn:disabled:active,
.search-filter-toolbar .toolbar-sort-btn:disabled:active,
.toolbar-filter-btn:disabled:active,
.toolbar-sort-btn:disabled:active {
  pointer-events: auto !important;
  cursor: not-allowed !important;
  opacity: var(--bs-btn-disabled-opacity, var(--app-disabled-opacity, 0.55)) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Compact Variant (for tight tables or mini-modals) */
.rsa-search-box--sm .rsa-search-box__input {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 50rem !important;
  -webkit-border-radius: 50rem !important;
  font-size: 0.875rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 2.15rem !important;
  padding-right: 2.25rem !important;
}

.rsa-search-box--sm .rsa-search-box__icon,
.rsa-search-box--sm > .material-symbols-outlined,
.rsa-search-box--sm > i {
  left: 0.9rem !important;
  font-size: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
}

.rsa-search-box--sm .rsa-search-box__input::placeholder {
  font-size: 0.875rem !important;
}

/* Quick Clear Button (✕): WhatsApp-style clean button, strictly still in place */
.rsa-search-box__clear {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bs-secondary-color, #707070) !important;
  cursor: pointer !important;
  z-index: 3 !important;
  transition: color 0.15s ease !important;
  animation: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.rsa-search-box__clear:hover,
.rsa-search-box__clear:active,
.rsa-search-box__clear:focus,
.rsa-search-box__clear:focus-visible,
button.rsa-search-box__clear:hover,
button.rsa-search-box__clear:active,
button.rsa-search-box__clear:focus,
button.rsa-search-box__clear:focus-visible,
button.rsa-search-box__clear:hover:active {
  top: 50% !important;
  transform: translateY(-50%) !important; /* Diem di tempat - tidak bergerak sama sekali */
  -webkit-transform: translateY(-50%) !important;
  animation: none !important;
  transition: color 0.15s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

.rsa-search-box__clear > i,
.rsa-search-box__clear > .material-symbols-outlined,
.rsa-search-box__clear:hover > i,
.rsa-search-box__clear:hover > .material-symbols-outlined,
.rsa-search-box__clear:active > i,
.rsa-search-box__clear:active > .material-symbols-outlined,
button.rsa-search-box__clear:active > i,
button.rsa-search-box__clear:active > .material-symbols-outlined {
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
}

.rsa-search-box__clear:hover {
  color: var(--bs-heading-color, #242424) !important;
}

.rsa-search-box__clear:active {
  color: var(--bs-heading-color, #242424) !important;
}

.rsa-search-box {
  --rsa-search-end-icon-size: 1.25rem;
}

.rsa-search-box--sm {
  --rsa-search-end-icon-size: 1.15rem;
}

.rsa-search-box__clear > i,
.rsa-search-box__clear > .material-symbols-outlined,
.rsa-search-box__clear > span {
  font-size: var(--rsa-search-end-icon-size, 1.25rem) !important;
  width: var(--rsa-search-end-icon-size, 1.25rem) !important;
  height: var(--rsa-search-end-icon-size, 1.25rem) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

/* Automatic display when input is not empty (Pure CSS + JS class support) */
.rsa-search-box__input:not(:placeholder-shown) ~ .rsa-search-box__clear,
.rsa-search-box--has-value .rsa-search-box__clear {
  display: inline-flex !important;
}

/* Spinner disabled per user request: reset (x) icon always stays visible */
.search-live-spinner,
.rsa-search-box .search-live-spinner {
  display: none !important;
}

/* Dark Mode (Automatic via theme token, unified elevated surface background) */
[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input,
[data-bs-theme="dark"] input.form-control.rsa-search-box__input,
[data-bs-theme="dark"] .rsa-search-box__input {
  background-color: var(--bs-search-box-bg, var(--bs-surface-elevated)) !important;
  border: 1px solid var(--bs-search-box-border, rgba(255, 255, 255, 0.08)) !important;
  border-color: var(--bs-search-box-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 50rem !important;
  -webkit-border-radius: 50rem !important;
  color: var(--bs-body-color, #e0e0e0) !important;
}

[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input:hover,
[data-bs-theme="dark"] input.form-control.rsa-search-box__input:hover,
[data-bs-theme="dark"] .rsa-search-box__input:hover,
[data-bs-theme="dark"] .rsa-search-box:hover .rsa-search-box__input {
  border-color: var(--bs-search-box-border, rgba(255, 255, 255, 0.08)) !important;
  background-color: var(--bs-search-box-bg, var(--bs-surface-elevated)) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  outline: none !important;
  transition: none !important;
}

/* Modal Search Inputs: Strictly Borderless in Dark Mode (seamless on elevated modal background) */
[data-bs-theme="dark"] .modal .rsa-search-box .rsa-search-box__input,
[data-bs-theme="dark"] .modal input.form-control.rsa-search-box__input,
[data-bs-theme="dark"] .modal .rsa-search-box__input,
[data-bs-theme="dark"] .modal .rsa-search-box .rsa-search-box__input:hover,
[data-bs-theme="dark"] .modal input.form-control.rsa-search-box__input:hover,
[data-bs-theme="dark"] .modal .rsa-search-box__input:hover,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box .rsa-search-box__input,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box__input {
  border: 1px solid transparent !important;
  border-color: transparent !important;
}

[data-bs-theme="dark"] .rsa-search-box__input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
}

[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input:focus,
[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input:focus-visible,
[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input:active,
[data-bs-theme="dark"] input.form-control.rsa-search-box__input:focus,
[data-bs-theme="dark"] input.form-control.rsa-search-box__input:focus-visible,
[data-bs-theme="dark"] input.form-control.rsa-search-box__input:active,
[data-bs-theme="dark"] .rsa-search-box__input:focus,
[data-bs-theme="dark"] .rsa-search-box__input:focus-visible,
[data-bs-theme="dark"] .rsa-search-box__input:active,
[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input:not(:disabled):focus,
[data-bs-theme="dark"] .rsa-search-box .rsa-search-box__input:not(:disabled):active,
[data-bs-theme="dark"] input.form-control.rsa-search-box__input:not(:disabled):focus,
[data-bs-theme="dark"] input.form-control.rsa-search-box__input:not(:disabled):active,
[data-bs-theme="dark"] .rsa-search-box__input:not(:disabled):focus,
[data-bs-theme="dark"] .rsa-search-box__input:not(:disabled):active {
  background-color: var(--bs-search-box-bg, var(--bs-surface-elevated)) !important;
  border: 1px solid var(--bs-primary, #ff5911) !important;
  border-color: var(--bs-primary, #ff5911) !important;
  border-radius: 50rem !important;
  -webkit-border-radius: 50rem !important;
  box-shadow: none !important;
  color: #ffffff !important;
  outline: none !important;
}

[data-bs-theme="dark"] .rsa-search-box__clear {
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-bs-theme="dark"] .rsa-search-box__clear:hover,
[data-bs-theme="dark"] .rsa-search-box__clear:active,
[data-bs-theme="dark"] .rsa-search-box__clear:focus {
  color: #ffffff !important;
  transform: translateY(-50%) !important;
}


/* Mobile Responsiveness (< 768px): WhatsApp Native Touch Standard */
@media (max-width: 767.98px) {
  .rsa-search-box .rsa-search-box__icon,
  .rsa-search-box > .material-symbols-outlined,
  .rsa-search-box > i,
  .rsa-search-box__icon {
    left: 1.15rem !important;
    font-size: 0 !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
  }

  .rsa-search-box .rsa-search-box__input,
  input.form-control.rsa-search-box__input,
  .rsa-search-box__input {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 50rem !important;
    -webkit-border-radius: 50rem !important;
    padding-left: 2.45rem !important;
    padding-right: 2.65rem !important;
    font-size: 0.95rem !important;
  }

  .rsa-search-box__input::placeholder {
    font-size: 0.95rem !important;
  }

  .rsa-search-box--sm .rsa-search-box__input {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 50rem !important;
    -webkit-border-radius: 50rem !important;
    font-size: 0.875rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 2.15rem !important;
    padding-right: 2.15rem !important;
  }

  .rsa-search-box--sm .rsa-search-box__icon,
  .rsa-search-box--sm > .material-symbols-outlined,
  .rsa-search-box--sm > i {
    left: 0.9rem !important;
    font-size: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
  }

  .rsa-search-box--sm .rsa-search-box__input::placeholder {
    font-size: 0.875rem !important;
  }
}