/* ===================================================================
   ZappTrip — shared form UX (floating labels, focus rings, errors)
   Loaded after Bootstrap + customer.css. Uses :root tokens from custom.css.
   =================================================================== */

:root {
  --zapp-form-fs: 1rem;
  --zapp-form-fs-sm: 0.8125rem;
  --zapp-form-pad-x: 14px;
  --zapp-form-min-h: 48px;
  --zapp-form-radius: 12px;
  --zapp-form-border: var(--zapp-border, #e2e8f0);
  --zapp-form-border-focus: var(--zapp-primary, #0b5fff);
  --zapp-form-ring: 0 0 0 3px rgba(11, 95, 255, 0.24);
  --zapp-form-ring-soft: 0 0 0 3px rgba(11, 95, 255, 0.14);
  --zapp-form-error: #dc2626;
  --zapp-form-error-soft: #fecaca;
  --zapp-form-error-bg: #fef2f2;
  --zapp-form-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --zapp-form-duration: 0.2s;
}

/* ── Bootstrap controls (readable size, spacing, transitions) ── */
.form-control,
.form-select,
textarea.form-control {
  font-size: var(--zapp-form-fs);
  line-height: 1.5;
  min-height: var(--zapp-form-min-h);
  padding: 0.65rem 0.875rem;
  border-radius: var(--zapp-form-radius);
  border-width: 1.5px;
  border-color: var(--zapp-form-border);
  color: var(--zapp-text, #0f172a);
  transition:
    border-color var(--zapp-form-duration) var(--zapp-form-ease),
    box-shadow var(--zapp-form-duration) var(--zapp-form-ease),
    background-color var(--zapp-form-duration) var(--zapp-form-ease);
}

textarea.form-control {
  min-height: 7.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: #cbd5e1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--zapp-form-border-focus);
  box-shadow: var(--zapp-form-ring-soft);
  outline: none;
}

.form-control:focus-visible,
.form-select:focus-visible {
  box-shadow: var(--zapp-form-ring);
}

.form-control:disabled,
.form-select:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  border-radius: 0.35em;
  transition: border-color var(--zapp-form-duration) var(--zapp-form-ease), box-shadow var(--zapp-form-duration) var(--zapp-form-ease);
}

.form-check-input:focus {
  border-color: var(--zapp-form-border-focus);
  box-shadow: var(--zapp-form-ring-soft);
  outline: none;
}

.form-check-input:focus-visible {
  box-shadow: var(--zapp-form-ring);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--zapp-form-error);
  background-color: var(--zapp-form-error-bg);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}

.invalid-feedback,
.valid-feedback {
  font-size: var(--zapp-form-fs-sm);
  line-height: 1.45;
  margin-top: 0.4rem;
}

.invalid-feedback {
  color: var(--zapp-form-error);
}

/* Spacing between fields in grids */
.row.g-3.zapp-form-grid {
  --bs-gutter-y: 1.25rem;
}

/* ── Floating: label first (input / textarea direct or one wrapper deep) ── */
.zapp-floating-start {
  position: relative;
  margin-bottom: 1.375rem;
}

.zapp-floating-start > label:first-of-type {
  position: absolute;
  left: calc(var(--zapp-form-pad-x) + 2px);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--zapp-form-fs);
  font-weight: 500;
  color: var(--zapp-muted, #64748b);
  pointer-events: none;
  z-index: 3;
  margin: 0;
  line-height: 1.2;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    top var(--zapp-form-duration) var(--zapp-form-ease),
    transform var(--zapp-form-duration) var(--zapp-form-ease),
    font-size var(--zapp-form-duration) var(--zapp-form-ease),
    color var(--zapp-form-duration) var(--zapp-form-ease),
    background-color 0.15s ease;
  background-color: transparent;
}

.zapp-floating-start > :is(input, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  padding-top: 1.2rem;
  padding-bottom: 0.5rem;
}

/* Any nested input/textarea (e.g. contact phone row) */
.zapp-floating-start:has(:is(input, textarea):focus) > label:first-of-type,
.zapp-floating-start:has(:is(input, textarea):not(:placeholder-shown)) > label:first-of-type,
.zapp-floating-start.is-filled > label:first-of-type {
  top: 0.55rem;
  transform: translateY(0) scale(0.82);
  transform-origin: left top;
  font-size: var(--zapp-form-fs-sm);
  font-weight: 600;
  color: var(--zapp-form-border-focus);
  background: linear-gradient(180deg, #fff 55%, transparent 55%);
  padding-right: 4px;
}

/* Select: label always floated */
.zapp-floating-start:has(> select) > label:first-of-type {
  top: 0.55rem;
  transform: translateY(0) scale(0.82);
  transform-origin: left top;
  font-size: var(--zapp-form-fs-sm);
  font-weight: 600;
  color: var(--zapp-muted, #64748b);
  background: linear-gradient(180deg, #fff 55%, transparent 55%);
  padding-right: 4px;
}

.zapp-floating-start:has(> select:focus) > label:first-of-type {
  color: var(--zapp-form-border-focus);
}

.zapp-floating-start > select {
  padding-top: 1.35rem;
  padding-bottom: 0.45rem;
  min-height: var(--zapp-form-min-h);
}

/* ── Floating: control then label (e.g. password + eye in between — use :has on wrap) ── */
.zapp-floating-end {
  position: relative;
  margin-bottom: 1.375rem;
}

.zapp-floating-end > label:last-of-type {
  position: absolute;
  left: 16px;
  top: 24px;
  transform: translateY(-50%);
  font-size: var(--zapp-form-fs);
  font-weight: 500;
  color: var(--zapp-muted, #64748b);
  pointer-events: none;
  z-index: 4;
  margin: 0;
  line-height: 1.2;
  transition:
    top var(--zapp-form-duration) var(--zapp-form-ease),
    transform var(--zapp-form-duration) var(--zapp-form-ease),
    font-size var(--zapp-form-duration) var(--zapp-form-ease),
    color var(--zapp-form-duration) var(--zapp-form-ease);
}

.zapp-floating-end:has(.auth-input:focus) > label:last-of-type,
.zapp-floating-end:has(.auth-input:not(:placeholder-shown)) > label:last-of-type,
.zapp-floating-end.is-filled > label:last-of-type {
  top: 11px;
  transform: translateY(-50%) scale(0.82);
  transform-origin: left center;
  font-size: var(--zapp-form-fs-sm);
  font-weight: 600;
  color: var(--zapp-form-border-focus);
}

.zapp-floating-end .auth-input {
  padding-top: 1.15rem;
  padding-bottom: 0.55rem;
}

/* ── Stacked fields (explicit label above; still get focus ring from .form-control) ── */
.zapp-field-stack {
  margin-bottom: 1.25rem;
}

.zapp-field-stack > label,
.zapp-field-stack .form-label {
  display: block;
  font-size: var(--zapp-form-fs-sm);
  font-weight: 600;
  color: var(--zapp-text, #0f172a);
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

/* ── Contact page (classes used in contact-us.ejs) ── */
.contact-form-card .zapp-floating-start > label:first-of-type,
.contact-form-card .zapp-floating-start:has(> :is(input, textarea):focus) > label:first-of-type,
.contact-form-card .zapp-floating-start:has(> :is(input, textarea):not(:placeholder-shown)) > label:first-of-type {
  background: linear-gradient(180deg, #fff 55%, transparent 55%);
}

.contact-input.zapp-floating-inner,
.contact-textarea.zapp-floating-inner {
  padding-top: 1.15rem;
  padding-bottom: 0.55rem;
}

/* Phone row: label floats with inner input */
.zapp-floating-start.zapp-floating--phone > label:first-of-type {
  top: 50%;
}

.zapp-floating-start.zapp-floating--phone.is-filled > label:first-of-type,
.zapp-floating-start.zapp-floating--phone:has(:is(input, textarea):focus) > label:first-of-type,
.zapp-floating-start.zapp-floating--phone:has(:is(input, textarea):not(:placeholder-shown)) > label:first-of-type {
  top: 0.55rem;
  transform: translateY(0) scale(0.82);
  transform-origin: left top;
}

.zapp-floating-start.zapp-floating--phone .contact-input-group input {
  padding-top: 1.15rem;
  padding-bottom: 0.55rem;
}

.zapp-floating-start > label.contact-label {
  margin-bottom: 0;
}

/* ── Checkout co-field (custom inputs) ── */
.co-field.zapp-floating-start > .co-field-label {
  left: 14px;
  max-width: calc(100% - 28px);
}

.co-field.zapp-floating-start .co-field-input {
  padding-top: 1.15rem;
  padding-bottom: 0.55rem;
  min-height: var(--zapp-form-min-h);
  font-size: var(--zapp-form-fs);
  border-radius: var(--zapp-form-radius);
  transition:
    border-color var(--zapp-form-duration) var(--zapp-form-ease),
    box-shadow var(--zapp-form-duration) var(--zapp-form-ease);
}

.co-field.zapp-floating-start:has(.co-field-input:focus) > .co-field-label,
.co-field.zapp-floating-start:has(.co-field-input:not(:placeholder-shown)) > .co-field-label {
  background: linear-gradient(180deg, #fff 55%, transparent 55%);
}

.co-field-input:focus {
  border-color: var(--zapp-form-border-focus);
  box-shadow: var(--zapp-form-ring-soft);
  outline: none;
}

.co-field-input:focus-visible {
  box-shadow: var(--zapp-form-ring);
}

.co-field.is-invalid .co-field-input {
  border-color: var(--zapp-form-error);
  background: var(--zapp-form-error-bg);
}

.co-field .co-field-error {
  display: none;
  font-size: var(--zapp-form-fs-sm);
  color: var(--zapp-form-error);
  margin-top: 0.35rem;
}

.co-field.is-invalid .co-field-error {
  display: block;
}

/* New rider modal — label notch matches input surface */
.srp-nrmod-panel .zapp-floating-start:has(:is(input, textarea):focus) > label:first-of-type,
.srp-nrmod-panel .zapp-floating-start:has(:is(input, textarea):not(:placeholder-shown)) > label:first-of-type,
.srp-nrmod-panel .zapp-floating-start.is-filled > label:first-of-type {
  background: linear-gradient(180deg, #f1f5f9 55%, transparent 55%);
}

/* Help center search */
.zs-search input:focus {
  outline: none;
}