/*
 * Webdev Zimbabwe — order form overrides (v2026)
 *
 * Scope: the DOMAIN SEARCH step only (domainregister.tpl, reached from
 * /domain-registration and cart.php?a=add&domain=register). The cart, configure
 * and checkout steps are deliberately untouched — they are a separate pass.
 *
 * Load LAST, after all.min.css / style.css / main.css / custom.css. See
 * common.tpl.
 *
 * ---------------------------------------------------------------------------
 * RULES FOR EDITING THIS FILE
 *
 * 1. CSS ONLY. Do not change markup or class names in the .tpl files. WHMCS's
 *    main.js drives this page by toggling `w-hidden` and the availability
 *    classes (.domain-available / .domain-unavailable / .domain-tld-unavailable
 *    / .domain-invalid). Renaming or restructuring any of those breaks the
 *    search, the suggestions and add-to-cart.
 *
 * 2. NEVER set `display` on .domain-lookup-result, .domain-suggestion,
 *    .spotlight-tld .domain-lookup-result, or anything that also carries
 *    `w-hidden`. The theme hides those with `w-hidden { display: none }` and the
 *    script un-hides them by removing the class; a competing display rule here
 *    would either reveal placeholder rows or hide real results.
 *
 * 3. This page is a top-5 converter (GA4: 85,291 views, 99.5% session-key-event
 *    rate). Re-test the full search -> result -> add-to-cart path after any
 *    change, including an unavailable domain and an invalid one.
 *
 * Everything is reversible by removing the three link tags from common.tpl.
 * ---------------------------------------------------------------------------
 */

/* ---------- type ----------
 * The order form inherits Open Sans / Raleway from the client-area theme. The
 * font files are already loaded by webdev-fonts.css alongside this file.
 *
 * `!important` throughout this block: the legacy theme sets font-family on
 * dozens of compound selectors (some already !important), and enumerating them
 * would be longer and more brittle than overriding the family outright. Only the
 * family is forced — never size, weight or colour.
 */
#order-standard_cart,
#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart button,
#order-standard_cart .btn,
#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4 {
  font-family: var(--wd-font-sans) !important;
}

#order-standard_cart .section-heading {
  font-weight: 700;
  letter-spacing: -0.015em;
}

#order-standard_cart .section-subheading {
  font-weight: 400;
}

/* ---------- the search panel ---------- */

/*
 * The panel is a slate surface, matching the dark sections on the marketing
 * pages, rather than the theme's flat grey box.
 */
#order-standard_cart .domain-checker-bg {
  background: var(--wd-slate-600, #4c555d);
  border-radius: var(--wd-card-radius, 15px);
}

/*
 * Search field. `height` as well as `min-height` because the theme's
 * .input-group-lg sets an explicit height that would otherwise win on the
 * shorthand.
 */
#order-standard_cart #frmDomainChecker .form-control,
#order-standard_cart #frmDomainChecker #inputDomain {
  background: var(--wd-white, #fff);
  border: 1px solid var(--wd-grey-200, #e3e6e8);
  border-radius: 999px 0 0 999px;
  box-shadow: none;
  color: var(--wd-charcoal-900, #1b1f22);
  font-size: 1rem;
  height: 56px;
  padding: 0 1.25rem;
}

#order-standard_cart #frmDomainChecker .form-control::placeholder {
  color: var(--wd-grey-500, #6c757d);
}

#order-standard_cart #frmDomainChecker .form-control:focus {
  border-color: var(--wd-orange-500, #f47c20);
  box-shadow: var(--wd-focus, 0 0 0 3px rgb(244 124 32 / 35%));
  outline: 0;
}

/*
 * Search button: brand orange, not the theme's yellow.
 *
 * `!important` on the paint properties is unavoidable, not laziness. The legacy
 * theme paints buttons with `!important` in several places — e.g. in
 * assets/css/style.min.css:
 *     .btn-default-fill:hover, .btn-default-yellow-fill {
 *       background-color: #fdd700 !important; color: #000 !important; }
 * and more of the same in assets/css/main.min.css. An ID selector still loses to
 * those, so the only way to win is to contest the same properties at the same
 * priority. Verified by inspecting the computed style in a browser: without
 * these the button stayed rgb(253, 215, 0).
 *
 * Scoped to #order-standard_cart and to these specific hooks, so nothing outside
 * the order form is affected.
 */
#order-standard_cart #btnCheckAvailability,
#order-standard_cart .domain-check-availability {
  background: var(--wd-orange-500, #f47c20) !important;
  background-color: var(--wd-orange-500, #f47c20) !important;
  border: 1px solid var(--wd-orange-500, #f47c20) !important;
  border-radius: 0 999px 999px 0;
  color: var(--wd-white, #fff) !important;
  font-weight: 700 !important;
  height: 56px;
  padding: 0 1.75rem;
}

@media (hover: hover) and (pointer: fine) {
  #order-standard_cart #btnCheckAvailability:hover,
  #order-standard_cart .domain-check-availability:hover {
    background-color: var(--wd-orange-600, #df6812) !important;
    border-color: var(--wd-orange-600, #df6812) !important;
    color: var(--wd-white, #fff) !important;
  }
}

#order-standard_cart #btnCheckAvailability:focus-visible {
  box-shadow:
    0 0 0 2px var(--wd-slate-600, #4c555d),
    0 0 0 5px var(--wd-white, #fff);
  outline: 0;
}

/* On small screens the group stacks, so the pill halves become full pills. */
@media (max-width: 575.98px) {
  #order-standard_cart #frmDomainChecker .form-control,
  #order-standard_cart #frmDomainChecker #inputDomain {
    border-radius: 999px;
  }

  #order-standard_cart #btnCheckAvailability,
  #order-standard_cart .domain-check-availability {
    border-radius: 999px;
    margin-top: 0.625rem;
    width: 100%;
  }
}

/* ---------- result states ----------
 * Status is carried by text in the markup already; colour here is reinforcement
 * only, never the sole signal (design-system §13).
 */
#order-standard_cart .domain-checker-result-headline {
  font-size: 1.0625rem;
}

#order-standard_cart .domain-available,
#order-standard_cart .domain-checker-available {
  color: var(--wd-success-600, #16875a);
  font-weight: 700;
}

#order-standard_cart .domain-unavailable,
#order-standard_cart .domain-tld-unavailable,
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-invalid,
#order-standard_cart .domain-checker-invalid {
  color: var(--wd-warning-600, #b8730a);
  font-weight: 600;
}

#order-standard_cart .domain-length-restrictions {
  color: var(--wd-grey-500, #6c757d);
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
}

#order-standard_cart .domain-price .price {
  font-weight: 700;
}

/* ---------- add to cart ----------
 * The single most important control on the page. Orange pill, and the hover
 * colour is !important because custom.css carries a global `a:hover` that
 * otherwise repaints button text.
 */
#order-standard_cart .btn-add-to-cart,
#order-standard_cart .btn-primary.btn-add-to-cart {
  background: var(--wd-orange-500, #f47c20) !important;
  background-color: var(--wd-orange-500, #f47c20) !important;
  border: 1px solid var(--wd-orange-500, #f47c20) !important;
  border-radius: 999px;
  color: var(--wd-white, #fff) !important;
  font-weight: 700 !important;
  min-height: 44px;
  padding: 0.625rem 1.5rem;
}

@media (hover: hover) and (pointer: fine) {
  #order-standard_cart .btn-add-to-cart:hover {
    background-color: var(--wd-orange-600, #df6812) !important;
    border-color: var(--wd-orange-600, #df6812) !important;
    color: var(--wd-white, #fff) !important;
  }
}

/* Secondary action: outlined, so it never competes with add-to-cart. */
#order-standard_cart .domain-contact-support,
#order-standard_cart .btn-primary.domain-contact-support {
  background: transparent;
  border: 1px solid var(--wd-orange-500, #f47c20);
  border-radius: 999px;
  color: var(--wd-orange-700, #c9570a);
  font-weight: 600;
  min-height: 44px;
  padding: 0.625rem 1.5rem;
}

/* ---------- spotlight TLDs and suggestions ---------- */

#order-standard_cart .spotlight-tld {
  border-radius: var(--wd-card-radius, 15px);
  box-shadow: var(--wd-card-shadow, 0 5px 15px 0 rgb(110 110 110 / 10%));
}

/*
 * `background` only — no display, no visibility. These rows carry `w-hidden`
 * and are un-hidden by main.js.
 */
#order-standard_cart .domain-suggestion {
  border-radius: var(--wd-card-radius, 15px);
  margin-bottom: 0.5rem;
}

#order-standard_cart .domain-suggestion .domain,
#order-standard_cart .domain-suggestion .extension {
  font-weight: 700;
}

#order-standard_cart .domain-suggestion .price {
  font-weight: 700;
}

/* ---------- TLD category filters ---------- */

#order-standard_cart .tld-filters-button,
#order-standard_cart .btn-default-yellow-fill {
  background-color: var(--wd-orange-050, #fff6ee) !important;
  border: 1px solid var(--wd-orange-500, #f47c20) !important;
  border-radius: 999px;
  color: var(--wd-orange-700, #c9570a) !important;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.25rem;
  min-height: 40px;
  padding: 0.5rem 1.125rem;
}

@media (hover: hover) and (pointer: fine) {
  #order-standard_cart .tld-filters-button:hover {
    background: var(--wd-orange-500, #f47c20);
    color: var(--wd-white, #fff) !important;
  }
}

/* ---------- pricing table ----------
 * The theme paints the header row pink. This restates it as the same grey head
 * the comparison tables on the marketing pages use.
 */
#order-standard_cart .table-list thead tr,
#order-standard_cart .table-list thead th {
  background: var(--wd-grey-050, #f7f8f9) !important;
  border-bottom: 1px solid var(--wd-grey-200, #e3e6e8);
  color: var(--wd-charcoal-900, #1b1f22) !important;
  font-size: 0.9375rem;
  font-weight: 700;
}

#order-standard_cart .table-list tbody td {
  color: var(--wd-grey-700, #495057);
  font-size: 0.9375rem;
  vertical-align: middle;
}

#order-standard_cart .table-list tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--wd-grey-100, #eef0f2);
}

#order-standard_cart .tld-sale-group {
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.1875rem 0.5rem;
  text-transform: uppercase;
}

/* ---------- promo boxes ---------- */

#order-standard_cart .domain-promo-box {
  border-radius: var(--wd-card-radius, 15px) !important;
  box-shadow: var(--wd-card-shadow, 0 5px 15px 0 rgb(110 110 110 / 10%)) !important;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

#order-standard_cart .domain-promo-content h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

#order-standard_cart .domain-promo-content p {
  font-size: 0.9375rem;
}

/* ---------- featured TLD tiles ---------- */

#order-standard_cart .featured-tld {
  border-radius: var(--wd-card-radius, 15px);
}

#order-standard_cart .featured-tld .price {
  font-weight: 700;
}

/* The .wd-carthero hero MOVED to webdev-base.css. /domain-pricing does NOT
 * load this stylesheet — only webdev-base.css is common to the order pages and
 * the pricing page, so the banner has to live there to reach all three. */