/*
 * Rewathi Innovations client-area theme
 * Hand-written stylesheet loaded AFTER the compiled huraga.css / vendor.css so it can
 * restyle Bootstrap 5 components to match https://rewathi.biz (src/app/globals.css).
 *
 * Bootstrap 5.3 splits its color system into two layers:
 *   1) root custom properties (--bs-primary-rgb, --bs-link-color, --bs-border-radius, ...)
 *      which many components (alerts, badges, utilities) read at runtime via var().
 *   2) component-scoped custom properties baked in at build time with literal hex
 *      (--bs-btn-bg on .btn-primary, --bs-pagination-active-bg, ...) which do NOT
 *      reference --bs-primary, so they are overridden per-component below.
 * Both layers are covered, for [data-bs-theme=light] and [data-bs-theme=dark].
 */

/* ---------------------------------------------------------------------------
   0. Fonts
--------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Geist:wght@400;500;600;700&display=swap");

:root {
  --rw-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rw-font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;

  --rw-ink: #0c1440;
  --rw-navy: #0a1235;
  --rw-night: #070d2b;
  --rw-muted: #566089;
  --rw-line: #e2e6f6;
  --rw-mist: #f3f5fd;
  --rw-blue: #2452f0;
  --rw-orange: #f26522;
  --rw-magenta: #e5357c;
  --rw-cyan: #1fc6e8;
  --rw-ok: #12b886;
  --rw-danger: #e0335f;
  --rw-grad-brand: linear-gradient(100deg, #f26522 0%, #e5357c 45%, #2452f0 100%);
  --rw-shadow-lift: 0 1px 2px rgb(12 20 64 / 0.06), 0 12px 32px -8px rgb(12 20 64 / 0.16);
  --rw-shadow-float: 0 2px 4px rgb(12 20 64 / 0.05), 0 28px 56px -16px rgb(12 20 64 / 0.3);
  --rw-radius-card: 1.5rem;
  --rw-radius-control: 0.9rem;
}

/* ---------------------------------------------------------------------------
   1. Bootstrap root variable overrides — LIGHT
--------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: var(--rw-font-sans);
  --bs-font-sans-serif: var(--rw-font-sans);
  --bs-border-radius: 0.9rem;
  --bs-border-radius-sm: 0.6rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-border-radius-2xl: 1.5rem;
  --bs-border-radius-pill: 999px;

  --bs-body-bg: #ffffff;
  --bs-body-color: var(--rw-ink);
  --bs-emphasis-color: var(--rw-ink);
  --bs-secondary-color: var(--rw-muted);
  --bs-secondary-bg: var(--rw-mist);
  --bs-tertiary-bg: var(--rw-mist);
  --bs-border-color: var(--rw-line);
  --bs-border-color-translucent: var(--rw-line);

  --bs-primary: var(--rw-blue);
  --bs-primary-rgb: 36, 82, 240;
  --bs-secondary: var(--rw-muted);
  --bs-secondary-rgb: 86, 96, 137;
  --bs-success: var(--rw-ok);
  --bs-success-rgb: 18, 184, 134;
  --bs-info: var(--rw-blue);
  --bs-info-rgb: 36, 82, 240;
  --bs-warning: var(--rw-orange);
  --bs-warning-rgb: 242, 101, 34;
  --bs-danger: var(--rw-danger);
  --bs-danger-rgb: 224, 51, 95;
  --bs-light: var(--rw-mist);
  --bs-dark: var(--rw-ink);

  --bs-link-color: var(--rw-blue);
  --bs-link-color-rgb: 36, 82, 240;
  --bs-link-hover-color: var(--rw-ink);
  --bs-link-hover-color-rgb: 12, 20, 64;

  --bs-list-group-active-bg: var(--rw-ink);
  --bs-list-group-active-border-color: var(--rw-ink);
  --bs-dropdown-link-active-bg: var(--rw-mist);
  --bs-dropdown-link-active-color: var(--rw-ink);
}

/* ---------------------------------------------------------------------------
   2. Bootstrap root variable overrides — DARK ("night")
--------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--rw-font-sans);
  --bs-font-sans-serif: var(--rw-font-sans);
  --bs-border-radius: 0.9rem;
  --bs-border-radius-sm: 0.6rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-border-radius-2xl: 1.5rem;
  --bs-border-radius-pill: 999px;

  color-scheme: dark;
  --bs-body-bg: var(--rw-night);
  --bs-body-bg-rgb: 7, 13, 43;
  --bs-body-color: #eef1ff;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: rgb(220 226 255 / 0.72);
  --bs-secondary-bg: #101a44;
  --bs-secondary-bg-rgb: 16, 26, 68;
  --bs-tertiary-bg: #0d1740;
  --bs-tertiary-bg-rgb: 13, 23, 64;
  --bs-border-color: rgb(255 255 255 / 0.14);
  --bs-border-color-translucent: rgb(255 255 255 / 0.14);
  --bs-heading-color: #ffffff;

  --bs-primary: #6f92ff;
  --bs-primary-rgb: 111, 146, 255;
  --bs-secondary: rgb(220 226 255 / 0.72);
  --bs-secondary-rgb: 220, 226, 255;
  --bs-success: #3ddba0;
  --bs-success-rgb: 61, 219, 160;
  --bs-info: #6f92ff;
  --bs-info-rgb: 111, 146, 255;
  --bs-warning: #ff9b6a;
  --bs-warning-rgb: 255, 155, 106;
  --bs-danger: #ff6b93;
  --bs-danger-rgb: 255, 107, 147;
  --bs-light: #101a44;
  --bs-dark: #eef1ff;

  --bs-link-color: #ff9b6a;
  --bs-link-color-rgb: 255, 155, 106;
  --bs-link-hover-color: #ffb98f;
  --bs-link-hover-color-rgb: 255, 185, 143;

  --bs-list-group-color: #eef1ff;
  --bs-list-group-bg: transparent;
  --bs-list-group-active-bg: #1a2560;
  --bs-list-group-active-border-color: #1a2560;
  --bs-dropdown-bg: #0d1740;
  --bs-dropdown-link-color: #eef1ff;
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: rgb(255 255 255 / 0.08);
  --bs-dropdown-link-active-bg: rgb(255 255 255 / 0.1);
  --bs-dropdown-link-active-color: #ffffff;
}

/* ---------------------------------------------------------------------------
   3. Base
--------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
body {
  font-size: 1rem;
  line-height: 1.6;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[data-bs-theme="dark"] body {
  background:
    radial-gradient(50rem 30rem at 100% 0%, rgb(36 82 240 / 0.22), transparent 60%),
    radial-gradient(40rem 26rem at 0% 100%, rgb(229 53 124 / 0.14), transparent 60%),
    var(--rw-night);
  background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--rw-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
::selection {
  background: var(--rw-orange);
  color: #fff;
}
:focus-visible {
  outline: 3px solid var(--rw-blue);
  outline-offset: 2px;
  border-radius: 6px;
}
[data-bs-theme="dark"] :focus-visible {
  outline-color: #ff9b6a;
}
a {
  text-decoration: none;
}
.small, small {
  color: var(--bs-secondary-color);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   4. Buttons
--------------------------------------------------------------------------- */
/* Matches src/app/globals.css .btn exactly: inline-flex + fixed height,
   not Bootstrap's inline-block + CSS-var padding, so panel buttons measure
   the same as the site's (height 3.25rem / 2.6rem for .btn-sm). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 3.25rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-radius: 999px !important;
  padding-inline: 1.6rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-lg, .btn-big {
  padding-inline: 1.75rem;
  height: 3.25rem;
}
.btn-sm {
  height: 2.6rem;
  padding-inline: 1.2rem;
  font-size: 0.95rem;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rw-orange);
  --bs-btn-border-color: var(--rw-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d8551a;
  --bs-btn-hover-border-color: #d8551a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c34a16;
  --bs-btn-active-border-color: #c34a16;
  --bs-btn-disabled-bg: var(--rw-orange);
  --bs-btn-disabled-border-color: var(--rw-orange);
  --bs-btn-focus-shadow-rgb: 242, 101, 34;
  background-image: linear-gradient(180deg, #ff7a3a 0%, var(--rw-orange) 100%);
  border: none;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 10px 22px -8px rgb(242 101 34 / 0.65);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 14px 26px -8px rgb(242 101 34 / 0.72);
}

.btn-outline-primary {
  --bs-btn-color: var(--rw-ink);
  --bs-btn-border-color: var(--rw-line);
  --bs-btn-hover-color: var(--rw-ink);
  --bs-btn-hover-bg: var(--rw-mist);
  --bs-btn-hover-border-color: var(--rw-ink);
  --bs-btn-active-color: var(--rw-ink);
  --bs-btn-active-bg: var(--rw-mist);
  --bs-btn-active-border-color: var(--rw-ink);
  --bs-btn-focus-shadow-rgb: 12, 20, 64;
  background: #fff;
  border-width: 1.5px;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgb(255 255 255 / 0.3);
  --bs-btn-hover-bg: rgb(255 255 255 / 0.1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.05);
}

.btn-dark {
  --bs-btn-bg: var(--rw-ink);
  --bs-btn-border-color: var(--rw-ink);
  --bs-btn-hover-bg: #1a2560;
  --bs-btn-hover-border-color: #1a2560;
  --bs-btn-active-bg: #1a2560;
  --bs-btn-active-border-color: #1a2560;
}

.btn-ghost {
  color: var(--rw-ink);
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--rw-line) inset;
}
.btn-ghost:hover {
  box-shadow: 0 0 0 1.5px var(--rw-ink) inset;
}
[data-bs-theme="dark"] .btn-ghost {
  color: #fff;
  background: rgb(255 255 255 / 0.06);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.28) inset;
}
[data-bs-theme="dark"] .btn-ghost:hover {
  background: rgb(255 255 255 / 0.14);
  box-shadow: 0 0 0 1.5px #fff inset;
}

.btn-secondary {
  --bs-btn-bg: var(--rw-muted);
  --bs-btn-border-color: var(--rw-muted);
  --bs-btn-hover-bg: #454e73;
  --bs-btn-hover-border-color: #454e73;
}

.btn-link {
  color: var(--rw-blue);
  font-family: var(--rw-font-display);
  font-weight: 600;
}
.btn-link:hover {
  color: var(--rw-ink);
}
[data-bs-theme="dark"] .btn-link:hover {
  color: #fff;
}

/* ---------------------------------------------------------------------------
   5. Cards, surfaces
--------------------------------------------------------------------------- */
.card {
  --bs-card-border-radius: var(--rw-radius-card);
  --bs-card-inner-border-radius: calc(var(--rw-radius-card) - 1px);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--rw-shadow-lift);
}
[data-bs-theme="dark"] .card {
  background-color: #0d1740;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -20px rgb(0 0 0 / 0.6);
}
.card-header {
  font-family: var(--rw-font-display);
  border-bottom: 1px solid var(--bs-border-color);
}
.card-header h1, .card-header h6 {
  font-family: var(--rw-font-display);
}

/* ---------------------------------------------------------------------------
   6. Forms
--------------------------------------------------------------------------- */
.form-label, label.form-label {
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.92rem;
}
.form-control, .form-select {
  border-radius: var(--rw-radius-control);
  border: 1.5px solid var(--bs-border-color);
  padding: 0.7rem 1rem;
  background-color: var(--bs-body-bg);
}
.form-control::placeholder {
  color: #9aa2c4;
}
.form-control:hover, .form-select:hover {
  border-color: #c5cbe6;
}
[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.form-control:focus, .form-select:focus {
  border-color: var(--rw-blue) !important;
  box-shadow: 0 0 0 4px rgb(36 82 240 / 0.15) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  box-shadow: 0 0 0 4px rgb(111 146 255 / 0.25) !important;
}
.form-check-input {
  border-color: var(--bs-border-color);
}
.form-check-input:checked {
  background-color: var(--rw-blue) !important;
  border-color: var(--rw-blue) !important;
}
.form-check-input:focus {
  border-color: var(--rw-blue) !important;
  box-shadow: 0 0 0 4px rgb(36 82 240 / 0.15) !important;
}
.btn-check:checked + .btn,
.btn-check:active + .btn {
  border-color: var(--rw-blue) !important;
  box-shadow: 0 0 0 2px rgb(36 82 240 / 0.25) inset;
}

/* ---------------------------------------------------------------------------
   7. Tables
--------------------------------------------------------------------------- */
.table {
  --bs-table-border-color: var(--bs-border-color);
}
.table > thead > tr > th {
  border-bottom-width: 1.5px;
  letter-spacing: 0.04em;
}
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-secondary-bg);
}
.table-scroll,
.card-body:has(> table:only-child),
.accordion-body:has(> table),
.accordion-inner:has(> table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
   8. Badges, alerts, pills
--------------------------------------------------------------------------- */
.badge {
  font-family: var(--rw-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.35em 0.75em;
}

.alert {
  border-radius: 1.1rem;
  border: 1px solid transparent;
}
.alert-info {
  --bs-alert-color: var(--rw-blue);
}
[data-bs-theme="dark"] .alert-info {
  --bs-alert-color: #cfe0ff;
}

/* ---------------------------------------------------------------------------
   9. Pagination, nav-pills, accordion, dropdown, list-group
--------------------------------------------------------------------------- */
.pagination {
  --bs-pagination-active-bg: var(--rw-ink);
  --bs-pagination-active-border-color: var(--rw-ink);
  --bs-pagination-hover-color: var(--rw-ink);
  --bs-pagination-focus-color: var(--rw-ink);
  --bs-pagination-focus-box-shadow: 0 0 0 4px rgb(36 82 240 / 0.15);
  --bs-pagination-border-radius: 999px;
}
.page-link {
  border-radius: 999px !important;
  margin-inline: 0.15rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
}
[data-bs-theme="dark"] .pagination {
  --bs-pagination-color: #eef1ff;
  --bs-pagination-bg: transparent;
  --bs-pagination-active-bg: #1a2560;
  --bs-pagination-active-border-color: #1a2560;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: rgb(255 255 255 / 0.08);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--rw-ink);
  --bs-nav-pills-border-radius: 999px;
}

.accordion-button:not(.collapsed) {
  color: var(--rw-blue);
  background-color: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  color: #ff9b6a;
}
.accordion-button:focus {
  box-shadow: 0 0 0 4px rgb(36 82 240 / 0.15);
}
.accordion-item {
  border-color: var(--bs-border-color);
}

/* Order flow "progress" now lives in the horizontal .rw-stepper (see the
   Order flow shell section below) — a purely presentational mirror of
   which #orderManager panel is open, per the WHMCS Standard Cart brief.
   The real accordion headers (data-bs-toggle, ids, collapse mechanics —
   untouched) are kept in the DOM for a11y and back-navigation, but shrunk
   to a quiet inline text link instead of a big numbered button, so the
   stepper reads as the one progress indicator on screen. */
#orderManager > .accordion-item {
  border: none;
  background: transparent;
}
#orderManager > .accordion-item > .accordion-header > .accordion-button {
  background: transparent;
  box-shadow: none;
  padding: 0.4rem 0;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--bs-secondary-color);
}
#orderManager > .accordion-item > .accordion-header > .accordion-button:not(.collapsed) {
  color: var(--rw-ink);
}
[data-bs-theme="dark"] #orderManager > .accordion-item > .accordion-header > .accordion-button:not(.collapsed) {
  color: #fff;
}
#orderManager > .accordion-item > .accordion-header > .accordion-button::after {
  display: none;
}
#orderManager > .accordion-item > .accordion-header > .accordion-button .icon:first-child {
  width: 0.9rem;
  height: 0.9rem;
}
.rw-step-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dropdown-menu {
  border-radius: 1rem;
  border-color: var(--bs-border-color);
  box-shadow: var(--rw-shadow-lift);
  padding: 0.5rem;
}
.dropdown-item {
  border-radius: 0.6rem;
  padding: 0.55rem 0.75rem;
}

.list-group-item.active {
  border-color: var(--bs-list-group-active-border-color);
}
.list-group-item-action:hover {
  background-color: var(--bs-secondary-bg);
}

.modal-content {
  border-radius: var(--rw-radius-card);
  border: none;
  box-shadow: var(--rw-shadow-float);
}
.modal-header {
  border-bottom-color: var(--bs-border-color);
}

.breadcrumb {
  font-size: 0.9rem;
}
.breadcrumb-item.active {
  color: var(--rw-ink);
  font-weight: 600;
}
[data-bs-theme="dark"] .breadcrumb-item.active {
  color: #fff;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-secondary-color);
}

.spinner-border.text-primary,
.spinner-border {
  color: var(--rw-orange);
}

/* A small quiet ghost circle, not a loud filled pill — shown only once the
   page has scrolled past 600px (assets/js/rewathi.js toggles .is-visible). */
.rw-back-to-top {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem !important;
  padding: 0 !important;
  border-radius: 999px;
  bottom: 5.5rem !important;
  z-index: 1020;
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--rw-shadow-lift);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
}
.rw-back-to-top .rw-back-to-top-label {
  display: none;
}
.rw-back-to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rw-back-to-top:hover {
  background: var(--bs-secondary-bg) !important;
  transform: translateY(-2px);
}

.toast {
  border-radius: 1rem;
  border: none;
  box-shadow: var(--rw-shadow-float);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--rw-line);
  border-radius: 999px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.16);
}

/* ---------------------------------------------------------------------------
   10. Layout shell — header / sidebar / footer
   Design review round 3: every shell piece now shares ONE container
   (.container-x, mirrors src/app/globals.css exactly: max-width 1240px,
   padding-inline 1.25rem / 2rem from 768px) so the logo/topbar/breadcrumb/
   footer all line up on the same left edge as the marketing site.
--------------------------------------------------------------------------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > .rw-page-wash,
.rw-public-wrap {
  flex: 1 0 auto;
}

.container-x {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .container-x {
    padding-inline: 2rem;
  }
}

.text-link {
  font-family: var(--rw-font-display);
  font-weight: 600;
  color: var(--rw-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.text-link:hover {
  text-decoration: underline;
}

/* Breakpoint utilities at 1024px — the header/nav/mega-menu breakpoint the
   site uses (Tailwind `lg`), distinct from Bootstrap's own 992px `lg` which
   the rest of the panel (sidebar, module markup) still uses untouched. */
.rw-desktop-only {
  display: none !important;
}
.rw-mobile-only {
  display: block;
}
@media (min-width: 1024px) {
  .rw-desktop-only {
    display: inline-flex !important;
  }
  nav.rw-desktop-only {
    display: flex !important;
  }
  .rw-mobile-only {
    display: none !important;
  }
}

/* Soft page-background wash --------------------------------------------------
   The site's gradient hero lives on the PAGE background, not the header —
   the header itself is transparent/white over it. Same low-opacity wash
   here, top 320px only, so the panel's white header feels continuous with
   the site's when a visitor crosses between them. Light mode only; dark
   pages already carry their own navy radial wash on <body>. */
.rw-page-wash {
  position: relative;
}
.rw-page-wash::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 320px;
  background:
    radial-gradient(60rem 34rem at 88% -8%, rgb(229 53 124 / 0.1), transparent 62%),
    radial-gradient(54rem 34rem at 62% 8%, rgb(36 82 240 / 0.09), transparent 60%),
    radial-gradient(44rem 26rem at 8% 0%, rgb(242 101 34 / 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.rw-page-wash > .container-x {
  position: relative;
  z-index: 1;
}
[data-bs-theme="dark"] .rw-page-wash::before {
  display: none;
}

/* Shell row (sidebar + content) ---------------------------------------------
   Bootstrap's .row/.col-* gutter system uses its own negative-margin/padding
   pair, independent of .container-x's padding — nesting it directly would
   leave the columns a few px off the container's true edge. Zero it out and
   use a plain gap instead, so col-9's content lines up with the header
   above it exactly. */
/* A real grid, not Bootstrap's percentage columns: col-3 (25%) + col-md-9
   (75%) plus any column-gap is more than 100%, so the content column wrapped
   underneath the sidebar. */
.rw-shell-row {
  margin-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.rw-shell-row > [class*="col-"] {
  padding-inline: 0;
  width: auto;
  max-width: none;
  flex: none;
  min-width: 0;
}
@media (min-width: 768px) {
  /* sidebar + content; the sidebar column is display:none below md */
  .rw-shell-row:has(> .col-3) {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
}

/* Top bar --------------------------------------------------------------------
   Mirrors src/components/site-topbar.tsx + promo-chip.tsx +
   currency-switcher.tsx class-for-class (.topbar, .promo-chip,
   .currency-switcher(--dark)). */
.topbar {
  height: 2.25rem; /* 36px */
  background: var(--rw-night);
  color: rgb(220 226 255 / 0.8);
  font-size: 0.8125rem; /* 13px */
}
@media (min-width: 768px) {
  .topbar {
    height: 2.5rem; /* 40px */
    font-size: 0.875rem; /* 14px */
  }
}
.rw-topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.rw-topbar-offer {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}
.rw-topbar-offer-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rw-topbar-offer-short {
  display: none;
}
@media (max-width: 639px) {
  .rw-topbar-offer-full {
    display: none;
  }
  .rw-topbar-offer-short {
    display: inline;
  }
}
.rw-topbar-right {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
}
.topbar-link {
  color: inherit;
  font-weight: 500;
  transition: color 0.15s ease;
}
.topbar-link:hover {
  color: #fff;
}
.topbar-email {
  color: inherit;
  font-weight: 500;
  display: none;
  transition: color 0.15s ease;
}
.topbar-email:hover {
  color: #fff;
}
@media (min-width: 768px) {
  .topbar-email {
    display: inline;
  }
}
/* phone only from 1024px (site: `hidden lg:inline`) */
.rw-topbar-phone {
  display: none;
}
@media (min-width: 1024px) {
  .rw-topbar-phone {
    display: inline;
  }
}
.rw-currency-fixed {
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-inline: 0.9rem;
  font-family: var(--rw-font-display);
  font-size: 0.92rem;
}
.topbar .currency-switcher {
  height: 1.9rem;
  padding-inline: 0.6rem 1.5rem;
}
.topbar .currency-switcher-chevron {
  right: 0.5rem;
}

/* Promo chip — src/components/promo-chip.tsx, `.promo-chip` in globals.css */
.promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  border: 1px dashed rgb(242 101 34 / 0.55);
  background: #fff3eb;
  color: #c14d13;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
  font-family: var(--rw-font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-width: 1px;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.promo-chip:hover {
  background: #ffe7d9;
}
.promo-chip .rw-promo-hint {
  display: none;
  font-weight: 400;
  opacity: 0.7;
}
.promo-chip.is-copied .rw-promo-hint {
  display: inline;
}
.promo-chip.is-copied .rw-copy-icon {
  display: none;
}
.promo-chip:not(.is-copied) .rw-check-icon {
  display: none;
}
.topbar .promo-chip {
  padding: 0.2rem 0.4rem 0.2rem 0.55rem;
  font-size: 0.76rem;
}

/* Currency switcher — src/components/currency-switcher.tsx, matches
   `.currency-switcher` / `.currency-switcher-select` / `-chevron` exactly.
   A real <select> for full keyboard/screen-reader support, chevron drawn
   as an overlaid, non-interactive SVG. */
.currency-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--bs-border-color);
  background: #fff;
  padding-inline: 0.9rem 1.9rem;
  gap: 0.4rem;
  transition: border-color 0.15s ease;
}
.currency-switcher:hover {
  border-color: #c5cbe6;
}
.currency-switcher:focus-within {
  border-color: var(--rw-blue);
  box-shadow: 0 0 0 4px rgb(36 82 240 / 0.15);
}
.currency-switcher-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--rw-ink);
  cursor: pointer;
}
.currency-switcher-select:focus {
  outline: none;
}
.currency-switcher-chevron {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
/* On a dark surface (top bar only — the main header never carries one). */
.currency-switcher--dark {
  border-color: rgb(255 255 255 / 0.22);
  background: transparent;
}
.currency-switcher--dark:hover {
  border-color: rgb(255 255 255 / 0.4);
}
.currency-switcher--dark .currency-switcher-select {
  color: #fff;
}
.currency-switcher--dark .currency-switcher-select option {
  color: var(--rw-ink);
}
.currency-switcher--dark .currency-switcher-chevron,
.currency-switcher--dark.rw-currency-fixed {
  color: rgb(220 226 255 / 0.8);
}
[data-bs-theme="dark"] .currency-switcher:not(.currency-switcher--dark) {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .currency-switcher:not(.currency-switcher--dark) .currency-switcher-select {
  color: #fff;
}

/* Language switcher — no equivalent on the (single-locale) marketing site;
   styled to match the currency-switcher pill for visual parity. TomSelect
   (huraga's own flag-enhanced dropdown) replaces the plain <select> at
   runtime, so this targets its generated wrapper too. */
.rw-lang-switcher {
  display: inline-flex;
  align-items: center;
}
.rw-lang-switcher .form-select,
.rw-lang-switcher .ts-wrapper {
  height: 2.6rem;
  border-radius: 999px !important;
  border: 1.5px solid var(--bs-border-color) !important;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.9rem !important;
  width: auto !important;
  min-width: 8rem;
  max-width: 10rem;
}
.rw-lang-switcher .ts-wrapper .ts-control {
  border-radius: 999px !important;
  min-height: 2.6rem !important;
  padding-inline: 0.9rem !important;
}
.rw-lang-switcher--dark .form-select,
.rw-lang-switcher--dark .ts-wrapper .ts-control {
  background-color: transparent !important;
  border-color: rgb(255 255 255 / 0.22) !important;
  color: #fff !important;
}
.topbar .rw-lang-switcher .form-select,
.topbar .rw-lang-switcher .ts-wrapper {
  height: 1.9rem;
  min-height: 1.9rem;
  font-size: 0.8rem !important;
  min-width: 6.5rem;
  max-width: 8rem;
}
.topbar .rw-lang-switcher .ts-wrapper .ts-control {
  min-height: 1.9rem !important;
  padding-inline: 0.6rem !important;
}
@media (max-width: 575px) {
  /* The full-screen mobile menu repeats the language switcher, so the
     cramped top bar only needs to keep the offer + currency legible. */
  .topbar .rw-lang-switcher {
    display: none;
  }
}

/* Header --------------------------------------------------------------------
   Mirrors src/components/site-header.tsx: 68px/76px height and the
   desktop/mobile split both switch at 1024px (not Bootstrap's 992px). The
   blur lives on .rw-header-bg, a sibling layer, never on <header> — a
   backdrop-filter on the header would make it the containing block for the
   fixed mobile menu and break full-screen positioning. */
.rw-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 68px;
}
@media (min-width: 1024px) {
  .rw-header {
    height: 76px;
  }
}
/* Solid at every scroll position (mirrors the website's header layer — its
   brand heroes are dark, so a transparent-at-top header made the ink nav
   text unreadable). Only the shadow fades in on scroll. */
.rw-header-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-bottom: 1px solid var(--bs-border-color);
  background: #fff;
  transition: box-shadow 0.2s ease;
}
.rw-header.is-scrolled .rw-header-bg,
.rw-header.is-menu-open .rw-header-bg {
  box-shadow: 0 8px 30px -18px rgb(12 20 64 / 0.35);
}
[data-bs-theme="dark"] .rw-header-bg {
  background: rgb(7 13 43 / 0.86);
}
.rw-header-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rw-logo {
  display: flex;
  align-items: center;
  flex: none;
}
.rw-logo img,
.rw-logo .rw-logo-img {
  height: 32px !important;
  width: auto;
}
@media (min-width: 1024px) {
  .rw-logo img,
  .rw-logo .rw-logo-img {
    height: 36px !important;
  }
}

.rw-nav {
  align-items: center;
}
.rw-nav > ul {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rw-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: rgb(12 20 64 / 0.75);
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
[data-bs-theme="dark"] .rw-nav-link {
  color: rgb(255 255 255 / 0.75);
}
.rw-nav-link:hover {
  background: var(--bs-secondary-bg);
  color: var(--rw-ink);
}
[data-bs-theme="dark"] .rw-nav-link:hover {
  color: #fff;
}
.rw-nav-link[aria-expanded="true"] {
  background: var(--rw-ink);
  color: #fff;
}
[data-bs-theme="dark"] .rw-nav-link[aria-expanded="true"] {
  background: #fff;
  color: var(--rw-ink);
}
.rw-caret {
  transition: transform 0.15s ease;
  flex: none;
}
.rw-nav-link[aria-expanded="true"] .rw-caret {
  transform: rotate(180deg);
}
.rw-login-link {
  font-family: var(--rw-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: rgb(12 20 64 / 0.75);
}
.rw-login-link:hover {
  color: var(--rw-ink);
}
[data-bs-theme="dark"] .rw-login-link {
  color: rgb(255 255 255 / 0.75);
}
[data-bs-theme="dark"] .rw-login-link:hover {
  color: #fff;
}

.rw-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}
.rw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--bs-body-color);
  flex: none;
}
.rw-icon-btn:hover {
  background: var(--bs-secondary-bg);
}
.rw-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Account menu (logged-in client) ------------------------------------------*/
.rw-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  border-radius: 999px;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bs-body-color);
}
.rw-account-toggle:hover {
  background: var(--bs-secondary-bg);
}
.rw-account-name {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .rw-account-name {
    display: none;
  }
}

/* Header: "Products" dropdown (+ nested "Domain" flyout) --------------------
   Shared 1:1 with the website (globals.css uses the same class names).
   Panel + flyout markup lives in a <template> inside the trigger's <li>
   (partial_site_header.html.twig) and is mounted into the DOM only while
   open (assets/js/rewathi.js, initNavDropdowns) — mirrors the site's
   conditional React render, so the collapsed trigger's accessible text is
   just "Products", not the whole menu, and no JS-driven positioning/portal
   is needed: the panel is plain `position: absolute` under its trigger. */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-dropdown-chevron {
  transition: transform 0.2s ease;
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 1035;
  min-width: 15rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 1.1rem;
  box-shadow: var(--rw-shadow-float);
}
[data-bs-theme="dark"] .nav-dropdown-panel {
  /* Same card colour as .dropdown-menu (--bs-dropdown-bg) — lighter than
     the page's --rw-night background wash, so the panel actually reads as
     a raised card instead of blending into the page. */
  background: var(--bs-dropdown-bg);
}
/* invisible bridge so the pointer can travel trigger -> panel without closing */
.nav-dropdown-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.7rem;
  height: 0.7rem;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-dropdown-panel {
    animation: nav-dropdown-open 0.16s ease both;
  }
}
@keyframes nav-dropdown-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.nav-dropdown-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rw-ink);
  white-space: nowrap;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
[data-bs-theme="dark"] .nav-dropdown-item {
  color: var(--bs-body-color);
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible,
.nav-dropdown-item[aria-current="page"] {
  background: var(--rw-mist);
  color: var(--rw-blue);
}
[data-bs-theme="dark"] .nav-dropdown-item:hover,
[data-bs-theme="dark"] .nav-dropdown-item:focus-visible,
[data-bs-theme="dark"] .nav-dropdown-item[aria-current="page"] {
  background: var(--bs-secondary-bg);
  color: #ff9b6a;
}
.nav-flyout {
  position: relative;
}
.nav-flyout-chevron {
  transform: rotate(-90deg);
  color: var(--bs-secondary-color);
}
.nav-flyout-panel {
  display: none;
  position: absolute;
  top: -0.5rem;
  left: calc(100% + 0.25rem);
  min-width: 13rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 1.1rem;
  box-shadow: var(--rw-shadow-float);
}
[data-bs-theme="dark"] .nav-flyout-panel {
  background: var(--bs-dropdown-bg);
}
/* bridge across the gap between the item and its flyout */
.nav-flyout-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.4rem;
  width: 0.4rem;
}
.nav-flyout:hover > .nav-flyout-panel,
.nav-flyout:focus-within > .nav-flyout-panel {
  display: block;
}
.nav-flyout:hover > .nav-flyout-trigger,
.nav-flyout:focus-within > .nav-flyout-trigger {
  background: var(--rw-mist);
  color: var(--rw-blue);
}
[data-bs-theme="dark"] .nav-flyout:hover > .nav-flyout-trigger,
[data-bs-theme="dark"] .nav-flyout:focus-within > .nav-flyout-trigger {
  background: var(--bs-secondary-bg);
  color: #ff9b6a;
}
.nav-mobile-kicker {
  padding-top: 0.5rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--rw-blue);
}
[data-bs-theme="dark"] .nav-mobile-kicker {
  color: #ff9b6a;
}

/* Full-screen mobile menu ----------------------------------------------------
   Fixed overlay, not a Bootstrap collapse, toggled by assets/js/rewathi.js.
   Mirrors the site's mobile nav (same 1024px breakpoint as the header) and
   `.cat-accordion` (mirrors `.faq`) for the Products accordion. */
.rw-mobile-menu {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 1020;
  background: var(--bs-body-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  .rw-mobile-menu {
    top: 76px;
  }
}
.rw-mobile-menu[hidden] {
  display: none;
}
.rw-mobile-menu-inner {
  padding: 1.25rem 1.25rem 3rem;
}
.cat-accordion summary {
  list-style: none;
  cursor: pointer;
}
.cat-accordion summary::-webkit-details-marker {
  display: none;
}
.rw-mobile-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color);
}
.cat-accordion[open] .rw-mobile-plus {
  transform: rotate(45deg);
}
.rw-mobile-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
  transition: transform 0.25s ease;
}
.cat-accordion > div {
  animation: rw-mobile-accordion-open 0.3s ease both;
}
@keyframes rw-mobile-accordion-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.rw-mobile-menu .nav-mobile-kicker {
  margin: 1rem 0 0.5rem;
}
.rw-mobile-product-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rw-mobile-product-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem;
  color: var(--bs-body-color);
  font-size: 1.02rem;
}
/* The "Domain" flyout's two links, indented under its kicker (mirrors the
   site's `<ul className="pl-4">` inside MobileNav's nested group). */
.rw-mobile-product-list--indent {
  padding-left: 1rem;
}
.rw-mobile-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rw-mobile-links li a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bs-body-color);
}
.rw-mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.rw-mobile-select-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.rw-mobile-select-wrap select {
  max-width: 11rem;
}

/* Sidebar / menu ----------------------------------------------------------*/
#sidebarMenu .nav-link,
.col-3 .nav-link {
  border-radius: 0.8rem;
  font-weight: 500;
  padding: 0.6rem 0.9rem;
}
#sidebarMenu .offcanvas-item,
.col-3 .offcanvas-item {
  border: none !important;
  /* Stock huraga.css paints a full-width background on the LI itself
     (.offcanvas-item.active) *and* our own pill sits on the <a> inside it —
     without this the active row shows two highlights (a full-width bar
     behind a rounded pill). One pill only. */
  background: transparent !important;
}
#sidebarMenu .offcanvas-item.active .nav-link,
.col-3 .offcanvas-item.active .nav-link,
#sidebarMenu .nav-item.active .nav-link,
.col-3 .nav-item.active .nav-link {
  background: var(--rw-ink);
  color: #fff !important;
  font-weight: 600;
}
[data-bs-theme="dark"] #sidebarMenu .offcanvas-item.active .nav-link,
[data-bs-theme="dark"] .col-3 .offcanvas-item.active .nav-link,
[data-bs-theme="dark"] #sidebarMenu .nav-item.active .nav-link,
[data-bs-theme="dark"] .col-3 .nav-item.active .nav-link {
  background: #ffffff;
  color: var(--rw-ink) !important;
}
#sidebarMenu .nav-link:hover,
.col-3 .nav-link:hover {
  background: var(--bs-secondary-bg);
}
#sidebarMenu .nav-link .icon,
.col-3 .nav-link .icon {
  color: var(--rw-blue);
}
#sidebarMenu .offcanvas-item.active .icon,
.col-3 .offcanvas-item.active .icon,
#sidebarMenu .nav-item.active .icon,
.col-3 .nav-item.active .icon {
  color: #fff;
}
[data-bs-theme="dark"] #sidebarMenu .offcanvas-item.active .icon,
[data-bs-theme="dark"] .col-3 .offcanvas-item.active .icon {
  color: var(--rw-ink);
}

/* Footer ---------------------------------------------------------------------
   Mirrors src/components/site-footer.tsx: an explicit 12-column CSS grid
   (brand block span 4, the four nav columns span 2 each), stacking only
   below 768px — not Bootstrap's .row/.col-lg-*, whose gutter math fought
   .container-x and collapsed to one column at any width. */
.rw-footer {
  margin-top: 3rem;
  background: var(--rw-navy);
  color: rgb(220 226 255 / 0.78);
}
.rw-footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem 1.25rem;
  padding-block: 4rem;
}
@media (min-width: 768px) {
  .rw-footer-grid {
    gap: 2rem;
  }
}
.rw-footer-col {
  grid-column: span 6;
}
.rw-footer-col.rw-footer-col--brand {
  grid-column: span 12;
}
@media (min-width: 768px) {
  .rw-footer-col {
    grid-column: span 2;
  }
  .rw-footer-col.rw-footer-col--brand {
    grid-column: span 4;
  }
}
/* The wordmark's "INNOVATIONS" text is navy — needs a light plate to read on
   the navy footer (same as .site-footer-logo-wrap on the website). */
.rw-footer-logo-wrap {
  display: inline-flex;
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.94);
  padding: 0.6rem 0.9rem;
}
.rw-footer-logo-wrap img {
  height: 2.25rem;
  width: auto;
}
.rw-footer .rw-tagline {
  max-width: 24rem;
  font-size: 0.98rem;
  color: rgb(220 226 255 / 0.68);
  margin-top: 1.25rem;
}
.rw-footer-heading {
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  margin: 0;
}
.rw-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.rw-footer-col ul li {
  margin: 0;
}
.rw-footer-col ul li a {
  color: rgb(220 226 255 / 0.72);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.rw-footer-col ul li a:hover {
  color: #fff;
}
.rw-footer-bottom {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-block: 1.5rem;
  font-size: 0.85rem;
  color: rgb(220 226 255 / 0.55);
}
.rw-footer-bottom a {
  color: inherit;
}
.rw-footer-bottom a:hover {
  color: #fff;
}
.rw-footer-email {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  text-decoration: none;
}
.rw-footer-email:hover {
  color: #fff;
  text-decoration: underline;
}
.rw-footer-select-wrap {
  display: block;
  margin-top: 1.5rem;
}
/* contact rows + social icons under the footer email (mirror .site-footer-contact/-social) */
.rw-footer-contact {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: rgb(220 226 255 / 0.72);
}
.rw-footer-contact a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.rw-footer-contact a:hover {
  color: #fff;
}
.rw-footer-social {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rw-footer-social a {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.18);
  color: rgb(220 226 255 / 0.8);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rw-footer-social a:hover {
  background: #fff;
  border-color: #fff;
  color: var(--rw-navy);
}

/* social icons sit in a row: .rw-footer-col ul (column) would otherwise win */
.rw-footer-col .rw-footer-social {
  flex-direction: row;
  gap: 0.5rem;
}

/* Live chat: WhatsApp floating button (mirror .chat-fab in globals.css).
   Bottom-LEFT: bottom-right is taken by the reCAPTCHA badge, the "to top"
   button and the tawk.to bubble when enabled. */
.chat-fab {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 1045;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3.25rem;
  padding: 0 1.1rem 0 0.75rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px rgb(37 211 102 / 0.7), var(--rw-shadow-lift, 0 10px 30px -12px rgb(12 20 64 / 0.25));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chat-fab[data-side="right"] {
  left: auto;
  right: 1.25rem;
}
.chat-fab:hover {
  transform: translateY(-2px);
  color: #fff;
}
.chat-fab-icon {
  height: 1.6rem;
  width: 1.6rem;
}
@media (max-width: 767px) {
  .chat-fab {
    width: 3.25rem;
    padding: 0;
    justify-content: center;
  }
  .chat-fab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Mobile off-canvas menu (desktop sidebar's own collapse, unrelated to the
   full-screen shell menu above) ----------------------------------------- */
.offcanvas {
  border: none;
}
[data-bs-theme="dark"] .offcanvas {
  background: var(--rw-night);
}

/* ---------------------------------------------------------------------------
   11. Order page — pricing cards (uHost "pricing table" template look,
   client addendum: gradient header block + white striped body + gradient
   footer CTA. Brand gradient (--rw-grad-brand: orange -> magenta -> blue)
   stands in for uHost's purple; the CTA stays theme orange, never uHost's
   green. Reference: scratchpad/uhost/pricing_0.png, hosting_0.png.)
--------------------------------------------------------------------------- */
/* Slim inline note (page header launch-offer line) — no longer a boxed
   pill banner; see partial referencing this class in mod_order_index. */
.rw-offer-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  color: var(--bs-secondary-color);
  font-size: 0.92rem;
  font-weight: 500;
}
.rw-offer-banner svg {
  color: var(--rw-orange);
  flex: none;
}

/* Category tabs — pill buttons, one category shown at a time via
   assets/js/rewathi.js (initCategoryTabs). Every panel starts visible with
   no `hidden` attribute baked into the markup, so a no-JS visitor always
   sees all of them. Base (horizontal, legacy) look kept for any remaining
   caller; the WHMCS-sidebar "Categories" card uses the --sidebar modifier
   below (uHost's rounded pill-switch look, stacked vertically). */
.rw-cat-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}
.rw-cat-tab {
  flex: none;
  border: 1.5px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rw-cat-tab:hover {
  border-color: var(--rw-ink);
}
.rw-cat-tab[aria-selected="true"] {
  background: var(--rw-ink);
  border-color: var(--rw-ink);
  color: #fff;
}
[data-bs-theme="dark"] .rw-cat-tab[aria-selected="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--rw-ink);
}
/* Sidebar "Categories" card — vertical pill list, full width of the card,
   active pill on the brand gradient (uHost's Monthly/Yearly pill-switch
   look, one column instead of a segmented pair). */
.rw-cat-tabs--sidebar {
  flex-direction: column;
  overflow: visible;
  gap: 0.35rem;
  padding-bottom: 0;
}
.rw-cat-tabs--sidebar .rw-cat-tab {
  width: 100%;
  text-align: left;
  border-color: transparent;
  background: transparent;
  padding: 0.6rem 0.9rem;
}
.rw-cat-tabs--sidebar .rw-cat-tab:hover {
  background: var(--bs-secondary-bg);
  border-color: transparent;
}
.rw-cat-tabs--sidebar .rw-cat-tab[aria-selected="true"] {
  background: var(--rw-grad-brand);
  border-color: transparent;
  box-shadow: var(--rw-shadow-lift);
}
[data-bs-theme="dark"] .rw-cat-tabs--sidebar .rw-cat-tab[aria-selected="true"] {
  background: var(--rw-grad-brand);
  color: #fff;
}

.rw-category {
  margin-bottom: 0.5rem;
}
.rw-category-desc {
  color: var(--bs-secondary-color);
  margin-bottom: 1.25rem;
}

.rw-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 640px) {
  .rw-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .rw-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Card shell — three stacked zones (header/body/footer) clipped to one
   rounded rect so the gradient fills reach the corners exactly like
   uHost's cards. */
.rw-price-card {
  position: relative;
  display: flex;
  height: 100%;
}
.rw-price-card .inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: var(--rw-radius-card);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  box-shadow: var(--rw-shadow-lift);
  color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rw-price-card:has(a:hover) .inner {
  transform: translateY(-3px);
  box-shadow: var(--rw-shadow-float);
}
.rw-price-card.is-featured {
  border-radius: calc(var(--rw-radius-card) + 2px);
  padding: 2px;
  background: var(--rw-grad-brand);
  box-shadow: var(--rw-shadow-float);
}
.rw-price-card.is-featured .inner {
  border: none;
  border-radius: calc(var(--rw-radius-card) + 2px - 2px);
}

/* Header zone — brand gradient, plan-name pill, "Start from" + big price,
   first-month promo (WP monthly only) all live on this dark surface. */
.rw-price-head {
  position: relative;
  padding: 1.65rem 1.5rem 1.4rem;
  background: var(--rw-grad-brand);
  color: #fff;
}
/* A flex row, not `.rw-price-flag` absolutely positioned over the pill —
   the product grid's 3-column breakpoint is a viewport (not container)
   query, so the same 1440px viewport can hand the featured card anywhere
   from ~420px (guest, no side menu) down to ~176px (logged-in client: site
   menu + this page's own sidebar both eating into the row). An absolutely
   positioned flag collided with the pill at the narrow end; wrapping lets
   it drop below instead. */
.rw-price-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.rw-price-flag {
  flex: none;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.7rem;
  color: var(--rw-ink);
  background: #fff;
  box-shadow: var(--rw-shadow-lift);
}
.rw-price-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.22);
  padding: 0.35rem 0.9rem;
  font-family: var(--rw-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.rw-price-startfrom {
  margin: 1rem 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.75);
}
.rw-price-blurb {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: var(--bs-secondary-color);
  min-height: 2.6rem;
}
.rw-price-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.rw-price-amount .value {
  font-family: var(--rw-font-display);
  font-weight: 700;
  font-size: 2.15rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.rw-price-amount .unit {
  color: rgb(255 255 255 / 0.8);
  font-size: 0.88rem;
}
.rw-price-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgb(255 255 255 / 0.85);
  margin-top: 0.55rem;
}
.rw-price-strike {
  text-decoration: line-through;
  text-decoration-color: rgb(255 255 255 / 0.55);
}
.rw-price-chip {
  margin-top: 0;
}
/* A dashed-orange chip reads as decoration-only against the gradient
   header — solid white surface keeps the copy-code affordance legible. */
.rw-price-head .promo-chip {
  background: #fff;
  border-color: #fff;
  color: #a8390f;
}
.rw-price-head .promo-chip:hover {
  background: #fff3eb;
}
.rw-price-yearly-note {
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.8);
  margin-top: 0.5rem;
}

/* Body zone — plain surface, striped feature rows (uHost look), green
   check-square bullets. */
.rw-price-body {
  flex: 1;
  padding: 1.25rem 1.5rem 0.25rem;
}
.rw-price-audience {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
.rw-price-features {
  list-style: none;
  padding: 0;
  margin: 0 -0.5rem;
  font-size: 0.92rem;
}
.rw-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.5rem;
  border-radius: 0.6rem;
}
.rw-price-features li:nth-child(odd) {
  background: var(--bs-secondary-bg);
}
/* Clamp to 6 bullets until the "Show all N features" toggle expands it. */
.rw-price-features[data-feature-clamp] li:nth-child(n + 7) {
  display: none;
}
.rw-price-features[data-feature-clamp].is-expanded li:nth-child(n + 7) {
  display: flex;
}
.rw-price-features-toggle {
  border: none;
  background: transparent;
  color: var(--rw-blue);
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0.5rem 0 0.75rem 0.5rem;
  padding: 0;
}
.rw-price-features-toggle:hover {
  text-decoration: underline;
}
[data-bs-theme="dark"] .rw-price-features-toggle {
  color: #ff9b6a;
}
.rw-price-features li::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  border-radius: 0.3rem;
  background: var(--rw-ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 65% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 65% no-repeat;
  background-color: var(--rw-ok);
}

/* Domain category card — TLD price table instead of feature rows. */
.rw-tld-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0.25rem 0 0.75rem;
}
.rw-tld-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  padding: 0 0.5rem 0.5rem;
}
.rw-tld-table td {
  padding: 0.55rem 0.5rem;
}
.rw-tld-table tbody tr:nth-child(odd) td {
  background: var(--bs-secondary-bg);
}
.rw-tld-table tbody tr:first-child td {
  border-top-left-radius: 0.6rem;
  border-bottom-left-radius: 0.6rem;
}
.rw-tld-table tbody tr:first-child td:last-child {
  border-top-right-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
}
.rw-tld-name {
  font-family: var(--rw-font-display);
  font-weight: 700;
}
.rw-tld-table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}
.rw-tld-more {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

/* Footer zone — brand gradient again, one centred CTA. */
.rw-price-foot {
  margin-top: auto;
  padding: 1.1rem 1.5rem 1.4rem;
  background: var(--rw-grad-brand);
}
.rw-price-cta {
  width: 100%;
  justify-content: center;
}

/* Servicehosting's stock order-form template (mod_servicehosting_order_form.html.twig,
   not owned by this theme) wraps the whole product-details block in a literal
   <h5 class="mb-1"> without closing it until after the billing row — invalid
   nesting that every theme inherits. Reset typography at the boundary we do
   control (.well, the outer wrapper product_details renders into) so that
   accidental heading inheritance never leaks bold display type onto plain
   copy, labels or list text; elements with their own heading rule (h3/h4/etc.)
   are unaffected since a same-specificity element selector still wins. */
.well {
  font-family: var(--rw-font-sans);
  font-weight: 400;
}

.rw-price-features--configure {
  border-top: none;
  padding-top: 0.25rem;
  margin: 0.75rem 0 1rem;
  max-width: 32rem;
}

.rw-period-toggle {
  display: inline-flex;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
  padding: 0.25rem;
  margin-bottom: 1.25rem;
  gap: 0.15rem;
}
.rw-period-toggle button {
  border: none;
  background: transparent;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  color: var(--bs-secondary-color);
  cursor: pointer;
}
.rw-period-toggle button.is-active {
  background: var(--bs-body-bg);
  color: var(--rw-ink);
  box-shadow: 0 2px 8px -2px rgb(12 20 64 / 0.25);
}
[data-bs-theme="dark"] .rw-period-toggle button.is-active {
  color: #fff;
}

.rw-public-back {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  background: var(--bs-body-bg);
}
.rw-public-back:hover {
  color: var(--rw-ink);
  border-color: var(--rw-ink);
}
[data-bs-theme="dark"] .rw-public-back:hover {
  color: #fff;
  border-color: #fff;
}
.rw-public-back svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}
@media (max-width: 480px) {
  .rw-public-back {
    padding: 0.55rem;
    border-radius: 999px;
  }
  .rw-public-back .rw-public-back-label {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   12. Auth pages (login / signup / password reset)
--------------------------------------------------------------------------- */
.page-login, .page-signup, .page-password-reset {
  background: #fff;
}
[data-bs-theme="dark"] .page-login,
[data-bs-theme="dark"] .page-signup,
[data-bs-theme="dark"] .page-password-reset {
  background: var(--rw-night);
}
.page-login .container.h-100,
.page-signup .container.h-100,
.page-password-reset .container.h-100 {
  min-height: 100vh;
  height: auto !important;
  padding-block: 2.5rem;
}
.page-login .row.h-75,
.page-signup .row.h-75,
.page-password-reset .row.h-75 {
  height: auto !important;
}
.page-login .card,
.page-signup .card,
.page-password-reset .card {
  border-radius: var(--rw-radius-card);
  box-shadow: var(--rw-shadow-float);
  border: 1px solid var(--bs-border-color);
}
.page-login .card-body,
.page-signup .card-body,
.page-password-reset .card-body {
  padding: 2.25rem;
}
.page-login h5, .page-signup h5, .page-password-reset h5 {
  font-family: var(--rw-font-display);
  font-size: 1.4rem !important;
}
/* The shared header already shows the logo — the stock Page module templates
   (mod_page_login / mod_page_signup, not owned by this theme) also print one
   above the card. Hide that duplicate rather than overriding two more module
   templates just to delete two lines each. */
.page-login .col-lg-4 > .d-flex.justify-content-center:first-child,
.page-signup .col-lg-4 > .d-flex.justify-content-center:first-child {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   13. Dashboard
--------------------------------------------------------------------------- */
.dashboard .card {
  height: 100%;
}
.dashboard .card-header {
  background: transparent;
}
/* Consistent 1.25rem grid gap everywhere — Bootstrap's .row relies on each
   .card's own .mb-4 for vertical spacing, which some browsers/contexts
   collapse to nothing between two full-width rows; row-gap is explicit and
   never depends on margin collapsing. */
.content-block .row {
  row-gap: 1.25rem;
}

/* Dark "night" surface — mirrors src/app/globals.css .night/.on-dark
   exactly, used for the dashboard welcome panel. */
.night {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50rem 30rem at 100% 0%, rgb(36 82 240 / 0.38), transparent 60%),
    radial-gradient(40rem 26rem at 0% 100%, rgb(229 53 124 / 0.2), transparent 60%),
    var(--rw-night);
  color: #fff;
}
.on-dark :focus-visible {
  outline-color: #fff;
}

.rw-welcome-panel {
  border-radius: var(--rw-radius-card);
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}
.rw-welcome-text {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
}
.rw-welcome-text p {
  margin: 0;
}
.rw-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.rw-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.5rem;
  color: var(--bs-secondary-color);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   14. Utility classes used by theme template overrides
--------------------------------------------------------------------------- */
.rw-redirect-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--bs-secondary-color);
}

.rw-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Shell sizing guard                                                  */
/* huraga makes <body> a flex column (sticky footer). As flex items    */
/* the top bar and header were being shrunk below their specified      */
/* heights (40px -> 30px, 76px -> 42px), which is what made the panel  */
/* shell look smaller than the website's. Never let them flex.         */
/* ------------------------------------------------------------------ */
.topbar,
.rw-header,
.rw-site-footer,
footer.rw-footer {
  flex: none;
}

/* Guests have no sidebar: let the order flow use the full container    */
/* (same left/right edges as the website) instead of a centred 9/12.    */
body:not(.rw-logged-in) .rw-shell-row > .col-md-9.mx-auto {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   15. Inner client-area pages — invoices, services, support, profile
--------------------------------------------------------------------------- */

/* Status pills --------------------------------------------------------------
   macro_functions.html.twig#status_badge emits <span class="badge bg-*">.
   Bootstrap's .badge defaults --bs-badge-color to #fff, which fails AA on a
   bg-warning (orange) chip. Every status everywhere in the panel (invoice,
   order, ticket, tx, client) goes through this one macro, so restyling the
   handful of bg-* variants here gives the whole app one shared pill look —
   light tint + saturated text at rest, translucent tint + token color in
   dark mode (already tuned for contrast in section 2). text-bg-* variants
   (used directly for tab counters / message-author chips) get the same
   treatment for visual consistency. */
.badge.bg-success, .badge.text-bg-success {
  background-color: #e3f9ef !important;
  color: #0d7a52 !important;
}
.badge.bg-warning, .badge.text-bg-warning {
  background-color: #fff1e6 !important;
  color: #a8390f !important;
}
.badge.bg-danger, .badge.text-bg-danger {
  background-color: #fdeaf0 !important;
  color: #b8123f !important;
}
.badge.bg-info, .badge.text-bg-info,
.badge.bg-primary, .badge.text-bg-primary {
  background-color: #e8edfd !important;
  color: #1638a8 !important;
}
.badge.bg-secondary, .badge.text-bg-secondary {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
}
[data-bs-theme="dark"] .badge.bg-success, [data-bs-theme="dark"] .badge.text-bg-success {
  background-color: rgb(61 219 160 / 0.16) !important;
  color: var(--bs-success) !important;
}
[data-bs-theme="dark"] .badge.bg-warning, [data-bs-theme="dark"] .badge.text-bg-warning {
  background-color: rgb(255 155 106 / 0.16) !important;
  color: var(--bs-warning) !important;
}
[data-bs-theme="dark"] .badge.bg-danger, [data-bs-theme="dark"] .badge.text-bg-danger {
  background-color: rgb(255 107 147 / 0.16) !important;
  color: var(--bs-danger) !important;
}
[data-bs-theme="dark"] .badge.bg-info, [data-bs-theme="dark"] .badge.text-bg-info,
[data-bs-theme="dark"] .badge.bg-primary, [data-bs-theme="dark"] .badge.text-bg-primary {
  background-color: rgb(111 146 255 / 0.16) !important;
  color: var(--bs-primary) !important;
}
[data-bs-theme="dark"] .badge.bg-secondary, [data-bs-theme="dark"] .badge.text-bg-secondary {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
}

/* Tabs-as-pills --------------------------------------------------------------
   Shared by the invoice list (Unpaid/Paid), client profile (Details/Password/
   API Key/Currency) and the hosting service manage panel (Details/Password/
   Domain/Username) — all plain Bootstrap `.nav-tabs`, three different
   template owners, one rule. */
.nav-tabs {
  border-bottom: none;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
  border: 1.5px solid transparent;
  border-radius: 999px !important;
  color: var(--bs-secondary-color);
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 1.1rem;
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-item .nav-link:hover {
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  isolation: isolate;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item .nav-link.active {
  background: var(--rw-ink) !important;
  border-color: var(--rw-ink) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-item .nav-link.active {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--rw-ink) !important;
}
.card-header-tabs {
  margin: 0;
}

/* Tables inside cards — every module table already renders inside a
   `.table-responsive` (or, for the couple that don't, the section 7 fallback
   `.card-body:has(> table:only-child)` still kicks in), so horizontal
   scrolling on narrow screens never overflows the page. This just adds
   breathing room + a quiet header so the tables read as one family. */
.table > :not(caption) > * > td,
.table > :not(caption) > * > th {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}
.table > thead > tr > th {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  background: transparent;
}
.table-bordered {
  border-color: var(--bs-border-color);
}
.table-bordered > :not(caption) > * {
  border-width: 0 0 1px;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px;
}

/* Invoice number as link, quiet "View/PDF", clear orange "Pay now" -------- */
.rw-invoice-link {
  font-family: var(--rw-font-display);
  font-weight: 600;
  color: var(--bs-body-color);
}
.rw-invoice-link:hover {
  color: var(--rw-blue);
}
.rw-amount-cell {
  font-family: var(--rw-font-display);
  font-weight: 600;
  white-space: nowrap;
}

/* Payment-gateway radio cards (invoice single page) ----------------------- */
.invoice-gateway {
  border: 1.5px solid var(--bs-border-color);
  border-radius: var(--rw-radius-control);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.invoice-gateway:hover {
  border-color: #c5cbe6;
}
[data-bs-theme="dark"] .invoice-gateway:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.invoice-gateway:has(.btn-check:checked) {
  border-color: var(--rw-blue);
  box-shadow: 0 0 0 3px rgb(36 82 240 / 0.15);
}
.invoice-gateway .btn {
  height: auto !important;
  border-radius: 0.6rem !important;
}

/* Invoice header block ----------------------------------------------------- */
.rw-invoice-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.rw-invoice-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.rw-invoice-total {
  font-family: var(--rw-font-display);
  font-weight: 700;
  font-size: 1.5rem;
}

/* Company / client "quiet" detail wells ------------------------------------- */
.well {
  background: var(--bs-secondary-bg);
  border-radius: var(--rw-radius-control);
  padding: 1.1rem 1.25rem;
}
.well dt {
  font-size: 0.8rem;
}
.well dd {
  margin-bottom: 0.4rem;
}

/* Tidy definition list for hosting service details -------------------------- */
.rw-service-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.5rem;
  margin: 0;
}
.rw-service-dl dt {
  color: var(--bs-secondary-color);
  font-weight: 500;
  white-space: nowrap;
}
.rw-service-dl dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .rw-service-dl {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }
  .rw-service-dl dd {
    margin-bottom: 0.5rem;
  }
}

/* Support ticket message bubbles -------------------------------------------- */
.rw-message.card {
  border-radius: 1.1rem;
  border-width: 1.5px;
}
.rw-message.rw-message--staff {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .rw-message.rw-message--staff {
  background: rgb(111 146 255 / 0.08);
  border-color: rgb(111 146 255 / 0.3);
}
.rw-message--staff .card-header {
  background: transparent;
}

/* Client profile avatar block — quieter, smaller, left-aligned -------------- */
.rw-profile-avatar {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start !important;
}
.rw-profile-avatar .img-thumbnail {
  width: 56px !important;
  height: 56px !important;
  padding: 2px;
}
.rw-profile-avatar-hint {
  color: var(--bs-secondary-color);
  font-size: 0.86rem;
}

/* Global: any leftover un-wrapped tables still scroll instead of blowing out
   the viewport on small screens. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ */
/* Secondary action buttons (order manage page: Open Ticket / Request  */
/* Cancellation etc.). Bootstrap's info/success/danger fills are off   */
/* brand; keep the meaning, drop the colour. Only .btn-primary is      */
/* orange. Danger stays recognisable as a quiet red outline.           */
/* ------------------------------------------------------------------ */
.btn-info,
.btn-success,
.btn-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-color: var(--rw-ink);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--rw-ink);
  --bs-btn-hover-color: var(--rw-ink);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-color: var(--rw-ink);
}
.btn-danger {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #e5357c;
  --bs-btn-color: #b8225f;
  --bs-btn-hover-bg: #e5357c;
  --bs-btn-hover-border-color: #e5357c;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #e5357c;
  --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-info,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgb(255 255 255 / 0.28);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #fff;
}
[data-bs-theme="dark"] .btn-danger {
  --bs-btn-color: #ff7fb0;
}

/* ---------------------------------------------------------------------------
   16. Order flow shell — WHMCS "Standard Cart" layout: page header, full-
   width sidebar + product-grid, horizontal stepper, sticky order summary.
   Scoped to `.rw-order-shell` (mod_orderbutton_content.html.twig) so it
   never leaks onto unrelated accordions elsewhere in the panel.
--------------------------------------------------------------------------- */
.rw-order-shell {
  padding-block: 1.5rem 3rem;
}
.rw-order-header {
  margin-bottom: 1.75rem;
}
.rw-order-header h1 {
  margin-bottom: 0.4rem;
}
.rw-order-subtitle {
  color: var(--bs-secondary-color);
  font-size: 1.02rem;
  max-width: 42rem;
  margin-bottom: 0.9rem;
}

/* Stepper — "1 Choose plan -> 2 Configure -> 3 Log in / register ->
   4 Review cart -> 5 Payment". Purely presentational; assets/js/rewathi.js
   (initOrderFlow) toggles .is-current / .is-done by listening for Bootstrap
   `shown.bs.collapse` on #orderManager, so it always mirrors whichever
   accordion panel is really open — it never drives navigation itself. */
.rw-stepper {
  margin-bottom: 1.75rem;
}
.rw-stepper-list {
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rw-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  min-width: 0;
}
.rw-step::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--bs-border-color);
  z-index: 0;
}
.rw-step:first-child::before {
  display: none;
}
.rw-step.is-done::before {
  background: var(--rw-ink);
}
[data-bs-theme="dark"] .rw-step.is-done::before {
  background: #fff;
}
.rw-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 999px;
  background: var(--bs-body-bg);
  border: 1.5px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-family: var(--rw-font-display);
  font-weight: 700;
  font-size: 0.92rem;
}
.rw-step-num svg {
  width: 1.05rem;
  height: 1.05rem;
}
.rw-step-text {
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
  padding-inline: 0.25rem;
}
.rw-step.is-current .rw-step-num {
  background: var(--rw-ink);
  border-color: var(--rw-ink);
  color: #fff;
  box-shadow: 0 0 0 4px rgb(12 20 64 / 0.12);
}
[data-bs-theme="dark"] .rw-step.is-current .rw-step-num {
  background: #fff;
  border-color: #fff;
  color: var(--rw-ink);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.16);
}
.rw-step.is-current .rw-step-text {
  color: var(--bs-body-color);
}
.rw-step.is-done .rw-step-num {
  background: var(--rw-ok);
  border-color: var(--rw-ok);
  color: #fff;
}
.rw-stepper-list {
  display: flex;
}
.rw-stepper-compact {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--bs-body-color);
  padding: 0.7rem 1rem;
  border-radius: var(--rw-radius-control);
  background: var(--bs-secondary-bg);
}
@media (max-width: 767px) {
  .rw-stepper-list {
    display: none;
  }
  .rw-stepper-compact {
    display: flex;
  }
}

/* Two-column grid: ~260px sidebar + product grid / order form. Stacks
   above (sidebar first) below 992px per brief. */
.rw-order-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 992px) {
  .rw-order-grid {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}
.rw-order-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
@media (min-width: 992px) {
  .rw-order-sidebar {
    position: sticky;
    top: 1.5rem;
  }
}
.rw-order-main {
  min-width: 0;
}

.rw-sidebar-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--rw-radius-card);
  background: var(--bs-body-bg);
  box-shadow: var(--rw-shadow-lift);
  padding: 1.1rem 1.15rem;
}
.rw-sidebar-card-title {
  font-family: var(--rw-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  margin: 0 0 0.75rem;
}

.rw-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.rw-sidebar-action-row {
  display: flex;
  align-items: center;
}
.rw-sidebar-action-row .currency-switcher,
.rw-sidebar-action-row .currency-switcher-select {
  width: 100%;
}
.rw-sidebar-action-row .currency-switcher {
  justify-content: space-between;
}
.rw-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border-radius: var(--rw-radius-control);
  padding: 0.65rem 0.85rem;
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bs-body-color);
  border: 1.5px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.rw-sidebar-link:hover {
  border-color: var(--rw-ink);
}
.rw-sidebar-link .icon {
  color: var(--rw-blue);
  flex: none;
}
.rw-sidebar-link .badge {
  flex: none;
}

/* Order summary card (configure step + cart/checkout step) — WHMCS-style
   sticky sidebar. `[data-order-step]` visibility is toggled by
   initOrderFlow(); the cart-step contents are the REAL promo/totals/
   checkout <form> physically moved in from mod_orderbutton_checkout.html.twig
   (#rw-cart-summary-portal) by the same script, so every id, form action and
   fb_api_form hook stays exactly as the Orderbutton module wired it. */
.rw-order-summary .rw-sidebar-card-title {
  margin-bottom: 0.9rem;
}
.rw-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.4rem;
  font-size: 0.92rem;
}
.rw-summary-row + .rw-summary-row {
  border-top: 1px dashed var(--bs-border-color);
}
.rw-summary-row dt {
  color: var(--bs-secondary-color);
  font-weight: 500;
}
.rw-summary-row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.rw-summary-price-block {
  margin: 0.5rem 0 0.9rem;
}
.rw-summary-price {
  font-family: var(--rw-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.rw-summary-price-note {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
  margin-top: 0.25rem;
}
.rw-summary-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  border-radius: var(--rw-radius-control);
  background: var(--bs-secondary-bg);
  padding: 0.75rem 0.9rem;
  font-size: 0.84rem;
  color: var(--bs-body-color);
  margin: 0.75rem 0 1rem;
}
.rw-summary-note svg {
  color: var(--rw-orange);
  flex: none;
  margin-top: 0.1rem;
}
.rw-order-summary .btn {
  width: 100%;
  justify-content: center;
}
#rw-cart-summary-portal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#rw-cart-summary-portal .table {
  font-size: 0.88rem;
}

/* Billing-cycle radio cards (configure step) — replaces the stock
   <select name="period">. Real radios (name="period" still submits with
   the form), just styled as cards; assets/js/rewathi.js only reads their
   data-* to keep the order-summary price in sync, it never drives them. */
.rw-period-cards {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.5rem 0 1.25rem;
  max-width: 28rem;
}
.rw-period-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  border: 1.5px solid var(--bs-border-color);
  border-radius: var(--rw-radius-control);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rw-period-card:hover {
  border-color: #c5cbe6;
}
.rw-period-card-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.rw-period-card:has(.rw-period-card-input:checked) {
  border-color: var(--rw-blue);
  box-shadow: 0 0 0 3px rgb(36 82 240 / 0.15);
}
.rw-period-card:has(.rw-period-card-input:focus-visible) {
  outline: 3px solid var(--rw-blue);
  outline-offset: 2px;
}
.rw-period-card-radio {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--bs-border-color);
  display: grid;
  place-items: center;
}
.rw-period-card:has(.rw-period-card-input:checked) .rw-period-card-radio {
  border-color: var(--rw-blue);
}
.rw-period-card:has(.rw-period-card-input:checked) .rw-period-card-radio::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--rw-blue);
}
.rw-period-card-label {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  min-width: 9rem;
}
.rw-period-card-name {
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 0.94rem;
}
.rw-period-card-save {
  flex: none;
}
.rw-period-card-price {
  flex: none;
  text-align: right;
  font-family: var(--rw-font-display);
  font-weight: 700;
  font-size: 1.02rem;
}
.rw-period-card-price small {
  display: block;
  font-family: var(--rw-font-sans);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
}
/* Below ~340px of card width (a 390px viewport, minus padding) "Every
   Month" + the "first month promo" badge no longer leave room for the
   price on the same line — drop the price to its own full-width row
   instead of letting it overlap the badge. */
@media (max-width: 480px) {
  .rw-period-card-price {
    flex: 1 1 100%;
    text-align: left;
    padding-left: calc(1.15rem + 0.65rem);
  }
}

/* The configure form's own submit button stays in the DOM (same
   id="config-next", same cart/add_item hook) but the sidebar's "Continue"
   button submits the identical <form> via form="rw-configure-form" — hide
   the in-form one so only one primary button shows on screen. */
.rw-order-shell #config-next {
  display: none;
}

/* Empty state — a category left with zero visible products never renders
   (guards a stale/looped-back category slug and a between-restock gap
   alike); the whole shell degrades to a friendly notice instead of a bare
   sidebar next to nothing. */
.rw-order-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 2rem 0.25rem;
  color: var(--bs-secondary-color);
}