/* ============================================================
   Builder flow: design → domain → checkout → complete
   ============================================================ */
body { background: var(--bg-light); }

.screen { display: none; }
.screen.active { display: block; }

/* ============================================================
   "Getting Ready!" generating overlay — dimmed backdrop + white card
   ============================================================ */
.gen-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(22, 20, 32, .55);
  backdrop-filter: blur(3px);
  animation: genFade .25s ease;
}
@keyframes genFade { from { opacity: 0; } }

.gen-modal {
  width: 100%; max-width: 560px; background: #fff; border-radius: 16px;
  padding: 38px 40px 30px; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  max-height: calc(100vh - 48px); overflow-y: auto;
  animation: genPop .3s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes genPop { from { transform: translateY(14px) scale(.97); opacity: 0; } }

.gen-modal h2 { font-size: 1.85rem; font-weight: 700; letter-spacing: -.01em; color: #14121f; }
.gen-sub { margin-top: 8px; font-size: .98rem; color: #2f2c40; }
.gen-sub b { font-weight: 700; }

/* countdown ring */
.gen-ring { position: relative; width: 108px; height: 108px; margin: 26px auto 4px; }
.gen-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gen-ring .ring-track { fill: none; stroke: #e6e1f7; stroke-width: 7; }
.gen-ring .ring-fill {
  fill: none; stroke: var(--violet-700); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset .95s linear;
}
.gen-count {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.75rem; font-weight: 700; color: #14121f; font-variant-numeric: tabular-nums;
}
.gen-msg { margin-top: 10px; font-size: .88rem; color: var(--muted); min-height: 22px; }

/* trust / promo panel */
.gen-promo {
  margin-top: 24px; border-radius: 12px; overflow: hidden; text-align: left;
  border: 1px solid var(--line);
}
.gen-promo-media { display: block; width: 100%; height: 190px; object-fit: cover; }
.gen-promo-fallback {
  height: 190px; display: grid; place-items: center; padding: 20px; text-align: center;
  background:
    radial-gradient(600px 240px at 70% 0%, rgba(124, 58, 237, .35), transparent 65%),
    linear-gradient(150deg, #170b38, #3b0764 60%, #241250);
  color: #fff;
}
.gen-promo-fallback .gpf-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.gen-promo-fallback .gpf-pill {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px; padding: 6px 13px; font-size: .74rem; font-weight: 600;
}
.gen-promo-fallback h4 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.gen-promo-fallback p { font-size: .82rem; color: #cfc6ea; margin-top: 6px; }
.gen-promo-cap {
  background: linear-gradient(90deg, var(--violet-700), #a21caf);
  color: #fff; padding: 14px 18px; text-align: center;
}
.gen-promo-cap span { display: block; font-size: .86rem; opacity: .92; }
.gen-promo-cap b { display: block; font-size: 1.05rem; font-weight: 700; margin-top: 2px; }

/* ============================================================
   STEP 1 — choose design
   ============================================================ */
/* The preview is a fixed full-viewport layer, so its display MUST stay tied to
   .active — otherwise it keeps painting over the later steps. */
.preview-screen { position: fixed; inset: 0; z-index: 40; background: #101014; }
.screen.preview-screen.active { display: flex; flex-direction: column; }

.preview-stage { position: relative; flex: 1; min-height: 0; background: #101014; }
.preview-stage iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* skeleton while a design renders */
.preview-loading {
  position: absolute; inset: 0; display: none; place-items: center; z-index: 4;
  background: #101014; color: #8f8aa6; font-size: .9rem; gap: 14px;
}
.preview-loading.on { display: grid; }
.preview-loading .pl-spin {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 12px;
  border: 3px solid rgba(255,255,255,.14); border-top-color: var(--violet-400);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* floating contact buttons, as the generated site would show them */
.preview-float { position: absolute; right: 0; top: 42%; z-index: 5; display: flex; flex-direction: column; }
.pf-btn {
  width: 56px; height: 56px; display: grid; place-items: center; color: #fff;
  transition: .15s; cursor: pointer;
}
.pf-btn:hover { filter: brightness(1.08); }
.pf-call { background: #f5c400; color: #1a1a1a; border-radius: 6px 0 0 0; }
.pf-wa { background: #25d366; border-radius: 0 0 0 6px; }

/* bottom control bar */
.preview-bar { flex: 0 0 auto; background: #1c1c22; border-top: 1px solid rgba(255,255,255,.08); }
.pv-pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px 12px; flex-wrap: wrap;
}
.pv-arrow {
  width: 36px; height: 36px; border-radius: 50%; color: #cfcbdd; font-size: 1.1rem;
  display: grid; place-items: center; transition: .15s;
}
.pv-arrow:hover { background: rgba(255,255,255,.1); color: #fff; }
.pv-nums { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pv-num {
  min-width: 42px; height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: #cfcbdd; transition: .15s;
}
.pv-num:hover { background: rgba(255,255,255,.1); color: #fff; }
.pv-num.active { background: #fff; color: #14121f; font-weight: 700; padding: 0 22px; }

.pv-cta { background: #26262e; padding: 14px 16px 18px; display: grid; place-items: center; gap: 8px; }
.pv-cta .btn { width: min(530px, 100%); }
.pv-cta small { color: #9d99b0; font-size: .8rem; }

@media (max-width: 640px) {
  .pv-num { min-width: 36px; padding: 0 10px; height: 36px; font-size: .85rem; }
  .pv-num.active { padding: 0 14px; }
  .pf-btn { width: 46px; height: 46px; }
}

/* ============================================================
   STEP 2 — choose domain
   ============================================================ */
.domain-wrap { max-width: 1100px; margin: 0 auto; padding: 44px 24px 70px; }
.domain-title { text-align: center; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.domain-sub { text-align: center; color: var(--muted); margin-top: 8px; }
.domain-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; margin-top: 36px; align-items: start; }

.domain-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); }
.domain-search { display: flex; gap: 0; }
.domain-search input {
  flex: 1; padding: 13px 16px; border: 1.5px solid var(--line); border-right: none;
  border-radius: 10px 0 0 10px; outline: none; font-size: 1rem;
  /* A flex item defaults to min-width:auto, which for a text input is its
     intrinsic ~20-character width. Without this the search row cannot shrink
     below ~430px and drags the whole step wider than a phone screen. */
  min-width: 0;
}
.domain-search input:focus { border-color: var(--violet-400); }
.domain-search button { border-radius: 0 10px 10px 0; padding: 0 24px; }

.domain-list { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.domain-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: .12s; background: #fff;
}
.domain-row:last-child { border-bottom: none; }
.domain-row:hover { background: var(--violet-50); }
.domain-row.selected { background: var(--violet-50); box-shadow: inset 0 0 0 1.5px var(--violet-500); }
.domain-avail { color: var(--green); flex: 0 0 auto; display: grid; place-items: center; }
.domain-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.domain-price { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.domain-price .dp-was { color: var(--muted); text-decoration: line-through; margin-right: 4px; font-weight: 500; }
.domain-price .dp-now { font-weight: 700; color: var(--ink); }
.domain-price .dp-now.dp-free { color: var(--green); }
.domain-radio {
  width: 21px; height: 21px; border-radius: 50%; border: 2px solid #cfccdf; flex: 0 0 auto;
  display: grid; place-items: center; transition: .12s;
}
.domain-row.selected .domain-radio { border-color: var(--violet-600); background: var(--violet-600); }
.domain-row.selected .domain-radio::after { content: "✓"; color: #fff; font-size: .7rem; font-weight: 800; }

/* "I have a Domain" — the field revealed under that row. Sits inside the list
   border, so it reads as part of the option rather than a separate question. */
.own-domain { padding: 16px; background: var(--violet-50); border-top: 1px solid var(--line); }
.own-domain[hidden] { display: none; }
.own-domain-label { display: block; font-size: .88rem; font-weight: 650; margin-bottom: 8px; }
.own-domain-input {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line);
  border-radius: 10px; outline: none; font-size: 1rem; background: #fff;
}
.own-domain-input:focus { border-color: var(--violet-500); box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.own-domain-input.is-error { border-color: var(--red, #dc2626); }
.own-domain-hint { margin-top: 7px; font-size: .8rem; color: var(--ink-2); }
.own-domain-err { margin-top: 7px; font-size: .82rem; font-weight: 600; color: var(--red, #dc2626); }
.own-domain-err[hidden] { display: none; }

.domain-side { display: flex; flex-direction: column; gap: 18px; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); }
.side-item { display: flex; gap: 14px; padding: 10px 0; align-items: flex-start; }
.side-item + .side-item { border-top: 1px solid var(--line); }
.side-ic {
  width: 38px; height: 38px; border-radius: 50%; background: var(--violet-100);
  color: var(--violet-700); display: grid; place-items: center; flex: 0 0 auto;
}
.side-item b { display: block; font-size: .92rem; }
.side-item span { font-size: .8rem; color: var(--muted); }

/* ============================================================
   STEP 3/4 — checkout (purple column like PDF page 3)
   ============================================================ */
.checkout-bg {
  min-height: 100vh; padding: 30px 16px 120px;
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(168,85,247,.35), transparent 60%),
    linear-gradient(170deg, #3b0764 0%, #4c0d84 40%, #2e0552 100%);
}
.checkout-col { max-width: 560px; margin: 0 auto; }
.co-brand { text-align: center; color: #fff; margin-bottom: 22px; }
.co-brand h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; }
.co-brand p { font-size: .85rem; font-weight: 600; color: #e6d9f7; margin-top: 4px; }

.co-card { background: #fff; border-radius: 18px; padding: 20px; margin-bottom: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.co-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 14px; }
.co-card .co-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-bottom: 12px; }

/* plan toggle */
.plan-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; }
.plan-opt {
  border: 2px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer;
  position: relative; transition: .15s; background: #fff; text-align: left;
}
.plan-opt b { font-size: 1.1rem; display: block; }
.plan-opt .plan-price { color: var(--violet-700); font-weight: 800; font-size: 1.05rem; margin-top: 2px; }
.plan-opt .plan-price small { font-weight: 600; font-size: .78rem; }
.plan-opt span { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.plan-opt .plan-mark {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #cfccdf; display: grid; place-items: center;
}
.plan-opt.selected {
  background: linear-gradient(160deg, var(--violet-600), var(--violet-800));
  border-color: var(--violet-700); color: #fff;
}
.plan-opt.selected .plan-price { color: #fff; }
.plan-opt.selected span { color: #ddd0f5; }
.plan-opt.selected .plan-mark { border-color: #fff; background: #fff; }
.plan-opt.selected .plan-mark::after { content: "✓"; color: var(--violet-700); font-weight: 800; font-size: .72rem; }

/* includes rows */
.inc-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; background: var(--bg-light); }
.inc-row + .inc-row { margin-top: 10px; }
.inc-ic { width: 42px; height: 42px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: 0 0 auto; box-shadow: var(--shadow-sm); font-size: 1.2rem; }
.inc-row b { font-size: .95rem; display: block; }
.inc-row small { color: var(--muted); font-size: .76rem; }
.inc-main { flex: 1; }
.inc-val { font-weight: 800; font-size: .95rem; }
.inc-val.free { color: var(--green); }
.add-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--violet-400); color: var(--violet-700); font-weight: 700; font-size: .8rem;
  transition: .15s; background: #fff;
}
.add-btn.added { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }

/* domain rows in checkout */
.co-dom { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 12px; cursor: pointer; transition: .12s; }
.co-dom + .co-dom { margin-top: 8px; }
.co-dom.selected { background: var(--violet-50); }
.co-dom .domain-radio { width: 22px; height: 22px; }
.co-dom.selected .domain-radio { border-color: var(--violet-600); background: var(--violet-600); }
.co-dom.selected .domain-radio::after { content: "✓"; color: #fff; font-size: .7rem; font-weight: 800; }
.co-dom b { display: block; font-size: .95rem; }
.co-dom small { color: var(--muted); font-size: .76rem; }
.co-dom .inc-main { flex: 1; }
.co-dom .strike { text-decoration: line-through; color: var(--muted); font-size: .78rem; font-weight: 600; display: block; text-align: right; }

/* total banner */
.total-banner {
  display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 16px 18px;
  background: linear-gradient(90deg, #2e1065, #4c1d95); color: #fff; margin-top: 14px;
}
.total-shield { width: 40px; height: 40px; border-radius: 10px; background: #16a34a; display: grid; place-items: center; flex: 0 0 auto; }
.total-banner b { font-size: .85rem; display: block; line-height: 1.3; }
.total-amt { margin-left: auto; text-align: right; display: flex; align-items: baseline; gap: 10px; }
.total-amt span { font-size: .9rem; color: #d8ccf0; font-weight: 600; }
.total-amt strong { font-size: 1.5rem; font-weight: 800; }
.total-note { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 12px; }

/* contact / autofill */
.autofill-box { background: var(--bg-light); border-radius: 12px; padding: 14px; margin-top: 4px; }
.autofill-box .co-label { margin-bottom: 8px; }
.autofill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.autofill-box .ro {
  border: none; border-bottom: 1px dashed #cfccdf; background: transparent; border-radius: 0;
  padding: 8px 2px; color: var(--ink-2); width: 100%;
}
.phone-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px dashed #cfccdf; padding: 8px 2px; }
.phone-row .flag { font-size: 1.1rem; }
.phone-row input { border: none; outline: none; background: transparent; flex: 1; }

/* trust cards */
.trust-cards { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; margin-top: 16px; }
.trust-card { border: 1.5px solid var(--blue-bg); background: #f5f9ff; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.trust-shield { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: #16a34a; display: grid; place-items: center; color: #fff; }
.trust-card b { color: var(--blue); font-size: .9rem; display: block; font-style: italic; }
.trust-card small { color: var(--blue); font-weight: 600; font-size: .78rem; }
.trust-list { border: 1.5px solid var(--blue-bg); background: #f5f9ff; border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.trust-list span { font-size: .82rem; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.trust-list b { color: var(--ink); }

/* perks + book bar */
.perks-bar {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  color: #fff; border-radius: 14px; padding: 13px 18px; font-size: .86rem; font-weight: 600;
  margin-bottom: 14px;
}
.book-btn {
  width: 100%; padding: 17px; border-radius: 14px; font-size: 1.12rem; font-weight: 800; color: #fff;
  background: linear-gradient(90deg, var(--violet-500), var(--violet-600));
  box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: .18s;
}
.book-btn:hover { filter: brightness(1.1); }
.book-btn:disabled { opacity: .6; cursor: wait; }
.co-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; font-size: .86rem; margin-bottom: 12px; display: none; }

/* ============================================================
   STEP 6 — complete
   ============================================================ */
.done-wrap { max-width: 560px; margin: 0 auto; padding: 70px 24px; text-align: center; }
.done-badge {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 26px;
  background: var(--green-bg); color: var(--green); display: grid; place-items: center;
  animation: pop .4s ease;
}
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.done-wrap h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; }
.done-wrap > p { color: var(--muted); margin-top: 10px; }
.done-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-top: 28px; text-align: left; box-shadow: var(--shadow-sm); }
.done-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .93rem; border-bottom: 1px dashed var(--line); }
.done-row:last-child { border-bottom: none; }
.done-row span { color: var(--muted); }
.done-row b { text-align: right; }
.done-next { background: var(--violet-50); border: 1px solid var(--violet-200); border-radius: 14px; padding: 18px; margin-top: 18px; text-align: left; font-size: .92rem; color: var(--violet-800); }

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr. A bare `1fr` is `minmax(auto, 1fr)`, and that
     `auto` floor is the content's min-content width — so the column stayed
     477px wide inside a 327px container and pushed the whole page sideways.
     Collapsing to one column was never the problem; this was. */
  .domain-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .plan-grid, .trust-cards { grid-template-columns: 1fr; }
  .design-footer { flex-direction: column; align-items: stretch; }
  .design-cta { text-align: center; }

  /* A domain row carries four things, and on a phone the price — "Rs.1,099
     FREE on Annual" — cannot share a line with the name. Rather than truncate
     the offer, the row wraps: name and radio on top, price beneath, indented
     to sit under the name. Explicit `order` is needed because the price comes
     before the radio in the markup. */
  .domain-panel { padding: 14px; }
  .domain-row { flex-wrap: wrap; row-gap: 2px; padding: 12px 14px; }
  .domain-avail { order: 1; }
  .domain-name  { order: 2; }
  .domain-radio { order: 3; }
  .domain-price {
    order: 4; flex: 1 0 100%;
    white-space: normal; padding-left: 34px; line-height: 1.5;
  }
  .domain-search button { padding: 0 16px; font-size: .9rem; }
}

/* On the narrowest phones the search button was ending up wider than the field
   it belongs to. The magnifier alone says "search" perfectly well at this size,
   so the word is dropped and the space goes back to the input. */
@media (max-width: 400px) {
  .domain-search button { padding: 0 14px; font-size: 0; gap: 0; }
  .domain-search button svg { width: 18px; height: 18px; }
}

/* ---------- WhatsApp opt-in ---------- */
.wa-optin {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  margin-top: 14px; padding: 13px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #f6fbf7; transition: .15s;
}
.wa-optin:hover { border-color: #a7e6bd; }
.wa-optin input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto;
  accent-color: #25d366; cursor: pointer;
}
.wa-optin .wa-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; background: #25d366; color: #fff;
}
.wa-optin .wa-txt b { display: block; font-size: .92rem; color: var(--ink); }
.wa-optin .wa-txt small { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.wa-optin.off { background: var(--bg-light); border-color: var(--line); }
.wa-optin.off .wa-ic { background: #b9b6c6; }

/* "show me 6 more designs" */
.pv-more {
  color: #cfcbdd; font-size: .88rem; font-weight: 600; padding: 8px 18px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.18); transition: .15s;
}
.pv-more:hover { background: rgba(255,255,255,.1); color: #fff; }

/* promotional consent — visually secondary to the transactional one */
.wa-optin-promo { background: var(--bg-light); border-color: var(--line); margin-top: 8px; }
.wa-optin-promo input[type="checkbox"] { accent-color: var(--violet-600); }
.wa-optin-promo .wa-txt b { font-weight: 600; }