/* ==========================================================================
   Techpullers WHMCS cart — full-width layout + techpullers.com/hosting look
   File: templates/orderforms/techpullers_cart/css/techpullers-cart-custom.css
   Load AFTER techpullers-cart.css (see README).
   Design tokens copied from techpullers.com/hosting/domains/
   ========================================================================== */

:root {
  --tp-font: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tp-primary: #C2410C;
  --tp-accent: #EA580C;
  --tp-accent-lt: #FB923C;
  --tp-heading: #1D1D1D;
  --tp-bg: #FFFFFF;
  --tp-bg-alt: #F9F5ED;
  --tp-grad-dark: linear-gradient(90deg, #2E2B2C 0%, #141313 100%);
  --tp-hero-glow: radial-gradient(1200px 520px at 16% -12%, rgba(234, 88, 12, .26) 0%, rgba(234, 88, 12, 0) 62%);
  --tp-shadow-card: 0 8px 32px rgba(0, 0, 0, .08);
  --tp-shadow-cta: 0 10px 26px rgba(234, 88, 12, .3);
  --tp-radius-card: 6px;
  --tp-radius-cta: 8px;
  --tp-container: 1248px;
}

/* --tp-dark, --tp-border and --tp-body already exist in the client theme with
   DIFFERENT values (#0F1115 / #E5E7EB / #374151) and are consumed by the site
   chrome — _footer.scss paints the footer with var(--tp-dark). Redefining them
   on :root here would repaint the footer and every border on cart pages only,
   so the cart would not match the rest of the portal. Scoping them to the cart
   keeps this sheet's promise that the client area is untouched. */
#order-techpullers_cart {
  --tp-dark: #1D1D1D;
  --tp-body: #525252;
  --tp-border: #E7E0D5;
}

/* --------------------------------------------------------------------------
   1. Remove the sidebar (Categories / Actions / Choose Currency) everywhere
   -------------------------------------------------------------------------- */
#order-techpullers_cart .cart-sidebar,
#order-techpullers_cart .sidebar-collapsed,
#order-techpullers_cart .panel-sidebar,
#order-techpullers_cart .card-sidebar,
#order-techpullers_cart #Secondary_Sidebar-Categories,
#order-techpullers_cart #Secondary_Sidebar-Actions,
#order-techpullers_cart #Secondary_Sidebar-Choose_Currency {
  display: none !important;
}

/* The theme lays the cart out as a 250px / 944px CSS grid — collapse it */
#order-techpullers_cart > .row {
  display: block !important;
  grid-template-columns: none !important;
  margin: 0 !important;
}
#order-techpullers_cart .cart-body,
#order-techpullers_cart .pull-md-right,
#order-techpullers_cart .col-md-9 {
  flex: 0 0 100%;
  grid-column: 1 / -1;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* Wider container like the marketing site */
#main-body > .container {
  max-width: var(--tp-container);
}

/* Hide the "Shopping Cart" breadcrumb bar — the hero has its own eyebrow */
body.primary-bg-color .master-breadcrumb,
#main-body .breadcrumb {
  display: none;
}

/* full-bleed hero uses 100vw — stop the page from scrolling sideways,
   and let the hero sit flush under the navbar */
#main-body {
  overflow-x: clip;
  padding-top: 0 !important;
}

body.primary-bg-color,
#main-body {
  background: var(--tp-bg);
  font-family: var(--tp-font);
  color: var(--tp-body);
}

/* --------------------------------------------------------------------------
   2. Dark hero band (title + intro + domain search)
      The three siblings are each made full-bleed with the same background so
      they read as one continuous hero.
   -------------------------------------------------------------------------- */
#order-techpullers_cart .cart-body > .header-lined,
#order-techpullers_cart .cart-body > .header-lined + p,
#order-techpullers_cart .cart-body > .sidebar-collapsed + p,
#order-techpullers_cart .cart-body > .domain-checker-container {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: var(--tp-dark);
  color: #fff;
  border: 0;
}

/* glow only on the first block */
#order-techpullers_cart .cart-body > .header-lined {
  background: var(--tp-hero-glow), var(--tp-grad-dark);
  text-align: left !important;
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 64px !important;
  padding-bottom: 6px !important;
}
#order-techpullers_cart .cart-body > .header-lined + p,
#order-techpullers_cart .cart-body > .sidebar-collapsed + p,
#order-techpullers_cart .cart-body > .domain-checker-container {
  background: linear-gradient(90deg, #2E2B2C 0%, #141313 100%);
}

/* Pages without the domain search (view cart, checkout, products…) just get
   the dark title band with breathing room below it */
#order-techpullers_cart .cart-body:not(:has(> .domain-checker-container)) > .header-lined {
  padding-bottom: 40px !important;
  margin-bottom: 32px !important;
}

/* Eyebrow label above the title — domain register page only */
#order-techpullers_cart .cart-body:has(> .domain-checker-container) > .header-lined::before {
  content: "Domain registration";
  display: block;
  color: var(--tp-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

#order-techpullers_cart .cart-body > .header-lined h1,
#order-techpullers_cart .cart-body > .header-lined h1.font-size-36 {
  font-family: var(--tp-font);
  font-size: 40px !important;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  color: #fff !important;
  text-align: left;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

#order-techpullers_cart .cart-body > .header-lined + p,
#order-techpullers_cart .cart-body > .sidebar-collapsed + p {
  margin: 0 0 0 calc(50% - 50vw);
  padding-top: 0;
  padding-bottom: 28px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82) !important;
  max-width: none;
  box-sizing: border-box;
}

/* Search block — replaces the yellow globe panel with the pill search */
#order-techpullers_cart .domain-checker-container {
  padding-top: 0;
  padding-bottom: 64px;
  margin: 0;
}
#order-techpullers_cart .domain-checker-bg {
  background: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
#order-techpullers_cart .domain-checker-bg .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}
#order-techpullers_cart .domain-checker-bg .input-group-box {
  max-width: 560px;
  margin: 0;
  background: #fff;
  border-radius: 999px;
  padding: 5px 5px 5px 0;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  border: 2px solid transparent;
  align-items: center;
}
#order-techpullers_cart .domain-checker-bg .input-group-box:focus-within {
  border-color: var(--tp-accent-lt);
}
#order-techpullers_cart .domain-checker-bg .form-control,
#order-techpullers_cart .domain-checker-bg #inputDomain {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  height: auto;
  padding: 14px 8px 14px 24px !important;
  font-family: var(--tp-font);
  font-size: 16px;
  color: var(--tp-dark);
}
#order-techpullers_cart .domain-checker-bg .input-group-btn .btn,
#order-techpullers_cart .domain-checker-bg .input-group-append .btn {
  background: var(--tp-primary);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-family: var(--tp-font);
  font-weight: 700;
  font-size: 16px;
  padding: 0 26px;
  height: 48px;
  line-height: 48px;
  transition: background .3s ease;
}
#order-techpullers_cart .domain-checker-bg .input-group-btn .btn:hover,
#order-techpullers_cart .domain-checker-bg .input-group-append .btn:hover {
  background: var(--tp-accent);
}
/* the stock "captcha / spinner" helper text under the box */
#order-techpullers_cart .domain-checker-bg .row + .row,
#order-techpullers_cart .domain-checker-bg .domain-checker-text {
  color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------------------
   3. Results area (light section)
   -------------------------------------------------------------------------- */
#order-techpullers_cart #DomainSearchResults {
  padding-top: 40px;
}
#order-techpullers_cart .domain-checker-result-headline {
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  margin-bottom: 0 !important;
}
#order-techpullers_cart .domain-checker-available {
  color: #15803D;
  font-size: 22px;
  font-weight: 700;
}
#order-techpullers_cart .domain-checker-unavailable,
#order-techpullers_cart .domain-checker-invalid {
  color: #B91C1C;
  font-size: 20px;
  font-weight: 700;
}
#order-techpullers_cart .domain-lookup-result .domain-price,
#order-techpullers_cart #primaryLookupResult .domain-price {
  font-family: var(--tp-font);
  font-size: 24px;
  font-weight: 800;
  color: var(--tp-heading);
}

/* Spotlight TLD tiles */
#order-techpullers_cart .spotlight-tlds {
  background: var(--tp-bg-alt);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-card);
  padding: 16px;
  margin-bottom: 24px;
}
#order-techpullers_cart .spotlight-tlds-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#order-techpullers_cart .spotlight-tld-container {
  flex: 1 1 calc(12.5% - 12px);
  min-width: 118px;
  width: auto !important;
  padding: 0 !important;
}
#order-techpullers_cart .spotlight-tld {
  background: #fff;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-card);
  padding: 14px 8px;
  height: 100%;
  transition: border-color .3s ease, box-shadow .3s ease;
}
#order-techpullers_cart .spotlight-tld:hover {
  border-color: var(--tp-accent-lt);
  box-shadow: var(--tp-shadow-card);
}
#order-techpullers_cart .spotlight-tld .tld-name,
#order-techpullers_cart .spotlight-tld strong {
  font-weight: 800;
  color: var(--tp-heading);
}
#order-techpullers_cart .spotlight-tld .price,
#order-techpullers_cart .spotlight-tld .tld-price {
  color: var(--tp-body);
  font-weight: 700;
}

/* Suggestions / tld list cards */
#order-techpullers_cart .panel.card,
#order-techpullers_cart .card {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-card);
  box-shadow: none;
}
#order-techpullers_cart .panel-heading,
#order-techpullers_cart .card-header {
  background: var(--tp-bg-alt);
  border-bottom: 1px solid var(--tp-border);
  color: var(--tp-heading);
  font-weight: 700;
}
#order-techpullers_cart .domain-suggestion,
#order-techpullers_cart .list-group-item {
  border-color: var(--tp-border);
  font-family: var(--tp-font);
}
#order-techpullers_cart .domain-suggestion .domain-name,
#order-techpullers_cart .domain-suggestion strong {
  color: var(--tp-heading);
}
#order-techpullers_cart .domain-suggestion .price {
  color: var(--tp-heading);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   4. Buttons everywhere in the cart
   -------------------------------------------------------------------------- */
#order-techpullers_cart .btn-primary,
#order-techpullers_cart .btn-add-to-cart,
#order-techpullers_cart .spotlight-tld .btn,
#order-techpullers_cart .btn-success,
#order-techpullers_cart .btn-checkout,
#order-techpullers_cart #checkout {
  background: var(--tp-primary) !important;
  border: 0 !important;
  border-radius: var(--tp-radius-cta);
  color: #fff !important;
  font-family: var(--tp-font);
  font-weight: 700;
  box-shadow: var(--tp-shadow-cta);
  transition: background .3s ease, transform .3s ease;
}
#order-techpullers_cart .btn-primary:hover,
#order-techpullers_cart .btn-add-to-cart:hover,
#order-techpullers_cart .btn-success:hover,
#order-techpullers_cart #checkout:hover {
  background: var(--tp-accent) !important;
  transform: translateY(-1px);
}
#order-techpullers_cart .spotlight-tld .btn,
#order-techpullers_cart .btn-sm {
  box-shadow: none;
  border-radius: 999px;
  padding: 4px 18px;
  font-size: 13px;
}
#order-techpullers_cart .btn-default,
#order-techpullers_cart .btn-secondary,
#order-techpullers_cart .btn-light {
  background: #fff;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-cta);
  color: var(--tp-heading);
  font-family: var(--tp-font);
  font-weight: 700;
}
#order-techpullers_cart .btn-default:hover,
#order-techpullers_cart .btn-secondary:hover {
  border-color: var(--tp-primary);
  color: var(--tp-primary);
}

/* --------------------------------------------------------------------------
   5. Other cart pages (products, view cart, checkout) — shared look
   -------------------------------------------------------------------------- */
#order-techpullers_cart h1, #order-techpullers_cart h2,
#order-techpullers_cart h3, #order-techpullers_cart h4 {
  font-family: var(--tp-font);
  color: var(--tp-heading);
  font-weight: 800;
}
#order-techpullers_cart .cart-body > .header-lined h1 { color: #fff; }

#order-techpullers_cart .product,
#order-techpullers_cart .view-cart-items,
#order-techpullers_cart .checkout-section,
#order-techpullers_cart .sub-heading + .row .panel,
#order-techpullers_cart .order-summary,
#order-techpullers_cart .view-cart-tabs {
  background: #fff;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-card);
}
#order-techpullers_cart .product:hover {
  box-shadow: var(--tp-shadow-card);
}
#order-techpullers_cart .product header,
#order-techpullers_cart .product .product-heading {
  background: var(--tp-bg-alt);
  border-bottom: 1px solid var(--tp-border);
}
#order-techpullers_cart .product header span,
#order-techpullers_cart .product header h3 {
  color: var(--tp-heading);
}
#order-techpullers_cart .product .product-pricing,
#order-techpullers_cart .product .price {
  color: var(--tp-primary);
  font-weight: 800;
}
#order-techpullers_cart .view-cart-items thead th,
#order-techpullers_cart .view-cart-items tbody td {
  border-color: var(--tp-border);
  font-family: var(--tp-font);
}
#order-techpullers_cart .summary-container,
#order-techpullers_cart .order-summary {
  background: var(--tp-bg-alt);
  border-color: var(--tp-border);
}
#order-techpullers_cart .order-summary .total-due-today,
#order-techpullers_cart .summary-container .total-due-today-price {
  color: var(--tp-primary);
}
#order-techpullers_cart .form-control {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-cta);
  font-family: var(--tp-font);
}
#order-techpullers_cart .form-control:focus {
  border-color: var(--tp-accent);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .15);
}
#order-techpullers_cart a { color: var(--tp-primary); }
#order-techpullers_cart a:hover { color: var(--tp-accent); }

/* Section line under sub headings, like the marketing site's orange rule */
#order-techpullers_cart .sub-heading span,
#order-techpullers_cart .sub-heading {
  border: 0;
  position: relative;
  padding-bottom: 12px;
}
#order-techpullers_cart .sub-heading span::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--tp-primary);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #order-techpullers_cart .cart-body > .header-lined { padding-top: 36px !important; }
  #order-techpullers_cart .cart-body > .header-lined h1,
  #order-techpullers_cart .cart-body > .header-lined h1.font-size-36 { font-size: 30px !important; }
  #order-techpullers_cart .cart-body > .header-lined + p { font-size: 16px; }
  #order-techpullers_cart .domain-checker-container { padding-bottom: 40px; }
  #order-techpullers_cart .domain-checker-bg .input-group-box {
    max-width: 100%;
    border-radius: 24px;
    flex-wrap: wrap;
    padding: 6px;
  }
  #order-techpullers_cart .domain-checker-bg .input-group-btn,
  #order-techpullers_cart .domain-checker-bg .input-group-append { width: 100%; }
  #order-techpullers_cart .domain-checker-bg .input-group-btn .btn,
  #order-techpullers_cart .domain-checker-bg .input-group-append .btn { width: 100%; }
  #order-techpullers_cart .spotlight-tld-container { flex-basis: calc(50% - 12px); min-width: 0; }
}