/* ═══════════════════════════════════════════════════════════════
   CardToDeal — enhancements.css
   Loaded after components.css. Pure token CSS. Zero JS changes.
   Touch only visual layer of the scanner UI.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CAMERA BUTTON — prominent dark variant, distinct from upload zone
   Override the current dashed light-bg ghost style.
   var(--a3) = darkest brand green, works in all 3 themes.
   ── */
.camera__btn {
  background: var(--a3) !important;
  color: var(--on-acc) !important;
  border: var(--bw2) solid var(--a3) !important;
  border-radius: var(--r-md) !important;
  border-style: solid !important;
  min-height: 48px;
}
.camera__btn:hover {
  filter: brightness(1.12);
  background: var(--a3) !important;
  color: var(--on-acc) !important;
}

/* ── 2. FEATURE PILLS — horizontal scroll on mobile (no wrap),
   prevents hero height growing too tall and pushing scanner below fold.
   ── */
@media (max-width: 860px) {
  .feature-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-1);
    margin-bottom: var(--sp-3);
    scrollbar-width: none;
  }
  .feature-pills::-webkit-scrollbar { display: none; }
  .feature-pill { flex-shrink: 0; }
}

/* ── 3. OPTIONAL FORM FIELDS — hidden via CSS, stay in DOM for API.
   scanner-core.js reads these fields with .trim() and accepts empty
   strings. Only ctd-s-email and ctd-consent-gdpr are validated.
   :has() — 93%+ browser support (Chrome 105+, Safari 15.4+, FF 121+).
   ── */
.form-grid .field-group:has(#ctd-s-name),
.form-grid .field-group:has(#ctd-s-company),
.form-grid .field-group:has(#ctd-s-role) {
  display: none;
}
/* Make email field full-width now it's the only visible field */
.form-grid .field-group:has(#ctd-s-email) {
  grid-column: 1 / -1;
}
/* Increase email input prominence */
.form-grid .field-group:has(#ctd-s-email) .input {
  font-size: var(--fs-md);
  padding: var(--sp-3) var(--sp-4);
  min-height: 48px;
}

/* ── 4. COPY ALL — primary visual weight in results actions group ── */
.results__actions-group .btn--ghost:first-child {
  background: var(--acc);
  color: var(--on-acc);
  border-color: var(--a2);
}
.results__actions-group .btn--ghost:first-child:hover {
  filter: brightness(1.08);
  background: var(--acc);
  color: var(--on-acc);
}

/* ── 5. HONEST EMAIL DISCLAIMER — styled box below ctd-save button.
   Added as a static <div> in HTML Step 5D and Step 6C.
   ── */
.saveform__honest {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--fade);
  border: var(--bw) solid var(--bdr);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  color: var(--t2);
  line-height: 1.55;
}
.saveform__honest strong {
  color: var(--tx);
  font-weight: var(--fw-semibold);
}

/* ── 6. FREE 14 DAYS pill style — added alongside pitch__feat pills ── */
.pitch__feat--free {
  background: oklch(1 0 0 / 0.30) !important;
  font-weight: var(--fw-bold) !important;
  border: var(--bw) solid oklch(1 0 0 / 0.40);
}

/* ── 7. RATE BAR LINK — cleaner unlock prompt ── */
.ratebar__link {
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--on-acc);
  opacity: 1;
}

/* ── 8. SCAN BUTTON — ensure full primary weight when enabled ── */
#ctd-scan:not([disabled]) {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  font-size: var(--fs-md);
}

/* ── 9. FIELD EXTRA — secondary values (extra phones/emails) ── */
.field__extra {
  font-size: var(--fs-2xs);
  color: var(--t3);
  margin-top: 3px;
  line-height: 1.5;
}

/* ── 10. CLS — reserve space for responsive auto ad slots.
   PageSpeed (Cumulative Layout Shift): fixed units (.ad--rect 300x250,
   .ad--banner 320x50) already reserve their box in components.css, but
   .ad--responsive sets only width:100% with no height — so the slot is
   0px tall until AdSense injects the ad, shoving the content below it
   downward. Reserving a typical in-content ad height holds the space.
   No <ins>/script changes — purely the visual box. On a no-fill the
   adsbygoogle script collapses the <ins> to display:none, which ignores
   min-height, so this leaves no empty gap in that case.
   ── */
.ad--responsive { min-height: 250px; }

/* ── 11. OVERFLOW FIX — pitch CTA must wrap on narrow phones.
   .btn is white-space:nowrap (components.css) and the pitch CTA is NOT
   btn--block, so the longer label "Track this Card Lead in VynDeal FREE →"
   forms a ~240px nowrap min-content. Inside .pitch (padding sp-5 each side)
   that exceeds the hero column on ≤~360px viewports, widening .hero__copy
   past the viewport — clipped by body{overflow-x:hidden} as a cut-off
   button. Allowing this one CTA to wrap removes the overflow; on wide
   screens the label still fits one line so nothing else changes.
   ── */
.pitch .btn { white-space: normal; }

/* ── 12. ULTRA-NARROW PHONES (≤400px) — tighten the scanner card.
   Softer corner radius and a smaller camera-button label so the upload
   card and its controls stop crowding the viewport edges on the smallest
   handsets. Visual only — no copy added, no JS touched.
   ── */
@media (max-width: 400px) {
  .scanner { border-radius: var(--r-md); }
  .camera__btn { font-size: var(--fs-2xs); }
}

/* ── Upload zone CTA button (visual, click handled by label) ── */
.uz__cta {
  display: block;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--acc);
  color: var(--on-acc);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  pointer-events: none;
  width: 100%;
  box-sizing: border-box;
}
.scanner__uz:hover .uz__cta { filter: brightness(1.08); }
.uz__tip {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--t3);
  text-align: center;
  font-family: var(--font-body);
}

/* ── Camera hints: two-row layout ── */
.cam-hints {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-1) 0 0;
}
.cam-hint {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  color: var(--t3);
  line-height: 1.5;
}
.cam-hint--warn { color: var(--t2); }
.cam-fallback-btn {
  background: none;
  border: none;
  color: var(--acc);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.cam-fallback-btn:hover { color: var(--a2); }

/* ── Scan counter: show from page load not just after first scan ── */
#ctd-ratebar {
  display: flex !important;
}

/* ── Grid overflow fix: minmax(0,1fr) allows track to shrink below min-content ── */
@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__copy,
  .hero__scanner {
    min-width: 0;
  }
  .feature-pills {
    min-width: 0;
  }
}

/* Prevent html from shrink-fitting the overflowed content instead of clipping it */
html {
  overflow-x: hidden;
}