/* ==========================================================================
   Premium Contact Form Styles (Awwwards-level Apple × Stripe × Linear)
   Refactored for Flawless Alignment, Accessibility & Responsiveness
   ========================================================================== */

:root {
    /* Colors - Enhanced for Accessibility & Contrast */
    --bg-luxury: #FCFBF8;
    --bg-white: #FFFFFF;
    --border-minimal: #E5E5EA;
    /* Apple-like subtle border */
    --brand-orange: #FF7A1A;
    --brand-orange-light: #FF9E45;
    --brand-orange-glow: rgba(255, 122, 26, 0.15);
    --text-dark: #1D1D1F;
    /* Apple typography black */
    --text-muted: #6E6E73;
    /* Apple typography gray for better contrast */
    --error-color: #FF3B30;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.9);

    /* Typography */
    --font-premium: 'SF Pro Display', 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Global Dimensions */
    --input-height: 68px;
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --padding-sides: 24px;

    /* Transitions */
    --transition-spring: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   0. GLOBAL CONFLICT RESETS
   The site-wide style.css (.form input, .iti__search-input, etc.) applies
   dark-theme variables, 100px border-radius, and margin:10px on iti elements.
   These resets neutralise every conflicting rule inside .contact-premium-page
   without touching style.css (which is shared across all pages).
   ========================================================================== */

/*
   NOTE: .form input overrides (background, border-radius, padding, line-height)
   are handled purely by cascade — contact-premium.css loads after style.css, so
   same-specificity rules here win automatically. We do NOT add a generic reset
   block here because a higher-specificity reset (e.g. .contact-premium-page .form input)
   would BEAT the more-specific section-4/6 rules and set padding:0 on every input.
*/

/* Neutralise dark-theme .iti overrides from style.css */
.contact-premium-page .iti .iti__selected-flag {
    background-color: transparent !important;
    border-radius: 0 !important;
    height: auto !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    padding: 0 !important;
    border: none !important;
}

/* Neutralise dark-theme country list from style.css */
.contact-premium-page .iti__country-list {
    background-color: transparent;
    color: var(--text-dark);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Neutralise dark-theme search-input margin/width from style.css */
.contact-premium-page .iti__search-input {
    background-color: transparent;
    color: var(--text-dark);
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 !important;               /* kill the 10px global margin */
    width: 100% !important;             /* overridden again in section 5 */
    box-sizing: border-box !important;
}

/* ==========================================================================
   1. BASE & BACKGROUND
   ========================================================================== */
.contact-premium-page {
    background-color: var(--bg-luxury) !important;
    font-family: var(--font-premium) !important;
    position: relative;
    overflow-x: hidden;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mesh-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--bg-luxury);
}

.grid-texture {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 1;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    mix-blend-mode: normal;
    animation: floatBlobs 25s infinite alternate ease-in-out;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: var(--brand-orange);
    top: -10%;
    right: -5%;
}

.blob-2 {
    width: 500px;
    height: 500px;
    background: #FFA866;
    bottom: 5%;
    left: -5%;
    animation-delay: -5s;
}

.blob-3 {
    width: 700px;
    height: 700px;
    background: #FFD07A;
    top: 30%;
    left: 35%;
    animation-delay: -10s;
}

@keyframes floatBlobs {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, -60px) scale(1.1);
    }

    100% {
        transform: translate(-30px, 40px) scale(0.9);
    }
}

.ambient-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle at 50% 50%, var(--brand-orange-glow) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.premium-contact-section {
    position: relative;
    z-index: 2;
    padding: 120px 24px;
    max-width: 1248px;
    /* 1200px + padding */
    margin: 0 auto;
}

.premium-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    /* Perfect golden-like ratio */
    gap: 80px;
    align-items: start;
}

/* ==========================================================================
   3. TYPOGRAPHY & LEFT INFO COLUMN
   ========================================================================== */
.premium-info-col {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
}

.sub-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 122, 26, 0.1);
    border: 1px solid rgba(255, 122, 26, 0.2);
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--brand-orange);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 24px;
    align-self: flex-start;
}

.premium-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-dark);
    margin: 0 0 24px 0;
}

.premium-title span {
    position: relative;
    display: inline-block;
}

.premium-title span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-light), var(--brand-orange));
    background-size: 200% auto;
    border-radius: 3px;
    animation: gradientShift 4s linear infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.premium-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 48px 0;
    max-width: 90%;
}

/* Contact Cards */
.premium-info-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.premium-info-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
    transition: var(--transition-spring);
    cursor: default;
}

.premium-info-card:hover {
    transform: translateY(-4px);
    background: var(--bg-white);
    border-color: rgba(255, 122, 26, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 122, 26, 0.1);
}

.premium-info-card .icon-box {
    width: 52px;
    height: 52px;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--brand-orange);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    transition: var(--transition-spring);
}

.premium-info-card:hover .icon-box {
    background: var(--brand-orange);
    color: var(--bg-white);
    transform: scale(1.05);
}

.premium-info-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.premium-info-card .card-content span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.premium-info-card .card-content h5 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   4. RIGHT FORM COLUMN
   ========================================================================== */
.premium-form-container {
    position: relative;
    width: 100%;
}

.premium-form-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 48px;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.06),
        0 12px 24px rgba(0, 0, 0, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

/* Form Grid */
.premium-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.premium-form-group {
    position: relative;
    width: 100%;
    height: var(--input-height);
}

/* Inputs & Textarea Base Styles */
.premium-form-group input,
.premium-textarea-group textarea,
.custom-dropdown-trigger {
    width: 100%;
    height: var(--input-height);
    border-radius: var(--radius-lg);
    border: 1px solid #ff7f00;
    background-color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    font-family: var(--font-premium);
    font-weight: 500;
    color: var(--text-dark);
    outline: none;
    /* Override style.css line-height: 21px that misaligns text vertically */
    line-height: 1;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
    transition: var(--transition-spring);
    box-sizing: border-box;
}

.premium-form-group input {
    padding: 24px var(--padding-sides) 8px 56px;
}

.premium-textarea-group textarea {
    padding: 26px var(--padding-sides) 16px 56px;
    min-height: 160px;
    max-height: 320px;
    resize: vertical;
}

/* Floating Labels */
.premium-form-group label,
.premium-textarea-group label {
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
    transition: var(--transition-spring);
    transform-origin: left top;
    white-space: nowrap;
    z-index: 3;
}

.premium-textarea-group label {
    top: 26px;
    /* Align with input text start */
    transform: none;
}

/* Field Icons */
.premium-form-group .field-icon,
.premium-textarea-group .field-icon {
    position: absolute;
    left: var(--padding-sides);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.25rem;
    pointer-events: none;
    transition: var(--transition-fast);
    z-index: 3;
}

.premium-textarea-group .field-icon {
    top: 26px;
    transform: none;
}

/* Hover state — subtle orange border on all interactive fields */
.premium-form-group input:hover:not(:focus),
.premium-textarea-group textarea:hover:not(:focus),
.custom-dropdown-trigger:hover:not(.active) {
    border-color: rgba(255, 122, 26, 0.35);
}

/* Focus and Filled States */
.premium-form-group input:focus,
.premium-textarea-group textarea:focus,
.custom-dropdown-trigger:focus,
.custom-dropdown-trigger:focus-visible,
.custom-dropdown-trigger.active {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px var(--brand-orange-glow), inset 0 2px 4px rgba(0, 0, 0, 0.01);
    background-color: var(--bg-white);
}

.premium-form-group:focus-within .field-icon,
.premium-textarea-group:focus-within .field-icon,
.custom-dropdown.active .trigger-icon {
    color: var(--brand-orange);
}

/* Float Label Up Logic */
.premium-form-group input:focus~label,
.premium-form-group input:not(:placeholder-shown)~label,
.premium-form-group:has(input:focus) label,
.premium-form-group:has(input:not(:placeholder-shown)) label {
    transform: translateY(-145%) scale(0.75);
    color: var(--brand-orange);
}

.premium-textarea-group textarea:focus~label,
.premium-textarea-group textarea:not(:placeholder-shown)~label {
    transform: translateY(-16px) scale(0.75);
    color: var(--brand-orange);
}

/* ==========================================================================
   5. PHONE FIELD — intl-tel-input v24 COMPLETE OVERRIDES
   All selectors scoped under .contact-premium-page to prevent global bleed.

   v24 class map:
     .iti__country-container  = flag button wrapper  (was .iti__flag-container)
     .iti__selected-country   = the flag <button>    (was .iti__selected-flag)
     .iti__dropdown-content   = outer dropdown shell (wraps search + list)
     .iti__search-input       = search <input>       (sibling of country-list)
     .iti__country-list       = scrollable <ul>
   ========================================================================== */

/* ── Phone group: hide redundant icon, shift label ─────────────────────── */
.premium-form-group.phone-group .phone-input-icon {
    display: none !important;
}

.premium-form-group.phone-group label {
    left: 104px !important;
}

/* ── ITI wrapper ─────────────────────────────────────────────────────────── */
.contact-premium-page .iti {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

/* ── Tel input
   Override global style.css rules:
   - background-color: var(--secondary)  → white
   - border-radius: 100px               → var(--radius-lg)
   - padding: 20px 30px                 → premium values
   - line-height: 21px                  → 1 (prevents vertical misalignment)
   - box-shadow: none on focus          → orange ring
   ─────────────────────────────────────────────────────────────────────── */
.contact-premium-page .iti .iti__tel-input {
    padding: 24px 24px 8px 104px !important;
    height: var(--input-height) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #ff7f00 !important;
    border-radius: var(--radius-lg) !important;
    font-size: 16px !important;
    font-family: var(--font-premium) !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
    transition: var(--transition-spring) !important;
    margin: 0 !important;
}

.contact-premium-page .iti .iti__tel-input:focus {
    border-color: var(--brand-orange) !important;
    background-color: var(--bg-white) !important;
    box-shadow: 0 0 0 4px var(--brand-orange-glow), inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

.contact-premium-page .iti .iti__tel-input:hover:not(:focus) {
    border-color: rgba(255, 122, 26, 0.3) !important;
}

/* ── Country container (flag button wrapper) ─────────────────────────────── */
.contact-premium-page .iti__country-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    z-index: 2 !important;
}

/* ── Selected country button ─────────────────────────────────────────────── */
.contact-premium-page .iti__selected-country {
    position: relative !important;
    height: 44px !important;
    width: 68px !important;
    border-radius: var(--radius-sm) !important;
    background-color: #F5F5F7 !important;
    border: 1px solid var(--border-minimal) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease !important;
    overflow: visible !important;
    /* Reset library text/font inheritance that may conflict */
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
}

.contact-premium-page .iti__selected-country:hover,
.contact-premium-page .iti__selected-country:focus-visible {
    border-color: rgba(255, 122, 26, 0.4) !important;
    background-color: var(--bg-white) !important;
    box-shadow: 0 2px 8px rgba(255, 122, 26, 0.12) !important;
}

/* Vertical divider between flag button and input text */
.contact-premium-page .iti__selected-country::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: var(--border-minimal);
    pointer-events: none;
}

/* ── Primary content inside flag button (flag + optional dial code) ───────── */
.contact-premium-page .iti__selected-country-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 6px !important;
    gap: 5px !important;
}

/* ── Flag sprite ─────────────────────────────────────────────────────────── */
.contact-premium-page .iti__flag {
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    flex-shrink: 0 !important;
}

/* ── Arrow ───────────────────────────────────────────────────────────────── */
.contact-premium-page .iti__arrow {
    border-top-color: var(--text-muted) !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    transition: border-color 200ms ease !important;
}

.contact-premium-page .iti__arrow--up {
    border-top-color: transparent !important;
    border-bottom-color: var(--brand-orange) !important;
}

/* ── Dropdown shell (.iti__dropdown-content)
   In v24 inline mode (.iti--inline-dropdown), the dropdown-content is
   positioned absolute directly below the .iti wrapper. We override its
   default minimal styling with premium glassmorphism.
   Using padding on the shell (not margin on children) avoids the overflow
   bug caused by style.css's `margin: 10px` on .iti__search-input.

   CRITICAL: Do NOT use display:flex !important here — it would override
   .iti__hide { display:none } and keep the dropdown always visible.
   Instead we set the hidden state explicitly below.
   ─────────────────────────────────────────────────────────────────────── */
.contact-premium-page .iti--inline-dropdown .iti__dropdown-content {
    /* Positioning */
    left: 0 !important;
    width: 100% !important;
    min-width: 260px !important;
    max-width: min(100vw, 440px) !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    /* Layout — flex column keeps search fixed, list scrolls.
       No !important so the library's .iti__hide can still set display:none */
    display: flex;
    flex-direction: column !important;
    /* Pad the shell so children use width:100% safely */
    padding: 8px !important;
    gap: 4px !important;
    overflow: hidden !important;
    /* Decoration */
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(225, 225, 230, 0.9) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 20px 60px rgba(0, 0, 0, 0.12) !important;
    z-index: 1000 !important;
}

/* Guarantee .iti__hide always hides the dropdown (beats any display rule above) */
.contact-premium-page .iti__dropdown-content.iti__hide {
    display: none !important;
}

/* ── Search input
   ROOT CAUSE FIX:
   style.css applies `margin: 10px !important; width: calc(100%-20px) !important`
   contact-premium.css previously set `width: 100% !important` which overrode
   the calc() width but NOT the left/right margins → 20 px of overflow.
   Fix: reset all margins to 0; use padding on the parent shell instead.
   ─────────────────────────────────────────────────────────────────────── */
.contact-premium-page .iti__search-input {
    /* CRITICAL — zero out the global margin that causes overflow */
    margin: 0 !important;
    /* CRITICAL — 100% of the *padded* content area of the shell (no overflow) */
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    /* Dimensions */
    height: 44px !important;
    padding: 0 14px !important;
    /* Typography — reset global line-height override */
    font-family: var(--font-premium) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    line-height: 44px !important;
    /* Appearance — reset global background/border */
    background-color: #F5F5F7 !important;
    border: 1.5px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    outline: none !important;
    display: block !important;
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}

.contact-premium-page .iti__search-input::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    line-height: 44px !important;
}

.contact-premium-page .iti__search-input:focus {
    background-color: var(--bg-white) !important;
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 3px var(--brand-orange-glow) !important;
}

/* Separator between search and list */
.contact-premium-page .iti__search-input + .iti__country-list {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding-top: 4px !important;
}

/* ── Country list (scrollable) ───────────────────────────────────────────── */
.contact-premium-page .iti__country-list {
    /* Reset global overrides */
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Scroll */
    max-height: 220px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    /* Custom thin scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important;
}

.contact-premium-page .iti__country-list::-webkit-scrollbar {
    width: 4px;
}

.contact-premium-page .iti__country-list::-webkit-scrollbar-track {
    background: transparent;
}

.contact-premium-page .iti__country-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

/* ── Individual country items ────────────────────────────────────────────── */
.contact-premium-page .iti__country {
    border-radius: var(--radius-sm) !important;
    padding: 9px 12px !important;
    font-family: var(--font-premium) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background-color 120ms ease, color 120ms ease !important;
}

.contact-premium-page .iti__country:hover,
.contact-premium-page .iti__country.iti__highlight {
    background-color: rgba(255, 122, 26, 0.07) !important;
    color: var(--brand-orange) !important;
}

.contact-premium-page .iti__country:focus {
    background-color: rgba(255, 122, 26, 0.1) !important;
    color: var(--brand-orange) !important;
}

/* Flag inside list items */
.contact-premium-page .iti__country-list .iti__flag {
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* Country name */
.contact-premium-page .iti__country-name {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-right: 8px !important;
}

/* Dial code */
.contact-premium-page .iti__dial-code {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    flex-shrink: 0 !important;
}

.contact-premium-page .iti__country:hover .iti__dial-code,
.contact-premium-page .iti__country.iti__highlight .iti__dial-code {
    color: inherit !important;
    opacity: 0.75 !important;
}

/* Divider between preferred and all countries */
.contact-premium-page .iti__divider {
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    margin: 4px 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   6. CUSTOM SERVICE SELECTOR
   ========================================================================== */
.custom-dropdown {
    position: relative;
    width: 100%;
    height: 100%;
}

.custom-dropdown-trigger {
    padding: 0 var(--padding-sides) 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.custom-dropdown-trigger .trigger-icon {
    position: absolute;
    left: var(--padding-sides);
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: var(--transition-fast);
}

.custom-dropdown-trigger .trigger-label {
    font-size: 16px;
    color: var(--text-muted);
    transition: var(--transition-fast);
    flex-grow: 1;
}

.custom-dropdown-trigger.selected .trigger-label {
    color: var(--text-dark);
}

.custom-dropdown-trigger .chevron-icon {
    color: var(--text-muted);
    font-size: 1.2rem;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-dropdown-trigger.active .chevron-icon {
    transform: rotate(180deg);
    color: var(--brand-orange);
}

/* Service Popup */
.custom-dropdown-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 12px;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-spring);
}

.custom-dropdown-popup.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.custom-dropdown-popup .search-wrapper {
    position: relative;
    margin-bottom: 12px;
}

.custom-dropdown-popup .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.15rem;
}

.custom-dropdown-popup .dropdown-search {
    width: 100%;
    height: 48px;
    background-color: #F5F5F7;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0 16px 0 44px;
    font-size: 15px;
    outline: none;
    font-family: var(--font-premium);
    transition: var(--transition-fast);
}

.custom-dropdown-popup .dropdown-search:focus {
    background-color: var(--bg-white);
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px var(--brand-orange-glow);
}

.custom-dropdown-popup .dropdown-options {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.custom-dropdown-popup .dropdown-option {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: var(--transition-fast);
}

.custom-dropdown-popup .dropdown-option:hover {
    background-color: rgba(255, 122, 26, 0.08);
    color: var(--brand-orange);
}

.custom-dropdown-popup .dropdown-option.selected {
    background-color: var(--brand-orange);
    color: white;
}

/* ==========================================================================
   7. TEXTAREA & CHAR COUNTER
   ========================================================================== */
.premium-textarea-group {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}

.char-counter-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    padding-right: 16px;
}

.char-counter {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   8. ERROR STATES & ALERTS
   ========================================================================== */
.error-feedback {
    position: absolute;
    bottom: -22px;
    left: 16px;
    color: var(--error-color) !important;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
}

.premium-form-group .error-border,
.premium-textarea-group textarea.error-border,
.custom-dropdown-trigger.error-border {
    border-color: var(--error-color) !important;
    background-color: rgba(255, 59, 48, 0.04) !important;
}

/* Phone input error: higher specificity needed to beat .iti .iti__tel-input */
.contact-premium-page .iti .iti__tel-input.error-border {
    border-color: var(--error-color) !important;
    background-color: rgba(255, 59, 48, 0.04) !important;
}

.premium-form-group .error-border:focus-within,
.premium-textarea-group textarea.error-border:focus,
.contact-premium-page .iti .iti__tel-input.error-border:focus {
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.15) !important;
}

/* Keep hidden state hidden even when .alert styles appear later in the cascade */
.contact-premium-page .hidden,
.contact-premium-page .alert.hidden,
.contact-premium-page .alert.success.hidden,
.contact-premium-page .alert.error.hidden {
    display: none !important;
}

.alert {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    font-size: 0.95rem;
    animation: slideDownFade 400ms ease forwards;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.alert.success {
    background-color: rgba(52, 199, 89, 0.1);
    color: #248A3D;
    border: 1px solid rgba(52, 199, 89, 0.2);
}

.alert.error {
    background-color: rgba(255, 59, 48, 0.1);
    color: #C93429;
    border: 1px solid rgba(255, 59, 48, 0.2);
}

.alert .check-icon,
.alert .cross-icon {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

body.lightmode .alert.success,
body.lightmode .alert.error,
body.lightmode .alert.success p,
body.lightmode .alert.error p,
body.lightmode .alert.success .check-icon,
body.lightmode .alert.success .cross-icon,
body.lightmode .alert.error .check-icon,
body.lightmode .alert.error .cross-icon {
    color: #000000 !important;
}

/* ==========================================================================
   9. MAGNETIC CTA BUTTON
   ========================================================================== */
.premium-submit-container {
    display: flex;
    justify-content: flex-start;
}

.magnetic-wrap {
    display: inline-block;
    position: relative;
    /* Mobile full width handled in media queries */
}

.premium-btn-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-light) 100%);
    border: none;
    border-radius: 999px;
    color: white;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 20px 48px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(255, 122, 26, 0.3);
    transition: var(--transition-spring);
    outline: none;
    overflow: hidden;
    z-index: 1;
}

.premium-btn-submit .arrow-icon {
    font-size: 1.2rem;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-btn-submit:hover,
.premium-btn-submit:focus-visible {
    box-shadow: 0 15px 32px rgba(255, 122, 26, 0.4);
    transform: translateY(-2px);
}

.premium-btn-submit:hover .arrow-icon {
    transform: translateX(4px);
}

.premium-btn-submit .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleAnim 600ms linear;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================================================
   10. RESPONSIVE DESIGN (FLAWLESS BREAKPOINTS)
   ========================================================================== */

/* Laptop (Max 1200px) */
@media (max-width: 1200px) {
    .premium-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

    .premium-title {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
    }
}

/* Tablet (Max 991px) */
@media (max-width: 991px) {
    .premium-contact-section {
        padding: 80px 24px;
    }

    .premium-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .premium-info-col {
        position: relative;
        top: 0;
        align-items: center;
        text-align: center;
    }

    .sub-header-pill {
        align-self: center;
    }

    .premium-subtitle {
        margin: 0 auto 32px auto;
    }

    .premium-info-cards {
        flex-direction: row;
        width: 100%;
    }

    .premium-info-card {
        flex: 1;
        flex-direction: column;
        text-align: center;
        padding: 24px;
        gap: 12px;
    }
}

/* Mobile (Max 767px) */
@media (max-width: 767px) {
    .premium-contact-section {
        padding: 60px 16px;
    }

    .premium-form-card {
        padding: 32px 20px;
        border-radius: var(--radius-lg);
    }

    .premium-info-cards {
        flex-direction: column;
    }

    .premium-info-card {
        flex-direction: row;
        text-align: left;
    }

    .premium-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .premium-submit-container,
    .magnetic-wrap,
    .premium-btn-submit {
        width: 100%;
    }
}

/* Small Mobile (Max 390px) */
@media (max-width: 390px) {
    .premium-title {
        font-size: 2.25rem;
    }

    .premium-form-card {
        padding: 24px 16px;
    }

    .premium-form-group input,
    .premium-textarea-group textarea,
    .custom-dropdown-trigger {
        font-size: 15px;
    }

    .premium-form-group input {
        padding: 24px 16px 8px 48px;
    }

    .premium-form-group label,
    .premium-textarea-group label {
        left: 48px;
        font-size: 14px;
    }

    .premium-form-group .field-icon,
    .premium-textarea-group .field-icon,
    .custom-dropdown-trigger .trigger-icon {
        left: 16px;
    }

    .custom-dropdown-trigger {
        padding: 0 16px 0 48px;
    }

    .premium-form-group.phone-group input,
    .contact-premium-page .iti .iti__tel-input {
        padding-left: 92px !important;
    }

    .premium-form-group.phone-group label {
        left: 92px !important;
    }

    /* Shrink flag button on tiny screens */
    .contact-premium-page .iti__selected-country {
        width: 56px !important;
    }

    /* Dropdown must never exceed the viewport on mobile */
    .contact-premium-page .iti--inline-dropdown .iti__dropdown-content {
        max-width: calc(100vw - 32px) !important;
        left: 0 !important;
    }
}

/* ==========================================================================
   11. DARK MODE
   The site uses body.lightmode for light mode; default (no class) = dark mode.
   All rules here are scoped with body:not(.lightmode) so they only apply
   when the toggle is in dark state — matching every other page on the site.
   ========================================================================== */

/* ── CSS custom-property overrides for the dark theme ──────────────────── */
body:not(.lightmode) .contact-premium-page {
    --bg-luxury:       #0C0C12;
    --bg-white:        #16161E;
    --border-minimal:  rgba(255, 255, 255, 0.1);
    --text-dark:       #F0F0F5;
    --text-muted:      #8E8E99;
    --glass-bg:        rgba(22, 22, 30, 0.75);
    --glass-border:    rgba(255, 255, 255, 0.07);
}

/* ── Page background ─────────────────────────────────────────────────────── */
body:not(.lightmode) .contact-premium-page {
    background-color: #0C0C12 !important;
    color: #F0F0F5;
}

body:not(.lightmode) .mesh-background {
    background: #0C0C12;
}

body:not(.lightmode) .grid-texture {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
}

/* Blobs are softer and cooler in dark mode */
body:not(.lightmode) .blob-1 { opacity: 0.08; }
body:not(.lightmode) .blob-2 { opacity: 0.06; background: #FF9A50; }
body:not(.lightmode) .blob-3 { opacity: 0.05; background: #FF7A1A; }

/* ── Typography ──────────────────────────────────────────────────────────── */
body:not(.lightmode) .premium-title {
    color: #F0F0F5;
}

body:not(.lightmode) .premium-subtitle {
    color: #8E8E99;
}

/* ── Info cards ──────────────────────────────────────────────────────────── */
body:not(.lightmode) .premium-info-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

body:not(.lightmode) .premium-info-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 122, 26, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

body:not(.lightmode) .premium-info-card .icon-box {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body:not(.lightmode) .premium-info-card:hover .icon-box {
    background: var(--brand-orange);
}

body:not(.lightmode) .premium-info-card .card-content span {
    color: #8E8E99;
}

body:not(.lightmode) .premium-info-card .card-content h5 {
    color: #F0F0F5;
}

/* ── Form card ───────────────────────────────────────────────────────────── */
body:not(.lightmode) .premium-form-card {
    background: rgba(18, 18, 26, 0.85);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 12px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

/* ── Form inputs & textarea ──────────────────────────────────────────────── */
body:not(.lightmode) .premium-form-group input,
body:not(.lightmode) .premium-textarea-group textarea {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #F0F0F5;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

body:not(.lightmode) .premium-form-group input::placeholder,
body:not(.lightmode) .premium-textarea-group textarea::placeholder {
    color: transparent;
}

body:not(.lightmode) .premium-form-group input:focus,
body:not(.lightmode) .premium-textarea-group textarea:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

body:not(.lightmode) .premium-form-group input:hover:not(:focus),
body:not(.lightmode) .premium-textarea-group textarea:hover:not(:focus),
body:not(.lightmode) .custom-dropdown-trigger:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.22);
}

/* ── Labels & icons ──────────────────────────────────────────────────────── */
body:not(.lightmode) .premium-form-group label,
body:not(.lightmode) .premium-textarea-group label {
    color: #8E8E99;
}

body:not(.lightmode) .premium-form-group .field-icon,
body:not(.lightmode) .premium-textarea-group .field-icon {
    color: #8E8E99;
}

/* ── Phone — tel input ───────────────────────────────────────────────────── */
body:not(.lightmode) .contact-premium-page .iti .iti__tel-input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #F0F0F5 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

body:not(.lightmode) .contact-premium-page .iti .iti__tel-input:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

body:not(.lightmode) .contact-premium-page .iti .iti__tel-input:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ── Phone — flag button ─────────────────────────────────────────────────── */
body:not(.lightmode) .contact-premium-page .iti__selected-country {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

body:not(.lightmode) .contact-premium-page .iti__selected-country:hover,
body:not(.lightmode) .contact-premium-page .iti__selected-country:focus-visible {
    background-color: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 122, 26, 0.4) !important;
}

body:not(.lightmode) .contact-premium-page .iti__selected-country::after {
    background-color: rgba(255, 255, 255, 0.12);
}

body:not(.lightmode) .contact-premium-page .iti__arrow {
    border-top-color: #8E8E99 !important;
}

/* ── Phone — country dropdown ────────────────────────────────────────────── */
body:not(.lightmode) .contact-premium-page .iti--inline-dropdown .iti__dropdown-content {
    background: rgba(18, 18, 28, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

body:not(.lightmode) .contact-premium-page .iti__search-input {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #F0F0F5 !important;
    border-color: transparent !important;
}

body:not(.lightmode) .contact-premium-page .iti__search-input::placeholder {
    color: #8E8E99 !important;
}

body:not(.lightmode) .contact-premium-page .iti__search-input:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.2) !important;
}

body:not(.lightmode) .contact-premium-page .iti__search-input + .iti__country-list {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body:not(.lightmode) .contact-premium-page .iti__country-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
}

body:not(.lightmode) .contact-premium-page .iti__country {
    color: #F0F0F5 !important;
}

body:not(.lightmode) .contact-premium-page .iti__country:hover,
body:not(.lightmode) .contact-premium-page .iti__country.iti__highlight {
    background-color: rgba(255, 122, 26, 0.12) !important;
    color: var(--brand-orange) !important;
}

body:not(.lightmode) .contact-premium-page .iti__dial-code {
    color: #8E8E99 !important;
}

body:not(.lightmode) .contact-premium-page .iti__divider {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Custom service dropdown ─────────────────────────────────────────────── */
body:not(.lightmode) .custom-dropdown-trigger {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #F0F0F5;
}

body:not(.lightmode) .custom-dropdown-trigger .trigger-label {
    color: #8E8E99;
}

body:not(.lightmode) .custom-dropdown-trigger.selected .trigger-label {
    color: #F0F0F5;
}

body:not(.lightmode) .custom-dropdown-trigger .trigger-icon,
body:not(.lightmode) .custom-dropdown-trigger .chevron-icon {
    color: #8E8E99;
}

body:not(.lightmode) .custom-dropdown-trigger:focus-visible,
body:not(.lightmode) .custom-dropdown-trigger.active {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.2);
}

body:not(.lightmode) .custom-dropdown-popup {
    background: rgba(18, 18, 28, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

body:not(.lightmode) .custom-dropdown-popup .search-icon {
    color: #8E8E99;
}

body:not(.lightmode) .custom-dropdown-popup .dropdown-search {
    background-color: rgba(255, 255, 255, 0.07);
    color: #F0F0F5;
}

body:not(.lightmode) .custom-dropdown-popup .dropdown-search:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.2);
}

body:not(.lightmode) .custom-dropdown-popup .dropdown-option {
    color: #F0F0F5;
}

body:not(.lightmode) .custom-dropdown-popup .dropdown-option:hover {
    background-color: rgba(255, 122, 26, 0.12);
    color: var(--brand-orange);
}

/* ── Char counter ────────────────────────────────────────────────────────── */
body:not(.lightmode) .char-counter {
    color: #8E8E99;
}

/* ── Alert messages in dark mode ─────────────────────────────────────────── */
body:not(.lightmode) .alert.success {
    background-color: rgba(52, 199, 89, 0.12);
    border-color: rgba(52, 199, 89, 0.25);
}

body:not(.lightmode) .alert.error {
    background-color: rgba(255, 59, 48, 0.12);
    border-color: rgba(255, 59, 48, 0.25);
}

body:not(.lightmode) .alert,
body:not(.lightmode) .alert p,
body:not(.lightmode) .alert .check-icon,
body:not(.lightmode) .alert .cross-icon {
    color: #FFFFFF !important;
}