/* ============================================================
   RELAISE — relaise.css v2.0
   Navy #000066  ·  Orange #ec7211
   Based on Six (Bootstrap 3) — loads after all.min.css
   ============================================================ */

/* Prevent horizontal page scroll — the wider containers below can
   overflow at in-between viewport widths without this safety net. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Wider content column on desktop — overrides Bootstrap's default
   1170px .container at the ≥1200px breakpoint. Logged-in users get
   an even wider 1500px column since the right sidebar is gone and
   there's more room to use; guests keep 1370px. */
@media (min-width: 1200px) {
  .container { width: 1370px !important; max-width: 100%; }
  body.re-loggedin .container { width: 1500px !important; max-width: 100%; }
}

:root {
  --re-navy:     #000066;
  --re-navy-d:   #00004d;
  --re-navy-f:   rgba(0,0,102,.07);
  --re-navy-r:   rgba(0,0,102,.15);
  --re-orange:   #ec7211;
  --re-orange-d: #d4650f;
  --re-orange-f: rgba(236,114,17,.10);
  --re-orange-r: rgba(236,114,17,.22);

  --re-ink:  #0a0d1a;
  --re-ink2: #4a4e6a;
  --re-ink3: #7a7e9a;
  --re-bg:   #ffffff;
  --re-bg2:  #f5f6fb;
  --re-bg3:  #ecedf5;
  --re-bdr:  rgba(0,0,102,.09);
  --re-bdr2: rgba(0,0,102,.18);
  --re-t: .18s;
}

/* ─── BODY ────────────────────────────────────────────────── */
body.relaise-theme {
  font-family: 'Inter','Open Sans',Verdana,sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background-color: var(--re-bg2) !important;
  color: var(--re-ink) !important;
}

/* ═══════════════════════════════════════════════════════════
   DOMAIN SEARCH / TRANSFER / WHOIS — redesigned widget
   Sits directly under the hero, guest homepage only.
═══════════════════════════════════════════════════════════ */

.re-domain-section { padding: 64px 0 72px; background: var(--re-bg2); }
.re-domain-inner { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.re-domain-heading { text-align: center; margin-bottom: 28px; }
.re-domain-heading .rh-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--re-navy); background: var(--re-navy-f); border: 1px solid var(--re-navy-r);
  padding: 6px 14px; border-radius: 50px; margin-bottom: 16px;
}
.re-domain-heading .rh-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--re-orange); }
.re-domain-heading h2 { font-size: 27px; font-weight: 800; color: var(--re-ink); margin: 0 0 8px; letter-spacing: -.01em; }
.re-domain-heading p { font-size: 14.5px; color: var(--re-ink3); margin: 0 auto; max-width: 480px; }

.re-domain-card {
  max-width: 780px; margin: 0 auto;
  background: #fff; border: 1px solid var(--re-bdr); border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,102,.08);
  overflow: hidden;
}

/* Tabs */
.re-domain-tabs { display: flex; border-bottom: 1px solid var(--re-bdr); background: var(--re-bg2); }
.re-dtab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 15px 12px; border: none; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--re-ink3);
  cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--re-t), background var(--re-t);
}
.re-dtab i { font-size: 12.5px; }
.re-dtab:hover { color: var(--re-ink); background: rgba(255,255,255,.6); }
.re-dtab.active { color: var(--re-navy); background: #fff; border-bottom-color: var(--re-orange); font-weight: 700; }

/* Panels */
.re-dpanel { display: none; padding: 28px 28px 30px; }
.re-dpanel.active { display: block; }
.re-dpanel-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--re-ink3); margin: 0 0 16px;
}
.re-dpanel-note i { color: var(--re-orange); }

/* Form */
.re-domain-form {
  display: flex; align-items: stretch; gap: 0;
  border: 1.5px solid var(--re-bdr2); border-radius: 12px;
  overflow: hidden; background: #fff;
  transition: border-color var(--re-t), box-shadow var(--re-t);
}
.re-domain-form:focus-within { border-color: var(--re-navy); box-shadow: 0 0 0 3px var(--re-navy-f); }
.re-domain-form-ico {
  display: flex; align-items: center; padding: 0 14px;
  color: var(--re-ink3); font-size: 14px; background: var(--re-bg2);
  border-right: 1px solid var(--re-bdr);
}
.re-domain-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: 14px 12px; font-size: 15px; color: var(--re-ink); font-family: inherit;
}
.re-tld-select {
  border: none; border-left: 1px solid var(--re-bdr); background: transparent;
  padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--re-ink2);
  outline: none; font-family: inherit; max-width: 165px;
}
.re-domain-btn {
  display: inline-flex; align-items: center; gap: 8px; border: none;
  padding: 0 22px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: background var(--re-t);
}
.re-domain-btn-primary { background: var(--re-orange); color: #fff; }
.re-domain-btn-primary:hover { background: var(--re-orange-d); }
.re-domain-btn-navy { background: var(--re-navy); color: #fff; }
.re-domain-btn-navy:hover { background: var(--re-navy-d); }

.re-tld-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.re-tld-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--re-bg2); border: 1px solid var(--re-bdr); border-radius: 50px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--re-navy);
  text-decoration: none !important; transition: all var(--re-t);
}
.re-tld-pill:hover { border-color: var(--re-navy); background: #fff; box-shadow: 0 4px 14px rgba(0,0,102,.10); }
.re-tld-price { color: var(--re-ink3); font-weight: 500; }

@media (max-width: 600px) {
  .re-domain-tabs { flex-wrap: wrap; }
  .re-dtab { flex: 1 1 auto; font-size: 12.5px; padding: 13px 8px; }
  .re-dpanel { padding: 22px 18px 24px; }
  .re-domain-form { flex-wrap: wrap; }
  .re-domain-form-ico { display: none; }
  .re-tld-select { border-left: none; border-top: 1px solid var(--re-bdr); flex: 1 1 100%; }
  .re-domain-btn { flex: 1 1 100%; justify-content: center; padding: 13px; }
}

/* ─── HOMEPAGE — shortcuts row + announcements rebrand ────── */
.re-shortcuts.home-shortcuts { background: var(--re-navy) !important; }
.re-shortcuts.home-shortcuts li { border-right: 1px solid rgba(255,255,255,.12) !important; }
.re-shortcuts.home-shortcuts li:first-child { border-left: 1px solid rgba(255,255,255,.12) !important; }
.re-shortcuts.home-shortcuts a { color: rgba(255,255,255,.85) !important; transition: background var(--re-t); }
.re-shortcuts.home-shortcuts a:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.re-shortcuts.home-shortcuts i { color: var(--re-orange) !important; }
.re-shortcuts.home-shortcuts .lead { color: rgba(255,255,255,.7) !important; }
@media (max-width: 767px) {
  .re-shortcuts.home-shortcuts li { border-bottom: 1px solid rgba(255,255,255,.12) !important; border-right: none !important; }
}

.TM-card.annoucements .annuncement-item { border-radius: 12px; border: 1px solid var(--re-bdr); }
.TM-card.annoucements h3 { color: var(--re-navy); }
.TM-card.annoucements .btn-link { color: var(--re-orange) !important; }
.TM-card.annoucements .btn-link:hover { color: var(--re-orange-d) !important; }

/* ─── HOMEPAGE — top of relaise.css TOPBAR block ──────────── */
.re-topbar {
  background: var(--re-navy);
  height: 36px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.re-tb-inner {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  height: 36px;
}
.re-tb-left, .re-tb-right {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 14px;
}
.re-tb-status {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 6px; color: rgba(255,255,255,.68); font-size: 12px;
}
.re-status-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; -webkit-box-flex:0; -ms-flex-positive:0; flex-shrink:0; }
.re-tb-link {
  display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 5px; color: rgba(255,255,255,.68) !important; font-size: 12px; font-weight: 500;
  text-decoration: none !important; -webkit-transition: color var(--re-t); transition: color var(--re-t);
}
.re-tb-link:hover { color: #fff !important; }
.re-tb-admin { color: #fca5a5 !important; }
.re-tb-div { display:inline-block; width:1px; height:14px; background:rgba(255,255,255,.15); }

/* ─── MAIN NAV ────────────────────────────────────────────── */
.re-mainnav {
  height: 64px; background: #fff;
  border-bottom: 1px solid var(--re-bdr);
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  position: relative; z-index: 1000; overflow: visible !important;
  -webkit-transition: -webkit-box-shadow var(--re-t); transition: box-shadow var(--re-t);
}
.re-mainnav.scrolled { -webkit-box-shadow: 0 2px 20px rgba(0,0,102,.12); box-shadow: 0 2px 20px rgba(0,0,102,.12); }
.re-mn-inner {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  height: 64px; width: 100%;
}

/* ─── LOGO ────────────────────────────────────────────────── */
.re-logo {
  display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 10px; text-decoration: none !important; margin-right: 20px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-shrink: 0;
}
.re-logo-img { height: 30px; width: auto; display: block; }
.re-logo-mark {
  width: 34px; height: 34px; background: var(--re-navy); border-radius: 8px;
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.re-logo-text { font-size: 18px; font-weight: 800; color: var(--re-navy); letter-spacing: -.03em; }

/* ─── NAV ─────────────────────────────────────────────────── */
.re-nav {
  display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
  -webkit-box-orient: horizontal; -webkit-box-direction: normal;
  -ms-flex-direction: row; flex-direction: row;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  gap: 2px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 64px;
}
.re-ni {
  position: relative; height: 64px; list-style: none !important;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.re-has-dd { position: relative; }
.re-nl-ico { font-size: 12px; opacity: .7; margin-right: 1px; }

.re-nl {
  display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 4px; padding: 8px 11px !important; border-radius: 7px;
  color: var(--re-ink2) !important; font-size: 13px !important; font-weight: 500 !important;
  text-decoration: none !important; background: none !important; border: none !important;
  -webkit-box-shadow: none !important; box-shadow: none !important;
  cursor: pointer; font-family: inherit; white-space: nowrap; line-height: 1 !important;
  -webkit-transition: background var(--re-t), color var(--re-t); transition: background var(--re-t), color var(--re-t);
}
.re-nl:hover, .re-nl[aria-expanded="true"], .re-nl-active {
  background: var(--re-bg2) !important; color: var(--re-ink) !important;
}
.re-nl-active { color: var(--re-navy) !important; font-weight: 600 !important; }
.re-caret { font-size: 10px; color: var(--re-ink3); -webkit-transition: -webkit-transform .2s; transition: transform .2s; }
.re-nl[aria-expanded="true"] .re-caret { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

/* ─── DROPDOWNS ───────────────────────────────────────────── */
.re-dd {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--re-bdr2); border-radius: 14px;
  -webkit-box-shadow: 0 12px 48px rgba(0,0,102,.14); box-shadow: 0 12px 48px rgba(0,0,102,.14);
  z-index: 1050; list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.re-dd.open {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-animation: reSlide .18s ease both; animation: reSlide .18s ease both;
}
.re-dd-right { left: auto; right: 0; }

@-webkit-keyframes reSlide { from{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)} to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)} }
@keyframes reSlide { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }

/* ── Full-width mega dropdown ──
   Strategy: the re-mainnav wrapper is position:relative with overflow:visible.
   The mega panel uses position:absolute, left:0, right:0 relative to re-mainnav,
   so it stretches exactly as wide as the nav bar — no more, no less.
   The inner container centres content at max 1170px just like .container does.
── */
.re-has-mega-full { position: static; }

/* The nav bar must be the positioning parent */
.re-mainnav { overflow: visible !important; }

.re-dd-mega-full {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  -webkit-transform: none !important;
          transform: none !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 0 0 14px 14px !important;
  border-top: 3px solid var(--re-orange) !important;
  -webkit-box-shadow: 0 16px 48px rgba(0,0,102,.16) !important;
          box-shadow: 0 16px 48px rgba(0,0,102,.16) !important;
  padding: 0 !important;
  margin-top: 0 !important;
  /* Ensure it sits inside page bounds */
  overflow: hidden;
}
.re-dd-mega-inner {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  max-width: 1170px; margin: 0 auto;
  padding: 28px 15px 24px; gap: 0;
}
.re-dd-mega-full .re-dd-col {
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  padding: 0 20px; border-right: 1px solid var(--re-bdr);
}
.re-dd-mega-full .re-dd-col:last-child { border-right: none; }
.re-dd-mega-full .re-dd-col:first-child { padding-left: 0; }

/* Regular mega (non-full) */
.re-dd-mega { min-width: 480px; padding: 20px !important; gap: 16px; }
.re-dd-col { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; }

.re-dd-lbl {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--re-navy); margin-bottom: 8px;
  padding: 0 8px 6px; border-bottom: 1px solid var(--re-bdr);
}
.re-dd-lbl i { color: var(--re-orange); }

.re-dd-mi {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start;
  gap: 10px; padding: 8px 8px; border-radius: 8px;
  text-decoration: none !important; -webkit-transition: background var(--re-t); transition: background var(--re-t);
}
.re-dd-mi:hover { background: var(--re-bg2); }

.re-dd-tld {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  padding: 7px 8px; border-radius: 8px;
  text-decoration: none !important; -webkit-transition: background var(--re-t); transition: background var(--re-t);
}
.re-dd-tld:hover { background: var(--re-bg2); }

.re-ddi-icon {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--re-navy-f); border: 1px solid var(--re-navy-r);
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  color: var(--re-navy); font-size: 14px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-shrink: 0;
}
.re-ddi-icon-org { background: var(--re-orange-f); border-color: var(--re-orange-r); color: var(--re-orange); }
.re-ddi-icon-blue { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.20); color: #2563eb; }
.re-ddi-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2px; }
.re-ddi-title { font-size: 13px; font-weight: 600; color: var(--re-ink); line-height: 1.2; }
.re-ddi-sub   { font-size: 11.5px; color: var(--re-ink3); line-height: 1.4; }

/* Slim dropdown */
.re-dd-slim { min-width: 210px; padding: 8px !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.re-ddi {
  display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 9px; padding: 9px 12px; border-radius: 7px;
  color: var(--re-ink2) !important; font-size: 13px; font-weight: 500;
  text-decoration: none !important;
  -webkit-transition: background var(--re-t), color var(--re-t); transition: background var(--re-t), color var(--re-t);
  white-space: nowrap;
}
.re-ddi:hover { background: var(--re-bg2); color: var(--re-ink) !important; }
.re-ddi-danger { color: #dc2626 !important; }
.re-ddi-danger:hover { background: #fef2f2; color: #b91c1c !important; }
.re-dd-hdr { padding: 10px 14px 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2px; }
.re-dd-hdr-name  { font-size: 13px; font-weight: 600; color: var(--re-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 185px; }
.re-dd-hdr-email { font-size: 11.5px; color: var(--re-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 185px; }
.re-dd-sep { height: 1px; background: var(--re-bdr); margin: 6px 8px; list-style: none; }

/* ─── RIGHT CONTROLS ──────────────────────────────────────── */
.re-mn-right {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px; margin-left: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-shrink: 0;
}
.re-search { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.re-search-ico { position: absolute; left: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 13px; color: var(--re-ink3); pointer-events: none; }
.re-search-inp {
  width: 210px; height: 34px; border-radius: 8px;
  border: 1px solid var(--re-bdr) !important; background: var(--re-bg2) !important;
  padding: 0 10px 0 32px !important; font-size: 13px; color: var(--re-ink); font-family: inherit;
  outline: none; -webkit-box-shadow: none !important; box-shadow: none !important;
}
.re-search-inp:focus { border-color: var(--re-navy) !important; background: #fff !important; -webkit-box-shadow: 0 0 0 3px rgba(0,0,102,.08) !important; box-shadow: 0 0 0 3px rgba(0,0,102,.08) !important; }

.re-icon-btn {
  position: relative; width: 36px; height: 36px; border-radius: 8px;
  background: var(--re-bg2) !important; border: 1px solid var(--re-bdr) !important;
  display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  color: var(--re-ink2) !important; font-size: 15px; cursor: pointer;
  text-decoration: none !important; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-shrink: 0;
  -webkit-box-shadow: none !important; box-shadow: none !important;
}
.re-icon-btn:hover { background: var(--re-bg3) !important; border-color: var(--re-bdr2) !important; color: var(--re-ink) !important; }

.re-cart-btn { position: relative; }
.re-cart-badge { position: absolute; top: -5px; right: -5px; background: var(--re-orange); color: #fff; font-size: 9px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 2px solid #fff; }
.re-notif-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--re-orange); border: 2px solid #fff; }

.re-acct-pill {
  display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px; padding: 4px 10px 4px 4px; border-radius: 50px;
  border: 1px solid var(--re-bdr2) !important; background: #fff !important;
  cursor: pointer; font-family: inherit; -webkit-box-shadow: none !important; box-shadow: none !important;
  -webkit-transition: background var(--re-t); transition: background var(--re-t);
}
.re-acct-pill:hover { background: var(--re-bg2) !important; }
.re-acct-av { width: 26px; height: 26px; border-radius: 50%; background: var(--re-navy); color: #fff; font-size: 10px; font-weight: 700; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-shrink: 0; text-transform: uppercase; }
.re-acct-name { font-size: 12.5px; font-weight: 600; color: var(--re-ink); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.re-btn {
  display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px;
  padding: 8px 16px !important; border-radius: 8px; font-size: 13px !important; font-weight: 600 !important;
  text-decoration: none !important; cursor: pointer; border: none !important; font-family: inherit;
  white-space: nowrap; -webkit-box-shadow: none !important; box-shadow: none !important;
  -webkit-transition: background var(--re-t); transition: background var(--re-t);
}
.re-btn-ghost { background: #fff !important; color: var(--re-ink) !important; border: 1px solid var(--re-bdr2) !important; }
.re-btn-ghost:hover { background: var(--re-bg2) !important; color: var(--re-ink) !important; }
.re-btn-primary { background: var(--re-orange) !important; color: #fff !important; }
.re-btn-primary:hover { background: var(--re-orange-d) !important; color: #fff !important; }

/* Sidebar collapse toggle — deliberately border-free per feedback */
.re-sidebar-toggle {
  width: 36px; height: 36px; border-radius: 8px;
  background: transparent !important; border: none !important;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--re-ink2); font-size: 15px; cursor: pointer;
  margin-right: 8px; flex-shrink: 0;
  box-shadow: none !important; transition: background var(--re-t), color var(--re-t);
}
.re-sidebar-toggle:hover { background: var(--re-bg2) !important; color: var(--re-navy) !important; }
.re-sidebar-toggle:focus-visible { outline: 2px solid var(--re-navy); outline-offset: 2px; }

/* Slightly bigger on mobile specifically (the desktop size above is
   unaffected — there's no desktop toggle anyway), and the toggle+logo
   pair shifts a touch left by trimming the container's own left
   padding rather than touching each element's own margins, so the
   right-side icon row stays exactly where it was. */
@media (max-width: 991px) {
  .re-sidebar-toggle-mobile {
    width: 40px; height: 40px; font-size: 17px;
    margin-right: 6px;
  }
  body.re-loggedin .re-mainnav .container {
    padding-left: 8px;
  }
}

/* ─── HAMBURGER ───────────────────────────────────────────── */
.re-burger {
  display: none;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  gap: 5px; width: 40px; height: 40px; border-radius: 8px;
  background: var(--re-bg2) !important; border: 1px solid var(--re-bdr) !important;
  cursor: pointer; padding: 9px; -webkit-box-shadow: none !important; box-shadow: none !important;
  -webkit-transition: background var(--re-t); transition: background var(--re-t);
  -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px;
}
.re-bar { display: block; width: 100%; height: 2px; background: var(--re-ink2); border-radius: 2px; -webkit-transition: -webkit-transform .25s, opacity var(--re-t); transition: transform .25s, opacity var(--re-t); }
.re-burger.open { background: var(--re-navy) !important; border-color: var(--re-navy) !important; }
.re-burger.open .re-bar { background: #fff; }
.re-burger.open .re-bar:nth-child(1) { -webkit-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); }
.re-burger.open .re-bar:nth-child(2) { opacity: 0; }
.re-burger.open .re-bar:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.re-mob-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,30,.55); z-index: 10039;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.re-mob-overlay.open { display: block; }

/* ─── PROMO BAR ───────────────────────────────────────────── */
.re-promobar { background: var(--re-bg2); border-bottom: 1px solid var(--re-bdr); height: 38px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.re-pb-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; }
.re-pb-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow-x: auto; }
.re-pb-link { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 38px; padding: 0 13px; font-size: 12.5px; font-weight: 500; color: var(--re-ink2) !important; text-decoration: none !important; border-right: 1px solid var(--re-bdr); white-space: nowrap; -webkit-transition: color var(--re-t), background var(--re-t); transition: color var(--re-t), background var(--re-t); }
.re-pb-link:first-child { border-left: 1px solid var(--re-bdr); }
.re-pb-link:hover { color: var(--re-navy) !important; background: #fff; }
.re-pb-offer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 12px; color: var(--re-ink3); margin: 0; white-space: nowrap; }
.re-pb-badge { background: var(--re-orange); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════
   LEFT SIDEBAR (.navbar-side) — full Relaise rebrand
   ───────────────────────────────────────────────────────────
   Overrides rela's default dark-grey WHMCS-style treeview
   (#222a2d, light-blue #7bb7e5 accents) with the light, navy/
   orange language used everywhere else in the theme. Selectors
   mirror assets/css/themes/style.css exactly so specificity is
   equal and this (later-loaded) file wins the cascade.
═══════════════════════════════════════════════════════════ */

.navbar-side {
  background: #fff;
  border-width: 0 1px 0 0;
  border-color: var(--re-bdr);
  box-shadow: 2px 0 20px rgba(0,0,102,.04);
}

.navbar-side .slimScrollBar {
  background: var(--re-orange) !important;
  opacity: .5;
}

/* ── Account Info card ── */
.re-acct-card {
  padding: 16px 16px 18px;
  border-bottom: 1px solid var(--re-bdr);
  background: var(--re-navy-f);
}
.re-acct-switch { margin-bottom: 14px; }
.re-acct-switch-label {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--re-ink3); margin-bottom: 5px;
}
.re-acct-switch-select {
  width: 100%; border-radius: 7px; border: 1px solid var(--re-bdr2);
  background: #fff; font-size: 12px; padding: 6px 8px; color: var(--re-ink);
}
.re-acct-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.re-acct-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--re-navy); color: #fff; font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.re-acct-heading { min-width: 0; }
.re-acct-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--re-orange); margin-bottom: 2px;
}
.re-acct-name {
  font-size: 13px; font-weight: 700; color: var(--re-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.re-acct-line { font-size: 12px; color: var(--re-ink2); font-weight: 600; margin-bottom: 6px; }
.re-acct-address { font-size: 11.5px; color: var(--re-ink3); line-height: 1.6; margin-bottom: 12px; }
.re-acct-meta {
  border-top: 1px solid var(--re-bdr); padding-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.re-acct-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.re-acct-meta-label { font-size: 10.5px; color: var(--re-ink3); font-weight: 600; }
.re-acct-meta-val { font-size: 11.5px; color: var(--re-ink); font-weight: 700; text-align: right; }

/* Collapsed (icon rail) mode: hide the detailed card, show only avatar */
@media (min-width: 992px) {
  .navbar-side.collapsed .re-acct-card { padding: 12px 0; text-align: center; }
  .navbar-side.collapsed .re-acct-switch,
  .navbar-side.collapsed .re-acct-heading,
  .navbar-side.collapsed .re-acct-line,
  .navbar-side.collapsed .re-acct-address,
  .navbar-side.collapsed .re-acct-meta { display: none; }
  .navbar-side.collapsed .re-acct-head { justify-content: center; margin: 0; }
  .navbar-side.collapsed:hover .re-acct-card { padding: 16px 16px 18px; text-align: left; }
  .navbar-side.collapsed:hover .re-acct-switch,
  .navbar-side.collapsed:hover .re-acct-heading,
  .navbar-side.collapsed:hover .re-acct-line,
  .navbar-side.collapsed:hover .re-acct-address,
  .navbar-side.collapsed:hover .re-acct-meta { display: block; }
  .navbar-side.collapsed:hover .re-acct-head { justify-content: flex-start; margin-bottom: 10px; }
}

/* ── Section label ── */
.navbar-side > h4, .navbar-side h4,
.navbar-side .side-nav > li > h4 {
  color: var(--re-ink3) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  padding: 16px 16px 6px !important;
  margin: 0 !important;
}
.navbar-side > h4:after, .navbar-side h4:after { display: none; }

/* ── Menu items ── */
.navbar-side .side-nav { padding: 6px 8px; }
.navbar-side .side-nav li { border-bottom: none !important; float: none; }
.navbar-side .side-nav li > a {
  color: var(--re-ink2) !important;
  background: transparent !important;
  border-radius: 9px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500;
  margin-bottom: 2px;
  border-left: 3px solid transparent !important;
  border-right: none !important;
  transition: background var(--re-t), color var(--re-t);
}
.navbar-side .side-nav li > a [class*="fa-"] {
  color: var(--re-ink3) !important;
  font-size: 14px !important;
  min-width: 22px;
}
.navbar-side .side-nav li > a:hover,
.navbar-side .side-nav li > a:focus {
  background: var(--re-bg2) !important;
  color: var(--re-navy) !important;
}
.navbar-side .side-nav li > a:hover [class*="fa-"] { color: var(--re-navy) !important; }

.navbar-side .side-nav li > a.active {
  background: var(--re-navy-f) !important;
  color: var(--re-navy) !important;
  font-weight: 700;
  border-left-color: transparent !important;
}
.navbar-side .side-nav li > a.active [class*="fa-"] { color: var(--re-orange) !important; }
.navbar-side .side-nav li > a.active:after { display: none !important; } /* kill the old triangle flag */

/* Submenus (accordion panels) */
.navbar-side .side-nav li.panel {
  background: transparent !important;
  box-shadow: none !important;
}
.navbar-side .side-nav li.panel ul li a {
  color: var(--re-ink3) !important;
  background: transparent !important;
  padding: 8px 12px 8px 10px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
}
.navbar-side .side-nav li.panel ul li a:before { content: none; } /* remove old chevron glyph */
.navbar-side .side-nav li.panel ul li a.active {
  color: var(--re-navy) !important;
  background: var(--re-navy-f) !important;
  font-weight: 600;
}
.navbar-side .side-nav li.panel ul li a:hover,
.navbar-side .side-nav li.panel ul li a:focus {
  color: var(--re-navy) !important;
  background: var(--re-bg2) !important;
}
.navbar-side .side-nav li.panel.open > a {
  background: var(--re-bg2) !important;
  border-left-color: transparent !important;
  color: var(--re-navy) !important;
}
.navbar-side .side-nav li.panel.open > a [class*="fa-"] { color: var(--re-navy) !important; }
.navbar-side .side-nav .nav { background: transparent !important; }

/* Expand/collapse arrow */
.navbar-side .side-nav .arrow { color: var(--re-ink3); }
.navbar-side .side-nav li.panel.open .arrow { color: var(--re-orange); }

/* Badges */
.navbar-side .side-nav .badge, .navbar-side .side-nav .label {
  background: var(--re-orange) !important;
  border-radius: 20px !important;
}

/* Collapsed (icon rail) mode */
@media (min-width: 992px) {
  .navbar-side.collapsed { background: #fff; }
  .navbar-side.collapsed .re-side-profile { padding: 14px 0; justify-content: center; }
  .navbar-side.collapsed .re-side-info { display: none; }
  .navbar-side.collapsed:hover .re-side-info { display: block; }
  .navbar-side.collapsed .side-nav li > a { border-radius: 0 9px 9px 0 !important; }
}

/* Mobile: the toggle button is back (mobile-only, next to the logo),
   so the sidebar goes back to being a proper off-canvas drawer instead
   of a permanently in-flow block.
   IMPORTANT: rela's own base CSS hard-codes transform:translateX(-220px)
   for its original 210px-wide sidebar. We widened it to 280px below but
   never overrode that transform, so only 220px of a 280px drawer was
   ever hidden — 60px permanently stuck out on the left ("half showing,
   doesn't hide"). Setting transform explicitly here fixes that for good,
   regardless of what width the drawer ends up being. */
@media (max-width: 991px) {
  .navbar-side {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw;
    margin: 0 !important;
    z-index: 1040;
    box-shadow: none;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navbar-side.display {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0,0,102,.22);
  }
  #page-wrapper { margin-left: 0 !important; }

  /* Backdrop behind the drawer — dims the page and gives it a tap
     target to close, same pattern as the guest mega-menu drawer. */
  .re-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,30,.5);
    z-index: 1039;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .re-sidebar-backdrop.open { display: block; }
  body.re-sidebar-locked { overflow: hidden; }
}

/* Mobile drawer polish — bigger tap targets, safe-area padding so
   the drawer content isn't crowded against a notch/home-indicator. */
@media (max-width: 991px) {
  .navbar-side { padding-top: env(safe-area-inset-top, 0); }
  .navbar-side .side-nav li > a { padding: 13px 14px !important; font-size: 14.5px !important; }
  .navbar-side .side-nav li.panel ul li a { padding: 11px 14px 11px 42px !important; font-size: 13.5px !important; }
  .re-acct-card { padding-top: calc(16px + env(safe-area-inset-top, 0)); }

  /* Fix for the "last few categories disappear when others are
     expanded" bug: the base theme runs the slimScroll plugin on
     .sidebar-scroll, which measures a FIXED pixel height once on
     page load and never recalculates it when an accordion panel
     expands and adds content height. Anything past that frozen
     height becomes invisible and unscrollable, even though
     .navbar-side itself already has overflow-y:auto. Overriding
     the plugin's own inline height/overflow here (CSS !important
     beats a plain inline style with no !important) hands scrolling
     back to the browser natively, which handles dynamic height
     changes correctly with zero extra JS. */
  .sidebar-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .navbar-side .slimScrollDiv {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Mobile-only sidebar toggle: hidden on desktop (no toggle there per
   earlier feedback), shown starting at the mobile/tablet breakpoint
   where the sidebar has nowhere else to live. */
.re-sidebar-toggle-mobile { display: none; }
@media (max-width: 991px) {
  .re-sidebar-toggle-mobile { display: inline-flex; }
}

/* Simple show/hide-at-breakpoint helpers used by the guest header
   controls (desktop Login/Get Started buttons vs. mobile account icon). */
.re-hide-mobile { display: inline-flex; }
.re-show-mobile { display: none; }
@media (max-width: 991px) {
  .re-hide-mobile { display: none !important; }
  .re-show-mobile { display: inline-flex !important; }
}

/* ─── SIDEBAR (Six's) ─────────────────────────────────────── */
.sidebar .panel-sidebar { border: 1px solid var(--re-bdr) !important; border-radius: 10px !important; overflow: hidden; -webkit-box-shadow: none !important; box-shadow: none !important; }
.sidebar .panel-heading { background: var(--re-navy) !important; border: none !important; border-radius: 0 !important; padding: 10px 14px !important; }
.sidebar .panel-title { color: #fff !important; font-size: 13px !important; font-weight: 600 !important; }
.sidebar .list-group-item { border-color: var(--re-bdr) !important; font-size: 13px !important; padding: 8px 14px !important; }
.sidebar .list-group-item.active { background: var(--re-navy) !important; border-color: var(--re-navy) !important; color: #fff !important; }
.sidebar .list-group-item:hover:not(.active) { background: var(--re-bg2); color: var(--re-navy) !important; }

/* ─── MAIN BODY ───────────────────────────────────────────── */
#main-body { padding: 28px 0 60px; min-height: 60vh; }
.main-content .panel { border-radius: 10px !important; border-color: var(--re-bdr) !important; -webkit-box-shadow: 0 1px 6px rgba(0,0,102,.06) !important; box-shadow: 0 1px 6px rgba(0,0,102,.06) !important; }
.main-content .panel-heading { background: #fff !important; border-bottom-color: var(--re-bdr) !important; border-radius: 10px 10px 0 0 !important; }
.main-content .btn-primary { background: var(--re-orange) !important; border-color: var(--re-orange) !important; }
.main-content .btn-primary:hover { background: var(--re-orange-d) !important; border-color: var(--re-orange-d) !important; }
.main-content a:not(.btn):not(.list-group-item):not(.re-nl) { color: var(--re-navy); }
.main-content a:not(.btn):not(.list-group-item):not(.re-nl):hover { color: var(--re-navy-d); }

/* ─── FOOTER ──────────────────────────────────────────────── */
.re-footer {
  background: var(--re-navy);
  color: rgba(255,255,255,.78);
  /* #page-wrapper has padding:0 15px on every child — cancel it here
     so the footer reaches the true edges instead of showing a 15px
     gap on each side (the "space around the footer" issue). */
  margin: 0 -15px;
}
#footer { display: none !important; }

/* Simplified slim footer — down to one row now: copyright on the
   left, quick links on the right (replaces the old payment icons). */
.re-footer-slim { padding: 20px 0; }
.re-ft-slim-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.re-ft-slim-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .re-ft-slim-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .re-ft-slim-links { gap: 14px; }
}

.re-ft-main { padding: 60px 0 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
.re-ft-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 36px; }
.re-ft-brand { -webkit-box-flex: 0; -ms-flex: 0 0 220px; flex: 0 0 220px; }
.re-ft-col   { -webkit-box-flex: 1; -ms-flex: 1 1 130px; flex: 1 1 130px; min-width: 115px; }

.re-ft-logo { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; text-decoration: none !important; margin-bottom: 14px; }
.re-ft-logo-img { height: 34px; width: auto; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.re-ft-logo-mark { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.10); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.re-ft-logo-text { font-size: 18px; font-weight: 800; color: rgba(255,255,255,.9); letter-spacing: -.03em; }
.re-ft-tagline { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.7; margin-bottom: 16px; }
.re-ft-contact { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.re-ft-contact-item { font-size: 12.5px; color: rgba(255,255,255,.58) !important; text-decoration: none !important; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px; -webkit-transition: color var(--re-t); transition: color var(--re-t); }
.re-ft-contact-item:hover { color: #fff !important; }
.re-ft-social { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; }
.re-social-btn { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: rgba(255,255,255,.65) !important; font-size: 14px; text-decoration: none !important; -webkit-transition: background var(--re-t), color var(--re-t); transition: background var(--re-t), color var(--re-t); }
.re-social-btn:hover { background: rgba(255,255,255,.16); color: #fff !important; }

.re-ft-col-title { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; margin-top: 0; }
.re-ft-links { list-style: none !important; padding: 0 !important; margin: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 9px; }
/* WHITE footer links — hover to orange */
.re-ft-link { font-size: 13.5px; color: #fff !important; text-decoration: none !important; -webkit-transition: color var(--re-t); transition: color var(--re-t); opacity: .85; }
.re-ft-link:hover { color: var(--re-orange) !important; opacity: 1; }

.re-ft-trust { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.re-ft-trust-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.re-trust-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font-size: 12.5px; font-weight: 500; padding: 6px 20px; }
.re-trust-item i { color: var(--re-orange); font-size: 16px; }
.re-trust-sep { display: inline-block; width: 1px; height: 20px; background: rgba(255,255,255,.12); }

.re-ft-bottom { padding: 18px 0; }
.re-ft-bottom-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 14px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.re-ft-copy { font-size: 12.5px; color: rgba(255,255,255,.45); margin: 0; }
.re-ft-legal { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
/* WHITE legal links — hover to orange */
.re-ft-legal-link { font-size: 12.5px; color: rgba(255,255,255,.70) !important; text-decoration: none !important; -webkit-transition: color var(--re-t); transition: color var(--re-t); }
.re-ft-legal-link:hover { color: var(--re-orange) !important; }
.re-ft-payments { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-size: 22px; color: rgba(255,255,255,.45); }
.re-ft-payments i:hover { color: rgba(255,255,255,.75); }

/* ─── MOBILE NAV (drawer) ─────────────────────────────────── */
@media (max-width: 991px) {
  .re-burger { display: -webkit-box; display: -ms-flexbox; display: flex; }

  .re-nav {
    display: none !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 320px !important; max-width: 88vw !important;
    background: #fff !important;
    -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important; flex-direction: column !important;
    -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important;
    gap: 0 !important; height: 100% !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    padding: 0 0 40px !important;
    -webkit-box-shadow: -8px 0 40px rgba(0,0,102,.18) !important; box-shadow: -8px 0 40px rgba(0,0,102,.18) !important;
    z-index: 10040 !important; -webkit-animation: none !important; animation: none !important;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.22,1,.36,1); transition: transform .3s cubic-bezier(.22,1,.36,1);
    -webkit-transform: translateX(100%); transform: translateX(100%);
  }
  .re-nav.open {
    display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
    -webkit-transform: translateX(0) !important; transform: translateX(0) !important;
  }

  /* Mobile nav header */
  .re-nav::before {
    content: 'Menu';
    display: block;
    background: var(--re-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 16px 20px;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-shrink: 0;
  }

  .re-ni { height: auto !important; width: 100% !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; border-bottom: 1px solid var(--re-bdr); }
  .re-ni:last-child { border-bottom: none; }
  .re-has-dd { width: 100%; }
  .re-nl {
    width: 100% !important;
    -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important;
    padding: 14px 20px !important; font-size: 15px !important; border-radius: 0 !important;
    border-bottom: none !important;
  }
  .re-nl-ico { font-size: 14px; opacity: .6; }

  /* Full-width mega becomes inline accordion */
  .re-dd-mega-full {
    position: static !important; width: 100% !important;
    border: none !important; border-radius: 0 !important;
    -webkit-box-shadow: none !important; box-shadow: none !important;
    -webkit-animation: none !important; animation: none !important;
  }
  .re-dd-mega-inner {
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    padding: 0 !important; gap: 0;
  }
  .re-dd-mega-full .re-dd-col {
    -webkit-box-flex: 0; -ms-flex: none; flex: none;
    padding: 12px 20px !important; border-right: none !important; border-bottom: 1px solid var(--re-bdr);
  }
  .re-dd-mega-full .re-dd-col:last-child { border-bottom: none; }

  /* Scoped to .re-nav — these rules exist to turn the guest mega-menu's
     dropdowns into inline mobile-accordion content once .re-nav itself
     becomes the full-screen drawer. Unscoped, they were also hijacking
     the unrelated account-icon dropdown in .re-mn-right (position:static
     + width:100% made it render as a full-width inline block instead of
     a small overlay, pushing content around and running off-screen). */
  .re-nav .re-dd { position: static !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; background: var(--re-bg2) !important; padding: 4px 0 !important; margin: 0 !important; -webkit-animation: none !important; animation: none !important; width: 100% !important; }
  .re-nav .re-dd.open { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
  .re-nav .re-dd-slim { min-width: 0 !important; padding: 4px 0 4px 8px !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .re-nav .re-ddi-icon { display: none !important; }
  .re-nav .re-dd-mi { padding: 10px 20px !important; font-size: 14px !important; border-radius: 0 !important; }
  .re-nav .re-dd-mi:hover { background: var(--re-bg3); }
  .re-nav .re-ddi { padding: 10px 20px !important; font-size: 14px !important; }
  .re-nav .re-dd-col { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
  .re-nav .re-dd-lbl { padding: 4px 0 6px; font-size: 9px; }

  /* Promobar hidden on mobile */
  .re-promobar { display: none !important; }
  .re-search { display: none !important; }
  .re-btn-ghost { display: none !important; }
  .re-acct-pill .re-acct-name { display: none !important; }
}

@media (max-width: 767px) {
  .re-ft-brand { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
  .re-ft-col { -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 18px); flex: 0 0 calc(50% - 18px); }
  .re-ft-bottom-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 12px; }
}
@media (max-width: 480px) {
  .re-ft-col { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
  .re-trust-sep { display: none; }
  .re-trust-item { width: 50%; padding: 8px 12px; }
}

/* Subtitle under the marquee label */
.rh-logos-sub {
    font-size: 13px;
    color: rgba(255,255,255,7.55);
    margin: 4px 0 20px;
    text-align: center;
}

/* Subtitle under the marquee label */
.rh-logos-sub-domains {
    font-size: 13px;
    color: #7a7e9a !important;
    margin: 4px 0 20px;
    text-align: center;
}

/* Second marquee row scrolls right */
.rh-marquee-track-reverse {
    animation-direction: reverse;
}

/* Add a small gap between the two rows */
.rh-marquee-wrap + .rh-marquee-wrap {
    margin-top: 12px;
}
/* ─── MARQUEE REVERSE FIX ─────────────────────────────────── */
@keyframes rh-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes rh-marquee-reverse {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.rh-marquee-track {
    animation: rh-marquee 70s linear infinite;
}
.rh-marquee-track-reverse {
    animation: rh-marquee-reverse 60s linear infinite !important;
    animation-direction: normal !important;
}

/* ─── PLATFORM LOGO BRAND COLOURS ────────────────────────── */

/* Row 1 — Control Panels & Infrastructure */
.rh-logo-cp    { color: #FF6C2C !important; } /* cPanel — orange */
.rh-logo-da    { color: #2196F3 !important; } /* DirectAdmin — blue */
.rh-logo-plesk { color: #52B0E7 !important; } /* Plesk — light blue */
.rh-logo-cf    { color: #F48120 !important; } /* Cloudflare — orange */
.rh-logo-linux { color: #FCC624 !important; } /* CloudLinux — yellow */
.rh-logo-ls    { color: #00A550 !important; } /* LiteSpeed — green */
.rh-logo-nginx { color: #009639 !important; } /* NGINX — green */
.rh-logo-apache{ color: #D22128 !important; } /* Apache — red */
.rh-logo-ssl   { color: #4CAF50 !important; } /* Let's Encrypt — green */
.rh-logo-im    { color: #E53935 !important; } /* Imunify360 — red */
.rh-logo-mysql { color: #4479A1 !important; } /* MySQL — blue */
.rh-logo-php   { color: #777BB4 !important; } /* PHP — purple */

/* Row 2 — CMS & Apps */
.rh-logo-wp      { color: #21759B !important; } /* WordPress — blue */
.rh-logo-woo     { color: #96588A !important; } /* WooCommerce — purple */
.rh-logo-joomla  { color: #F44321 !important; } /* Joomla — orange-red */
.rh-logo-drupal  { color: #0077C0 !important; } /* Drupal — blue */
.rh-logo-magento { color: #EE672F !important; } /* Magento — orange */
.rh-logo-presta  { color: #DF0067 !important; } /* PrestaShop — pink */
.rh-logo-gh      { color: #000000  !important; } /* GitHub — white */
.rh-logo-node    { color: #539E43 !important; } /* Node.js — green */
.rh-logo-python  { color: #FFD43B !important; } /* Python — yellow */
.rh-logo-laravel { color: #FF2D20 !important; } /* Laravel — red */
.rh-logo-react   { color: #61DAFB !important; } /* React — cyan */
.rh-logo-opencart{ color: #23ADEF !important; } /* OpenCart — blue */

/* ─── WHY IMAGE ───────────────────────────────────────────── */
.rh-why-img-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 12px 40px rgba(0,0,102,.18);
}
.rh-why-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.rh-why-img-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(0,0,102,.85);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.15);
}
.rh-why-img-badge i { color: #4ade80; font-size: 13px; }

/* ─── PLAN HEADER ICON ────────────────────────────────────── */
.rh-plan-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.rh-plan-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--re-navy-f);
    border: 1px solid var(--re-navy-r);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--re-navy); font-size: 16px; flex-shrink: 0;
}
.rh-plan-popular .rh-plan-icon {
    background: var(--re-orange-f);
    border-color: var(--re-orange-r);
    color: var(--re-orange);
}

/* ─── TABLE IMPROVEMENTS ──────────────────────────────────── */
.rh-table-desktop { display: block; }
.rh-compare-mobile { display: none; }

.rh-th-feature { width: 28%; }
.rh-th-plan {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    font-size: 13px;
}
.rh-th-plan i { font-size: 18px; margin-bottom: 2px; color: var(--re-navy); }
.rh-th-hl .rh-th-plan i { color: var(--re-orange); }
.rh-th-price {
    font-size: 11px; font-weight: 500;
    color: var(--re-ink3); margin-top: 2px;
}
.rh-th-popular {
    display: inline-block;
    background: var(--re-orange);
    color: #fff; font-size: 9px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
    letter-spacing: .04em; margin-top: 4px;
    text-transform: uppercase;
}
.rh-tr-group td {
    background: var(--re-navy) !important;
    color: rgba(255,255,255,.8) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
}
.rh-tr-cta td { padding: 16px 12px !important; background: var(--re-bg2); }
.rh-cta-sm { padding: 8px 14px !important; font-size: 12px !important; width: 100%; justify-content: center; }

/* ─── MOBILE COMPARE CARDS — swipeable carousel ──────────── */
.rh-compare-mobile {
    display: none;
    position: relative;
}
.rh-cm-viewport {
    overflow: hidden;
    border-radius: 16px;
}
.rh-cm-track {
    display: flex;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.rh-cm-card {
    background: #fff;
    border: 1px solid var(--re-bdr);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,102,.06);
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}
.rh-cm-popular {
    border-color: var(--re-orange);
    box-shadow: 0 4px 24px rgba(236,114,17,.18);
}
.rh-cm-header {
    display: flex; align-items: center;
    gap: 14px; margin-bottom: 20px;
    margin-top: 8px;
}
.rh-cm-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--re-navy-f); border: 1px solid var(--re-navy-r);
    display: flex; align-items: center; justify-content: center;
    color: var(--re-navy); font-size: 18px; flex-shrink: 0;
}
.rh-cm-icon-hl {
    background: var(--re-orange-f);
    border-color: var(--re-orange-r);
    color: var(--re-orange);
}
.rh-cm-name { font-size: 16px; font-weight: 700; color: var(--re-ink); }
.rh-cm-price { font-size: 13px; font-weight: 600; color: var(--re-orange); margin-top: 2px; }
.rh-cm-list {
    list-style: none !important;
    padding: 0 !important; margin: 0 !important;
    display: flex; flex-direction: column;
}
.rh-cm-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--re-bdr);
    font-size: 13px;
}
.rh-cm-list li:last-child { border-bottom: none; }
.rh-cm-list li span { color: var(--re-ink3); }
.rh-cm-list li strong { color: var(--re-ink); font-weight: 600; }

/* Navigation dots */
.rh-cm-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.rh-cm-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--re-bdr2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all .2s;
}
.rh-cm-dot.active {
    background: var(--re-navy);
    width: 24px;
    border-radius: 4px;
}

/* Prev / Next arrows */
.rh-cm-arrows {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.rh-cm-arrow {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--re-bdr2);
    display: flex; align-items: center; justify-content: center;
    color: var(--re-ink2);
    font-size: 13px;
    cursor: pointer;
    transition: all .18s;
    box-shadow: 0 2px 8px rgba(0,0,102,.08);
}
.rh-cm-arrow:hover {
    background: var(--re-navy);
    border-color: var(--re-navy);
    color: #fff;
}
.rh-cm-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.rh-cm-counter {
    font-size: 13px;
    font-weight: 600;
    color: var(--re-ink3);
}
.rh-cm-counter span {
    color: var(--re-navy);
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .rh-table-desktop { display: none; }
    .rh-compare-mobile { display: block; }
    .rh-why-img { height: 180px; }
}

/* ─── COMPARE TABLE HEADER FIX ───────────────────────────── */
.rh-compare-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
}
.rh-compare-table thead tr {
    background: var(--re-navy);
}
.rh-compare-table thead th {
    padding: 20px 14px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    vertical-align: top;
    border: none !important;
}
.rh-compare-table thead th.rh-th-feature {
    text-align: left;
    color: rgba(255,255,255,.6);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.rh-compare-table thead th.rh-th-hl {
    background: rgba(236,114,17,.25);
    border-left: 2px solid var(--re-orange) !important;
    border-right: 2px solid var(--re-orange) !important;
}

/* Plan name + price stacked cleanly in header */
.rh-th-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.rh-th-plan i {
    font-size: 20px;
    margin-bottom: 4px;
    color: rgba(255,255,255,.8);
}
.rh-th-hl .rh-th-plan i {
    color: var(--re-orange);
}
.rh-th-plan span:first-of-type {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.rh-th-price {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    margin-top: 1px;
}
.rh-th-popular {
    display: inline-block;
    background: var(--re-orange);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .04em;
    margin-top: 5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ─── TABLE BODY ROWS ─────────────────────────────────────── */
.rh-compare-table tbody td {
    padding: 13px 14px;
    font-size: 13px;
    color: var(--re-ink2);
    border-bottom: 1px solid var(--re-bdr);
    text-align: center;
    vertical-align: middle;
}
.rh-compare-table tbody td:first-child {
    text-align: left;
    color: var(--re-ink);
    font-weight: 500;
}
.rh-compare-table tbody tr:last-child td {
    border-bottom: none;
}
.rh-compare-table tbody tr:hover td {
    background: var(--re-bg2);
}

/* Highlighted column body cells */
.rh-compare-table tbody td:nth-child(3) {
    background: rgba(236,114,17,.04);
    border-left: 2px solid var(--re-orange);
    border-right: 2px solid var(--re-orange);
}

/* ─── GROUP ROW (Storage & Bandwidth etc) ─────────────────── */
.rh-tr-group td {
    background: var(--re-navy) !important;
    color: rgba(255,255,255,.75) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    text-align: left !important;
    border: none !important;
}
/* Override the orange highlight on group rows */
.rh-tr-group td:nth-child(3) {
    background: var(--re-navy) !important;
    border-left: none !important;
    border-right: none !important;
}

/* ─── CTA ROW ─────────────────────────────────────────────── */
.rh-tr-cta td {
    padding: 20px 12px !important;
    background: var(--re-bg2) !important;
    border-bottom: none !important;
    border-top: 1px solid var(--re-bdr) !important;
}
.rh-tr-cta td:nth-child(3) {
    background: rgba(236,114,17,.06) !important;
}
.rh-cta-sm {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    padding: 9px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

/* ─── CHECK / CROSS ICONS ─────────────────────────────────── */
.rh-check { color: #16a34a !important; font-size: 16px; }
.rh-cross { color: #d1d5db !important; font-size: 16px; }
.rh-partial {
    font-size: 11px;
    font-weight: 600;
    color: var(--re-orange);
    background: var(--re-orange-f);
    border: 1px solid var(--re-orange-r);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   HERO SLIDER — base (desktop) styles
   ───────────────────────────────────────────────────────────
   slider.js drives the slider by setting:
       #reSlideTrack { transform: translateX(-N * 100%) }
   #reSlideTrack is a flex row containing full-viewport-width
   slides side by side, each with a plain background-image.
═══════════════════════════════════════════════════════════ */

.re-hero {
    position: relative;
    width: 100%;
    height: 640px;
    overflow: hidden;
    background: var(--re-navy);
}

.re-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.re-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.re-slide-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.re-slide.active .re-slide-img {
    animation: reKenBurns 12s ease-in-out infinite alternate;
}
@keyframes reKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

.re-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 51, 0.88) 0%,
        rgba(0, 0, 102, 0.72) 42%,
        rgba(0, 0, 102, 0.40) 100%
    );
}

.re-slide-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1170px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.re-slide-content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
    color: #fff;
}

.re-slide-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--re-orange);
    background: rgba(236, 114, 17, 0.14);
    border: 1px solid rgba(236, 114, 17, 0.35);
    padding: 6px 13px;
    border-radius: 50px;
    margin-bottom: 20px;
}
.re-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--re-orange);
    flex-shrink: 0;
}

.re-slide-content h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 18px;
}
.re-accent { color: var(--re-orange); }

.re-slide-desc {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 28px;
    max-width: 460px;
}

.re-slide-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.re-btn-slide-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--re-orange);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 13px 24px;
    border-radius: 9px;
    text-decoration: none !important;
    transition: background var(--re-t);
}
.re-btn-slide-primary:hover { background: var(--re-orange-d); color: #fff; }
.re-btn-slide-ghost {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    padding: 13px 4px;
}
.re-btn-slide-ghost:hover { color: #fff; }

.re-slide-stats {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.re-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.re-stat-n { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.re-stat-l { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.re-stat-sep {
    width: 1px; height: 28px;
    background: rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
}

/* Floating metric card panel (desktop only) */
.re-slide-card-panel {
    position: relative;
    flex: 0 0 380px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.re-sc-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 30, 0.35);
}
.re-sc-main { width: 100%; max-width: 280px; }
.re-sc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--re-ink3); margin-bottom: 6px; }
.re-sc-val { font-size: 28px; font-weight: 800; color: var(--re-navy); line-height: 1.1; }
.re-sc-sub { font-size: 12.5px; color: var(--re-ink3); margin-top: 2px; margin-bottom: 14px; }

.re-sc-bars { display: flex; gap: 4px; align-items: flex-end; height: 30px; }
.re-sc-bar { flex: 1; background: var(--re-bg3); border-radius: 3px; height: 100%; }
.re-sc-bar-on { background: var(--re-orange); }

.re-sc-tld-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1px 0; border-bottom: 1px solid var(--re-bdr);
    font-size: 13.5px;
}
.re-sc-tld-row:last-child { border-bottom: none; }
.re-sc-tld { font-weight: 700; color: var(--re-navy); }
.re-sc-price { color: var(--re-ink3); font-weight: 600; }

.re-sc-float {
    position: absolute;
    width: 150px;
    padding: 14px 16px;
}
.re-sc-float-tr { top: 6%; right: 0; }
.re-sc-float-bl { bottom: 8%; left: -6%; }
.re-sc-ico {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--re-orange-f); color: var(--re-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; margin-bottom: 8px;
}

.re-ssl-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.re-ssl-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.re-ssl-k { color: var(--re-ink3); }
.re-ssl-v { font-weight: 700; color: var(--re-ink); }
.re-ssl-good { color: #16a34a; }
.re-ssl-accent { color: var(--re-orange); }

/* Arrows + dots */
.re-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    transition: background var(--re-t), transform var(--re-t);
}
.re-hero-arrow:hover { background: rgba(255, 255, 255, 0.22); }
.re-hero-prev { left: 24px; }
.re-hero-next { right: 24px; }

.re-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.re-hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all var(--re-t);
}
.re-hero-dot.active {
    width: 26px;
    border-radius: 5px;
    background: var(--re-orange);
}

/* Mobile (≤767px) — app-style card layout, uses .re-slide-img
   (this template's actual markup) rather than the video variant
   the patch below targets, so the two rule sets don't collide. */
@media (max-width: 767px) {
    .re-hero { height: auto; min-height: 560px; }
    .re-slide { min-height: 560px; }

    .re-slide-overlay {
        background: linear-gradient(
            180deg,
            rgba(10, 15, 46, 0.55) 0%,
            rgba(10, 15, 46, 0.78) 55%,
            rgba(10, 15, 46, 0.94) 100%
        );
    }

    .re-slide-inner {
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        gap: 0;
        height: 100%;
        min-height: 560px;
        padding: 24px 18px 22px;
    }

    .re-slide-card-panel { display: none; }
    .re-slide-content { max-width: 100%; }

    .re-slide-badge { font-size: 11px; padding: 5px 11px; margin-bottom: 12px; }
    .re-slide-content h1 { font-size: 27px; line-height: 1.2; margin-bottom: 10px; letter-spacing: -0.3px; }
    .re-slide-desc { font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; max-width: 100%; }

    .re-slide-actions { flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 18px; }
    .re-btn-slide-primary, .re-btn-slide-ghost {
        width: 100%; justify-content: center; text-align: center;
        padding: 13px 18px; border-radius: 12px; font-size: 14px;
        text-decoration: none !important;
    }
    .re-btn-slide-ghost { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }

    .re-slide-stats {
        border-top: none; padding-top: 0; gap: 8px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .re-slide-stats::-webkit-scrollbar { display: none; }
    .re-stat-sep { display: none; }
    .re-stat {
        flex: 0 0 auto; scroll-snap-align: start;
        background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px; padding: 9px 13px; min-width: 86px;
    }
    .re-stat-n { font-size: 14px; }
    .re-stat-l { font-size: 10px; }

    .re-hero-arrow { width: 34px; height: 34px; font-size: 12px; }
    .re-hero-prev { left: 10px; }
    .re-hero-next { right: 10px; }
    .re-hero-dots { bottom: 10px; gap: 5px; }
    .re-hero-dot { width: 6px; height: 6px; }
    .re-hero-dot.active { width: 18px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .re-slide-card-panel { display: none; }
    .re-slide-inner { justify-content: center; }
    .re-slide-content { max-width: 600px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE HERO SLIDER PATCH — append to relaise.css
   ───────────────────────────────────────────────────────────
   Replaces the earlier inline <style> attempt, which conflicted
   with these same selectors already in relaise.css and caused
   overlapping/broken layout on mobile. This is the ONLY copy —
   nothing else in header.tpl duplicates these rules anymore.

   What it does:
   - Hides the desktop <video> background on mobile, shows a
     static image instead (re-slide-img-mobile) — lighter, no
     autoplay/codec cost on cellular.
   - Hides the floating desktop metric cards (re-slide-card-panel)
     on mobile — they don't fit a small screen well.
   - Turns the stat row into a horizontally-scrolling chip strip.
   - Stacks action buttons full-width for easier tapping.
   - Shrinks badge/heading/description sizing to fit one screen.
   - Slims down arrows, dots, and the progress bar.

   If your relaise.css already has a `@media (max-width:767px)`
   block touching `.re-hero` or `.re-slide*`, merge this INTO
   that existing block rather than adding a second one — multiple
   media queries with overlapping selectors are fine for the
   cascade, but consolidating avoids confusion later.
═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Static image replaces video on mobile */
    .re-slide-video-desktop {
        display: none;
    }
    .re-slide-img-mobile {
        display: block;
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
    }

    /* Slide container: fixed-ish height, content anchored to bottom
       like a native app card rather than vertically centred */
    .re-hero {
        height: auto;
        min-height: 0;
    }
    .re-slide {
        min-height: 520px;
    }
    .re-slide-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 520px;
        padding: 24px 18px 20px;
    }

    /* Stronger scrim so text reads over photos */
    .re-slide-overlay {
        background: linear-gradient(
            180deg,
            rgba(10, 15, 46, 0.55) 0%,
            rgba(10, 15, 46, 0.75) 55%,
            rgba(10, 15, 46, 0.92) 100%
        );
    }

    .re-slide-content {
        width: 100%;
        max-width: 100%;
    }

    .re-slide-badge {
        font-size: 11px;
        padding: 5px 10px;
        margin-bottom: 12px;
    }

    .re-slide-content h1 {
        font-size: 26px;
        line-height: 1.22;
        margin-bottom: 10px;
        letter-spacing: -0.3px;
    }

    .re-slide-desc {
        font-size: 13.5px;
        line-height: 1.55;
        margin-bottom: 18px;
        opacity: 0.92;
    }

    /* Full-width stacked buttons, app-style tap targets */
    .re-slide-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .re-btn-slide-primary,
    .re-btn-slide-ghost {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 13px 18px;
        border-radius: 12px;
        font-size: 14px;
    }

    /* Stat row becomes a horizontally-scrolling chip strip */
    .re-slide-stats {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        margin-top: 16px;
        padding: 2px 2px 4px;
        scrollbar-width: none;
    }
    .re-slide-stats::-webkit-scrollbar {
        display: none;
    }
    .re-stat-sep {
        display: none;
    }
    .re-stat {
        flex: 0 0 auto;
        scroll-snap-align: start;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 12px;
        padding: 8px 12px;
        min-width: 84px;
    }
    .re-stat-n {
        font-size: 14px;
        display: block;
    }
    .re-stat-l {
        font-size: 10px;
        opacity: 0.8;
    }

    /* Desktop floating metric cards: hidden on mobile, replaced
       by the stat strip above */
    .re-slide-card-panel {
        display: none;
    }

    /* Slim progress bar + dots */
    .re-hero-progress {
        height: 2.5px;
    }
    .re-hero-dots {
        bottom: 10px;
        gap: 5px;
    }
    .re-hero-dot {
        width: 6px;
        height: 6px;
    }
    .re-hero-dot.active {
        width: 18px;
        border-radius: 4px;
    }

    /* Smaller glassy nav arrows */
    .re-hero-arrow {
        width: 32px;
        height: 32px;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.14);
        opacity: 1;
    }
    .re-hero-prev {
        left: 10px;
    }
    .re-hero-next {
        right: 10px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .re-slide-card-panel {
        display: none;
    }
    .re-slide-content {
        width: 100%;
        max-width: 600px;
    }
}
/* ═══════════════════════════════════════════════════════════
   [REMOVED] MOBILE DRAWER — leftover from an earlier iteration
   ───────────────────────────────────────────────────────────
   This block redefined .re-mob-overlay a second time with
   z-index:9998 — higher than the actual .re-nav drawer (1029),
   so the overlay rendered ON TOP of and completely hid the menu
   (the "blurred screen, no menu" bug). None of .re-mob-drawer /
   .re-mob-drawer--open / .re-mob-drawer-body exist in the actual
   markup at all — #reMobOverlay only ever uses .re-mob-overlay,
   defined correctly once, earlier in this file. Deleted rather
   than patched since it served no purpose.
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   HERO SLIDER — relaise-hero-slider.css
   ───────────────────────────────────────────────────────────
   Built specifically for slider.js v2.0, which drives the
   slider by setting:
       #reSlideTrack { transform: translateX(-N * 100%) }
   This means #reSlideTrack MUST be a flex row containing three
   full-viewport-width slides side by side. Earlier CSS attempts
   used position:absolute + opacity toggling, which is a totally
   different (and incompatible) model — that's why the slider
   broke. This file replaces ALL previous hero/slide CSS.

   Desktop: full-bleed background video per slide.
   Mobile (≤767px): video swapped for a static image
   (re-slide-img-mobile), shorter app-style card layout.

   HOW TO DEPLOY:
   Remove any previous .re-hero / .re-slide* rules from
   relaise.css (including the old "MOBILE HERO SLIDER PATCH"
   block from an earlier revision — it assumed the wrong
   architecture and will conflict with this file). Then append
   this whole file to relaise.css.
═══════════════════════════════════════════════════════════ */

/* ─── HERO OUTER ──────────────────────────────────────────── */
.re-hero {
    position: relative;
    width: 100%;
    height: 640px;
    overflow: hidden;
    background: var(--re-navy);
}

/* ─── TRACK — moved by slider.js via translateX ──────────── */
.re-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

/* ─── EACH SLIDE — full viewport width, side by side ───────── */
.re-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Background video (desktop) */
.re-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Background image (slide 2 always; slides 1 & 3 on mobile only) */
.re-slide-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Mobile-only image is hidden on desktop by default */
.re-slide-img-mobile {
    display: none;
}

/* Subtle Ken-Burns drift on the active slide only */
.re-slide.active .re-slide-video,
.re-slide.active .re-slide-img {
    animation: reKenBurns 12s ease-in-out infinite alternate;
}
@keyframes reKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* Scrim so text stays legible over any background */
.re-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 51, 0.88) 0%,
        rgba(0, 0, 102, 0.72) 42%,
        rgba(0, 0, 102, 0.40) 100%
    );
}

/* ─── CONTENT LAYOUT ──────────────────────────────────────── */
.re-slide-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1170px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.re-slide-content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
    color: #fff;
}

.re-slide-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--re-orange);
    background: rgba(236, 114, 17, 0.14);
    border: 1px solid rgba(236, 114, 17, 0.35);
    padding: 6px 13px;
    border-radius: 50px;
    margin-bottom: 20px;
}
.re-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--re-orange);
    flex-shrink: 0;
}

.re-slide-content h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 18px;
}
.re-accent { color: var(--re-orange); }

.re-slide-desc {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 28px;
    max-width: 460px;
}

.re-slide-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.re-btn-slide-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--re-orange);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 13px 24px;
    border-radius: 9px;
    text-decoration: none !important;
    transition: background var(--re-t);
}
.re-btn-slide-primary:hover { background: var(--re-orange-d); color: #fff; }
.re-btn-slide-ghost {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    padding: 13px 4px;
}
.re-btn-slide-ghost:hover { color: #fff; }

/* Stat row */
.re-slide-stats {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.re-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.re-stat-n { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.re-stat-l { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.re-stat-sep {
    width: 1px; height: 28px;
    background: rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
}

/* ─── FLOATING METRIC CARD PANEL (desktop only) ───────────── */
.re-slide-card-panel {
    position: relative;
    flex: 0 0 380px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.re-sc-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 30, 0.35);
}
.re-sc-main { width: 100%; max-width: 280px; }
.re-sc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--re-ink3); margin-bottom: 6px; }
.re-sc-val { font-size: 28px; font-weight: 800; color: var(--re-navy); line-height: 1.1; }
.re-sc-sub { font-size: 12.5px; color: var(--re-ink3); margin-top: 2px; margin-bottom: 14px; }

.re-sc-bars { display: flex; gap: 4px; align-items: flex-end; height: 30px; }
.re-sc-bar { flex: 1; background: var(--re-bg3); border-radius: 3px; height: 100%; }
.re-sc-bar-on { background: var(--re-orange); }

.re-sc-tld-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--re-bdr);
    font-size: 13.5px;
}
.re-sc-tld-row:last-child { border-bottom: none; }
.re-sc-tld { font-weight: 700; color: var(--re-navy); }
.re-sc-price { color: var(--re-ink3); font-weight: 600; }

.re-sc-float {
    position: absolute;
    width: 150px;
    padding: 14px 16px;
}
.re-sc-float-tr { top: 6%; right: 0; }
.re-sc-float-bl { bottom: 8%; left: -6%; }
.re-sc-ico {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--re-orange-f); color: var(--re-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; margin-bottom: 8px;
}

.re-ssl-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.re-ssl-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.re-ssl-k { color: var(--re-ink3); }
.re-ssl-v { font-weight: 700; color: var(--re-ink); }
.re-ssl-good { color: #16a34a; }
.re-ssl-accent { color: var(--re-orange); }

/* ─── ARROWS + DOTS ───────────────────────────────────────── */
.re-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    transition: background var(--re-t), transform var(--re-t);
}
.re-hero-arrow:hover { background: rgba(255, 255, 255, 0.22); }
.re-hero-prev { left: 24px; }
.re-hero-next { right: 24px; }

.re-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.re-hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all var(--re-t);
}
.re-hero-dot.active {
    width: 26px;
    border-radius: 5px;
    background: var(--re-orange);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (≤767px) — image backgrounds, app-style card layout
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .re-hero {
        height: auto;
        min-height: 560px;
    }
    .re-slide { min-height: 560px; }

    /* Swap video for static image */
    .re-slide-video { display: none; }
    .re-slide-img-mobile {
        display: block;
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        z-index: 0;
    }

    .re-slide-overlay {
        background: linear-gradient(
            180deg,
            rgba(10, 15, 46, 0.55) 0%,
            rgba(10, 15, 46, 0.78) 55%,
            rgba(10, 15, 46, 0.94) 100%
        );
    }

    .re-slide-inner {
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        gap: 0;
        height: 100%;
        min-height: 560px;
        padding: 24px 18px 22px;
    }

    /* Floating metric cards don't fit small screens — hidden,
       the stat strip below covers the same info more compactly */
    .re-slide-card-panel { display: none; }

    .re-slide-content { max-width: 100%; }

    .re-slide-badge {
        font-size: 11px;
        padding: 5px 11px;
        margin-bottom: 12px;
    }

    .re-slide-content h1 {
        font-size: 27px;
        line-height: 1.2;
        margin-bottom: 10px;
        letter-spacing: -0.3px;
    }

    .re-slide-desc {
        font-size: 13.5px;
        line-height: 1.55;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .re-slide-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        margin-bottom: 18px;
    }
    .re-btn-slide-primary,
    .re-btn-slide-ghost {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 13px 18px;
        border-radius: 12px;
        font-size: 14px;
        text-decoration: none !important;
    }
    .re-btn-slide-ghost {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Stat row → horizontally-scrolling chip strip */
    .re-slide-stats {
        border-top: none;
        padding-top: 0;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .re-slide-stats::-webkit-scrollbar { display: none; }
    .re-stat-sep { display: none; }
    .re-stat {
        flex: 0 0 auto;
        scroll-snap-align: start;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        padding: 9px 13px;
        min-width: 86px;
    }
    .re-stat-n { font-size: 14px; }
    .re-stat-l { font-size: 10px; }

    /* Smaller, glassy arrows; dots tucked closer to bottom */
    .re-hero-arrow {
        width: 34px; height: 34px;
        font-size: 12px;
    }
    .re-hero-prev { left: 10px; }
    .re-hero-next { right: 10px; }
    .re-hero-dots { bottom: 10px; gap: 5px; }
    .re-hero-dot { width: 6px; height: 6px; }
    .re-hero-dot.active { width: 18px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .re-slide-card-panel { display: none; }
    .re-slide-inner { justify-content: center; }
    .re-slide-content { max-width: 600px; }
}
/* ============================================================
   Relaise Hosting — Web Hosting Configurator
   Append to the bottom of css/relaise.css
   ============================================================ */

.rh-wrap { max-width: 860px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.rh-intro { font-size: 15px; color: #888; margin: 0 0 2rem; }
.rh-step { font-size: 13px; color: #888; margin: 0 0 8px; }
.rh-note { font-size: 11px; color: #aaa; margin: 4px 0 1.25rem; }

.rh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 1.25rem; }
.rh-domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }

.rh-card { padding: .85rem 1rem; text-align: center; cursor: pointer; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; position: relative; transition: border-color .15s, background .15s; }
.rh-card:hover { border-color: #93c5fd; }
.rh-card.rh-sel { border: 2px solid #2563eb; background: #eff6ff; }
.rh-card-name { font-size: 14px; font-weight: 500; color: #111; }
.rh-card.rh-sel .rh-card-name { color: #1d4ed8; }
.rh-card-sub { font-size: 12px; color: #888; margin-top: 2px; }
.rh-popular { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #eff6ff; color: #1d4ed8; font-size: 11px; padding: 2px 10px; border-radius: 6px; white-space: nowrap; border: 1px solid #bfdbfe; }
.rh-save { font-size: 10px; font-weight: 600; color: #15803d; background: #f0fdf4; padding: 1px 6px; border-radius: 5px; display: inline-block; margin-top: 3px; }

.rh-specs { background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.rh-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.rh-spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid #f1f5f9; padding-bottom: 6px; }
.rh-spec-lbl { font-size: 12px; color: #888; }
.rh-spec-val { font-size: 13px; font-weight: 500; color: #111; }

.rh-divider { border: none; border-top: 1px solid #f1f5f9; margin: 1.25rem 0; }

.rh-domain-input-row { display: flex; gap: 8px; align-items: center; margin-bottom: .5rem; }
.rh-domain-input-row input[type="text"] { flex: 1; padding: .5rem .75rem; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px; }
.rh-domain-input-row input[type="text"]:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

.rh-price-bar { display: flex; align-items: center; justify-content: space-between; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.25rem; background: #fff; }
.rh-price-meta { font-size: 12px; color: #888; margin-bottom: 2px; }
.rh-price-main { font-size: 26px; font-weight: 600; color: #111; line-height: 1.1; }
.rh-price-billed { font-size: 12px; color: #888; margin-top: 2px; }
.rh-cta { background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: .65rem 1.5rem; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.rh-cta:hover { background: #1d4ed8; }
.rh-cta:disabled { opacity: .4; cursor: not-allowed; }

.rh-debug { font-size: 11px; color: #aaa; margin-top: 6px; word-break: break-all; }

@media (max-width: 600px) {
    .rh-spec-grid { grid-template-columns: 1fr; }
    .rh-price-bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .rh-domain-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   Relaise Hosting — Web Hosting Configurator
   REPLACE the entire rh-* block at the bottom of relaise.css
   Uses --re-navy / --re-orange tokens from the parent theme
   ============================================================ */

/* ── Page wrap ─────────────────────────────────────────────── */
.rh-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}

/* ── Hero header ───────────────────────────────────────────── */
.rh-page-header {
  background: linear-gradient(110deg, var(--re-navy) 0%, #00008f 100%);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.rh-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(236,114,17,.18) 0%, transparent 65%);
  pointer-events: none;
}
.rh-page-header-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -.02em;
  position: relative;
}
.rh-page-header-sub {
  font-size: 14px;
  color: rgba(255,255,255,.70);
  margin: 0;
  position: relative;
}
.rh-page-header-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  position: relative;
}
.rh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 11px;
  border-radius: 20px;
}
.rh-pill i { color: var(--re-orange); }

/* ── Section + step labels ─────────────────────────────────── */
.rh-section { margin-bottom: 1.75rem; }
.rh-step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--re-ink2);
  margin-bottom: 12px;
}
.rh-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--re-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.rh-required-tag {
  font-size: 10px;
  font-weight: 600;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 1px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rh-footnote {
  font-size: 11px;
  color: var(--re-ink3);
  margin: 8px 0 0;
  line-height: 1.6;
}

/* ── Generic card ──────────────────────────────────────────── */
.rh-card {
  padding: .9rem 1rem;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  border: 1.5px solid var(--re-bdr);
  background: var(--re-bg);
  position: relative;
  transition: border-color var(--re-t), box-shadow var(--re-t), background var(--re-t);
}
.rh-card:hover {
  border-color: var(--re-navy-r);
  box-shadow: 0 2px 12px var(--re-navy-f);
}
.rh-card.rh-sel {
  border: 2px solid var(--re-navy);
  background: var(--re-bg2);
  box-shadow: 0 2px 16px var(--re-navy-r);
}
.rh-card-name { font-size: 14px; font-weight: 600; color: var(--re-ink); }
.rh-card.rh-sel .rh-card-name { color: var(--re-navy); }
.rh-card-sub { font-size: 12px; color: var(--re-ink3); margin-top: 2px; }

/* ── Tier grid ─────────────────────────────────────────────── */
.rh-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 1.25rem;
}
.rh-popular-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--re-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .03em;
}
.rh-card-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--re-navy);
  margin-top: 6px;
  line-height: 1;
}
.rh-card.rh-sel .rh-card-price { color: var(--re-orange); }
.rh-card-price-mo { font-size: 11px; font-weight: 400; color: var(--re-ink3); }

/* ── Spec box ──────────────────────────────────────────────── */
.rh-specs-box {
  background: var(--re-bg2);
  border: 1px solid var(--re-bdr);
  border-radius: 12px;
  padding: 1.25rem;
  border-left: 3px solid var(--re-navy);
}
.rh-specs-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--re-navy);
  margin-bottom: 12px;
}
.rh-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.rh-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--re-bdr);
}
.rh-spec-row:nth-last-child(-n+2) { border-bottom: none; }
.rh-spec-lbl {
  font-size: 12px;
  color: var(--re-ink3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rh-spec-lbl::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--re-orange);
  flex-shrink: 0;
}
.rh-spec-val { font-size: 12px; font-weight: 600; color: var(--re-ink); }

/* ── Cycle cards ───────────────────────────────────────────── */
.rh-cycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.rh-card-cycle-label { font-size: 13px; font-weight: 600; color: var(--re-ink); }
.rh-card.rh-sel .rh-card-cycle-label { color: var(--re-navy); }
.rh-card-cycle-mo { font-size: 12px; color: var(--re-ink3); margin-top: 3px; }
.rh-save-badge {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 1px 7px;
  border-radius: 20px;
  margin-top: 5px;
}

/* ── Panel cards ───────────────────────────────────────────── */
.rh-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.rh-panel-card {
  padding: 1.5rem 1rem 1.1rem;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  border: 1.5px solid var(--re-bdr);
  background: var(--re-bg);
  position: relative;
  transition: all var(--re-t);
}
.rh-panel-card:hover {
  border-color: var(--re-navy);
  box-shadow: 0 4px 20px var(--re-navy-f);
}
.rh-panel-card.rh-sel {
  border: 2px solid var(--re-navy);
  background: var(--re-bg2);
  box-shadow: 0 4px 24px var(--re-navy-r);
}

/* ── Logo sizing — all logos same fixed container ────────────
   object-fit: contain keeps aspect ratio, padding adds breathing
   room so a wide logo (cPanel) and a square logo (Plesk) both
   look balanced without any of them being cropped or stretched. */
.rh-panel-logo-wrap {
  width: 80px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rh-panel-logo {
  max-width: 80px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.rh-panel-name { font-size: 14px; font-weight: 600; color: var(--re-ink); margin-bottom: 10px; }
.rh-panel-card.rh-sel .rh-panel-name { color: var(--re-navy); }
.rh-panel-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rh-badge-default { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.rh-badge-value   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.rh-badge-pro     { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }

/* ── Divider ───────────────────────────────────────────────── */
.rh-divider {
  border: none;
  border-top: 1px solid var(--re-bdr);
  margin: 1.75rem 0;
}

/* ── Domain option cards ───────────────────────────────────── */
.rh-domain-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.rh-domain-card {
  padding: 1.1rem 1rem;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  border: 1.5px solid var(--re-bdr);
  background: var(--re-bg);
  transition: all var(--re-t);
}
.rh-domain-card:hover { border-color: var(--re-navy); }
.rh-domain-card.rh-sel {
  border: 2px solid var(--re-navy);
  background: var(--re-bg2);
}
.rh-domain-icon { font-size: 22px; margin-bottom: 7px; }
.rh-domain-card-name { font-size: 12px; font-weight: 600; color: var(--re-ink); line-height: 1.4; }
.rh-domain-card.rh-sel .rh-domain-card-name { color: var(--re-navy); }

/* ── Domain input area ─────────────────────────────────────── */
.rh-domain-input-section { animation: rh-fadein .2s ease; }
.rh-domain-input-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 8px;
}
.rh-domain-input-row input[type="text"] {
  flex: 1;
  padding: .65rem .9rem;
  border-radius: 8px;
  border: 1.5px solid var(--re-bdr2);
  font-size: 14px;
  color: var(--re-ink);
  outline: none;
  font-family: inherit;
  transition: border-color var(--re-t), box-shadow var(--re-t);
}
.rh-domain-input-row input[type="text"]:focus {
  border-color: var(--re-navy);
  box-shadow: 0 0 0 3px var(--re-navy-f);
}
.rh-check-btn {
  padding: .65rem 1.1rem;
  background: var(--re-navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background var(--re-t);
}
.rh-check-btn:hover:not(:disabled) { background: var(--re-navy-d); }
.rh-check-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Availability result ───────────────────────────────────── */
.rh-avail-result {
  padding: .65rem .9rem;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rh-avail-available { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.rh-avail-taken     { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.rh-avail-checking  { background: var(--re-bg2); color: var(--re-ink3); border: 1px solid var(--re-bdr); }
.rh-avail-error     { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ── Domain confirm button ─────────────────────────────────── */
.rh-use-domain-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .6rem 1.2rem;
  border-radius: 8px;
  border: none;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all var(--re-t);
  background: #16a34a;
  color: #fff;
  margin-top: 6px;
  font-family: inherit;
}
.rh-use-domain-btn:hover { background: #15803d; }
.rh-use-domain-btn--transfer { background: #7c3aed; }
.rh-use-domain-btn--transfer:hover { background: #6d28d9; }
.rh-use-domain-btn--own { background: var(--re-navy); }
.rh-use-domain-btn--own:hover { background: var(--re-navy-d); }

/* ── Price bar ─────────────────────────────────────────────── */
.rh-price-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--re-navy);
  border-radius: 14px;
  padding: 1.4rem 1.75rem;
  box-shadow: 0 8px 32px var(--re-navy-r);
}
.rh-price-info { flex: 1; min-width: 0; }
.rh-price-combo  { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.65); margin-bottom: 4px; }
.rh-price-hosting-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rh-price-amount { font-size: 34px; font-weight: 800; color: #fff; line-height: 1; }
.rh-price-billed { font-size: 12px; color: rgba(255,255,255,.55); }

.rh-price-domain-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.rh-price-domain-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rh-domain-plus { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.5); }
.rh-domain-name-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); }
.rh-domain-price-label { font-size: 12px; color: rgba(255,255,255,.55); }
.rh-domain-type-tag {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.rh-domain-type-register { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.3); }
.rh-domain-type-transfer { background: rgba(167,139,250,.15); color: #a78bfa; border: 1px solid rgba(167,139,250,.3); }
.rh-domain-type-own      { background: rgba(255,255,255,.10); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.2); }

.rh-price-total-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rh-total-label  { font-size: 12px; color: rgba(255,255,255,.55); }
.rh-total-amount { font-size: 15px; font-weight: 700; color: var(--re-orange); }

/* ── CTA button ────────────────────────────────────────────── */
.rh-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--re-orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .9rem 1.75rem;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--re-t), transform .1s, opacity var(--re-t);
  white-space: nowrap;
}
.rh-cta-btn:hover:not(:disabled) { background: var(--re-orange-d); transform: translateY(-1px); }
.rh-cta-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ── Validation msg ────────────────────────────────────────── */
.rh-validation-msg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 6px 12px;
  border-radius: 8px;
}
.rh-debug { font-size: 11px; color: var(--re-ink3); margin-top: 8px; word-break: break-all; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes rh-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rh-spin   { to { transform: rotate(360deg); } }
.rh-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rh-spin .7s linear infinite;
  vertical-align: middle;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 680px) {
  .rh-tier-grid   { grid-template-columns: 1fr 1fr; }
  .rh-panel-grid  { grid-template-columns: 1fr; }
  .rh-domain-opts { grid-template-columns: 1fr; }
  .rh-spec-grid   { grid-template-columns: 1fr; }
  .rh-cycle-grid  { grid-template-columns: 1fr 1fr 1fr; }
  .rh-price-bar   { flex-direction: column; align-items: stretch; }
  .rh-cta-btn     { width: 100%; justify-content: center; }
  .rh-price-amount{ font-size: 28px; }
  .rh-page-header { padding: 1.5rem; }
  .rh-page-header-title { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   CLIENT DASHBOARD — AWS-console-style redesign
   Powers clientareahome.tpl (workload cards, quick-action
   cards recast from WHMCS's dynamic home panels). The
   financial widget above this ships its own <style> block.
═══════════════════════════════════════════════════════════ */

.rh-dash { padding: 4px 0 20px; }

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER + BREADCRUMB — global, every content page
   Replaces rela's default plain ".header-lined" block.
   Folds the dashboard's "Welcome back" greeting in here too,
   so it's styled consistently with every other page's header
   instead of living in its own bespoke block.
═══════════════════════════════════════════════════════════ */

.re-pageheader {
  background: #fff;
  border-bottom: 1px solid var(--re-bdr);
  margin: 0 -15px 24px;
  padding: 0 15px;
}
.re-pageheader-inner { padding: 18px 0 20px; }

.re-breadcrumb-row { margin-bottom: 14px; }
.re-breadcrumb {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.re-bc-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.re-bc-item a {
  color: var(--re-ink3); text-decoration: none !important; font-weight: 500;
  transition: color var(--re-t);
}
.re-bc-item a:hover { color: var(--re-navy); }
.re-bc-item.active span { color: var(--re-navy); font-weight: 700; }
.re-bc-sep { font-size: 8px; color: var(--re-ink3); opacity: .5; margin: 0 1px; }

.re-pageheader-main {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.re-pageheader-text h1 {
  font-size: 23px; font-weight: 800; color: var(--re-ink);
  margin: 0; letter-spacing: -.02em;
}
.re-pageheader-desc { display: block; font-size: 13px; color: var(--re-ink3); margin-top: 5px; }

.re-pageheader-search { position: relative; display: flex; align-items: center; width: 280px; max-width: 100%; }
.re-pageheader-search i { position: absolute; left: 14px; color: var(--re-ink3); font-size: 12.5px; }
.re-pageheader-search input {
  width: 100%; height: 38px; border-radius: 9px;
  border: 1px solid var(--re-bdr2); background: var(--re-bg2);
  padding: 0 14px 0 36px; font-size: 13px; color: var(--re-ink);
  outline: none; transition: border-color var(--re-t), box-shadow var(--re-t);
}
.re-pageheader-search input:focus { border-color: var(--re-navy); background: #fff; box-shadow: 0 0 0 3px var(--re-navy-f); }

@media (max-width: 767px) {
  .re-pageheader-main { flex-direction: column; align-items: stretch; }
  .re-pageheader-search { width: 100%; }
  .re-pageheader-text h1 { font-size: 19px; }
}

.rh-section-title {
  font-size: 15px; font-weight: 800; color: var(--re-ink);
  margin: 0 0 14px; letter-spacing: -.01em;
}

/* Workload cards */
.rh-workloads { margin-bottom: 28px; }
.rh-wl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rh-wl-card {
  display: block; background: #fff; border: 1px solid var(--re-bdr);
  border-radius: 14px; padding: 20px 20px 16px;
  text-decoration: none !important; color: inherit;
  transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.rh-wl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,102,.08); border-color: var(--re-bdr2); color: inherit; text-decoration: none; }
.rh-wl-card.rh-wl-alert { border-color: rgba(220,38,38,.25); background: linear-gradient(180deg, #fff 0%, #fff9f9 100%); }
.rh-wl-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.rh-wl-num { font-size: 32px; font-weight: 800; color: var(--re-ink); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rh-wl-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.rh-wl-ico-navy   { background: var(--re-navy-f); color: var(--re-navy); }
.rh-wl-ico-green  { background: #ecfdf5; color: #16a34a; }
.rh-wl-ico-red    { background: #fef2f2; color: #dc2626; }
.rh-wl-ico-gold   { background: var(--re-orange-f); color: var(--re-orange); }
.rh-wl-label { font-size: 13px; font-weight: 600; color: var(--re-ink2); margin-bottom: 10px; }
.rh-wl-link {
  font-size: 11.5px; font-weight: 700; color: var(--re-navy);
  display: flex; align-items: center; gap: 5px; padding-top: 10px;
  border-top: 1px solid var(--re-bdr); transition: gap var(--re-t);
}
.rh-wl-card:hover .rh-wl-link { gap: 8px; }

.rh-dash-addon { margin-bottom: 20px; }

/* Quick-action cards (recast WHMCS home panels) */
.rh-panels-section { margin-top: 8px; }
.rh-qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rh-qa-card {
  background: #fff; border: 1px solid var(--re-bdr); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 1px 4px rgba(0,0,102,.04);
}
.rh-qa-card.rh-qa-warning { border-color: rgba(217,119,6,.3); background: linear-gradient(180deg, #fff 0%, #fffdf7 100%); }
.rh-qa-card.rh-qa-domain { border-color: var(--re-orange-r); }
.rh-qa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rh-qa-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--re-navy-f); color: var(--re-navy);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.rh-qa-ico-orange { background: var(--re-orange-f); color: var(--re-orange); }
.rh-qa-title { font-size: 14.5px; font-weight: 700; color: var(--re-ink); margin: 0; flex: 1; display: flex; align-items: center; gap: 8px; }
.rh-qa-badge { display: inline-block; font-size: 10.5px; font-weight: 700; background: var(--re-orange); color: #fff; padding: 2px 8px; border-radius: 20px; }
.rh-qa-action {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--re-bg2); color: var(--re-ink2) !important;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none !important; transition: background var(--re-t);
}
.rh-qa-action:hover { background: var(--re-navy); color: #fff !important; }
.rh-qa-body { font-size: 13px; color: var(--re-ink2); line-height: 1.6; }
.rh-qa-body p, .rh-qa-body .form-group { margin-bottom: 10px; }
.rh-qa-body input.form-control, .rh-qa-body select.form-control {
  border-radius: 8px; border: 1px solid var(--re-bdr2); font-size: 13px;
}
.rh-qa-body .btn-primary, .rh-qa-body button[type="submit"] {
  background: var(--re-orange) !important; border-color: var(--re-orange) !important;
}
.rh-qa-footnote { font-size: 11px; color: var(--re-ink3); margin: 6px 0 0; }
.rh-qa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rh-qa-list-link, .rh-qa-list-static {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--re-ink2) !important; text-decoration: none !important;
  transition: background var(--re-t), color var(--re-t);
}
.rh-qa-list-link:hover { background: var(--re-bg2); color: var(--re-navy) !important; }
.rh-qa-list-link.active { background: var(--re-navy-f); color: var(--re-navy) !important; font-weight: 700; }
.rh-qa-list-link i, .rh-qa-list-static i { color: var(--re-ink3); font-size: 13px; width: 16px; text-align: center; }
.rh-qa-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--re-bdr); font-size: 12px; color: var(--re-ink3); }

@media (max-width: 1100px) {
  .rh-wl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .rh-dash-head { flex-direction: column; align-items: stretch; }
  .rh-dash-search { width: 100%; }
  .rh-wl-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rh-wl-card { padding: 16px 16px 14px; }
  .rh-wl-num { font-size: 24px; }
  .rh-qa-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   RELA + RELAISE — layout bridge
   ------------------------------------------------------------
   Moved here from assets/css/custom.css, since relaise.css is
   the file confirmed to load reliably. rela's own CSS hard-codes
   every offset around a 50px-tall .navbar-top: #page-wrapper's
   margin-top, .navbar-side's top, .breadcrumbs.fixed's top. We
   don't use .navbar-top at all — Relaise's replacement header
   (.re-topbar 36px + .re-mainnav 64px) is a fixed 100px stack —
   so every one of those hard-coded 50px offsets needs to become
   100px (and the "fixed breadcrumb" 90px variant becomes 140px).
═══════════════════════════════════════════════════════════ */

.re-header-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
}

@media (min-width: 992px) {
  body { padding-top: 0; }

  #page-wrapper              { margin: 100px 0 0 210px !important; }
  #page-wrapper.collapsed    { margin: 100px 0 0 50px  !important; }
  #page-wrapper.no-sidebar   { margin: 100px 0 0 0     !important; }
  #page-wrapper.fixed            { margin: 140px 0 0 210px !important; }
  #page-wrapper.fixed.collapsed  { margin: 140px 0 0 50px  !important; }
  #page-wrapper.fixed.no-sidebar { margin: 140px 0 0 0     !important; }

  .navbar-side { top: 100px !important; }

  .breadcrumbs.fixed { top: 100px !important; }
}

/* ═══════════════════════════════════════════════════════════
   REGISTRATION — redesigned multi-step flow
   Powers clientregister.tpl. Field markup/names are all stock
   WHMCS, only the layout/visuals + step reveal logic are new.
═══════════════════════════════════════════════════════════ */

.re-reg { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; }

.re-reg-step { margin-bottom: 30px; opacity: 0; animation: reRegFadeIn .4s ease forwards; }
.re-reg-step-active { opacity: 1; animation: none; }
@keyframes reRegFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.re-reg-step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.re-reg-step-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--re-navy); color: #fff; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.re-reg-step-head h4 { font-size: 17px; font-weight: 800; color: var(--re-ink); margin: 0 0 2px; }
.re-reg-step-head p { font-size: 13px; color: var(--re-ink3); margin: 0; }

.re-reg-card {
  background: #fff; border: 1px solid var(--re-bdr); border-radius: 14px;
  padding: 24px 24px 10px; box-shadow: 0 1px 4px rgba(0,0,102,.04);
  margin-bottom: 16px;
}

/* ── Email verification widget ── */
.re-otp { margin: 6px 0 18px; }
.re-otp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--re-navy-f); border: 1px solid var(--re-navy-r);
  border-radius: 10px; padding: 12px 16px; flex-wrap: wrap;
}
.re-otp-text { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--re-ink2); }
.re-otp-text i { color: var(--re-navy); font-size: 14px; flex-shrink: 0; }
.re-otp-btn {
  border: none; border-radius: 8px; padding: 9px 18px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; font-family: inherit; transition: background var(--re-t);
}
.re-otp-btn-primary { background: var(--re-navy); color: #fff; }
.re-otp-btn-primary:hover:not(:disabled) { background: var(--re-navy-d); }
.re-otp-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.re-otp-verify-row {
  background: var(--re-orange-f); border: 1px solid var(--re-orange-r);
  border-radius: 10px; padding: 14px 16px;
}
.re-otp-input-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.re-otp-input-group i { color: var(--re-orange); font-size: 14px; }
.re-otp-code-input {
  flex: 1; min-width: 140px; border: 1.5px solid var(--re-bdr2); border-radius: 8px;
  padding: 9px 12px; font-size: 16px; letter-spacing: 4px; font-weight: 700;
  text-align: center; color: var(--re-ink); outline: none; font-family: inherit;
  transition: border-color var(--re-t), box-shadow var(--re-t);
}
.re-otp-code-input:focus { border-color: var(--re-orange); box-shadow: 0 0 0 3px var(--re-orange-f); }
.re-otp-resend {
  border: none; background: transparent; color: var(--re-navy); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.re-otp-resend:disabled { color: var(--re-ink3); cursor: not-allowed; }
.re-otp-status { font-size: 12px; margin-top: 8px; min-height: 16px; }

.re-otp-verified-row {
  display: flex; align-items: center; gap: 9px;
  background: #ecfdf5; border: 1px solid #bbf7d0; color: #15803d;
  border-radius: 10px; padding: 12px 16px; font-size: 13px; font-weight: 700;
}
.re-otp-verified-row i { font-size: 15px; }

/* ── Account type cards ── */
.re-reg-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.re-reg-type-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 26px 18px; border-radius: 14px;
  border: 2px solid var(--re-bdr); background: #fff; cursor: pointer;
  transition: all var(--re-t); position: relative;
}
.re-reg-type-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.re-reg-type-card:hover { border-color: var(--re-navy-r); }
.re-reg-type-card.re-reg-type-active {
  border-color: var(--re-navy); background: var(--re-navy-f);
  box-shadow: 0 8px 24px var(--re-navy-r);
}
.re-reg-type-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--re-navy-f); color: var(--re-navy);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.re-reg-type-active .re-reg-type-ico { background: var(--re-navy); color: #fff; }
.re-reg-type-title { font-size: 15px; font-weight: 800; color: var(--re-ink); }
.re-reg-type-desc { font-size: 12px; color: var(--re-ink3); }

.re-reg-tos { margin: 6px 0 18px; font-size: 13px; }
.re-reg-submit { margin: 10px 0 30px; }
.re-reg-submit .btn { background: var(--re-orange); border-color: var(--re-orange); width: 100%; padding: 13px; font-size: 15px; font-weight: 700; border-radius: 10px; }
.re-reg-submit .btn:hover { background: var(--re-orange-d); border-color: var(--re-orange-d); }

@media (max-width: 600px) {
  .re-reg-type-grid { grid-template-columns: 1fr; }
  .re-reg-card { padding: 18px 18px 6px; }
  .re-otp-row { flex-direction: column; align-items: stretch; }
  .re-otp-btn { width: 100%; }
}