/* Floating label fields — checkout & account addresses */
.fl-field {
  position: relative;
  --fl-border: #4a4a4a;
  --fl-border-focus: #000;
  --fl-label-muted: #6b6b6b;
  --fl-height: 52px;
  --fl-radius: 2px;
  --fl-bg: #fff;
  --fl-pad-x: 14px;
  --fl-error: #e21c2a;
  --fl-success: #00aa55;
}

.fl-field .fl-label {
  position: absolute;
  left: var(--fl-pad-x);
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 400;
  color: var(--fl-label-muted);
  pointer-events: none;
  line-height: 1.2;
  max-width: calc(100% - 48px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: top 0.2s ease, transform 0.2s ease, font-size 0.2s ease, color 0.2s ease, background-color 0.2s ease, padding 0.2s ease;
  z-index: 1;
  margin: 0;
  display: block;
}

.fl-field .fl-input,
.fl-field select.fl-input {
  width: 100%;
  height: var(--fl-height);
  box-sizing: border-box;
  margin: 0;
  padding: 2px var(--fl-pad-x) 0 var(--fl-pad-x);
  border: 1px solid #ccc;
  border-bottom-width: 1px;
  border-radius: var(--fl-radius);
  font-size: 15px;
  font-family: inherit;
  background: var(--fl-bg);
  color: #111;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, border-bottom-color 0.15s ease, border-bottom-width 0.15s ease, padding 0.15s ease;
}

.fl-field select.fl-input {
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23444' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.fl-field textarea.fl-input {
  height: auto;
  min-height: 100px;
  padding-top: 22px;
  resize: vertical;
  display: block;
}

.fl-field .fl-input:focus,
.fl-field select.fl-input:focus {
  border-color: #ccc;
  border-bottom-color: var(--fl-border-focus);
  border-bottom-width: 2px;
}

.fl-field.fl-field--valid .fl-input:focus,
.fl-field.fl-field--valid select.fl-input:focus,
.fl-field.fl-field--valid textarea.fl-input:focus {
  border-bottom-color: var(--fl-success);
}

.fl-field .fl-input:focus + .fl-label,
.fl-field .fl-input:not(:placeholder-shown) + .fl-label,
.fl-field:focus-within > .fl-label,
.fl-field.fl-field--filled > .fl-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--fl-label-muted);
  background: var(--fl-bg);
  padding: 0 5px;
  left: calc(var(--fl-pad-x) - 3px);
  max-width: calc(100% - 24px);
}

.fl-field .fl-input:focus + .fl-label {
  color: var(--fl-border-focus);
}

/* Valid state */
.fl-field.fl-field--valid .fl-input,
.fl-field.fl-field--valid select.fl-input,
.fl-field.fl-field--valid textarea.fl-input {
  border-color: #ccc;
  border-bottom: 2px solid var(--fl-success);
}

.fl-field.fl-field--valid .fl-label {
  color: var(--fl-label-muted);
}

/* Error state */
.fl-field.fl-field--error .fl-input,
.fl-field.fl-field--error select.fl-input,
.fl-field.fl-field--error textarea.fl-input {
  border-color: #ccc;
  border-bottom: 2px solid var(--fl-error);
}

.fl-field.fl-field--error .fl-label {
  color: var(--fl-label-muted);
}

.fl-field.fl-field--error:not(:focus-within) input.fl-input:placeholder-shown + .fl-label {
  top: calc(var(--fl-height) / 2);
  transform: translateY(-50%);
  font-size: 15px;
  left: var(--fl-pad-x);
  padding: 0;
  max-width: calc(100% - 48px);
  background: transparent;
  color: var(--fl-label-muted);
}

.fl-field.fl-field--error:not(:focus-within) textarea.fl-input:placeholder-shown + .fl-label {
  top: 50px;
  transform: translateY(-50%);
  font-size: 15px;
  left: var(--fl-pad-x);
  padding: 0;
  max-width: calc(100% - 48px);
  background: transparent;
  color: var(--fl-label-muted);
}

.fl-field.fl-field--error:not(:focus-within):not(.fl-field--filled) select.fl-input + .fl-label {
  top: calc(var(--fl-height) / 2);
  transform: translateY(-50%);
  font-size: 15px;
  left: var(--fl-pad-x);
  padding: 0;
  max-width: calc(100% - 48px);
  background: transparent;
  color: var(--fl-label-muted);
}

.fl-field.fl-field--error:focus-within > .fl-label,
.fl-field.fl-field--error input.fl-input:not(:placeholder-shown) + .fl-label,
.fl-field.fl-field--error.fl-field--filled > .fl-label,
.fl-field.fl-field--error input.fl-input:focus + .fl-label,
.fl-field.fl-field--error.fl-field--filled select.fl-input + .fl-label,
.fl-field.fl-field--error:focus-within select.fl-input + .fl-label,
.fl-field.fl-field--error textarea.fl-input:focus + .fl-label,
.fl-field.fl-field--error textarea.fl-input:not(:placeholder-shown) + .fl-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  left: calc(var(--fl-pad-x) - 3px);
  max-width: calc(100% - 24px);
  padding: 0 5px;
  background: var(--fl-bg);
  color: var(--fl-label-muted);
}

.fl-field.fl-field--error:not(:focus-within) input.fl-input:placeholder-shown {
  margin-top: -4px;
}

.fl-field.fl-field--error:focus-within input.fl-input,
.fl-field.fl-field--error input.fl-input:not(:placeholder-shown) {
  padding: 18px var(--fl-pad-x) 0 var(--fl-pad-x);
}

.fl-field.fl-field--valid .fl-input,
.fl-field.fl-field--valid select.fl-input,
.fl-field.fl-field--valid textarea.fl-input {
  padding-right: 44px;
}

.fl-field.fl-field--error .fl-input,
.fl-field.fl-field--error select.fl-input,
.fl-field.fl-field--error textarea.fl-input {
  padding-right: 44px;
}

.fl-field.fl-field--error select.fl-input,
.fl-field.fl-field--valid select.fl-input {
  padding-right: 58px !important;
}

.fl-field.fl-field--error select.fl-input:not(#guest_region):not(#guest_city):not(#addr_region):not(#addr_city):not(#cs_guest_region):not(#cs_guest_city) {
  color: var(--fl-error) !important;
}

#fl_guest_region:not(.fl-field--filled) > select.fl-input,
#fl_guest_city:not(.fl-field--filled) > select.fl-input,
#fl_addr_region:not(.fl-field--filled) > select.fl-input,
#fl_addr_city:not(.fl-field--filled) > select.fl-input,
#fl_cs_guest_region:not(.fl-field--filled) > select.fl-input,
#fl_cs_guest_city:not(.fl-field--filled) > select.fl-input {
  color: #717171;
}

#fl_guest_region.fl-field--error:not(.fl-field--filled) > select.fl-input,
#fl_guest_city.fl-field--error:not(.fl-field--filled) > select.fl-input,
#fl_addr_region.fl-field--error:not(.fl-field--filled) > select.fl-input,
#fl_addr_city.fl-field--error:not(.fl-field--filled) > select.fl-input,
#fl_cs_guest_region.fl-field--error:not(.fl-field--filled) > select.fl-input,
#fl_cs_guest_city.fl-field--error:not(.fl-field--filled) > select.fl-input {
  color: var(--fl-error);
}

#fl_guest_region.fl-field--filled > select.fl-input,
#fl_guest_city.fl-field--filled > select.fl-input,
#fl_addr_region.fl-field--filled > select.fl-input,
#fl_addr_city.fl-field--filled > select.fl-input,
#fl_cs_guest_region.fl-field--filled > select.fl-input,
#fl_cs_guest_city.fl-field--filled > select.fl-input {
  color: #111;
}

#guest_region option,
#guest_city option,
#addr_region option,
#addr_city option,
#cs_guest_region option,
#cs_guest_city option {
  color: #222;
}

#guest_region option[value=""],
#guest_city option[value=""],
#addr_region option[value=""],
#addr_city option[value=""],
#cs_guest_region option[value=""],
#cs_guest_city option[value=""] {
  color: var(--fl-error);
}

.fl-field.fl-field--error textarea.fl-input {
  padding-top: 18px;
  padding-bottom: 18px;
}

.fl-label .fl-req {
  color: var(--fl-error);
  font-weight: 600;
}

.fl-field .fl-hint {
  margin: 6px 0 0 var(--fl-pad-x);
  font-size: 12px;
  color: var(--fl-error);
  display: none;
  line-height: 1.35;
}

.fl-field.fl-field--error .fl-hint {
  display: block;
}

.fl-field .fl-field-helper {
  margin: 6px 0 0 var(--fl-pad-x);
  font-size: 12px;
  color: #757575;
  line-height: 1.35;
}

.fl-field.fl-field--error .fl-field-helper {
  display: none;
}

.fl-field-helper.phone-auth-helper {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: #757575;
  line-height: 1.35;
}

.phone-auth-step .phone-auth-field {
  margin-bottom: 0;
}

/* Checkout phone: prefix height matches fl-input, not helper text below */
.phone-auth-field:has(.phone-auth-fl-field) {
  --phone-row-height: 52px;
}

.phone-auth-field:has(.phone-auth-fl-field) .phone-auth-prefix {
  height: var(--phone-row-height);
  min-height: var(--phone-row-height);
  border-radius: var(--fl-radius, 2px);
  border-color: #ccc;
}

.phone-auth-field:has(.phone-auth-fl-field) .phone-auth-fl-field .fl-input {
  height: var(--phone-row-height);
}

/* Status icons (check / X) */
.fl-field.fl-field--error::after,
.fl-field.fl-field--valid::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.fl-field:not(:has(textarea.fl-input)).fl-field--error::after,
.fl-field:not(:has(textarea.fl-input)).fl-field--valid::after {
  top: calc(var(--fl-height) / 2);
  transform: translateY(-50%);
  right: 14px;
}

.fl-field:has(textarea.fl-input).fl-field--error::after,
.fl-field:has(textarea.fl-input).fl-field--valid::after {
  top: 22px;
  right: 14px;
}

.fl-field:has(select.fl-input).fl-field--error::after,
.fl-field:has(select.fl-input).fl-field--valid::after {
  right: 38px;
}

.fl-field.fl-field--error::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.fl-field.fl-field--valid::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}