/**
 * FM Popup Styles - Synced with Dashboard
 * Uses same variables and patterns as fm-dashboard.css
 */

/* ==========================================================================
   POPUP OVERLAY
   ========================================================================== */

.fm-popup-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--fm-space-2, 16px) !important;
    font-family: var(--fm-font, 'Plus Jakarta Sans', -apple-system, sans-serif) !important;
}

.fm-popup-overlay.is-visible {
    display: flex !important;
}

/* ==========================================================================
   POPUP CONTAINER - Same as .fm-dashboard-card
   ========================================================================== */

.fm-popup-container {
    position: relative !important;
    width: min(460px, 100%) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: var(--fm-white, #FFFFFF) !important;
    border: 1px solid var(--fm-border, #E2E8F0) !important;
    border-radius: var(--fm-radius-lg, 24px) !important;
    padding: clamp(28px, 4vw, 38px) clamp(20px, 3vw, 30px) !important;
    box-shadow: var(--fm-shadow-xl, 0 25px 50px rgba(17, 27, 134, 0.15)) !important;
    animation: fmPopupEnter 0.25s var(--fm-ease, cubic-bezier(0.4, 0, 0.2, 1)) !important;
    box-sizing: border-box !important;
}

@keyframes fmPopupEnter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Scrollbar */
.fm-popup-container::-webkit-scrollbar {
    width: 6px;
}

.fm-popup-container::-webkit-scrollbar-track {
    background: transparent;
}

.fm-popup-container::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

/* ==========================================================================
   CLOSE BUTTON
   ========================================================================== */

.fm-popup-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--fm-radius-pill, 999px) !important;
    border: 2px solid var(--fm-border, #E2E8F0) !important;
    background: var(--fm-white, #FFFFFF) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: var(--fm-text-body, #475569) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 10 !important;
    transition: all var(--fm-duration, 0.3s) var(--fm-ease, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

.fm-popup-close:hover {
    background: var(--fm-red, #ef4444) !important;
    border-color: var(--fm-red, #ef4444) !important;
    color: var(--fm-white, #FFFFFF) !important;
    transform: rotate(90deg) !important;
}

/* ==========================================================================
   TABS - Same as .fm-dashboard-tabs
   ========================================================================== */

.fm-popup-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: var(--fm-gray-100, #F1F5F9) !important;
    border-radius: var(--fm-radius-pill, 999px) !important;
    padding: 4px !important;
    width: fit-content !important;
    margin: 0 auto clamp(20px, 3vw, 28px) !important;
}

.fm-popup-tab {
    border: none !important;
    background: transparent !important;
    color: var(--fm-primary, #111B86) !important;
    padding: 10px clamp(18px, 3vw, 28px) !important;
    border-radius: var(--fm-radius-pill, 999px) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-base, 15px) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--fm-duration, 0.3s) var(--fm-ease, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

.fm-popup-tab:hover:not(.is-active) {
    background: rgba(17, 27, 134, 0.06) !important;
}

.fm-popup-tab.is-active {
    background: var(--fm-primary, #111B86) !important;
    color: var(--fm-white, #FFFFFF) !important;
    box-shadow: 0 6px 18px rgba(17, 27, 134, 0.3) !important;
}

.fm-popup-tabs.is-hidden {
    display: none !important;
}

/* ==========================================================================
   FORM
   ========================================================================== */

.fm-popup-form {
    margin: 0 !important;
    padding: 0 !important;
}

.fm-popup-form.is-hidden {
    display: none !important;
}

#fm-popup-recovery-form,
#fm-popup-recovery-form[hidden] {
    display: none !important;
}

#fm-popup-recovery-form.is-visible {
    display: block !important;
}

/* ==========================================================================
   FORM FIELDS - Same as .fm-dashboard-field
   ========================================================================== */

.fm-popup-field {
    margin-bottom: var(--fm-space-2, 16px) !important;
}

.fm-popup-field label {
    display: block !important;
    font-family: var(--fm-font, inherit) !important;
    font-weight: 600 !important;
    font-size: var(--fm-text-sm, 14px) !important;
    color: var(--fm-text-heading, #0F172A) !important;
    margin-bottom: var(--fm-space-1, 8px) !important;
}

.fm-popup-field input[type="text"],
.fm-popup-field input[type="password"] {
    width: 100% !important;
    padding: 14px var(--fm-space-2, 16px) !important;
    border: 2px solid var(--fm-border, #E2E8F0) !important;
    border-radius: var(--fm-radius-md, 16px) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-md, 16px) !important;
    color: var(--fm-text-heading, #0F172A) !important;
    transition: all var(--fm-duration, 0.3s) var(--fm-ease) !important;
    background: var(--fm-white, #FFFFFF) !important;
    box-sizing: border-box !important;
}

.fm-popup-field input::placeholder {
    color: var(--fm-gray-400, #94A3B8) !important;
}

.fm-popup-field input:focus {
    border-color: var(--fm-primary, #111B86) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(17, 27, 134, 0.12) !important;
}

/* ==========================================================================
   PASSWORD FIELD WITH TOGGLE
   ========================================================================== */

.fm-popup-field--password {
    position: relative !important;
}

.fm-popup-field--password input[type="password"],
.fm-popup-field--password input[type="text"] {
    padding-right: 48px !important;
}

.fm-password-toggle {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    color: var(--fm-gray-400, #94A3B8) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease !important;
    padding: 0 !important;
}

.fm-password-toggle:hover {
    color: var(--fm-text-body, #475569) !important;
}

.fm-password-toggle svg {
    width: 20px !important;
    height: 20px !important;
}

/* ==========================================================================
   CHECKBOX - Same as .fm-dashboard-checkbox
   ========================================================================== */

.fm-popup-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: var(--fm-space-1, 8px) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-sm, 14px) !important;
    color: var(--fm-text-body, #475569) !important;
    cursor: pointer !important;
}

.fm-popup-checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--fm-primary, #111B86) !important;
    cursor: pointer !important;
}

/* ==========================================================================
   MODE VISIBILITY
   ========================================================================== */

.fm-popup-field--name {
    display: none !important;
}

.fm-popup-form[data-mode="register"] .fm-popup-field--name {
    display: block !important;
}

.fm-popup-form[data-mode="register"] .fm-popup-field--remember {
    display: none !important;
}

/* ==========================================================================
   SUBMIT BUTTON - Same as .fm-dashboard-submit
   ========================================================================== */

.fm-popup-submit {
    width: 100% !important;
    margin-top: var(--fm-space-1, 8px) !important;
    padding: var(--fm-space-2, 16px) !important;
    border: none !important;
    border-radius: var(--fm-radius-pill, 999px) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-base, 15px) !important;
    font-weight: 700 !important;
    background: var(--fm-primary, #111B86) !important;
    color: var(--fm-white, #FFFFFF) !important;
    cursor: pointer !important;
    transition: all var(--fm-duration, 0.3s) var(--fm-ease) !important;
    box-shadow: 0 10px 25px rgba(17, 27, 134, 0.25) !important;
}

.fm-popup-submit:hover:not(:disabled) {
    background: var(--fm-primary-dark, #0C1668) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 35px rgba(17, 27, 134, 0.35) !important;
}

.fm-popup-submit:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Loading state */
.fm-popup-submit.is-loading {
    pointer-events: none !important;
    color: transparent !important;
    position: relative !important;
}

.fm-popup-submit.is-loading::after {
    content: '' !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    top: 50% !important;
    left: 50% !important;
    margin: -10px 0 0 -10px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #FFFFFF !important;
    border-radius: 50% !important;
    animation: fmSpin 0.6s linear infinite !important;
}

@keyframes fmSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   MESSAGES - Same as .fm-dashboard-message
   ========================================================================== */

.fm-popup-message {
    margin-bottom: var(--fm-space-2, 16px) !important;
    padding: 12px 14px !important;
    border-radius: var(--fm-radius-sm, 12px) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-sm, 14px) !important;
    line-height: 1.5 !important;
}

.fm-popup-message--error {
    background: var(--fm-red-bg, #fef2f2) !important;
    color: var(--fm-red-text, #b91c1c) !important;
    border-left: 4px solid var(--fm-red, #ef4444) !important;
}

.fm-popup-message--success {
    background: #ecfdf3 !important;
    color: var(--fm-green, #10B981) !important;
    border-left: 4px solid var(--fm-green, #10B981) !important;
}

.fm-popup-message[hidden] {
    display: none !important;
}

/* ==========================================================================
   RECOVERY - Same as .fm-dashboard-recovery
   ========================================================================== */

.fm-popup-recovery__title {
    font-family: var(--fm-font, inherit) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--fm-primary, #111B86) !important;
    margin: 0 0 8px !important;
    text-align: center !important;
}

.fm-popup-recovery__text {
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-sm, 14px) !important;
    color: var(--fm-text-body, #475569) !important;
    text-align: center !important;
    margin: 0 0 16px !important;
    line-height: 1.6 !important;
}

.fm-popup-recovery-steps {
    margin: 0 0 18px !important;
    padding: 0 !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-sm, 14px) !important;
    color: var(--fm-text-body, #475569) !important;
    line-height: 1.6 !important;
    list-style: none !important;
    counter-reset: fm-recovery-step !important;
    display: grid !important;
    gap: 10px !important;
}

.fm-popup-recovery-steps li {
    margin: 0 !important;
    padding: 12px 14px 12px 44px !important;
    border-radius: 14px !important;
    border: 1px solid var(--fm-border, #E2E8F0) !important;
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FF 100%) !important;
    box-shadow: 0 8px 18px rgba(17, 27, 134, 0.08) !important;
    position: relative !important;
    counter-increment: fm-recovery-step !important;
}

.fm-popup-recovery-steps li::before {
    content: counter(fm-recovery-step) !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: var(--fm-primary, #111B86) !important;
    color: var(--fm-white, #FFFFFF) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fm-popup-recovery-steps strong {
    color: var(--fm-primary, #111B86) !important;
    font-weight: 700 !important;
}

.fm-popup-recovery-link {
    text-align: center !important;
    margin-top: var(--fm-space-2, 16px) !important;
}

.fm-popup-recovery-actions {
    text-align: center !important;
    margin-top: 12px !important;
}

.fm-popup-telegram-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 22px !important;
    border-radius: var(--fm-radius-pill, 999px) !important;
    border: 1px solid rgba(17, 27, 134, 0.25) !important;
    background: linear-gradient(135deg, #111B86 0%, #0C1668 100%) !important;
    color: var(--fm-white, #FFFFFF) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-base, 15px) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 12px 24px rgba(17, 27, 134, 0.25) !important;
}

.fm-popup-telegram-btn__icon {
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    color: inherit !important;
}

.fm-popup-telegram-btn__icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

.fm-popup-telegram-btn__text {
    line-height: 1.2 !important;
}

.fm-popup-telegram-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 30px rgba(17, 27, 134, 0.3) !important;
    background: linear-gradient(135deg, #0C1668 0%, #111B86 100%) !important;
    color: var(--fm-white, #FFFFFF) !important;
}

.fm-popup-link {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--fm-primary, #111B86) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-sm, 14px) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    transition: color var(--fm-duration, 0.3s) var(--fm-ease) !important;
}

.fm-popup-link:hover {
    color: var(--fm-primary-dark, #0C1668) !important;
}

/* ==========================================================================
   LOGGED-IN / PAYMENT STATE
   ========================================================================== */

.fm-popup-logged-in {
    text-align: center !important;
}

.fm-popup-logged-in[hidden] {
    display: none !important;
}

.fm-popup-logged-in__title {
    margin: 0 0 8px !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--fm-primary, #111B86) !important;
}

.fm-popup-logged-in__text {
    margin: 0 0 24px !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-base, 15px) !important;
    color: var(--fm-text-body, #475569) !important;
    line-height: 1.6 !important;
}

.fm-popup-logged-in__error {
    width: 100% !important;
    padding: 12px 16px !important;
    border-left: 4px solid var(--fm-red, #ef4444) !important;
    background: var(--fm-red-bg, #fef2f2) !important;
    color: var(--fm-red-text, #b91c1c) !important;
    border-radius: var(--fm-radius-sm, 12px) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-sm, 14px) !important;
    text-align: left !important;
    margin-bottom: 16px !important;
}

.fm-popup-logged-in__error[hidden] {
    display: none !important;
}

.fm-popup-logged-in__payments {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.fm-popup-pay-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 20px !important;
    border-radius: var(--fm-radius-md, 16px) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: var(--fm-white, #FFFFFF) !important;
    border: 2px solid var(--fm-primary, #111B86) !important;
}

.fm-popup-pay-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(17, 27, 134, 0.15) !important;
}

.fm-popup-pay-logo {
    height: 24px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
}

.fm-popup-action--secondary {
    background: var(--fm-gray-100, #F1F5F9) !important;
    color: var(--fm-text-heading, #0F172A) !important;
    border: 1px solid var(--fm-border, #E2E8F0) !important;
    padding: 12px 24px !important;
    border-radius: var(--fm-radius-pill, 999px) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-sm, 14px) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

.fm-popup-action--secondary:hover {
    background: var(--fm-border, #E2E8F0) !important;
}

/* ==========================================================================
   PHONE INPUT - INTL-TEL-INPUT (Shared with Dashboard)
   ========================================================================== */

.fm-popup-field--phone .iti,
.fm-dashboard-field--phone .iti {
    width: 100% !important;
    display: block !important;
    position: relative !important;
    /* Keep input text from overlapping the dial-code UI */
    --fm-iti-prefix-width: 120px;
}

/* Force flag container to left side */
.fm-popup-field--phone .iti__flag-container,
.fm-dashboard-field--phone .iti__flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 2 !important;
    padding: 2px !important;
    width: var(--fm-iti-prefix-width, 120px) !important;
    box-sizing: border-box !important;
}

.fm-popup-field--phone .iti input[type="tel"],
.fm-dashboard-field--phone .iti input[type="tel"] {
    width: 100% !important;
    padding: 14px var(--fm-space-2, 16px) 14px calc(var(--fm-iti-prefix-width, 120px) + var(--fm-space-2, 16px)) !important;
    border: 2px solid var(--fm-border, #E2E8F0) !important;
    border-radius: var(--fm-radius-md, 16px) !important;
    font-family: var(--fm-font, inherit) !important;
    font-size: var(--fm-text-md, 16px) !important;
    color: var(--fm-text-heading, #0F172A) !important;
    background: var(--fm-white, #FFFFFF) !important;
    letter-spacing: 1px !important;
    outline: none !important;
    transition: all var(--fm-duration, 0.3s) var(--fm-ease) !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    position: relative !important;
    z-index: 0 !important;
}

.fm-popup-field--phone .iti input[type="tel"]:focus,
.fm-dashboard-field--phone .iti input[type="tel"]:focus {
    border-color: var(--fm-primary, #111B86) !important;
    box-shadow: 0 0 0 4px rgba(17, 27, 134, 0.12) !important;
}

.fm-popup-field--phone .iti input[type="tel"]::placeholder,
.fm-dashboard-field--phone .iti input[type="tel"]::placeholder {
    color: var(--fm-gray-400, #94A3B8) !important;
    letter-spacing: normal !important;
}

.fm-popup-field--phone .iti__selected-flag,
.fm-dashboard-field--phone .iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    background: var(--fm-gray-100, #F1F5F9) !important;
    border-right: 2px solid var(--fm-border, #E2E8F0) !important;
    padding: 0 12px 0 14px !important;
    height: 100% !important;
    border-radius: 14px 0 0 14px !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.fm-popup-field--phone .iti__selected-flag:hover,
.fm-dashboard-field--phone .iti__selected-flag:hover {
    background: var(--fm-border, #E2E8F0) !important;
}

.fm-popup-field--phone .iti__selected-dial-code,
.fm-dashboard-field--phone .iti__selected-dial-code {
    color: var(--fm-primary, #111B86) !important;
    font-family: var(--fm-font, inherit) !important;
    font-weight: 700 !important;
    font-size: var(--fm-text-base, 15px) !important;
    margin-left: 6px !important;
}

.fm-popup-field--phone .iti__arrow,
.fm-dashboard-field--phone .iti__arrow {
    border-top-color: var(--fm-text-body, #475569) !important;
    margin-left: 6px !important;
    border-width: 5px 4px 0 4px !important;
}

.fm-popup-field--phone .iti__arrow--up,
.fm-dashboard-field--phone .iti__arrow--up {
    border-top: none !important;
    border-bottom: 5px solid var(--fm-text-body, #475569) !important;
}

.fm-popup-field--phone .iti__flag,
.fm-dashboard-field--phone .iti__flag {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    border-radius: 2px !important;
}

/* ==========================================================================
   COUNTRY DROPDOWN (Appended to body by intl-tel-input)
   ========================================================================== */

/* Container wrapper when dropdown is appended to body */
.iti--container {
    /* 
     * IMPORTANT: Do not use !important on top/left/position here. 
     * intl-tel-input needs to override these via inline styles to position the dropdown.
     */
    position: absolute;
    z-index: 9999999 !important;
    pointer-events: auto;
}

/* The actual dropdown content */
.iti__dropdown-content {
    z-index: 9999999 !important;
    background: var(--fm-white, #FFFFFF) !important;
    border: 1px solid var(--fm-border, #E2E8F0) !important;
    border-radius: var(--fm-radius-md, 16px) !important;
    box-shadow: var(--fm-shadow-lg, 0 20px 40px rgba(17, 27, 134, 0.12)) !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    font-family: var(--fm-font, 'Plus Jakarta Sans', -apple-system, sans-serif) !important;
}

/* Inline dropdown mode (default for desktop) */
.iti--inline-dropdown .iti__dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 360px !important;
    margin-top: 4px !important;
}

/* Fullscreen popup mode (mobile) */
.iti--fullscreen-popup .iti__dropdown-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
}

.iti__dropdown-content .iti__search-input {
    width: 100% !important;
    padding: 14px var(--fm-space-2, 16px) !important;
    border: none !important;
    border-bottom: 1px solid var(--fm-border, #E2E8F0) !important;
    font-size: var(--fm-text-md, 16px) !important;
    font-weight: 500 !important;
    color: var(--fm-text-heading, #0F172A) !important;
    background: var(--fm-gray-50, #F8FAFC) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 16px 16px 0 0 !important;
    box-sizing: border-box !important;
}

.iti__dropdown-content .iti__search-input:focus {
    background: var(--fm-white, #FFFFFF) !important;
}

.iti__dropdown-content .iti__country-list {
    margin: 0 !important;
    padding: 8px !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    list-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.iti__dropdown-content .iti__country {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    font-size: var(--fm-text-sm, 14px) !important;
    font-weight: 500 !important;
    color: var(--fm-text-heading, #0F172A) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

.iti__dropdown-content .iti__country:hover,
.iti__dropdown-content .iti__country.iti__highlight {
    background: var(--fm-gray-100, #F1F5F9) !important;
}

.iti__dropdown-content .iti__country.iti__active {
    background: rgba(17, 27, 134, 0.08) !important;
    color: var(--fm-primary, #111B86) !important;
    font-weight: 600 !important;
}

.iti__dropdown-content .iti__flag-box {
    display: inline-flex !important;
    align-items: center !important;
    width: 24px !important;
    flex-shrink: 0 !important;
}

.iti__dropdown-content .iti__country-name {
    margin-left: 10px !important;
    flex: 1 !important;
}

.iti__dropdown-content .iti__dial-code {
    color: var(--fm-text-body, #475569) !important;
    font-weight: 600 !important;
    margin-left: 8px !important;
}

.iti__dropdown-content .iti__divider {
    border-bottom: 1px solid var(--fm-border, #E2E8F0) !important;
    margin: 8px 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   RESPONSIVE - Same breakpoint as Dashboard
   ========================================================================== */

@media (max-width: 520px) {
    .fm-popup-container {
        padding: var(--fm-space-3, 24px) var(--fm-space-2, 16px) !important;
    }

    .fm-popup-tabs {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .fm-popup-tab {
        flex: 1 !important;
        text-align: center !important;
        padding: 10px 12px !important;
    }

    .fm-popup-close:hover {
        transform: none !important;
    }

    /* Phone input responsive adjustments */
    .fm-popup-field--phone .iti,
    .fm-dashboard-field--phone .iti {
        --fm-iti-prefix-width: 108px;
    }

    .fm-popup-field--phone .iti input[type="tel"],
    .fm-dashboard-field--phone .iti input[type="tel"] {
        font-size: 15px !important;
    }

    .fm-popup-field--phone .iti__selected-flag,
    .fm-dashboard-field--phone .iti__selected-flag {
        padding: 0 8px 0 10px !important;
    }

    .fm-popup-field--phone .iti__selected-dial-code,
    .fm-dashboard-field--phone .iti__selected-dial-code {
        font-size: 14px !important;
    }

    /* Centered dropdown on mobile */
    .iti--container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        background: rgba(15, 23, 42, 0.4) !important;
        backdrop-filter: blur(4px) !important;
    }

    .iti__dropdown-content {
        position: relative !important;
        max-height: 80vh !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    }

    .iti__country-list {
        max-height: 50vh !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fm-popup-container {
        animation: none !important;
    }

    .fm-popup-close:hover,
    .fm-popup-submit:hover:not(:disabled) {
        transform: none !important;
    }
}