/* ==========================================================================
   FORMS
   ========================================================================== */

.field { margin-bottom: var(--space-5); }

.label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}
.label .req { color: var(--color-error); }
.hint { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-meta); }
.error-text { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-error); }

.input,
.textarea,
.select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  color: var(--color-body);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  transition: var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.input:hover, .textarea:hover, .select:hover,
input:hover, textarea:hover, select:hover { border-color: var(--color-meta); }

.input:focus, .textarea:focus, .select:focus,
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.input:disabled, textarea:disabled, select:disabled,
.is-disabled {
  background-color: var(--color-surface-alt);
  color: var(--color-meta);
  cursor: not-allowed;
}

textarea, .textarea { min-height: 130px; line-height: var(--lh-snug); }

/* Native select with a custom chevron */
.select, select {
  padding-inline-end: var(--space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626571' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 14px;
  cursor: pointer;
}

/* Validation states */
.field--error .input,
.field--error textarea,
.field--error select,
.input.is-error { border-color: var(--color-error); }
.field--error .input:focus,
.input.is-error:focus { box-shadow: 0 0 0 3px rgb(235 87 87 / 18%); }

.field--success .input,
.input.is-success { border-color: var(--color-success); }

/* Sizes */
.input--sm { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.input--lg { padding: var(--space-4) var(--space-5); font-size: var(--fs-lg); }
.input--pill { border-radius: var(--radius-pill); }

/* Input with a leading or trailing icon */
.input-icon { position: relative; }
.input-icon .icon {
  position: absolute;
  top: 50%; inset-inline-start: var(--space-4);
  transform: translateY(-50%);
  color: var(--color-meta);
  pointer-events: none;
}
.input-icon .input { padding-inline-start: var(--space-10); }
.input-icon--trailing .icon { inset-inline-start: auto; inset-inline-end: var(--space-4); }
.input-icon--trailing .input { padding-inline-start: var(--space-4); padding-inline-end: var(--space-10); }

/* --------------------------------------------------------------------------
   CHECKBOX & RADIO
   -------------------------------------------------------------------------- */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.check input[type="checkbox"],
.check input[type="radio"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 0.15em 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  cursor: pointer;
  transition: var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.check input[type="radio"] { border-radius: var(--radius-full); }

.check input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.check input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3.5px var(--color-surface);
}
.check input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.check:hover input { border-color: var(--color-primary); }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input {
  position: relative;
  width: 44px; height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: 0;
  cursor: pointer;
  transition: var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked { background: var(--color-primary); }
.switch input:checked::after { transform: translateX(calc(20px * var(--flip))); }

/* --------------------------------------------------------------------------
   SEARCH BAR — the header's signature pill with a category select
   -------------------------------------------------------------------------- */
.searchbar {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  overflow: hidden;
  transition: var(--transition);
}
.searchbar:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
/*
   SCOPED UNDER `.searchbar`, AND THAT IS NOT STYLE — IT IS THE ONLY WAY THESE WIN.

   The base control rule at the top of this file lists `input[type="search"]`, which is an element
   plus an attribute: specificity (0,1,1). A lone `.searchbar__input` is (0,1,0) and LOSES to it, so
   `border-radius: 0` was being dropped and the input kept `var(--radius)` — a rounded box inside a
   pill, with the group's background showing through at the joins. It was wrong from the start and
   only became visible when `--radius` went from 6px to 12px in D-69.

   The group is the only thing with a corner here. Everything inside it is square and the group's
   `overflow: hidden` does the clipping, which is what makes the ends of the pill follow the pill
   rather than each child guessing at it.

   The select is scoped for the same reason even though it wins today: it only wins because the base
   rule catches it as a bare `select` (0,0,1). That is an accident of which selector happened to
   match, not a rule anyone stated, and the next `select.select` in this file would take it back.
*/
.searchbar .searchbar__select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  border: 0;
  border-inline-end: 1px solid var(--color-border);
  border-radius: 0;
  background-color: transparent;
  padding-inline-start: var(--space-5);
  font-size: var(--fs-base);
  color: var(--color-heading);
}
.searchbar .searchbar__select:focus { box-shadow: none; }
.searchbar .searchbar__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding-inline: var(--space-5);
  background: transparent;
}
.searchbar .searchbar__input:focus { box-shadow: none; }
/* The one yellow control on the page: accent fill, and the foreground is
   COMPUTED from the fill's own lightness rather than hard-coded. On the
   default #ffd400 that resolves to near-black, which is the intended look —
   and a deployment that brands itself navy still gets a legible label
   instead of black-on-navy. See the @supports block in tokens.css. */
.searchbar__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 13px var(--space-6);
  border: 0;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.searchbar__btn:hover { background: var(--color-accent-hover); }

/* --------------------------------------------------------------------------
   THE HERO SEARCH PILL

   The same component, sized as a claim rather than as a control. This is the
   front page saying "this is a search engine for savings", so it is tall, it
   is the page's only white object on a tinted band, and it floats on a thick
   soft shadow instead of a hairline.

   Borderless on purpose: a 1px border under a 40px shadow reads as a seam.
   The focus ring is what draws an edge, and it draws the brand's.
   -------------------------------------------------------------------------- */
.searchbar--hero {
  min-height: var(--searchbar-hero-height);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.searchbar--hero:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg), var(--shadow-focus);
}
.searchbar--hero .searchbar__input,
.searchbar--hero .searchbar__select {
  padding-inline: var(--space-6);
  font-size: var(--fs-lg);
}
.searchbar--hero .searchbar__btn {
  padding-inline: var(--space-8);
  font-size: var(--fs-lg);
}

@media (max-width: 767px) {
  /* The brief's floor. A 60px bar on a 375px screen is a fifth of the fold. */
  .searchbar--hero { min-height: 50px; }
  .searchbar--hero .searchbar__input,
  .searchbar--hero .searchbar__select { padding-inline: var(--space-4); font-size: var(--fs-md); }
  .searchbar--hero .searchbar__btn { padding-inline: var(--space-5); font-size: var(--fs-md); }
}

@media (max-width: 991px) {
  /* Shallower on a phone: 42px overall is still a comfortable target and it
     takes 8px off the header, which at this width is worth having.

     Scoped under `.searchbar` deliberately. The base control rule matches
     `input[type="search"]`, which out-specifies a lone `.searchbar__input`, so a
     single-class override here would be silently ignored. */
  .searchbar__btn { padding-block: 11px; font-size: var(--fs-md); }
  .searchbar .searchbar__input,
  .searchbar .searchbar__select { padding-block: 9px; }
}
@media (max-width: 575px) {
  .searchbar__select { display: none; }
  .searchbar__btn { padding-inline: var(--space-4); }
  .searchbar__btn span:not(.icon) { display: none; }
}

/* --------------------------------------------------------------------------
   NEWSLETTER
   -------------------------------------------------------------------------- */
.newsletter {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
}
.newsletter .input { border-radius: var(--radius-pill); }
@media (max-width: 479px) {
  .newsletter { flex-direction: column; }
  .newsletter .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   VARIATION SWATCHES — colour / size pickers
   -------------------------------------------------------------------------- */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.swatch {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 36px; height: 36px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition);
}
.swatch:hover { border-color: var(--color-primary); }
.swatch.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-fg);
}
.swatch.is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Colour dot variant — set the colour with style="--swatch: #hex" */
.swatch--color {
  width: 32px; height: 32px;
  min-width: 0;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--swatch, var(--color-surface-alt));
}
.swatch--color.is-selected {
  background: var(--swatch, var(--color-surface-alt));
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   PRICE RANGE SLIDER (native range input)
   -------------------------------------------------------------------------- */
input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
  width: 18px; height: 18px;
  border: 3px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: var(--shadow-xs);
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 3px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: var(--shadow-xs);
  cursor: grab;
}