/* hosteasy/domain-free-website-hosting-individual-page.css — PAGE-specific CSS for
   the Host Easy "Buy .in Domain for 3 Years + Free Website Hosting" page
   (the LIVE https://www.hosteasy.in/free-hosting-with-in-domain-registration.php).
   =========================================================================
   Per the brief the live DOM is reproduced verbatim (no invented tag/class); the
   whole redesign lives here and hangs off the page's OWN live class names:
     .content > h1                              → page heading (full-bleed hero band)
     .content > .specialParaStyl:first-of-type  → intro lead, closing the hero band
     .banner_domain_check / .combo_offer_design → the featured offer band:
       .green_combo / .combo_round_offer(_con)      the round "Rs 1545 / 3 years" badge
       .combo_text / .combo_blue / .combo_mobile_price   the offer title + price line
     .search_form + .search_domain_txt/slct/btn/list → the live domain-availability form
     .content h3                                → the four section headings (accent rule)
     .specialParaStyl                           → intro + each section's body copy
     .helisttab                                 → included / steps / benefits lists (the
                                                  pasted <br> row padding is neutralised)
     .content > p (non-.special)                → the two closing call-to-action lines
   The shared chrome (header/nav/footer) + all --ho-* tokens come from common.css /
   brand-tokens.css. CSS-only design — never a raw hex, every value is a --ho-* token. */
@import "common.css?v=2";

/* ── page container — full page width, matching home-page.php: .content uses the site
   --wrap (1180px) so the offer panel, the search, the hero AND all body copy span the
   same measure the rest of the site does. Per edit req_20260827_082851 the running body
   blocks (.specialParaStyl / .helisttab / .content h3 / closing CTAs) NO LONGER carry a
   narrower reading cap — every block takes the full .content width, as requested. ── */
:root{--ho-s-section:clamp(34px,4.6vw,66px)}
.content{max-width:var(--wrap);margin:0 auto;
  padding:var(--ho-s-section) var(--ho-s-5) var(--ho-s-8)}

/* ── hero (the live <h1> + intro lead) — full-bleed blue band, CSS-only, no wrapper tag ── */
.content > h1,
.content > .specialParaStyl:first-of-type{background:var(--ho-hero-grad);width:auto;
  margin-inline:calc(50% - 50vw);
  padding-inline:max(var(--ho-s-5),calc(50vw - 590px))}
.content > h1{font-size:var(--ho-fs-hero);line-height:var(--ho-lh-tight);
  letter-spacing:var(--ho-tracking-tight);color:var(--ho-hero-ink);
  font-weight:var(--ho-fw-black);text-align:center;text-wrap:balance;
  /* the -s-section pull-up that used to sit here (flushing the hero to the nav) now lives
     on .breadcrumb, which became the strip ABOVE this band — edit req_20260901_052928.
     The h1 keeps its own top air instead, so crumb + hero read as one continuous band. */
  margin-top:0;padding-top:var(--ho-s-6);
  padding-bottom:var(--ho-s-4);margin-bottom:0}
/* intro lead — matches home-page's hero lead (.banner_content > p): --ho-fs-md,
   sky-800, LEFT-aligned and full band width (no eyebrow, no centred narrow cap), so
   the hero reads the same as home. Design-consistency edit req_20260827_073826. */
.content > .specialParaStyl:first-of-type{font-size:var(--ho-fs-md);color:var(--ho-sky-800);
  text-align:left;max-width:none;margin-top:0;
  padding-bottom:calc(var(--ho-s-section) + 20px);
  margin-bottom:0;border-bottom:1px solid var(--ho-sky-100)}
/* the paste carries a couple of empty <p></p> spacers — collapse them */
.content > p:empty{display:none;margin:0}

/* ══ REDESIGN (edit req_20260827_082851) — the offer band + the domain search, redrawn
   as ONE unified panel spanning the full .content width (--wrap 1180), NOT a floating
   card over a separate band (that earlier version, commit 3ce2efa, still read as two
   disconnected boxes). The band and the search are two DOM siblings styled to read as a
   single connected card: a brand-grad header strip (price seal + offer title) sitting
   flush on top of a soft brand-tinted footer strip that holds the full-width search bar.
   Conservative CSS only — flexbox + gap, solid ramp tokens, layered radial gradients
   fading to the `transparent` keyword (NO rgba, NO :has(), NO container queries) so it
   renders identically everywhere and stays hex-free. ═══════════════════════════════ */

/* ── UNIFIED PANEL · TOP piece — the featured offer band ──
   (live .banner_domain_check → .combo_offer_design → .green_combo). Full .content width,
   rounded only at the TOP; no bottom border and no bottom margin so the search strip
   below butts flush against it as one continuous card. ── */
.banner_domain_check{max-width:var(--wrap);margin:var(--ho-s-8) auto 0}
.banner_domain_check .clearfix{width:100%}
/* a deep layered brand strip: twin cyan glows over the hero wash + a top crown sheen */
.combo_offer_design{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 140% at 12% -20%, var(--ho-sky-100), transparent 55%),
    radial-gradient(90% 120% at 92% 0%, var(--ho-sky-50), transparent 60%),
    var(--ho-hero-grad);
  border:1px solid var(--ho-sky-200);border-bottom:none;
  border-radius:var(--ho-r-xl) var(--ho-r-xl) 0 0;
  box-shadow:inset 0 1px 0 var(--ho-card)}
/* crown hairline — a thin brighter edge across the top (explicit sides, not `inset`
   shorthand, for the widest browser support) */
.combo_offer_design::before{content:"";position:absolute;top:0;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,transparent,var(--ho-sky-300),transparent)}
/* balanced two-column composition: the price seal to the left, the offer title + price
   chip to its right. Wraps to a centred stack < 640 (see media query). */
.combo_offer_design_con{position:relative;display:flex;align-items:center;justify-content:center;
  gap:var(--ho-s-6) var(--ho-s-8);flex-wrap:wrap;
  padding:var(--ho-s-8) var(--ho-s-7)}

/* the "Free Offer" medallion cluster — the disc with its label set as an eyebrow below */
.green_combo{display:flex;flex-direction:column;align-items:center;gap:var(--ho-s-3);
  font-size:var(--ho-fs-xs);font-weight:var(--ho-fw-bold);text-transform:uppercase;
  letter-spacing:.16em;color:var(--ho-brand-text)}
.combo_round_offer{display:flex}
/* the price "seal": a layered cyan disc, crisp white ring + soft outer halo */
.combo_round_offer_con{width:152px;height:152px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at 50% 26%, var(--ho-sky-400), var(--ho-sky-700));
  border:6px solid var(--ho-card);
  box-shadow:0 0 0 1px var(--ho-sky-200), var(--ho-e-3)}
/* seal text is WHITE: the disc is a DARK cyan gradient (sky-400->sky-700), so dark ink
   read low-contrast — white pops. The outer <span> is the block wrapper; the currency
   (.splcur) + duration (.spldura) are the live nested spans (edit req_20260827_095430). */
.combo_round_offer_con > span{display:block;color:var(--ho-white);
  font-weight:var(--ho-fw-black);font-size:var(--ho-fs-lg);line-height:var(--ho-lh-tight);
  padding:0 var(--ho-s-2)}
/* currency small + lighter; duration a quiet line under the amount */
.combo_round_offer_con .splcur{font-size:var(--ho-fs-xs);font-weight:var(--ho-fw-bold);
  letter-spacing:.04em;vertical-align:baseline;opacity:.92}
.combo_round_offer_con .spldura{font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);opacity:.9}
.combo_round_offer_con br{display:block;content:"";height:var(--ho-s-1)}

/* the offer title + price (the .combo_text <h2>) — left-set beside the seal at the wide
   size so the band reads as a two-column feature (centred stack < 640). */
.combo_text{text-align:left;flex:1 1 340px;max-width:560px;min-width:0}
/* the offer title is now a bare <span class="combo_blue"> (the <h2> was removed in the
   user's live markup, edit req_20260827_095430) — style it as the band heading directly */
.combo_blue{display:block;font-size:var(--ho-fs-2xl);line-height:var(--ho-lh-snug);
  font-weight:var(--ho-fw-black);letter-spacing:var(--ho-tracking-tight);color:var(--ho-brand-text)}
/* the price line reworked into an elegant price tag (edit req_20260827_093024): a soft
   rose-tinted chip with a hairline rose border + inset gloss, the amount set large/bold
   in --ho-price with tabular figures, so it reads as a crafted price tag rather than a
   plain pill. (The live copy '=Rs1545.00/3 years' is styled in place — CSS spaces/weights
   it; the '=' isn't removed without a markup touch.) */
.combo_mobile_price{display:inline-block;margin-top:var(--ho-s-4);
  padding:var(--ho-s-2) var(--ho-s-5);border-radius:var(--ho-r-lg);
  background:var(--ho-price-soft);color:var(--ho-price);border:1px solid var(--ho-rose-100);
  font-size:var(--ho-fs-lg);font-weight:var(--ho-fw-black);letter-spacing:var(--ho-tracking-tight);
  font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 var(--ho-white),var(--ho-e-1)}
/* inside the chip: small currency + the amount large/bold; the duration a quiet muted suffix */
.combo_mobile_price .splcur{font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-bold);vertical-align:baseline}
.combo_mobile_price .spldura{font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);color:var(--ho-body)}
.clear{clear:both}

/* ── UNIFIED PANEL · BOTTOM piece — the live domain-availability form (.search_form) ──
   Butts flush UNDER the offer band (no top margin) to complete the single connected card:
   a soft brand-tinted footer strip, rounded only at the BOTTOM, sharing the band's side
   border (border-top:none) and carrying the whole card's drop shadow. The search bar
   itself is an elevated white row spanning the FULL panel width — no narrow centred cap. ── */
.search_form{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto var(--ho-s-8);
  background:var(--ho-sky-50);
  border:1px solid var(--ho-sky-200);border-top:none;
  border-radius:0 0 var(--ho-r-xl) var(--ho-r-xl);
  box-shadow:var(--ho-e-3);
  padding:var(--ho-s-6) var(--ho-s-7)}
#message-domain:not(:empty){margin-bottom:var(--ho-s-3);padding:var(--ho-s-3) var(--ho-s-4);
  border-radius:var(--ho-r);background:var(--ho-brand-soft);color:var(--ho-brand-text);
  font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi)}
.search_form form{margin:0;
  display:flex;flex-wrap:wrap;gap:var(--ho-s-2);align-items:stretch;
  background:var(--ho-card);border:1px solid var(--ho-sky-200);border-radius:var(--ho-r-xl);
  box-shadow:var(--ho-e-2), inset 0 1px 0 var(--ho-card);padding:var(--ho-s-3);
  transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
/* focus ring on the whole search bar (solid-token ring — no rgba) */
.search_form form:focus-within{border-color:var(--ho-sky-300);
  box-shadow:var(--ho-e-2), 0 0 0 4px var(--ho-sky-100)}
.search_form form > div{display:flex;min-width:0}
.search_form form > div:first-child{flex:1 1 220px}
.search_domain_txt,.search_domain_slct{width:100%;height:52px;
  border:1px solid transparent;border-radius:var(--ho-r);
  color:var(--ho-ink);font-size:var(--ho-fs-base);font-family:inherit;padding:0 var(--ho-s-4)}
/* #txtDomain gets its OWN visible field box (edit req_20260827_093024): a light ground +
   sky border inside the search-bar card, with a cyan border on focus, so it reads as a
   real input (the .in / duration chips already carry their own borders). */
.search_domain_txt{background:var(--ho-card);border-color:var(--ho-sky-200);outline:none}
.search_domain_txt:focus{border-color:var(--ho-sky-400)}
.search_domain_txt::placeholder{color:var(--ho-body)}
.search_domain_txt:focus-visible,.search_domain_btn:focus-visible{outline:2px solid var(--ho-brand);outline-offset:2px}
/* the two readonly chips (.in extension + 3-years duration) — quiet inset pills */
.search_domain_slct{min-width:84px;text-align:center;background:var(--ho-sky-50);
  border-color:var(--ho-sky-200);color:var(--ho-brand-text);font-weight:var(--ho-fw-bold);
  cursor:default;align-self:center;height:calc(100% - var(--ho-s-2))}
/* --ho-fs-md, the size every other gold button on this site uses (edit
   req_20260903_100623). An audit of all 54 gold-background rules found 24 at md
   and only 7 at sm; the .proceed CLASS was md everywhere, while the pages that
   style the same button as input[name="proceed"] had drifted a step smaller. */
.search_domain_btn{height:52px;padding:0 var(--ho-s-7);border:1px solid var(--ho-gold-border);
  border-radius:var(--ho-r);background:var(--ho-gold-grad);color:var(--ho-gold-ink);
  font-weight:var(--ho-fw-black);font-size:var(--ho-fs-md);letter-spacing:.04em;cursor:pointer;
  font-family:inherit;
  transition:filter var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease)}
.search_domain_btn:hover{filter:brightness(1.04);box-shadow:var(--ho-e-2);transform:translateY(-1px)}
.search_domain_btn:active{transform:translateY(0)}
/* âš  :empty DOES NOT WORK HERE, and never did (req 35aa32). :empty matches only an
   element with NO child nodes at all, and WHITESPACE COUNTS — live's markup is
   `<div class="search_domain_list clearfix">\n\t\t</div>`, so the browser reports
   childNodes=1 / textContent.length=7 and :empty is false. The hide rule therefore
   never fired and the companion margin was permanently on: a zero-height results box
   holding 12px of dead space on every page load. :not(:has(*)) means "no ELEMENT
   children", which ignores whitespace and is what the rule always meant.
   (#message-domain above uses :empty and genuinely works — its live markup has nothing
   whatsoever between the tags. That contrast is the proof, not a style inconsistency.) */
.search_domain_list:not(:has(*)){display:none}
.search_domain_list:has(*){margin-top:var(--ho-s-3)}

/* ── the unified panel: responsive behaviour ───────────────────────────────── */
@media (max-width:640px){
  .combo_offer_design_con{gap:var(--ho-s-5);padding:var(--ho-s-7) var(--ho-s-4)}
  .combo_round_offer_con{width:128px;height:128px}
  /* stack the band: title re-centres under the seal */
  .combo_text{max-width:none;flex-basis:auto;text-align:center}
  /* bottom padding trimmed below the sides': the panel's TOP edge butts against the
     offer band so it needs the breathing room, the bottom is just air before the card
     ends. And the flat 64px outer margin is a very large hole on a phone. (req 35aa32) */
  .search_form{padding:var(--ho-s-5) var(--ho-s-4) var(--ho-s-4);margin-bottom:var(--ho-s-7)}
  /* search bar stacks: every field full width with a real tap target */
  .search_form form{flex-direction:column;gap:var(--ho-s-3)}
  .search_form form > div{width:100%}
  .search_domain_txt{border-color:var(--ho-line-2);border-radius:var(--ho-r);padding:13px var(--ho-s-4)}
  .search_domain_slct{width:100%;height:auto;align-self:stretch;padding:13px var(--ho-s-4)}
  .search_domain_btn{width:100%;padding:14px}
}

/* respect reduced-motion for the redesigned interactions */
@media (prefers-reduced-motion: reduce){
  .search_domain_btn:hover{filter:none;transform:none}
}

/* ── section headings (the bare <h3> blocks) — left accent rule + even rhythm ── */
.content h3{font-size:var(--ho-fs-xl);font-weight:var(--ho-fw-black);color:var(--ho-ink);
  letter-spacing:var(--ho-tracking-tight);line-height:var(--ho-lh-snug);
  margin:var(--ho-s-8) 0 var(--ho-s-3);padding-left:var(--ho-s-4);
  border-left:4px solid var(--ho-brand)}

/* ── body copy (every .specialParaStyl except the intro lead handled above) ─── */
.specialParaStyl{color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.75;
  margin:0 0 var(--ho-s-4)}
/* <b> in body copy no longer tinted (edit req_20260827_095430) — inherits paragraph colour */

/* ── check lists (.helisttab — included / steps / benefits) ────────────────── */
.helisttab{margin:0;padding:0;list-style:none;display:grid;gap:var(--ho-s-2)}
.helisttab br{display:none}
.helisttab li{position:relative;padding:var(--ho-s-3) var(--ho-s-4) var(--ho-s-3) var(--ho-s-7);
  background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r);
  color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.6}
.helisttab li::before{content:"";position:absolute;left:var(--ho-s-4);top:50%;
  transform:translateY(-50%);width:18px;height:18px;border-radius:50%;
  background:var(--ho-sky-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px}
.helisttab li b{color:var(--ho-ink)}

/* ── closing call-to-action lines (the two plain <p>s at the end) ──────────── */
.content > p:not(.specialParaStyl):not(:empty){color:var(--ho-body);font-size:var(--ho-fs-md);
  line-height:1.7;margin:var(--ho-s-8) 0 var(--ho-s-3)}
.content > p:not(.specialParaStyl):not(:empty) ~ p:not(.specialParaStyl):not(:empty){
  margin-top:var(--ho-s-5);margin-bottom:0;
  background:var(--ho-brand-soft);border:1px solid var(--ho-sky-200);border-radius:var(--ho-r-lg);
  padding:var(--ho-s-5) var(--ho-s-6);font-weight:var(--ho-fw-medium);color:var(--ho-ink)}
.content > p:not(.specialParaStyl):not(:empty) b{color:var(--ho-brand-text)}

/* ── responsive (640 / 1024 tiers) ─────────────────────────────────────────── */
@media (max-width:640px){
  .content{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)}
  .combo_offer_design_con{padding:var(--ho-s-6) var(--ho-s-5)}
  .content h3{margin-top:var(--ho-s-7)}
  /* âš  FLEX-BASIS IS THE MAIN AXIS, AND HERE THE MAIN AXIS IS THE HEIGHT (req 15918c).
     The desktop rule `.search_form form > div:first-child{flex:1 1 220px}` reads as a
     width only while the row is horizontal. The first 640px block above turns the form
     into a column, at which point that 220px becomes a 220px-TALL first row: the domain
     field sat in a box more than four times its own height. Measured at 500px before the
     fix — form 424px, rows 220/45/45/52; after — 256px, rows 52/45/45/52.
     This line USED to read `.search_form form > div{flex:1 1 100%}`, which looked like it
     already handled it but never touched the first child: (0,1,2) loses to the
     `:first-child` rule's (0,2,2). Naming BOTH selectors matches that specificity and
     wins on order, so no !important is needed.
     `0 0 auto` rather than `1 1 100%`: a 100% basis in a column means 100% of the
     CONTAINER'S height, which only behaves because this form has no definite height.
     Give the form a height one day and all four rows would stretch to fill it. */
  .search_form form > div,
  .search_form form > div:first-child{flex:0 0 auto}
  .search_domain_slct{min-width:0}
  .content > p:not(.specialParaStyl):not(:empty) ~ p:not(.specialParaStyl):not(:empty){
    padding:var(--ho-s-4) var(--ho-s-5)}
}
@media (max-width:400px){
  .content{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
}

/* ══════════════════════════════════════════════════════════════════════════════
   POST-SEARCH BLOCKS (edit req_20260901_052928 — "not fixed previous request
   missing design following live html"): the two pieces of the live page that this
   reproduction was missing — the breadcrumb trail above the hero, and the order
   receipt that lands under the search card once a domain checks out available.
   Live class vocabulary 1:1; every action/handler/hidden field is verbatim in the
   markup. The receipt is the SAME object multiyear-domain-offer.css, combo-purchase.css
   and domain-purchase.css carry, so every order surface on the site reads identically:
   green = the available cue, gold = the ONE primary action, --ho-price = the money.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── breadcrumb — the quiet full-bleed TOP STRIP of the hero band ─────────────
   Pulled up flush to the nav (it took over the h1's old -s-section margin) and given
   the SAME --ho-hero-grad as the h1/lead band below it with NO gap between, so the
   crumb and the hero read as one continuous band right after the header — the
   treatment combo-purchase.php uses. Inner content re-inset to the --wrap column
   (half = 590), matching the hero's own padding-inline. ── */
.breadcrumb{width:auto;max-width:none;text-align:left;
  margin:calc(-1 * var(--ho-s-section)) calc(50% - 50vw) 0;
  padding:var(--ho-s-4) max(var(--ho-s-5),calc(50vw - 590px)) var(--ho-s-3);
  background:var(--ho-hero-grad)}
.breadcrumb ul{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:2px 4px;margin:0;padding:0;list-style:none;
  font-size:var(--ho-fs-xs);letter-spacing:.01em;color:var(--ho-sky-800)}
.breadcrumb li{display:inline-flex}
.breadcrumb a{color:var(--ho-sky-800);text-decoration:none;
  transition:color var(--ho-dur) var(--ho-ease)}
.breadcrumb a:hover{color:var(--ho-brand-text)}
.breadcrumb a:focus-visible{outline:2px solid var(--ho-brand);outline-offset:2px;
  border-radius:var(--ho-r-xs)}
.breadcrumb li:last-child span{color:var(--ho-brand-text);font-weight:var(--ho-fw-bold)}

/* ── the order receipt ───────────────────────────────────────────────────────
   Sits directly under the unified offer/search panel, where a search result lands.
   The live markup gives the wrapping <form> class="content", which would otherwise
   re-apply this page's wrapper padding and cap inside <main>; flattened to a plain
   block that keeps only the inter-portion gap above. ── */
.content > .content{max-width:none;padding:0;margin:0 auto var(--ho-s-8)}
.order{margin:0;text-align:left}
.order_domain{background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-3);
  padding:var(--ho-s-5) var(--ho-s-6);overflow:hidden}
/* live serves this card with an inline style="border-bottom:none" — its hint that the
   totals used to be welded underneath. Detached, that inline would leave the card open
   along its bottom edge, and an inline declaration beats any stylesheet rule without
   !important. Scoped to the direct child so it cannot reach anything else. */
.order > .order_domain{border:1px solid var(--ho-line)!important}
.order_row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--ho-s-3) var(--ho-s-4)}
.order_row > div:first-child{flex:1 1 260px;display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--ho-s-2)}
.order_row > div:last-child{flex:0 0 auto;display:flex;align-items:center;gap:var(--ho-s-3)}
/* the middle row of the live receipt carries ONLY display:none content (the tlds[]
   checkbox + the hidden .dmn_name mirror), so it would render as an empty band with real
   padding. Collapsed — display:none does not stop those inputs being submitted. */
.order_row:has(.combo_price_align){display:none}

/* green check = this name is available + selected. RING + DOT, the control the sibling
   order surfaces use; ::before is a transparent 44px hit area over the 20px ring, since
   the mark is cursor:pointer and 20px alone is under the runbook's minimum target. */
.select_mark{flex:0 0 auto;width:20px;height:20px;border-radius:var(--ho-r-pill);
  border:2px solid var(--ho-success);position:relative;cursor:pointer}
.select_mark::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-radius:var(--ho-r-pill);background:var(--ho-success)}
.select_mark::before{content:"";position:absolute;inset:-12px}
.select_mark:focus-visible{outline:2px solid var(--ho-brand);outline-offset:2px}

/* the domain name is the HERO line of the card */
.order_domain .clr1{font-size:var(--ho-fs-xl);font-weight:var(--ho-fw-black);color:var(--ho-ink);
  line-height:var(--ho-lh-tight);letter-spacing:var(--ho-tracking-tight);word-break:break-word}
/* the "Available" chip. Live ships it with an inline #18c66d (plus its own padding/radius);
   that inline is dropped in the markup and the chip is themed here. SOLID green, not the
   soft tint, and this is measured: --ho-success on --ho-success-soft is 4.49:1, a hair
   under the 4.5 AA floor for this bold --ho-fs-xs chip (normal text at that size); white
   on --ho-success is 5.02:1. Matches multiyear-domain-offer / combo-purchase / ssl-combo. */
.availability_tag{display:inline-block;padding:var(--ho-s-1) var(--ho-s-3);
  border-radius:var(--ho-r-xs);background:var(--ho-success);color:var(--ho-white);
  font-size:var(--ho-fs-xs);font-weight:var(--ho-fw-bold);letter-spacing:.02em;
  white-space:nowrap}

/* term + price paired into ONE right-aligned tile */
.domain_year{font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);color:var(--ho-muted)}
.order_row:first-of-type > div:last-child{background:var(--ho-tile);
  border:1px solid var(--ho-line-2);border-radius:var(--ho-r-lg);
  padding:var(--ho-s-2) var(--ho-s-4);gap:var(--ho-s-3)}
.domain_price{font-size:var(--ho-fs-xl);font-weight:var(--ho-fw-black);color:var(--ho-price);
  letter-spacing:var(--ho-tracking-tight);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── name servers (.order_row.plan_name) — the quiet DETAIL BAND at the foot of the card.
   Live serves these as REAL editable fields here (ns11 / ns21), so they get proper field
   treatment rather than the muted text the combo pages show. Negative side/bottom margins
   equal the card's own padding, so the band runs full width and closes the card. ── */
.order_row.plan_name{display:block;
  margin:var(--ho-s-4) calc(-1 * var(--ho-s-6)) calc(-1 * var(--ho-s-5));
  padding:var(--ho-s-4) var(--ho-s-6);background:var(--ho-surface);
  border-top:1px solid var(--ho-line)}
.plan_name .dmn_name_server{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ho-s-3);
  font-size:var(--ho-fs-xs);color:var(--ho-muted);letter-spacing:.01em}
.plan_name .dmn_name_server > span:empty{display:none}
.search_form_txt{width:100%;min-width:0;height:44px;padding:0 var(--ho-s-4);
  background:var(--ho-card);border:1px solid var(--ho-line-2);border-radius:var(--ho-r);
  color:var(--ho-ink);font-size:var(--ho-fs-sm);font-family:inherit;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.plan_name .dmn_name_server > span:has(.search_form_txt){flex:1 1 220px;min-width:0}
.search_form_txt::placeholder{color:var(--ho-body)}
.search_form_txt:focus{border-color:var(--ho-sky-400);box-shadow:0 0 0 3px var(--ho-sky-100);outline:none}
.search_form_txt:focus-visible{outline:2px solid var(--ho-brand);outline-offset:2px}

/* ── totals — the detached LEDGER: gold top accent, right-aligned money lines, Net Total
   as the one emphasised row, and the ONE gold Proceed beneath it. Same ledger the sibling
   order surfaces carry. The SEARCH gold above and this gold are sequential commit actions,
   never competing at one moment. ── */
.total{margin-top:var(--ho-s-7);display:flex;flex-direction:column;gap:var(--ho-s-3);
  background:var(--ho-tile);border:1px solid var(--ho-line);
  border-top:3px solid var(--ho-gold-border);border-radius:var(--ho-r-lg);
  box-shadow:var(--ho-e-2);padding:var(--ho-s-5) var(--ho-s-6) var(--ho-s-6)}
.total_content{width:100%}
/* RIGHT-ALIGNED AS WHOLE LINES, not space-between: the label and the currency share ONE
   text node ("… : Rs ") with only the number in a span, and CSS cannot split a text node.
   space-between would push "…: Rs" left and strand it from its value. Do not change it. */
.total_content_row{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--ho-s-1);
  font-size:var(--ho-fs-sm);color:var(--ho-muted);font-weight:var(--ho-fw-medium);
  padding:var(--ho-s-1) 0}
.total_content_row span{font-weight:var(--ho-fw-bold);color:var(--ho-ink);font-variant-numeric:tabular-nums}
.total_content_row:last-child{margin-top:var(--ho-s-2);padding-top:var(--ho-s-3);
  border-top:1px solid var(--ho-line);
  font-size:var(--ho-fs-md);font-weight:var(--ho-fw-black);color:var(--ho-brand-text)}
.total_content_row:last-child span{font-size:var(--ho-fs-xl);color:var(--ho-price);
  font-weight:var(--ho-fw-black);letter-spacing:var(--ho-tracking-tight)}
/* the action takes a full row of its own, right-set under the money column */
.total .form{width:100%;display:flex;justify-content:flex-end}
.proceed{min-width:260px;border:1px solid var(--ho-gold-border);background:var(--ho-gold-grad);
  color:var(--ho-gold-ink);font-weight:var(--ho-fw-black);font-size:var(--ho-fs-md);
  letter-spacing:.04em;text-transform:uppercase;font-family:inherit;
  padding:14px var(--ho-s-6);border-radius:var(--ho-r);cursor:pointer;box-shadow:var(--ho-e-2);
  transition:filter var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease),
    transform var(--ho-dur) var(--ho-ease)}
.proceed:hover{filter:brightness(1.05);box-shadow:var(--ho-e-3);transform:translateY(-1px)}
.proceed:active{transform:translateY(0);box-shadow:var(--ho-e-1);filter:brightness(.98)}
.proceed:focus-visible{outline:2px solid var(--ho-brand);outline-offset:2px}

/* ── the two new blocks, responsive ─────────────────────────────────────────── */
@media (max-width:640px){
  /* receipt: the price tile drops under the domain line rather than squeezing beside it */
  .order_domain{padding:var(--ho-s-4) var(--ho-s-5)}
  .order_row > div:last-child{width:100%;justify-content:space-between}
  .order_row.plan_name{margin:var(--ho-s-4) calc(-1 * var(--ho-s-5)) calc(-1 * var(--ho-s-4));
    padding:var(--ho-s-4) var(--ho-s-5)}
  .plan_name .dmn_name_server > span:has(.search_form_txt){flex:1 1 100%}
  .total{padding:var(--ho-s-4) var(--ho-s-5) var(--ho-s-5)}
  .total .form{justify-content:stretch}
  .proceed{width:100%;min-width:0}
}
@media (prefers-reduced-motion: reduce){
  .proceed:hover{filter:none;transform:none}
}

/* ── the OTHER search outcome — domain NOT available (edit req_20260901_061832) ──
   The live flow shows this INSTEAD of the receipt above when the searched name is taken:
   a one-line notice carrying <span class="clr2">, then #moresuggestions with alternate
   names as submit buttons that re-search via multiyeardomain-offer.php. Both blocks are
   in the page as pasted, so this reproduction shows both outcomes at once (live shows one
   or the other) — that was the confirmed call, plan option (a).
   Ported from combo-purchase.css so the two pages carry the same objects. ── */

/* the notice — a quiet DANGER card. `.order` is already the receipt's zone on this page,
   so this is scoped by :has(.clr2), which matches ONLY the taken-domain block and can
   never reach the receipt .order above it. Capped to a readable width and centred, as the
   sibling has it — full --wrap for one line of text would read as an empty band. */
.order:has(.clr2){max-width:720px;margin:var(--ho-s-7) auto 0;padding:var(--ho-s-5) var(--ho-s-6);
  text-align:center;background:var(--ho-danger-soft);border:1px solid var(--ho-danger);
  border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-1)}
.clr2{color:var(--ho-danger);font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);
  line-height:var(--ho-lh)}

/* "More Domain Name Suggestions" — the alternates. The live markup is an <h5>, then a
   <div class="order"> holding one <form> of <input type="submit" class="combooffersuggestion">
   chips, each trailed by its hidden txtDomainExt / domDur fields (display:none inline, so
   they never enter the flex flow). NOTE the collision: .order is the receipt's zone here,
   so it is neutralised SCOPED to #moresuggestions — outside this block the receipt is
   untouched. */
#moresuggestions{margin:0 auto var(--ho-s-8)}
#moresuggestions h5{margin:var(--ho-s-6) 0 var(--ho-s-4);padding-bottom:var(--ho-s-3);
  border-bottom:1px solid var(--ho-line);
  font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-bold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ho-ink)}
#moresuggestions .order{margin:0;padding:0;max-width:none;background:none;
  border:0;box-shadow:none}
#moresuggestions form{display:flex;flex-wrap:wrap;gap:var(--ho-s-3)}
/* quiet CYAN outline pills, matching the sibling: green stays the "Available" success cue
   and gold stays the ONE primary action (SEARCH / Proceed), so picking an alternative name
   never outranks Proceed. */
.combooffersuggestion{appearance:none;-webkit-appearance:none;font-family:inherit;
  border:1px solid var(--ho-brand);background:var(--ho-card);color:var(--ho-brand-text);
  font-weight:var(--ho-fw-semi);font-size:var(--ho-fs-sm);
  padding:9px var(--ho-s-5);border-radius:var(--ho-r-pill);box-shadow:var(--ho-e-1);
  transition:background var(--ho-dur) var(--ho-ease),color var(--ho-dur) var(--ho-ease),
    transform var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.combooffersuggestion:hover{background:var(--ho-brand);color:var(--ho-white);
  transform:translateY(-1px);box-shadow:var(--ho-e-2)}
.combooffersuggestion:active{transform:translateY(0)}
.combooffersuggestion:focus-visible{outline:2px solid var(--ho-brand);outline-offset:2px}

@media (max-width:640px){
  .order:has(.clr2){padding:var(--ho-s-4) var(--ho-s-5)}
  #moresuggestions form{gap:var(--ho-s-2)}
  .combooffersuggestion{padding:9px var(--ho-s-4)}
}
@media (prefers-reduced-motion: reduce){
  .combooffersuggestion:hover{transform:none}
}