/* ============================================================================
   Author: N1CHO
   Made for LynxLayers
   ============================================================================ */
/* ============================================================================
   LynxThemeN1CHO - Cart / Review & Checkout + striped tables.
   Kills six's leftover Bootstrap white (striped odd rows, white cart items,
   white order summary) site-wide. Token-driven -> flips dark <-> light.
   Loaded globally; CSS-only (order forms are WHMCS core, never edited).
   ============================================================================ */

/* ---- Striped tables anywhere (invoices, tickets, billing, lists) --------- */
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr > td,
.table-striped > tbody > tr > th {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: color-mix(in oklch, var(--text-primary) 4%, transparent) !important;
}
.table > thead > tr > th { color: var(--text-secondary) !important; border-color: var(--border-strong) !important; }
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th { background-color: color-mix(in oklch, var(--primary-color) 8%, transparent) !important; }

/* ---- Review & Checkout (cart.php?a=view) --------------------------------- *
   The full Review & Checkout / order-summary / promo redesign lives in
   store.css section C, scoped under `#order-standard_cart` (it loads after this
   file and needs that specificity to beat six's all.min.css). Kept there as the
   single source of truth so there's no competing duplicate to drift. Only the
   global fallbacks (view-cart markup rendered OUTSIDE the order-form wrapper)
   stay here. */
.view-cart-items .item { background: var(--bg-surface) !important; color: var(--text-primary) !important; }
.total-due-today .amt, .total-due-today .total { color: var(--primary-strong) !important; }
.checkout-items .item, #frmCheckout .panel, .order-checkout .panel {
  background: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important;
}

/* ---- Domain register / transfer: TLD pricing table ----------------------- *
   Stock six paints `.tld-pricing-header .tld-column` #f5f5f5 (white-on-white in
   dark mode -> the broken white strip) and leaves the table, filter pills and
   featured cards unstyled. Class-targeted so it also covers domaintransfer and
   the standalone domain pricing page; token-driven -> flips dark <-> light. */
.domain-pricing .bg-white {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important; overflow: hidden;
}
.domain-pricing h4 { color: var(--text-primary) !important; }
/* search box: stock six wraps it in a white .input-group-box -> neutralise */
.domain-checker-container .input-group-box {
  background: transparent !important; padding: 0 !important; box-shadow: none !important;
}
/* header band: one flat dark row, legible uppercase labels (kills white cell +
   the bare nested .row that six paints #f5f5f5) */
.domain-pricing .tld-pricing-header {
  background: var(--bg-muted) !important;
  border-bottom: 1px solid var(--border-strong) !important;
}
.domain-pricing .tld-pricing-header .tld-column,
.domain-pricing .tld-pricing-header [class*="col-"],
.domain-pricing .tld-pricing-header .row { background: transparent !important; }
.domain-pricing .tld-pricing-header,
.domain-pricing .tld-pricing-header .tld-column {
  color: var(--text-secondary) !important;
  font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  padding-top: 13px; padding-bottom: 13px;
}
/* TLD rows */
.domain-pricing .tld-row {
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  transition: background .2s var(--ease-out);
}
.domain-pricing .tld-row:last-child { border-bottom: 0 !important; }
.domain-pricing .tld-row:hover { background: color-mix(in oklch, var(--primary-color) 6%, transparent) !important; }
.domain-pricing .tld-row strong { color: var(--text-primary) !important; font-family: var(--font-mono); }
.domain-pricing .tld-row .text-center { color: var(--text-primary) !important; }
.domain-pricing .tld-row small { color: var(--text-muted) !important; }
.domain-pricing .tld-row.no-tlds { color: var(--text-muted) !important; }
/* sale flags on a TLD */
.tld-sale-group {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.tld-sale-group-hot  { background: color-mix(in oklch, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.tld-sale-group-sale { background: color-mix(in oklch, var(--primary-color) 16%, transparent); color: var(--primary-strong); }
.tld-sale-group-new  { background: color-mix(in oklch, var(--color-success) 16%, transparent); color: var(--color-success); }
/* category filter pills (.badge.badge-secondary -> .badge-primary/.active when on) */
.tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.domain-pricing .tld-filters a.badge {
  background: color-mix(in oklch, var(--text-primary) 5%, transparent) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  padding: 7px 13px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600;
  transition: color .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out);
}
.domain-pricing .tld-filters a.badge:hover { color: var(--text-primary) !important; border-color: var(--primary-color) !important; }
.domain-pricing .tld-filters a.badge.active,
.domain-pricing .tld-filters a.badge-primary {
  background: color-mix(in oklch, var(--primary-color) 16%, transparent) !important;
  color: var(--primary-strong) !important;
  border-color: color-mix(in oklch, var(--primary-color) 38%, transparent) !important;
}
/* featured TLD cards (shown at top when configured) */
.featured-tlds-container { margin-bottom: 22px; }
.domain-pricing .featured-tld {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important; padding: 18px 16px; text-align: center;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.domain-pricing .featured-tld:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--primary-color) 35%, transparent) !important;
  box-shadow: var(--shadow-md) !important;
}
.domain-pricing .featured-tld .price { color: var(--primary-strong) !important; font-family: var(--font-mono); font-weight: 600; }
.domain-pricing .featured-tld .img-container img { max-height: 42px; width: auto; }

/* ---- intl-tel-input phone widget (register / checkout / profile): stock white -
   the country dropdown + selected-flag bar are white in six. Flag sprites stay.
   Below: a polished dark dropdown — padded card, pill rows, mono dial codes,
   right-aligned codes, themed scrollbar. */
.intl-tel-input .country-list {
  background: var(--bg-elevated) !important; color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important; margin-top: 6px !important;
  max-height: 248px !important; overflow-y: auto !important;
}
.intl-tel-input .country-list .country {
  color: var(--text-secondary) !important;
  display: flex !important; align-items: center !important; gap: 11px;
  padding: 9px 12px !important; border-radius: var(--radius-sm) !important;
  white-space: nowrap;
}
.intl-tel-input .country-list .country .flag-box { margin: 0 !important; }
.intl-tel-input .country-list .country .country-name { color: var(--text-primary) !important; }
.intl-tel-input .country-list .country.highlight,
.intl-tel-input .country-list .country:hover {
  background: color-mix(in oklch, var(--primary-color) 14%, transparent) !important; color: var(--text-primary) !important;
}
.intl-tel-input .country-list .country .dial-code {
  color: var(--text-muted) !important; font-family: var(--font-mono) !important;
  font-size: var(--text-sm); margin-left: auto !important; padding-left: 12px;
}
.intl-tel-input .country-list .divider { border-bottom-color: var(--border-color) !important; margin: 6px 0 !important; }
.intl-tel-input .country-list::-webkit-scrollbar { width: 10px; }
.intl-tel-input .country-list::-webkit-scrollbar-track { background: transparent; }
.intl-tel-input .country-list::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--radius-pill);
  border: 3px solid var(--bg-elevated);
}
.intl-tel-input .selected-flag {
  background: color-mix(in oklch, var(--text-primary) 5%, transparent) !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
}
.intl-tel-input .selected-flag:hover, .intl-tel-input.expanded .selected-flag {
  background: color-mix(in oklch, var(--text-primary) 9%, transparent) !important;
}
.intl-tel-input .selected-flag .iti-arrow {
  border-top-color: var(--text-muted) !important;
}
.intl-tel-input .selected-flag .iti-arrow.up {
  border-bottom-color: var(--text-muted) !important;
}
.intl-tel-input .selected-dial-code { color: var(--text-secondary) !important; }

/* ---- Bootstrap warning labels/badges: dark text on amber for legibility ---- */
.label-warning, .badge-warning { color: #1a1300 !important; }

/* ---- Domain register: flatten six's blue "striped" header bars -------------
   six paints the price columns border-bottom:6px solid #336699 (the blue bars)
   + odd columns #336699 border / #f5f5f5 bg. Flatten them to the dark band. */
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header div:nth-child(odd) {
  border-bottom: 0 !important;
  border-color: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  height: auto !important;
}
/* the search panel is padded 80px top/bottom by six -> far too tall/empty */
.domain-checker-bg { padding: clamp(26px, 3.4vw, 40px) 0 !important; }

/* ---- Promo boxes: replace the amber CTA + text with brand blue (per request,
   matches the blue "Transfer a domain" box). The domain page is wrapped in
   #order-standard_cart, and store.css scopes the amber there (specificity
   1,1,0+) — so these overrides carry the same #order-standard_cart prefix. */
#order-standard_cart .domain-promo-box .btn-warning,
.domain-promo-box .btn-warning {
  background: linear-gradient(180deg, var(--primary-color), var(--primary-hover)) !important;
  background-color: var(--primary-color) !important;
  border-color: transparent !important;
  color: var(--text-on-primary) !important;
}
#order-standard_cart .domain-promo-box .btn-warning:hover,
.domain-promo-box .btn-warning:hover { filter: brightness(1.06); }
#order-standard_cart .domain-promo-box .text-warning,
.domain-promo-box .text-warning { color: var(--primary-strong) !important; }

/* ---- Bootstrap tooltips themed (e.g. the domain field hint) ---- */
.tooltip { z-index: 2000; }
.tooltip.fade { transition: opacity .16s var(--ease-out); }
.tooltip-inner {
  max-width: 300px !important; width: max-content; white-space: normal; text-align: center;
  background: var(--bg-elevated) !important; color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in oklch, var(--primary-color) 8%, transparent) !important;
  font-size: 12.5px; line-height: 1.45; padding: 8px 12px;
}
.tooltip.in { opacity: 1 !important; }
.tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow { border-top-color: var(--border-strong) !important; }
.tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--border-strong) !important; }
.tooltip.left .tooltip-arrow { border-left-color: var(--border-strong) !important; }
.tooltip.right .tooltip-arrow { border-right-color: var(--border-strong) !important; }

/* ---- Domain renewals: "nothing to renew" empty state -------------------- *
   CSS-only refinement of the order-form empty state (templates are WHMCS core,
   never edited). An empty renewal list isn't an error, so we drop six's amber
   `alert-warning` look and present a calm, centred card with a theme-tinted
   icon (masked SVG -> follows the --primary token, so it flips dark/light). */
#order-standard_cart #no-domains.alert,
#order-standard_cart #no-domains.alert-warning {
  position: relative;
  max-width: 560px; margin: 44px auto 24px; padding: 116px 40px 38px;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text-secondary) !important;
  font-size: 15.5px; line-height: 1.6;
}
/* soft tinted disc */
#order-standard_cart #no-domains::before {
  content: ""; position: absolute; top: 36px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in oklch, var(--primary-color) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary-color) 26%, transparent);
}
/* globe glyph, tinted via mask so the colour tracks the theme token */
#order-standard_cart #no-domains::after {
  content: ""; position: absolute; top: 36px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px; background-color: var(--primary-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c3 3.6 3 14.4 0 18M12 3c-3 3.6-3 14.4 0 18'/%3E%3C/svg%3E") center / 30px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c3 3.6 3 14.4 0 18M12 3c-3 3.6-3 14.4 0 18'/%3E%3C/svg%3E") center / 30px no-repeat;
}
/* the return button sits in the <p> right after the card — centre it on the
   SAME 560px column as the card so the two read as one stacked unit (the
   global p.text-center auto-margin fix handles the left-anchor; this pins it
   to the card's width + rhythm). */
#order-standard_cart #no-domains + p {
  max-width: 560px; margin: 0 auto 40px !important; text-align: center;
}
#order-standard_cart #no-domains + p .btn {
  padding: 11px 22px; border-radius: var(--radius);
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out),
              background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
#order-standard_cart #no-domains + p .btn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--primary-color) 45%, transparent) !important;
  box-shadow: 0 10px 26px -14px color-mix(in oklch, var(--primary-color) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  #order-standard_cart #no-domains + p .btn:hover { transform: none; }
}

/* ---- Breathing room between the sticky navbar and page content (all pages) -- */
section#main-body { padding-top: clamp(30px, 3.4vw, 46px) !important; }
section#main-body > .container { padding-top: 0; }

/* ---- Basic RTL (Arabic / Hebrew / Farsi) — layout mirrors; grid/flex auto-flip --- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] #main-menu .navbar-nav { float: right; }
[dir="rtl"] #main-menu .navbar-right.ll-actions { float: left; }
[dir="rtl"] .ll-brand-mark { margin-right: 0; margin-left: 9px; }
[dir="rtl"] .ll-landing .hero-copy { align-items: flex-end; text-align: right; }
[dir="rtl"] .ll-landing .hero-chips, [dir="rtl"] .ll-landing .hero-ctas, [dir="rtl"] .ll-landing .hero-stats { justify-content: flex-end; }
[dir="rtl"] .ll-footer .ll-footer-col a, [dir="rtl"] .ll-footer .ll-footer-brand { text-align: right; }
[dir="rtl"] .view-cart-items .item, [dir="rtl"] .order-summary { text-align: right; }
[dir="rtl"] .cart-sidebar, [dir="rtl"] .sidebar { direction: rtl; }