/**
 * Form component library, pulled from the Figma "01 - Brand & Design
 * System" file, "form-components" frame (node 6:581) - 10 input types.
 * Requires variables.css to be linked first (uses its color/font tokens).
 *
 * STATE MODEL
 * -----------
 * - Focused: native :focus-within on .field-control (works whether
 *   .field-control is the input itself, or a wrapper div around it - see
 *   "Compound controls" below). Propagates to the label via :has().
 * - Filled: native :not(:placeholder-shown) - every real <input>/<textarea>
 *   MUST have a placeholder attribute (even a plain one) for this to work.
 * - Error: no native pseudo-class fits "this value failed validation", so
 *   it's the explicit .is-error class, added once to the outer .field
 *   wrapper - it then styles the label/control/hint/icon underneath it.
 * - Valid: same idea, explicit .is-valid class on the .field wrapper.
 * - Disabled: native :disabled on the actual form element.
 *
 * .is-error and .is-valid are placeholders for when real validation logic
 * (JS or PHP-rendered) gets wired up later - this library only defines
 * what they look like.
 *
 * SIMPLE CONTROLS (text, email, search, date, textarea, price segment)
 * ----------------------------------------------------------------------
 * .field-control IS the real <input>/<textarea>. An icon, if any, is
 * absolutely positioned over its padding using a .field-icon-left/-right
 * wrapper - see the Email/Search/Date examples below.
 *
 *   <div class="field">
 *       <label class="field-label" for="location">Location Name</label>
 *       <input class="field-control" type="text" id="location" placeholder="Enter location" />
 *       <p class="field-hint">Enter a search region</p>
 *   </div>
 *
 *   <div class="field">
 *       <label class="field-label" for="email">Email Address</label>
 *       <div class="field-icon-wrap">
 *           <span class="field-icon field-icon-mail" aria-hidden="true"></span>
 *           <input class="field-control field-control--icon-left" type="email" id="email" placeholder="Enter email address" />
 *       </div>
 *   </div>
 *
 *   Icon on the right instead (e.g. the date field's calendar icon) - add
 *   .field-icon--right to the icon span and swap the input's padding side:
 *   <span class="field-icon field-icon-calendar field-icon--right" aria-hidden="true"></span>
 *   <input class="field-control field-control--icon-right" ... />
 *
 * COMPOUND CONTROLS (phone, price range)
 * ----------------------------------------------------------------------
 * .field-control is a DIV wrapping more than one child (a fixed prefix
 * segment plus a real, borderless <input>) - state is read off the inner
 * input via :has() and :focus-within.
 *
 *   <div class="field">
 *       <label class="field-label" for="phone">Contact Phone</label>
 *       <div class="field-control field-control--phone">
 *           <span class="field-phone-prefix">+234</span>
 *           <span class="field-phone-divider" aria-hidden="true"></span>
 *           <input class="field-control-inner" type="tel" id="phone" placeholder="Enter phone number" />
 *       </div>
 *   </div>
 *
 * CUSTOM SELECT (dropdown)
 * ----------------------------------------------------------------------
 * A native <select> can't be styled to match the expanded options panel
 * shown in the frame, so this is a button + list shell - add .is-open to
 * .field-select-trigger (and flip aria-expanded) via JS later to open it.
 *
 *   <div class="field">
 *       <label class="field-label" id="type-label">Property Type</label>
 *       <div class="field-select">
 *           <button type="button" class="field-select-trigger" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="type-label">
 *               <span class="field-select-value">Select type</span>
 *               <span class="field-icon field-icon-chevron" aria-hidden="true"></span>
 *           </button>
 *           <ul class="field-select-options" role="listbox">
 *               <li class="field-select-option is-selected" role="option" aria-selected="true">Villa</li>
 *               <li class="field-select-option" role="option">Penthouse</li>
 *           </ul>
 *       </div>
 *   </div>
 *
 * CHECKBOX / RADIO
 * ----------------------------------------------------------------------
 *   <label class="field-checkbox">
 *       <input type="checkbox" class="field-checkbox-input" />
 *       <span class="field-checkbox-box" aria-hidden="true"></span>
 *       <span class="field-checkbox-label">Amenity name</span>
 *   </label>
 *
 *   <label class="field-radio">
 *       <input type="radio" name="group" class="field-radio-input" />
 *       <span class="field-radio-dot" aria-hidden="true"></span>
 *       <span class="field-radio-label">Option name</span>
 *   </label>
 */

/* ---------------------------------------------------------------------
 * Shared field wrapper: label + control + hint
 * --------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.field-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-charcoal);
}

.field-hint {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: #757575;
}

/* ---------------------------------------------------------------------
 * Base control - shared by every text-style input (simple or compound)
 * --------------------------------------------------------------------- */

.field-control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 12px 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-near-black);
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.field-control::placeholder {
    color: #757575;
}

textarea.field-control {
    height: 100px;
    align-items: flex-start;
    padding: 16px;
    resize: vertical;
}

/* Focused - :focus-within covers both a plain input (.field-control IS the
   input) and a compound wrapper (.field-control contains the real input). */
.field-control:focus-within {
    border: 2px solid var(--color-primary-green);
    padding: 11px 15px; /* one less px than default so the box doesn't grow */
}

textarea.field-control:focus-within {
    padding: 15px;
}

/* Filled - matches a plain input directly, or a compound wrapper via :has().
   :not(:disabled) is a no-op on the compound (div) case since a <div> can
   never match :disabled, so that branch also excludes on
   :not(:has(.field-control-inner:disabled)) - otherwise a pre-filled
   disabled phone/price field would win the border color fight on
   specificity, since :has(...:not(:placeholder-shown)) out-specifies a
   plain :disabled selector. */
.field-control:not(:placeholder-shown):not(:focus-within):not(:disabled),
.field-control:has(.field-control-inner:not(:placeholder-shown)):not(:focus-within):not(:has(.field-control-inner:disabled)) {
    border: 1px solid var(--color-primary-green);
    color: var(--color-near-black);
}

/* Disabled */
.field-control:disabled,
.field-control:has(.field-control-inner:disabled) {
    background-color: var(--color-light-neutral);
    border-color: var(--color-stone);
    color: #757575;
    cursor: not-allowed;
}

.field-control-inner {
    flex: 1 0 0;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-near-black);
}

.field-control-inner::placeholder {
    color: #757575;
}

.field-control-inner:disabled {
    color: #757575;
    cursor: not-allowed;
}

/* Label follows its field's live focus/disabled state - error/valid below
   are explicit classes instead, since there's no pseudo-class for them. */
.field:has(.field-control:focus-within) .field-label {
    color: var(--color-primary-green);
}

.field:has(.field-control:disabled),
.field:has(.field-control-inner:disabled) {
    /* nothing visual on the wrapper itself, just scopes the label rule below */
}

.field:has(.field-control:disabled) .field-label,
.field:has(.field-control-inner:disabled) .field-label {
    color: #757575;
}

/* ---------------------------------------------------------------------
 * Error / Valid - explicit classes on the .field wrapper
 * --------------------------------------------------------------------- */

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

.field.is-error .field-control {
    border: 1.5px solid var(--color-error);
}

.field.is-error .field-hint {
    color: var(--color-error);
}

.field.is-valid .field-control {
    border: 1px solid var(--color-primary-green);
}

.field.is-valid .field-hint {
    color: var(--color-success);
}

/* ---------------------------------------------------------------------
 * Icon overlay - for inputs with a leading/trailing icon (email, search,
 * date). The icon is a single SVG recolored per state via CSS masking, the
 * same technique as the button spinner - one file, any color.
 * --------------------------------------------------------------------- */

.field-icon-wrap {
    position: relative;
    width: 100%;
}

.field-control--icon-left {
    padding-left: 42px;
}

.field-control--icon-right {
    padding-right: 42px;
}

.field-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    color: #757575;
}

.field-icon-wrap > .field-icon {
    left: 16px;
}

.field-icon--right {
    left: auto;
    right: 16px;
}

.field-icon-mail {
    -webkit-mask-image: url('/assets/images/icons/icon-form-mail.svg');
    mask-image: url('/assets/images/icons/icon-form-mail.svg');
}

.field-icon-search {
    width: 18px;
    height: 18px;
    color: var(--color-champagne-gold);
    -webkit-mask-image: url('/assets/images/icons/icon-form-search.svg');
    mask-image: url('/assets/images/icons/icon-form-search.svg');
}

.field-icon-calendar {
    color: var(--color-champagne-gold);
    -webkit-mask-image: url('/assets/images/icons/icon-form-calendar.svg');
    mask-image: url('/assets/images/icons/icon-form-calendar.svg');
}

/* Mail icon is gray by default, unlike search/calendar/chevron which default gold. */
.field-icon-wrap:has(.field-control:focus-within) .field-icon-mail,
.field-icon-wrap:has(.field-control:not(:placeholder-shown):not(:focus-within):not(:disabled)) .field-icon-mail {
    color: var(--color-primary-green);
}

.field.is-error .field-icon-mail {
    color: var(--color-error);
}

.field-icon-wrap:has(.field-control:focus-within) .field-icon-search,
.field-icon-wrap:has(.field-control:not(:placeholder-shown):not(:focus-within):not(:disabled)) .field-icon-search,
.field-icon-wrap:has(.field-control:focus-within) .field-icon-calendar,
.field-icon-wrap:has(.field-control:not(:placeholder-shown):not(:focus-within):not(:disabled)) .field-icon-calendar {
    color: var(--color-primary-green);
}

.field-control:disabled ~ .field-icon,
.field-icon-wrap:has(.field-control:disabled) .field-icon {
    color: #757575;
}

/* Search clear ("x") button - only shows once the field has a value. */
.field-clear-button {
    display: none;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-light-neutral);
    cursor: pointer;
    padding: 0;
}

.field-clear-button img {
    width: 10px;
    height: 10px;
    display: block;
}

.field-control:not(:placeholder-shown) ~ .field-clear-button {
    display: flex;
}

/* ---------------------------------------------------------------------
 * Phone input - fixed +234 segment, divider, then a plain inner input
 * --------------------------------------------------------------------- */

.field-control--phone {
    padding: 12px;
}

.field-phone-prefix {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary-green);
}

.field-phone-divider {
    flex-shrink: 0;
    width: 1px;
    height: 16px;
    background-color: var(--color-stone);
}

.field.is-error .field-phone-prefix {
    color: var(--color-error);
}

.field:has(.field-control-inner:disabled) .field-phone-prefix {
    color: #757575;
}

/* ---------------------------------------------------------------------
 * Price range - two bordered segments with a ₦ prefix, joined by a dash
 * --------------------------------------------------------------------- */

.field-price-range {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.field-price-input {
    flex: 1 0 0;
}

.field-price-prefix {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-champagne-gold);
}

.field-price-separator {
    flex-shrink: 0;
    color: #757575;
    font-size: 16px;
}

/* ---------------------------------------------------------------------
 * Custom select (dropdown)
 * --------------------------------------------------------------------- */

.field-select {
    position: relative;
    width: 100%;
}

.field-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 12px 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-near-black);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.field-select-value.is-placeholder {
    color: #757575;
}

.field-select-trigger:focus-visible,
.field-select-trigger.is-open {
    outline: none;
    border: 2px solid var(--color-primary-green);
    padding: 11px 15px;
}

.field-select-trigger.is-open {
    border-radius: 4px 4px 0 0;
}

.field-select:has(.field-select-trigger.is-open) .field-icon-chevron {
    color: var(--color-primary-green);
    transform: rotate(180deg);
}

.field-select-trigger:disabled {
    background-color: var(--color-light-neutral);
    border-color: var(--color-stone);
    color: #757575;
    cursor: not-allowed;
}

.field-icon-chevron {
    position: static;
    transform: none;
    flex-shrink: 0;
    color: var(--color-champagne-gold);
    -webkit-mask-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    mask-image: url('/assets/images/icons/icon-form-chevron-down.svg');
}

.field-select-trigger:disabled .field-icon-chevron {
    color: #757575;
}

.field-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary-green);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.11);
    max-height: 220px;
    overflow-y: auto;
}

.field-select-trigger.is-open ~ .field-select-options {
    display: block;
}

.field-select-option {
    padding: 12px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-charcoal);
    cursor: pointer;
}

.field-select-option:hover {
    background-color: var(--color-light-neutral);
}

.field-select-option.is-selected {
    background-color: var(--color-light-neutral);
    font-weight: 600;
    color: var(--color-primary-green);
}

/* ---------------------------------------------------------------------
 * Real <select> - same visual language as .field-select-trigger above,
 * for the places a dropdown has to actually submit a value in a plain
 * HTML form (hero search, Property Listing top search bar) rather than
 * just look like one. appearance:none clears the browser's own arrow;
 * icon-form-chevron-down.svg already has its champagne-gold stroke baked
 * into the file itself, so it works directly as a background-image with
 * no mask-image/currentColor recoloring needed.
 * --------------------------------------------------------------------- */

.field-native-select {
    display: block;
    width: 100%;
    height: 44px;
    padding: 12px 32px 12px 16px;
    background-color: var(--color-white);
    background-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-near-black);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.15s ease;
}

.field-native-select::-ms-expand {
    display: none;
}

.field-native-select:focus-visible {
    outline: none;
    border: 2px solid var(--color-primary-green);
    padding: 11px 31px 11px 15px;
}

.field-native-select:disabled {
    background-color: var(--color-light-neutral);
    border-color: var(--color-stone);
    color: #757575;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * Checkbox
 * --------------------------------------------------------------------- */

.field-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.field-checkbox-input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.field-checkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: var(--color-white);
    border: 2px solid var(--color-stone);
    border-radius: 4px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.field-checkbox-box::after {
    content: '';
    display: none;
    width: 12px;
    height: 12px;
    background-color: var(--color-white);
    -webkit-mask-image: url('/assets/images/icons/icon-form-check.svg');
    mask-image: url('/assets/images/icons/icon-form-check.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.field-checkbox-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-charcoal);
}

.field-checkbox-input:checked ~ .field-checkbox-box {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
}

.field-checkbox-input:checked ~ .field-checkbox-box::after {
    display: block;
}

.field-checkbox-input:checked ~ .field-checkbox-label {
    font-weight: 600;
    color: var(--color-primary-green);
}

.field-checkbox-input:disabled ~ .field-checkbox-box {
    background-color: var(--color-light-neutral);
    border: 1px solid var(--color-stone);
}

.field-checkbox-input:disabled ~ .field-checkbox-label {
    color: #757575;
    cursor: not-allowed;
}

.field-checkbox-input:disabled {
    cursor: not-allowed;
}

.field-checkbox-input:focus-visible ~ .field-checkbox-box {
    outline: 2px solid var(--color-primary-green);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Radio button
 * --------------------------------------------------------------------- */

.field-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.field-radio-input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.field-radio-dot {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 50%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, border-width 0.15s ease;
}

.field-radio-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-charcoal);
}

.field-radio-input:checked ~ .field-radio-dot {
    border: 6px solid var(--color-primary-green);
}

.field-radio-input:checked ~ .field-radio-label {
    font-weight: 600;
    color: var(--color-primary-green);
}

.field-radio-input:disabled ~ .field-radio-dot {
    border-color: var(--color-stone);
    background-color: var(--color-light-neutral);
}

.field-radio-input:disabled ~ .field-radio-label {
    color: #757575;
    cursor: not-allowed;
}

.field-radio-input:disabled {
    cursor: not-allowed;
}

.field-radio-input:focus-visible ~ .field-radio-dot {
    outline: 2px solid var(--color-primary-green);
    outline-offset: 2px;
}