/* Profile page — cookbook frontend domain styles.
 * Loaded by resources/views/dashboard/profile.blade.php.
 *
 * Mirrors the backend app/Components/User/ProfileService domain. Keeps
 * the Profile page's phone-country selector + country select looking
 * intentional rather than like two random Bootstrap controls glued
 * together. Light overrides only — Phoenix theme does the heavy lift.
 */

/* ─────────────────────────────────────────────────────────────────
 * Country / phone fields — Pete review Fri May 22 ~15:34 UTC:
 *   "The flags like outside the box. Ideally the flag needs to be IN
 *    the box, then it needs to show the country code in front of the
 *    number, then display the full number."
 *
 * PR #20 shipped a separate prefix-pill outside the field. Pete didn't
 * love it — wants everything inside one unified box.
 *
 * Solution:
 *   - Use `appearance: none` on the select so Chrome stops handing
 *     rendering to the OS widget (NSPopUpButton). Native widget was
 *     stripping the emoji flag from the closed-state display; CSS
 *     rendering with the right font-family stack keeps the emoji.
 *   - Force a cross-browser emoji font family stack so the flag
 *     glyphs render uniformly.
 *   - For the phone field: wrap [<select><input/>] in a `.avantiy-phone-field`
 *     container that owns the border + focus ring. Inner select +
 *     input are borderless, separated by a hairline divider. Reads
 *     as ONE input.
 *
 * Adheres to Avantiy Design Law (docs/phase-2/12-avantiy-design-law.md):
 *   - Focus ring uses brand purple #8b3bff + rgba(139, 59, 255, 0.18) glow
 *   - No novel colors
 * ─────────────────────────────────────────────────────────────── */

/* Shared: appearance: none + emoji font stack + custom caret SVG.
 * Applied to both the standalone residency select and the inline
 * phone-country select. The custom caret is a tiny inline SVG so we
 * don't need to ship an asset. */
.avantiy-country-select,
.avantiy-phone-country-inline {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", system-ui, -apple-system, "Segoe UI",
                 Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%234a1bb0' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.65rem 0.45rem;
    padding-right: 1.85rem;
}

/* Residency / billing-country selects look like a normal form-control,
 * just with appearance:none so the flag survives the closed-state render. */
.avantiy-country-select {
    cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────
 *  Unified phone field — wraps the country picker + number input in
 *  one bordered container. Native <select> + <input> inside but they
 *  look like one control. Matches sibling .form-control / .form-select.
 * ─────────────────────────────────────────────────────────────── */

/* AVANTIY DESIGN BIBLE compliant — §1b palette tokens for profile inputs */
:root {
    --avantiy-purple-50:  #f6f2ff;
    --avantiy-purple-100: #ede6ff;
    --avantiy-purple-300: #c9a8ff;
    --avantiy-purple-500: #8b3bff;
    --avantiy-purple-700: #4f1aab;
    --avantiy-purple-900: #3a1180;
}

/* AVANTIY DESIGN BIBLE compliant — §3f light gray + purple border (profile form) */
#profile-form .form-control,
#profile-form .form-select {
    background-color: var(--avantiy-purple-50);
    border: 1px solid rgba(139, 59, 255, 0.28);
    color: #3a1180;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#profile-form .form-control:focus,
#profile-form .form-select:focus {
    background-color: var(--avantiy-purple-50);
    border-color: #8b3bff;
    color: #3a1180;
    box-shadow: 0 0 0 0.2rem rgba(139, 59, 255, 0.18);
}
#profile-form .form-control::placeholder {
    color: rgba(74, 68, 88, 0.55);
}

.avantiy-phone-field {
    display: flex;
    align-items: stretch;
    width: 100%;
    background-color: var(--avantiy-purple-50);
    border: 1px solid rgba(139, 59, 255, 0.28);
    border-radius: 0.375rem;
    color: #3a1180;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.avantiy-phone-field:focus-within {
    border-color: #8b3bff;
    box-shadow: 0 0 0 0.2rem rgba(139, 59, 255, 0.18);
}

.avantiy-phone-country-inline {
    flex: 0 0 auto;
    min-width: 5.5rem;
    border: 0;
    background-color: transparent;
    color: #3a1180;
    padding: 0.5rem 1.85rem 0.5rem 0.85rem;
    cursor: pointer;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}
.avantiy-phone-country-inline:hover {
    background-color: rgba(178, 122, 255, 0.07);
}
.avantiy-phone-country-inline:focus {
    outline: 0;
    background-color: rgba(178, 122, 255, 0.10);
    box-shadow: none;                     /* parent .avantiy-phone-field owns the ring */
}

/* Vertical hairline divider between the country select + the number
 * input. Pulled tight so the two controls visually fuse. */
.avantiy-phone-field .avantiy-phone-divider {
    flex: 0 0 1px;
    background: rgba(20, 14, 35, 0.12);
    margin: 0.35rem 0;
}

.avantiy-phone-number-inline {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #3a1180;
    padding: 0.5rem 0.85rem;
    font-size: 0.95rem;
    line-height: 1.4;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}
.avantiy-phone-number-inline:focus {
    outline: 0;
    box-shadow: none;                     /* parent .avantiy-phone-field owns the ring */
}
.avantiy-phone-number-inline::placeholder {
    color: rgba(74, 68, 88, 0.55);
}