/**
 * Popup Contact Form Styles — V3 "Distinctive / Floating Labels / Glow"
 * Clean white card, in-field labels, icon-prefixed inputs, soft focus glow,
 * gradient pill CTA, trust strip. Namespaced to avoid conflicts: vyom-*.
 *
 * NOTE: All field IDs / classes the validation JS depends on are preserved.
 */

/* ============================================
   OVERLAY
   ============================================ */
.vyom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    z-index: 2147483647;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.vyom-popup-overlay * {
    box-sizing: border-box;
}

.vyom-popup-overlay.vyom-popup-active {
    display: flex;
    animation: vyomFadeIn 0.3s ease;
}

/* Prevent body scroll when popup is active */
body.vyom-popup-no-scroll {
    overflow: hidden !important;
}

/* ============================================
   CONTAINER (white card)
   ============================================ */
.vyom-popup-container {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    width: clamp(320px, 94vw, 460px);
    max-width: 96%;
    border-radius: 12px;
    box-shadow:
        0 15px 45px -12px rgba(15, 23, 42, 0.25),
        0 8px 18px -6px rgba(37, 99, 235, 0.12);
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    line-height: 1.35;
    animation: vyomSlideUp 0.3s ease;
    max-height: 96vh;
    max-height: 96dvh;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ============================================
   CLOSE BUTTON (thin circle, top-right)
   ============================================ */
.vyom-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    z-index: 5;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vyom-popup-close:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.vyom-popup-close:active {
    transform: scale(0.95);
}

/* ============================================
   HEADER (eyebrow + headline + subtitle)
   ============================================ */
.vyom-popup-header {
    padding: 12px 18px 2px;
    background: #ffffff;
    flex-shrink: 0;
    /* Match the container's top corners so the header's solid white bg
       doesn't render a square rectangle over the rounded container edge.
       (overflow: hidden on the container is intentionally OFF so the
       iti country dropdown isn't clipped.) */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.vyom-popup-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.vyom-popup-eyebrow-rule {
    display: inline-block;
    width: 14px;
    height: 2px;
    background-color: #2563eb;
    border-radius: 2px;
}

.vyom-popup-eyebrow-text {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #2563eb;
    text-transform: uppercase;
}

.vyom-popup-title {
    margin: 0 0 4px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0b1220;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.vyom-popup-title-accent {
    color: #2563eb;
}

.vyom-popup-subtitle {
    margin: 0;
    font-size: 0.76rem;
    color: #475569;
    line-height: 1.45;
}

.vyom-popup-subtitle strong {
    color: #0f172a;
    font-weight: 700;
}

/* ============================================
   BODY
   ============================================ */
.vyom-popup-body {
    padding: 2px 18px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.vyom-popup-body::-webkit-scrollbar { width: 4px; }
.vyom-popup-body::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.vyom-popup-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.vyom-popup-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.vyom-popup-body { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }

/* ============================================
   FORM ROWS / GROUPS
   ============================================ */
.vyom-popup-body .vyom-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vyom-popup-body .vyom-form-row > .vyom-form-group {
    min-width: 0;
}

.vyom-popup-body .vyom-form-group {
    margin-bottom: 10px;
    margin-top: 16px;
    position: relative;
}

.vyom-popup-body .vyom-form-row > .vyom-form-group {
    margin-top: 16px;
    margin-bottom: 0;
}

/* First form-row sits directly under the header — no need for double top gap */
.vyom-popup-body > form > .vyom-form-row:first-child > .vyom-form-group {
    margin-top: 2px;
}

/* Keep generous top-gap on the message field, reCAPTCHA, and submit button
   groups even when other form-groups shrink at <820px. Stops the message
   error from bleeding into the service/phone field above on small screens. */
.vyom-popup-body .vyom-form-group:has(.vyom-field--message),
.vyom-popup-body .vyom-form-group.vyom-recaptcha-group,
.vyom-popup-body .vyom-form-group:has(.vyom-btn-submit) {
    margin-top: 16px;
}

.vyom-popup-body .vyom-recaptcha-group {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* ============================================
   FIELD CARD (icon + body)
   ============================================ */
.vyom-popup-body .vyom-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    min-height: 42px;
    position: relative;
}

.vyom-popup-body .vyom-field:hover {
    border-color: #cbd5e1;
}

.vyom-popup-body .vyom-field:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.vyom-popup-body .vyom-field-icon {
    flex-shrink: 0;
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.84rem;
    transition: color 0.18s ease;
}

.vyom-popup-body .vyom-field:focus-within .vyom-field-icon {
    color: #2563eb;
}

.vyom-popup-body .vyom-field-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.vyom-popup-body .vyom-field-label {
    display: block;
    margin: 0;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
    text-transform: uppercase;
    line-height: 1.1;
}

.vyom-popup-body .vyom-required {
    color: #2563eb;
    font-weight: 700;
}

/* ============================================
   INPUTS (transparent inside field card)
   ============================================ */
.vyom-popup-body .vyom-form-control {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 0.84rem;
    color: #0b1220;
    line-height: 1.35;
    font-family: inherit;
    min-height: 18px;
}

.vyom-popup-body .vyom-form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
    font-weight: 400;
}

/* Native select chevron hidden — we render our own */
.vyom-popup-body select.vyom-form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    cursor: pointer;
    padding-right: 18px;
}

/* Service field: chevron on the right */
.vyom-popup-body .vyom-field--service .vyom-field-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.75rem;
    pointer-events: none;
    transition: color 0.18s ease;
}

.vyom-popup-body .vyom-field--service:focus-within .vyom-field-chevron {
    color: #2563eb;
}

/* ============================================
   CUSTOM SERVICE DROPDOWN
   Native <select> is kept in the DOM for form submission and validation
   (JS adds .vyom-select-enhanced after building the custom UI). The
   custom button + menu match the popup theme: rounded, soft shadow,
   blue hover, smooth open animation.
   ============================================ */
.vyom-popup-body .vyom-field--service .vyom-field-chevron {
    transition: color 0.18s ease, transform 0.18s ease;
}

.vyom-popup-body .vyom-field--service.vyom-select-enhanced select.vyom-form-control {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.vyom-popup-body .vyom-custom-select__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 0.92rem;
    color: #0b1220;
    line-height: 1.4;
    min-height: 22px;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.vyom-popup-body .vyom-custom-select__trigger:focus {
    outline: none;
}

.vyom-popup-body .vyom-custom-select__value {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vyom-popup-body .vyom-custom-select__value[data-placeholder="true"] {
    color: #94a3b8;
}

.vyom-popup-body .vyom-custom-select__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.15),
                0 4px 10px -4px rgba(15, 23, 42, 0.06);
    padding: 4px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 15;
    list-style: none;
    margin: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.vyom-popup-body .vyom-field--service.vyom-select-open .vyom-custom-select__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.vyom-popup-body .vyom-custom-select__menu::-webkit-scrollbar { width: 4px; }
.vyom-popup-body .vyom-custom-select__menu::-webkit-scrollbar-track { background: transparent; }
.vyom-popup-body .vyom-custom-select__menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.vyom-popup-body .vyom-custom-select__menu::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.vyom-popup-body .vyom-custom-select__option {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #0b1220;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-weight: 500;
    user-select: none;
}

.vyom-popup-body .vyom-custom-select__option:hover,
.vyom-popup-body .vyom-custom-select__option.vyom-custom-select__option--active {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

.vyom-popup-body .vyom-custom-select__option--selected {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-weight: 600;
}

.vyom-popup-body .vyom-field--service.vyom-select-open .vyom-field-chevron {
    transform: translateY(-50%) rotate(180deg);
    color: #2563eb;
}

/* Message field: textarea sits multi-line, counter pinned bottom-right */
.vyom-popup-body .vyom-field--message {
    align-items: flex-start;
    padding-bottom: 28px;
}

.vyom-popup-body .vyom-field--message .vyom-field-icon {
    padding-top: 10px;
}

.vyom-popup-body textarea.vyom-form-control {
    resize: none;
    min-height: 50px;
    max-height: 100px;
    line-height: 1.35;
}

.vyom-popup-body .vyom-char-counter {
    position: absolute;
    right: 10px;
    bottom: 4px;
    font-size: 0.64rem;
    color: #94a3b8;
    font-weight: 500;
    pointer-events: none;
}

.vyom-popup-body .vyom-char-counter strong {
    color: #2563eb;
    font-weight: 700;
}

/* ============================================
   STATES — error / success on the input
   propagate to the parent field card
   ============================================ */
.vyom-popup-body .vyom-form-control.error {
    color: #0b1220;
}

.vyom-popup-body .vyom-field:has(.vyom-form-control.error) {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.vyom-popup-body .vyom-field:has(.vyom-form-control.error) .vyom-field-icon {
    color: #ef4444;
}

.vyom-popup-body .vyom-field:has(.vyom-form-control.success) {
    border-color: #10b981;
}

.vyom-popup-body .vyom-field:has(.vyom-form-control.success) .vyom-field-icon {
    color: #10b981;
}

/* ============================================
   ERROR MESSAGES
   Floating above the field card so they don't change layout height
   ============================================ */
.vyom-popup-body .vyom-error-message {
    display: none;
    position: absolute;
    bottom: calc(100% + 2px);
    left: 0;
    right: 0;
    color: #dc2626;
    font-size: clamp(0.64rem, 1.6vw, 0.72rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    z-index: 6;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vyom-popup-body .vyom-error-message::before {
    content: '\26A0  ';
    font-weight: 700;
    margin-right: 2px;
}

/* reCAPTCHA error sits inline below the widget */
.vyom-popup-body .vyom-recaptcha-group .vyom-error-message {
    position: static;
    margin-top: 6px;
    white-space: normal;
    text-align: center;
}

.vyom-popup-body .vyom-error-message-box {
    display: none;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 12px;
    color: #dc2626;
    margin-top: 10px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.4;
}

.vyom-popup-body .vyom-error-message-box::before {
    content: '\26A0 ';
    font-weight: 700;
    margin-right: 4px;
}

/* ============================================
   reCAPTCHA
   ============================================ */
.vyom-popup-body .g-recaptcha {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1);
    transform-origin: center top;
    width: 304px;
    max-width: 100%;
    min-height: 78px;
    margin: 0 auto;
    overflow: visible;
}

.vyom-popup-body .g-recaptcha > div { margin: 0 auto; }
.vyom-popup-body .g-recaptcha iframe { max-width: 100%; display: block; margin: 0 auto; }

/* ============================================
   SUBMIT BUTTON (full-width blue gradient pill)
   ============================================ */
.vyom-popup-body .vyom-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 14px;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.4);
    text-align: center;
    font-family: inherit;
    letter-spacing: -0.005em;
}

.vyom-popup-body .vyom-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px rgba(37, 99, 235, 0.5);
    filter: brightness(1.04);
}

.vyom-popup-body .vyom-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px -4px rgba(37, 99, 235, 0.35);
}

.vyom-popup-body .vyom-btn-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

.vyom-popup-body .vyom-btn-submit-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.64rem;
    transition: transform 0.2s ease;
}

.vyom-popup-body .vyom-btn-submit:hover .vyom-btn-submit-arrow {
    transform: translateX(2px);
}

/* ============================================
   TRUST STRIP
   ============================================ */
.vyom-popup-body .vyom-trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 500;
}

.vyom-popup-body .vyom-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.vyom-popup-body .vyom-trust-item .fa-lock {
    color: #94a3b8;
    font-size: 0.78rem;
}

.vyom-popup-body .vyom-trust-sep {
    color: #cbd5e1;
}

/* ============================================
   LOADING OVERLAY
   ============================================ */
.vyom-popup-body .vyom-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.94);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 0 0 18px 18px;
    backdrop-filter: blur(2px);
}

.vyom-popup-body .vyom-loading-overlay.vyom-loading-active {
    display: flex;
    animation: vyomFadeIn 0.2s ease;
}

.vyom-popup-body .vyom-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: vyomSpin 0.75s linear infinite;
}

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

.vyom-popup-body .vyom-loading-text {
    margin: 14px 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0b1220;
}

/* ============================================
   SUCCESS PANEL
   ============================================ */
.vyom-popup-body .vyom-success-panel {
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: vyomFadeIn 0.35s ease;
}

.vyom-popup-body .vyom-success-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 1rem;
    animation: vyomSuccessPulse 0.6s ease;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.vyom-popup-body .vyom-success-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0b1220;
    margin: 0 0 0.5rem;
}

.vyom-popup-body .vyom-success-desc {
    font-size: 0.88rem;
    color: #475569;
    margin: 0 0 1.5rem;
    line-height: 1.55;
    max-width: 320px;
}

.vyom-popup-body .vyom-btn-close-success {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 12px 36px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 10px 24px -6px rgba(37, 99, 235, 0.45);
    font-family: inherit;
}

.vyom-popup-body .vyom-btn-close-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -6px rgba(37, 99, 235, 0.55);
    filter: brightness(1.04);
}

.vyom-popup-body .vyom-btn-close-success:active {
    transform: translateY(0);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes vyomFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vyomSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vyomSuccessPulse {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   INTL-TEL-INPUT INTEGRATION
   Phone field — country selector (flag + dial code + arrow) sits as a
   real flex sibling of the <input>, so it auto-sizes to its rendered
   width at any dial code or zoom level. No fixed-padding slot, no
   absolute positioning, no overlap. The label sits above the iti row
   (inside .vyom-field-body which is still column flex).
   Dropdown is attached to document.body via init option so it escapes.
   ============================================ */
.vyom-popup-body .vyom-field--phone .vyom-field-body {
    padding-left: 0;
}

/* iti wraps the input — make it a horizontal flex row holding
   [country-container][input]. */
.vyom-popup-body .vyom-field--phone .iti {
    position: static !important;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Phone input — fills remaining flex space after the country block. */
.vyom-popup-body .iti .iti__tel-input,
.vyom-popup-body .iti input[type="tel"].vyom-form-control {
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.92rem;
    color: #0b1220;
    font-family: inherit;
    line-height: 1.4;
    min-height: 22px;
    height: auto !important;
    box-shadow: none !important;
    outline: none !important;
}

.vyom-popup-body .iti .iti__tel-input:focus {
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
}

.vyom-popup-body .iti .iti__tel-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

/* Phone label aligns with the input (flag lives in the left padding zone) */
.vyom-popup-body .vyom-field--phone .vyom-field-label {
    padding-left: 0;
}

/* Country selector block — in-flow flex child, sized to its content. */
.vyom-popup-body .vyom-field--phone .iti__country-container {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    bottom: auto;
    height: auto;
    flex: 0 0 auto;
    z-index: 2;
}

/* The actual flag + dial code + arrow button. No border, no bg. */
.vyom-popup-body .iti__selected-country,
.vyom-popup-body .iti__selected-country-primary {
    background: transparent !important;
    border: none !important;
    border-right: none !important;
    /* padding: 0 6px 0 0 !important; */
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    /* gap: 6px; */
    cursor: pointer;
    height: 100%;
    transition: opacity 0.15s ease;
    box-shadow: none !important;
}

.vyom-popup-body .iti__selected-country:hover,
.vyom-popup-body .iti__selected-country:focus {
    background: transparent !important;
    opacity: 0.85;
    outline: none !important;
}

.vyom-popup-body .iti__selected-dial-code {
    font-size: 0.86rem;
    color: #0b1220;
    font-weight: 600;
}

.vyom-popup-body .iti__arrow {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #64748b;
    margin-left: 2px;
}

.vyom-popup-body .iti__arrow--up {
    border-top: none;
    border-bottom: 4px solid #64748b;
}

/* Phone field error state — input gets .error class, propagate to field card */
.vyom-popup-body .vyom-field--phone:has(.iti__tel-input.error),
.vyom-popup-body .vyom-field--phone:has(input[type="tel"].error) {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.vyom-popup-body .vyom-field--phone:has(.iti__tel-input.success),
.vyom-popup-body .vyom-field--phone:has(input[type="tel"].success) {
    border-color: #10b981;
}

/* iti renders the dropdown into document.body — has to sit ABOVE the popup overlay */
.iti--container {
    z-index: 2147483647 !important;
}

/* Country dropdown list — give it a comfortable min-width so country names
   like "American Samoa" don't clip. Don't force width on .iti--container
   because the library sets that based on the country selector and overriding
   it can collide with the library's positioning math. */
.iti__dropdown-content {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 14px 40px -8px rgba(15, 23, 42, 0.2);
    max-height: 240px;
    overflow-y: auto;
    z-index: 2147483647;
    min-width: 300px;
    box-sizing: border-box;
}

.iti__search-input {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.88rem;
    color: #0b1220;
    background-color: #f8fafc;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.iti__search-input:focus {
    background-color: #ffffff;
    border-bottom-color: #2563eb;
}

.iti__search-input::placeholder { color: #94a3b8; }

.iti__country {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.86rem;
    color: #0b1220;
}

.iti__country:hover { background-color: rgba(37, 99, 235, 0.06); }
.iti__country.iti__highlight { background-color: rgba(37, 99, 235, 0.1); }

.iti__country-name { flex: 1; font-weight: 500; }
.iti__dial-code { color: #64748b; font-weight: 400; }
.iti__flag { border-radius: 2px; }

.iti__dropdown-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.iti__country-list {
    overflow-x: hidden !important;
    max-height: 220px;
    white-space: nowrap;
}

.iti__dropdown-content::-webkit-scrollbar,
.iti__country-list::-webkit-scrollbar { width: 4px; }
.iti__dropdown-content::-webkit-scrollbar-track,
.iti__country-list::-webkit-scrollbar-track { background: transparent; }
.iti__dropdown-content::-webkit-scrollbar-thumb,
.iti__country-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.iti__dropdown-content::-webkit-scrollbar-thumb:hover,
.iti__country-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================
   RESPONSIVE
   Width breakpoints handle phones / small tablets.
   Height breakpoints handle 13-inch laptops (1366x768 etc).
   ============================================ */

/* Small laptop & below: collapse paired rows into a single column.
   Threshold is 820px so 13" laptops, browser-zoomed views, and tablets
   all get the single-column layout (avoids cramped 2-col phone field). */
@media (max-width: 820px) {
    .vyom-popup-body .vyom-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vyom-popup-container {
        width: clamp(280px, 96vw, 100%);
        max-width: 98%;
        border-radius: 16px;
    }

    .vyom-popup-header {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .vyom-popup-header {
        padding: 20px 20px 0;
    }

    .vyom-popup-body {
        padding: 4px 20px 18px;
    }

    .vyom-popup-title {
        font-size: 1.4rem;
    }

    .vyom-popup-subtitle {
        font-size: 0.84rem;
    }

    .vyom-popup-body .vyom-form-control,
    .vyom-popup-body .iti .iti__tel-input {
        font-size: 16px; /* prevent iOS zoom */
    }

    .vyom-popup-body .vyom-form-group,
    .vyom-popup-body .vyom-form-row > .vyom-form-group {
        margin-top: 20px;
        margin-bottom: 6px;
    }

    /* Tighter spacing for reCAPTCHA + submit so the whole form fits the
       viewport on small screens. Message field keeps its wider margin-top
       (defined above with :has()) so its error doesn't bleed into the
       service field above. */
    .vyom-popup-body .vyom-form-group.vyom-recaptcha-group,
    .vyom-popup-body .vyom-form-group:has(.vyom-btn-submit) {
        margin-top: 14px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .vyom-popup-overlay { padding: 8px; }
    .vyom-popup-container { width: clamp(260px, 98vw, 100%); }
    .vyom-popup-title { font-size: 1.25rem; }
    .vyom-popup-subtitle { font-size: 0.8rem; line-height: 1.45; }
    .vyom-popup-header { padding: 18px 16px 0; }
    .vyom-popup-body { padding: 2px 16px 14px; }
    .vyom-popup-body .vyom-field { padding: 6px 12px; min-height: 52px; }
    .vyom-popup-body .vyom-btn-submit { padding: 12px 16px; font-size: 0.92rem; }
    .vyom-popup-body .vyom-field--phone .iti { gap: 6px; }
    .vyom-popup-body .vyom-error-message { font-size: 0.64rem; }
}

/* reCAPTCHA scaling on small viewports */
@media (max-width: 480px) {
    .vyom-popup-body .g-recaptcha {
        transform: scale(0.85);
        transform-origin: center top;
        margin-bottom: -10px;
        width: 100% !important;
        max-width: none !important;
        display: flex;
        justify-content: center;
    }

    .vyom-popup-body .g-recaptcha > div,
    .vyom-popup-body .g-recaptcha iframe {
        width: 304px !important;
        max-width: none !important;
    }
}

@media (max-width: 360px) {
    .vyom-popup-body .g-recaptcha {
        transform: scale(0.74);
        margin-bottom: -18px;
    }
}

/* 13-inch laptops & shorter viewports — tighten vertical rhythm so the
   whole form fits without scrolling (typical chrome leaves ~640-680px usable
   on a 1366x768 display). */
@media (max-height: 800px) {
    .vyom-popup-header { padding: 18px 24px 12px; }
    .vyom-popup-body { padding: 6px 24px 16px; }
    .vyom-popup-title { font-size: 1.4rem; margin-bottom: 6px; }
    .vyom-popup-subtitle { font-size: 0.82rem; line-height: 1.5; }
    .vyom-popup-eyebrow { margin-bottom: 10px; }

    .vyom-popup-body .vyom-form-group { margin-top: 15px; margin-bottom: 6px; }
    .vyom-popup-body .vyom-field { min-height: 50px; padding: 6px 12px; }
    .vyom-popup-body .vyom-field--message { padding-bottom: 26px; }
    .vyom-popup-body textarea.vyom-form-control { min-height: 60px; max-height: 110px; }
    .vyom-popup-body .vyom-btn-submit { padding: 12px 18px; font-size: 0.94rem; }
    .vyom-popup-body .vyom-trust-strip { margin-top: 10px; font-size: 0.72rem; }
    .vyom-popup-body .vyom-recaptcha-group { padding: 2px 0; }
}

/* Shorter still (1366x768 with bookmarks bar, or 12" laptops) */
@media (max-height: 720px) {
    .vyom-popup-header { padding: 16px 22px 0px; }
    .vyom-popup-body { padding: 4px 22px 14px; }
    .vyom-popup-title { font-size: 1.3rem; }
    .vyom-popup-subtitle { font-size: 0.8rem; }
    .vyom-popup-body .vyom-form-group { margin-top: 15px; margin-bottom: 4px; }
    .vyom-popup-body .vyom-field { min-height: 46px; padding: 5px 12px; }
    .vyom-popup-body .vyom-field--message { padding-bottom: 24px; }
    .vyom-popup-body textarea.vyom-form-control { min-height: 50px; max-height: 90px; }
    .vyom-popup-body .vyom-btn-submit { padding: 10px 18px; }
    .vyom-popup-body .g-recaptcha { transform: scale(0.88); min-height: 72px; }
}

/* Landscape mobile / very short */
@media (max-height: 600px) {
    .vyom-popup-overlay { padding: 8px; }
    .vyom-popup-container { max-height: 98vh; max-height: 98dvh; }
    .vyom-popup-header { padding: 12px 20px 8px; }
    .vyom-popup-body { padding: 4px 20px 12px; }
    .vyom-popup-title { font-size: 1.15rem; margin-bottom: 4px; }
    .vyom-popup-subtitle { font-size: 0.76rem; }
    .vyom-popup-eyebrow { margin-bottom: 6px; }
    .vyom-popup-body .vyom-form-group { margin-top: 8px; margin-bottom: 4px; }
    .vyom-popup-body .vyom-field { min-height: 42px; padding: 4px 10px; }
    .vyom-popup-body .vyom-field--message { padding-bottom: 22px; }
    .vyom-popup-body textarea.vyom-form-control { min-height: 40px; max-height: 70px; }
    .vyom-popup-body .vyom-btn-submit { padding: 9px 16px; font-size: 0.9rem; }
    .vyom-popup-body .g-recaptcha { transform: scale(0.82); min-height: 65px; }
    .vyom-popup-body .vyom-trust-strip { margin-top: 8px; font-size: 0.7rem; }
}