/* hosteasy/domain-main-page.css — PAGE-specific CSS for the Host Easy
   "Domain Name Search / Check Availability" page (check-availability.php).
   =========================================================================
   STYLE-ONLY re-theme, keyed strictly to the LIVE hosteasy.in class names so it
   drops straight onto the production DOM (kept byte-for-byte — see the saved
   original admin/hosteasy/originals/domain-main-page.html; MOD-02 diffs against it).
   No HTML/classes/sections are added — this file only themes what already ships:
     .content            → the single page wrapper (h1 hero + featured exts + prose)
     .content > h1       → the "Domain Name Search" page heading
     .exten / .exten_con → the four featured-extension price cards
     .search_form        → the domain lookup card (#txtDomain + TLD <select> + SEARCH)
     .search_domain_list → the full TLD price grid (extension + price)
     .helisttab          → the SEO reason lists (rendered as check-marked cards)
     .content h3 / p     → the SEO section headings + prose
   Loads the shared design system first (tokens + base + header/nav/footer +
   shared responsive) then adds ONLY this page's sections. Never a raw hex —
   every value is a --ho-* token from brand-tokens.css. */
@import "common.css";

/* domain-page rhythm — match the home page's ONE slightly-smaller, EVEN vertical
   step so the two pages read as one system. home-page.css scopes this same value
   (this sheet loads only on the domain page, so the global token is untouched
   elsewhere); it drives the .content top pad and the h3 section gaps below, giving
   the bands the same tighter, even cadence as home (req parity — spaces). */
:root{--ho-s-section:clamp(34px,4.6vw,66px)}

/* ── page wrapper (the live .content is the only content block) ────────────── */
/* The h1 opens the full-bleed hero band (below), which — exactly like home's
   .banner — sits FLUSH under the nav, so .content carries NO top step (the band's
   own top padding is its breathing room). .content stays capped/centred for the
   prose below; the h1 + .exten break OUT of it to span the viewport (see below). */
.content{max-width:var(--wrap);margin:0 auto;padding:0 var(--ho-s-5) 0}
.content br{display:none}                 /* neutralise the markup's layout <br>s */

/* ── FULL-BLEED "Domain search" hero band = .content > h1  +  .exten ────────── */
/* req ("exact what home page needs — full width background color"): the hero now
   mirrors home's .banner EXACTLY — the pale-cyan --ho-hero-grad wash bleeds edge to
   edge across the whole viewport (was a contained 960px rounded card), with the
   heading + price chips + lead + subhead capped and centred at the 960px measure
   inside it. In the served DOM the <h1> is a SIBLING of .exten (both direct children
   of .content — MOD-02 keeps the markup byte-for-byte, so we can't nest them), so the
   band is built from TWO flush halves that share one wash: the h1 is the TOP, .exten
   the BOTTOM (carrying the one bottom hairline, like home's .banner). Both break OUT
   of the centred .content with the canonical container-breakout margins
   `calc(50% - 50vw)` (NOT width:100vw — that trick adds no scrollbar and, because
   .content's side padding is --ho-s-5=24px, resolves to exactly -24px on narrow
   viewports so the band reaches the window edge cleanly). Content is re-capped to
   960px via `padding-inline:max(--ho-s-5, calc(50vw - 480px))` — full-width paint,
   centred 960px measure. Square full-bleed edges, no side/rounded borders. */

/* top half — the heading, full-bleed. Keeps the exact hero type tokens home's h1
   uses (--ho-fs-hero / --ho-lh-tight / --ho-tracking-tight / --ho-fw-black /
   --ho-hero-ink — sky-900, AA on the pale wash) so the two pages read as one system.
   No border/radius; no bottom margin so it fuses with .exten below. */
.content > h1{margin:0 calc(50% - 50vw);
  background:var(--ho-hero-grad);border:0;border-radius:0;
  padding:var(--ho-s-7) max(var(--ho-s-5),calc(50vw - 480px)) var(--ho-s-4);
  text-align:center;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)}

/* bottom half — the featured extensions (.exten → four .exten_con price cards, plus
   the lead <p> and "Check…" <h3> the markup nests here). Same full-bleed wash as the
   h1, carrying the single bottom hairline (like home's .banner border-bottom), no top
   margin so the two halves read as one continuous band. Extra bottom padding
   (--ho-s-8) leaves a tall blue base for the search card to overlap up INTO (below).
   The flex content is capped to the same 960px measure; cards reflow 2-up at ≤640px. */
.exten{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:var(--ho-s-3);
  margin:0 calc(50% - 50vw);background:var(--ho-hero-grad);border:0;border-bottom:1px solid var(--ho-sky-100);
  border-radius:0;padding:var(--ho-s-2) max(var(--ho-s-5),calc(50vw - 480px)) var(--ho-s-8)}
.exten_con{flex:1 1 150px;max-width:260px;background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-lg);box-shadow:var(--ho-e-1);padding:var(--ho-s-4) var(--ho-s-3);text-align:center;
  transition:transform var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.exten_con:hover{transform:translateY(-3px);box-shadow:var(--ho-e-2);border-color:var(--ho-sky-200)}
.exten_name{font-size:var(--ho-fs-lg);font-weight:var(--ho-fw-black);color:var(--ho-brand-text);letter-spacing:var(--ho-tracking-tight)}
.exten_amnt{margin-top:var(--ho-s-1);font-size:var(--ho-fs-sm);color:var(--ho-muted)}
.exten_amnt strong{color:var(--ho-price);font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-md)}

/* ── SEO section headings + prose — the STANDARD 960px content column ───────── */
/* Prose + section headings share the same 960px column (centred, margin-auto) as
   the featured exts, search card, TLD grid and reason lists — so every block on
   the page lines up on one left/right edge instead of the prose sitting narrower
   and further left. 960px is the page's standard content width; below it (padded
   .content box on tablet/mobile) the column simply fills the available width, so
   the alignment holds identically from mobile up to the widest screen. */
/* Type follows the site standard (same scale/treatment as hosting-page.css's SEO
   prose): section h3 = --ho-fs-lg, bold, ink, tracking-tight; prose p = --ho-fs-base
   at the 1.7 reading line-height. Sizes are token/clamp-based so they stay fluid. */
/* req (note 3 — constancy of space): every SEO section heading opens on ONE even
   --ho-s-section step and sits --ho-s-4 above its content, so the gap between
   sections is identical top-to-bottom (the featured-exts strip, the search card and
   the reason lists all feed into this same rhythm via margin collapse). */
.content h3{font-size:var(--ho-fs-lg);font-weight:var(--ho-fw-bold);color:var(--ho-ink);letter-spacing:var(--ho-tracking-tight);
  max-width:960px;margin:var(--ho-s-section) auto var(--ho-s-4)}
.content > p{color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.7;max-width:960px;margin:0 auto var(--ho-s-4)}
.content > p b{color:var(--ho-ink)}
/* The lead paragraph AND the "Check Domain Name Availability" heading are markup
   children of .exten: the <p> auto-closes before the <h3>, so both land inside the
   flex row alongside the four cards. They break onto their own full-width rows (flex
   1 1 100%) UNDER the cards — but stay INSIDE the hero band now, as the panel's intro
   copy + closing subhead, on tight in-band spacing (not the section step, which would
   split the band open). The band's own bottom padding is the gap to the search card. */
/* req (note 2 — "why this to colour blue"): the lead paragraph keeps the normal body
   ink --ho-body (not a blue accent) — it reads as plain intro body copy that happens
   to sit on the pale wash. Keeps its --ho-fs-md size and left-align (inline style). */
.exten > p{flex:1 1 100%;margin:var(--ho-s-4) auto var(--ho-s-3);max-width:none;
  font-size:var(--ho-fs-md);line-height:1.7;color:var(--ho-body)}
.exten > p b{color:var(--ho-ink)}
/* "Check Domain Name Availability" — the band's closing subhead, centred on the wash
   in the hero ink; tight top gap keeps it part of the panel, no bottom margin (the
   band's padding closes the card). */
.exten > h3{flex:1 1 100%;max-width:none;text-align:center;color:var(--ho-hero-ink);
  margin:var(--ho-s-2) auto 0}

/* ── domain search card (OVERLAPS the hero band, gold SEARCH action) ────────── */
/* req ("'.search_form' starts from the middle of the blue style ends"): exactly like
   home, the white search card is pulled UP with a negative top margin so its top edge
   overlaps into the bottom of the blue band — it lifts by --ho-s-6 (32px) into the
   band's --ho-s-8 (64px) bottom base, so the card starts right in the middle of where
   the blue ends. position:relative + z-index keep it above the wash. */
.search_form{max-width:960px;margin:calc(-1 * var(--ho-s-6)) auto 0;position:relative;z-index:10}
#message-domain:not(:empty){margin:0 0 var(--ho-s-3);padding:10px 14px;border-radius:var(--ho-r-sm);
  background:var(--ho-price-soft);color:var(--ho-price);font-size:var(--ho-fs-sm)}
.search_form > form{margin:0;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-3);display:flex;gap:var(--ho-s-2);align-items:stretch}
.search_form > form > div:first-child{flex:1 1 auto}
.search_domain_txt{width:100%;height:100%;border:0;padding:14px var(--ho-s-4);font-size:var(--ho-fs-md);
  color:var(--ho-ink);background:transparent;border-radius:var(--ho-r);outline:none}
.search_domain_txt::placeholder{color:var(--ho-muted)}
/* extension <select> (.txtDomainExt) — match the home page's size: home renders it
   at --ho-fs-md (home-page.css line 51); this page had it a step smaller at
   --ho-fs-sm, so the ext dropdown read lighter than the search field beside it. Bump
   to --ho-fs-md for parity; horizontal padding (0 --ho-s-3) already matches home. */
.search_domain_slct{height:100%;border:1px solid var(--ho-line-2);background:var(--ho-tile);color:var(--ho-brand-text);
  font-weight:var(--ho-fw-semi);padding:0 var(--ho-s-3);border-radius:var(--ho-r);font-size:var(--ho-fs-md)}
.search_domain_btn{height:100%;border:1px solid var(--ho-gold-border);background:var(--ho-gold-grad);color:var(--ho-gold-ink);
  font-weight:var(--ho-fw-black);letter-spacing:.03em;padding:0 var(--ho-s-6);border-radius:var(--ho-r);cursor:pointer;
  transition:filter var(--ho-dur) var(--ho-ease)}
.search_domain_btn:hover{filter:brightness(1.04)}

/* ── full TLD price grid ──────────────────────────────────────────────────── */
.search_domain_list{max-width:960px;margin:var(--ho-s-5) auto 0}
/* Home-page model (home-page.css line 57): a wrap-around flex row, NOT a rigid
   150px auto-fill grid — a longer live label (e.g. ".com  Rs 1598 / 2Y") + nowrap
   couldn't fit a fixed 150px cell and spilled the pill/price out of the card. Each
   pill now sizes to its own content and wraps cleanly, so nothing overruns. */
.search_domain_list ul{display:flex;flex-wrap:wrap;gap:var(--ho-s-2)}
.search_domain_list li{display:flex;align-items:center;gap:6px;background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-pill);padding:8px 12px;font-size:var(--ho-fs-sm);color:var(--ho-body);cursor:pointer;
  transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease)}
.search_domain_list li:hover{border-color:var(--ho-sky-300);color:var(--ho-brand-text);box-shadow:var(--ho-e-1);transform:translateY(-1px)}
.search_domain_list li b{margin-left:auto;padding-left:8px;white-space:nowrap;color:var(--ho-price);font-weight:var(--ho-fw-bold)}
.search_domain_list input[type=radio]{accent-color:var(--ho-brand);margin:0;flex:0 0 auto}

/* ── SEO reason lists (ul.helisttab → check-marked cards) ──────────────────── */
/* Centre these on the same 960px column (margin-auto) as the headings above them
   and the rest of the page — otherwise the cards left-align to the 1180px .content
   edge and read as indented ~110px left of their own h3. */
.helisttab{display:grid;gap:var(--ho-s-3);max-width:960px;margin:var(--ho-s-4) auto var(--ho-s-4)}
.helisttab li{position:relative;padding:var(--ho-s-4) var(--ho-s-5) var(--ho-s-4) calc(var(--ho-s-6) + var(--ho-s-2));
  background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-lg);box-shadow:var(--ho-e-1);
  color:var(--ho-body);font-size:var(--ho-fs-base);line-height:var(--ho-lh)}
.helisttab li b{color:var(--ho-ink)}
.helisttab li::before{content:"";position:absolute;left:var(--ho-s-4);top:var(--ho-s-4);
  width:22px;height:22px;border-radius:50%;background:var(--ho-success-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-size:13px;background-position:center;background-repeat:no-repeat}

/* ── page responsive ──────────────────────────────────────────────────────── */
@media (max-width:640px){
  /* the TLD row is a wrap-around flex now (not a grid) — pills already reflow to
     fit, so no per-column override is needed on mobile. */
  .exten_con{flex:1 1 44%}
  /* softer overlap on mobile (same as home) — the stacked band is shorter, so a full
     --ho-s-6 lift would crowd the search fields; --ho-s-4 keeps a clean overlap. */
  .search_form{margin-top:calc(-1 * var(--ho-s-4))}
  /* domain search → full-width stacked fields with real borders + tap sizes */
  .search_form > form{flex-direction:column;gap:var(--ho-s-3)}
  .search_form > form > div{width:100%}
  .search_domain_txt{border:1px solid var(--ho-line-2);border-radius:var(--ho-r);padding:13px var(--ho-s-4)}
  .search_domain_slct{width:100%;height:auto;padding:13px var(--ho-s-3)}
  .search_domain_btn{width:100%;height:auto;padding:14px;border-radius:var(--ho-r)}
}

/* page-specific reduced-motion overrides (the site-wide guard is in common.css) */
@media (prefers-reduced-motion: reduce){
  .exten_con:hover,.search_domain_list li:hover{transform:none}
}