/* Shared controls: native input semantics, one visual language across every view. */
:root {
  --control-font: 'Manrope', 'DM Sans', system-ui, sans-serif;
  --control-surface: #f6f9fa;
  --control-border: #d9e5e8;
  --control-placeholder: #738691;
  --control-ring: 0 0 0 4px rgb(0 140 149 / 10%);
  --control-ease: 180ms cubic-bezier(.2,.65,.3,1);
}

.field { gap: 9px; margin-bottom: 20px; }
.field > label:not(.sr-only), .field-label {
  font-family: var(--control-font);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .15px;
  color: #4b6877;
  transition: color var(--control-ease);
}
.field:focus-within > label:not(.sr-only) { color: #007f88; }
.field > small { font-size: 11px; line-height: 1.65; color: #718691; }

/* The exclusions preserve invisible radios used by selectable vessel cards. */
.field input:not(:where([type='checkbox'],[type='radio'],[type='range'],[type='color'])),
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--control-border);
  border-radius: 13px;
  padding: 15px 16px;
  background-color: var(--control-surface);
  color: #193f52;
  font-family: var(--control-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.15px;
  line-height: 1.55;
  caret-color: var(--teal);
  box-shadow: inset 0 1px 2px rgb(8 47 73 / 2%), 0 1px 2px rgb(8 47 73 / 2%);
  outline: 3px solid transparent;
  outline-offset: 2px;
  transition: border-color var(--control-ease), background-color var(--control-ease),
    box-shadow var(--control-ease), outline-color var(--control-ease);
}
.field input::placeholder, .field textarea::placeholder {
  font-family: var(--control-font);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.65;
  color: var(--control-placeholder);
  opacity: 1;
  transition: color var(--control-ease);
}
.wizard-panel .field :is(input,select) { min-height: 54px; }
.field input:focus::placeholder, .field textarea:focus::placeholder { color: #7c929b; }
@media (hover:hover) {
  .field :is(input,select,textarea):not(:disabled):not(:focus):hover {
    border-color: #abcacb;
    background-color: #f0f7f6;
  }
}
.field input:not(:where([type='checkbox'],[type='radio'])):focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal);
  outline: 3px solid transparent;
  background-color: #fff;
  box-shadow: var(--control-ring), 0 5px 16px rgb(8 47 73 / 4%);
}
.field :is(input,select,textarea):focus-visible {
  outline: 2px solid #008c95;
  outline-offset: 2px;
}
.field :is(input,select,textarea):disabled {
  background-color: #edf1f2;
  border-color: #e1e7e9;
  color: #82929a;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .75;
}
.field input[readonly], .field textarea[readonly] {
  background-color: #edf4f3;
  color: #526e77;
  border-style: dashed;
}
.field :is(input,select,textarea):is(:user-invalid,[aria-invalid='true']) {
  border-color: #c46c67;
  background-color: #fff7f6;
}
.field :is(input,select,textarea):is(:user-invalid,[aria-invalid='true']):focus {
  border-color: #b75c57 !important;
  box-shadow: 0 0 0 4px rgb(196 108 103 / 10%);
}
.field:has(:user-invalid) > label:not(.sr-only) { color: #a95450; }
.field input:-webkit-autofill {
  -webkit-text-fill-color: #193f52;
  -webkit-box-shadow: 0 0 0 100px #eef8f4 inset;
  caret-color: var(--teal);
}

/* Native selects keep their OS picker, keyboard behaviour and touch support. */
.field select, .quick-card .field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 43px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23008791' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 18px;
}
.field select option { background: white; color: #193f52; font-weight: 500; }
.field select[multiple] { background-image: none; padding: 9px; min-height: 140px; }
.field select[multiple] option { border-radius: 6px; padding: 9px; }
.field-icon > .icon {
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #629195;
  width: 18px;
  height: 18px;
  transition: color var(--control-ease), filter var(--control-ease);
}
.field-icon:focus-within > .icon { color: #008c95; filter: drop-shadow(0 2px 3px #008c951a); }
.field-icon select { padding-left: 44px; }
.route-fields .field select { padding-right: 43px; }
.swap-button { top: 66px; right: 17px; border-color: #cbdfe0; box-shadow: 0 3px 9px #14364a0a; }
.swap-button:hover { background: #eaf6f1; border-color: var(--teal); }
.quick-card .route-fields .field { margin-bottom: 17px; }
.quick-card .field select { font-size: 13px; }

.field textarea { min-height: 124px; resize: vertical; line-height: 1.85; }
.field input[type='search'] {
  padding-left: 43px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23629195' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
  background-position: 14px center;
  background-repeat: no-repeat;
  background-size: 18px;
}
.field input[type='number'], .field input[type='tel'], .field input[type='date'], .field input[type='time'] {
  font-variant-numeric: tabular-nums;
  letter-spacing: .25px;
}
.field input[type='date'], .field input[type='time'] { color-scheme: light; padding-right: 13px; }
.field input::-webkit-date-and-time-value { min-height: 1.5em; text-align: left; }
.field input::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; padding: 3px; }
.field input:focus::-webkit-calendar-picker-indicator { opacity: .9; }
.phone-field { gap: 0; border-radius: 13px; isolation: isolate; }
.phone-field .phone-prefix {
  font-family: var(--control-font);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .3px;
  padding: 0 15px;
  border: 1px solid var(--control-border);
  border-right: 0;
  border-radius: 13px 0 0 13px;
  background: #eaf3f2;
  color: #427979;
  transition: border-color var(--control-ease), background-color var(--control-ease);
}
.field .phone-field input { border-radius: 0 13px 13px 0; }
.phone-field:focus-within .phone-prefix { border-color: var(--teal); background: #ddf2ec; }
.field .phone-field input:focus { position: relative; z-index: 1; }
.field input.otp-input {
  min-height: 66px;
  letter-spacing: .32em;
  padding-left: calc(16px + .32em);
  font-family: var(--control-font);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  background-color: #f0f7f6;
}
.field input.otp-input::placeholder { font-size: 23px; letter-spacing: .32em; color: #8ba9a9; }

/* Real checkboxes and payment radios, styled without replacing their semantics. */
.check-row input[type='checkbox'], .payment-option input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border: 1.5px solid #b8ced0;
  border-radius: 6px;
  background: #f9fcfb;
  box-shadow: 0 1px 2px #0a434908;
  cursor: pointer;
  transition: background-color var(--control-ease), border-color var(--control-ease), box-shadow var(--control-ease);
}
.check-row input[type='checkbox']:checked {
  background-color: #008c95;
  border-color: #008c95;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 10 3.2 3.2L15 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 18px;
  background-position: center;
  box-shadow: 0 2px 5px #008c9520;
}
.payment-option input[type='radio'] { border-radius: 50%; flex: none; margin: 0; }
.payment-option input[type='radio']::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #008c95;
  transform: scale(0); transition: transform var(--control-ease);
}
.payment-option input[type='radio']:checked { border-color: #008c95; background: #e6f6f0; }
.payment-option input[type='radio']:checked::before { transform: scale(1); }
.check-row input:focus-visible, .payment-option input:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; box-shadow: var(--control-ring);
}
.check-row input:disabled, .payment-option input:disabled { opacity: .45; cursor: not-allowed; }
.check-row:has(input:checked) > span > strong { color: #08757d; }
.check-row { gap: 11px; }
.check-row strong, .payment-option strong { font-family: var(--control-font); font-weight: 700; }
.check-row input { margin-top: 2px; }
.places-list .check-row, .payment-option, .cargo-type, .boat-type {
  transition: border-color var(--control-ease), background-color var(--control-ease), box-shadow var(--control-ease);
}
.places-list .check-row:has(:checked), .cargo-type:has(:checked) { background: #edf8f3; border-color: #80c4b9; box-shadow: 0 2px 6px #008c9508; }
.payment-option:has(:checked), .boat-type.selected { box-shadow: 0 0 0 1px #008c951a, 0 5px 16px #0a434906; }
.cargo-type:has(:focus-visible), .boat-type:has(:focus-visible) { outline-offset: 3px; }

/* Account preference switch retains the underlying checkbox behaviour. */
.check-row #booking-updates { width: 40px; min-width: 40px; height: 24px; border-radius: 30px; position: relative; background: #dbe6e6; border-color: #dbe6e6; }
.check-row #booking-updates::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 4px #082f4925; transition: transform var(--control-ease); }
.check-row #booking-updates:checked { background: var(--teal); border-color: var(--teal); }
.check-row #booking-updates:checked::after { transform: translateX(16px); }
.counter output { font-family: var(--control-font); font-weight: 750; font-variant-numeric: tabular-nums; }
.counter button { background: #eef6f4; border-color: #d3e5df; border-radius: 10px; transition: background var(--control-ease), border-color var(--control-ease), box-shadow var(--control-ease); }
.counter button:not(:disabled):hover { background: #dcf1e9; border-color: #8dc7ba; }
.counter button:not(:disabled):active { box-shadow: inset 0 2px 4px #008c9518; }

@media(max-width:599px) {
  /* 16px controls avoid unwanted zoom when focusing fields on iOS. */
  .field input:not(:where([type='checkbox'],[type='radio'],[type='range'],[type='color'])),
  .field select, .quick-card .field select, .field textarea { font-size: 16px; padding-top: 14px; padding-bottom: 14px; }
  .field input::placeholder, .field textarea::placeholder { font-size: 13px; }
  .field-pair .field input[type='number'] { padding-inline: 12px; }
  .field > label:not(.sr-only), .field-label { font-size: 11px; }
  .field input.otp-input { font-size: 25px; }
  .phone-field .phone-prefix { padding-inline: 13px; }
  .payment-option { gap: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .field *, .check-row *, .payment-option *, .boat-type, .cargo-type, .counter * { transition: none !important; }
}
@media(forced-colors:active) {
  .check-row input[type='checkbox'], .payment-option input[type='radio'] { appearance: auto; background-image: none; }
  .payment-option input::before, .check-row #booking-updates::after { display: none; }
  .field select { appearance: auto; background-image: none; }
  .field :is(input,select,textarea):focus { outline: 2px solid Highlight; }
}