/* ============================================================
 *  SETU THEME - single custom stylesheet for the COMPLETE site
 *  Section 1: shared design tokens
 *  Section 2: front website fixes (header CTA buttons)
 *  Section 3: admin panel modern theme (scoped: body.setu-admin)
 *  Section 4: auth pages (login / forgot password / OTP)
 * ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  --ma-accent: #0f766e;            /* deep teal */
  --ma-accent-600: #0d6a63;
  --ma-accent-700: #115e59;
  --ma-accent-soft: rgba(15, 118, 110, 0.10);
  --ma-accent-softer: rgba(15, 118, 110, 0.06);
  --ma-accent-ring: rgba(15, 118, 110, 0.18);
  --ma-indigo: #4338ca;            /* supporting indigo */
  --ma-bg: #f6f8fa;                /* soft neutral page bg */
  --ma-surface: #ffffff;
  --ma-border: #e5e9ef;
  --ma-border-strong: #d7dde6;
  --ma-text: #1f2937;
  --ma-text-soft: #4b5563;
  --ma-text-muted: #8a94a3;
  --ma-danger: #dc2626;
  --ma-success: #15803d;
  --ma-warning: #b45309;
  --ma-radius: 10px;
  --ma-radius-sm: 8px;
  --ma-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --ma-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
}

/* ---------- 2. Front website fixes ---------- */
/* Header CTA button fixes:
   - "Become a Volunteer" was styled with the cursive Amita face and white text (invisible on the white header)
   - "Donate Now" was an inline anchor with a blink animation that wrapped onto two lines */
.main-header-one__bottom-right {
    flex-shrink: 0;
}
.main-header-one__bottom-right .btn-box1 a,
.stricky-header--one .main-header-one__bottom-right .btn-box1 a {
    font-family: var(--rv-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 26px;
    display: inline-block;
    white-space: nowrap;
    padding: 3px 20px 4px;
    border: 2px solid var(--rv-primary);
    border-radius: 25px;
}
.main-header-one__bottom-right .btn-box1 a:hover,
.stricky-header--one .main-header-one__bottom-right .btn-box1 a:hover {
    background: var(--rv-primary);
    color: var(--rv-black);
}
.main-header-one__bottom-right .btn-box2 a,
.stricky-header--one .main-header-one__bottom-right .btn-box2 a {
    display: inline-block;
    white-space: nowrap;
    animation: none;
    background: var(--rv-primary);
}

/* ---------- 3. Admin theme (applies only inside body.setu-admin) ---------- */
body.setu-admin {
/* ============================================================
   Modern Admin Overlay Theme — The Setu Foundation
   Loaded AFTER all template CSS so it wins the cascade.
   CSS-only refresh of the Viho template: palette, cards,
   sidebar, header, forms, tables, buttons, DataTables.
   ============================================================ */



/* ---------- Base / typography ---------- */

& {
  background-color: var(--ma-bg);
  color: var(--ma-text);
  letter-spacing: 0.1px;
}

.page-body {
  background-color: var(--ma-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ma-text);
  letter-spacing: -0.01em;
}

a {
  color: var(--ma-accent);
}

a:hover {
  color: var(--ma-accent-700);
}

/* ---------- Top header bar ---------- */

.page-main-header {
  box-shadow: 0 1px 0 var(--ma-border), 0 2px 8px rgba(16, 24, 40, 0.04);
}

.page-main-header .main-header-right {
  background-color: var(--ma-surface);
  box-shadow: none;
  border-bottom: 1px solid var(--ma-border);
  padding: 12px 30px;
}

.page-main-header .main-header-right .nav-right ul li .mode {
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.page-main-header .main-header-right .nav-right ul li .mode:hover {
  background-color: var(--ma-accent-soft);
}

.page-main-header .main-header-right .nav-right ul li svg {
  color: var(--ma-text-soft);
  stroke: var(--ma-text-soft);
}

/* Sign-out button in header */
.btn-primary-light {
  background-color: var(--ma-accent-soft) !important;
  color: var(--ma-accent-700) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ma-radius-sm);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary-light:hover,
.btn-primary-light:focus {
  background-color: var(--ma-accent) !important;
  color: #ffffff !important;
}

.btn-primary-light svg {
  stroke: currentColor;
}

/* ---------- Sidebar ---------- */

.page-body-wrapper .main-nav {
  background-color: var(--ma-surface);
  border-right: 1px solid var(--ma-border);
  box-shadow: none;
}

/* Sidebar user block */
.page-body-wrapper .main-nav .sidebar-user {
  background: linear-gradient(180deg, var(--ma-accent-softer) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 1px solid var(--ma-border);
  padding: 22px 10px 18px;
  box-shadow: none;
}

.page-body-wrapper .main-nav .sidebar-user img {
  border: 3px solid var(--ma-surface);
  box-shadow: 0 0 0 2px var(--ma-accent-soft), var(--ma-shadow-md);
}

.page-body-wrapper .main-nav .sidebar-user h6 {
  color: var(--ma-text);
  letter-spacing: 0.01em;
}

.page-body-wrapper .main-nav .sidebar-user p {
  color: var(--ma-text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sidebar search */
.sidebar-search {
  background-color: var(--ma-bg);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
}

.sidebar-search:focus {
  background-color: var(--ma-surface);
  border-color: var(--ma-accent);
  box-shadow: 0 0 0 3px var(--ma-accent-ring);
}

/* Menu links */
.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link {
  border-radius: var(--ma-radius-sm);
  margin-bottom: 2px;
  color: var(--ma-text-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 0.18s ease, color 0.18s ease;
  position: relative;
}

.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link svg {
  stroke: currentColor;
  transition: stroke 0.18s ease;
}

.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link:hover {
  background-color: var(--ma-accent-softer);
  color: var(--ma-accent-700);
}

/* Active menu item: soft pill + accent left indicator */
.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link.active,
.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link.menu-title.active {
  background-color: var(--ma-accent-soft) !important;
  color: var(--ma-accent-700) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background-color: var(--ma-accent);
}

.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link.active span,
.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link.active svg {
  color: var(--ma-accent-700) !important;
  stroke: var(--ma-accent-700);
}

/* Submenu */
.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-submenu li a {
  color: var(--ma-text-soft);
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-submenu li a:hover,
.page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-submenu li a.active {
  color: var(--ma-accent) !important;
}

/* ---------- Page title / breadcrumb strip ---------- */

.page-body-wrapper .page-header {
  padding-top: 28px;
  padding-bottom: 22px;
}

.page-body-wrapper .page-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ma-text);
  letter-spacing: -0.02em;
  text-transform: capitalize;
}

.page-body-wrapper .page-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin-top: 6px;
}

.page-body-wrapper .page-header .breadcrumb .breadcrumb-item,
.page-body-wrapper .page-header .breadcrumb .breadcrumb-item a {
  color: var(--ma-text-muted);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.page-body-wrapper .page-header .breadcrumb .breadcrumb-item a:hover {
  color: var(--ma-accent);
}

.page-body-wrapper .page-header .breadcrumb .breadcrumb-item.active {
  color: var(--ma-accent);
}

/* ---------- Cards ---------- */

.card {
  background-color: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  box-shadow: var(--ma-shadow);
  margin-bottom: 28px;
}

.card .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--ma-border);
  border-radius: var(--ma-radius) var(--ma-radius) 0 0;
  padding: 20px 24px;
}

.card .card-header h4,
.card .card-header h5,
.card .card-header .card-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ma-text);
}

.card .card-body {
  padding: 24px;
}

.card .card-footer {
  background-color: transparent;
  border-top: 1px solid var(--ma-border);
  border-radius: 0 0 var(--ma-radius) var(--ma-radius);
  padding: 16px 24px;
}

.card hr {
  border-color: var(--ma-border);
  opacity: 1;
  margin: 0;
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: var(--ma-radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--ma-accent) !important;
  border-color: var(--ma-accent) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ma-accent-700) !important;
  border-color: var(--ma-accent-700) !important;
  box-shadow: 0 4px 10px rgba(15, 118, 110, 0.25);
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--ma-accent-ring) !important;
}

.btn-outline-primary {
  color: var(--ma-accent) !important;
  border-color: var(--ma-accent) !important;
  background-color: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--ma-accent) !important;
  color: #ffffff !important;
}

.btn-secondary {
  background-color: #eef1f5 !important;
  border-color: #eef1f5 !important;
  color: var(--ma-text-soft) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e2e7ee !important;
  border-color: #e2e7ee !important;
  color: var(--ma-text) !important;
}

.btn-success {
  background-color: var(--ma-success) !important;
  border-color: var(--ma-success) !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #166534 !important;
  border-color: #166534 !important;
}

.btn-danger {
  background-color: var(--ma-danger) !important;
  border-color: var(--ma-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

.btn-light {
  border-radius: var(--ma-radius-sm);
}

/* ---------- Forms ---------- */

.form-control,
.form-select,
select.form-control {
  background-color: var(--ma-surface);
  border: 1px solid var(--ma-border-strong);
  border-radius: var(--ma-radius-sm);
  color: var(--ma-text);
  padding: 9px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control::placeholder {
  color: var(--ma-text-muted);
}

.form-control:focus,
.form-select:focus,
select.form-control:focus {
  border-color: var(--ma-accent);
  box-shadow: 0 0 0 3px var(--ma-accent-ring);
  background-color: var(--ma-surface);
}

label,
.form-label,
.col-form-label {
  color: var(--ma-text-soft);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

.input-group-text {
  background-color: var(--ma-bg);
  border: 1px solid var(--ma-border-strong);
  border-radius: var(--ma-radius-sm);
  color: var(--ma-text-muted);
}

/* Select2 to match */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--ma-border-strong) !important;
  border-radius: var(--ma-radius-sm) !important;
  min-height: 40px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ma-accent) !important;
  box-shadow: 0 0 0 3px var(--ma-accent-ring);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ma-accent) !important;
}

/* Checkboxes (template's solid style) */
.checkbox-solid-primary input[type="checkbox"]:checked + label::before,
.checkbox label::before {
  border-radius: 5px;
  border-color: var(--ma-border-strong);
}

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-solid-primary input[type="checkbox"]:checked + label::before {
  background-color: var(--ma-accent) !important;
  border-color: var(--ma-accent) !important;
  color: #fff !important;
}

/* ---------- Switch toggles (listing status columns) ---------- */

.switch {
  margin-bottom: 0;
}

.switch .switch-state {
  background-color: #d3dae3;
  border-radius: 20px;
  transition: background-color 0.25s ease;
}

.switch .switch-state:before {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
  transition: 0.25s ease;
}

.switch input:checked + .switch-state {
  background-color: var(--ma-accent) !important;
}

.switch input:focus-visible + .switch-state {
  box-shadow: 0 0 0 3px var(--ma-accent-ring);
}

/* ---------- Badges ---------- */

.badge {
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 9px;
}

.badge-primary,
.badge.badge-primary {
  background-color: var(--ma-accent) !important;
}

.badge-success {
  background-color: var(--ma-success) !important;
}

.badge-danger {
  background-color: var(--ma-danger) !important;
}

.badge-warning {
  background-color: var(--ma-warning) !important;
}

/* ---------- Alerts ---------- */

.alert {
  border-radius: var(--ma-radius-sm);
  border-width: 1px;
}

.alert-primary {
  background-color: var(--ma-accent-soft);
  border-color: rgba(15, 118, 110, 0.25);
  color: var(--ma-accent-700);
}

/* ---------- Pagination (Bootstrap) ---------- */

.pagination .page-link {
  color: var(--ma-text-soft);
  border-color: var(--ma-border);
  border-radius: 6px;
  margin: 0 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination .page-link:hover {
  background-color: var(--ma-accent-softer);
  color: var(--ma-accent-700);
}

.pagination .page-item.active .page-link {
  background-color: var(--ma-accent) !important;
  border-color: var(--ma-accent) !important;
  color: #fff !important;
}

/* ---------- Modals ---------- */

.modal-content {
  border: 1px solid var(--ma-border);
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(16, 24, 40, 0.18);
}

.modal-header {
  border-bottom: 1px solid var(--ma-border);
  padding: 18px 24px;
}

.modal-header .modal-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  border-top: 1px solid var(--ma-border);
  padding: 14px 24px;
}

/* ---------- Tables / DataTables ---------- */

.table-responsive,
.dt-ext {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.dataTable,
.table {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100% !important;
  color: var(--ma-text);
}

table.dataTable thead th,
table.dataTable thead td,
.table thead th {
  background-color: #f9fafc;
  color: var(--ma-text-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--ma-border-strong) !important;
  border-top: 1px solid var(--ma-border);
  padding: 13px 18px;
  white-space: nowrap;
}

table.dataTable tbody td,
.table tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--ma-border);
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--ma-text-soft);
}

/* zebra-free rows + hover highlight */
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even,
table.dataTable.stripe tbody tr.odd,
table.dataTable tbody tr {
  background-color: var(--ma-surface) !important;
}

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_1 {
  background-color: transparent !important;
}

table.dataTable tbody tr:hover,
table.dataTable.display tbody tr:hover,
.table-hover tbody tr:hover {
  background-color: var(--ma-accent-softer) !important;
}

table.dataTable.no-footer {
  border-bottom: 1px solid var(--ma-border);
}

/* DataTables controls: search, length, info */
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 14px;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  color: var(--ma-text-soft);
  font-weight: 500;
}

.dataTables_wrapper .dataTables_filter input {
  background-color: var(--ma-surface);
  border: 1px solid var(--ma-border-strong) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  margin-left: 8px;
  min-width: 220px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ma-accent) !important;
  box-shadow: 0 0 0 3px var(--ma-accent-ring);
}

.dataTables_wrapper .dataTables_length select {
  background-color: var(--ma-surface);
  border: 1px solid var(--ma-border-strong) !important;
  border-radius: var(--ma-radius-sm) !important;
  padding: 6px 28px 6px 12px !important;
  outline: none;
}

.dataTables_wrapper .dataTables_info {
  color: var(--ma-text-muted) !important;
  font-size: 12.5px;
  padding-top: 16px;
}

/* DataTables export/control buttons (dom: B) */
.dt-buttons .dt-button,
button.dt-button,
a.dt-button,
div.dt-button {
  background: var(--ma-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ma-border-strong) !important;
  border-radius: var(--ma-radius-sm) !important;
  color: var(--ma-text-soft) !important;
  font-weight: 500;
  padding: 7px 14px;
  margin-right: 6px;
  margin-bottom: 8px;
  box-shadow: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dt-buttons .dt-button:hover,
button.dt-button:hover:not(.disabled),
a.dt-button:hover:not(.disabled),
div.dt-button:hover:not(.disabled) {
  background: var(--ma-accent) !important;
  border-color: var(--ma-accent) !important;
  color: #ffffff !important;
}

div.dt-button-collection {
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
  box-shadow: var(--ma-shadow-md);
  background-color: var(--ma-surface);
}

div.dt-button-collection .dt-button {
  border: none !important;
  border-radius: 6px !important;
  margin: 2px 4px;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate {
  padding-top: 14px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--ma-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ma-border) !important;
  border-radius: var(--ma-radius-sm) !important;
  color: var(--ma-text-soft) !important;
  margin: 0 3px;
  padding: 6px 12px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: var(--ma-accent-softer) !important;
  border-color: var(--ma-accent) !important;
  color: var(--ma-accent-700) !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ma-accent) !important;
  border-color: var(--ma-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: transparent !important;
  border-color: var(--ma-border) !important;
  color: var(--ma-text-muted) !important;
}

/* small screens: let table area breathe */
@media (max-width: 767px) {
  .dataTables_wrapper .dataTables_filter input {
    min-width: 140px;
  }

  .card .card-body,
  .card .card-header {
    padding: 16px;
  }
}

/* ---------- Loader ---------- */

.loader-wrapper {
  background-color: var(--ma-bg);
}

/* ---------- Scrollbar polish (WebKit) ---------- */

.page-body-wrapper ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.page-body-wrapper ::-webkit-scrollbar-thumb {
  background-color: #cbd4de;
  border-radius: 8px;
}

.page-body-wrapper ::-webkit-scrollbar-thumb:hover {
  background-color: #aab6c4;
}

/* ============================================================
   Dark mode overrides — template toggles &.dark-only
   ============================================================ */

&.dark-only {
  --ma-bg: #10151d;
  --ma-surface: #1a212b;
  --ma-border: #2a3341;
  --ma-border-strong: #354052;
  --ma-text: #e7ebf1;
  --ma-text-soft: #b6bfcc;
  --ma-text-muted: #7d8798;
  --ma-accent-soft: rgba(45, 212, 191, 0.12);
  --ma-accent-softer: rgba(45, 212, 191, 0.07);
  --ma-accent-ring: rgba(45, 212, 191, 0.22);
  background-color: var(--ma-bg);
  color: var(--ma-text);
}

&.dark-only .page-body,
&.dark-only .loader-wrapper {
  background-color: var(--ma-bg);
}

&.dark-only .page-main-header .main-header-right,
&.dark-only .page-body-wrapper .main-nav,
&.dark-only .card,
&.dark-only .modal-content {
  background-color: var(--ma-surface);
  border-color: var(--ma-border);
}

&.dark-only .page-main-header {
  box-shadow: 0 1px 0 var(--ma-border);
}

&.dark-only .page-body-wrapper .main-nav .sidebar-user {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.06) 0%, rgba(0, 0, 0, 0) 100%);
  border-bottom-color: var(--ma-border);
}

&.dark-only h1, &.dark-only h2, &.dark-only h3,
&.dark-only h4, &.dark-only h5, &.dark-only h6,
&.dark-only .page-body-wrapper .page-header h3,
&.dark-only .card .card-header h4,
&.dark-only .card .card-header .card-title,
&.dark-only .page-body-wrapper .main-nav .sidebar-user h6 {
  color: var(--ma-text);
}

&.dark-only .form-control,
&.dark-only .form-select,
&.dark-only select.form-control,
&.dark-only .sidebar-search,
&.dark-only .dataTables_wrapper .dataTables_filter input,
&.dark-only .dataTables_wrapper .dataTables_length select {
  background-color: #141a23;
  border-color: var(--ma-border-strong) !important;
  color: var(--ma-text);
}

&.dark-only .input-group-text {
  background-color: #141a23;
  border-color: var(--ma-border-strong);
  color: var(--ma-text-muted);
}

&.dark-only table.dataTable thead th,
&.dark-only table.dataTable thead td,
&.dark-only .table thead th {
  background-color: #151c26;
  color: var(--ma-text-muted);
  border-color: var(--ma-border) !important;
}

&.dark-only table.dataTable tbody tr,
&.dark-only table.dataTable.display tbody tr.odd,
&.dark-only table.dataTable.display tbody tr.even {
  background-color: var(--ma-surface) !important;
}

&.dark-only table.dataTable tbody td,
&.dark-only .table tbody td {
  border-color: var(--ma-border);
  color: var(--ma-text-soft);
}

&.dark-only table.dataTable tbody tr:hover {
  background-color: rgba(45, 212, 191, 0.06) !important;
}

&.dark-only .dt-buttons .dt-button,
&.dark-only button.dt-button,
&.dark-only a.dt-button,
&.dark-only div.dt-button,
&.dark-only .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--ma-surface) !important;
  border-color: var(--ma-border-strong) !important;
  color: var(--ma-text-soft) !important;
}

&.dark-only div.dt-button-collection {
  background-color: var(--ma-surface);
  border-color: var(--ma-border);
}

&.dark-only .btn-secondary {
  background-color: #232c39 !important;
  border-color: #232c39 !important;
  color: var(--ma-text-soft) !important;
}

&.dark-only .btn-primary-light {
  background-color: rgba(45, 212, 191, 0.12) !important;
  color: #5eead4 !important;
}

&.dark-only .btn-primary-light:hover {
  background-color: var(--ma-accent) !important;
  color: #ffffff !important;
}

&.dark-only .switch .switch-state {
  background-color: #3a4657;
}

&.dark-only .page-wrapper.compact-wrapper .page-body-wrapper.sidebar-icon .main-nav .main-navbar .nav-menu > li .nav-link {
  color: var(--ma-text-soft);
}

&.dark-only .pagination .page-link {
  background-color: var(--ma-surface);
  border-color: var(--ma-border);
  color: var(--ma-text-soft);
}

}

/* ---------- 4. Auth pages ---------- */
/* ============================================================
   Modern Auth Pages — The Setu Foundation admin
   Self-contained styling for login / forgot-password /
   verify-otp / change-password. Loaded after template CSS.
   ============================================================ */

:root {
  --au-accent: #0f766e;
  --au-accent-dark: #115e59;
  --au-accent-deep: #134e4a;
  --au-accent-ring: rgba(15, 118, 110, 0.18);
  --au-bg: #f6f8fa;
  --au-surface: #ffffff;
  --au-border: #dde3ea;
  --au-text: #1f2937;
  --au-text-soft: #4b5563;
  --au-text-muted: #8a94a3;
}

body.ma-auth-body {
  background-color: var(--au-bg);
  font-family: "Rubik", "Roboto", -apple-system, sans-serif;
  color: var(--au-text);
  margin: 0;
}

.ma-auth {
  min-height: 100vh;
  display: flex;
  width: 100%;
}

/* ---------- Brand panel (left) ---------- */

.ma-auth-brand {
  flex: 1 1 46%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 72px;
  color: #ffffff;
  background:
    radial-gradient(1100px 600px at -10% -20%, rgba(94, 234, 212, 0.16) 0%, rgba(94, 234, 212, 0) 55%),
    radial-gradient(900px 700px at 110% 115%, rgba(67, 56, 202, 0.28) 0%, rgba(67, 56, 202, 0) 60%),
    linear-gradient(155deg, var(--au-accent-dark) 0%, var(--au-accent-deep) 60%, #0c3835 100%);
  overflow: hidden;
}

.ma-auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.ma-auth-brand > * {
  position: relative;
  z-index: 1;
}

.ma-auth-logo {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  margin-bottom: 36px;
}

.ma-auth-logo img {
  max-height: 64px;
  max-width: 220px;
  width: auto;
  display: block;
}

.ma-auth-brand h1 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 16px;
}

.ma-auth-brand .ma-auth-tagline {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 460px;
  margin: 0 0 40px;
}

.ma-auth-brand .ma-auth-tagline p {
  margin: 0;
  color: inherit;
}

.ma-auth-social {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.ma-auth-social li a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.ma-auth-social li a:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-2px);
}

.ma-auth-social li a svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

/* ---------- Form panel (right) ---------- */

.ma-auth-panel {
  flex: 1 1 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background-color: var(--au-bg);
}

.ma-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--au-surface);
  border: 1px solid var(--au-border);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(16, 24, 40, 0.08);
  padding: 44px 42px;
  animation: ma-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes ma-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ma-auth-card {
    animation: none;
  }
}

.ma-auth-card .ma-auth-heading {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--au-text);
  margin: 0 0 6px;
}

.ma-auth-card .ma-auth-sub {
  font-size: 14px;
  color: var(--au-text-muted);
  margin: 0 0 30px;
  line-height: 1.6;
}

.ma-auth-card .form-group {
  margin-bottom: 20px;
}

.ma-auth-card label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--au-text-soft);
  margin-bottom: 8px;
}

/* Input with leading icon */
.ma-auth-field {
  position: relative;
}

.ma-auth-field > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--au-text-muted);
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
}

.ma-auth-card .ma-auth-field .form-control {
  width: 100%;
  height: auto;
  background: #fbfcfe;
  border: 1.5px solid var(--au-border);
  border-radius: 12px;
  padding: 13px 16px 13px 46px;
  font-size: 14.5px;
  color: var(--au-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ma-auth-card .ma-auth-field .form-control::placeholder {
  color: #aab3c0;
}

.ma-auth-card .ma-auth-field .form-control:focus {
  background: #ffffff;
  border-color: var(--au-accent);
  box-shadow: 0 0 0 4px var(--au-accent-ring);
  outline: none;
}

/* password eye toggle */
.ma-auth-field .ma-view-pass {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--au-text-muted);
  cursor: pointer;
  z-index: 2;
  padding: 4px;
  line-height: 1;
}

.ma-auth-field .ma-view-pass:hover {
  color: var(--au-accent);
}

.ma-auth-field .form-control.ma-has-eye {
  padding-right: 44px;
}

/* remember / forgot row */
.ma-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.ma-auth-remember {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ma-auth-remember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4ccd6;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  margin: 0;
  flex: none;
  opacity: 1;
}

.ma-auth-remember input[type="checkbox"]:checked {
  background-color: var(--au-accent);
  border-color: var(--au-accent);
}

.ma-auth-remember input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ma-auth-remember input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px var(--au-accent-ring);
  outline: none;
}

.ma-auth-remember label {
  margin: 0;
  font-weight: 500;
  color: var(--au-text-soft);
  cursor: pointer;
  font-size: 13.5px;
}

.ma-auth-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--au-accent);
  text-decoration: none;
}

.ma-auth-link:hover {
  color: var(--au-accent-dark);
  text-decoration: underline;
}

/* submit */
.ma-auth-card .btn.ma-auth-submit {
  width: 100%;
  display: block;
  background: var(--au-accent);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 18px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.ma-auth-card .btn.ma-auth-submit:hover,
.ma-auth-card .btn.ma-auth-submit:focus {
  background: var(--au-accent-dark);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.3);
  transform: translateY(-1px);
}

.ma-auth-card .btn.ma-auth-submit:active {
  transform: translateY(0);
}

/* errors */
.ma-auth-card .text-danger {
  display: block;
  font-size: 12.5px;
  margin-top: 7px;
}

.ma-auth-card .invalid-feedback {
  font-size: 12.5px;
}

/* footer line under the card */
.ma-auth-footnote {
  text-align: center;
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--au-text-muted);
}

.ma-auth-footnote a {
  color: var(--au-accent);
  font-weight: 600;
  text-decoration: none;
}

/* mini brand header used on single-card pages (forgot / otp / change) */
.ma-auth-minibrand {
  text-align: center;
  margin-bottom: 26px;
}

.ma-auth-minibrand img {
  max-height: 56px;
  max-width: 200px;
  width: auto;
  margin-bottom: 12px;
}

.ma-auth-minibrand span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--au-text-muted);
}

/* centered single-card layout */
.ma-auth-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(15, 118, 110, 0.08) 0%, rgba(15, 118, 110, 0) 60%),
    var(--au-bg);
}

/* OTP boxes */
.ma-otp-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.ma-auth-card .ma-otp-row .form-control.otp {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 13px 6px;
  background: #fbfcfe;
  border: 1.5px solid var(--au-border);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ma-auth-card .ma-otp-row .form-control.otp:focus {
  border-color: var(--au-accent);
  box-shadow: 0 0 0 4px var(--au-accent-ring);
  outline: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .ma-auth {
    flex-direction: column;
  }

  .ma-auth-brand {
    flex: none;
    padding: 36px 28px;
    align-items: center;
    text-align: center;
  }

  .ma-auth-brand h1 {
    font-size: 24px;
  }

  .ma-auth-brand .ma-auth-tagline {
    margin-bottom: 24px;
  }

  .ma-auth-logo {
    margin-bottom: 22px;
    padding: 10px 16px;
  }

  .ma-auth-logo img {
    max-height: 48px;
  }

  .ma-auth-social {
    justify-content: center;
  }

  .ma-auth-panel {
    flex: none;
    padding: 32px 18px 48px;
  }

  .ma-auth-card {
    padding: 32px 24px;
  }
}


/* Fix: the admin template forces .login-form to a fixed 450px white box,
   which overflowed the auth card as a ghost panel. Neutralize it. */
.ma-auth-card .login-form,
.ma-auth-card .theme-form {
    width: 100% !important;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* ---------- 5. Admin data tables v2 - compact modern listing style ---------- */
body.setu-admin {

  /* Card that hosts a table: let wide tables scroll inside, never the page */
  .card .table-responsive,
  .card .dataTables_wrapper {
    overflow-x: auto;
  }

  /* Table frame: no vertical grid lines, hairline row separators, compact cells */
  table.dataTable,
  .table {
    border-collapse: separate !important;
    border-spacing: 0;
    border: none !important;
    width: 100% !important;
    font-size: 13.5px;
  }
  table.dataTable td, table.dataTable th,
  .table td, .table th {
    border-left: none !important;
    border-right: none !important;
  }
  table.dataTable thead th,
  .table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    background: #f8fafc;
    border-top: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 14px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  table.dataTable tbody td,
  .table tbody td {
    padding: 10px 14px !important;
    line-height: 1.5;
    vertical-align: middle;
    border-bottom: 1px solid #eef2f6 !important;
    background: #fff;
    max-width: 420px;
    overflow-wrap: break-word;
  }
  table.dataTable tbody tr:last-child td { border-bottom: none !important; }

  /* Kill zebra striping; single subtle hover highlight */
  table.dataTable.display tbody tr.odd,
  table.dataTable.display tbody tr.even,
  table.dataTable.stripe tbody tr.odd,
  table.dataTable tbody tr,
  table.dataTable.display tbody tr.odd > .sorting_1,
  table.dataTable.display tbody tr.even > .sorting_1,
  table.dataTable.order-column tbody tr > .sorting_1 {
    background: #fff !important;
  }
  table.dataTable tbody tr:hover,
  table.dataTable tbody tr:hover > td,
  .table-hover tbody tr:hover > td {
    background: #f0f7f5 !important;
  }

  /* Selection checkbox column: tight, centered, and hide the "CHECKBOX" header word */
  table.dataTable th:has(.checkbox),
  table.dataTable td:has(.checkbox) {
    width: 46px !important;
    min-width: 46px;
    max-width: 46px;
    text-align: center;
    padding: 8px 6px !important;
  }
  table.dataTable th:has(.checkbox) { font-size: 0 !important; }
  table.dataTable th:has(.checkbox)::before,
  table.dataTable th:has(.checkbox)::after { display: none !important; }

  /* Modern 18px checkboxes (template renders <div.checkbox><input><label></label></div>) */
  .checkbox { padding: 0; margin: 0; display: inline-block; }
  .checkbox label {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0 !important;
    cursor: pointer;
  }
  .checkbox label::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    margin: 0;
    transition: border-color .15s, background .15s;
  }
  .checkbox label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2.5px;
    width: 5px;
    height: 9.5px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .12s ease-in;
  }
  .checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
  }
  .checkbox input[type="checkbox"]:checked + label::before,
  .checkbox input[type="checkbox"]:checked ~ label::before {
    background: var(--ma-accent, #0f766e);
    border-color: var(--ma-accent, #0f766e);
  }
  .checkbox input[type="checkbox"]:checked + label::after,
  .checkbox input[type="checkbox"]:checked ~ label::after {
    transform: rotate(45deg) scale(1);
  }
  .checkbox input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--ma-accent, #0f766e);
    outline-offset: 2px;
  }

  /* Sort indicators: single compact arrow, only strong on the active column */
  table.dataTable thead .sorting,
  table.dataTable thead .sorting_asc,
  table.dataTable thead .sorting_desc {
    background-image: none !important;
    padding-right: 22px;
    cursor: pointer;
  }
  table.dataTable thead .sorting::before,
  table.dataTable thead .sorting_asc::before,
  table.dataTable thead .sorting_desc::before { display: none !important; }
  table.dataTable thead .sorting::after,
  table.dataTable thead .sorting_asc::after,
  table.dataTable thead .sorting_desc::after {
    content: "\2195";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: .35;
    bottom: auto !important;
  }
  table.dataTable thead .sorting_asc::after { content: "\2191"; opacity: .9; color: var(--ma-accent, #0f766e); }
  table.dataTable thead .sorting_desc::after { content: "\2193"; opacity: .9; color: var(--ma-accent, #0f766e); }

  /* Toolbar: search + page-length + info + pagination */
  .dataTables_wrapper .dataTables_filter input {
    border: 1px solid #dbe3ea;
    border-radius: 999px;
    padding: 7px 16px;
    margin-left: 8px;
    font-size: 13.5px;
    min-width: 220px;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ma-accent, #0f766e);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
  }
  .dataTables_wrapper .dataTables_length select {
    border: 1px solid #dbe3ea;
    border-radius: 8px;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    background-color: #fff;
  }
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length { margin-bottom: 12px; }
  .dataTables_wrapper .dataTables_info {
    font-size: 12.5px;
    color: #94a3b8;
    padding-top: 14px;
  }

  .dataTables_wrapper .dataTables_paginate { padding-top: 10px; }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #475569 !important;
    padding: 5px 12px !important;
    margin-left: 5px;
    font-size: 13px;
    transition: all .15s;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    border-color: var(--ma-accent, #0f766e) !important;
    color: var(--ma-accent, #0f766e) !important;
    background: #f0f7f5 !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--ma-accent, #0f766e) !important;
    border-color: var(--ma-accent, #0f766e) !important;
    color: #fff !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .45;
    cursor: default;
  }

  /* Compact in-cell controls */
  .table .btn, table.dataTable .btn {
    padding: 4px 12px;
    font-size: 12.5px;
    border-radius: 7px;
  }
  table.dataTable img { border-radius: 8px; }

  /* Dark mode parity for the new table style */
  &.dark-only table.dataTable thead th,
  &.dark-only .table thead th {
    background: #1a2226;
    color: #8fa3ad;
    border-bottom-color: #2c3a41 !important;
  }
  &.dark-only table.dataTable tbody td,
  &.dark-only .table tbody td {
    background: #202b30;
    border-bottom-color: #2c3a41 !important;
  }
  &.dark-only table.dataTable tbody tr:hover > td { background: #24363b !important; }
  &.dark-only .checkbox label::before { background: #202b30; border-color: #3b4b52; }
  &.dark-only .dataTables_wrapper .dataTables_filter input,
  &.dark-only .dataTables_wrapper .dataTables_length select {
    background: #1a2226;
    border-color: #2c3a41;
    color: #cfd8dc;
  }
  &.dark-only .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #1a2226 !important;
    border-color: #2c3a41 !important;
    color: #b6c2c9 !important;
  }
}


/* ---------- 6. Dashboard v2 ---------- */
body.setu-admin {

  .dash-v2 { padding-top: 6px; }

  .dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
  }
  .dash-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e6ebf0;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .dash-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .08); }
  .dash-tile__link { position: absolute; inset: 0; z-index: 1; }
  .dash-tile__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tile, #0f766e) 12%, #fff);
    color: var(--tile, #0f766e);
  }
  .dash-tile__icon svg { width: 20px; height: 20px; }
  .dash-tile__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .dash-tile__meta .num { font-size: 22px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
  .dash-tile__meta .lbl { font-size: 13px; font-weight: 600; color: #334155; margin-top: 1px; }
  .dash-tile__meta .sub { font-size: 11.5px; color: #94a3b8; }

  .dash-card { border-radius: 12px; height: 100%; }
  .dash-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px !important;
  }
  .dash-card__head h5 { margin: 0; font-size: 15px; font-weight: 700; }
  .dash-card__hint { font-size: 12px; color: #94a3b8; }
  .dash-card__more { font-size: 12.5px; font-weight: 600; color: var(--ma-accent, #0f766e); }

  .dash-chart { width: 100%; height: 220px; display: block; }
  .dash-chart__axis {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    padding-top: 4px;
  }

  .dash-list { list-style: none; margin: 0; padding: 0; }
  .dash-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
  }
  .dash-list li:last-child { border-bottom: none; }
  .dash-list a { color: #334155; font-weight: 500; }
  .dash-list a:hover { color: var(--ma-accent, #0f766e); }
  .dash-list__count { font-size: 12.5px; color: #94a3b8; }
  .dash-list__count b { color: #0f172a; }

  .dash-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

  .dash-feed { list-style: none; margin: 0; padding: 0; }
  .dash-feed li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .dash-feed li:last-child { border-bottom: none; }
  .dash-feed__main { display: flex; flex-direction: column; min-width: 0; }
  .dash-feed__main .who { font-size: 13.5px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-feed__main .who small { font-weight: 400; color: #94a3b8; }
  .dash-feed__main .what { font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-feed__time { font-size: 11.5px; color: #b6c2cf; white-space: nowrap; }
  .dash-feed__empty { color: #94a3b8; font-size: 13px; justify-content: center; }

  .dash-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .dash-badge--paid { background: #e8f6ee; color: #15803d; }
  .dash-badge--failed { background: #fdeceb; color: #b91c1c; }
  .dash-badge--created { background: #f1f5f9; color: #64748b; }

  &.dark-only .dash-tile,
  &.dark-only .dash-card { background: #202b30; border-color: #2c3a41; }
  &.dark-only .dash-tile__meta .num { color: #e8eef1; }
  &.dark-only .dash-tile__meta .lbl { color: #b6c2c9; }
  &.dark-only .dash-list li, &.dark-only .dash-feed li { border-bottom-color: #2c3a41; }
  &.dark-only .dash-list a, &.dark-only .dash-feed__main .who { color: #cfd8dc; }
}

/* ---------- 7. SEO analyzer panel ---------- */
body.setu-admin {

  .seo-card .card-header { cursor: pointer; user-select: none; }
  .seo-card .card-header h5 { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
  .seo-card .seo-card__chev { margin-left: auto; font-size: 12px; color: #94a3b8; transition: transform 0.2s ease; }
  .seo-card.is-collapsed .seo-card__chev { transform: rotate(-90deg); }
  .seo-card.is-collapsed .seo-card__body { display: none; }

  .seo-analyzer {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
  }

  .seo-analyzer__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .seo-analyzer__gauge { position: relative; width: 80px; height: 80px; flex: 0 0 auto; }
  .seo-analyzer__gauge svg { transform: rotate(-90deg); }
  .seo-gauge__track { fill: none; stroke: #e2e8f0; stroke-width: 7; }
  .seo-gauge__bar {
    fill: none;
    stroke: #dc2626;
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
  }
  .seo-gauge__num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
  }
  .seo-analyzer__verdict-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
  .seo-analyzer__verdict-text { font-size: 18px; font-weight: 700; color: #dc2626; }

  .seo-analyzer[data-score-band="ok"] .seo-gauge__bar { stroke: #d97706; }
  .seo-analyzer[data-score-band="ok"] .seo-analyzer__verdict-text { color: #d97706; }
  .seo-analyzer[data-score-band="good"] .seo-gauge__bar { stroke: #16a34a; }
  .seo-analyzer[data-score-band="good"] .seo-analyzer__verdict-text { color: #16a34a; }

  .seo-serp {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .seo-serp__caption { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 6px; }
  .seo-serp__url { font-size: 12.5px; color: #1e6e42; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seo-serp__title { font-size: 17px; color: #1a0dab; line-height: 1.3; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seo-serp__desc { font-size: 13px; color: #4d5156; line-height: 1.45; }

  .seo-checklist { list-style: none; margin: 0; padding: 0; }
  .seo-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid #eef2f6;
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
  }
  .seo-check:last-child { border-bottom: none; }
  .seo-check__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    background: #94a3b8;
  }
  .seo-check--pass .seo-check__dot { background: #16a34a; }
  .seo-check--warn .seo-check__dot { background: #d97706; }
  .seo-check--fail .seo-check__dot { background: #dc2626; }

  &.dark-only .seo-analyzer { background: #202b30; border-color: #2c3a41; }
  &.dark-only .seo-gauge__track { stroke: #2c3a41; }
  &.dark-only .seo-gauge__num { color: #e8eef1; }
  &.dark-only .seo-serp { background: #1b2429; border-color: #2c3a41; }
  &.dark-only .seo-serp__title { color: #8ab4f8; }
  &.dark-only .seo-serp__url { color: #7fbf9a; }
  &.dark-only .seo-serp__desc { color: #b6c2c9; }
  &.dark-only .seo-check { color: #cfd8dc; border-bottom-color: #2c3a41; }
}


/* ---------- 8. Admin top header polish ---------- */
body.setu-admin {

  .page-main-header {
    box-shadow: none !important;
    border-bottom: 1px solid #e6ebf0;
  }
  .page-main-header .main-header-left {
    padding: 14px 22px;
    border-right-color: #eef2f6;
  }
  .page-main-header .logo-wrapper img,
  .page-main-header .dark-logo-wrapper img {
    height: 42px;
  }

  /* Greeting that fills the previously-empty middle */
  .hdr-greeting { line-height: 1.3; padding-left: 26px; }
  .hdr-greeting h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
  }
  .hdr-greeting p {
    margin: 0;
    font-size: 12.5px;
    color: #94a3b8;
  }

  /* Right-side controls: circular hover buttons + a proper Sign Out pill */
  .page-main-header .nav-menus {
    padding: 14px 26px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .page-main-header .nav-menus > li > a.text-dark,
  .page-main-header .nav-menus .mode {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #475569 !important;
    cursor: pointer;
    transition: background .15s, color .15s;
    margin: 0;
  }
  .page-main-header .nav-menus > li > a.text-dark:hover,
  .page-main-header .nav-menus .mode:hover {
    background: #eef4f2;
    color: var(--ma-accent, #0f766e) !important;
  }
  .page-main-header .nav-menus > li > a.text-dark svg { width: 18px; height: 18px; }
  .page-main-header .nav-menus .mode i { font-size: 16px; }

  .page-main-header .btn-primary-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--ma-accent, #0f766e) 10%, #fff);
    color: var(--ma-accent, #0f766e);
    border: 1px solid color-mix(in srgb, var(--ma-accent, #0f766e) 30%, #fff);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 13.5px;
    transition: all .15s;
  }
  .page-main-header .btn-primary-light:hover {
    background: var(--ma-accent, #0f766e);
    color: #fff;
  }
  .page-main-header .btn-primary-light svg { width: 16px; height: 16px; }

  /* Sidebar user block: initials avatar instead of the stock cartoon */
  .sidebar-avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--ma-accent, #0f766e), #14b8a6);
    box-shadow: 0 4px 12px rgba(15, 118, 110, .25);
  }
  .sidebar-user .badge-bottom { display: none; }

  &.dark-only .page-main-header { border-bottom-color: #2c3a41; }
  &.dark-only .hdr-greeting h5 { color: #e8eef1; }
  &.dark-only .page-main-header .nav-menus > li > a.text-dark,
  &.dark-only .page-main-header .nav-menus .mode { color: #b6c2c9 !important; }
  &.dark-only .page-main-header .nav-menus > li > a.text-dark:hover,
  &.dark-only .page-main-header .nav-menus .mode:hover { background: #24363b; }
}


/* ---------- 9. Compact admin header (fixed 72px, all offsets synced) ----------
   Template cascade audit: .left-menu-header{padding:24px 40px} + .nav-menus{padding:20px 40px}
   inflate the fixed header to ~95px while the sidebar is pinned at top:83px and the
   page body at margin-top:130px - producing both the dead whitespace band and the
   header overlapping the sidebar's top. Fix: hard 72px header, everything synced. */
body.setu-admin {

  @media (min-width: 992px) {

    .page-main-header,
    .page-main-header .main-header-right {
      height: 72px;
    }
    .page-main-header .main-header-right .main-header-left {
      height: 72px;
      padding: 0 22px;
      align-items: center;
    }
    .page-main-header .logo-wrapper img,
    .page-main-header .dark-logo-wrapper img {
      height: 38px;
    }
    .page-main-header .main-header-right .left-menu-header {
      padding: 0 26px !important;
      display: flex;
      align-items: center;
      height: 72px;
    }
    .page-main-header .main-header-right .nav-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 72px;
    }
    .page-main-header .main-header-right .nav-right .nav-menus {
      padding: 0 26px !important;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* body + sidebar re-synced to the 72px header */
    .page-body {
      margin-top: 72px !important;
      padding-top: 16px !important;
      min-height: calc(100vh - 72px) !important;
    }
    .page-body-wrapper .main-nav {
      top: 72px !important;
      height: calc(100vh - 72px) !important;
    }
    /* template sizes the sidebar scroll area as 100vh-330px (assumes the tall
       header); give the reclaimed space back to the menu */
    .page-body-wrapper .main-nav .main-navbar .nav-menu {
      height: calc(100vh - 272px) !important;
    }
    /* breadcrumb / page-title strip: tighter rhythm */
    .page-body-wrapper .page-header {
      padding-top: 12px !important;
      padding-bottom: 12px !important;
    }
  }

  .page-main-header .nav-menus > li > a.text-dark,
  .page-main-header .nav-menus .mode { width: 38px; height: 38px; }
  .page-main-header .btn-primary-light { padding: 7px 16px; }
  .hdr-greeting h5 { font-size: 15px; }
  .hdr-greeting p { font-size: 12px; }
}


/* ---------- 10. CKEditor 5 theming ---------- */
body.setu-admin {

  .ck.ck-editor { width: 100%; }
  .ck.ck-editor__main > .ck-editor__editable {
    min-height: 280px;
    border-color: #dbe3ea !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    font-size: 14.5px;
    line-height: 1.65;
  }
  .ck.ck-editor__main > .ck-editor__editable.ck-focused {
    border-color: var(--ma-accent, #0f766e) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
  }
  .ck.ck-toolbar {
    border-color: #dbe3ea !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    background: #f8fafc !important;
  }
  .ck.ck-button.ck-on,
  .ck.ck-button.ck-on:not(.ck-disabled):hover {
    background: color-mix(in srgb, var(--ma-accent, #0f766e) 14%, #fff) !important;
    color: var(--ma-accent, #0f766e) !important;
  }
  .ck-word-count {
    font-size: 12px;
    color: #94a3b8;
    text-align: right;
    padding: 4px 2px 0;
  }

  &.dark-only .ck.ck-editor__main > .ck-editor__editable {
    background: #1a2226 !important;
    border-color: #2c3a41 !important;
    color: #cfd8dc;
  }
  &.dark-only .ck.ck-toolbar { background: #202b30 !important; border-color: #2c3a41 !important; }
}

/* ---------- 11. Listing polish: bare checkboxes, thumbnails, tighter cards ---------- */
body.setu-admin {

  /* Some listing headers use a bare <input type=checkbox> (select-all) instead of
     the wrapped .checkbox markup - cover both, hide the header word, keep it tight */
  table.dataTable th:has(input[type="checkbox"]),
  table.dataTable td:has(> input[type="checkbox"]) {
    width: 46px !important;
    min-width: 46px;
    max-width: 46px;
    text-align: center;
    padding: 8px 6px !important;
    font-size: 0 !important;
  }
  table.dataTable th:has(input[type="checkbox"])::before,
  table.dataTable th:has(input[type="checkbox"])::after { display: none !important; }
  table.dataTable input[type="checkbox"]:not(.custom-control-input) {
    accent-color: var(--ma-accent, #0f766e);
    width: 17px;
    height: 17px;
    cursor: pointer;
    vertical-align: middle;
  }

  /* Row thumbnails: consistent small size so rows stay compact */
  table.dataTable tbody td img {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    border-radius: 8px;
  }

  /* Tighter card + toolbar rhythm on listing pages */
  .card { margin-bottom: 18px; }
  .card .card-header { padding: 16px 22px 10px; }
  .card .card-body { padding: 16px 22px 18px; }
  div.dt-buttons { margin-bottom: 10px; }
  div.dt-buttons .btn,
  .dt-buttons .buttons-collection {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 8px;
  }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter { margin-bottom: 8px; }
  .container-fluid > .row > .col-sm-12 > .card:first-child { margin-top: 4px; }
}

/* ---------- 12. Select-all header label fix ----------
   Every listing header renders <label>Checkbox</label> INSIDE the .checkbox
   wrapper; the label itself is styled as the 18px box, so its text collided
   with it. Hide text inside table checkbox labels (the box uses px-sized
   pseudo-elements, unaffected by font-size). */
body.setu-admin {
  table .checkbox label,
  th .checkbox label,
  td .checkbox label {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: hidden;
    white-space: nowrap;
  }
  table.dataTable th:has(.checkbox),
  table.dataTable td:has(.checkbox) {
    text-align: center;
    vertical-align: middle;
  }
}

/* ---------- 13. Header profile menu + My Profile page ---------- */
body.setu-admin {

  /* the sidebar user block is gone - give the reclaimed space to the menu */
  @media (min-width: 992px) {
    .page-body-wrapper .main-nav .main-navbar .nav-menu {
      height: calc(100vh - 150px) !important;
    }
  }

  .hdr-profile { position: relative; }
  .hdr-profile__chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 6px;
    border: 1px solid #e6ebf0;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #fff;
  }
  .hdr-profile__chip:hover {
    border-color: var(--ma-accent, #0f766e);
    background: #f4faf8;
  }
  .hdr-profile__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
  }
  .hdr-profile__avatar--initials {
    background: linear-gradient(135deg, var(--ma-accent, #0f766e), #14b8a6);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
  }
  .hdr-profile__name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hdr-profile__chip svg { width: 14px; height: 14px; color: #94a3b8; }

  .hdr-profile__menu {
    width: 180px !important;
    right: 0 !important;
    top: 52px !important;
    padding: 8px !important;
    border: 1px solid #e6ebf0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
    background: #fff;
  }
  .hdr-profile__menu li { padding: 0 !important; list-style: none; }
  .hdr-profile__menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
  }
  .hdr-profile__menu li a:hover {
    background: #f0f7f5;
    color: var(--ma-accent, #0f766e);
  }
  .hdr-profile__menu li a svg { width: 16px; height: 16px; }

  /* My Profile page */
  .profile-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(15, 118, 110, .2);
  }
  .profile-photo--initials {
    background: linear-gradient(135deg, var(--ma-accent, #0f766e), #14b8a6);
    color: #fff;
    font-size: 38px;
    font-weight: 700;
  }
  .profile-role {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ma-accent, #0f766e);
    background: color-mix(in srgb, var(--ma-accent, #0f766e) 10%, #fff);
    border-radius: 999px;
    padding: 4px 14px;
  }
  .profile-facts {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    text-align: left;
  }
  .profile-facts li {
    display: flex;
    justify-content: space-between;
    padding: 9px 4px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
  }
  .profile-facts li:last-child { border-bottom: none; }
  .profile-facts li span { color: #94a3b8; }
  .profile-facts li b { color: #1e293b; font-weight: 600; }

  &.dark-only .hdr-profile__chip { background: #202b30; border-color: #2c3a41; }
  &.dark-only .hdr-profile__name { color: #cfd8dc; }
  &.dark-only .hdr-profile__menu { background: #202b30; border-color: #2c3a41; }
  &.dark-only .hdr-profile__menu li a { color: #b6c2c9; }
  &.dark-only .hdr-profile__menu li a:hover { background: #24363b; }
  &.dark-only .profile-facts li { border-bottom-color: #2c3a41; }
  &.dark-only .profile-facts li b { color: #e8eef1; }
}


/* ---------- 14. UX audit fixes: header wrap, sidebar search, profile menu ----------
   Audit findings:
   (1) .main-header-right is a Bootstrap .row (flex-wrap: wrap). The profile chip
       widened the right side, so on ordinary window widths the row WRAPPED to a
       second line; with the header fixed at 72px the wrapped content spilled out
       over the sidebar's search box. Fix: never wrap, let the middle greeting
       shrink/ellipsize, hide it on narrower screens, compact header to 64px.
   (2) The sidebar search sat flush at the sidebar's top edge after the user
       block was removed. Fix: breathing room + a proper pill field.
   (3) The profile dropdown opened 10px below the chip - crossing that gap on
       hover closed it (classic hover-gap), and the template's arrow pointed at
       nothing. Fix: hover bridge, anchor to the chip, drop the arrow. */
body.setu-admin {

  @media (min-width: 992px) {
    .page-main-header .main-header-right {
      flex-wrap: nowrap !important;
      height: 64px;
    }
    .page-main-header { height: 64px; }
    .page-main-header .main-header-right .main-header-left {
      height: 64px;
      padding: 0 18px;
      flex-shrink: 0;
    }
    .page-main-header .logo-wrapper img,
    .page-main-header .dark-logo-wrapper img { height: 34px; }
    .page-main-header .main-header-right .left-menu-header {
      height: 64px;
      min-width: 0;
      overflow: hidden;
      padding: 0 20px !important;
    }
    .hdr-greeting h5 {
      font-size: 14.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hdr-greeting p { white-space: nowrap; }
    .page-main-header .main-header-right .nav-right {
      height: 64px;
      flex-shrink: 0;
      width: auto;
    }
    .page-main-header .main-header-right .nav-right .nav-menus { padding: 0 18px !important; }

    .page-body {
      margin-top: 64px !important;
      min-height: calc(100vh - 64px) !important;
    }
    .page-body-wrapper .main-nav {
      top: 64px !important;
      height: calc(100vh - 64px) !important;
    }
    .page-body-wrapper .main-nav .main-navbar .nav-menu {
      height: calc(100vh - 158px) !important;
    }
  }
  @media (max-width: 1399.98px) {
    .hdr-greeting p { display: none; }
  }
  @media (max-width: 1199.98px) {
    .hdr-greeting { display: none; }
  }

  /* --- Sidebar search --- */
  .page-body-wrapper .main-nav .main-navbar { padding-top: 14px; }
  .main-navbar > .row.mb-2 { margin: 0 0 4px !important; }
  .main-navbar .form-group { position: relative; margin: 0; }
  .sidebar-search {
    width: calc(100% - 28px) !important;
    margin: 0 auto !important;
    display: block;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    padding: 8px 38px 8px 16px !important;
    font-size: 13.5px;
    background: #fff;
    box-shadow: none !important;
  }
  .sidebar-search:focus {
    border-color: var(--ma-accent, #0f766e) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
    outline: none;
  }
  .main-navbar .form-group .fe-search {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
  }

  /* --- Profile chip & dropdown --- */
  .nav-menus > li.hdr-profile { display: flex; align-items: center; }
  .hdr-profile::after {
    /* invisible hover bridge between chip and menu */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
  }
  .hdr-profile .hdr-profile__menu {
    top: calc(100% + 10px) !important;
    left: auto !important;
    right: 0 !important;
  }
  .hdr-profile .hdr-profile__menu::before { display: none !important; }
  @media (max-width: 767.98px) {
    .hdr-profile__name, .hdr-profile__chip > svg { display: none; }
    .hdr-profile__chip { padding: 4px; border: none; background: transparent; }
  }

  &.dark-only .sidebar-search { background: #1a2226; border-color: #2c3a41 !important; color: #cfd8dc; }
}

/* ---------- 15. Profile page layout fix ----------
   Section 6 sets .dash-card{height:100%} for the dashboard's equal-height
   columns. On the profile page the right column stacks TWO cards, so the
   first card stretched to the full column height and pushed the second card
   out of the row - overflowing across the page footer. Cards on the profile
   page must size to their content. */
body.setu-admin {
  .profile-v2 .dash-card { height: auto; }
}
/* ---------- 16. Front nav density fix ----------
   The theme gives every menu item margin-left:30px; the restyled 'Become a
   Volunteer' pill is wider than the old text link, so the row overflowed and
   'Contact' collided with the CTA buttons. Tighten the row so it always fits. */
.main-menu .main-menu__list > li + li,
.stricky-header .main-menu__list > li + li { margin-left: 18px; }
.main-header-one__bottom-right { margin-left: 16px; }
.main-header-one__bottom-right .btn-box1 a { padding: 3px 14px 4px; }
.main-header-one__bottom-right .btn-box2 a { padding: 5px 18px 6px; }
.main-header-one__bottom-right .btn-box2 { margin-left: 10px; }

@media (max-width: 1600px) {
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li { margin-left: 12px; }
  .main-menu .main-menu__list > li > a,
  .stricky-header .main-menu__list > li > a { font-size: 15px; }
  .main-header-one__bottom-right .btn-box1 a,
  .main-header-one__bottom-right .btn-box2 a { font-size: 13.5px; }
}
@media (min-width: 992px) and (max-width: 1400px) {
  /* the volunteer CTA also exists inside the menu - drop the button first */
  .main-header-one__bottom-right .btn-box1 { display: none; }
}
/* ---------- 17. Nav spacing re-balance ----------
   The dropdown chevron is absolutely positioned 7px OUTSIDE each item
   (li.dropdown:before { right: -7px }), so it lives in the inter-item gap.
   Section 16 over-tightened that gap and items looked glued together.
   Keep the collision fix via slimmer CTAs + the <1400px tier, but restore
   comfortable item spacing that accounts for the chevron overhang. */
.main-menu .main-menu__list > li + li,
.stricky-header .main-menu__list > li + li { margin-left: 26px; }

@media (max-width: 1600px) {
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li { margin-left: 20px; }
}
/* ---------- 18. Front: author / E-E-A-T box on blog posts ---------- */
.setu-author-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 34px 0 10px;
    padding: 22px 24px;
    background: #f7f9f8;
    border: 1px solid #e6ebe9;
    border-left: 4px solid #1b628c;
    border-radius: 10px;
}
.setu-author-box__avatar {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1b628c;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.setu-author-box__body { min-width: 0; }
.setu-author-box__label {
    margin: 0 0 2px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7c8a93;
}
.setu-author-box h4,
.setu-author-box .h4 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--rv-black, #10161a); }
.setu-author-box h4 a,
.setu-author-box .h4 a { color: #1b628c; }
.setu-author-box__bio { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #4a5860; }
.setu-author-box__meta { margin: 0; font-size: 13.5px; color: #7c8a93; }
@media (max-width: 575.98px) {
    .setu-author-box { flex-direction: column; gap: 12px; }
}
/* ---------- 19. SEO: page banner heading is now <h1> (was <h2>) ----------
   Every inner page previously had ZERO h1, which is a significant on-page SEO
   gap. The banner heading is now an h1; mirror the theme's h2 styling so the
   change is purely semantic and invisible to visitors. */
.page-header__inner h1 {
    color: #ffffff;
    font-weight: 700;
    font-size: 75px;
    line-height: 85px;
    margin-bottom: 0px;
}
@media (max-width: 991px) {
    .page-header__inner h1 { font-size: 50px; line-height: 60px; }
}
@media (max-width: 575px) {
    .page-header__inner h1 { font-size: 36px; line-height: 46px; }
}

/* ---------- 20. Slider: 2nd+ slide titles use h2 (single-h1 rule) ---------- */
.main-slider-one__content .title h2 {
  color: #ffffff;
  font-size: 90px;
  line-height: 1em;
  font-weight: 700;
}

/* ---------- 21. Editorial placeholders awaiting real Setu data ----------
   Marked spans in blog content where the writer needed a real figure. Styled
   to be unmissable so they are filled (or removed) before the post is promoted. */
mark[data-fill="true"] {
    background: #FFF3CD;
    color: #7A5B00;
    border: 1px dashed #D9A93C;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: .95em;
    font-style: italic;
}
mark[data-fill="true"]::before {
    content: "\270E\00a0";
    font-style: normal;
}

/* ---------- 22. Blog article: long-form reading layout ----------------------
   The template rendered a 2,700-word post at full container width, which is
   unreadable. Constrain the measure to ~68 characters, give the CMS-authored
   HTML real typography, and add reading affordances (progress, contents,
   share, related posts). */

/* Reading progress bar */
.setu-readbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 999;
    pointer-events: none;
}
.setu-readbar span {
    display: block;
    height: 100%;
    width: 0;
    background: #ffd146;
    transition: width .1s linear;
}

/* ---- Article shell ---- */
.setu-article { padding-top: 46px; padding-bottom: 70px; }
.setu-article .setu-article__hero,
.setu-article .setu-article__meta,
.setu-article .setu-toc,
.setu-article .setu-article__body,
.setu-article .setu-share,
.setu-article .setu-article__foot {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.setu-article__hero {
    margin: 0 0 26px;
    border-radius: 12px;
    overflow: hidden;
    max-width: 900px;
}
.setu-article__hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Meta strip ---- */
.setu-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding-bottom: 18px;
    margin-bottom: 26px;
    border-bottom: 1px solid #e7ebe9;
    font-size: 14.5px;
    color: #6d7a82;
}
.setu-article__meta-item { display: inline-flex; align-items: center; gap: 7px; }
.setu-article__meta-item span[class^="icon-"] { color: #1b628c; font-size: 15px; }
.setu-article__tag {
    margin-left: auto;
    background: #eaf2f7;
    color: #1b628c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
}

/* ---- Table of contents ---- */
.setu-toc {
    background: #f6f9f8;
    border: 1px solid #e3eae7;
    border-radius: 10px;
    padding: 20px 26px 18px;
    margin-bottom: 34px;
}
.setu-toc__title {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #6d7a82;
}
.setu-toc ol { margin: 0; padding-left: 20px; }
.setu-toc li { margin: 5px 0; line-height: 1.5; }
.setu-toc a { color: #234; font-size: 15.5px; text-decoration: none; }
.setu-toc a:hover { color: #1b628c; text-decoration: underline; }

/* ---- Article typography ---- */
.setu-article__body {
    font-size: 17.5px;
    line-height: 1.78;
    color: #2f3b42;
}
.setu-article__body > *:first-child { margin-top: 0; }
.setu-article__body p { margin: 0 0 1.35em; }
.setu-article__body p:first-of-type { font-size: 19px; line-height: 1.7; color: #253038; }

.setu-article__body h2 {
    font-size: 30px;
    line-height: 1.25;
    margin: 2em 0 .55em;
    scroll-margin-top: 100px;
}
.setu-article__body h3 {
    font-size: 22px;
    line-height: 1.3;
    margin: 1.7em 0 .5em;
    scroll-margin-top: 100px;
}
.setu-article__body h4 { font-size: 18.5px; margin: 1.5em 0 .45em; }

.setu-article__body ul,
.setu-article__body ol { margin: 0 0 1.35em; padding-left: 1.35em; }
.setu-article__body li { margin: .5em 0; }
.setu-article__body li::marker { color: #1b628c; }

.setu-article__body a {
    color: #1b628c;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.setu-article__body a:hover { color: #12475f; }

.setu-article__body blockquote {
    margin: 1.9em 0;
    padding: 4px 0 4px 26px;
    border-left: 4px solid #ffd146;
    font-size: 20px;
    line-height: 1.6;
    font-style: italic;
    color: #1f2a31;
}
.setu-article__body blockquote p:last-child { margin-bottom: 0; }

.setu-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1.6em 0;
}

/* Tables inside CMS content must never blow out the page */
.setu-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.7em 0;
    font-size: 15.5px;
    display: block;
    overflow-x: auto;
}
.setu-article__body table th,
.setu-article__body table td {
    border: 1px solid #e3eae7;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}
.setu-article__body table th { background: #f6f9f8; font-weight: 600; }

.setu-article__body hr { border: none; border-top: 1px solid #e7ebe9; margin: 2.2em 0; }

/* ---- Share row ---- */
.setu-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 40px auto 0;
    padding-top: 22px;
    border-top: 1px solid #e7ebe9;
}
.setu-share__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6d7a82;
    margin-right: 4px;
}
.setu-share__btn {
    font-size: 14px;
    font-weight: 600;
    color: #2f3b42;
    background: #f2f5f4;
    border: 1px solid #e3eae7;
    border-radius: 999px;
    padding: 6px 16px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.setu-share__btn:hover { background: #1b628c; border-color: #1b628c; color: #fff; }

/* ---- Support CTA ---- */
.setu-cta {
    max-width: 760px;
    margin: 40px auto 0;
    background: #1b628c;
    color: #fff;
    border-radius: 12px;
    padding: 30px 34px;
}
.setu-cta h3 { color: #fff; margin: 0 0 8px; font-size: 24px; }
.setu-cta p { margin: 0 0 18px; color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.65; }
.setu-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.setu-cta__link { color: #ffd146; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.setu-cta__link:hover { color: #fff; }

/* ---- Related posts ---- */
.setu-related { max-width: 1000px; margin: 56px auto 0; }
.setu-related h3 { font-size: 24px; margin: 0 0 20px; text-align: center; }
.setu-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.setu-related__card {
    display: block;
    background: #fff;
    border: 1px solid #e7ebe9;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.setu-related__card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,30,40,.10); }
.setu-related__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f1; }
.setu-related__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.setu-related__body { display: block; padding: 15px 18px 19px; }
.setu-related__date { display: block; font-size: 12.5px; color: #8b979e; margin-bottom: 5px; }
.setu-related__title { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.4; color: #23303a; }
.setu-related__card:hover .setu-related__title { color: #1b628c; }
.setu-related__all { text-align: center; margin-top: 26px; }
.setu-related__all a { color: #1b628c; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .setu-article { padding-top: 30px; }
    .setu-article__body { font-size: 16.5px; line-height: 1.72; }
    .setu-article__body p:first-of-type { font-size: 17.5px; }
    .setu-article__body h2 { font-size: 25px; }
    .setu-article__body h3 { font-size: 20px; }
    .setu-article__body blockquote { font-size: 18px; padding-left: 18px; }
    .setu-toc { padding: 16px 18px 14px; }
    .setu-cta { padding: 24px 22px; }
    .setu-article__tag { margin-left: 0; }
}


/* ---------- 23. Article side rails -----------------------------------------
   Constraining the article to a readable measure left large empty margins.
   Fill them with a sticky contents rail (left) and a browse sidebar (right),
   collapsing to a single column below 1200px. */

.setu-article__cols {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 300px;
    gap: 44px;
    align-items: start;
    max-width: 1300px;
    margin: 0 auto;
}
/* the centre column owns the reading measure now */
.setu-article .setu-article__main { max-width: 720px; margin: 0 auto; }
.setu-article .setu-article__meta,
.setu-article .setu-article__body,
.setu-article .setu-share,
.setu-article .setu-article__foot { max-width: none; }
.setu-article__wide { max-width: 1300px; margin: 0 auto; }

/* ---- Shared rail chrome ---- */
.setu-rail { position: sticky; top: 96px; font-size: 14.5px; }
.setu-rail__title {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8b979e;
}

/* ---- Left rail: contents ---- */
.setu-rail--left { padding-right: 4px; }
.setu-rail__toc ul { list-style: none; margin: 0 0 26px; padding: 0; border-left: 2px solid #e7ebe9; }
.setu-rail__toc li { margin: 0; }
.setu-rail__toc a {
    display: block;
    padding: 7px 0 7px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: #6d7a82;
    line-height: 1.4;
    font-size: 13.8px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.setu-rail__toc a:hover { color: #1b628c; }
.setu-rail__toc a.is-active {
    color: #1b628c;
    font-weight: 600;
    border-left-color: #ffd146;
}

/* ---- Left rail: share ---- */
.setu-rail__share { display: flex; flex-wrap: wrap; gap: 8px; }
.setu-rail__share .setu-rail__title { width: 100%; margin-bottom: 4px; }
.setu-rail__sharebtn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f2f5f4;
    border: 1px solid #e3eae7;
    color: #4a5860;
    font-size: 14px;
    transition: background .15s, color .15s, border-color .15s;
}
.setu-rail__sharebtn:hover { background: #1b628c; border-color: #1b628c; color: #fff; }

/* ---- Right rail widgets ---- */
.setu-rail__sticky { display: flex; flex-direction: column; gap: 26px; }
.setu-widget {
    background: #fff;
    border: 1px solid #e7ebe9;
    border-radius: 12px;
    padding: 20px 22px;
}
.setu-widget__title {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8b979e;
}

.setu-widget__search { display: flex; gap: 8px; }
.setu-widget__search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #dde4e1;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    outline: none;
}
.setu-widget__search input:focus { border-color: #1b628c; box-shadow: 0 0 0 3px rgba(27,98,140,.12); }
.setu-widget__search button {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #1b628c;
    color: #fff;
    cursor: pointer;
}
.setu-widget__search button:hover { background: #12475f; }

.setu-widget__cats { list-style: none; margin: 0; padding: 0; }
.setu-widget__cats li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f4f3;
    color: #3d4a52;
    font-size: 14.5px;
}
.setu-widget__cats li:last-child { border-bottom: none; }
.setu-widget__count {
    flex: 0 0 auto;
    background: #eef3f1;
    color: #6d7a82;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 600;
}

.setu-widget__posts { list-style: none; margin: 0; padding: 0; }
.setu-widget__posts li { border-bottom: 1px solid #f1f4f3; }
.setu-widget__posts li:last-child { border-bottom: none; }
.setu-widget__posts a {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    text-decoration: none;
    color: inherit;
}
.setu-widget__thumb {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef2f1;
}
.setu-widget__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.setu-widget__postmeta { display: block; min-width: 0; }
.setu-widget__posttitle {
    display: block;
    font-size: 14.2px;
    font-weight: 600;
    line-height: 1.4;
    color: #26333b;
}
.setu-widget__posts a:hover .setu-widget__posttitle { color: #1b628c; }
.setu-widget__postdate { display: block; font-size: 12px; color: #98a4ab; margin-top: 3px; }

.setu-widget--donate {
    background: #1b628c;
    border-color: #1b628c;
    color: #fff;
    text-align: left;
}
.setu-widget__donatelabel {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffd146;
}
.setu-widget--donate h4,
.setu-widget--donate .h4 { color: #fff; font-size: 17px; line-height: 1.45; margin: 0 0 16px; font-weight: 700; }
.setu-widget__donatebtn {
    display: inline-block;
    background: #ffd146;
    color: #1f2a31;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 999px;
    padding: 9px 22px;
    text-decoration: none;
}
.setu-widget__donatebtn:hover { background: #fff; color: #1b628c; }
.setu-widget__donatealt {
    display: block;
    margin-top: 12px;
    color: rgba(255,255,255,.85);
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.setu-widget__donatealt:hover { color: #ffd146; }

/* ---- Inline (mobile) contents ---- */
.setu-toc--inline {
    background: #f6f9f8;
    border: 1px solid #e3eae7;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 30px;
}
.setu-toc--inline summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #6d7a82;
}
.setu-toc--inline ol { margin: 12px 0 4px; padding-left: 20px; }
.setu-toc--inline li { margin: 5px 0; }
.setu-toc--inline a { color: #234; font-size: 15px; text-decoration: none; }
.setu-toc--inline a:hover { color: #1b628c; text-decoration: underline; }

/* ---- Responsive collapse ---- */
@media (max-width: 1399.98px) {
    .setu-article__cols { grid-template-columns: 180px minmax(0,1fr) 280px; gap: 34px; }
}
@media (max-width: 1199.98px) {
    .setu-article__cols { grid-template-columns: minmax(0,1fr) 290px; gap: 34px; }
    .setu-rail--left { display: none; }              /* inline <details> covers it */
}
@media (max-width: 991.98px) {
    .setu-article__cols { grid-template-columns: minmax(0,1fr); }
    .setu-rail--right { position: static; width: 100%; }
    .setu-rail__sticky { flex-direction: row; flex-wrap: wrap; }
    .setu-rail__sticky > .setu-widget { flex: 1 1 260px; }
}
@media (min-width: 1200px) {
    .setu-toc--inline { display: none; }             /* left rail is showing */
}

/* ---------- 24. Sticky rails fix + pagination design ------------------------
   ROOT CAUSE of the rails not sticking: the theme sets
       .page-wrapper { overflow: hidden; }
   Any ancestor with overflow other than 'visible' makes position:sticky inert,
   because it becomes the scroll container. 'clip' gives identical visual
   containment WITHOUT creating a scroll container, so sticky works again. */
.page-wrapper { overflow: clip; }

/* Sticky must sit on an inner wrapper, not on the grid item itself: the grid
   item needs to stretch the full row height so the sticky child has room to
   travel. (align-items:start collapsed it to content height before.) */
.setu-article__cols { align-items: stretch; }
.setu-rail { position: static; align-self: stretch; }
.setu-rail__sticky {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.setu-rail--left .setu-rail__sticky { padding-right: 6px; }
.setu-rail__sticky::-webkit-scrollbar { width: 4px; }
.setu-rail__sticky::-webkit-scrollbar-thumb { background: #d7dedb; border-radius: 4px; }
@media (max-width: 991.98px) {
    .setu-rail__sticky { position: static; max-height: none; overflow: visible; }
}

/* ---------- Blog pagination ---------- */
.blog-one .pagination,
.blog-details .pagination,
.setu-article .pagination { --bs-pagination-padding-x: 0; --bs-pagination-padding-y: 0; }

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pagination .page-item { margin: 0; }
.pagination .page-link {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e3eae7;
    border-radius: 10px;
    background: #fff;
    color: #3d4a52;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.pagination .page-link:hover {
    background: #f2f7f5;
    border-color: #1b628c;
    color: #1b628c;
    transform: translateY(-1px);
}
.pagination .page-link:focus { box-shadow: 0 0 0 3px rgba(27,98,140,.15); outline: none; }
.pagination .page-item.active .page-link {
    background: #1b628c;
    border-color: #1b628c;
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    background: #f7f9f8;
    border-color: #eef2f0;
    color: #b3bec4;
    cursor: not-allowed;
}
/* Laravel prints raw &laquo;/&raquo; entities - keep them from looking cramped */
.pagination .page-link[rel="prev"],
.pagination .page-link[rel="next"] { padding: 0 18px; }

/* The Bootstrap-5 paginator wraps everything in a flex nav; centre it and
   space the "Showing x to y" line properly. */
.blog-one nav[class*="d-flex"],
.setu-article nav[class*="d-flex"] { width: 100%; }
.blog-one .pagination + p,
.blog-one nav p.small { margin: 0; }
nav[class*="d-flex"] .small.text-muted {
    font-size: 13.5px;
    color: #8b979e !important;
}
@media (min-width: 576px) {
    nav[class*="d-flex"] > div:last-child { display: flex; justify-content: flex-end; }
}
/* ---------- 25. Responsive safety net for CMS-authored content --------------
   Content typed into the WYSIWYG can contain tables, embeds and images with
   hard-coded dimensions. These rules stop any of it from forcing horizontal
   page scroll on small screens, without the editor having to think about it. */

.blog-list__single-content-bottom,
.setu-article__body,
.entry,
.article-body {
    overflow-wrap: anywhere;       /* long URLs / unbroken strings */
}

/* Images: never exceed their column, ignore hard-coded width/height attrs */
.blog-list__single-content-bottom img,
.setu-article__body img,
.entry img {
    max-width: 100%;
    height: auto;
}

/* Embeds (YouTube, Google Maps): fluid width, sensible aspect instead of a
   fixed pixel height that letterboxes on phones. */
.blog-list__single-content-bottom iframe,
.setu-article__body iframe,
.entry iframe {
    max-width: 100%;
    border: 0;
}
.blog-list__single-content-bottom iframe[src*="youtube"],
.blog-list__single-content-bottom iframe[src*="youtu.be"],
.blog-list__single-content-bottom iframe[src*="vimeo"],
.setu-article__body iframe[src*="youtube"],
.setu-article__body iframe[src*="youtu.be"],
.setu-article__body iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
.blog-list__single-content-bottom iframe[src*="google.com/maps"],
.setu-article__body iframe[src*="google.com/maps"] {
    width: 100%;
    min-height: 320px;
}
@media (max-width: 575.98px) {
    .blog-list__single-content-bottom iframe[src*="google.com/maps"],
    .setu-article__body iframe[src*="google.com/maps"] { min-height: 260px; }
}

/* Contact-page map sits outside CMS content - keep it fluid too */
.contact-page iframe,
.google-map iframe,
section iframe[src*="google.com/maps"] { max-width: 100%; }

/* Any table the editor pasted without Bootstrap's .table-responsive wrapper
   still gets its own horizontal scroll rather than breaking the layout. */
.blog-list__single-content-bottom > table,
.entry > table,
.setu-article__body > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Global last-resort: nothing should ever push the page sideways */
html, body { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; }
/* ---------------------------------------------------------------------------
   Decorative "eyebrow" labels above section titles were marked up as <h6>
   sitting immediately after the page <h1>, which skipped h2-h5 and broke the
   document outline. They are now <p class="h6"> - visually identical, but no
   longer part of the heading hierarchy.
   --------------------------------------------------------------------------- */
.sec-title__tagline .h6 {
    color: var(--rv-base);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.1em;
    font-family: var(--rv-font-2);
    margin: 0;
}
@media only screen and (max-width: 767px) {
    .sec-title__tagline .h6 { font-size: 16px; }
}

/* Contact-detail values (email / phone) inside the icon cards were <h4>s that
   skipped from h2 straight to h4. They are <p class="h4"> now; these rules keep
   them looking exactly as before. Same for the header's contact strip, which
   already used a class instead of a heading tag. */
.contact-two__content-single .text-box .h4 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    color: var(--rv-black);
    margin: 0;
}
.contact-two__content-single .text-box .h4 a {
    color: var(--rv-black);
    transition: all 200ms linear;
    transition-delay: 0.1s;
}
.contact-two__content-single .text-box .h4 a:hover { color: var(--rv-base); }

.main-header__contact-info ul li .inner .text-box .h4 {
    color: var(--rv-black);
    font-family: var(--rv-font);
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    margin: 0;
}

/* ---------- 26. /our-story heading outline fix ----------
   Section headings were <h3> directly under the page <h1>, skipping a level.
   They are now <h2>, so they inherit whatever the theme gives .section-header
   .title - which is the same rule the old h3 matched. This block only guards
   against a stray browser default and keeps the two identical. */
.section-header h2.title {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0 0 15px;
}

/* ---------- 27. Project detail page: lead paragraph + impact stat cards -----
   Reuses the .setu-article / .setu-widget / .setu-cta component family built
   for blog reading (section 22-23) so project pages match that visual
   language. Admin-editable via short_description + stat1..3 on Portfolio. */
.setu-lead {
    font-size: 19px;
    line-height: 1.65;
    color: #4a5860;
    font-weight: 500;
    margin: 0 0 26px;
}

.setu-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 0 0 32px;
}
.setu-stats__item {
    background: #f6f9f8;
    border: 1px solid #e3eae7;
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
}
.setu-stats__value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #1b628c;
    line-height: 1.2;
}
.setu-stats__label {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    color: #6d7a82;
}

@media (max-width: 767.98px) {
    .setu-lead { font-size: 17.5px; }
    .setu-stats__value { font-size: 24px; }
}

/* ---------- 28. Projects listing: card grid (was a blog-style list) ---------
   A handful of flagship projects reads far better as a browsable card grid
   than a vertical list with a half-empty sidebar. */
.setu-projects { padding: 60px 0 80px; }
.setu-projects__intro {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: #4a5860;
}
.setu-projects__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}
.setu-projects__empty { text-align: center; color: #6d7a82; }

.setu-projects__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e7ebe9;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.setu-projects__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(20,30,40,.10);
    color: inherit;
}
.setu-projects__img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef2f1;
}
.setu-projects__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.setu-projects__card:hover .setu-projects__img img { transform: scale(1.05); }

.setu-projects__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 24px;
}
.setu-projects__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #23303a;
    margin: 0 0 10px;
}
.setu-projects__desc {
    font-size: 15px;
    line-height: 1.6;
    color: #5c6971;
    margin-bottom: 18px;
    flex: 1 1 auto;
}
.setu-projects__cta {
    font-size: 14.5px;
    font-weight: 600;
    color: #1b628c;
}
.setu-projects__cta span[class^="icon-"] { margin-left: 4px; transition: margin-left .15s ease; }
.setu-projects__card:hover .setu-projects__cta span[class^="icon-"] { margin-left: 8px; }

/* Wider CTA band variant for pages that don't run a 760px reading column */
.setu-cta--wide { max-width: 100%; margin-top: 56px; }

@media (max-width: 575.98px) {
    .setu-projects { padding: 40px 0 56px; }
    .setu-projects__intro { font-size: 16.5px; margin-bottom: 28px; }
}

/* ---------- 29. Homepage hero slider: fix text clipping + pre-JS flash ------
   The vendor theme hard-codes the hero to `height: 90vh` on both the
   background layer and the content box. That was fine for the original
   1-line taglines ("It Starts with one life!"), but a real multi-sentence
   description (this slide's actual admin-entered copy) needs more vertical
   room than 90vh minus ~470px of fixed padding leaves, so the paragraph was
   being clipped at the slide's bottom edge. min-height lets the slide grow
   to fit real content while still defaulting to the full 90vh look when the
   content is short. Never edit vendor CSS directly - override here instead. */
.main-slider-one .image-layer,
.main-slider-one__content {
    height: auto;
    min-height: 80vh;
}

/* Owl Carousel floats each slide and clears to the TALLEST one across the
   whole carousel (see .owl-stage:after{clear:both} in the vendor CSS) - that
   applies to every slide's wrapper regardless of which one is active, so one
   overly tall slide leaves blank space under every shorter one. Bringing the
   heading/padding/paragraph back down keeps every slide close to the same
   90vh floor instead of one slide ballooning past it. */
.main-slider-one__content {
    padding: 131px 0px 73px;
    width: 70%;
}
.main-slider-one__content .title h1 {
    font-size: 33px;
    line-height: 1.15;
}
.main-slider-one__content .title h2 {
    font-size: 20px;
    margin: 16px 0 0 0;
}
.main-slider-one__content .text p {
    /* Bounds the paragraph to 3 lines regardless of how much text an admin
       enters, so no single slide's height can run away from the others. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Owl Carousel is `display:none` until its JS finishes initialising (see
   owl.carousel.min.css), so on anything slower than an instant load the
   entire hero is a blank gap that then pops in all at once once JS is ready -
   that sudden pop is the "flicker" on load. Show the first slide immediately,
   fully visible (skip its entrance animation), so there is real hero content
   from first paint; these rules stop applying the moment Owl adds
   .owl-loaded and takes over normally. */
.main-slider-one .owl-carousel:not(.owl-loaded) {
    display: block;
}
.main-slider-one .owl-carousel:not(.owl-loaded) .main-slider-one__single:not(:first-child) {
    display: none;
}
.main-slider-one .owl-carousel:not(.owl-loaded) .main-slider-one__content .tagline,
.main-slider-one .owl-carousel:not(.owl-loaded) .main-slider-one__content .title,
.main-slider-one .owl-carousel:not(.owl-loaded) .main-slider-one__content .text,
.main-slider-one .owl-carousel:not(.owl-loaded) .main-slider-one__content .btn-box {
    opacity: 1;
    transform: none;
}
:root {
    --primary1: #235d8a;
    --primary1-deep: #12405f;
    --cream: #f6f2e9;
    --gold: #e3a256;
    --line: rgba(246, 242, 233, 0.18);
    --text-soft: rgba(246, 242, 233, 0.7);
  }

  .impact {
    background: linear-gradient(120deg, var(--primary1) 0%, var(--primary1-deep) 100%);
    color: var(--cream);
  }

  .impact__inner {
    /* max-width: 1240px; */
    /* margin: 0 auto; */
    padding: 18px 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
section.partner {
    background: #e1eff7;
    padding: 11px 0 50px 0;
    margin-top: 46px;
}
.impact-sec .about-one__img-inner img {
    height: 510px;
}

.impact__title {
    font-weight: 600;
    font-size: 20px;
    /* line-height: 1.3; */
    margin: 0;
    max-width: 13ch;
    flex-shrink: 0;
    border-right: 1px solid var(--line);
    padding-right: 20px;
    color: white;
}

  .impact__title span {
    display: block;
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-soft);
    margin-top: 6px;
  }

  .stat-row {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
  }

  .stat {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .impact.is-visible .stat {
    opacity: 1;
    transform: translateY(0);
  }

  .stat__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .stat__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  .stat__number {
    font-weight: 600;
    font-size: 18px;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
  .stat__label {
    font-size: 0.78rem;
    color: var(--text-soft);
    white-space: nowrap;
    margin-top: 2px;
  }

  @media (max-width: 1040px) {
    .impact__inner { flex-wrap: wrap; row-gap: 24px; padding: 28px 24px; }
    .impact__title { border-right: none; padding-right: 0; max-width: none; }
        .stat-row {
        flex-wrap: wrap;
        gap: 13px 6px;
        justify-content: flex-start;
    }
  }

  @media (max-width: 520px) {
    .stat__label { white-space: normal; max-width: 16ch; }
  }

  @media (prefers-reduced-motion: reduce) {
    .stat { transition: none; opacity: 1; transform: none; }
  }
   .feature-cards-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    width: 100%;
  }

  /* Base Card Styling - Fully Clickable */
  .feature-one__single {
    position: relative;
    border-radius: 20px;
    padding: 26px 22px 26px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px -4px rgba(30, 41, 59, 0.05),
                0 4px 10px -2px rgba(30, 41, 59, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.85);
    overflow: hidden;
  }

  .feature-one__single:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px -6px rgba(30, 41, 59, 0.13),
                0 8px 16px -4px rgba(30, 41, 59, 0.06);
  }

  /* Top Section: Category Label + 3D Icon Badge */
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  .category-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    padding-top: 4px;
    line-height: 1.3;
  }

  /* Circular 3D Floating Icon */
  .card-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    transition: transform 0.3s ease;
  }

  .feature-one__single:hover .card-icon-badge {
    transform: scale(1.08) rotate(4deg);
  }

  .card-icon-badge svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Content */
  .feature-one__single-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .feature-one__single-content h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    transition: color 0.2s ease;
  }

  .feature-one__single-content p {
    font-size: 0.87rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    font-weight: 500;
  }


  .card--donate {
    background: #fdf5e8;
    border-color: #fcebd2;
  }
  .card--donate .card-icon-badge {
    background: linear-gradient(135deg, #ff7a45 0%, #f95716 100%);
    box-shadow: 0 8px 18px rgba(249, 87, 22, 0.42);
  }
  .card--donate:hover h2 {
    color: #f95716;
  }

  /* 2. Volunteer (Lilac / Purple Theme) */
  .card--volunteer {
    background: #f6f0fd;
    border-color: #eee0fa;
  }
  .card--volunteer .card-icon-badge {
    background: linear-gradient(135deg, #b05af8 0%, #8b2df0 100%);
    box-shadow: 0 8px 18px rgba(139, 45, 240, 0.38);
  }
  .card--volunteer:hover h2 {
    color: #8b2df0;
  }

  /* 3. CSR Partnerships (Mint / Emerald Green Theme) */
  .card--csr {
    background: #edf9f1;
    border-color: #d7f2df;
  }
  .card--csr .card-icon-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 18px rgba(5, 150, 105, 0.4);
  }
  .card--csr:hover h2 {
    color: #059669;
  }

  /* 4. Sponsor a Child (Rose / Ruby Red Theme) */
  .card--sponsor {
    background: #fdf0f2;
    border-color: #f9d9df;
  }
  .card--sponsor .card-icon-badge {
    background: linear-gradient(135deg, #fb3b66 0%, #d8143f 100%);
    box-shadow: 0 8px 18px rgba(216, 20, 63, 0.38);
  }
  .card--sponsor:hover h2 {
    color: #d8143f;
  }

  /* 5. Skill Development (Soft Blue / Royal Indigo Theme) */
  .card--skills {
    background: #eff3fe;
    border-color: #dbe4fd;
  }
  .card--skills .card-icon-badge {
    background: linear-gradient(135deg, #4f68f7 0%, #3548dc 100%);
    box-shadow: 0 8px 18px rgba(53, 72, 220, 0.38);
  }
  .card--skills:hover h2 {
    color: #3548dc;
  }

  /* Responsive Breakpoints */
  @media (max-width: 1200px) {
    .feature-cards-row {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 820px) {
    .feature-cards-row {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 560px) {
    .feature-cards-row {
      grid-template-columns: 1fr;
    }
   
  }

@media only screen and (max-width: 767px) { 
  .main-slider-one__content {
      padding: 50px 0px 50px;
      width: 98%;
        min-height: auto;
  }
  .main-slider-one__content .btn-box {
      zoom: 61%;
  }
.stat {
    width: 48%;
}
.setu-cta {
    max-width: 100% !important;
}



















}