/* ===========================================================================
   HosterSale client area + one-step checkout
   Design system carried over from the HosterSale WHMCS theme and order form:
     navy   #00415a   primary, sidebar, headings, primary buttons
     orange #FF7903   call-to-action highlight
     green  #059669   free features, money received, success
   Plus Jakarta Sans throughout, 8px radius, soft two-layer shadows.
   =========================================================================== */

:root {
  /* Brand */
  --hs-primary:       #00415a;
  --hs-primary-dark:  #002e40;
  --hs-primary-light: #005a7a;
  --hs-primary-bg:    #e8f4f8;
  --hs-accent:        #0094c8;
  --hs-cta:           #FF7903;
  --hs-cta-dark:      #e56a00;

  /* Surfaces */
  --hs-white:      #ffffff;
  --hs-body-bg:    #f5f7fa;
  --hs-card-bg:    #ffffff;
  --hs-alt-bg:     #f7f9fd;
  --hs-border:     #e2e8f0;
  --hs-border-str: #cbd5e0;

  /* Ink */
  --hs-text:       #2d3748;
  --hs-text-muted: #718096;
  --hs-text-light: #a0aec0;

  /* Status */
  --hs-success:  #059669;
  --hs-success-bg: #e7f6f0;
  --hs-danger:   #e53e3e;
  --hs-danger-bg: #fdecec;
  --hs-warning:  #d69e2e;
  --hs-warning-bg: #fdf6e3;
  --hs-info:     #3182ce;

  /* Chrome */
  --hs-sidebar-bg:     #00415a;
  --hs-sidebar-text:   rgba(255,255,255,.85);
  --hs-sidebar-hover:  rgba(255,255,255,.12);
  --hs-sidebar-active: #005a7a;
  --hs-sidebar-w:      260px;
  --hs-header-h:       60px;

  --hs-radius:    8px;
  --hs-radius-sm: 4px;
  --hs-radius-lg: 14px;
  --hs-shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --hs-shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --hs-shadow-lg: 0 4px 14px rgba(15,22,35,.09), 0 20px 48px rgba(15,22,35,.13);
  --hs-transition: 150ms ease;

  --hs-font: "Plus Jakarta Sans", "Poppins", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--hs-font);
  font-size: .933rem;
  line-height: 1.6;
  color: var(--hs-text);
  background: var(--hs-body-bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}

a { color: var(--hs-primary); text-decoration: none; transition: color var(--hs-transition); }
a:hover { color: var(--hs-primary-dark); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.3; color: var(--hs-text); }
h1 { font-size: 1.5rem; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }

.num   { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.muted { color: var(--hs-text-muted); }
.faint { color: var(--hs-text-light); }
.small { font-size: .82rem; }
.tiny  { font-size: .75rem; }

/* ------------------------------------------------------------ app shell -- */
.shell { display: flex; min-height: 100vh; }

.rail {
  width: var(--hs-sidebar-w); flex: 0 0 var(--hs-sidebar-w);
  background: var(--hs-sidebar-bg);
  min-height: 100vh; padding: 18px 0 24px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.rail__brand {
  color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
  padding: 4px 20px 20px;
}
.rail__brand span { color: var(--hs-cta); }
.rail__group {
  padding: 16px 20px 6px; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.rail a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 20px; color: var(--hs-sidebar-text); font-size: .9rem; font-weight: 500;
  border-left: 3px solid transparent; transition: background var(--hs-transition);
}
.rail a:hover { background: var(--hs-sidebar-hover); color: #fff; text-decoration: none; }
.rail a.is-active {
  background: var(--hs-sidebar-active); color: #fff; font-weight: 600;
  border-left-color: var(--hs-cta);
}
.rail__count {
  background: rgba(255,255,255,.18); color: #fff; border-radius: 10px;
  padding: 1px 7px; font-size: .68rem; font-weight: 700; min-width: 20px; text-align: center;
}
.rail__count--alert { background: var(--hs-cta); }
.rail__foot {
  margin-top: auto; padding: 16px 20px 0; border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6); font-size: .78rem; line-height: 1.9;
}
.rail__foot a { color: rgba(255,255,255,.8); padding: 0; display: inline; border: 0; }
.rail__foot a:hover { background: none; color: #fff; }

.main { flex: 1; min-width: 0; }

.topbar {
  height: var(--hs-header-h); background: var(--hs-white);
  border-bottom: 1px solid var(--hs-border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.topbar__meta { font-size: .82rem; color: var(--hs-text-muted); }

.content { padding: 22px 24px 60px; max-width: 1280px; }
.content--narrow { max-width: 900px; }

/* ------------------------------------------------------------ statement -- */
.statement {
  background: var(--hs-card-bg); border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius); box-shadow: var(--hs-shadow);
  padding: 20px 24px; margin-bottom: 20px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 26px;
  border-left: 4px solid var(--hs-primary);
}
.statement--due { border-left-color: var(--hs-cta); }
.statement__label { font-size: .78rem; color: var(--hs-text-muted); margin-bottom: 5px; font-weight: 500; }
.statement__figure { font-size: 1.9rem; font-weight: 700; letter-spacing: -.025em; line-height: 1; color: var(--hs-primary); }
.statement__side { border-left: 1px solid var(--hs-border); padding-left: 26px; }
.statement__side .statement__figure { font-size: 1.25rem; color: var(--hs-text); }
.statement__actions { margin-left: auto; display: flex; gap: 8px; }

/* --------------------------------------------------------------- cards -- */
.panel {
  background: var(--hs-card-bg); border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); margin-bottom: 20px;
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--hs-border); background: var(--hs-white);
}
.panel__head h2 { margin: 0; font-size: .92rem; font-weight: 700; color: var(--hs-primary); }
.panel__body { padding: 18px; }
.panel__empty { padding: 34px 18px; text-align: center; color: var(--hs-text-muted); font-size: .88rem; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.cols--2-1 { grid-template-columns: 2fr 1fr; }
.cols--1-2 { grid-template-columns: 1fr 1.6fr; }

/* --------------------------------------------------------------- tables -- */
.ledger { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ledger th {
  text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--hs-text-muted);
  padding: 10px 18px; background: var(--hs-alt-bg);
  border-bottom: 1px solid var(--hs-border); white-space: nowrap;
}
.ledger td { padding: 12px 18px; border-bottom: 1px solid var(--hs-border); vertical-align: middle; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger tbody tr { transition: background var(--hs-transition); }
.ledger tbody tr:hover { background: var(--hs-alt-bg); }
.ledger th.num, .ledger td.num { text-align: right; }
.ledger__primary { font-weight: 600; color: var(--hs-primary); }
.ledger__sub { display: block; color: var(--hs-text-muted); font-size: .78rem; margin-top: 2px; }
.ledger--tight td, .ledger--tight th { padding: 9px 14px; }

/* --------------------------------------------------------------- badges -- */
.badge {
  display: inline-block; font-size: .7rem; font-weight: 700; line-height: 1.9;
  padding: 0 9px; border-radius: 20px; white-space: nowrap; letter-spacing: .01em;
}
.badge--ok      { background: var(--hs-success-bg); color: var(--hs-success); }
.badge--wait    { background: var(--hs-primary-bg);  color: var(--hs-primary-light); }
.badge--warn    { background: var(--hs-warning-bg); color: var(--hs-warning); }
.badge--off     { background: #edf2f7; color: var(--hs-text-muted); }
.badge--neutral { background: #edf2f7; color: var(--hs-text-muted); }
.badge--alert   { background: var(--hs-danger-bg); color: var(--hs-danger); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-block; font: inherit; font-size: .88rem; font-weight: 600;
  padding: 9px 18px; border-radius: var(--hs-radius); cursor: pointer;
  border: 1px solid var(--hs-border-str); background: var(--hs-white); color: var(--hs-text);
  transition: all var(--hs-transition); text-align: center;
}
.btn:hover { background: var(--hs-alt-bg); border-color: var(--hs-primary-light); text-decoration: none; }
.btn--primary { background: var(--hs-primary); border-color: var(--hs-primary); color: #fff; }
.btn--primary:hover { background: var(--hs-primary-dark); border-color: var(--hs-primary-dark); color: #fff; }
.btn--cta { background: var(--hs-cta); border-color: var(--hs-cta); color: #fff; }
.btn--cta:hover { background: var(--hs-cta-dark); border-color: var(--hs-cta-dark); color: #fff; }
.btn--danger { border-color: var(--hs-danger); color: var(--hs-danger); background: #fff; }
.btn--danger:hover { background: var(--hs-danger-bg); }
.btn--sm { padding: 5px 12px; font-size: .8rem; }
.btn--block { display: block; width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- forms -- */
.field { margin-bottom: 15px; }
.field > label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--hs-text); }
.field .hint { font-size: .78rem; color: var(--hs-text-muted); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], select, textarea {
  width: 100%; font: inherit; font-size: .88rem; color: var(--hs-text);
  padding: 10px 12px; border: 1.5px solid var(--hs-border); border-radius: var(--hs-radius);
  background: var(--hs-white); transition: border-color var(--hs-transition), box-shadow var(--hs-transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--hs-primary); outline: none; box-shadow: 0 0 0 3px rgba(0,65,90,.1);
}
textarea { min-height: 110px; resize: vertical; }
.field--bad input, .field--bad select { border-color: var(--hs-danger); }
.field__err { color: var(--hs-danger); font-size: .78rem; margin-top: 5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 15px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; margin-bottom: 11px; }
.check input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--hs-primary); }

/* -------------------------------------------------------------- notices -- */
.notice { border-radius: var(--hs-radius); padding: 11px 15px; font-size: .88rem; margin-bottom: 16px; border: 1px solid; }
.notice--ok   { background: var(--hs-success-bg); border-color: #b9e4d3; color: var(--hs-success); }
.notice--err  { background: var(--hs-danger-bg);  border-color: #f5c2c2; color: var(--hs-danger); }
.notice--warn { background: var(--hs-warning-bg); border-color: #ecd9a4; color: var(--hs-warning); }

/* ------------------------------------------------------------- invoices -- */
.doc {
  background: #fff; border: 1px solid var(--hs-border); border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow); padding: 34px 38px;
}
.doc__head { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.doc__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; color: var(--hs-primary); }
.doc__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 26px; font-size: .9rem; line-height: 1.7; }
.doc__label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hs-text-light); margin-bottom: 5px; }
.doc table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.doc th { text-align: left; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
          color: var(--hs-text-muted); padding: 10px 0; border-bottom: 2px solid var(--hs-primary); }
.doc td { padding: 12px 0; border-bottom: 1px solid var(--hs-border); vertical-align: top; }
.doc td.num, .doc th.num { text-align: right; }
.doc__totals { margin-left: auto; width: 300px; margin-top: 18px; }

/* ---------------------------------------------------------------- usage -- */
.meter { height: 6px; background: #edf2f7; border-radius: 4px; overflow: hidden; margin-top: 7px; }
.meter__fill { height: 100%; background: var(--hs-success); border-radius: 4px; }
.meter__fill--high { background: var(--hs-warning); }
.meter__fill--full { background: var(--hs-danger); }

/* ---------------------------------------------------------------- chart -- */
.spark { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.spark__bar { flex: 1; background: var(--hs-primary); opacity: .85; border-radius: 3px 3px 0 0; min-height: 3px; }
.spark__bar:last-child { opacity: 1; background: var(--hs-cta); }
.spark__axis { display: flex; gap: 5px; margin-top: 6px; }
.spark__axis span { flex: 1; text-align: center; font-size: .65rem; color: var(--hs-text-light); }

/* --------------------------------------------------------------- thread -- */
.msg { border: 1px solid var(--hs-border); border-radius: var(--hs-radius); margin-bottom: 12px; overflow: hidden; }
.msg__head { display: flex; justify-content: space-between; padding: 10px 15px; background: var(--hs-alt-bg);
             border-bottom: 1px solid var(--hs-border); font-size: .82rem; font-weight: 500; }
.msg__body { padding: 15px; font-size: .9rem; white-space: pre-wrap; }
.msg--staff { border-color: var(--hs-primary-light); }
.msg--staff .msg__head { background: var(--hs-primary-bg); color: var(--hs-primary); font-weight: 600; }

/* ----------------------------------------------------------------- tabs -- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--hs-border); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a {
  padding: 9px 16px; font-size: .88rem; color: var(--hs-text-muted); font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabs a.is-active { color: var(--hs-primary); border-bottom-color: var(--hs-primary); }
.tabs a:hover { text-decoration: none; color: var(--hs-primary); }

/* ---------------------------------------------------------------- login -- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 30px;
        background: linear-gradient(160deg, var(--hs-primary) 0%, var(--hs-primary-dark) 100%); }
.gate__card { width: 100%; max-width: 400px; background: #fff; border-radius: var(--hs-radius-lg);
              padding: 34px; box-shadow: var(--hs-shadow-lg); }
.gate__brand { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--hs-primary); margin-bottom: 4px; }
.gate__brand span { color: var(--hs-cta); }

/* ======================================================= one-step checkout */
.osc-shell { max-width: 1240px; }
.osc-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; align-items: start; }
.osc-summary-col { position: sticky; top: calc(var(--hs-header-h) + 16px); max-height: calc(100vh - 90px); overflow-y: auto; }

.osc-step { margin-bottom: 26px; }
.osc-step__head { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.osc-step__n {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: var(--hs-primary); color: #fff; display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
}
.osc-step__head h2 { margin: 0; font-size: 1rem; color: var(--hs-text); }

.ostabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.ostab {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--hs-border);
  background: #fff; color: var(--hs-text-muted); transition: all var(--hs-transition);
}
.ostab:hover { border-color: var(--hs-primary-light); color: var(--hs-primary); }
.ostab.is-active { background: var(--hs-primary); border-color: var(--hs-primary); color: #fff; }

.osplans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.osplan {
  background: #fff; border: 1.5px solid var(--hs-border); border-radius: var(--hs-radius-lg);
  padding: 18px; transition: box-shadow .18s, border-color .18s, transform .15s;
  display: flex; flex-direction: column;
}
.osplan:hover:not(.is-picked) {
  box-shadow: var(--hs-shadow-lg); border-color: var(--hs-primary-light); transform: translateY(-2px);
}
.osplan.is-picked { border-color: var(--hs-primary); box-shadow: 0 0 0 3px var(--hs-primary-bg), var(--hs-shadow-md); }
.osplan__name { font-size: .98rem; font-weight: 700; color: var(--hs-primary); }
.osplan__price { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 12px; }
.osplan__figure { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--hs-text); }
.osplan__per { font-size: .8rem; color: var(--hs-text-muted); }
.osplan__features { list-style: none; margin: 0 0 16px; padding: 0; font-size: .82rem; color: var(--hs-text-muted); flex: 1; }
.osplan__features li { padding: 3px 0 3px 20px; position: relative; }
.osplan__features li::before {
  content: "✓"; position: absolute; left: 0; top: 3px;
  color: var(--hs-success); font-weight: 700; font-size: .8rem;
}

.oscycles, .osmodes { display: flex; flex-wrap: wrap; gap: 9px; }
.oscycle {
  font: inherit; font-size: .82rem; cursor: pointer; text-align: left;
  padding: 10px 14px; border: 1.5px solid var(--hs-border); border-radius: var(--hs-radius);
  background: #fff; display: flex; flex-direction: column; gap: 2px; min-width: 120px;
  transition: all var(--hs-transition); position: relative;
}
.oscycle:hover { border-color: var(--hs-primary-light); }
.oscycle.is-picked { border-color: var(--hs-primary); background: var(--hs-primary-bg); }
.oscycle__label { font-weight: 700; color: var(--hs-text); }
.oscycle__price { color: var(--hs-text-muted); }
.oscycle__save {
  position: absolute; top: -9px; right: 8px; background: var(--hs-success); color: #fff;
  font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 10px;
}

.osdomain { display: flex; gap: 9px; margin-top: 10px; }
.osdomain input { flex: 1; }
.osresults { margin-top: 12px; border: 1px solid var(--hs-border); border-radius: var(--hs-radius); overflow: hidden; }
.osresult {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 15px; border-bottom: 1px solid var(--hs-border); font-size: .88rem; background: #fff;
}
.osresult:last-child { border-bottom: 0; }
.osresult:nth-child(even) { background: var(--hs-alt-bg); }
.osresult__name { font-weight: 600; color: var(--hs-primary); }
.osresult__right { display: flex; align-items: center; gap: 12px; }

/* Cart item cards in the summary */
.summary {
  background: #fff; border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-md); overflow: hidden;
}
.summary__head {
  padding: 15px 18px; border-bottom: 1px solid var(--hs-border);
  display: flex; justify-content: space-between; align-items: center; background: var(--hs-primary); color: #fff;
}
.summary__head h2 { margin: 0; font-size: .92rem; color: #fff; font-weight: 700; }
.summary__items { padding: 14px 16px; }

.oscart {
  border: 1.5px solid var(--hs-border); border-radius: 12px; padding: 13px 15px;
  margin-bottom: 10px; background: #fff;
}
.oscart:last-child { margin-bottom: 0; }
.oscart__top { display: flex; align-items: flex-start; gap: 11px; }
.oscart__icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.oscart__icon--product { background: var(--hs-primary-bg); color: var(--hs-primary); }
.oscart__icon--domain  { background: #ede9fe; color: #6d28d9; }
.oscart__main { flex: 1; min-width: 0; }
.oscart__name { font-size: .86rem; font-weight: 700; margin-bottom: 5px; }
.oscart__price { font-weight: 700; white-space: nowrap; font-size: .88rem; }
.oscart__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.oscart__tag {
  font-size: .7rem; font-weight: 600; color: var(--hs-text-muted);
  background: var(--hs-alt-bg); padding: 2px 8px; border-radius: 10px;
}
.summary__opt { display: flex; justify-content: space-between; font-size: .78rem; color: var(--hs-text-muted); margin-top: 4px; }
.osremove {
  font: inherit; font-size: .72rem; background: none; border: 0; padding: 6px 0 0;
  color: var(--hs-danger); cursor: pointer; font-weight: 600;
}

.summary__totals { padding: 15px 18px; border-top: 1px solid var(--hs-border); background: var(--hs-alt-bg); }
.summary__row { display: flex; justify-content: space-between; font-size: .88rem; padding: 4px 0; }
.summary__row--grand {
  font-size: 1.15rem; font-weight: 800; padding-top: 12px; margin-top: 10px;
  border-top: 1.5px solid var(--hs-border-str); color: var(--hs-primary);
}
.summary__renews { font-size: .78rem; color: var(--hs-text-muted); padding: 12px 18px; border-top: 1px solid var(--hs-border); }
.summary__cta { padding: 16px 18px; border-top: 1px solid var(--hs-border); }
.promo { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--hs-border); }
.promo input { flex: 1; }

.paymethods { display: grid; gap: 10px; }
.paymethod {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--hs-border); border-radius: var(--hs-radius); padding: 14px 16px;
  cursor: pointer; background: #fff; transition: all var(--hs-transition);
}
.paymethod:hover { border-color: var(--hs-primary-light); }
.paymethod input { margin-top: 3px; accent-color: var(--hs-primary); }
.paymethod.is-picked { border-color: var(--hs-primary); background: var(--hs-primary-bg); }
.paymethod__name { font-weight: 700; font-size: .9rem; }

/* Password strength meter */
.pwmeter { height: 5px; background: #edf2f7; border-radius: 3px; margin-top: 7px; overflow: hidden; }
.pwmeter__fill { height: 100%; width: 0; transition: width .2s, background .2s; border-radius: 3px; }
.pwhint { font-size: .75rem; margin-top: 5px; color: var(--hs-text-muted); }

/* Phone field: dial code + national number */
.osphone {
  display: flex; align-items: stretch; border: 1.5px solid var(--hs-border);
  border-radius: var(--hs-radius); background: #fff; overflow: hidden;
}
.osphone:focus-within { border-color: var(--hs-primary); box-shadow: 0 0 0 3px rgba(0,65,90,.1); }
.osphone select {
  border: 0; border-right: 1px solid var(--hs-border); border-radius: 0;
  width: auto; min-width: 108px; background: var(--hs-alt-bg); font-size: .85rem;
}
.osphone select:focus { box-shadow: none; }
.osphone input { border: 0; border-radius: 0; }
.osphone input:focus { box-shadow: none; }

/* Mobile sticky total bar */
.osbar { display: none; }

/* Boot state */
.osboot { display: flex; flex-direction: column; align-items: center; justify-content: center;
          min-height: 40vh; gap: 14px; color: var(--hs-text-muted); }
.osboot__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--hs-border); border-top-color: var(--hs-primary);
  animation: osspin .7s linear infinite;
}
@keyframes osspin { to { transform: rotate(360deg); } }

@media (max-width: 1024px) {
  .osc-grid { grid-template-columns: 1fr; }
  .osc-summary-col { position: static; max-height: none; }
}
@media (max-width: 900px) {
  .cols, .cols--2-1, .cols--1-2, .grid2, .grid3 { grid-template-columns: 1fr; }
  .rail { display: none; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
  .doc { padding: 22px 18px; }
  .doc__parties { grid-template-columns: 1fr; }
  .osbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid var(--hs-border); padding: 11px 16px;
    align-items: center; justify-content: space-between; gap: 12px;
    box-shadow: 0 -4px 14px rgba(0,0,0,.08);
  }
  .osbar__total { font-size: 1.1rem; font-weight: 800; color: var(--hs-primary); }
  .osc-shell { padding-bottom: 90px; }
}

@media print {
  .rail, .topbar, .btnrow, .btn, .osbar { display: none !important; }
  .doc { border: 0; box-shadow: none; padding: 0; }
  body { background: #fff; }
}