/* ── The profile mobile field ───────────────────────────────────────────────
   Country picker + number in one bordered row, the SMS-verification strip
   under it. Extracted from organiser-settings.css so the POS console, the
   door scanner and the ADMIN PANEL's My Profile can render the same field —
   the panel loads its own stylesheet and would otherwise have needed a third
   copy of these rules. Markup: trendslive/partials/profile_phone_verify.
   Every selector is under .profile-phone-block, so it cannot reach anything
   else on a page that loads it. */

/* Unified phone row — registration parity (one border, country + number inside) */
.profile-phone-block .phone-row {
    display: flex; gap: 0; align-items: stretch;
    background: var(--tl-surface-2); border: 1px solid var(--tl-border); border-radius: var(--tl-r-md);
}
.profile-phone-block .phone-row-country {
    flex: 0 0 112px; min-width: 0; border-right: 1px solid var(--tl-border);
    position: relative; z-index: 2;
}
.profile-phone-block .phone-row-number { flex: 1; min-width: 0; }
.profile-phone-block .phone-row .input-wrap input {
    width: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent;
    padding: 11px 13px; color: var(--tl-fg); font-family: var(--tl-font-app); font-size: 14px;
}
.profile-phone-block .phone-row .input-wrap input::placeholder { color: var(--tl-fg-4); }
.profile-phone-block .phone-row .input-wrap input:focus { outline: none; border: 0; box-shadow: none; }
.profile-phone-block .phone-row:focus-within {
    border-color: var(--tl-border-yellow); box-shadow: 0 0 0 3px var(--tl-yellow-glow);
}
/* Country picker inside the unified row (beats .tl-form .multiselect__tags) */
.profile-phone-block .phone-row .reg-country-picker .multiselect { position: static; min-height: 44px; color: var(--tl-fg); font-size: 14px; }
.profile-phone-block .phone-row .reg-country-picker .multiselect__tags {
    min-height: 44px; border: 0; border-radius: 0; box-shadow: none; background: transparent;
    padding: 10px 28px 6px 12px;
}
.profile-phone-block .phone-row .reg-country-picker .multiselect--active .multiselect__tags { border: 0; box-shadow: none; }
.profile-phone-block .phone-row .reg-country-picker .multiselect__select { right: 4px; }
.profile-phone-block .phone-row .reg-country-picker .multiselect__content-wrapper { left: 0; right: auto; min-width: 280px; z-index: 300; }

.profile-phone-block .reg-country-picker .multiselect__input,
.profile-phone-block .reg-country-picker .multiselect__single {
    background: transparent; color: var(--tl-fg); font-size: 14px; padding: 0; margin: 0;
    border: 0; border-radius: 0; box-shadow: none; outline: none; width: auto;
}
.profile-phone-block .reg-country-picker .multiselect__input:focus { border: 0; box-shadow: none; outline: none; }
.profile-phone-block .reg-country-picker .multiselect__placeholder { color: var(--tl-fg-4); padding: 0; margin: 0; }
.profile-phone-block .reg-country-picker .multiselect__content-wrapper {
    background: var(--tl-surface-2); border: 1px solid var(--tl-border); border-radius: var(--tl-r-md);
    margin-top: 6px; box-shadow: 0 14px 38px rgba(0,0,0,0.35); z-index: 200;
}
.profile-phone-block .reg-country-picker .multiselect__option { color: var(--tl-fg-2); font-size: 13.5px; min-height: 40px; padding: 8px 12px; }
.profile-phone-block .reg-country-picker .multiselect__option::after { display: none; }
.profile-phone-block .reg-country-picker .multiselect__option--highlight { background: var(--tl-surface-3); color: var(--tl-fg); }
.profile-phone-block .reg-country-picker .multiselect__option--selected { background: rgba(249,235,6,0.12); color: var(--tl-yellow-ink); font-weight: 600; }
.profile-phone-block .reg-country-picker .multiselect__select::before { border-color: var(--tl-fg-3) transparent transparent; }
.profile-phone-block .reg-country-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.profile-phone-block .reg-country-flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
.profile-phone-block .reg-country-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-phone-block .reg-country-dial { color: var(--tl-fg-3); font-family: var(--tl-font-mono); font-size: 12px; flex-shrink: 0; }
.profile-phone-block .reg-country-picker .multiselect__option--selected .reg-country-dial { color: rgba(249,235,6,0.75); }
.profile-phone-block .field-hint { font-size: 12px; color: var(--tl-fg-3); margin: 6px 0 0; line-height: 1.45; }

.phone-otp-row { display:flex; gap:10px; align-items:stretch; margin-top:12px; flex-wrap:wrap; }
.phone-otp-row .input-wrap { flex:1 1 160px; min-width:0; }
.profile-phone-block .phone-otp-row .input-wrap input {
    width:100%; background:var(--tl-surface-2); border:1px solid var(--tl-border);
    border-radius:var(--tl-r-md); padding:11px 13px; color:var(--tl-fg);
    font-family:var(--tl-font-app); font-size:14px; min-height:42px;
}
.profile-phone-block .phone-otp-row .input-wrap input:focus {
    outline:none; border-color:var(--tl-border-yellow); box-shadow:0 0 0 3px var(--tl-yellow-glow);
}
.profile-phone-block .profile-phone-send,
.profile-phone-block .profile-phone-verify {
    flex:0 0 auto; align-self:stretch; min-height:42px; padding:0 16px;
    letter-spacing:0.06em;
}
.profile-phone-block .profile-phone-send:disabled,
.profile-phone-block .profile-phone-verify:disabled { opacity:0.55; cursor:not-allowed; }
.organiser-verify-hint { font-size:12px; color:var(--tl-fg-3); margin:8px 0 0; line-height:1.45; }
.organiser-verify-hint.is-error { color:var(--tl-danger); padding:10px 12px; border-radius:10px; background:var(--tl-danger-bg); border:1px solid color-mix(in srgb, var(--tl-danger) 40%, transparent); }
.organiser-verify-hint.is-sent, .organiser-verify-hint.is-success { color:var(--tl-success); }
.organiser-verify-hint.is-sent {
    padding:10px 12px; border-radius:10px;
    background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.25);
}
.organiser-verify-done { font-size:13px; color:var(--tl-success); margin:10px 0 0; padding:10px 12px; border-radius:10px; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.25); }