/* =========================================================
   Slipi Aurora — THEME.CSS (clean & deduped)
   Load AFTER bootstrap.rtl.min.css and general.css
   Controls: global radius, light/dark tokens, ALL .btn variants
   + Theme toggle component (sun/moon knob)
   ========================================================= */

/* ---------- Global radius / component radii ---------- */
:root {
    --sa-radius: 8px;
    --sa-radius-inside: 12px;
    --sa-image-radius: 10px;
    --sa-btn-radius: 6px;
    --sa-input-radius: 4px;
    --sa-image-thumb-radius: 4px;
    /* Bootstrap radii */
    --bs-border-radius: var(--sa-radius);
    --bs-border-radius-sm: calc(var(--sa-radius) - 4px);
    --bs-border-radius-lg: calc(var(--sa-radius) + 4px);
    /* Components that use their own variables */
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-input-border-radius: var(--bs-border-radius);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-modal-border-radius: var(--bs-border-radius);
    --bs-badge-border-radius: 999px; /* keep badges pill-like */
}

/* If markup uses rounded-pill but you want your global radius: */
.btn.rounded-pill {
    border-radius: var(--sa-btn-radius) !important;
}

/* ---------- LIGHT THEME TOKENS ---------- */
:root,
[data-bs-theme="light"] {
    /* Aurora Logo */
    --sa-logo-url: url("/img/brand/logo-light.png");
    /* Aurora Body / text / links / borders */
    --sa-body-bg: #fed8e3;
    --sa-body-bg-primary: #fff;
    --sa-body-bg-secondary: #feefec;
    --sa-body-bg-secondary-rgb: 254,239,236;
    --sa-body-bg-modal: #fff;
    --sa-body-color: #212529;
    --sa-heading-color: #250f14;
    --sa-text: #515151;
    --sa-text-rgb: 81,81,81;
    --sa-text-second: #fff;
    --sa-text-third: #fff;
    --sa-text-forth: #8e2f4d;
    --sa-text-fifth: #8e2f4d;
    --sa-text-sixth: #515151;
    --sa-muted-text: #656363;
    --sa-border-color: #e5e7eb;
    --sa-border-hover-color: #e5e7eb;
    --sa-link-color: #df9eaf;
    --sa-link-hover-color: #e16490;
    /* Aurora Surfaces */
    --sa-card-bg: #ffffff;
    --sa-card-bg-secondary: #ffffff;
    --sa-card-bg-success: #fabfd3;
    --sa-dropdown-bg: #ffffff;
    --sa-modal-bg: #ffffff;
    --sa-offcanvas-bg: #ffffff;
    --sa-tooltip-bg: #111;
    --sa-badge-primary-bg: #e26390;
    --sa-category-mobile-rgb: 226,99,144;
    --sa-category-mobile-opacity-lvl1: 0.07;
    --sa-category-mobile-opacity-lvl2: 0.15;
    /* Aurora Inputs */
    --sa-input-bg: #ffffff;
    --sa-input-color: #111;
    --sa-input-bg-second: #feefec;
    --sa-input-bg-second-focus: #ffffff;
    --sa-input-color-second: #111;
    --sa-input-border-color: #e5e7eb;
    --sa-input-border-focus: #e26390;
    --sa-input-placeholder-color: #9ca3af;
    --sa-input-shadow-rgb: 226,99,144;
    /* Aurora Navbar */
    --sa-navbar-color: #515151;
    --sa-navbar-hover-color: #e26390;
    --sa-navbar-item-hover-color: #ffeeec;
    --sa-navbar-brand-color: #ffffff;
    --sa-indicator-color: var(--sa-primary);
    /* Aurora Breadcrumb */
    --sa-breadcrumb-color: #e26390;
    /* ===== Color of Size (LIGHT) ===== */
    --sa-primary: #e26390;
    --sa-secondary: #fabfd3;
    --sa-warning: #f8b042;
    --sa-success: #8e2f4d;
    --sa-success-green: #198754;
    --sa-info: #ffeeec;
    --sa-danger: #ff2677;
    --sa-primary-rgb: 226,99,144;
    --sa-warning-rgb: 248,176,66;
    --sa-hover-primary-color: #fabfd3;
    --sa-btn-disabled-color: #e9ecef;
    --sa-success-green-rgb: 25,135,84;
    /* ===== Aurora Button variant tokens (LIGHT) ===== */
    /* Primary */
    --sa-btn-primary: #e26390;
    --sa-btn-primary-border: #e5e7eb;
    --sa-btn-primary-600: #b75376;
    --sa-btn-primary-hover: #df3773;
    --sa-btn-primary-active: #e26390;
    --sa-btn-primary-contrast: #fff;
    --sa-btn-primary-shadow-rgb: 209,89,127;
    /* Secondary */
    --sa-btn-secondary: #ffffff;
    --sa-btn-secondary-border: #e5e7eb;
    --sa-btn-secondary-hover: #e26390;
    --sa-btn-secondary-active: #4f565c;
    --sa-btn-secondary-contrast: #fff;
    --sa-btn-secondary-shadow-rgb: 68,99,255;
    /* Success */
    --sa-btn-success: #22c55e;
    --sa-btn-success-hover: #1fb154;
    --sa-btn-success-active: #19934a;
    --sa-btn-success-contrast: #fff;
    --sa-btn-success-shadow-rgb: 255,238,236;
    /* Info */
    --sa-btn-info: #06b6d4;
    --sa-btn-info-hover: #05a2bd;
    --sa-btn-info-active: #058aa3;
    --sa-btn-info-contrast: #0b1220;
    --sa-btn-info-shadow-rgb: 6,182,212;
    /* Warning */
    --sa-btn-warning: #f59e0b;
    --sa-btn-warning-hover: #e59607;
    --sa-btn-warning-active: #c58106;
    --sa-btn-warning-contrast: #111;
    --sa-btn-warning-shadow-rgb: 245,158,11;
    /* Danger */
    --sa-btn-danger: #90324d;
    --sa-btn-danger-hover: #dc2626;
    --sa-btn-danger-active: #b91c1c;
    --sa-btn-danger-contrast: #fff;
    --sa-btn-danger-shadow-rgb: 239,68,68;
    /* Light */
    --sa-btn-light: #f8f9fa;
    --sa-btn-light-hover: #e9ecef;
    --sa-btn-light-active: #dee2e6;
    --sa-btn-light-contrast: #0b1220;
    --sa-btn-light-shadow-rgb: 248,249,250;
    /* Dark */
    --sa-btn-dark: #0f172a;
    --sa-btn-dark-hover: #0b1220;
    --sa-btn-dark-active: #0a101d;
    --sa-btn-dark-contrast: #e5e7eb;
    --sa-btn-dark-shadow-rgb: 15,23,42;
    --sa-card-hover-bg: linear-gradient( to top, #ffe0f0 0%, #fff9fd 100%);
}

/* ---------- DARK THEME TOKENS ---------- */
[data-bs-theme="dark"] {
    color-scheme: dark;
    /* Aurora Logo */
    --sa-logo-url: url("/img/brand/logo-dark.png");
    /* Aurora Body / text / links / borders */
    --sa-body-bg: #fed8e3;
    --sa-body-bg-primary: #8e2f4d;
    --sa-body-bg-secondary: #522937;
    --sa-body-bg-secondary-rgb: 82,41,55;
    --sa-body-bg-modal: #4a202a;
    --sa-body-color: #212529;
    --sa-heading-color: #fff;
    --sa-text: #fff1f6;
    --sa-text-rgb: 255,241,246;
    --sa-text-second: #8e2f4d;
    --sa-text-third: #fff;
    --sa-text-forth: #fff;
    --sa-text-fifth: #8e2f4d;
    --sa-text-sixth: #515151;
    --sa-muted-text: #d5c6c4;
    --sa-border-color: #9d4866;
    --sa-border-hover-color: #e5e7eb;
    --sa-link-color: #df9eaf;
    --sa-link-hover-color: #e16490;
    /* Aurora Surfaces */
    --sa-card-bg: #4a202a;
    --sa-card-bg-secondary: #90324d;
    --sa-card-bg-success: #d1597f;
    --sa-dropdown-bg: #ffffff;
    --sa-modal-bg: #ffffff;
    --sa-offcanvas-bg: #ffffff;
    --sa-tooltip-bg: #111;
    --sa-badge-primary-bg: #fabfd3;
    --sa-category-mobile-rgb: 74,32,42;
    --sa-category-mobile-opacity-lvl1: 0.50;
    --sa-category-mobile-opacity-lvl2: 0.01;
    /* Aurora Inputs */
    --sa-input-bg: #4a202a;
    --sa-input-color: #111;
    --sa-input-bg-second: #522937;
    --sa-input-color-second: #111;
    --sa-input-bg-second-focus: #4a202a;
    --sa-input-border-color: #90324d;
    --sa-input-border-focus: #e26390;
    --sa-input-placeholder-color: #9ca3af;
    --sa-input-shadow-rgb: 226,99,144;
    /* Aurora Navbar */
    --sa-navbar-color: #fff1f6;
    --sa-navbar-hover-color: #fbb347;
    --sa-navbar-item-hover-color: #de5f8c;
    --sa-navbar-brand-color: #ffffff;
    --sa-indicator-color: var(--sa-secondary);
    /* Aurora Breadcrumb */
    --sa-breadcrumb-color: #fbb347;
    /* ===== Color of Size (DARK) ===== */
    --sa-primary: #de5f8c;
    --sa-secondary: #eda3be;
    --sa-warning: #fbb347;
    --sa-success: #d1597f;
    --sa-success-green: #00ff89;
    --sa-info: #4a202a;
    --sa-danger: #ff2677;
    --sa-primary-rgb: 226,99,144;
    --sa-warning-rgb: 248,176,66;
    --sa-btn-disabled-color: #632a3e;
    --sa-success-green-rgb: 0,255,137;
    /* ===== Button variant tokens (DARK) ===== */
    /* Primary */
    --sa-btn-primary: #e26390;
    --sa-btn-primary-border: #e26390;
    --sa-btn-primary-600: #6d92f0;
    --sa-btn-primary-hover: #6d92f0;
    --sa-btn-primary-active: #5b7fd7;
    --sa-btn-primary-contrast: #fff;
    --sa-btn-primary-shadow-rgb: 209,89,127;
    --sa-hover-primary-color: #de5f8c;
    /* Secondary */
    --sa-btn-secondary: #4a202a;
    --sa-btn-secondary-border: #522937;
    --sa-btn-secondary-hover: #e26390;
    --sa-btn-secondary-active: #4f565c;
    --sa-btn-secondary-contrast: #fff;
    --sa-btn-secondary-shadow-rgb: 226,99,144;
    /* Success */
    --sa-btn-success: #3dd97a;
    --sa-btn-success-hover: #34c06b;
    --sa-btn-success-active: #2aa55c;
    --sa-btn-success-contrast: #0b1220;
    --sa-btn-success-shadow-rgb: 222,95,140;
    /* Info */
    --sa-btn-info: #34cde6;
    --sa-btn-info-hover: #2db9d0;
    --sa-btn-info-active: #26a0b5;
    --sa-btn-info-contrast: #0b1220;
    --sa-btn-info-shadow-rgb: 52,205,230;
    /* Warning */
    --sa-btn-warning: #f59e0b;
    --sa-btn-warning-hover: #d97706;
    --sa-btn-warning-active: #b45309;
    --sa-btn-warning-contrast: #111;
    --sa-btn-warning-shadow-rgb: 245,158,11;
    /* Danger */
    --sa-btn-danger: #ff6b6b;
    --sa-btn-danger-hover: #f24d4d;
    --sa-btn-danger-active: #d53c3c;
    --sa-btn-danger-contrast: #0b1220;
    --sa-btn-danger-shadow-rgb: 255,107,107;
    /* Light */
    --sa-btn-light: #e2e8f0;
    --sa-btn-light-hover: #cbd5e1;
    --sa-btn-light-active: #b6c2cf;
    --sa-btn-light-contrast: #0b1220;
    --sa-btn-light-shadow-rgb: 226,232,240;
    /* Dark */
    --sa-btn-dark: #0b1220;
    --sa-btn-dark-hover: #09101c;
    --sa-btn-dark-active: #070d18;
    --sa-btn-dark-contrast: #e5e7eb;
    --sa-btn-dark-shadow-rgb: 11,18,32;
    --sa-card-hover-bg: linear-gradient( to top, rgba(255, 210, 230, 0.22), rgba(255, 240, 248, 0.10) );
}

/* =========================================================
   BUTTON VARIANT MAPPINGS (SOLID + OUTLINE)
   Edit only the --sa-btn-* tokens above to change ALL buttons.
   ========================================================= */

/* ---------- Primary ---------- */
.btn-primary {
    --bs-btn-bg: var(--sa-btn-primary);
    --bs-btn-border-color: var(--sa-btn-primary);
    --bs-btn-color: var(--sa-btn-primary-contrast);
    --bs-btn-hover-bg: var(--sa-btn-primary-hover);
    --bs-btn-hover-border-color: var(--sa-btn-primary-hover);
    --bs-btn-hover-color: var(--sa-btn-primary-contrast);
    --bs-btn-active-bg: var(--sa-btn-primary-active);
    --bs-btn-active-border-color: var(--sa-btn-primary-active);
    --bs-btn-active-color: var(--sa-btn-primary-contrast);
    --bs-btn-disabled-bg: var(--sa-btn-primary);
    --bs-btn-disabled-border-color: var(--sa-btn-primary);
    --bs-btn-focus-shadow-rgb: var(--sa-btn-primary-shadow-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--sa-btn-primary);
    --bs-btn-border-color: var(--sa-btn-primary);
    --bs-btn-hover-bg: var(--sa-btn-primary);
    --bs-btn-hover-border-color: var(--sa-btn-primary);
    --bs-btn-hover-color: var(--sa-btn-primary-contrast);
    --bs-btn-active-bg: var(--sa-btn-primary-active);
    --bs-btn-active-border-color: var(--sa-btn-primary-active);
}

/* ---------- Secondary ---------- */
.btn-secondary {
    --bs-btn-bg: var(--sa-btn-secondary);
    --bs-btn-border-color: var(--sa-btn-secondary);
    --bs-btn-color: var(--sa-btn-secondary-contrast);
    --bs-btn-hover-bg: var(--sa-btn-secondary-hover);
    --bs-btn-hover-border-color: var(--sa-btn-secondary-hover);
    --bs-btn-hover-color: var(--sa-btn-secondary-contrast);
    --bs-btn-active-bg: var(--sa-btn-secondary-active);
    --bs-btn-active-border-color: var(--sa-btn-secondary-active);
    --bs-btn-active-color: var(--sa-btn-secondary-contrast);
    --bs-btn-disabled-bg: var(--sa-btn-secondary);
    --bs-btn-disabled-border-color: var(--sa-btn-secondary);
    --bs-btn-focus-shadow-rgb: var(--sa-btn-secondary-shadow-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--sa-btn-secondary);
    --bs-btn-border-color: var(--sa-btn-secondary);
    --bs-btn-hover-bg: var(--sa-btn-secondary);
    --bs-btn-hover-border-color: var(--sa-btn-secondary);
    --bs-btn-hover-color: var(--sa-btn-secondary-contrast);
    --bs-btn-active-bg: var(--sa-btn-secondary-active);
    --bs-btn-active-border-color: var(--sa-btn-secondary-active);
}

/* ---------- Success ---------- */
.btn-success {
    --bs-btn-bg: var(--sa-btn-success);
    --bs-btn-border-color: var(--sa-btn-success);
    --bs-btn-color: var(--sa-btn-success-contrast);
    --bs-btn-hover-bg: var(--sa-btn-success-hover);
    --bs-btn-hover-border-color: var(--sa-btn-success-hover);
    --bs-btn-hover-color: var(--sa-btn-success-contrast);
    --bs-btn-active-bg: var(--sa-btn-success-active);
    --bs-btn-active-border-color: var(--sa-btn-success-active);
    --bs-btn-active-color: var(--sa-btn-success-contrast);
    --bs-btn-disabled-bg: var(--sa-btn-success);
    --bs-btn-disabled-border-color: var(--sa-btn-success);
    --bs-btn-focus-shadow-rgb: var(--sa-btn-success-shadow-rgb);
}

.btn-outline-success {
    --bs-btn-color: var(--sa-btn-success);
    --bs-btn-border-color: var(--sa-btn-success);
    --bs-btn-hover-bg: var(--sa-btn-success);
    --bs-btn-hover-border-color: var(--sa-btn-success);
    --bs-btn-hover-color: var(--sa-btn-success-contrast);
    --bs-btn-active-bg: var(--sa-btn-success-active);
    --bs-btn-active-border-color: var(--sa-btn-success-active);
}

/* ---------- Info ---------- */
.btn-info {
    --bs-btn-bg: var(--sa-btn-info);
    --bs-btn-border-color: var(--sa-btn-info);
    --bs-btn-color: var(--sa-btn-info-contrast);
    --bs-btn-hover-bg: var(--sa-btn-info-hover);
    --bs-btn-hover-border-color: var(--sa-btn-info-hover);
    --bs-btn-hover-color: var(--sa-btn-info-contrast);
    --bs-btn-active-bg: var(--sa-btn-info-active);
    --bs-btn-active-border-color: var(--sa-btn-info-active);
    --bs-btn-active-color: var(--sa-btn-info-contrast);
    --bs-btn-disabled-bg: var(--sa-btn-info);
    --bs-btn-disabled-border-color: var(--sa-btn-info);
    --bs-btn-focus-shadow-rgb: var(--sa-btn-info-shadow-rgb);
}

.btn-outline-info {
    --bs-btn-color: var(--sa-btn-info);
    --bs-btn-border-color: var(--sa-btn-info);
    --bs-btn-hover-bg: var(--sa-btn-info);
    --bs-btn-hover-border-color: var(--sa-btn-info);
    --bs-btn-hover-color: var(--sa-btn-info-contrast);
    --bs-btn-active-bg: var(--sa-btn-info-active);
    --bs-btn-active-border-color: var(--sa-btn-info-active);
}

/* ---------- Warning ---------- */
.btn-warning {
    --bs-btn-bg: var(--sa-btn-warning);
    --bs-btn-border-color: var(--sa-btn-warning);
    --bs-btn-color: var(--sa-btn-warning-contrast);
    --bs-btn-hover-bg: var(--sa-btn-warning-hover);
    --bs-btn-hover-border-color: var(--sa-btn-warning-hover);
    --bs-btn-hover-color: var(--sa-btn-warning-contrast);
    --bs-btn-active-bg: var(--sa-btn-warning-active);
    --bs-btn-active-border-color: var(--sa-btn-warning-active);
    --bs-btn-active-color: var(--sa-btn-warning-contrast);
    --bs-btn-disabled-bg: var(--sa-btn-warning);
    --bs-btn-disabled-border-color: var(--sa-btn-warning);
    --bs-btn-focus-shadow-rgb: var(--sa-btn-warning-shadow-rgb);
}

.btn-outline-warning {
    --bs-btn-color: var(--sa-btn-warning);
    --bs-btn-border-color: var(--sa-btn-warning);
    --bs-btn-hover-bg: var(--sa-btn-warning);
    --bs-btn-hover-border-color: var(--sa-btn-warning);
    --bs-btn-hover-color: var(--sa-btn-warning-contrast);
    --bs-btn-active-bg: var(--sa-btn-warning-active);
    --bs-btn-active-border-color: var(--sa-btn-warning-active);
}

/* ---------- Danger ---------- */
.btn-danger {
    --bs-btn-bg: var(--sa-btn-danger);
    --bs-btn-border-color: var(--sa-btn-danger);
    --bs-btn-color: var(--sa-btn-danger-contrast);
    --bs-btn-hover-bg: var(--sa-btn-danger-hover);
    --bs-btn-hover-border-color: var(--sa-btn-danger-hover);
    --bs-btn-hover-color: var(--sa-btn-danger-contrast);
    --bs-btn-active-bg: var(--sa-btn-danger-active);
    --bs-btn-active-border-color: var(--sa-btn-danger-active);
    --bs-btn-active-color: var(--sa-btn-danger-contrast);
    --bs-btn-disabled-bg: var(--sa-btn-danger);
    --bs-btn-disabled-border-color: var(--sa-btn-danger);
    --bs-btn-focus-shadow-rgb: var(--sa-btn-danger-shadow-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--sa-btn-danger);
    --bs-btn-border-color: var(--sa-btn-danger);
    --bs-btn-hover-bg: var(--sa-btn-danger);
    --bs-btn-hover-border-color: var(--sa-btn-danger);
    --bs-btn-hover-color: var(--sa-btn-danger-contrast);
    --bs-btn-active-bg: var(--sa-btn-danger-active);
    --bs-btn-active-border-color: var(--sa-btn-danger-active);
}

/* ---------- Light ---------- */
.btn-light {
    --bs-btn-bg: var(--sa-btn-light);
    --bs-btn-border-color: var(--sa-btn-light);
    --bs-btn-color: var(--sa-btn-light-contrast);
    --bs-btn-hover-bg: var(--sa-btn-light-hover);
    --bs-btn-hover-border-color: var(--sa-btn-light-hover);
    --bs-btn-hover-color: var(--sa-btn-light-contrast);
    --bs-btn-active-bg: var(--sa-btn-light-active);
    --bs-btn-active-border-color: var(--sa-btn-light-active);
    --bs-btn-active-color: var(--sa-btn-light-contrast);
    --bs-btn-disabled-bg: var(--sa-btn-light);
    --bs-btn-disabled-border-color: var(--sa-btn-light);
    --bs-btn-focus-shadow-rgb: var(--sa-btn-light-shadow-rgb);
}

.btn-outline-light {
    --bs-btn-color: var(--sa-btn-light);
    --bs-btn-border-color: var(--sa-btn-light);
    --bs-btn-hover-bg: var(--sa-btn-light);
    --bs-btn-hover-border-color: var(--sa-btn-light);
    --bs-btn-hover-color: var(--sa-btn-light-contrast);
    --bs-btn-active-bg: var(--sa-btn-light-active);
    --bs-btn-active-border-color: var(--sa-btn-light-active);
}

/* ---------- Dark ---------- */
.btn-dark {
    --bs-btn-bg: var(--sa-btn-dark);
    --bs-btn-border-color: var(--sa-btn-dark);
    --bs-btn-color: var(--sa-btn-dark-contrast);
    --bs-btn-hover-bg: var(--sa-btn-dark-hover);
    --bs-btn-hover-border-color: var(--sa-btn-dark-hover);
    --bs-btn-hover-color: var(--sa-btn-dark-contrast);
    --bs-btn-active-bg: var(--sa-btn-dark-active);
    --bs-btn-active-border-color: var(--sa-btn-dark-active);
    --bs-btn-active-color: var(--sa-btn-dark-contrast);
    --bs-btn-disabled-bg: var(--sa-btn-dark);
    --bs-btn-disabled-border-color: var(--sa-btn-dark);
    --bs-btn-focus-shadow-rgb: var(--sa-btn-dark-shadow-rgb);
}

.btn-outline-dark {
    --bs-btn-color: var(--sa-btn-dark);
    --bs-btn-border-color: var(--sa-btn-dark);
    --bs-btn-hover-bg: var(--sa-btn-dark);
    --bs-btn-hover-border-color: var(--sa-btn-dark);
    --bs-btn-hover-color: var(--sa-btn-dark-contrast);
    --bs-btn-active-bg: var(--sa-btn-dark-active);
    --bs-btn-active-border-color: var(--sa-btn-dark-active);
}

/* ---------- Link (uses link tokens) ---------- */
.sa-btn-link {
    color: var(--sa-danger);
    text-decoration: none;
    cursor : pointer;
}
    .sa-btn-link:hover {
        color: #b80040;
        text-decoration : underline;
    }

/* ---------- Optional polish: borders & shadows ---------- */
.card,
.dropdown-menu,
.modal-content,
.offcanvas {
    border: 1px solid var(--sa-border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.sa-modal .modal-header {
    border-bottom: 1px solid var(--sa-muted-text) !important;
}
/* =========================================================
   THEME TOGGLE COMPONENT (isolated + mobile-friendly)
   ========================================================= */
/* Wrapper */
.theme-toggle {
    --h: 42px;
    --pad: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    height: var(--h);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sa-btn-radius);
    background: #f5b301;
    color: var(--bs-body-color);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.05);
}

.theme-toggle__label {
    letter-spacing: .2px;
    white-space: nowrap;
    padding-inline: 8px;
}

/* The round knob — perfectly centered icon */
.theme-toggle__knob {
    width: calc(var(--h) - 2*var(--pad));
    height: calc(var(--h) - 2*var(--pad));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    background: #fff;
    color: #111;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    transition: background .25s,color .25s,transform .25s;
}

    /* Reset ONLY icons inside knob (won’t affect hamburger etc.) */
    .theme-toggle__knob .bi {
        display: block;
        vertical-align: baseline !important; /* cancels Bootstrap Icons default nudge */
        font-size: 1.15rem;
        margin: 0;
        color: inherit !important;
    }

/* Light look for knob (sun) */
.theme-toggle:not(.is-dark) .theme-toggle__knob {
    background: #f5b301;
    color: #3b2f00 !important;
    border: 1px solid #f59e0b55;
    box-shadow: 0 3px 12px rgba(245,158,11,.35);
}

/* Dark look + knob on the left (row-reverse) */
.theme-toggle.is-dark {
    flex-direction: row-reverse;
}

    .theme-toggle.is-dark .theme-toggle__knob {
        background: #1e3a8a;
        color: #ffe58f !important;
    }

        .theme-toggle.is-dark .theme-toggle__knob .bi {
            font-size: 1.2rem;
        }

/* Dark track colors */
[data-bs-theme="dark"] .theme-toggle {
    border-color: #243244;
    background: #1e3a8a;
    color: #cbd5e1;
}

[data-bs-theme="dark"] .theme-toggle__knob {
    background: #111827;
    color: #f8fafc;
    box-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Mobile menu theme row container */
.rm-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--sa-radius);
}

/* Compact version for mobile list */
.rm-item-menu .theme-toggle.theme-toggle--compact {
    --h: 32px;
    font-size: 12px;
}

/* Responsive tweaks */
@media (max-width:1200px) {
    .theme-toggle {
        --h: 38px;
        font-size: 12px;
    }
}

@media (max-width:400px) {
    .rm-item-menu .theme-toggle__label {
        display: none;
    }
}
/* Compact version inside mobile menu */
.theme-toggle.theme-toggle--compact .theme-toggle__knob .bi {
    font-size: 1rem; /* force 1.00rem in hamburger menu */
}

[data-bs-theme="dark"] .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

[data-bs-theme="light"] .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

[data-bs-theme="light"] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.sa-radio input[type="radio"]:checked {
    accent-color: var(--sa-primary); 
}

.btn-close:focus{
    box-shadow : none;
}