/* ============================================================
   Hostfory × Lagom 2.1.2 supplemental — only targets selectors
   that the upstream custom.css doesn't catch.
   Variables (--hf-*) come from custom.css :root — we re-use, never redefine.
   ============================================================ */

/* Top nav (Lagom 2 uses .l-header, header.l-header) */
header.l-header, nav.l-top-nav, .l-top-nav, header.lagom-header {
  background: var(--hf-bg-0) !important;
  border-bottom: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  box-shadow: none !important;
}
.l-top-nav a, header.l-header a, .l-header .nav-link, .navbar-brand,
.l-top-nav .lang-current, .l-top-nav .currency-current, .l-top-nav .top-nav-cart-link {
  color: var(--hf-fg-1) !important;
}
.l-top-nav a:hover, header.l-header a:hover { color: var(--hf-fg-0) !important; }

/* Top-right cart pill */
.top-nav-cart, .cart-link, [class*="top-cart"] {
  background: var(--hf-bg-2) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  border-radius: 8px !important;
}

/* Layout wrappers */
.l-page, .l-content, .l-content-wrapper, main.l-main, .lagom-modern {
  background: var(--hf-bg-0) !important;
  color: var(--hf-fg-1) !important;
}
.l-content > .section { background: transparent !important; }

/* === Main banner (homepage hero) — kill green triangle SVG, add hostfory radial === */
.main-banner, .main-banner.banner-default, .main-banner.banner-home, .main-banner.banner-center {
  background:
    radial-gradient(1200px 400px at 80% 0%, color-mix(in oklab, var(--hf-accent) 22%, transparent), transparent 70%),
    radial-gradient(800px 400px at 0% 100%, color-mix(in oklab, var(--hf-accent) 8%, transparent), transparent 70%),
    var(--hf-bg-0) !important;
  color: var(--hf-fg-0) !important;
  position: relative !important;
  overflow: hidden !important;
}
.main-banner .banner-background, .banner-background, .banner-bg,
.main-banner > svg, .main-banner svg.banner-shape, .main-banner .svg-illustration,
.banner-shape-left, .banner-shape-right {
  display: none !important;
}
/* Subtle grid like hostfory.com */
.main-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hf-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hf-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 30%, transparent 80%);
  opacity: 0.18;
}
.banner-title, .main-banner h1, .banner-subtitle, .main-banner p {
  color: var(--hf-fg-0) !important;
  position: relative; z-index: 1;
}
.banner-subtitle, .main-banner p { color: var(--hf-fg-1) !important; }

/* === Tiles (Buy A Domain / Buy Subscription / Make Payment / Get Support) === */
.tile, .tile-home, a.tile, a.tile-home {
  background: var(--hf-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  border-radius: 12px !important;
  transition: border-color 0.15s, transform 0.05s !important;
}
.tile:hover, .tile-home:hover, a.tile:hover {
  background: var(--hf-bg-2) !important;
  border-color: color-mix(in oklab, var(--hf-accent) 35%, var(--hf-line)) !important;
  text-decoration: none !important;
}
.tile-title { color: var(--hf-fg-0) !important; }
.tile-description, .tile-subtitle { color: var(--hf-fg-2) !important; }

/* === Announcements / news === */
.list-group, .announcements-list, .list-group-lg {
  background: transparent !important;
}
.list-group-item, .list-group .list-group-item, .announcements-list .list-group-item {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
}
.list-group-item h2, .list-group-item h3, .list-group-item h4,
.list-group-item .list-group-item-heading,
.list-group-item a:not(.btn) {
  color: var(--hf-accent) !important;
}
.list-group-item .text-muted, .list-group-item time, .list-group-item small {
  color: var(--hf-fg-3) !important;
}
.calendar-icon, .list-group-item .icon { color: var(--hf-fg-3) !important; }

/* === Faded button variants Lagom uses (e.g. Read More) === */
.btn-primary-faded, .btn-success-faded {
  background: color-mix(in oklab, var(--hf-accent) 15%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--hf-accent) 35%, transparent) !important;
  color: var(--hf-accent) !important;
  font-weight: 500 !important;
}
.btn-primary-faded:hover, .btn-success-faded:hover {
  background: color-mix(in oklab, var(--hf-accent) 25%, transparent) !important;
  color: var(--hf-accent-2, var(--hf-accent)) !important;
}
.btn-warning-faded {
  background: color-mix(in oklab, var(--hf-warn) 15%, transparent) !important;
  border-color: color-mix(in oklab, var(--hf-warn) 35%, transparent) !important;
  color: var(--hf-warn) !important;
}
.btn-danger-faded {
  background: color-mix(in oklab, var(--hf-danger) 15%, transparent) !important;
  border-color: color-mix(in oklab, var(--hf-danger) 35%, transparent) !important;
  color: var(--hf-danger) !important;
}

/* Section titles forced visible */
.section-title, .section h2, .section h3 {
  color: var(--hf-fg-0) !important;
}

/* === Footer (Lagom uses .l-footer or .footer) === */
.l-footer, footer.l-footer, footer.lagom-footer, .footer, #footer {
  background: var(--hf-bg-0) !important;
  border-top: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-2) !important;
}
.l-footer a, .footer a, footer a { color: var(--hf-fg-1) !important; }
.l-footer .copyright, .footer .copyright {
  color: var(--hf-fg-3) !important;
  font-family: var(--hf-mono) !important;
  font-size: 12px !important;
}
.lang-link, .currency-link { color: var(--hf-fg-1) !important; }
.scroll-top {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 8px !important;
}
.scroll-top:hover { background: var(--hf-bg-3) !important; }

/* Captcha image stays light bg for legibility */
.captchaimage img, img[src*="verifyimage"] {
  background: #fff !important;
  padding: 4px !important;
  border-radius: 4px !important;
}

/* Domain search input on homepage */
.l-domain-search-form, .domain-search-input, .form-domain-search {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
}
.l-domain-search-form input, .domain-search-input input {
  background: transparent !important;
  color: var(--hf-fg-0) !important;
  border: none !important;
}

/* Generic — kill any inline white backgrounds left behind by Lagom partials */
.bg-white, [class~="bg-white"] {
  background: var(--hf-bg-1) !important;
  color: var(--hf-fg-1) !important;
}

/* Top-right Login (sometimes too pastel) */
a.btn-login, .btn-login {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
}

/* === Top app-nav (Lagom 2 wrapper that holds header + main menu) === */
.app-nav, .app-nav-menu, .app-nav-wrapper, #main-menu, .app-nav-header {
  background: var(--hf-bg-0) !important;
  border-bottom: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  box-shadow: none !important;
}
.app-nav-menu, #main-menu { border-bottom: 1px solid var(--hf-line) !important; }
.app-nav a, .app-nav-menu a, .app-nav-header a, .app-nav .nav-link {
  color: var(--hf-fg-1) !important;
}
.app-nav a:hover, .app-nav-menu a:hover { color: var(--hf-fg-0) !important; }
.app-nav .dropdown-toggle, .app-nav .caret { color: var(--hf-fg-2) !important; }

/* Submenu dropdowns under app-nav-menu */
.app-nav .dropdown-menu, #main-menu .dropdown-menu {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
}
.app-nav .dropdown-menu > li > a { color: var(--hf-fg-1) !important; }
.app-nav .dropdown-menu > li > a:hover { background: var(--hf-bg-2) !important; color: var(--hf-fg-0) !important; }

/* HostForY logo color (it's a green text logo by default) — keep accent */
.app-nav .navbar-brand, .app-nav-header .logo, .app-nav-header a.brand {
  color: var(--hf-accent) !important;
  font-weight: 700;
}

/* Currency / cart pills in top bar */
.app-nav .currency-link, .app-nav .cart-link, .app-nav-header .cart-link,
.input-group-addon, .app-nav-header [class*="cart"] {
  background: var(--hf-bg-2) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  border-radius: 8px !important;
}

/* "Login" green button (it stays accent), "Register" outline */
.app-nav .btn-login, .app-nav-header .btn-login, .btn-login {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
}
.app-nav .btn-register, .app-nav-header .btn-register, .btn-register {
  background: transparent !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
}
.app-nav .btn-register:hover, .btn-register:hover {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
}


/* ====================================================================
   Order page (Lagom 2 store/products list) — minimal & safe
   ==================================================================== */

/* Sidebar panels */
.sidebar > .panel, .sidebar .lm-card, .sidebar .lagom-card,
.sidebar .well, .sidebar > div > .section-header {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  color: var(--hf-fg-0) !important;
}
.sidebar a { color: var(--hf-fg-1) !important; }
.sidebar a:hover { color: var(--hf-fg-0) !important; }
.sidebar .list-group-item {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  color: var(--hf-fg-1) !important;
}
.sidebar .list-group-item:hover, .sidebar .list-group-item.active {
  border-color: color-mix(in oklab, var(--hf-accent) 35%, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
  background: var(--hf-bg-2) !important;
}

/* Product card root — light styling only, no display/flex meddling */
.product, .lagom-product, .package {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: border-color 0.15s;
}
.product:hover, .lagom-product:hover, .package:hover {
  border-color: color-mix(in oklab, var(--hf-accent) 35%, var(--hf-line)) !important;
}

/* Product name */
.product .product-name, .product h3, .product h4 {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  border-bottom: 1px solid var(--hf-line) !important;
}

/* Description — keep Lagom layout, just text colors and truncate big HTML */
.product-desc {
  color: var(--hf-fg-1) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  /* limit listing-page desc to ~6 lines; full desc shown on detail page */
  max-height: 9.3em !important;
  overflow: hidden !important;
  position: relative !important;
}
.product-desc::after {
  content: ''; position: absolute; left:0; right:0; bottom:0; height:32px;
  background: linear-gradient(180deg, transparent, var(--hf-bg-1)) !important;
  pointer-events: none;
}
.product-desc h4, .product-desc h5,
.product-desc table, .product-desc ul {
  display: none !important;
}
.product-desc p { margin: 0 0 6px !important; color: var(--hf-fg-1) !important; }

/* Pricing block — fix invisible price */
.product-pricing {
  background: var(--hf-bg-2) !important;
  border-top: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
}
.product-pricing .price, .product-pricing > .price,
.lagom-product-pricing .price, .package-pricing .price {
  background: transparent !important;
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}
.product-pricing .price * { color: inherit !important; }
.product-pricing-period, .product-pricing-currency,
.starting-from, .price-prefix, .pricing-cycle {
  color: var(--hf-fg-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--hf-mono) !important;
}

/* Order button */
.btn-order-now {
  background: var(--hf-accent) !important;
  border: 1px solid var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
}
.btn-order-now:hover { background: color-mix(in oklab, var(--hf-accent) 90%, white) !important; }

/* Page heading row */
.section-header h1, .section-header .section-title { color: var(--hf-fg-0) !important; }

/* ====================================================================
   Order page — structural fix v2
   ==================================================================== */

/* Stop cards from sharing one col-md-6 horizontally — make each full-width inside its column */
.col-md-6 > .product, .col-md-6 > .lagom-product {
  width: 100% !important;
  flex: none !important;
  margin-bottom: 16px;
}

/* Card root: display block; its children stack normally */
.product, .lagom-product, .package {
  display: block !important;
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* Product HEADER (the white-bg name strip without class) */
.product > header, .product > .product-header, .product header,
.product .product-name, .package > header, .package .package-name {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
  border-bottom: 1px solid var(--hf-line) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  padding: 16px 20px !important;
}

/* Inside body, force vertical stack: description fills width, pricing below */
.product > .product-body, .product > .product-content, .product .product-inner {
  display: block !important;
}

/* Description — full width, capped height */
.product-desc {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--hf-fg-1) !important;
  max-height: 9em !important;
  overflow: hidden !important;
  position: relative !important;
}
.product-desc::after {
  content: ''; position: absolute; left:0; right:0; bottom:0; height:32px;
  background: linear-gradient(180deg, transparent, var(--hf-bg-1)) !important;
  pointer-events: none;
}

/* Hide verbose tables/lists/headings inside listing-card descriptions */
.product-desc h4, .product-desc h5, .product-desc table, .product-desc ul {
  display: none !important;
}
.product-desc p { color: var(--hf-fg-1) !important; margin: 0 0 6px !important; }
.product-desc strong { color: var(--hf-fg-0) !important; }

/* Pricing block — full width on its own row, not floating inside description */
.product-pricing {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: var(--hf-bg-2) !important;
  border-top: 1px solid var(--hf-line) !important;
  padding: 16px 20px !important;
  position: static !important;
  float: none !important;
}
.product-pricing > * { margin: 0 0 4px !important; }
.product-pricing .price {
  background: transparent !important;
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}
.product-pricing .price * { color: inherit !important; white-space: nowrap !important; }
.product-pricing .starting-from, .product-pricing-currency, .product-pricing-period,
.product-pricing > strong, .pricing-cycle {
  color: var(--hf-fg-3) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: var(--hf-mono) !important;
  font-weight: 500 !important;
}

/* Order Now: full width row at the bottom */
.product .btn-order-now, .product a.btn-order-now {
  display: block !important;
  width: calc(100% - 40px) !important;
  margin: 16px 20px !important;
  padding: 12px 20px !important;
  text-align: center !important;
  background: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1px solid var(--hf-accent) !important;
}
.product .btn-order-now:hover { background: color-mix(in oklab, var(--hf-accent) 90%, white) !important; }

/* ====================================================================
   Final fixes — logo + product card footer
   ==================================================================== */

/* === Logo: replace Lagom's text logo with our SVG === */
.logo.logo-text, a.logo.logo-text {
  background-image: url('/assets/img/hostfory-logo-v2.svg') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  width: 170px !important;
  height: 36px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  text-indent: -9999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
}
/* if Lagom upgrades and uses .logo with <img> later, keep image visible */
.logo img { max-height: 36px; height: auto; width: auto; }

/* === Product card: kill the float on inner <footer> so pricing spans full width === */
.product > footer, .product .product-footer, footer.product-footer {
  float: none !important;
  width: 100% !important;
  clear: both !important;
  display: block !important;
  background: var(--hf-bg-2) !important;
  border-top: 1px solid var(--hf-line) !important;
  padding: 0 !important;
}

/* product-desc no longer needs to share row with pricing — full width */
.product .product-desc {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
}
.product { clear: both; }

/* Pricing flex layout: keep "Starting from" / "$110.00 USD" / "Monthly" stacked, full width */
.product-pricing {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px !important;
  padding: 14px 20px 16px !important;
  background: var(--hf-bg-2) !important;
  border-top: 1px solid var(--hf-line) !important;
}
.product-pricing > * { margin: 0 !important; }
.product-pricing .price {
  font-size: 28px !important;
  font-family: var(--hf-mono) !important;
  font-weight: 700 !important;
  color: var(--hf-fg-0) !important;
  white-space: nowrap !important;
  margin-right: 4px !important;
}
.product-pricing .starting-from {
  flex-basis: 100%;
  color: var(--hf-fg-3) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: var(--hf-mono) !important;
}

/* Product header: ensure dark bg always */
.product > header, .product header:first-child {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--hf-line) !important;
  display: block !important;
}
.product > header span, .product header > span { color: var(--hf-fg-0) !important; }

/* === FINAL: footer inside .product is wrapped in <strong> with float:right — kill the float === */
.product footer, .product strong > footer, .product > strong, .package footer {
  float: none !important;
  width: 100% !important;
  display: block !important;
  font-weight: normal !important;
  clear: both !important;
}
.product > strong { display: contents !important; }
.product .product-pricing { width: 100% !important; }

/* === FINAL v2 — actually unfloat the footer (Lagom wraps in <strong>) === */
.product { position: relative !important; }
.product strong, .product > strong, .product .clearfix > strong {
  display: block !important;
  font-weight: normal !important;
  width: 100% !important;
  float: none !important;
}
.product strong > footer, .product footer {
  float: none !important;
  width: 100% !important;
  display: block !important;
  clear: both !important;
}
/* Compact price font + wrap currency on next line if needed */
.product-pricing {
  width: 100% !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.product-pricing .price {
  font-size: 22px !important;
  white-space: normal !important;
  overflow: visible !important;
}
.product-pricing .price strong { display: inline !important; width: auto !important; }

/* ====================================================================
   Configure-product page (cart.php?a=confproduct)
   ==================================================================== */

/* "Configure Server" / "Configurable Options" — Lagom puts a horizontal line
   that visually crosses through the centered text. Make text fully visible by
   placing it on solid bg, OR replace divider with a clean section heading. */
.sub-heading {
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--hf-fg-3) !important;
  font-weight: 600 !important;
  padding: 24px 0 12px !important;
  margin: 8px 0 0 !important;
  border-top: 1px solid var(--hf-line) !important;
  position: relative !important;
}
.sub-heading::after { content: none !important; }
.sub-heading > * {
  background: var(--hf-bg-0) !important;
  padding: 0 12px 0 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* If heading is direct text (no inner span), wrap by setting itself */
.sub-heading {
  background: linear-gradient(to right, var(--hf-bg-0) 0, var(--hf-bg-0) 100%) !important;
  background-size: 0 0 !important; /* no-op, just to ensure no painted border-line cross */
}

/* Sidebar Summary card — fix top clipping */
.summary-box, .lm-summary, .order-summary, [class*="summary"] {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  color: var(--hf-fg-1) !important;
  overflow: visible !important;
}
.summary-box h2, .summary-box h3, .summary-box .summary-title,
.lm-summary-title, [class*="summary"] h2, [class*="summary"] > .h2 {
  color: var(--hf-fg-0) !important;
  margin-top: 0 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
}

/* Form labels */
.field-container > label, .field-container .control-label, .form-group > label {
  color: var(--hf-fg-1) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Help text */
.field-container .help-block, .field-container small {
  color: var(--hf-fg-3) !important;
}

/* Configurable options grid — already mostly OK, ensure 2-col */
.cart-config-options-list, .config-options-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
@media (max-width: 768px) {
  .cart-config-options-list, .config-options-row { grid-template-columns: 1fr !important; }
}

/* Continue button */
.btn-continue, .lm-continue, button[name="continue"], .checkout-continue, .cart-continue, a.btn-continue {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  width: 100% !important;
  text-align: center !important;
}

/* Sales notice alert (yellow border-left) — match warning palette */
.alert-warning, .alert.alert-warning {
  background: color-mix(in oklab, var(--hf-warn) 10%, var(--hf-bg-1)) !important;
  border-left: 3px solid var(--hf-warn) !important;
  color: var(--hf-fg-0) !important;
}
.alert-warning a { color: var(--hf-accent) !important; }

/* "1× Xeon Gold 6138" product header on configure page */
.product-info {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}
.product-info h1, .product-info h2, .product-info .product-title {
  color: var(--hf-fg-0) !important;
}

/* Slider for Additional IPv4 quantity */
.noUi-target, .ui-slider, .lm-slider {
  background: var(--hf-bg-3) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 999px !important;
  height: 6px !important;
}
.noUi-handle, .ui-slider-handle {
  background: var(--hf-accent) !important;
  border: none !important;
  box-shadow: 0 2px 6px oklch(from var(--hf-accent) l c h / 0.5) !important;
  border-radius: 999px !important;
  width: 18px !important;
  height: 18px !important;
}
.noUi-pips, .noUi-marker { color: var(--hf-fg-3) !important; }
.noUi-tooltip {
  background: var(--hf-accent) !important;
  color: #062012 !important;
  border: none !important;
  font-family: var(--hf-mono) !important;
  font-weight: 600 !important;
}

/* Field-container layout polish */
.field-container, .form-group {
  margin-bottom: 18px !important;
}

/* ====================================================================
   Scope corrections — the "hide table/list inside description" rule
   should ONLY apply to the LISTING CARD .product, NOT to the product
   detail page where description lives inside .product-info / .secondary-cart-body
   ==================================================================== */

/* Re-show structured description on configure-product page */
.product-info .product-desc table,
.product-info .product-desc ul,
.product-info .product-desc h4,
.product-info .product-desc h5,
.secondary-cart-body .product-desc table,
.secondary-cart-body .product-desc ul,
.secondary-cart-body .product-desc h4,
.secondary-cart-body .product-desc h5 {
  display: revert !important;
}

/* Style the description table on detail page */
.product-info .product-desc, .secondary-cart-body .product-desc {
  max-height: none !important;
  overflow: visible !important;
}
.product-info .product-desc::after, .secondary-cart-body .product-desc::after {
  content: none !important;
  display: none !important;
}
.product-info .product-desc h4, .secondary-cart-body .product-desc h4 {
  color: var(--hf-fg-0) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 24px 0 12px !important;
}
.product-info .product-desc ul, .secondary-cart-body .product-desc ul {
  padding-left: 20px !important;
  margin: 8px 0 16px !important;
}
.product-info .product-desc ul li, .secondary-cart-body .product-desc ul li {
  margin-bottom: 6px !important;
  font-size: 14px !important;
  color: var(--hf-fg-1) !important;
  line-height: 1.55 !important;
}
.product-info .product-desc ul li strong,
.secondary-cart-body .product-desc ul li strong {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
}

/* Provisioning time table on detail page — proper styling */
.product-info .product-desc table, .secondary-cart-body .product-desc table {
  width: auto !important;
  max-width: 480px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin: 12px 0 24px !important;
  background: var(--hf-bg-0) !important;
}
.product-info .product-desc table th, .secondary-cart-body .product-desc table th {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-3) !important;
  font-family: var(--hf-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--hf-line) !important;
}
.product-info .product-desc table td, .secondary-cart-body .product-desc table td {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-size: 13px !important;
  font-feature-settings: "tnum" !important;
  background: var(--hf-bg-1) !important;
}
.product-info .product-desc table tr:last-child td,
.secondary-cart-body .product-desc table tr:last-child td {
  border-bottom: 0 !important;
}

/* === "CONFIGURE SERVER" / "CONFIGURABLE OPTIONS" — kill the blue === */
.sub-heading,
.sub-heading > *,
.sub-heading strong,
.sub-heading span,
.sub-heading b,
.sub-heading a {
  color: var(--hf-fg-3) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* === Order Summary — the standalone right-rail card on configure page === */
.order-summary, .secondary-cart-summary, [class*="order-summary"], aside.summary {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  color: var(--hf-fg-1) !important;
}
.order-summary .summary-title, .secondary-cart-summary h2,
.order-summary h2, .order-summary h3 {
  color: var(--hf-fg-0) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid var(--hf-line) !important;
  padding-bottom: 14px !important;
  letter-spacing: -0.01em !important;
}
.order-summary .product-name, .order-summary .product-title {
  color: var(--hf-fg-0) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.order-summary .product-cycle, .order-summary .product-group, .order-summary em {
  color: var(--hf-fg-3) !important;
  font-style: italic !important;
  font-size: 12px !important;
}
.order-summary .summary-line, .order-summary > div, .order-summary .price-row {
  color: var(--hf-fg-1) !important;
  font-size: 13px !important;
}
.order-summary .price, .order-summary .total-due, .order-summary .total-price {
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
  font-weight: 700 !important;
}
.order-summary hr { border-color: var(--hf-line) !important; margin: 12px 0 !important; }

/* The big "$110.00 USD" total */
.order-summary .total, .order-summary .total-row > .price,
[class*="total-due"] .price, [class*="total"] strong {
  font-size: 24px !important;
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-weight: 700 !important;
}

/* Billing cycle pill (selected) */
.product-billing-cycle, .billing-cycle-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.product-billing-cycle label, .billing-cycle-options label {
  display: inline-block !important;
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-family: var(--hf-mono) !important;
  font-size: 13px !important;
}
.product-billing-cycle input:checked + label,
.product-billing-cycle label.active,
.billing-cycle-options input:checked + label {
  border-color: var(--hf-accent) !important;
  background: color-mix(in oklab, var(--hf-accent) 8%, var(--hf-bg-1)) !important;
  color: var(--hf-fg-0) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hf-accent) 18%, transparent) !important;
}

/* Hide the orphan billing cycle dropdown that's outside the form group at bottom */
.field-container[id*="billing"] + br + br { display: none !important; }

/* ====================================================================
   Configure-page description: HTML lives directly under .product-info
   (no .product-desc wrapper). Apply same styling at that depth.
   ==================================================================== */
.product-info > h4, .product-info > h5, .product-info h4, .product-info h5,
.secondary-cart-body > h4, .secondary-cart-body > h5 {
  color: var(--hf-fg-0) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 28px 0 12px !important;
}
.product-info > ul, .product-info > ol,
.product-info ul, .product-info ol {
  padding-left: 20px !important;
  margin: 8px 0 16px !important;
}
.product-info > ul li, .product-info ul li {
  margin-bottom: 6px !important;
  font-size: 14px !important;
  color: var(--hf-fg-1) !important;
  line-height: 1.55 !important;
  list-style: disc !important;
}
.product-info > ul li::marker, .product-info ul li::marker {
  color: var(--hf-accent) !important;
}
.product-info ul li strong, .product-info > ul li strong {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
}

/* Provisioning time table — DIRECT child of .product-info */
.product-info > table, .product-info table,
.secondary-cart-body > table {
  width: auto !important;
  max-width: 480px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin: 12px 0 24px !important;
  background: var(--hf-bg-1) !important;
  display: table !important;
}
.product-info table th, .product-info > table th,
.secondary-cart-body table th {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-3) !important;
  font-family: var(--hf-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--hf-line) !important;
}
.product-info table td, .product-info > table td,
.secondary-cart-body table td {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-size: 13px !important;
  font-feature-settings: "tnum" !important;
  background: transparent !important;
}
.product-info table tr:last-child td { border-bottom: 0 !important; }
.product-info table tr:nth-child(even) td { background: oklch(from var(--hf-bg-1) calc(l + 0.02) c h) !important; }

/* Paragraphs inside .product-info */
.product-info > p, .product-info p {
  color: var(--hf-fg-1) !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}
.product-info > p strong, .product-info p strong { color: var(--hf-fg-0) !important; }

/* Product name on detail page */
.product-info > h1:first-child, .product-info h1:first-child,
.product-info > h2:first-child {
  color: var(--hf-fg-0) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.015em !important;
}

/* ====================================================================
   Hide NS1/NS2 prefix fields on dedicated-server configure page —
   we don't run registered nameservers for these products.
   ==================================================================== */
.field-container:has(input[name="ns1prefix"]),
.field-container:has(input[name="ns2prefix"]),
.field-container:has(input[id="ns1prefix"]),
.field-container:has(input[id="ns2prefix"]),
.form-group:has(input[name="ns1prefix"]),
.form-group:has(input[name="ns2prefix"]) {
  display: none !important;
}
/* Fallback for browsers without :has() */
input[name="ns1prefix"], input[name="ns2prefix"],
input#ns1prefix, input#ns2prefix {
  display: none !important;
}

/* ====================================================================
   Cart / Checkout page (cart.php?a=view, ?a=checkout)
   ==================================================================== */

/* Empty-cart message box */
.message, .message-no-data, .lagom-message, .empty-cart-message {
  background: var(--hf-bg-1) !important;
  border: 1px dashed var(--hf-line-2, var(--hf-line)) !important;
  border-radius: 14px !important;
  color: var(--hf-fg-1) !important;
  padding: 60px 24px !important;
  text-align: center !important;
}
.message svg, .message-no-data svg, .empty-cart-message svg {
  color: var(--hf-fg-3) !important;
  opacity: 0.6 !important;
}
.message svg path, .message-no-data svg path { stroke: var(--hf-fg-3) !important; }
.message svg [fill="#"], .message-no-data svg [class*="green"] { fill: var(--hf-accent) !important; }
.message-no-data .message-title, .message h2, .message-no-data h2, .message-no-data > div {
  color: var(--hf-fg-2) !important;
  font-size: 16px !important;
  margin: 16px 0 24px !important;
}
.message-no-data + *, .message-no-data .btn { margin-top: 12px; }

/* Main footer that was white */
.main-footer, .app-footer, footer.main-footer {
  background: var(--hf-bg-0) !important;
  border-top: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-2) !important;
}
.main-footer a { color: var(--hf-fg-1) !important; }
.main-footer a:hover { color: var(--hf-fg-0) !important; }

/* Summary list (right sidebar on cart) */
.summary-list, .summary-box .summary-list, ul.summary-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.summary-list .list-item, ul.summary-list > li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--hf-line) !important;
  font-size: 13px !important;
  color: var(--hf-fg-1) !important;
  gap: 12px !important;
}
.summary-list .list-item:last-child { border-bottom: 0 !important; }
.summary-list .list-item .item-name {
  color: var(--hf-fg-1) !important;
  flex: 1 1 auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.summary-list .list-item .item-value, .summary-list .list-item > .price {
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
/* Faded heading rows ("Totals") */
.summary-list .list-item.faded {
  border-bottom: 0 !important;
  padding: 16px 0 6px !important;
  color: var(--hf-fg-3) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}
.summary-list .list-item.faded .item-name { color: var(--hf-fg-3) !important; }

/* Total Due block */
.total-due, .total-due-today, .totals-total, [class*="total-due"] {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--hf-line) !important;
  text-align: right !important;
}
.total-due .price, .total-due-today .price, [class*="total-due"] .price {
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-weight: 700 !important;
  font-size: 26px !important;
}
.total-due-today small, .total-due small, [class*="total-due"] small {
  color: var(--hf-fg-3) !important;
  display: block !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* "Start Shopping" CTA */
.message-no-data + .btn, .message-no-data .btn,
.message-no-data ~ a.btn, a.btn[href*="cart.php"]:not(.btn-default) {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
}

/* "Review & Checkout" page heading */
.main-header-title, .lagom-page-title {
  color: var(--hf-fg-0) !important;
}

/* Hide also Hostname/Root Password if a server module isn't configured for these
   products. They appear on dedicated configure but are useless without auto-provisioning. */
/* (kept open — only NS1/NS2 explicitly hidden above; uncomment if user wants more) */

/* ====================================================================
   Hide entire "Configure Server" block (no auto-provisioning yet) and
   autofill values via inline JS hook (see /includes/hooks).
   ==================================================================== */
.field-container:has(input[name="hostname"]),
.field-container:has(input[name="rootpw"]),
.field-container:has(input[name="rootpassword"]),
.form-group:has(input[name="hostname"]),
.form-group:has(input[name="rootpw"]),
.form-group:has(input[name="rootpassword"]) {
  display: none !important;
}
input[name="hostname"], input[name="rootpw"], input[name="rootpassword"] {
  display: none !important;
}
/* Hide the now-empty CONFIGURE SERVER section heading + its top divider */
.sub-heading:has(+ .field-container[style*="display: none"]),
.sub-heading + br + br {
  /* leave heading visible but trim padding if entire section is empty */
}
/* Quick way: hide any sub-heading whose text contains "Configure Server" since
   we removed all fields under it */

/* ====================================================================
   Cart sidebar — Subtotal / Checkout button overflow fix
   ==================================================================== */
.summary-list, .summary-list .list-item, ul.summary-list > li {
  overflow: visible !important;
  white-space: normal !important;
}
.summary-list .list-item .item-value {
  text-align: right !important;
  white-space: nowrap !important;
}
.summary-list .list-item.faded {
  display: block !important;
  text-align: left !important;
}
.summary-list .list-item.faded .item-name { display: block !important; }

/* Cart's bordered inner panel — let it grow to its container */
.summary-box, .summary-list-wrap, [class*="summary"] .panel,
[class*="summary"] > .well, [class*="summary"] > div {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Checkout button on cart sidebar */
.btn-checkout, button[name="checkout"], a.btn-checkout, .checkout-btn,
[class*="checkout"] a.btn, .summary-box .btn-primary,
.cart-sidebar .btn-primary {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  background: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
  border: 1px solid var(--hf-accent) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* "Total Due Today $0.00 USD" wrap */
.total-due, .total-due-today, [class*="total-due"] {
  word-break: keep-all !important;
}
.total-due-today .price, .total-due .price, [class*="total-due"] .price {
  font-size: 22px !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Cycles list inside Totals card — make rows compact and full-width */
.summary-list .list-item-cycle, .summary-cycle-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 6px 0 !important;
  border: 0 !important;
  font-family: var(--hf-mono) !important;
  font-size: 12px !important;
  color: var(--hf-fg-2) !important;
}

/* ====================================================================
   Cart / Checkout — final polish
   ==================================================================== */

/* Promo code box — was painted bright accent green */
.search-box, .search-box-primary, .search-box-sm,
.search-box.search-box-primary {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.search-box .search-field, .search-box .search-group {
  background: transparent !important;
}
.search-box .form-control, .search-box input {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 8px !important;
}
.search-box .btn, .search-box button {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.search-box .btn[disabled], .search-box .btn.disabled {
  opacity: 0.6 !important;
}

/* Account-type radios — "Existing Customer Login" / "Create a New Account" */
.panel-check, .panel.panel-check {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}
.panel-check .panel-heading, .panel-check .panel-heading.check {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 0 !important;
}
.panel-check label, .panel-check .panel-heading label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.panel-check label .check-content,
.panel-check label > span,
.panel-check .check-content span {
  color: var(--hf-fg-0) !important;
}
.panel-check.checked, .panel-check input:checked ~ * .panel-check,
.panel-check:has(input:checked) {
  border-color: var(--hf-accent) !important;
  background: color-mix(in oklab, var(--hf-accent) 6%, var(--hf-bg-1)) !important;
}

/* Cart product row */
.cart-product-row, .product-row, .cart-item, tr.product-info,
.cart-table tr {
  background: transparent !important;
}
.cart-product-row .product-name, .cart-table .product-name,
.cart-product-name, .cart-item .item-name,
table.table tr td a:first-child:not(.btn) {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.cart-product-row .product-name a,
.cart-table .product-name a {
  color: var(--hf-fg-0) !important;
}
/* Cart options sub-list */
.cart-product-row .product-options, .cart-product-row .config-options,
.cart-table tr td .product-options, .cart-options-list {
  color: var(--hf-fg-2) !important;
  font-size: 13px !important;
}

/* Make sidebar wider so values don't overflow */
@media (min-width: 992px) {
  .order-summary, .secondary-cart-summary, .summary-box,
  aside.summary, .cart-sidebar, .sidebar-checkout {
    min-width: 280px !important;
  }
}

/* Sidebar TOTALS list — inner styling: cycle name left, value right */
.summary-list .list-item, ul.summary-list > li {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 0 !important;
}
.summary-list .list-item .item-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
}
.summary-list .list-item .item-value, .summary-list .price {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Total Due Today — keep mono large but on one line */
.total-due, .total-due-today, [class*="total-due"], .total-row {
  text-align: right !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--hf-line) !important;
}
.total-due-today, .total-due {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}
.total-due small, .total-due-today small, [class*="total-due"] small,
.total-due > span:first-child, .total-due-today > span:first-child {
  color: var(--hf-fg-3) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
  display: block !important;
  text-align: right !important;
}
.total-due .price, .total-due-today .price, [class*="total-due"] .price,
.total-due strong, .total-due-today strong {
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Dropdown billing-cycle selector inside cart */
.cart-product-row select.form-control, .cart-table select {
  min-width: 140px !important;
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 8px !important;
}

/* Edit / delete buttons in cart row */
.cart-product-row .btn-edit, .cart-table .btn-edit,
a.cart-product-edit {
  background: var(--hf-accent) !important;
  color: #062012 !important;
  border: 1px solid var(--hf-accent) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}
.cart-product-row .btn-delete, .cart-table .btn-delete,
.cart-product-row [class*="trash"], .cart-product-row a[onclick*="remove"] {
  background: transparent !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-2) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* Form fields full-width inside Billing Details */
.panel-check input[type="text"], .panel-check input[type="email"],
.panel-check input[type="password"], .panel-check select {
  width: 100% !important;
}

/* Required asterisk */
label .required, label sup, .required {
  color: var(--hf-danger) !important;
}

/* ====================================================================
   Cart product title + sidebar width final
   ==================================================================== */
.cart-item-title-main, .cart-item-title, .cart-item-title-secondary,
[class*="cart-item-title"] {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.cart-item-title-secondary, .cart-item-subtitle {
  color: var(--hf-fg-2) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.cart-item-title-domain, .cart-item-hostname {
  color: var(--hf-accent) !important;
  font-family: var(--hf-mono) !important;
  font-size: 13px !important;
}

/* Make order summary sidebar wider so $XXX.XX USD doesn't wrap */
.panel.panel-summary, .panel-summary, .panel-summary-default,
.order-summary, aside.summary {
  min-width: 320px !important;
  max-width: none !important;
  width: auto !important;
}

/* Ensure totals + checkout button wrap correctly inside the wider panel */
.panel-summary .total-due-today,
.panel-summary [class*="total-due"] {
  display: block !important;
  text-align: right !important;
}
.panel-summary .total-due-today .price,
.panel-summary [class*="total-due"] .price,
.panel-summary [class*="total-due"] strong {
  font-size: 22px !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Phone-number Ukraine flag overlay — ensure placeholder doesn't overlap */
input[type="tel"], .iti--separate-dial-code input {
  padding-left: 90px !important;
}
.iti__selected-flag, .iti__country-list { background: var(--hf-bg-3) !important; }

/* ====================================================================
   .panel-check.checked — Lagom paints a light-gray border (rgb(233,234,236))
   when selected. Replace with our accent so it doesn't look like a white seam.
   ==================================================================== */
.panel-check.checked,
.panel-check.checked.paypal,
.panel-check.checked.nowpayments,
.panel.panel-check.checked {
  border: 1px solid var(--hf-accent) !important;
  background: color-mix(in oklab, var(--hf-accent) 7%, var(--hf-bg-1)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hf-accent) 35%, transparent) inset !important;
}
.panel-check.checked .panel-heading,
.panel-check.checked label,
.panel-check.checked .check-content,
.panel-check.checked span {
  color: var(--hf-fg-0) !important;
}

/* Also clean up the outline that Lagom sets on focus/active */
.panel-check, .panel-check.checked, .panel.panel-check {
  outline: none !important;
}

/* Custom radio dot inside the panels — match accent properly */
.panel-check input[type="radio"] + label::before,
.panel-check .check-radio,
.panel-check .check-mark {
  border-color: var(--hf-line-2, var(--hf-line)) !important;
}
.panel-check.checked input[type="radio"] + label::before,
.panel-check.checked .check-radio,
.panel-check.checked .check-mark {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
}

/* ====================================================================
   panel-group wrapper — Bootstrap default has white bg that shows
   through the 12px gap between .panel-check items. Make transparent.
   ==================================================================== */
.panel-group, .panel-group-condensed, .panel-group.m-b-0,
.panel-group.panel-group-condensed.m-b-0 {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Bootstrap collapse content fragments inside panel-group */
.panel-group .panel + .panel { margin-top: 0 !important; }

/* Remove any focus-outline residue Lagom leaves on .panel-check */
.panel-check, .panel.panel-check, .panel-check:focus, .panel-check.checked {
  outline: 0 none !important;
  outline-offset: 0 !important;
}

/* ====================================================================
   Login / Register pages (.login-wrapper)
   ==================================================================== */
.login-wrapper, .login-card, .lagom-login-card,
.register-wrapper, .lagom-register-wrapper {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 16px !important;
  padding: 40px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  color: var(--hf-fg-1) !important;
  max-width: 480px !important;
}

.login-title, .login-wrapper h1, .login-wrapper h2,
.register-wrapper h1, .register-wrapper h2 {
  color: var(--hf-fg-0) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  margin: 0 0 24px !important;
  background: transparent !important;
}

.login-wrapper label, .login-wrapper .form-label,
.register-wrapper label, .register-wrapper .form-label {
  color: var(--hf-fg-1) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.login-wrapper input[type="text"], .login-wrapper input[type="email"],
.login-wrapper input[type="password"], .login-wrapper .form-control,
.register-wrapper input, .register-wrapper .form-control {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
}
.login-wrapper input:focus, .register-wrapper input:focus {
  border-color: var(--hf-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hf-accent) 18%, transparent) !important;
  outline: none !important;
}
.login-wrapper input::placeholder { color: var(--hf-fg-3) !important; }

/* Forgot? link */
.login-wrapper a, .register-wrapper a {
  color: var(--hf-accent) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.login-wrapper a:hover { color: oklch(from var(--hf-accent) calc(l + 0.05) c h) !important; }

/* Remember Me checkbox */
.login-wrapper .form-check, .login-wrapper .checkbox,
.login-wrapper .remember-me {
  color: var(--hf-fg-1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.login-wrapper .form-check label,
.login-wrapper .checkbox label,
.login-wrapper .remember-me label {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--hf-fg-1) !important;
}
.login-wrapper input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line-2) !important;
  border-radius: 4px !important;
  accent-color: var(--hf-accent) !important;
}

/* Login button — solid, full-width */
.login-wrapper .btn, .login-wrapper button[type="submit"],
.login-wrapper .btn-primary, .login-wrapper .btn-login,
.register-wrapper .btn-primary, .register-wrapper button[type="submit"] {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  border-radius: 10px !important;
  width: 100% !important;
  cursor: pointer !important;
}
.login-wrapper .btn:hover, .login-wrapper button[type="submit"]:hover {
  background: oklch(from var(--hf-accent) calc(l + 0.04) c h) !important;
}

/* "Not a member yet? Create a New Account" footer text */
.login-wrapper > *:last-child, .login-wrapper .text-center:last-child,
.login-footer-text {
  color: var(--hf-fg-2) !important;
  font-size: 14px !important;
  text-align: center !important;
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--hf-line) !important;
}

.page-login .l-content, .page-login .app-main,
.page-register .l-content, .page-register .app-main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 200px) !important;
}

/* "Forgot?" link in field-row */
.login-wrapper .field-container .help-block a,
.login-wrapper a[href*="forgot"], a.forgot-password {
  color: var(--hf-accent) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Register form — wider so billing address fields breathe */
.register-wrapper, .lagom-register-wrapper, body.page-register .login-wrapper {
  max-width: 720px !important;
}
.register-wrapper .row, .register-wrapper .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
@media (max-width: 640px) {
  .register-wrapper .row, .register-wrapper .form-row { grid-template-columns: 1fr !important; }
  .register-wrapper, body.page-register .login-wrapper { max-width: 100% !important; padding: 24px !important; }
}
/* Section headings inside register */
.register-wrapper h3, .register-wrapper .section-title,
.lagom-register-wrapper h3 {
  text-align: left !important;
  font-size: 18px !important;
  margin: 24px 0 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--hf-line) !important;
}
.register-wrapper h3:first-of-type, .register-wrapper .section-title:first-of-type {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Phone Number placeholder — tighten so flag + +380 + placeholder don't overlap */
.iti--separate-dial-code .iti__selected-flag { width: 84px !important; }
.iti--separate-dial-code input[type="tel"] { padding-left: 96px !important; }
.iti__country-list { background: var(--hf-bg-3) !important; color: var(--hf-fg-0) !important; border: 1px solid var(--hf-line) !important; border-radius: 8px !important; }

/* ====================================================================
   Register page — wrapper uses .login-wrapper, body has .page-clientregister
   ==================================================================== */
body.page-clientregister .login-wrapper,
body.register-page .login-wrapper,
body.page-register .login-wrapper {
  max-width: 800px !important;
  width: 100% !important;
  padding: 40px 48px !important;
}

/* Two-column form rows on register */
body.page-clientregister .login-wrapper .row,
body.register-page .login-wrapper .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 20px !important;
}
body.page-clientregister .login-wrapper .row > div,
body.register-page .login-wrapper .row > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* Section dividers */
body.page-clientregister .login-wrapper h1,
body.page-clientregister .login-wrapper h2,
body.page-clientregister .login-wrapper h3 {
  text-align: left !important;
}
body.page-clientregister .login-wrapper h2 {
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--hf-fg-3) !important;
  margin: 28px 0 16px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--hf-line) !important;
  font-weight: 600 !important;
}
body.page-clientregister .login-wrapper h2:first-of-type {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page-clientregister .login-wrapper h1.login-title {
  font-size: 32px !important;
  text-align: left !important;
  margin-bottom: 28px !important;
}

@media (max-width: 720px) {
  body.page-clientregister .login-wrapper .row,
  body.register-page .login-wrapper .row {
    grid-template-columns: 1fr !important;
  }
  body.page-clientregister .login-wrapper {
    padding: 24px !important;
    max-width: 100% !important;
  }
}

/* ====================================================================
   intl-tel-input (old API: classes without iti__ prefix) — country picker
   ==================================================================== */

/* Wrapper */
.intl-tel-input { width: 100% !important; }
.intl-tel-input.separate-dial-code .selected-flag {
  background: var(--hf-bg-2) !important;
  border-right: 1px solid var(--hf-line) !important;
  border-radius: 10px 0 0 10px !important;
  width: auto !important;
  min-width: 84px !important;
  padding: 0 8px 0 8px !important;
  display: flex !important;
  align-items: center !important;
}
.intl-tel-input .selected-dial-code {
  color: var(--hf-fg-1) !important;
  font-family: var(--hf-mono) !important;
  font-weight: 500 !important;
  padding-left: 6px !important;
}
.intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 96px !important;
  background: var(--hf-bg-0) !important;
  color: var(--hf-fg-0) !important;
  border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  border-radius: 10px !important;
}
.intl-tel-input.separate-dial-code input[type="tel"]::placeholder {
  color: var(--hf-fg-3) !important;
}

/* Dropdown country list */
.intl-tel-input .country-list {
  background: var(--hf-bg-2) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
  color: var(--hf-fg-0) !important;
  max-height: 280px !important;
  margin-top: 4px !important;
}
.intl-tel-input .country-list .country {
  padding: 8px 14px !important;
  color: var(--hf-fg-1) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
  background: var(--hf-bg-3) !important;
  color: var(--hf-fg-0) !important;
}
.intl-tel-input .country-list .country.active {
  background: color-mix(in oklab, var(--hf-accent) 12%, var(--hf-bg-2)) !important;
  color: var(--hf-fg-0) !important;
}
.intl-tel-input .country-list .country .country-name {
  color: var(--hf-fg-0) !important;
}
.intl-tel-input .country-list .country .dial-code {
  color: var(--hf-fg-3) !important;
  font-family: var(--hf-mono) !important;
  margin-left: auto !important;
}
.intl-tel-input .country-list .divider {
  border-bottom-color: var(--hf-line) !important;
}
/* Search box if present */
.intl-tel-input .country-list .search-container input {
  background: var(--hf-bg-3) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
}

/* Hide overlap of placeholder when value/dial-code is showing */
.intl-tel-input.separate-dial-code .selected-flag .arrow {
  border-top-color: var(--hf-fg-3) !important;
}

/* Phone selector — wider flag area so "+380" fits */
.intl-tel-input.separate-dial-code .selected-flag {
  min-width: 104px !important;
  padding: 0 12px !important;
}
.intl-tel-input.separate-dial-code .selected-flag .selected-dial-code {
  min-width: 50px !important;
  padding-left: 8px !important;
  padding-right: 4px !important;
}
.intl-tel-input.separate-dial-code .selected-flag .iti-arrow,
.intl-tel-input.separate-dial-code .selected-flag .arrow {
  margin-left: 4px !important;
  flex: 0 0 auto !important;
}
.intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 116px !important;
}

/* Phone selector — explicit width on .selected-flag (was stretching to 100%) */
.intl-tel-input.separate-dial-code .selected-flag {
  width: 100px !important;
  max-width: 100px !important;
  min-width: 100px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}
.intl-tel-input.separate-dial-code .selected-flag .iti-flag,
.intl-tel-input.separate-dial-code .selected-flag .flag-img {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.intl-tel-input.separate-dial-code .selected-flag .selected-dial-code {
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  padding: 0 0 0 4px !important;
}
.intl-tel-input.separate-dial-code .selected-flag .iti-arrow,
.intl-tel-input.separate-dial-code .selected-flag .arrow {
  flex: 0 0 auto !important;
  margin-left: 2px !important;
}
.intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 110px !important;
}
.intl-tel-input { position: relative !important; }

/* Phone selector — keep flag + "+380" + chevron on ONE row, no stack */
.intl-tel-input.separate-dial-code .selected-flag {
  width: 116px !important;
  max-width: 116px !important;
  min-width: 116px !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  padding: 0 10px !important;
  gap: 6px !important;
}
.intl-tel-input.separate-dial-code .selected-flag > * {
  display: inline-flex !important;
  align-items: center !important;
}
.intl-tel-input.separate-dial-code .selected-flag .iti-flag {
  width: 20px !important;
  height: 14px !important;
  flex: 0 0 20px !important;
}
.intl-tel-input.separate-dial-code .selected-flag .selected-dial-code {
  flex: 0 0 auto !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.intl-tel-input.separate-dial-code .selected-flag .iti-arrow,
.intl-tel-input.separate-dial-code .selected-flag .arrow {
  flex: 0 0 8px !important;
  margin-left: auto !important;
  border-top: 4px solid var(--hf-fg-3) !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
}
.intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 124px !important;
}

/* Phone selector — kill absolute positioning of flag/arrow so they sit in a row */
.intl-tel-input.separate-dial-code .selected-flag .iti-flag,
.intl-tel-input.separate-dial-code .selected-flag .flag-img,
.intl-tel-input.separate-dial-code .selected-flag .iti-arrow,
.intl-tel-input.separate-dial-code .selected-flag .arrow {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.intl-tel-input.separate-dial-code .selected-flag .selected-dial-code {
  position: static !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 14px !important;
}
.intl-tel-input.separate-dial-code .selected-flag {
  display: inline-flex !important;
  align-items: center !important;
}

/* Phone selector — high-specificity overrides for absolute positioning */
html body .intl-tel-input.separate-dial-code .selected-flag .iti-flag,
html body .intl-tel-input.separate-dial-code .selected-flag .flag-img,
html body .intl-tel-input.separate-dial-code .selected-flag .iti-arrow,
html body .intl-tel-input.separate-dial-code .selected-flag .arrow {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
}
html body .intl-tel-input.separate-dial-code .selected-flag {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 116px !important;
  padding: 0 10px !important;
}
html body .intl-tel-input.separate-dial-code .selected-flag .selected-dial-code {
  position: relative !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Phone selector — tighten gap between "+380" and chevron */
html body .intl-tel-input.separate-dial-code .selected-flag {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  gap: 6px !important;
}
html body .intl-tel-input.separate-dial-code .selected-flag .iti-arrow,
html body .intl-tel-input.separate-dial-code .selected-flag .arrow {
  margin: 0 !important;
}
html body .intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 102px !important;
}

/* Bump input padding-left so placeholder doesn't get clipped by selector area */
html body .intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 116px !important;
}
html body .intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 130px !important;
}

/* Form rows — align inputs across columns even when labels/help-text differ in height */
.row .form-group, .row .field-container {
  display: flex !important;
  flex-direction: column !important;
}
.row .form-group > input,
.row .form-group > .form-control,
.row .field-container > input,
.row .field-container > .form-control {
  margin-top: auto !important;
}

/* Even better: keep label area same height regardless of helper text */
.row .form-group > label,
.row .field-container > label {
  min-height: 22px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Helper "at least 5 characters" + tooltip icon — inline next to label, no row growth */
.form-group label + .help-text, .form-group label .help-block,
.form-group label small, label .help-tooltip {
  font-size: 12px !important;
  color: var(--hf-fg-3) !important;
  font-weight: 400 !important;
}

/* ====================================================================
   Modal backdrop — Lagom shows it bright white. Make dark + blurred.
   ==================================================================== */
.modal-backdrop, .modal-backdrop.in, .modal-backdrop.show,
.lagom-modal-backdrop, .fade.modal-backdrop {
  background: rgba(2, 6, 12, 0.78) !important;
  opacity: 1 !important;
  backdrop-filter: blur(6px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
}

/* Modal panel itself — already styled but reinforce */
.modal-content, .modal-dialog .modal-content {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 14px !important;
  color: var(--hf-fg-1) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
}
.modal-header { border-bottom: 1px solid var(--hf-line) !important; padding: 18px 22px !important; }
.modal-header .modal-title, .modal-header h2, .modal-header h3, .modal-header h4 {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}
.modal-header .close, .modal-header button.close, .modal-header .btn-close {
  background: transparent !important;
  color: var(--hf-fg-2) !important;
  opacity: 1 !important;
  border: 0 !important;
  font-size: 22px !important;
  filter: none !important;
}
.modal-header .close:hover { color: var(--hf-fg-0) !important; }

.modal-body { padding: 20px 22px !important; color: var(--hf-fg-1) !important; }
.modal-footer {
  border-top: 1px solid var(--hf-line) !important;
  padding: 14px 22px !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}
.modal-footer .btn-primary {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
}
.modal-footer .btn-default, .modal-footer .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
}
.modal-footer .btn-default:hover, .modal-footer .btn-secondary:hover {
  background: var(--hf-bg-2) !important;
}

/* Form rows — true bottom-alignment for inputs across columns */
.row .col-md-6, .row .col-sm-6, .row .col-md-4, .row .col-sm-4 {
  display: flex !important;
  flex-direction: column !important;
}
.row .col-md-6 > .form-group, .row .col-md-6 > .field-container,
.row .col-sm-6 > .form-group, .row .col-sm-6 > .field-container {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.row .col-md-6 > .form-group > input,
.row .col-md-6 > .form-group > .form-control,
.row .col-md-6 > .form-group > select,
.row .col-md-6 > .form-group > textarea,
.row .col-md-6 > .form-group > .input-group {
  margin-top: auto !important;
}

/* Inputs sit directly under their labels (override prior margin-top:auto) */
html body .row .col-md-6 > .form-group > input,
html body .row .col-md-6 > .form-group > .form-control,
html body .row .col-md-6 > .form-group > select,
html body .row .col-md-6 > .form-group > textarea,
html body .row .col-md-6 > .form-group > .input-group {
  margin-top: 0 !important;
}
/* Don't stretch form-group to full column height */
html body .row .col-md-6 > .form-group, html body .row .col-md-6 > .field-container {
  flex: 0 0 auto !important;
  height: auto !important;
}
/* Keep label same height across columns so inputs align naturally */
html body .row .form-group > label, html body .row .field-container > label {
  min-height: 24px !important;
  height: 24px !important;
  align-items: center !important;
}

/* Password label wrapper (.password-content-top) — make same height as plain label */
html body .form-group .password-content.password-content-top {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 0 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
/* Lagom wraps the input in .input-password-strenght — kill any extra margins */
html body .form-group > .input-password-strenght {
  margin: 0 !important;
  padding: 0 !important;
}
/* Generate password button row directly below input */
html body .form-group > .password-content:not(.password-content-top) {
  margin-top: 12px !important;
}

/* Login wrapper — wider so "Secure Client Login" fits on one line */
body.page-login .login-wrapper,
body.login-page .login-wrapper {
  max-width: 560px !important;
  width: 100% !important;
  padding: 48px 56px !important;
}
body.page-login .login-wrapper .login-title,
body.page-login .login-wrapper h1 {
  font-size: 30px !important;
  white-space: nowrap !important;
}
@media (max-width: 600px) {
  body.page-login .login-wrapper {
    padding: 32px 24px !important;
    max-width: 100% !important;
  }
  body.page-login .login-wrapper .login-title { white-space: normal !important; font-size: 24px !important; }
}

/* Lagom .login wrapper has max-width:380px hard-set — widen it */
body.page-login .login, body.login-page .login, .login {
  max-width: 560px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
/* Register page also has .page-login class — override .login width back to wide */
body.page-clientregister .login,
body.register-page .login,
body.page-register .login {
  max-width: 800px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
body.page-clientregister .login-wrapper,
body.register-page .login-wrapper {
  max-width: 800px !important;
  padding: 40px 48px !important;
}
@media (max-width: 720px) {
  body.page-clientregister .login,
  body.page-clientregister .login-wrapper { max-width: 100% !important; padding: 24px !important; }
}

/* Register .login.login-lg target — explicit max-width */
body.page-clientregister .login,
body.page-clientregister .login.login-lg,
body.register-page .login,
body.register-page .login.login-lg {
  max-width: 800px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Login page .login (without login-lg) — narrower */
body.page-login:not(.page-clientregister):not(.register-page) .login {
  max-width: 560px !important;
  width: 100% !important;
}

/* ====================================================================
   Login + Register page centering — clean, no flex on body/app-main
   ==================================================================== */
body.page-login, body.page-clientregister, body.register-page {
  background: var(--hf-bg-0) !important;
}

/* Login (.login or .login.login-lg) — centered via margin auto */
body.page-login .login,
body.register-page .login {
  margin: 60px auto !important;
  width: 100% !important;
}
/* Login page only (not register) — narrower */
body.page-login:not(.page-clientregister):not(.register-page) .login {
  max-width: 560px !important;
}
/* Register page — wider */
body.page-clientregister .login,
body.page-clientregister .login.login-lg,
body.register-page .login,
body.register-page .login.login-lg {
  max-width: 800px !important;
}

/* Wrapper sizing */
body.page-login:not(.page-clientregister):not(.register-page) .login-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding: 48px 56px !important;
}
body.page-clientregister .login-wrapper,
body.register-page .login-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding: 40px 48px !important;
}

@media (max-width: 720px) {
  body.page-login .login-wrapper, body.page-clientregister .login-wrapper { padding: 24px !important; }
  body.page-clientregister .login, body.page-clientregister .login.login-lg { max-width: 100% !important; }
}

/* ====================================================================
   Order Summary — kill double-card. .summary-content sits inside
   .panel-summary which already has bg+border. Make inner transparent.
   ==================================================================== */
.panel-summary .summary-content,
.panel-summary .summary-content.content,
.panel-summary > .panel-body,
.panel-summary > .panel-body > .summary-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.panel-summary > .panel-heading {
  background: transparent !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--hf-line) !important;
  margin-bottom: 16px !important;
}
.panel-summary > .panel-heading .panel-title {
  font-size: 16px !important;
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.panel-summary > .panel-body {
  padding: 0 !important;
}

/* Loader/spinner inside summary should be hidden when not loading */
.panel-summary .loader { padding: 0 !important; margin: 0 !important; }

/* Strip the inner card styling from .summary-list (was matched by [class*="summary"]) */
ul.summary-list, .summary-list {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 0 12px !important;
}
.panel-summary ul.summary-list:last-of-type { margin-bottom: 0 !important; }

/* Subtotal row should look like the regular summary row */
ul.summary-list > li.list-item, ul.summary-list > li {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hf-line) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
}
ul.summary-list > li:last-child { border-bottom: 0 !important; }
ul.summary-list > li.list-item.faded {
  border-top: 1px solid var(--hf-line) !important;
  margin-top: 10px !important;
  padding-top: 14px !important;
}

/* Hide the mobile-only sticky order-summary bar on desktop */
@media (min-width: 768px) {
  .order-summary-mob, .order-summary.order-summary-mob, .order-summary.is-fixed {
    display: none !important;
  }
}

/* Sidebar-sticky wrapper — must NOT have a card look (its child .panel-summary already does) */
.sidebar-sticky, .sidebar-sticky-summary, .sidebar-sticky.sidebar-sticky-summary {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Hide mobile-only fixed sticky summary on desktop (forced) */
.order-summary.order-summary-mob, .order-summary-mob, .order-summary.is-fixed {
  display: none !important;
}
@media (max-width: 767px) {
  .order-summary.order-summary-mob { display: block !important; }
}

/* The mobile sticky summary is always a visual duplicate of the right-rail summary
   on this layout — hide it everywhere */
.order-summary.order-summary-mob, .order-summary-mob {
  display: none !important;
}

/* ====================================================================
   Client area data tables (services / domains / invoices / tickets)
   ==================================================================== */
.table-container, .listtable, .dataTables_wrapper {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  color: var(--hf-fg-1) !important;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
  color: var(--hf-fg-2) !important;
  padding: 12px 18px !important;
}
.dataTables_wrapper select, .dataTables_wrapper input[type="search"] {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* Table itself */
table.table, table.table-list, table.dataTable {
  background: transparent !important;
  color: var(--hf-fg-1) !important;
  margin: 0 !important;
}
table.table thead th, table.dataTable thead th {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-3) !important;
  font-family: var(--hf-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hf-line) !important;
  padding: 14px 18px !important;
}
table.table tbody td, table.dataTable tbody td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hf-line-soft, var(--hf-line)) !important;
  color: var(--hf-fg-1) !important;
  padding: 16px 18px !important;
  vertical-align: middle !important;
}
table.table tbody tr:last-child td { border-bottom: 0 !important; }
table.table tbody tr:hover, table.dataTable tbody tr:hover {
  background: var(--hf-bg-2) !important;
}

/* Bootstrap "View / All Entries" select wrapper */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--hf-fg-2) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dataTables_wrapper .dataTables_length .form-control, .dataTables_wrapper .dataTables_length select.form-control {
  background: var(--hf-bg-0) !important;
  color: var(--hf-fg-0) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 8px !important;
}

/* Pagination */
.dataTables_wrapper .pagination .page-link, .pagination .page-link {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-1) !important;
  border: 1px solid var(--hf-line) !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
}
.dataTables_wrapper .pagination .page-item.active .page-link, .pagination .page-item.active .page-link {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
  opacity: 0.4 !important;
}

/* Status badges (Active / Terminated / Pending / Suspended) */
.label-active, .label-status-active, .text-active, .badge.bg-success {
  color: var(--hf-accent) !important;
}
.label-terminated, .text-terminated, .label-cancelled, .text-suspended, .text-cancelled {
  color: var(--hf-fg-3) !important;
}
.text-pending, .label-pending { color: var(--hf-warn, var(--hf-hot)) !important; }
.status-dot, .lm-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }

/* Row meta (hostname, vps-29 etc) */
table.table-list tbody td a { color: var(--hf-accent) !important; }
table.table-list tbody td .text-muted, table.table-list tbody td small { color: var(--hf-fg-3) !important; }

/* Action menu (kebab "...") */
.dropdown-toggle, .lm-table-actions {
  color: var(--hf-fg-2) !important;
}
.dropdown-toggle:hover { color: var(--hf-fg-0) !important; }

/* Sort icons in TH */
table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after {
  color: var(--hf-fg-3) !important;
}

/* "Show 10 entries" wrapping with bg pill */
.dataTables_length, .dataTables_filter {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: var(--hf-bg-2) !important;
  border-bottom: 1px solid var(--hf-line) !important;
  padding: 12px 18px !important;
}

/* ====================================================================
   "View [All Entries ▼]" filter dropdown + datatables filter input
   ==================================================================== */

/* Dropdown toggle button (the trigger) */
.dataTables_length .dropdown-toggle, .dataTables_filter .dropdown-toggle,
.lm-table-filter .dropdown-toggle, .listtable .dropdown-toggle {
  background: var(--hf-bg-2) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dataTables_length .dropdown-toggle:hover { background: var(--hf-bg-3) !important; color: var(--hf-fg-0) !important; }

/* Dropdown menu (open) */
.dropdown-menu, .dropdown-menu.show {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a, .dropdown-menu .dropdown-item, .dropdown-menu li {
  background: transparent !important;
  color: var(--hf-fg-1) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu .dropdown-item:hover,
.dropdown-menu li:hover, .dropdown-menu li:hover > a {
  background: var(--hf-bg-3) !important;
  color: var(--hf-fg-0) !important;
}
.dropdown-menu > li.active, .dropdown-menu > li.active > a,
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active,
.dropdown-menu > li.selected > a, .dropdown-menu li.selected,
.dropdown-menu li[aria-selected="true"] {
  background: color-mix(in oklab, var(--hf-accent) 12%, var(--hf-bg-1)) !important;
  color: var(--hf-accent) !important;
}

/* Bootstrap-select styled dropdowns */
.bootstrap-select .dropdown-toggle, .bootstrap-select .filter-option {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 8px !important;
}
.bootstrap-select .dropdown-menu .selected a {
  background: color-mix(in oklab, var(--hf-accent) 12%, var(--hf-bg-1)) !important;
  color: var(--hf-accent) !important;
}

/* Status dot inside dropdown options */
.dropdown-menu li .status-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}

/* Filter (search) input — restore proper width */
.dataTables_filter, .dataTables_length {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 200px !important;
}
.dataTables_filter input[type="search"], .dataTables_filter input.form-control {
  width: 100% !important;
  min-width: 220px !important;
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}
.dataTables_filter label { width: 100% !important; }

/* Top toolbar (Length + Filter) — proper space-between */
.dataTables_wrapper > .row:first-of-type, .listtable > .row:first-of-type,
.dataTables_wrapper .top, .listtable .top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: var(--hf-bg-2) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--hf-line) !important;
  margin: 0 !important;
}

/* Bottom toolbar (info + pagination) */
.dataTables_wrapper > .row:last-of-type {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: var(--hf-bg-2) !important;
  padding: 10px 14px !important;
  border-top: 1px solid var(--hf-line) !important;
  margin: 0 !important;
}

/* "View" + "Show" labels next to selectors — keep label inline left of select */
.dataTables_length, .dataTables_filter {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Status pills/labels in dropdowns + table cells */
.status, span.status {
  color: var(--hf-fg-1) !important;
}
.status.status-active, .status-active, .label-active, .text-active,
span.status-active {
  color: var(--hf-accent) !important;
}
.status.status-terminated, .status-terminated, .label-terminated, .text-terminated,
span.status-terminated {
  color: var(--hf-fg-2) !important;
}
.status.status-suspended, .status-suspended, .label-suspended, .text-suspended,
span.status-suspended {
  color: var(--hf-danger) !important;
}
.status.status-pending, .status-pending, .label-pending, .text-pending,
span.status-pending {
  color: var(--hf-warn, var(--hf-hot)) !important;
}
.status.status-cancelled, .status-cancelled, .label-cancelled, .text-cancelled,
span.status-cancelled {
  color: var(--hf-fg-3) !important;
}

/* Status dot before label — colored circle */
.status::before, .status-active::before, .status-terminated::before,
.status-suspended::before, .status-pending::before, .status-cancelled::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.9;
}

/* Inside dropdown menu items, ensure full row clickable area readable */
.dropdown-menu li a, .dropdown-menu .dropdown-item {
  color: var(--hf-fg-1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Hide DataTables built-in filter (page already has its own "Enter search term..." input above) */
.dataTables_wrapper .dataTables_filter, .listtable .dataTables_filter {
  display: none !important;
}

/* All green/accent buttons must have dark text — covers .btn-success/.btn-primary in any size combo */
a.btn.btn-success, a.btn.btn-primary, button.btn-success, button.btn-primary,
.btn.btn-success, .btn.btn-primary,
.btn-success.btn-sm, .btn-success.btn-block, .btn-success.btn-lg,
.btn-primary.btn-sm, .btn-primary.btn-block, .btn-primary.btn-lg,
a.btn-success, a.btn-primary {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
}
a.btn.btn-success:hover, a.btn.btn-primary:hover,
.btn.btn-success:hover, .btn.btn-primary:hover {
  background: oklch(from var(--hf-accent) calc(l + 0.05) c h) !important;
  color: #062012 !important;
}

/* ====================================================================
   Invoice page (viewinvoice.php)
   ==================================================================== */
.invoice {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 14px !important;
  color: var(--hf-fg-1) !important;
  padding: 32px !important;
  box-shadow: none !important;
}
.invoice h1, .invoice h2, .invoice h3, .invoice h4 {
  color: var(--hf-fg-0) !important;
}
.invoice .invoice-header, .invoice .invoice-meta, .invoice .invoice-info,
.invoice .invoice-from, .invoice .invoice-to, .invoice .invoice-payment-status {
  background: transparent !important;
  color: var(--hf-fg-1) !important;
}
.invoice .invoice-status-paid, .invoice .label-paid, .invoice .text-paid,
.invoice .invoice-status-unpaid, .invoice .label-unpaid, .invoice .text-unpaid {
  font-family: var(--hf-mono) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.invoice .invoice-status-paid, .invoice .label-paid, .invoice .text-paid {
  color: var(--hf-accent) !important;
}
.invoice .invoice-status-unpaid, .invoice .label-unpaid, .invoice .text-unpaid {
  color: var(--hf-warn, var(--hf-hot)) !important;
}

/* Invoice line items table */
.invoice table, .invoice .table, .invoice .invoice-items {
  background: transparent !important;
  color: var(--hf-fg-1) !important;
  border-color: var(--hf-line) !important;
  width: 100% !important;
  margin: 24px 0 !important;
}
.invoice table th, .invoice .table th {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-3) !important;
  font-family: var(--hf-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--hf-line) !important;
  border-top: 0 !important;
}
.invoice table td, .invoice .table td {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--hf-line-soft, var(--hf-line)) !important;
  padding: 12px 16px !important;
  color: var(--hf-fg-1) !important;
  vertical-align: middle !important;
}
.invoice table tr:last-child td { border-bottom: 0 !important; }
.invoice table tfoot td, .invoice .invoice-totals td,
.invoice .invoice-summary td {
  background: var(--hf-bg-2) !important;
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
}

/* Final total row */
.invoice .balance-due, .invoice .invoice-balance, .invoice .invoice-total-due,
.invoice tr.total-row td, .invoice tr:last-child td {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
}

/* Payment method buttons + Pay Now */
.invoice .btn-success, .invoice .pay-now-button, .invoice button[name="paynow"],
.invoice .btn-primary {
  background: var(--hf-accent) !important;
  border-color: var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
  border-radius: 8px !important;
}

/* "From" / "To" address blocks */
.invoice address, .invoice .address-block {
  color: var(--hf-fg-1) !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.invoice address strong, .invoice address b, .invoice .company-name {
  color: var(--hf-fg-0) !important;
}

/* Invoice number / date headings */
.invoice .invoice-number, .invoice .invoice-date {
  font-family: var(--hf-mono) !important;
  color: var(--hf-fg-2) !important;
}
.invoice .invoice-number strong, .invoice .invoice-date strong {
  color: var(--hf-fg-0) !important;
}

/* Logo image — invert if it's dark on white logo */
.invoice .invoice-logo, .invoice .logo-img {
  filter: brightness(1.1) !important;
}

/* Invoice header text */
.invoice .invoice-title, span.invoice-title {
  color: var(--hf-fg-0) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Invoice meta labels (Invoice Date / Payment Method labels) */
.invoice .list-info-text, span.list-info-text,
.invoice .list-info-label, .invoice .meta-label {
  color: var(--hf-fg-3) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
}
.invoice .list-info-value, span.list-info-value, .invoice dd, .invoice .meta-value {
  color: var(--hf-fg-0) !important;
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
}

/* ====================================================================
   Product Details / Manage Product page — Billing Details + similar panels
   ==================================================================== */
.panel-body .row, .card-body .row,
.panel .row, .card .row,
.panel-body .col-xs-6, .panel-body .col-6, .panel-body .col-md-12,
.panel-body [class*="col-"], .card-body [class*="col-"] {
  color: var(--hf-fg-1) !important;
}
.panel-body .row > div, .card-body .row > div {
  color: var(--hf-fg-1) !important;
}

/* Label/value pattern: first col is label (muted), second col is value (bright) */
.panel-body .row > .col-xs-6:first-child,
.panel-body .row > .col-6:first-child,
.card-body .row > .col-xs-6:first-child,
.card-body .row > .col-6:first-child {
  color: var(--hf-fg-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.panel-body .row > .col-xs-6:last-child,
.panel-body .row > .col-6:last-child,
.card-body .row > .col-xs-6:last-child,
.card-body .row > .col-6:last-child {
  color: var(--hf-fg-0) !important;
  font-weight: 500 !important;
  font-family: var(--hf-mono) !important;
  font-feature-settings: "tnum" !important;
}
.panel-body .row { padding: 8px 0 !important; border-bottom: 1px solid var(--hf-line-soft, var(--hf-line)) !important; }
.panel-body .row:last-child { border-bottom: 0 !important; }

/* Panels in productdetails should already be dark via .panel rule, ensure consistency */
.panel.card, .lagom-product-info-panel {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  color: var(--hf-fg-1) !important;
}
.panel-heading.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hf-line) !important;
  padding: 16px 20px !important;
  color: var(--hf-fg-0) !important;
}
.panel-title, .card-title {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

/* Product header / main product card */
.lagom-product-name, .product-info .product-name, .package-name {
  color: var(--hf-fg-0) !important;
}

/* Status badges in Billing Details */
.panel-body .label-active, .panel-body .text-active,
.panel-body .label-success, .panel-body span.active {
  color: var(--hf-accent) !important;
}

/* Bare <input type="submit"> / <button> without classes (e.g. PayPal Subscribe / Make Payment) */
input[type="submit"]:not([class]),
input[type="submit"][value="Subscribe"],
input[type="submit"][value="Make Payment"],
input[type="submit"][value="Pay Now"],
input[type="submit"].btn,
button[type="submit"]:not([class]) {
  background: var(--hf-accent) !important;
  border: 1px solid var(--hf-accent) !important;
  color: #062012 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  width: 100% !important;
  margin: 6px 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: var(--hf-sans) !important;
}
input[type="submit"]:not([class]):hover, input[type="submit"][value="Subscribe"]:hover,
input[type="submit"][value="Make Payment"]:hover {
  background: oklch(from var(--hf-accent) calc(l + 0.04) c h) !important;
}

/* Subscribe = secondary outline; Make Payment = primary fill */
input[type="submit"][value="Subscribe"] {
  background: transparent !important;
  color: var(--hf-fg-0) !important;
  border-color: var(--hf-line-2, var(--hf-line)) !important;
}
input[type="submit"][value="Subscribe"]:hover {
  background: var(--hf-bg-3) !important;
  border-color: color-mix(in oklab, var(--hf-accent) 35%, var(--hf-line)) !important;
}

/* Payment Method label/select on invoice */
.invoice select.form-control, .invoice select {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  width: 100% !important;
}

/* ====================================================================
   "full_sale_model" / share-invoice modal — third-party addon, fix styling
   ==================================================================== */
.modal.full_sale_model .modal-content,
.modal.full_sale_model .modal-dialog,
.full_sale_model .modal-content {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 14px !important;
  color: var(--hf-fg-1) !important;
  padding: 24px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
}
.modal.full_sale_model .modal-header { border-bottom: 1px solid var(--hf-line) !important; padding: 0 0 14px !important; }
.modal.full_sale_model .modal-body { padding: 16px 0 !important; color: var(--hf-fg-1) !important; }
.modal.full_sale_model .modal-footer { border-top: 1px solid var(--hf-line) !important; padding: 14px 0 0 !important; }
.modal.full_sale_model input[type="text"], .modal.full_sale_model input[type="url"] {
  background: var(--hf-bg-0) !important; border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important; border-radius: 8px !important; padding: 10px 12px !important; width: 100% !important;
}
.modal.full_sale_model .btn { border-radius: 8px !important; padding: 10px 16px !important; }
.modal.full_sale_model .btn-primary, .modal.full_sale_model .btn-success {
  background: var(--hf-accent) !important; border-color: var(--hf-accent) !important; color: #062012 !important; font-weight: 600 !important;
}

/* The trigger button itself: empty <a class="btn btn-info"> — give it a Share icon */
.list-group > a.btn.btn-info:empty,
.list-group > a.btn-info:empty {
  background: var(--hf-bg-2) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  width: 38px !important; height: 38px !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  margin-top: 8px !important;
}
.list-group > a.btn.btn-info:empty::before,
.list-group > a.btn-info:empty::before {
  content: "🔗";
  font-size: 14px;
  line-height: 1;
}
.list-group > a.btn-info:empty:hover {
  background: var(--hf-bg-3) !important;
  border-color: color-mix(in oklab, var(--hf-accent) 35%, var(--hf-line)) !important;
  color: var(--hf-accent) !important;
}

/* Generic Bootstrap btn-info — make it match our theme (was bright pastel blue) */
.btn-info, button.btn-info, a.btn-info {
  background: var(--hf-bg-2) !important;
  border-color: var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
}
.btn-info:hover { background: var(--hf-bg-3) !important; color: var(--hf-fg-0) !important; }

/* ====================================================================
   guestinvoice addon — modal polish + fallback labels for empty strings
   ==================================================================== */

/* Modal header: keep accent but with proper white text + close visible */
.modal.full_sale_model .modal-header.bg-primary,
.modal.full_sale_model .modal-header {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
  border-bottom: 1px solid var(--hf-line) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 16px 20px !important;
  margin: -24px -24px 16px !important;
}
.modal.full_sale_model .modal-header.text-white,
.modal.full_sale_model .modal-title {
  color: var(--hf-fg-0) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.modal.full_sale_model .modal-header .close, .modal.full_sale_model .modal-header button.close {
  color: var(--hf-fg-1) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-size: 24px !important;
  background: transparent !important;
  border: 0 !important;
}

/* Fallback header text when addon JS doesn't populate it */
.modal.full_sale_model #ops_mdl_header:empty::before {
  content: "Share this invoice";
}

/* Fallback radio labels — based on the radio name/id from the addon source */
.modal.full_sale_model label[for="manualRadio"]:empty::after {
  content: "Generate public link";
  margin-left: 4px;
}
.modal.full_sale_model label[for="sub_accountRadio"]:empty::after {
  content: "Send to sub-account";
  margin-left: 4px;
}
.modal.full_sale_model label.form-check-label {
  color: var(--hf-fg-1) !important;
  margin-left: 6px;
  cursor: pointer;
}

/* Input-group prepend (the white-area we saw before the URL field) */
.modal.full_sale_model .input-group-prepend, .modal.full_sale_model .input-group-text,
.modal.full_sale_model .input-group-addon {
  background: var(--hf-bg-2) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  border-radius: 8px 0 0 8px !important;
  padding: 8px 12px !important;
}
.modal.full_sale_model .input-group input, .modal.full_sale_model input.form-control {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 12px !important;
}
.modal.full_sale_model .input-group { display: flex !important; align-items: stretch !important; }
.modal.full_sale_model .input-group > input { flex: 1 1 auto !important; }

/* Action buttons in modal footer / body */
.modal.full_sale_model .btn { border-radius: 8px !important; padding: 10px 14px !important; min-width: 44px; }
.modal.full_sale_model .btn-default, .modal.full_sale_model .btn-secondary {
  background: var(--hf-bg-3) !important; color: var(--hf-fg-0) !important; border-color: var(--hf-line) !important;
}
.modal.full_sale_model .btn-primary, .modal.full_sale_model .btn-success {
  background: var(--hf-accent) !important; border-color: var(--hf-accent) !important; color: #062012 !important; font-weight: 600 !important;
}
.modal.full_sale_model .btn-info {
  background: var(--hf-bg-3) !important; color: var(--hf-fg-1) !important; border-color: var(--hf-line) !important;
}
/* Empty buttons inside modal — give them a question-mark fallback so they're visible */
.modal.full_sale_model .btn:empty::before {
  content: "•";
  font-size: 12px;
  color: var(--hf-fg-3);
}

/* Loader bar / progress that's empty placeholder — make subtle */
.modal.full_sale_model .progress, .modal.full_sale_model [class*="loader"] {
  background: var(--hf-bg-3) !important;
  border-radius: 999px !important;
  height: 4px !important;
  margin: 12px 0 !important;
}
.modal.full_sale_model .progress-bar { background: var(--hf-accent) !important; }

/* Radio buttons green when selected */
.modal.full_sale_model input[type="radio"] { accent-color: var(--hf-accent) !important; }

/* The whole modal container */
.modal.full_sale_model .modal-dialog { max-width: 540px !important; }

/* ====================================================================
   guestinvoice — sub-account form (white tables) + button labels
   ==================================================================== */
.modal.full_sale_model .addUser {
  background: var(--hf-bg-2) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  color: var(--hf-fg-1) !important;
  margin-top: 12px;
}
.modal.full_sale_model .addUser table.form,
.modal.full_sale_model .addUser table {
  background: transparent !important;
  width: 100% !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}
.modal.full_sale_model .addUser td.fieldlabel,
.modal.full_sale_model .addUser td {
  background: transparent !important;
  color: var(--hf-fg-1) !important;
  padding: 6px 10px !important;
  border: 0 !important;
  font-size: 13px !important;
}
.modal.full_sale_model .addUser td.fieldlabel {
  color: var(--hf-fg-3) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 11px !important;
  white-space: nowrap;
  width: 1%;
}
.modal.full_sale_model .addUser td.fieldarea {
  background: transparent !important;
}
.modal.full_sale_model .addUser input[type="text"],
.modal.full_sale_model .addUser input[type="email"],
.modal.full_sale_model .addUser select,
.modal.full_sale_model .addUser textarea {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  width: 100% !important;
  font-size: 13px !important;
}
/* Bootstrap select inside addUser */
.modal.full_sale_model .addUser option {
  background: var(--hf-bg-1) !important;
  color: var(--hf-fg-0) !important;
}

/* Copy button (has fa-copy icon + empty btntext) — give it default text */
.modal.full_sale_model #btntext:empty::before { content: "Copy link"; }
.modal.full_sale_model .btn .fa, .modal.full_sale_model .btn .fas, .modal.full_sale_model .btn .far {
  color: inherit !important;
  margin-right: 4px;
}

/* Remove the catch-all .btn:empty rule that put bullets in copy button */
.modal.full_sale_model .btn:empty::before { content: none !important; }

/* guestinvoice: legacy <table class="form"> (sub-account fields) — kill the white */
.modal.full_sale_model table.form,
.modal.full_sale_model table.form td,
.modal.full_sale_model table.form td.fieldlabel,
.modal.full_sale_model table.form td.fieldarea,
.modal.full_sale_model table.form tr,
.modal.full_sale_model table.form tbody {
  background: transparent !important;
  border: 0 !important;
  color: var(--hf-fg-1) !important;
}
.modal.full_sale_model table.form {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}
.modal.full_sale_model table.form td.fieldlabel {
  color: var(--hf-fg-3) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  width: 1% !important;
  padding: 6px 12px 6px 0 !important;
}
.modal.full_sale_model table.form td.fieldarea {
  padding: 0 !important;
}
.modal.full_sale_model table.form input[type="text"],
.modal.full_sale_model table.form input[type="email"],
.modal.full_sale_model table.form input[type="password"],
.modal.full_sale_model table.form select,
.modal.full_sale_model table.form textarea {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line-2, var(--hf-line)) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  width: 100% !important;
  font-size: 13px !important;
}
.modal.full_sale_model table.form select option {
  background: var(--hf-bg-1) !important;
  color: var(--hf-fg-0) !important;
}

/* When "Generate public link" (manualRadio) is checked, hide the sub-account
   form table — it's only relevant for the "Send to sub-account" mode. */
.modal.full_sale_model:has(input#manualRadio:checked) table.form,
.modal.full_sale_model:has(input#manualRadio:checked) .addUser,
.modal.full_sale_model:has(input#manualRadio:checked) #user_selct {
  display: none !important;
}

/* Make native select dropdown options at least readable
   (Chrome/Safari mostly ignore CSS on OS-level dropdown but we set bg+color
   for browsers that DO respect it — Firefox does) */
.modal.full_sale_model select option {
  background: #11161b !important;
  color: #e7edf2 !important;
}
.modal.full_sale_model select:empty,
.modal.full_sale_model select:has(option[value="0"]:only-child) {
  /* select with only the empty default option — show "no users" hint */
  opacity: 0.6;
}

/* ====================================================================
   Ticket replies (viewticket.php) — body text was rgb(23,25,28) on dark
   ==================================================================== */
.ticket-reply, .ticket-reply.panel, .ticket-reply.staff {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}
.ticket-reply.staff { border-left: 3px solid var(--hf-accent) !important; }

.ticket-reply .panel-heading, .ticket-reply .card-header,
.ticket-reply .panel-heading.bg-dark {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
  border-bottom: 1px solid var(--hf-line) !important;
  padding: 12px 18px !important;
}
.ticket-reply .panel-heading strong,
.ticket-reply .panel-heading b,
.ticket-reply .text-light {
  color: var(--hf-fg-0) !important;
}

.ticket-reply .panel-body, .ticket-reply .card-body,
.ticket-reply-message, .ticket-reply .markdown-content {
  background: transparent !important;
  color: var(--hf-fg-1) !important;
  padding: 18px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.ticket-reply .panel-body p, .ticket-reply .card-body p,
.ticket-reply .panel-body div, .ticket-reply .card-body div,
.ticket-reply .panel-body span, .ticket-reply .card-body span {
  color: var(--hf-fg-1) !important;
}
.ticket-reply .panel-body strong, .ticket-reply .card-body strong,
.ticket-reply .panel-body b, .ticket-reply .card-body b {
  color: var(--hf-fg-0) !important;
}
.ticket-reply a { color: var(--hf-accent) !important; }

/* Inline code / pre in ticket */
.ticket-reply code, .ticket-reply pre {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: var(--hf-mono) !important;
}
.ticket-reply pre {
  padding: 12px 14px !important;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Date / requestor badges in header */
.ticket-reply .date, .ticket-reply .requestor-badge, .ticket-reply .label {
  color: var(--hf-fg-3) !important;
  font-family: var(--hf-mono) !important;
  font-size: 12px !important;
}
.ticket-reply .label.requestor-badge { background: var(--hf-bg-3) !important; padding: 2px 8px !important; border-radius: 999px !important; }