/* ============================================================
   ehost_cart — Order form skin matching the ehost theme.

   We don't rewrite WHMCS's complex cart Smarty templates; instead we
   restyle the rendered HTML using the ehost CSS variables loaded by
   the main theme's header. This file is the LAST stylesheet loaded for
   cart pages, so its selectors override standard_cart Bootstrap.

   Touches only visuals: typography, surfaces, buttons, form controls,
   spacing. No DOM manipulation, no behavior changes — checkout flow
   stays identical.
   ============================================================ */

/* ---- Page container ---------- */

#order-standard_cart {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--fg-1);
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 0 56px;
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart h5 {
  font-family: 'Sora', 'Inter', sans-serif;
  color: var(--fg-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

#order-standard_cart h1.font-size-36 {
  font-size: 28px;
  margin: 0 0 4px;
}

.header-lined {
  border-bottom: 1px solid var(--divider);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

/* ---- Sidebar (categories) ---- */

.cart-sidebar {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.cart-sidebar .category-name,
.cart-sidebar h3 {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.cart-sidebar a,
.cart-sidebar .category-link {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14px;
  transition: background .15s, color .15s;
}

.cart-sidebar a:hover,
.cart-sidebar .category-link:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.cart-sidebar a.active,
.cart-sidebar .category-link.active {
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 600;
}

/* ---- Cart body / main content ---- */

.cart-body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}

/* When checkout omits the sidebar, give the form the full row width. */
.cart-body-fullwidth {
  flex: 1 1 100%;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

/* ---- Section headings (sub-heading "primary-bg-color" pills) ---- */

.sub-heading {
  margin: 28px 0 16px;
  position: relative;
}

.sub-heading::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--divider);
  z-index: 0;
}

.sub-heading > span,
.sub-heading > .primary-bg-color {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: #fff;
  padding: 0 14px 0 0;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-1);
}

/* ---- Form controls ---------- */

#order-standard_cart .form-control,
#order-standard_cart .field,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="tel"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="number"],
#order-standard_cart select,
#order-standard_cart textarea {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 12px 10px 38px;
  font-size: 14px;
  font-family: inherit;
  color: var(--fg-1);
  background: #fff;
  height: auto;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

#order-standard_cart textarea { padding-left: 12px; min-height: 96px; }
#order-standard_cart select   { padding-right: 32px; }

#order-standard_cart .form-control:focus,
#order-standard_cart .field:focus,
#order-standard_cart input:focus,
#order-standard_cart select:focus,
#order-standard_cart textarea:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(42, 122, 68, 0.15);
  outline: none;
}

#order-standard_cart .form-group {
  margin-bottom: 16px;
  position: relative;
}

#order-standard_cart .prepend-icon .field-icon {
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  z-index: 2;
  pointer-events: none;
}

#order-standard_cart .form-group > label:not(.field-icon):not(.radio-inline):not(.checkbox-inline) {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  margin-bottom: 6px;
}

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

#order-standard_cart .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  /* NOTE: no `color` in the transition — animating the text color could flash
     the label toward an invisible in-between value during a hover repaint. */
  transition: background .15s, border-color .15s, box-shadow .15s;
  text-decoration: none;
  box-shadow: none;
  line-height: 1.4;
}

#order-standard_cart .btn-primary {
  background: var(--brand-700);
  color: var(--fg-on-brand);
  border-color: var(--brand-700);
}
#order-standard_cart .btn-primary:hover {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: var(--fg-on-brand);  /* pin white text on hover — never let it vanish */
}
/* Keep the cart/order-button icon + label always on the button's text color
   (the icon is an inline SVG using stroke/fill:currentColor). */
#order-standard_cart .btn-primary [data-icon] svg { stroke: currentColor; }

#order-standard_cart .btn-lg {
  padding: 14px 26px;
  font-size: 15px;
}

#order-standard_cart .btn-info {
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-100);
}
#order-standard_cart .btn-info:hover {
  background: var(--brand-100);
  color: var(--brand-800);
}

#order-standard_cart .btn-warning {
  background: var(--warning-bg);
  color: #92400e;
  border-color: #fde68a;
}

#order-standard_cart .btn-default {
  background: #fff;
  color: var(--fg-1);
  border-color: var(--border-strong);
}
#order-standard_cart .btn-default:hover {
  background: var(--bg);
  border-color: var(--fg-4);
}

#order-standard_cart .btn[disabled],
#order-standard_cart .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

#order-standard_cart .alert {
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 14px 16px;
  font-size: 14px;
  margin: 16px 0;
}

#order-standard_cart .alert-success {
  background: var(--brand-50);
  color: var(--brand-800);
  border-color: var(--brand-100);
}

#order-standard_cart .alert-warning {
  background: var(--warning-bg);
  color: #78350f;
  border-color: #fde68a;
}

#order-standard_cart .alert-danger {
  background: var(--error-bg);
  color: #991b1b;
  border-color: #fecaca;
}

#order-standard_cart .alert-info {
  background: var(--brand-50);
  color: var(--brand-800);
  border-color: var(--brand-100);
}

#order-standard_cart #totalDueToday.alert {
  font-size: 16px;
  text-align: center;
  padding: 18px 20px;
}

#order-standard_cart #totalCartPrice {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--brand-800);
  margin-left: 8px;
}

/* ---- Order summary panel ---------- */

.order-summary,
.summary-container,
.view-cart-items-header,
.cart-totals {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.view-cart-items-header {
  background: var(--bg);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}

.view-cart-items {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.view-cart-items .item,
.view-cart-items .product {
  padding: 16px 20px;
  border-top: 1px solid var(--divider);
}
.view-cart-items .item:first-child,
.view-cart-items .product:first-child {
  border-top: none;
}

.cart-totals {
  text-align: right;
}

.cart-totals dt,
.cart-totals dd,
.cart-totals .label,
.cart-totals .value {
  font-size: 14px;
  color: var(--fg-2);
}

.cart-totals .total,
.cart-totals .order-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg-1);
}

/* ---- Account / radio select cards ---------- */

.account-select-container .account {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.account-select-container .account.active {
  border-color: var(--brand-600);
  background: var(--brand-50);
}

/* ---- Radio buttons in payment method picker ---------- */

#paymentGatewaysContainer .radio-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: 14px;
}
#paymentGatewaysContainer .radio-inline:has(input:checked) {
  border-color: var(--brand-600);
  background: var(--brand-50);
  font-weight: 600;
}

/* ---- Password strength + small UI ---------- */

.password-strength-meter .progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--divider);
  overflow: hidden;
}
.password-strength-meter .progress-bar {
  background: var(--brand-600);
}

/* ---- Field help text ---------- */

#order-standard_cart .field-help-text,
#order-standard_cart .small,
#order-standard_cart .text-muted {
  font-size: 12px;
  color: var(--fg-3);
}

/* ---- TOS, checkbox alignment ---------- */

#order-standard_cart .checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

#order-standard_cart a {
  color: var(--brand-700);
  text-decoration: none;
}
#order-standard_cart a:hover {
  color: var(--brand-800);
  text-decoration: underline;
}

/* ---- Already-registered / new-user toggle row ---------- */

.already-registered {
  margin: 16px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}

/* ---- Security message footer ---------- */

/* The original template wrapped this in an .alert; we render a plain <p> now.
 * Keep both selectors so legacy markup also looks compact if Smarty caches. */
.checkout-security-msg,
.alert.checkout-security-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  margin: 24px auto 0;
  max-width: 720px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
  flex-wrap: wrap;
}

/* Lock icon: small, vertically centered with the line height. Font Awesome
 * tries to apply its own sizing — force ours with multiple selectors. */
.checkout-security-msg i,
.checkout-security-msg i.fas,
.checkout-security-msg .fas.fa-lock,
.checkout-security-msg svg {
  font-size: 11px !important;
  width: 12px;
  height: 12px;
  line-height: 1;
  color: var(--brand-700);
  vertical-align: -1px;
  flex-shrink: 0;
}

.checkout-security-msg strong {
  font-family: 'JetBrains Mono', monospace;
  color: var(--fg-1);
  font-weight: 600;
  font-size: 12px;
}

/* ---- Sidebar panels (categories + actions) on products.tpl ---------- */

.cart-sidebar .panel,
.cart-sidebar .card,
.cart-sidebar .card-sidebar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.cart-sidebar .panel-heading,
.cart-sidebar .card-header {
  background: transparent;
  border-bottom: 1px solid var(--divider);
  padding: 12px 14px;
}

.cart-sidebar .panel-title,
.cart-sidebar .card-header h3,
.cart-sidebar .card-header .panel-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-sidebar .panel-title i,
.cart-sidebar .card-header i {
  color: var(--brand-700);
  font-size: 12px;
}

.cart-sidebar .card-minimise,
.cart-sidebar .panel-minimise {
  margin-left: auto;
  color: var(--fg-4);
  font-size: 10px;
  cursor: pointer;
}

.cart-sidebar .list-group {
  padding: 4px;
  border: none;
}

.cart-sidebar .list-group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--fg-2);
  background: transparent;
  margin: 0;
}

.cart-sidebar .list-group-item:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.cart-sidebar .list-group-item.active {
  background: var(--brand-100);
  color: var(--brand-800);
  font-weight: 600;
}

.cart-sidebar .list-group-item i {
  font-size: 11px;
  color: var(--fg-3);
  width: 14px;
}

.cart-sidebar .badge {
  background: var(--brand-700);
  color: var(--fg-on-brand);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  margin-left: auto;
}

/* Sidebar column width when present (with row wrapping). */
.cart-sidebar {
  flex: 0 0 240px;
  max-width: 240px;
  margin-right: 20px;
}
@media (max-width: 900px) {
  .cart-sidebar {
    flex: 1 1 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 16px;
  }
}

/* Row layout that holds sidebar + cart-body side by side. */
#order-standard_cart .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* sidebar sticks to top, not centered against tall cart-body */
  gap: 0;
}

#order-standard_cart .cart-body {
  flex: 1 1 0;
  min-width: 0;
}

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

@media (max-width: 768px) {
  .cart-body {
    padding: 20px 18px;
  }
  #order-standard_cart h1.font-size-36 {
    font-size: 22px;
  }
}

/* ---- Promo code disclosure (R4) ---------- */
/* Inline <details>/<summary> toggle inside the Order Summary card. The
   default browser disclosure triangle is hidden in favor of our own chev
   icon, which rotates when the panel is open. */
details.ehost-promo-toggle > summary { list-style: none; }
details.ehost-promo-toggle > summary::-webkit-details-marker { display: none; }
details.ehost-promo-toggle > summary::marker { display: none; }
details.ehost-promo-toggle .ehost-promo-chev {
  transition: transform .15s ease;
  margin-left: 2px;
}
details.ehost-promo-toggle[open] > summary .ehost-promo-chev {
  transform: rotate(180deg);
}
details.ehost-promo-toggle > summary:hover { opacity: 0.85; }

/* ============================================================
   Domain search enhancements (Faz 6.6) — trust badges,
   spotlight available/taken sort + labels, bundle offer,
   sticky cart bar. Markup + JS in domainregister.tpl.
   ============================================================ */

/* ----- Trust badges under the search box ----- */
.dsr-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; margin: 16px auto 0; max-width: 720px;
}
.dsr-trust > span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--fg-3);
}
.dsr-trust > span > [data-icon] { color: var(--success); flex-shrink: 0; }

/* ----- Spotlight TLD cards: available (green) / taken (greyed, sorted last) ----- */
#spotlightTlds .spotlight-tld { transition: border-color .15s, box-shadow .15s, opacity .15s; }
#spotlightTlds .spotlight-tld-container.is-available .spotlight-tld {
  border-color: var(--success);
  box-shadow: inset 0 0 0 1px var(--success);
}
#spotlightTlds .spotlight-tld-container.is-unavailable { order: 99; }
#spotlightTlds .spotlight-tld-container.is-unavailable .spotlight-tld { opacity: .5; }
.tld-status {
  display: block; margin-top: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.tld-status.ok { color: var(--success); }
.tld-status.no { color: var(--fg-3); }

/* ----- Domain + hosting bundle offer ----- */
.dsr-bundle {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 18px 22px;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(90deg, var(--brand-50), transparent 70%);
}
.dsr-bundle .dsr-bundle-txt { flex: 1; min-width: 220px; }
.dsr-bundle h4 { margin: 0 0 3px; font-size: 16px; color: var(--fg-1); }
.dsr-bundle p { margin: 0; font-size: 13px; color: var(--fg-3); }

/* ----- Sticky "items in cart" bar ----- */
/* Pure display:none <-> block toggle — NO transition/animation reveal. Any
   transform transition or keyframe entry can strand the bar off-screen if the
   tab throttles/pauses its animation clock (it freezes at the start frame and
   never advances). A plain display toggle always rests in the visible state. */
#dsrCartBar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: none;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
}
#dsrCartBar.show { display: block; }
#dsrCartBar .dsr-cart-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 14px;
}
#dsrCartBar .dsr-cart-count { font-size: 14px; color: var(--fg-2); }
#dsrCartBar .dsr-cart-count .dsr-n { color: var(--brand-800); font-size: 16px; }
#dsrCartBar .spacer { margin-left: auto; }
@media (max-width: 575px) {
  #dsrCartBar .dsr-cart-inner { padding: 10px 14px; gap: 10px; }
  #dsrCartBar .dsr-cart-count { font-size: 13px; }
}