/* check4girls.com -- the registration funnel. Mobile first: one column,
   large touch targets; wider screens only centre and widen it a little.
   Each theme (body[data-theme]) sets its own colours here; its image,
   headline and copy are in js/funnel.js. */

:root {
  --bg: #fff5f8;
  --surface: #ffffff;
  --text: #2b1621;
  --muted: #7a5d6a;
  --accent: #c2477a;
  --accent-text: #ffffff;
  --border: #f1d3df;
  --error: #c62828;
  --code-bg: #2b1621;
  --code-text: #ffe1ea;
  --overlay: 15, 23, 42; /* the colour of the gradient over a background video */
  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --heading-font: Georgia, "Times New Roman", serif;
}

/* Every theme plays a full-screen video behind everything
   (js/funnel.js adds it), under a dark gradient, with light text. On
   romance and casual the answer boxes are white with dark text
   (--field-text). Romance keeps its rose and its serif headings, over a
   plum gradient. */
body[data-theme="romance"] {
  --bg: #2b1621;
  --surface: rgba(255, 255, 255, 0.94);
  --text: #ffffff;
  --field-text: #2b1621;
  --muted: rgba(255, 255, 255, 0.85);
  --accent: #d6588c;
  --accent-text: #ffffff;
  --border: rgba(255, 255, 255, 0.45);
  --error: #ffd0dd;
  --code-bg: rgba(43, 22, 33, 0.88);
  --code-text: #ffe1ea;
  --overlay: 43, 22, 33;
}

body[data-theme="casual"] {
  --bg: #0f172a;
  --surface: rgba(255, 255, 255, 0.94);
  --text: #ffffff;
  --field-text: #0f172a;
  --muted: rgba(255, 255, 255, 0.85);
  --accent: #f97316;
  --accent-text: #ffffff;
  --border: rgba(255, 255, 255, 0.4);
  --error: #fecaca;
  --code-bg: rgba(15, 23, 42, 0.88);
  --code-text: #99f6e4;
  --heading-font: var(--font);
}

/* Mature keeps its dark navy answer boxes and gold over its video, a little
   see-through, under a navy gradient. */
body[data-theme="mature"] {
  --bg: #0b1220;
  --surface: rgba(19, 28, 46, 0.88);
  --overlay: 11, 18, 32;
  --text: #f1e9d6;
  --muted: #b8ab8c;
  --accent: #c9a24b;
  --accent-text: #0b1220;
  --border: rgba(241, 233, 214, 0.3);
  --error: #ff8a80;
  --code-bg: #060a12;
  --code-text: #f4dfa6;
}

/* Kink keeps its dark answer boxes over its video, a little see-through,
   under a near-black red gradient. */
body[data-theme="kink"] {
  --bg: #0a0507;
  --surface: rgba(22, 11, 15, 0.88);
  --overlay: 10, 5, 7;
  --text: #f5e6ea;
  --muted: #b7909b;
  --accent: #e11d48;
  --accent-text: #ffffff;
  --border: rgba(245, 230, 234, 0.3);
  --error: #ff8a9b;
  --code-bg: #000000;
  --code-text: #ff9db1;
  --heading-font: var(--font);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.funnel {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1rem calc(2rem + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh; /* the visible height on phones, without the browser bars */
  display: flex;
  flex-direction: column;
}

/* The opening question and the registration questions sit in the lower
   part of the screen, under the 18+ badge. */
#gate:not([hidden]),
#steps:not([hidden]) {
  margin-top: auto;
}

.brand-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 0;
}

.age-badge {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.screen[hidden] { display: none; }

h1, h2 {
  font-family: var(--heading-font);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 0.95rem; margin: 1.5rem 0 0.4rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.lead { color: var(--muted); margin: 0 0 1.25rem; }

button { font: inherit; cursor: pointer; }

.btn-primary {
  display: block;
  width: 100%;
  min-height: 54px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 1.05rem;
}
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  min-height: 54px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
}

/* --- The opening question: yes / no --- */
#gate h2 { font-size: 1.75rem; margin-bottom: 1.5rem; text-align: center; }
.gate-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.gate-answers .btn-ghost { width: 100%; }

/* --- The questions --- */

.field { margin-bottom: 1rem; }
/* Country and city, email and password: side by side. */
.fields-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.6rem; }
.fields-row .field { min-width: 0; }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field select {
  width: 100%;
  min-height: 52px;
  padding: 0 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--field-text, var(--text));
  font: inherit;
  font-size: 16px; /* 16px or more: iOS does not zoom in on focus */
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The country dropdown: the browser's own drawing switched off (Safari
   otherwise ignores the height, corners and background above), with its
   arrow drawn here instead -- a mid grey that shows on the light and the
   dark answer boxes alike. */
#field-country {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}

.choices { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 54px;
  padding: 0 1rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--field-text, var(--text));
  font-weight: 600;
}
/* One answer of a few short ones (Sex / Dating): side by side. */
.choices-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); }

.terms { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; line-height: 1.35; }
.terms input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--accent); flex: none; }
.terms a { color: var(--accent); }

.error {
  color: var(--error);
  font-weight: 600;
  margin: 0 0 1rem;
}
.error a { color: inherit; }

/* While the registration is being sent. */
.btn-primary:disabled { opacity: 0.7; cursor: default; }

.step-actions { display: flex; gap: 0.75rem; align-items: center; }
.step-actions .btn-primary { flex: none; }
#step-terms { flex: 1; min-width: 0; }
/* Next sits where the Back button was, at that button's size. */
.step-actions .btn-primary { width: auto; min-height: 54px; padding: 0 1.25rem; font-size: 1rem; }

/* --- The full-screen video and the gradient over it --- */
.bg-video,
.bg-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bg-video { object-fit: cover; z-index: -2; background: #0f172a; }
.bg-overlay {
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--overlay), 0.15) 0%, rgba(var(--overlay), 0.4) 45%, rgba(var(--overlay), 0.62) 100%);
}
/* Romance's, mature's and kink's videos are light at the top: the 18+
   badge in white, on the theme's dark colour. */
body[data-theme="romance"] .age-badge { color: #ffffff; border-color: #ffffff; background: rgba(43, 22, 33, 0.45); }
body[data-theme="mature"] .age-badge { color: #ffffff; border-color: #ffffff; background: rgba(11, 18, 32, 0.5); }
body[data-theme="kink"] .age-badge { color: #ffffff; border-color: #ffffff; background: rgba(10, 5, 7, 0.5); }
body[data-theme="romance"] h1,
body[data-theme="romance"] h2,
body[data-theme="casual"] h1,
body[data-theme="casual"] h2,
body[data-theme="mature"] h1,
body[data-theme="mature"] h2,
body[data-theme="kink"] h1,
body[data-theme="kink"] h2 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }

@media (min-width: 720px) {
  .funnel { max-width: 560px; padding-top: 1.5rem; }
  h1 { font-size: 2.3rem; }
}