/* Phone, state and city fields: soft tinted fields instead of plain white. Works in light and dark themes. */
:root { --af-bg:#f0f6f6; --af-border:#d2dadc; --af-chip:#eceae2; --af-text:#0d1620; --af-muted:#5a6870; }
/* Dark colours only where the page itself follows the Light/Dark setting (Settings). Every other page stays light. */
html[data-theme="dark"] .set-panel { --af-bg:#0b1019; --af-border:#262f3d; --af-chip:#131b29; --af-text:#ffffff; --af-muted:#9fb0b4; }
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .set-panel { --af-bg:#0b1019; --af-border:#262f3d; --af-chip:#131b29; --af-text:#ffffff; --af-muted:#9fb0b4; }
}

.af, .phone-field {
    background: var(--af-bg) !important;
    border: 1px solid var(--af-border) !important;
    color: var(--af-text) !important;
    border-radius: 10px !important;
}
.af { box-sizing: border-box; padding: 10px 12px; font-size: 14.5px; width: 100%; max-width: none; }
.af::placeholder { color: var(--af-muted); opacity: .75; }
select.af {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23b8902e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
}
.af:focus, .phone-field:focus-within {
    outline: none; border-color: #b86a0f !important; box-shadow: 0 0 0 3px rgba(184,144,46,.20);
}

/* +60 chip in front of the number */
.phone-field { display: flex; align-items: stretch; overflow: hidden; width: 100%; max-width: 420px; padding: 0; }
.phone-field .phone-prefix {
    display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--af-chip);
    border-right: 1px solid var(--af-border); font-weight: 700; font-size: 14px; color: var(--af-text); white-space: nowrap;
}
.phone-field .phone-prefix i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #b86a0f; }
.phone-field input {
    flex: 1; min-width: 0; border: 0 !important; background: transparent !important; color: var(--af-text) !important;
    padding: 10px 12px; font-size: 14.5px; box-shadow: none !important; outline: none;
}
.phone-field input::placeholder { color: var(--af-muted); opacity: .75; }
.phone-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--af-muted); }
.set-field .af{max-width:420px}
.set-field .af{max-width:420px}

/* Registration page is always dark: phone, state and city fields match its other inputs */
.registration-card { --af-bg:#5a6870; --af-border:#5a6870; --af-chip:#0d1620; --af-text:#ffffff; --af-muted:#a5abad; }
.registration-card .af, .registration-card .phone-field { border-radius: 14px !important; min-height: 48px; max-width: none; }
.registration-card .af { padding: 12px 16px; }
.registration-card .phone-field .phone-prefix { padding: 0 16px; gap: 8px; }
.registration-card .phone-field .phone-prefix i { color: #b86a0f; }
.registration-card .phone-field input { padding: 12px 16px; }
.registration-card .af:focus, .registration-card .phone-field:focus-within { border-color: #2ee6c0 !important; box-shadow: 0 0 0 3px rgba(112,201,245,.15); }
.registration-card .field-hint { color: #9fb0b4; }