/* ==========================================================================
   Likoma Airlines — Forms
   --------------------------------------------------------------------------
   Large targets, quiet borders, obvious focus. The floating-label field is
   the default for the booking widget; the stacked-label field is used for
   longer forms where a visible label is clearer.
   ========================================================================== */

/* --- Field wrapper -------------------------------------------------------- */

.lk-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  min-inline-size: 0;
}

.lk-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.lk-label__optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.lk-label__required {
  color: var(--color-accent);
}

.lk-help {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.lk-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-danger-fg);
}

.lk-error svg {
  inline-size: 1em;
  block-size: 1em;
  margin-block-start: 0.22em;
}

/* --- Control base --------------------------------------------------------
   Shared by input, select and textarea so they align pixel-for-pixel when
   placed side by side.
   ------------------------------------------------------------------------ */

.lk-input,
.lk-select,
.lk-textarea {
  --control-height: 48px;
  --control-px: var(--space-4);

  inline-size: 100%;
  min-block-size: var(--control-height);
  padding-inline: var(--control-px);
  padding-block: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  appearance: none;
  transition:
    border-color var(--duration-fast) var(--ease-soft),
    background-color var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft);
}

.lk-input:hover:not(:disabled),
.lk-select:hover:not(:disabled),
.lk-textarea:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

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

.lk-input:disabled,
.lk-select:disabled,
.lk-textarea:disabled {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-fg);
  cursor: not-allowed;
}

.lk-input[readonly] {
  background-color: var(--color-surface-sunken);
}

/* Validation. Driven by aria-invalid so the visual and the semantic can
   never drift apart. */
.lk-input[aria-invalid="true"],
.lk-select[aria-invalid="true"],
.lk-textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.lk-input[aria-invalid="true"]:focus,
.lk-select[aria-invalid="true"]:focus,
.lk-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgb(253 34 12 / 0.14);
}

.lk-input[data-state="valid"] {
  border-color: var(--color-success);
}

/* Sizes */
.lk-input--sm, .lk-select--sm { --control-height: 38px; --control-px: var(--space-3); font-size: var(--text-base); }
.lk-input--lg, .lk-select--lg { --control-height: 56px; --control-px: var(--space-5); font-size: var(--text-lg); }

/* --- Select --------------------------------------------------------------
   Native select keeps keyboard and mobile behaviour for free; we only
   replace the arrow.
   ------------------------------------------------------------------------ */

.lk-select {
  padding-inline-end: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23545c7b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 18px 18px;
  cursor: pointer;
}

[dir="rtl"] .lk-select {
  background-position: left var(--space-4) center;
}

/* --- Input group ---------------------------------------------------------
   An icon or button sharing the field's box. The wrapper owns the border so
   focus styling covers the whole unit.
   ------------------------------------------------------------------------ */

.lk-input-group {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
}

.lk-input-group .lk-input {
  border-radius: var(--radius-control);
}

.lk-input-group--icon-start .lk-input { padding-inline-start: var(--space-12); }
.lk-input-group--icon-end   .lk-input { padding-inline-end: var(--space-12); }

.lk-input-group__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: color var(--duration-fast) var(--ease-soft);
}

.lk-input-group__icon--start { inset-inline-start: var(--space-4); }
.lk-input-group__icon--end   { inset-inline-end: var(--space-4); }

.lk-input-group:focus-within .lk-input-group__icon {
  color: var(--color-primary);
}

/* Clear button — appears once the field has content */
.lk-input-clear {
  position: absolute;
  inset-inline-end: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-colors), opacity var(--duration-fast) var(--ease-soft);
}

.lk-input-clear:hover {
  background-color: var(--color-border);
  color: var(--color-text-primary);
}

.lk-input-group[data-filled="true"] .lk-input-clear {
  opacity: 1;
  visibility: visible;
}

/* --- Floating label ------------------------------------------------------
   The label is the accessible name at all times; it only moves. Uses
   :placeholder-shown so it works without JS.
   ------------------------------------------------------------------------ */

.lk-float {
  position: relative;
}

.lk-float .lk-input,
.lk-float .lk-select {
  --control-height: 62px;
  padding-block-start: var(--space-7);
  padding-block-end: var(--space-2);
}

.lk-float__label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-4);
  transform: translateY(-50%);
  transform-origin: 0 50%;
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  pointer-events: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-soft),
    font-size var(--duration-fast) var(--ease-out);
}

.lk-float .lk-input:focus + .lk-float__label,
.lk-float .lk-input:not(:placeholder-shown) + .lk-float__label,
.lk-float .lk-select:focus + .lk-float__label,
.lk-float .lk-select[data-filled="true"] + .lk-float__label {
  transform: translateY(-165%);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lk-float .lk-input:focus + .lk-float__label {
  color: var(--color-primary);
}

/* --- Checkbox & radio ----------------------------------------------------
   Custom visuals, native input underneath — keyboard, form data and
   assistive tech all behave normally.
   ------------------------------------------------------------------------ */

.lk-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.lk-check__input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.lk-check__box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 1px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface);
  transition: var(--transition-colors), box-shadow var(--duration-fast) var(--ease-soft);
}

.lk-check--radio .lk-check__box {
  border-radius: var(--radius-full);
}

.lk-check__box::after {
  content: "";
  inline-size: 11px;
  block-size: 11px;
  background-color: #fff;
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-out);
  /* tick */
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 9%, 38% 71%);
}

.lk-check--radio .lk-check__box::after {
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-full);
  clip-path: none;
}

.lk-check__input:checked + .lk-check__box {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.lk-check__input:checked + .lk-check__box::after {
  transform: scale(1);
}

.lk-check__input:indeterminate + .lk-check__box {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.lk-check__input:indeterminate + .lk-check__box::after {
  transform: scale(1);
  block-size: 2px;
  inline-size: 10px;
  border-radius: 1px;
  clip-path: none;
}

.lk-check__input:focus-visible + .lk-check__box {
  box-shadow: var(--focus-ring);
}

.lk-check:hover .lk-check__box {
  border-color: var(--color-primary);
}

.lk-check__input:disabled + .lk-check__box {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
}

.lk-check__text {
  padding-block-start: 1px;
}

/* --- Switch --------------------------------------------------------------- */

.lk-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.lk-switch__input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.lk-switch__track {
  position: relative;
  flex-shrink: 0;
  inline-size: 44px;
  block-size: 26px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  transition: background-color var(--duration-base) var(--ease-soft);
}

.lk-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-full);
  background-color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out);
}

.lk-switch__input:checked + .lk-switch__track {
  background-color: var(--color-primary);
}

.lk-switch__input:checked + .lk-switch__track::after {
  transform: translateX(18px);
}

[dir="rtl"] .lk-switch__input:checked + .lk-switch__track::after {
  transform: translateX(-18px);
}

.lk-switch__input:focus-visible + .lk-switch__track {
  box-shadow: var(--focus-ring);
}

/* --- Selectable card -----------------------------------------------------
   Cabin class, fare family, seat preference — a radio that looks like a card.
   ------------------------------------------------------------------------ */

.lk-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: var(--transition-colors), box-shadow var(--duration-base) var(--ease-out);
}

.lk-option:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.lk-option__input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.lk-option__title {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.lk-option__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lk-option:has(.lk-option__input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  box-shadow: var(--shadow-sm);
}

.lk-option:has(.lk-option__input:focus-visible) {
  box-shadow: var(--focus-ring);
}

/* --- Stepper -------------------------------------------------------------
   Passenger counts. Value is tabular so the row never twitches as it changes.
   ------------------------------------------------------------------------ */

.lk-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
}

.lk-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease-out);
}

.lk-stepper__btn:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.lk-stepper__btn:active:not(:disabled) {
  transform: scale(0.92);
}

.lk-stepper__btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.lk-stepper__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.lk-stepper__value {
  min-inline-size: 2.25rem;
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

/* --- Fieldset ------------------------------------------------------------- */

.lk-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lk-fieldset__legend {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-block-end: var(--space-1);
}

/* --- Form grid ------------------------------------------------------------ */

.lk-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
}

.lk-form-grid > .lk-field { grid-column: span 12; }
.lk-form-grid > .span-6   { grid-column: span 6; }
.lk-form-grid > .span-4   { grid-column: span 4; }
.lk-form-grid > .span-3   { grid-column: span 3; }
.lk-form-grid > .span-8   { grid-column: span 8; }

/* --- Newsletter inline form ----------------------------------------------
   A single visual unit: input and button share one rounded shell.
   ------------------------------------------------------------------------ */

.lk-inline-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-soft),
              box-shadow var(--duration-fast) var(--ease-soft);
}

.lk-inline-form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-focus-halo);
}

.lk-inline-form .lk-input {
  border: 0;
  background: transparent;
  min-block-size: 44px;
  padding-inline-start: var(--space-5);
}

.lk-inline-form .lk-input:focus {
  box-shadow: none;
}

.lk-inline-form .lk-btn {
  flex-shrink: 0;
}