/* Boat Clubs — insurance offer form.
 *
 * The page chrome (body gradient, header, wave, .container, .text-card, footer)
 * comes from the site stylesheet at /css/style.css. This file only adds the form
 * controls, which the site has no rules for, and it borrows the site's palette
 * so the two never drift apart:
 *
 *   deep navy   #0c4a6e / #164e63   header and footer gradient, buttons
 *   heading ink #1a365d             h1/h2/h3 and labels
 *   card        #f8fafc on #e2e8f0  .text-card
 *   body text   #333 / #2c3e50
 *
 * Mobile-first: the base rules are the phone layout. Inputs stay at 16px so iOS
 * does not zoom in when a field gets focus.
 */

/* The card fills .container just like the about and contact pages - no
   max-width of its own. The form column inside it is capped separately, since
   a 1100px-wide text input is harder to fill in, not easier. */
.insurance-card {
  margin: 0 auto;
}

.insurance-card h1 {
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------- intro */

/* Single column on phones and tablets: prose, steps panel, closing note. From
   1000px up it becomes two columns - see the media query at the bottom. */
.intro {
  margin: 0 auto 2.25rem;
}

.intro-text p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #2c3e50;
  margin: 0 auto 1rem;
  max-width: 72ch;
  text-align: left;
}

.intro-greeting {
  font-weight: 600;
  color: #1a365d;
}

/* --------------------------------------------------------- how it works */

.how-it-works {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.75rem 0 1.5rem;
}

.insurance-card .hiw-title {
  font-size: 1rem;
  color: #1a365d;
  text-align: left;
  margin: 0 0 1.1rem;
  letter-spacing: 0.5px;
}

.hiw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.hiw-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #2c3e50;
}

/* The confidentiality promise is not a step - it stays on its own row above
   them, with a rule under it, so the four steps read as a sequence. */
.hiw-item--full {
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  color: #1a365d;
}

.hiw-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #0c4a6e 0%, #164e63 100%);
  color: #fff;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------- closing note */

.intro-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 72ch;
  margin: 0 auto;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid #0c4a6e;
  border-radius: 0 6px 6px 0;
  background: #eef4f8;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #2c3e50;
  text-align: left;
}

.intro-note i {
  color: #0c4a6e;
  margin-top: 0.15rem;
}

/* The form sits inside .text-card, so it adds no box of its own. */
.insurance-card form.card {
  margin: 0;
}

/* ------------------------------------------------------------------ fields */

.field {
  margin-bottom: 1.25rem;
}

.insurance-card label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a365d;
  margin-bottom: 0.4rem;
  text-align: left;
}

.required {
  color: #b03a2e;
}

.optional {
  font-weight: 400;
  color: #64748b;
  font-size: 0.85rem;
}

.insurance-card input[type="text"],
.insurance-card input[type="email"],
.insurance-card input[type="date"],
.insurance-card input[type="number"],
.insurance-card select,
.insurance-card textarea {
  width: 100%;
  box-sizing: border-box;
  /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
  font-size: 16px;
  font-family: inherit;
  color: #333;
  background: #fff;
  padding: 0.7rem 0.85rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  min-height: 46px; /* comfortable tap target */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.insurance-card input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  font-family: inherit;
  color: #2c3e50;
  padding: 0.6rem 0;
}

.insurance-card textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

/* --------------------------------------------------------- amount fields */

/* The euro sign is printed beside the field, never inside its value — the
   value stays a number the browser and the server can both read. */
.amount-wrap {
  position: relative;
}

.amount-prefix {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}

/* Qualified with .insurance-card and the type selector on purpose: the base
   field rule above is .insurance-card input[type="text"], which outranks a bare
   .amount-wrap input - its padding shorthand would put the first digit straight
   underneath the euro sign. */
.insurance-card .amount-wrap input[type="text"] {
  padding-left: 2.4rem;
  /* Grouped thousands line up better in a tabular figure where the face has
     one; the fallback is harmless. */
  font-variant-numeric: tabular-nums;
}

.field.has-error .amount-prefix {
  color: #c0392b;
}

/* ------------------------------------------------------------- date field */

/* The whole date field opens the calendar (see form.js), so it should look
   clickable everywhere, not just over the icon. */
.insurance-card input[type="date"] {
  cursor: pointer;
}

/* Chrome's default indicator is a grey glyph that belongs to nothing else on
   the page. This replaces it with the site's own navy, drawn inline so it
   needs no extra request. The calendar panel itself is browser chrome and
   cannot be styled — only this button can. */
.insurance-card input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  margin-left: 0.35rem;
  cursor: pointer;
  opacity: 0.9;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c4a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.2s ease;
}

.insurance-card input[type="date"]:hover::-webkit-calendar-picker-indicator,
.insurance-card input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.field.has-error input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
}

.insurance-card input:focus,
.insurance-card select:focus,
.insurance-card textarea:focus {
  outline: none;
  border-color: #0c4a6e;
  box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.12);
}

.hint {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0.4rem 0 0;
}

/* ------------------------------------------------- brand suggestion list */

.suggest-wrap {
  position: relative;
}

.suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(12, 74, 110, 0.15);
  /* About eight rows, then it scrolls — "ca" alone matches eight yards. */
  max-height: 17rem;
  overflow-y: auto;
}

.suggestions[hidden] {
  display: none;
}

.suggestion {
  padding: 0.55rem 0.85rem;
  font-size: 0.95rem;
  color: #2c3e50;
  cursor: pointer;
  /* Comfortable on a phone without making the list a mile long. */
  min-height: 40px;
  display: flex;
  align-items: center;
}

.suggestion strong {
  color: #0c4a6e;
  font-weight: 700;
}

.suggestion:hover,
.suggestion.is-active {
  background: #eef4f8;
}

.suggestion.is-active strong {
  color: #0c4a6e;
}

/* --------------------------------------------------- yard/model mode switch */

.checkbox-field {
  background: #eef4f8;
  border: 1px solid #d7e3ec;
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0;
  cursor: pointer;
  /* The whole row is the tap target, not just the box. */
  min-height: 24px;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: #0c4a6e;
  cursor: pointer;
}

.checkbox-field .hint {
  margin-top: 0.5rem;
}

[data-boat][hidden] {
  display: none;
}

/* ----------------------------------------------------------------- messages */

/* A field in error gets a full red outline, not a one-pixel tint: on a phone,
 * scrolling past a form, the border has to be the thing you notice. The label
 * turns red with it so the field reads as wrong even before the message. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border: 2px solid #c0392b;
  background: #fdf3f2;
}

/* File inputs have no border of their own, so the box is drawn explicitly. */
.field.has-error input[type="file"] {
  border: 2px solid #c0392b;
  border-radius: 6px;
  background: #fdf3f2;
  padding: 0.6rem;
}

.field.has-error > label {
  color: #c0392b;
}

/* The red must survive focus, or the marking disappears the moment the member
 * clicks into the field to fix it. */
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

.field.has-error.checkbox-field {
  border: 2px solid #c0392b;
  background: #fdf3f2;
}

.field-error {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: #a93226;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0.45rem 0 0;
}

.field-error i {
  font-size: 0.9em;
  flex: none;
}

.alert {
  border-radius: 6px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.alert-error {
  background: #fdecea;
  border: 1px solid rgba(176, 58, 46, 0.35);
  color: #7b241c;
}

.alert-success {
  background: #eafaf1;
  border: 1px solid rgba(30, 132, 73, 0.35);
  color: #145a32;
}

/* ---------------------------------------------------------------- honeypot */

/* Hidden from humans without display:none, which some bots skip over. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- turnstile */

/*
 * The Cloudflare widget is a fixed 300x65 iframe it injects itself, so this
 * only positions it. It stays inside the 320px viewport unstyled; the overflow
 * guard is there in case Cloudflare ever ships a wider variant.
 */
.turnstile-field {
  margin-bottom: 1.25rem;
}

.turnstile-field .cf-turnstile {
  display: flex;
  justify-content: center;
  min-height: 65px;
  overflow-x: auto;
}

/* The widget draws its own frame, so an error here goes under it, not round it. */
.turnstile-field.has-error .cf-turnstile {
  margin-bottom: 0.35rem;
}

/* ------------------------------------------------------------------ submit */

.submit {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  /* Same gradient as the site header and footer. */
  background: linear-gradient(135deg, #0c4a6e 0%, #164e63 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  min-height: 50px;
  transition: filter 0.2s ease;
}

.submit:hover,
.submit:focus {
  filter: brightness(1.15);
}

.submit:disabled {
  background: #94a3b8;
  cursor: default;
  filter: none;
}

.privacy {
  font-size: 0.8rem;
  color: #64748b;
  margin: 1rem 0 0;
  text-align: center;
  line-height: 1.5;
}

/* ------------------------------------------------------ wider screens only */

@media (min-width: 600px) {
  .field-row {
    display: flex;
    gap: 1.25rem;
  }

  .field-row .field {
    flex: 1;
  }

  .submit {
    width: auto;
    min-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 700px) {
  .how-it-works {
    padding: 1.75rem 2rem;
  }

  /* Four steps in two columns; the confidentiality row spans both. */
  .hiw-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.15rem 2rem;
  }

  .hiw-item--full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  /* Two columns, so neither half of the intro has to stretch across the whole
     card: prose and the closing note on the left, the steps panel on the right.
     The panel spans both rows, so its height is set by the prose beside it and
     the steps go back to a single column - no half-empty rows. */
  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto 1fr;
    column-gap: 2.75rem;
    align-items: start;
    margin-bottom: 2.75rem;
  }

  .intro-text {
    grid-column: 1;
    grid-row: 1;
  }

  .how-it-works {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
  }

  .intro-note {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin: 1.5rem 0 0;
    max-width: none;
  }

  .intro-text p {
    max-width: none;
  }

  /* Back to one column - the panel is now half the card wide. */
  .hiw-list {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  /* The confidentiality promise reads as a seal here rather than a wide row:
     tinted pill, no rule under it. */
  .hiw-item--full {
    align-items: center;
    padding: 0.55rem 1rem 0.55rem 0.55rem;
    margin-bottom: 0.35rem;
    border-bottom: 0;
    border-radius: 999px;
    background: #eef4f8;
  }

  .hiw-item--full .hiw-icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.78rem;
  }

  /* The card is as wide as the about and contact pages, but the fields keep a
     fillable column width. */
  .insurance-card form.card,
  .insurance-card .alert {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}