/* ============================================================
   intl-tel-input — QrBite dark-theme overrides
   Loaded GLOBALLY (the country dropdown renders outside the
   component's scope, so isolation-scoped CSS would miss it).
   ============================================================ */

/* Wrapper — neutralise the library's default font/colour.
   IMPORTANT:
   - width:100% + box-sizing:border-box → matches sibling field widths
   - display:block + line-height:0 → kills the inline-block baseline gap that
     was making the phone field render ~3px higher than a plain <input> on the
     same flex row (the inner <input> is the only thing with real height). */
.iti {
    font-family: 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
    width: 100%;
    direction: ltr; /* phone numbers always LTR */
    box-sizing: border-box;
    display: block;
    line-height: 0;
    vertical-align: top;
}

/* Reset line-height on the inner input so text renders normally */
.iti input[type="tel"],
.iti input[type="text"] { line-height: normal; }

/* The <input> inside .iti — match other text inputs in the design system. */
.iti input[type="tel"],
.iti input[type="text"] {
    width: 100%;
    height: 2.75rem;
    padding: 0 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.625rem;
    color: #fff;
    font-size: 0.875rem;
    font-family: 'Manrope', sans-serif;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.iti input[type="tel"]::placeholder,
.iti input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.3); }

.iti input[type="tel"]:focus,
.iti input[type="text"]:focus {
    border-color: #f58524;
    box-shadow: 0 0 0 3px rgba(245, 133, 36, 0.18);
    background: rgba(255, 255, 255, 0.07);
}

.iti input[type="tel"]:disabled,
.iti input[type="text"]:disabled { opacity: 0.55; cursor: not-allowed; }

/* Error state when wrapped in a .has-error parent */
.has-error .iti input[type="tel"],
.has-error .iti input[type="text"] {
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(248, 113, 113, 0.06);
}
.has-error .iti input[type="tel"]:focus,
.has-error .iti input[type="text"]:focus {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
}

/* -----------------------------------------------------------------
   Flag + dial-code chip.

   The chip is positioned ABSOLUTELY on top of the input's left edge.
   We deliberately give it NO background and NO visible divider, so the
   field looks like a single unified pill that matches the email field
   beside it. The flag and "+962" text are the only visible affordances
   that hint the area is interactive.
   ----------------------------------------------------------------- */
.iti__flag-container { background: transparent; }

.iti__selected-flag {
    background: transparent !important;
    border-right: none;                   /* no divider — unified pill look */
    border-radius: 0.625rem 0 0 0.625rem; /* match left side of input */
    padding: 0 0.5rem 0 0.75rem;
    outline: none;
    height: 2.75rem;                      /* exactly match input height */
}

.iti__selected-flag:hover,
.iti__selected-flag:focus { background: rgba(255, 255, 255, 0.06) !important; }

/* Separate dial-code chip text — give it visible breathing room from the flag */
.iti--separate-dial-code .iti__selected-dial-code {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.8125rem;
    margin-left: 0.45rem;
}

/* Down arrow */
.iti__arrow {
    border-top-color: rgba(255, 255, 255, 0.45);
    margin-left: 0.35rem;
}
.iti__arrow--up { border-bottom-color: rgba(255, 255, 255, 0.45); border-top-color: transparent; }

/*
 * Pad the input so its TEXT starts past the chip's right edge, PLUS a
 * comfortable gap so the dial code and phone number visually breathe.
 *
 * Chip rendered width for "+962" (3 digits):
 *   12px (left pad) + 18px (flag) + 7px (gap) + ~28px (dial digits)
 *   + 5.5px (gap to arrow) + 5px (arrow) + 8px (right pad)  ≈ 84px
 * Plus 8px gap-to-number-text  → padding-left: 92px.
 */
.iti--separate-dial-code input[type="tel"],
.iti--separate-dial-code input[type="text"] {
    padding-left: 92px !important;
}

/* 4-digit dial codes (e.g. +1-242 Bahamas) need a bit more room */
.iti--separate-dial-code[data-dial-code-length="4"] input[type="tel"],
.iti--separate-dial-code[data-dial-code-length="4"] input[type="text"] {
    padding-left: 100px !important;
}

/* 2-digit dial codes (e.g. +1, +7, +44, +20) can use less */
.iti--separate-dial-code[data-dial-code-length="1"] input[type="tel"],
.iti--separate-dial-code[data-dial-code-length="1"] input[type="text"],
.iti--separate-dial-code[data-dial-code-length="2"] input[type="tel"],
.iti--separate-dial-code[data-dial-code-length="2"] input[type="text"] {
    padding-left: 82px !important;
}

/* ----- Country dropdown panel ----- */
.iti__country-list {
    background: rgba(20, 20, 20, 0.98) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    max-height: 280px;
    overflow-y: auto;
    color: #fff;
    z-index: 10000;
    padding: 0.25rem;
    margin-top: 0.25rem;
}

.iti__country {
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    transition: background 0.12s;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background: rgba(245, 133, 36, 0.15) !important;
    color: #fff;
}

.iti__country-name { color: rgba(255, 255, 255, 0.9); margin-left: 0.5rem; }
.iti__dial-code { color: rgba(255, 255, 255, 0.45); margin-left: 0.5rem; }

.iti__divider {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
}

/* ----- Search box (when enabled) ----- */
.iti__search-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0.5rem !important;
    color: #fff !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.25rem 0.5rem !important;
}
.iti__search-input:focus { border-color: #f58524 !important; }

/* ----- RTL ----- */
[dir="rtl"] .iti { direction: ltr; } /* keep input itself LTR regardless of page */
[dir="rtl"] .iti--separate-dial-code input[type="tel"],
[dir="rtl"] .iti--separate-dial-code input[type="text"] {
    text-align: left;
}

/* ----- Light theme (if page uses data-theme="light") ----- */
:root[data-theme="light"] .iti input[type="tel"],
:root[data-theme="light"] .iti input[type="text"] {
    background: #fff;
    color: #111;
    border-color: rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .iti input[type="tel"]::placeholder { color: rgba(0, 0, 0, 0.35); }
:root[data-theme="light"] .iti__selected-flag { background: rgba(0, 0, 0, 0.03) !important; border-right-color: rgba(0, 0, 0, 0.08); }
:root[data-theme="light"] .iti--separate-dial-code .iti__selected-dial-code { color: #444; }
:root[data-theme="light"] .iti__country-list {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #111;
}
:root[data-theme="light"] .iti__country { color: #333; }
:root[data-theme="light"] .iti__country:hover,
:root[data-theme="light"] .iti__country.iti__highlight { background: rgba(245, 133, 36, 0.12) !important; color: #111; }
:root[data-theme="light"] .iti__country-name { color: #222; }
:root[data-theme="light"] .iti__dial-code { color: #777; }