/* ==========================================================================
   Techpullers Cart — brand skin for the order form
   ==========================================================================

   Loaded AFTER css/all.min.css (see common.tpl), so it wins on source order
   and needs no !important to beat the base cart's #058 blue / #666 grey.

   SCOPE
   Every selector is prefixed `#order-techpullers_cart`, the wrapper each
   order-form template opens. Nothing here can reach header.site-header or
   footer.footer, which are out of that subtree and must not change.

   The design tokens below are declared ON that wrapper rather than :root for
   the same reason — custom properties inherit downwards only, so they cannot
   reach the chrome even by accident.

   MARKUP
   No template markup was changed for this skin. Ids, names, `menuItemName`
   attributes and the classes js/scripts.min.js binds to are all left intact;
   the feature ticks and the Order Summary card are done from CSS alone.

   Author: Techpullers Technology Solutions Pvt Ltd
   ========================================================================== */

#order-techpullers_cart {
  --cart-primary:       #c2410c;
  --cart-primary-hover: #9a3412;
  --cart-primary-soft:  #fff4ed;
  --cart-page:          #f7f5f2;
  --cart-ink:           #111827;
  --cart-body:          #374151;
  /* The brief specifies #6b7280 for muted text. That measures 4.83:1 on white
     but only 4.44:1 on the page ground (#f7f5f2) and 4.47:1 on the soft tint
     (#fff4ed) — both below WCAG AA, and the theme's QA sweep fails on them.
     #636b7a is the same hue two steps darker: 5.36 / 4.93 / 4.96 / 5.13:1 on
     white / page / soft / sunk. It is also what the client theme already uses
     as --tp-muted, for exactly this reason. */
  --cart-muted:         #636b7a;
  --cart-border:        #e5e7eb;
  --cart-surface:       #ffffff;

  --cart-radius:     10px;
  --cart-radius-btn: 8px;
  --cart-shadow:     0 1px 2px rgba(17, 24, 39, .05);
  --cart-shadow-lg:  0 8px 30px rgba(17, 24, 39, .08);

  /* The site header pins its 72px nav row to the top of the viewport, so a
     sticky panel has to clear that or it slides underneath. */
  --cart-sticky-top: 88px;

  font-family: inherit;   /* Mulish, from the theme; no new font is loaded */
  font-size: 15px;
  line-height: 1.6;
  color: var(--cart-body);
  padding-bottom: 56px;
}

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


/* --------------------------------------------------------------------------
   1. Headings and section dividers
   -------------------------------------------------------------------------- */
#order-techpullers_cart .header-lined {
  margin: 0 0 28px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--cart-border);
}
#order-techpullers_cart .header-lined h1,
#order-techpullers_cart .header-lined h1.font-size-36 {
  margin: 0;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cart-ink);
}
#order-techpullers_cart .header-lined p {
  margin: 10px 0 0;
  color: var(--cart-muted);
  font-size: 15px;
}

/* The base sheet draws this as a zero-height rule with the label pulled up
   over it (`top:-11px`). That is fragile with a heavier label, so it becomes
   an ordinary flex divider — same look, no magic offsets. */
#order-techpullers_cart .sub-heading,
#order-techpullers_cart .sub-heading-borderless {
  height: auto;
  border-top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 20px;
  text-align: left;
}
#order-techpullers_cart .sub-heading::after,
#order-techpullers_cart .sub-heading-borderless::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cart-border);
}
#order-techpullers_cart .sub-heading span,
#order-techpullers_cart .sub-heading-borderless span {
  position: static;
  top: auto;
  display: inline-block;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cart-ink);
}


/* --------------------------------------------------------------------------
   2. Category sidebar (desktop, >=1200px)

   The base sheet hides `.cart-sidebar` below 1200px and shows the
   `.sidebar-collapsed` dropdowns above it. That breakpoint is left exactly as
   it is — it is WHMCS's own, and both halves are styled here.
   -------------------------------------------------------------------------- */
#order-techpullers_cart .cart-sidebar .card,
#order-techpullers_cart .cart-sidebar .panel {
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius);
  background: var(--cart-surface);
  box-shadow: var(--cart-shadow);
  overflow: hidden;
}
#order-techpullers_cart .cart-sidebar .card-header,
#order-techpullers_cart .cart-sidebar .panel-heading {
  padding: 14px 16px;
  background: var(--cart-surface);
  border-bottom: 1px solid var(--cart-border);
}
#order-techpullers_cart .cart-sidebar h3,
#order-techpullers_cart .cart-sidebar .panel-title,
#order-techpullers_cart .sidebar-collapsed h3,
#order-techpullers_cart .sidebar-collapsed .panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cart-ink);
  display: flex;
  align-items: center;
}
#order-techpullers_cart .cart-sidebar .panel-title > i:first-child,
#order-techpullers_cart .sidebar-collapsed .panel-title > i:first-child {
  color: var(--cart-primary);
  margin-right: 4px;
}
/* The collapse chevron keeps its float; only its weight changes. */
#order-techpullers_cart .cart-sidebar .card-minimise,
#order-techpullers_cart .cart-sidebar .panel-minimise {
  color: var(--cart-muted);
  font-size: 12px;
  cursor: pointer;
}

#order-techpullers_cart .cart-sidebar .list-group { border-radius: 0; }
#order-techpullers_cart .cart-sidebar .list-group-item {
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--cart-border);
  background: var(--cart-surface);
  color: var(--cart-body);
  font-size: 14.5px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
#order-techpullers_cart .cart-sidebar .list-group-item:last-child { border-bottom: 0; }
#order-techpullers_cart .cart-sidebar a.list-group-item:hover,
#order-techpullers_cart .cart-sidebar a.list-group-item:focus {
  background: var(--cart-primary-soft);
  color: var(--cart-primary-hover);
  text-decoration: none;
}
/* Bootstrap paints `.list-group-item.active` in its own blue at (0,2,0);
   three classes here answer it without !important. */
#order-techpullers_cart .cart-sidebar .list-group .list-group-item.active,
#order-techpullers_cart .cart-sidebar a.list-group-item.active:hover,
#order-techpullers_cart .cart-sidebar a.list-group-item.active:focus {
  background: var(--cart-primary-soft);
  border-color: var(--cart-border);
  color: var(--cart-primary-hover);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--cart-primary);
}
#order-techpullers_cart .cart-sidebar .list-group-item .badge {
  margin-left: auto;
  background: var(--cart-primary-soft);
  color: var(--cart-primary-hover);
  font-weight: 800;
}


/* --------------------------------------------------------------------------
   3. Collapsed category selector (mobile / <1200px)
   -------------------------------------------------------------------------- */
#order-techpullers_cart .sidebar-collapsed {
  margin: 0 0 28px;
  padding: 0;
  border-radius: var(--cart-radius);
}
#order-techpullers_cart .sidebar-collapsed .card,
#order-techpullers_cart .sidebar-collapsed .panel {
  margin-bottom: 12px;
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius);
  background: var(--cart-surface);
  box-shadow: var(--cart-shadow);
}
#order-techpullers_cart .sidebar-collapsed .card-header,
#order-techpullers_cart .sidebar-collapsed .panel-heading {
  padding: 12px 16px 0;
  background: transparent;
  border-bottom: 0;
}
#order-techpullers_cart .sidebar-collapsed .card-body,
#order-techpullers_cart .sidebar-collapsed .panel-body { padding: 10px 16px 14px; }
#order-techpullers_cart .sidebar-collapsed form { margin: 0; }
/* sidebar-categories-collapsed.tpl floats a bare currency <select> after the
   panels; give it the same width and rhythm so it does not read as orphaned. */
#order-techpullers_cart .sidebar-collapsed .form-inline {
  float: none;
  display: block;
  margin: 0 0 12px;
}
#order-techpullers_cart .sidebar-collapsed .form-inline select { width: 100%; }


/* --------------------------------------------------------------------------
   4. Product info block (cart.php?a=confproduct)
   -------------------------------------------------------------------------- */
#order-techpullers_cart .product-info {
  margin: 0 0 24px;
  padding: 20px 22px;
  font-size: 15px;
  background: var(--cart-primary-soft);
  border: 1px solid #f6d9c8;
  border-radius: var(--cart-radius);
}
#order-techpullers_cart .product-info .product-title {
  margin: 0 0 6px;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--cart-ink);
}
#order-techpullers_cart .product-info p { margin: 0; color: var(--cart-body); }
#order-techpullers_cart .product-info p + p { margin-top: 8px; }
/* Descriptions often run "<ul>features</ul><p>small print</p>"; without this
   the paragraph butts straight against the last ticked item. */
#order-techpullers_cart .product-info ul + p,
#order-techpullers_cart .product-info ul + div { margin-top: 14px; }

/* Feature ticks, from CSS only.

   NOTE: the template renders `{$productinfo.description}` as raw admin-authored
   HTML — there is no <ul> in product-info in the .tpl itself. These rules apply
   when (and only when) a product description happens to contain a list, which
   is how feature lists are normally entered in WHMCS. The tick is drawn as a
   background image rather than an inline element precisely because that
   description is not ours to add markup to. */
#order-techpullers_cart .product-info ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
#order-techpullers_cart .product-info ul li {
  position: relative;
  padding-left: 26px;
  list-style: none;
}
#order-techpullers_cart .product-info ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: 15px;
  height: 15px;
  background: no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2410c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-7.5'/%3E%3C/svg%3E");
}
/* A nested list is a sub-point of its feature, not another feature. */
#order-techpullers_cart .product-info ul ul { margin-top: 8px; }
#order-techpullers_cart .product-info ul ul li::before {
  background: none;
  content: "";
  top: .62em;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cart-muted);
}


/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */
#order-techpullers_cart .field-container { margin: 0 0 22px; }

#order-techpullers_cart label,
#order-techpullers_cart p.domain-renewal-desc {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cart-ink);
}
#order-techpullers_cart .form-group > label { display: block; }

#order-techpullers_cart .form-control,
#order-techpullers_cart .custom-select {
  height: auto;
  padding: 11px 14px;
  font-size: 15px;
  color: var(--cart-ink);
  background-color: var(--cart-surface);
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius-btn);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#order-techpullers_cart .form-control:focus,
#order-techpullers_cart .custom-select:focus {
  border-color: var(--cart-primary);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .15);
  outline: 0;
}
#order-techpullers_cart .form-control::placeholder { color: #9ca3af; }
#order-techpullers_cart select.form-control:not([size]):not([multiple]) { height: auto; }

/* The phone field's country/dial-code widget is absolutely positioned over the
   left of its input, and intl-tel-input reserves room for it with a
   padding-left table keyed on the dial-code length
   (`.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input` etc.).
   Those selectors are (0,4,1); the id-scoped `.form-control` padding above is
   (1,1,0) and outranks them, which put the placeholder underneath the flag.
   Re-assert the plugin's own values here so the shorthand cannot win. */
#order-techpullers_cart .intl-tel-input.separate-dial-code.iti-sdc-2 input.form-control { padding-left: 66px; }
#order-techpullers_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input.form-control { padding-left: 76px; }
#order-techpullers_cart .intl-tel-input.separate-dial-code.iti-sdc-3 input.form-control { padding-left: 74px; }
#order-techpullers_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input.form-control { padding-left: 84px; }
#order-techpullers_cart .intl-tel-input.separate-dial-code.iti-sdc-4 input.form-control { padding-left: 82px; }
#order-techpullers_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input.form-control { padding-left: 92px; }
#order-techpullers_cart .intl-tel-input.separate-dial-code.iti-sdc-5 input.form-control { padding-left: 90px; }
#order-techpullers_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input.form-control { padding-left: 100px; }
/* Without a separate dial code the widget is just the flag + caret. */
#order-techpullers_cart .intl-tel-input.allow-dropdown:not(.separate-dial-code) input.form-control { padding-left: 52px; }

/* WHMCS's icon-prefixed inputs: `.prepend-icon > .field-icon + .form-control`. */
#order-techpullers_cart .prepend-icon .field-icon i,
#order-techpullers_cart .prepend-icon .field-icon .fas,
#order-techpullers_cart .prepend-icon .field-icon .far { color: var(--cart-muted); }

#order-techpullers_cart .field-error-msg { color: #b42318; font-size: 13px; font-weight: 600; }
#order-techpullers_cart .form-control.is-invalid,
#order-techpullers_cart .form-control.field-error { border-color: #b42318; }

#order-techpullers_cart .input-group-text {
  background: #f9fafb;
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius-btn);
  color: var(--cart-muted);
}


/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
#order-techpullers_cart .btn {
  border-radius: var(--cart-radius-btn);
  font-weight: 700;
  letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#order-techpullers_cart .btn-primary,
#order-techpullers_cart .btn-primary:not(:disabled):not(.disabled) {
  padding: 13px 24px;
  font-size: 15px;
  line-height: 1.2;
  background-color: var(--cart-primary);
  border-color: var(--cart-primary);
  color: #fff;
  box-shadow: none;
}
#order-techpullers_cart .btn-primary:hover,
#order-techpullers_cart .btn-primary:focus,
#order-techpullers_cart .btn-primary:active,
#order-techpullers_cart .btn-primary:not(:disabled):not(.disabled):active,
#order-techpullers_cart .btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--cart-primary-hover);
  border-color: var(--cart-primary-hover);
  color: #fff;
}
#order-techpullers_cart .btn-primary:focus,
#order-techpullers_cart .btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .3);
}
#order-techpullers_cart .btn-primary.disabled,
#order-techpullers_cart .btn-primary:disabled {
  background-color: var(--cart-primary);
  border-color: var(--cart-primary);
  opacity: .5;
}

/* `.btn-default` is a Bootstrap 3 name the cart still uses in 29 places. It
   is not a BS4 class, but the client theme already styles it alongside
   `.btn-secondary`, so it is skinned here rather than renamed in markup. */
#order-techpullers_cart .btn-default,
#order-techpullers_cart .btn-secondary {
  background-color: var(--cart-surface);
  border: 1px solid var(--cart-border);
  color: var(--cart-ink);
  box-shadow: var(--cart-shadow);
}
#order-techpullers_cart .btn-default:hover,
#order-techpullers_cart .btn-default:focus,
#order-techpullers_cart .btn-secondary:hover,
#order-techpullers_cart .btn-secondary:focus {
  background-color: var(--cart-primary-soft);
  border-color: var(--cart-primary);
  color: var(--cart-primary-hover);
}

/* The cart's primary CTA is `.btn-success.btn-lg.btn-checkout` (viewcart.tpl),
   and the addon "add to cart" is `.btn-success.btn-sm` — both are the main
   forward action here, not a semantic "success", so both take the brand
   orange. The client theme deliberately paints `.btn-success` green for the
   rest of the portal at `body .btn-success` (0,1,1); the id below is (1,1,0)
   and wins inside the cart only, leaving that green intact everywhere else. */
#order-techpullers_cart .btn-success,
#order-techpullers_cart .btn-success:not(:disabled):not(.disabled) {
  background-color: var(--cart-primary);
  border-color: var(--cart-primary);
  color: #fff;
}
#order-techpullers_cart .btn-success:hover,
#order-techpullers_cart .btn-success:focus,
#order-techpullers_cart .btn-success:active,
#order-techpullers_cart .btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--cart-primary-hover);
  border-color: var(--cart-primary-hover);
  color: #fff;
}
#order-techpullers_cart .btn-success:focus,
#order-techpullers_cart .btn-success.focus { box-shadow: 0 0 0 3px rgba(194, 65, 12, .3); }
#order-techpullers_cart .btn-checkout { padding: 15px 30px; }
#order-techpullers_cart .btn-checkout.disabled,
#order-techpullers_cart .btn-success.disabled,
#order-techpullers_cart .btn-success:disabled {
  background-color: var(--cart-primary);
  border-color: var(--cart-primary);
  color: #fff;
  opacity: .45;
  pointer-events: none;
}

/* `.btn-info` / `.btn-warning` are the "already registered?" / "new signup"
   toggles on checkout and a back-link on domainregister — supporting actions,
   so they take the neutral treatment rather than Bootstrap's cyan and yellow. */
#order-techpullers_cart .btn-info,
#order-techpullers_cart .btn-warning,
#order-techpullers_cart .btn-info:not(:disabled):not(.disabled),
#order-techpullers_cart .btn-warning:not(:disabled):not(.disabled) {
  background-color: var(--cart-surface);
  border: 1px solid var(--cart-border);
  color: var(--cart-ink);
  box-shadow: var(--cart-shadow);
}
#order-techpullers_cart .btn-info:hover,
#order-techpullers_cart .btn-info:focus,
#order-techpullers_cart .btn-warning:hover,
#order-techpullers_cart .btn-warning:focus {
  background-color: var(--cart-primary-soft);
  border-color: var(--cart-primary);
  color: var(--cart-primary-hover);
}

#order-techpullers_cart .btn-lg {
  padding: 15px 30px;
  font-size: 16px;
  line-height: 1.2;
  border-radius: var(--cart-radius-btn);
}
#order-techpullers_cart .btn-sm { padding: 8px 14px; font-size: 13.5px; }
#order-techpullers_cart .btn-xs { padding: 4px 9px; font-size: 12.5px; border-radius: 6px; }

#order-techpullers_cart .btn-link {
  color: var(--cart-muted);
  font-weight: 600;
  text-decoration: none;
}
#order-techpullers_cart .btn-link:hover,
#order-techpullers_cart .btn-link:focus { color: var(--cart-primary-hover); text-decoration: underline; }
#order-techpullers_cart .btn-remove-from-cart:hover,
#order-techpullers_cart .btn-remove-from-cart:focus { color: #b42318; }

#order-techpullers_cart .btn-block { display: block; width: 100%; }

/* Primary actions carried by an id rather than a class. */
#order-techpullers_cart #btnCompleteProductConfig,
#order-techpullers_cart #btnCompleteOrder { width: 100%; }


/* --------------------------------------------------------------------------
   7. Order Summary
   --------------------------------------------------------------------------
   Two shapes to support, both already in the markup:
     configureproduct.tpl  #orderSummary > .order-summary  (+ button below)
     viewcart.tpl          .order-summary#orderSummary     (one element)
   So `.order-summary` is the card and `#orderSummary` is only the sticky
   container — that way neither page draws the card twice. */

#order-techpullers_cart .order-summary {
  margin: 0 0 16px;
  padding: 0;
  background: var(--cart-surface);
  border: 1px solid var(--cart-border);
  border-bottom-width: 1px;
  border-radius: var(--cart-radius);
  box-shadow: var(--cart-shadow-lg);
  overflow: hidden;
  font-size: 14px;
  color: var(--cart-body);
}
#order-techpullers_cart .order-summary h2,
#order-techpullers_cart .order-summary h2.font-size-30 {
  margin: 0;
  padding: 16px 20px;
  background: var(--cart-surface);
  border-bottom: 1px solid var(--cart-border);
  color: var(--cart-ink);
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#order-techpullers_cart .order-summary .summary-container,
#order-techpullers_cart .summary-container {
  margin: 0;
  padding: 18px 20px;
  min-height: 0;
  border-radius: 0;
  background: var(--cart-surface);
  font-size: 14px;
}
#order-techpullers_cart .order-summary .product-name {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--cart-ink);
}
#order-techpullers_cart .order-summary .product-group {
  display: block;
  margin: 0 0 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--cart-muted);
}
#order-techpullers_cart .order-summary .clearfix { padding: 3px 0; }
#order-techpullers_cart .order-summary .summary-totals,
#order-techpullers_cart .order-summary .bordered-totals {
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--cart-border);
  border-bottom: 1px solid var(--cart-border);
  color: var(--cart-muted);
}
#order-techpullers_cart .order-summary .subtotal {
  margin: 0;
  padding: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cart-ink);
  border-bottom: 1px solid var(--cart-border);
}
#order-techpullers_cart .order-summary .recurring-charges {
  color: var(--cart-muted);
  font-style: normal;
  font-size: 12.5px;
}

/* The one place the orange is used as a value, not a control. */
#order-techpullers_cart .order-summary .total-due-today {
  margin: 0 -20px -18px;
  padding: 16px 20px;
  background: var(--cart-primary-soft);
  border-top: 1px solid #f6d9c8;
}
#order-techpullers_cart .order-summary .total-due-today span {
  display: block;
  text-align: right;
}
#order-techpullers_cart .order-summary .total-due-today .amt {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cart-primary);
}
#order-techpullers_cart .order-summary .total-due-today span:not(.amt) {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cart-muted);
}
#order-techpullers_cart .order-summary .total-due-today-padded { margin: 20px 0; }

#order-techpullers_cart .order-summary .loader {
  position: relative;
  top: 12px;
  height: 0;
  padding-right: 16px;
  text-align: right;
  color: var(--cart-muted);
}
#order-techpullers_cart .order-summary .btn-continue-shopping {
  color: var(--cart-muted);
  font-size: 13.5px;
}
#order-techpullers_cart .order-summary i.fa-trash,
#order-techpullers_cart .order-summary i.fa-trash-alt { opacity: .55; color: var(--cart-muted); }
#order-techpullers_cart .order-summary i.fa-trash:hover,
#order-techpullers_cart .order-summary i.fa-trash-alt:hover { opacity: 1; color: #b42318; }

/* --- Sticky panel --------------------------------------------------------
   scripts.min.js "sticks" this panel by animating margin-top on #orderSummary
   on every scroll event, but it bails out and resets margin-top to 0 the
   moment `#scrollingPanelContainer` computes to `float: none`. Setting that
   here hands the job to real CSS `position: sticky`: smoother, no scroll
   handler, and no edit to the minified JS.

   The float is safe to drop because the parent `.row` is a Bootstrap 4 flex
   container — it has been laying these two columns out as flex items all
   along and the floats were already inert.

   `align-self: flex-start` is what actually makes the sticky work: flex items
   stretch to the row's full height by default, which would leave the panel no
   room to move within its own box. */
#order-techpullers_cart #scrollingPanelContainer { float: none; }

@media (min-width: 992px) {
  #order-techpullers_cart #scrollingPanelContainer {
    align-self: flex-start;
    position: sticky;
    top: var(--cart-sticky-top);
  }
}
@media (max-width: 991px) {
  #order-techpullers_cart #scrollingPanelContainer { position: static; }
}


/* --------------------------------------------------------------------------
   8. View cart — line items
   -------------------------------------------------------------------------- */
#order-techpullers_cart .view-cart-items-header {
  margin: 0;
  padding: 12px 18px;
  background: #f9fafb;
  border: 1px solid var(--cart-border);
  border-bottom: 0;
  border-radius: var(--cart-radius) var(--cart-radius) 0 0;
  color: var(--cart-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#order-techpullers_cart .view-cart-items {
  margin: 0 0 28px;
  border: 1px solid var(--cart-border);
  border-radius: 0 0 var(--cart-radius) var(--cart-radius);
  border-bottom: 1px solid var(--cart-border);
  background: var(--cart-surface);
  overflow: hidden;
}
#order-techpullers_cart .view-cart-items .item {
  margin: 0;
  padding: 16px 18px;
  background: var(--cart-surface);
  border: 0;
  border-bottom: 1px solid var(--cart-border);
  font-size: 14px;
}
/* The base sheet zebra-stripes these; a single hairline reads better against
   the flat page and keeps the row heights even. */
#order-techpullers_cart .view-cart-items .item:nth-child(even) { background: var(--cart-surface); }
#order-techpullers_cart .view-cart-items .item:last-child { border-bottom: 0; }
#order-techpullers_cart .view-cart-items .item-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--cart-ink);
}
#order-techpullers_cart .view-cart-items .item-group { font-size: 13px; color: var(--cart-muted); }
#order-techpullers_cart .view-cart-items .item-domain { color: var(--cart-primary); font-weight: 600; }
#order-techpullers_cart .view-cart-items .item-price { text-align: right; }
#order-techpullers_cart .view-cart-items .item-price span {
  font-size: 17px;
  font-weight: 800;
  color: var(--cart-ink);
}
#order-techpullers_cart .view-cart-items .item-price .cycle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cart-muted);
}
#order-techpullers_cart .view-cart-items .item-qty input {
  margin-bottom: 6px;
  padding: 7px 8px;
  height: auto;
  text-align: center;
}


/* --------------------------------------------------------------------------
   8b. Leftover base-sheet colours

   all.css hard-codes a #058 blue and a family of #666/#888/#ccc greys in a
   handful of rules that the sections above do not reach — mostly because they
   are more specific (`.empty-cart .btn` is (1,2,0), a plain `.btn-link` rule
   is not). Each one below was found by auditing every colour literal in
   all.css against this sheet.
   -------------------------------------------------------------------------- */
#order-techpullers_cart .empty-cart { margin: -1px 16px 0 0; }
#order-techpullers_cart .empty-cart .btn {
  padding: 5px 12px;
  background-color: #f9fafb;
  border: 1px solid var(--cart-border);
  border-top: 0;
  border-radius: 0 0 var(--cart-radius-btn) var(--cart-radius-btn);
  color: var(--cart-muted);
  font-size: 12.5px;
  font-weight: 700;
}
#order-techpullers_cart .empty-cart .btn:hover,
#order-techpullers_cart .empty-cart .btn:focus {
  background-color: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

#order-techpullers_cart .view-cart-promotion-code {
  background: var(--cart-surface);
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius);
}
#order-techpullers_cart .field-help-text { color: var(--cart-muted); font-size: 13px; }
#order-techpullers_cart .cc-input-container .existing-cc-grid { color: var(--cart-body); }
#order-techpullers_cart .transfer-not-eligible {
  color: var(--cart-body);
  background: #f9fafb;
  border-radius: var(--cart-radius-btn);
}

/* Domain search results (domainregister.tpl / configureproductdomain.tpl). */
#order-techpullers_cart div.domainresults div:not(.btn-group) {
  color: var(--cart-body);
  border-color: var(--cart-border);
}
#order-techpullers_cart div.domainresults div:not(.btn-group) span { color: var(--cart-muted); }
#order-techpullers_cart .domain-searching { color: var(--cart-muted); }
#order-techpullers_cart .spotlight-tld {
  color: var(--cart-ink);
  background: var(--cart-surface);
  border-color: var(--cart-border);
}
#order-techpullers_cart .domain-promo-box {
  color: var(--cart-ink);
  background: var(--cart-primary-soft);
  border-color: #f6d9c8;
  border-radius: var(--cart-radius);
}
#order-techpullers_cart .domain-promo-box .small { color: var(--cart-muted); }
#order-techpullers_cart .domain-renewals,
#order-techpullers_cart .service-renewals,
#order-techpullers_cart .domain-renewals .domain-renewal,
#order-techpullers_cart .service-renewals .service-renewal,
#order-techpullers_cart .addon-renewals > div { border-color: var(--cart-border); }


/* --------------------------------------------------------------------------
   9. Alerts
   -------------------------------------------------------------------------- */
#order-techpullers_cart .alert {
  border-radius: var(--cart-radius);
  border: 1px solid transparent;
  padding: 14px 18px;
  font-size: 14.5px;
}
#order-techpullers_cart .alert-info    { background: var(--cart-primary-soft); border-color: #f6d9c8; color: #7c2d12; }
#order-techpullers_cart .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
#order-techpullers_cart .alert-danger  { background: #fef3f2; border-color: #fecdca; color: #b42318; }
#order-techpullers_cart .alert-success { background: #ecfdf3; border-color: #a6f4c5; color: #027a48; }
#order-techpullers_cart .alert .alert-link { color: inherit; font-weight: 800; text-decoration: underline; }
#order-techpullers_cart .alert.info-text-sm { font-size: 13.5px; text-align: left; }


/* --------------------------------------------------------------------------
   10. Domain search and results
   -------------------------------------------------------------------------- */
#order-techpullers_cart .domain-selection-options .option {
  margin-bottom: 6px;
  padding: 12px 18px;
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius-btn);
  background: var(--cart-surface);
}
#order-techpullers_cart .domain-selection-options .option:hover {
  border-color: var(--cart-primary);
  background: var(--cart-primary-soft);
}
#order-techpullers_cart .domain-checker-result-headline { font-weight: 800; color: var(--cart-ink); }
#order-techpullers_cart .domain-checker-unavailable .domain-checker-result-headline { color: #b42318; }
#order-techpullers_cart .domain-lookup-result {
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius-btn);
  background: var(--cart-surface);
}
#order-techpullers_cart .price,
#order-techpullers_cart .cost { color: var(--cart-ink); font-weight: 800; }

/* The addon tiles on the domain configuration step. */
#order-techpullers_cart .panel-addon {
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius);
  background: var(--cart-surface);
  height: 100%;
}
#order-techpullers_cart .panel-addon .panel-body { padding: 14px 16px; }
#order-techpullers_cart .panel-addon .panel-body label {
  margin: 0;
  font-weight: 700;
  color: var(--cart-ink);
  cursor: pointer;
}
#order-techpullers_cart .panel-addon-selected {
  border-color: var(--cart-primary);
  background: var(--cart-primary-soft);
}


/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #order-techpullers_cart { font-size: 14.5px; }
  #order-techpullers_cart .header-lined h1,
  #order-techpullers_cart .header-lined h1.font-size-36 { font-size: 26px; }
  #order-techpullers_cart .order-summary { margin-top: 24px; }
}

@media (max-width: 767px) {
  #order-techpullers_cart { padding-bottom: 40px; }
  #order-techpullers_cart .header-lined { margin-bottom: 22px; }
  #order-techpullers_cart .header-lined h1,
  #order-techpullers_cart .header-lined h1.font-size-36 { font-size: 23px; }
  #order-techpullers_cart .sub-heading,
  #order-techpullers_cart .sub-heading-borderless { margin: 28px 0 16px; }
  #order-techpullers_cart .product-info { padding: 16px 18px; }
  #order-techpullers_cart .view-cart-items .item { padding: 14px 16px; }
  #order-techpullers_cart .view-cart-items .item-price { text-align: left; margin-top: 6px; }
  #order-techpullers_cart .order-summary .total-due-today .amt { font-size: 26px; }
  #order-techpullers_cart .btn-lg { padding: 14px 22px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  #order-techpullers_cart * { transition-duration: .001ms !important; }
}