/**
 * IPTV From Canada — components/forms.css
 * The shared form system: one set of rules for every public form.
 *
 * Used by the contact, free-trial and reseller enquiry forms, and by the
 * WooCommerce checkout's customer-detail fields. Each page stylesheet keeps
 * only its own LAYOUT; nothing here is duplicated per page.
 *
 * Variants
 * --------
 * Everything is driven by the custom properties on .ifc-form, so a variant
 * only redefines tokens:
 *
 *   .ifc-form            charcoal card and inputs (the default)
 *   .ifc-form--light     light inputs on a light card (checkout)
 *
 * Floating labels
 * ---------------
 * Labels are real <label for="…"> elements, associated with their control and
 * present in the HTML — never placeholders standing in for a label. They are
 * positioned INSIDE the field.
 *
 * The float is pure CSS, with no JavaScript anywhere in it. Each label sits
 * after its control in the markup so a plain sibling selector can drive it:
 *
 *   input:placeholder-shown ~ label      resting (empty)
 *   input:focus ~ label                  floated
 *   input:-webkit-autofill ~ label       floated
 *
 * :placeholder-shown is a live pseudo-class, so a value that arrives from
 * autofill, a server prefill, a restored submission or a script updates the
 * label with no event handling at all. Every control therefore carries a
 * placeholder — its own, or a single space where it has none — and
 * placeholders stay transparent until the field is focused, so the label is
 * the only thing visible in the resting state.
 *
 * Sibling rather than :has() on the field: Chrome does not re-run
 * :has(:placeholder-shown) when a script assigns .value, which left a
 * programmatically filled field showing its resting label over its own text.
 *
 * Selects and textareas keep a PERSISTENT label at the top of the field: they
 * have no empty-and-unfocused resting state, so the label never moves.
 */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

.ifc-form {
  /* Surfaces */
  --ifc-form-input-bg: var(--ifc-ink);
  --ifc-form-input-bg-focus: var(--ifc-ink);
  --ifc-form-border: var(--ifc-white-a35);
  --ifc-form-border-hover: var(--ifc-paper-soft);

  /* Text */
  --ifc-form-text: var(--ifc-paper);
  --ifc-form-label: var(--ifc-text-dim);
  --ifc-form-label-float: var(--ifc-text-dim);
  --ifc-form-placeholder: var(--ifc-muted);
  --ifc-form-help: var(--ifc-text-dim);
  --ifc-form-error: #FF8A96;            /* lighter red: readable on charcoal */

  /* Metrics */
  --ifc-form-height: 54px;
  --ifc-form-radius: 10px;
  --ifc-form-gap: 14px;
  --ifc-form-pad-x: 14px;
  --ifc-form-pad-top: 22px;             /* room for the floated label */
  --ifc-form-pad-bottom: 9px;
  --ifc-form-label-top: 8px;
  --ifc-form-label-size: .6875rem;      /* 11 px, floated */
  --ifc-form-value-size: 1rem;          /* 16 px: never triggers iOS zoom */
  --ifc-form-textarea-min: 104px;
}

/* Light variant: same metrics and behaviour, light surfaces. */
.ifc-form--light {
  --ifc-form-input-bg: var(--ifc-surface);
  --ifc-form-input-bg-focus: var(--ifc-surface);
  --ifc-form-border: var(--ifc-line);
  --ifc-form-border-hover: var(--ifc-muted);

  --ifc-form-text: var(--ifc-ink);
  --ifc-form-label: var(--ifc-muted);
  --ifc-form-label-float: var(--ifc-muted);
  --ifc-form-placeholder: var(--ifc-muted);
  --ifc-form-help: var(--ifc-muted);
  --ifc-form-error: var(--ifc-action);
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.ifc-form-card {
  container-type: inline-size;
  box-sizing: border-box;
  padding: 24px 20px;
  border: 1px solid var(--ifc-white-a10);
  border-radius: 14px;
  background: var(--ifc-graphite);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);   /* restrained */
}

.ifc-scope .ifc-form-card__heading {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-form-card__intro {
  max-width: 60ch;
  margin: 6px 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.ifc-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-form-gap);
  margin-block-start: 18px;
}

.ifc-scope .ifc-form__field {
  position: relative;
  display: block;
  margin: 0;
  min-width: 0;
}

/* A conditional field hidden for the current topic. */
.ifc-scope .ifc-form__field[hidden] {
  display: none;
}

/* Two fields per row once the CARD is wide enough, whatever the viewport is
   doing. Without container queries every field is full width, which is
   correct at any size — just taller. */
@container (min-width: 520px) {
  .ifc-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .ifc-form__field--wide {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-form__control {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: var(--ifc-form-height);
  margin: 0;
  padding: var(--ifc-form-pad-top) var(--ifc-form-pad-x) var(--ifc-form-pad-bottom);
  border: 1px solid var(--ifc-form-border);
  border-radius: var(--ifc-form-radius);
  background: var(--ifc-form-input-bg);
  font-family: var(--ifc-font);
  font-size: var(--ifc-form-value-size);
  line-height: 1.3;
  color: var(--ifc-form-text);
  transition: border-color var(--ifc-duration) var(--ifc-ease);
}

.ifc-scope textarea.ifc-form__control {
  min-height: var(--ifc-form-textarea-min);
  resize: vertical;                 /* and it grows with content */
  line-height: 1.55;
}

/* The placeholder only appears once the label has moved out of the way. */
.ifc-scope .ifc-form__control::placeholder {
  color: transparent;
  opacity: 1;
}

.ifc-scope .ifc-form__control:focus::placeholder {
  color: var(--ifc-form-placeholder);
}

/* A textarea's label is permanent, so its placeholder can always show. */
.ifc-scope textarea.ifc-form__control::placeholder {
  color: var(--ifc-form-placeholder);
}

.ifc-scope .ifc-form__control:focus,
.ifc-scope .ifc-form__control:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 1px;
  border-color: var(--ifc-action);
  background: var(--ifc-form-input-bg-focus);
}

@media (hover: hover) {
  .ifc-scope .ifc-form__control:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: var(--ifc-form-border-hover);
  }
}

/* Read-only and disabled read as settled values, not broken fields. */
.ifc-scope .ifc-form__control[readonly],
.ifc-scope .ifc-form__control:disabled {
  background: color-mix(in srgb, var(--ifc-form-input-bg) 92%, var(--ifc-form-text));
  color: var(--ifc-form-text);
  cursor: default;
  opacity: 1;
}

/* Select: the label is permanent, so the arrow sits beside the VALUE line and
   the value is inset far enough never to run under it. */
.ifc-scope select.ifc-form__control {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 9px), calc(100% - 15px) calc(50% + 9px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-form__label {
  position: absolute;
  z-index: 1;
  inset-inline-start: calc(var(--ifc-form-pad-x) + 1px);
  inset-block-start: var(--ifc-form-label-top);
  max-width: calc(100% - var(--ifc-form-pad-x) * 2 - 22px);
  margin: 0;
  padding: 0;
  font-size: var(--ifc-form-label-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--ifc-form-label-float);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;            /* clicks reach the control underneath */
  transform-origin: left top;
  transition: inset-block-start var(--ifc-duration) var(--ifc-ease),
              font-size var(--ifc-duration) var(--ifc-ease),
              color var(--ifc-duration) var(--ifc-ease);
}

/*
 * Resting position: while the input is EMPTY. The label sits after its
 * control in the markup purely so this plain sibling selector can exist —
 * `for` still does the association, so nothing about the accessible name, the
 * click target or the tab order depends on the order.
 *
 * Sibling, deliberately, not :has(). Chrome does not re-evaluate
 * :has(:placeholder-shown) when a script assigns .value, so a programmatically
 * filled field kept a stale resting label over its own text. Sibling
 * invalidation is reliable, and it needs no JavaScript at all.
 *
 * Only inputs rest: a select or textarea keeps its label at the top, so
 * neither is matched here.
 */
.ifc-scope input.ifc-form__control:placeholder-shown ~ .ifc-form__label {
  inset-block-start: 17px;
  font-size: var(--ifc-form-value-size);
  font-weight: 400;
  color: var(--ifc-form-label);
}

/*
 * Focused, or autofilled: back to the top. Placed after the resting rule and
 * at the same specificity, so it wins while both could apply — which is
 * exactly the empty-but-focused case.
 */
.ifc-scope input.ifc-form__control:focus ~ .ifc-form__label,
.ifc-scope input.ifc-form__control:-webkit-autofill ~ .ifc-form__label {
  inset-block-start: var(--ifc-form-label-top);
  font-size: var(--ifc-form-label-size);
  font-weight: 600;
  color: var(--ifc-form-label-float);
}

@media (prefers-reduced-motion: reduce) {
  .ifc-scope .ifc-form__label,
  .ifc-scope .ifc-form__control {
    transition: none;
  }
}

.ifc-form__req {
  color: var(--ifc-action);
}

.ifc-form__optional {
  font-weight: 400;
  color: var(--ifc-form-help);
}

/* Autofill: Chrome's yellow wash would destroy a charcoal field. */
.ifc-scope .ifc-form__control:-webkit-autofill,
.ifc-scope .ifc-form__control:-webkit-autofill:hover,
.ifc-scope .ifc-form__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ifc-form-text);
  -webkit-box-shadow: 0 0 0 1000px var(--ifc-form-input-bg) inset;
  box-shadow: 0 0 0 1000px var(--ifc-form-input-bg) inset;
  caret-color: var(--ifc-form-text);
}

/* --------------------------------------------------------------------------
   Help, errors and notes
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-form__help,
.ifc-scope .ifc-form__error {
  display: block;
  margin-block-start: 5px;
  font-size: .75rem;
  line-height: 1.45;
}

.ifc-scope .ifc-form__help {
  color: var(--ifc-form-help);
}

.ifc-scope .ifc-form__help:empty,
.ifc-scope .ifc-form__error:empty {
  display: none;
}

.ifc-scope .ifc-form__error {
  font-weight: 600;
  color: var(--ifc-form-error);
}

.ifc-form__field.is-invalid .ifc-form__control {
  border-color: var(--ifc-action);
}

.ifc-scope .ifc-form__note {
  display: block;
  margin-block-start: 8px;
  padding: 9px 11px;
  border: 1px solid var(--ifc-white-a10);
  border-inline-start: 3px solid var(--ifc-action);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ifc-form-help);
}

.ifc-form--light .ifc-form__note {
  border-color: var(--ifc-line);
  border-inline-start-color: var(--ifc-action);
  background: var(--ifc-paper);
}

.ifc-scope .ifc-form__note[hidden] {
  display: none;
}

.ifc-form__notes:empty {
  display: none;
}

.ifc-scope .ifc-form__note a {
  color: var(--ifc-form-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ifc-action);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Radio row (preferred language)
   Borderless by design: a fieldset with its default border and padding reset,
   real radios, clickable text labels. Not a segmented control, no pill, no
   box, no background.
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-form__fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.ifc-scope .ifc-form__legend {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ifc-form-text);
}

.ifc-form__choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;              /* comfortable target without a box */
}

.ifc-scope .ifc-form__radio {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ifc-action);
}

.ifc-scope .ifc-form__radio:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 3px;
}

.ifc-scope .ifc-form__choice-label {
  margin: 0;
  padding: 0;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ifc-form-text);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Actions, status and anti-spam
   -------------------------------------------------------------------------- */

.ifc-form__spam {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ifc-scope .ifc-form__actions {
  margin: 18px 0 0;
}

.ifc-scope .ifc-form__submit {
  display: flex;
  width: 100%;
  min-height: 48px;
}

.ifc-scope .ifc-form__submit[aria-busy="true"] {
  cursor: progress;
  opacity: .7;
}

.ifc-scope .ifc-form__privacy {
  margin: 10px 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ifc-form-help);
}

.ifc-scope .ifc-form__privacy a {
  color: var(--ifc-form-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ifc-action);
  text-underline-offset: 3px;
}

.ifc-form__status:not(:empty) {
  margin-block-start: 16px;
}

.ifc-scope .ifc-form__message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--ifc-form-radius);
  font-size: .9375rem;
  line-height: 1.55;
}

.ifc-scope .ifc-form__message--ok {
  border-color: var(--ifc-white-a35);
  background: rgba(255, 255, 255, .06);
  color: var(--ifc-form-text);
}

.ifc-scope .ifc-form__message--error {
  border-color: var(--ifc-action);
  background: rgba(206, 32, 53, .14);
  color: var(--ifc-form-text);
}

.ifc-form--light .ifc-form__message--ok {
  border-color: var(--ifc-line);
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

.ifc-form--light .ifc-form__message--error {
  border-color: var(--ifc-action);
  background: var(--ifc-blush);
  color: var(--ifc-ink);
}

/* --------------------------------------------------------------------------
   WooCommerce checkout — customer details
   The billing wrapper carries .ifc-form.ifc-form--light, so these fields take
   the same metrics and states as every other form on the site instead of
   keeping their own copy of them.

   Scoped to .ifc-form, which exists on that wrapper only: the payment methods,
   the order review and any gateway's own fields are outside it and are not
   touched here. Labels stay ABOVE their inputs (see the note in
   woocommerce/checkout/form-billing.php).
   -------------------------------------------------------------------------- */

.ifc-form .form-row label {
  display: block;
  margin-block-end: 6px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ifc-form-text);
}

.ifc-form .form-row label .required,
.ifc-form .form-row label abbr.required {
  margin-inline-start: 2px;
  border: 0;
  color: var(--ifc-action);
  text-decoration: none;
}

/* .form-row is in the selector so these outrank WooCommerce's own field
   rules, which are themselves scoped through it. */
.ifc-form .form-row input.input-text,
.ifc-form .form-row select,
.ifc-form .form-row textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ifc-form-height);
  padding: 14px var(--ifc-form-pad-x);
  border: 1px solid var(--ifc-form-border);
  border-radius: var(--ifc-form-radius);
  background-color: var(--ifc-form-input-bg);
  font-family: var(--ifc-font);
  font-size: var(--ifc-form-value-size);
  line-height: 1.4;
  color: var(--ifc-form-text);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--ifc-duration) var(--ifc-ease);
}

.ifc-form .form-row input.input-text::placeholder,
.ifc-form .form-row textarea::placeholder {
  color: var(--ifc-form-placeholder);
  opacity: 1;
}

.ifc-form .form-row input.input-text:focus,
.ifc-form .form-row select:focus,
.ifc-form .form-row textarea:focus {
  border-color: var(--ifc-action);
  outline: 3px solid var(--ifc-action);
  outline-offset: 2px;
}

.ifc-form .form-row.woocommerce-invalid input.input-text,
.ifc-form .form-row.woocommerce-invalid select {
  border-color: var(--ifc-action);
}

.ifc-form .form-row input.input-text[readonly] {
  background-color: color-mix(in srgb, var(--ifc-form-input-bg) 94%, var(--ifc-form-text));
  cursor: default;
}

/* --------------------------------------------------------------------------
   Enquiry hero: introduction beside the form card
   Shared by the contact, free-trial and reseller sections, so the three open
   the same way. Stacked — introduction first — until there is genuinely room
   for two columns.
   -------------------------------------------------------------------------- */

.ifc-enquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.ifc-enquiry__intro {
  max-width: 44ch;      /* reading width, left-aligned, never centred text */
  text-align: start;
}

@media (min-width: 1024px) {
  .ifc-enquiry__grid {
    /* ~40 / 60 once the 48px gap is taken into account. */
    grid-template-columns: minmax(0, .68fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: center;          /* vertical centring, not text centring */
  }
}

@media (min-width: 1200px) {
  .ifc-enquiry__grid {
    column-gap: 64px;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .ifc-form-card {
    padding: 28px;
  }
}

@media (min-width: 1200px) {
  .ifc-form-card {
    padding: 32px;
  }
}