.lcg-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.lcg-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.lcg-submit-disabled {
    background-color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}
.lcg-modal-content {
    position: relative;
    max-width: 500px;
    margin: 10vh auto;
    background: #fff;

    border: 3px solid #ffae00; /* yellow border */
    border-radius: 10px;

    padding: 20px; /* uniform padding */
}


.lcg-modal-header {
     margin-top: 0;
    padding-top: 0;
    margin-bottom: 20px;
}

.lcg-modal-title {
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 8px 0; /* remove top margin */
        margin-top: 0;     /* 🔑 removes top gap */
    padding-top: 0;
    line-height: 1.3;
}

/* =========================================================
   CF7 submit button – show "Submitting..."
   ========================================================= */

#lcg-call-gatekeeper .wpcf7-submit.is-submitting {
    position: relative;
    color: transparent !important;
}

#lcg-call-gatekeeper .wpcf7-submit.is-submitting::after {
    content: "Submitting...";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: 600;
}
.lcg-modal-description {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

.lcg-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 40px;
    height: 40px;

    background: transparent;
    border: none;

    font-size: 30px !important; /* 🔑 THIS controls icon size */
    line-height: 40px;          /* center the × vertically */
    text-align: center;

    cursor: pointer;
    border-radius: 50%;
    padding: 0;
   
}


body.lcg-modal-open {
    overflow: hidden;
}

/* =========================================================
   CF7 Submit, Intl Phone UI
   Scoped strictly to Listing Call Gatekeeper popup
   (PURE CSS – no nesting)
   ========================================================= */

/* =========================================================
   Submit Button – Centered (Popup only)
   ========================================================= */

#lcg-call-gatekeeper .cf7-actions {
    display: flex;
    justify-content: center;   /* center submit button */
    margin-top: 24px;
}

#lcg-call-gatekeeper .cf7-actions .wpcf7-submit {
    background-color: #ffae00;
    color: #ffffff;

    border: none;
    border-radius: 6px;

    padding: 14px 40px;
    min-width: 220px;

    font-size: 16px;
    font-weight: 600;
    text-align: center;

    cursor: pointer;
    transition: background-color 0.2s ease;
}

#lcg-call-gatekeeper .cf7-actions .wpcf7-submit:hover {
    background-color: #e89c00;
}



/* -------- Intl Tel Input container -------- */
#lcg-call-gatekeeper .iti {
    width: 100%;
}

/* -------- Phone input field -------- */
#lcg-call-gatekeeper .iti input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cfcfcf;

    padding: 10px 10px 10px 70px !important;

    font-size: 15px;
    outline: none;
    background: transparent;
}

/* -------- Flag & country code area -------- */
#lcg-call-gatekeeper .iti__selected-flag {
    padding: 0 10px;
    border-bottom: 1px solid #cfcfcf;
    background: transparent;
}

/* -------- Dropdown arrow -------- */
#lcg-call-gatekeeper .iti__arrow {
    border-top-color: #000000;
}

/* -------- Focus state -------- */
#lcg-call-gatekeeper .iti input:focus {
    border-bottom-color: #ffae00;
}

/* =========================================================
   Intl Tel Input – Seamless Single Field (Popup only)
   ========================================================= */

/* Container full width */
#lcg-call-gatekeeper .iti {
    width: 100%;
}

/* Remove default box styles */
#lcg-call-gatekeeper .iti--separate-dial-code .iti__selected-flag {
    background: transparent;
    border: none;
    padding: 0 10px 6px 10px;
}

/* Phone input */
#lcg-call-gatekeeper .iti input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cfcfcf;

    padding: 8px 10px 8px 72px !important;

    font-size: 15px;
    background: transparent;
    outline: none;
}

/* Shared bottom border illusion */


/* Focus state */
#lcg-call-gatekeeper .iti input:focus {
    border-bottom-color: #ffae00;
}

#lcg-call-gatekeeper .iti input:focus + .iti__selected-flag::after {
    background: #ffae00;
}

/* Dropdown arrow subtle */
#lcg-call-gatekeeper .iti__arrow {
    border-top-color: #000;
}

/* =========================================================
   CF7 Placeholder Styling – Unified (Popup only)
   ========================================================= */

/* Name, Email, Phone placeholders */
#lcg-call-gatekeeper input::placeholder {
    font-size: 15px;
    font-weight: 400;
    color: #8a8a8a; /* light like mobile field */
    font-family: inherit;
}


/* =========================================================
   Intl Tel Input – Correct spacing & alignment
   ========================================================= */

#lcg-call-gatekeeper .iti {
    width: 100%;
    position: relative;
}

/* Flag + country code block */
#lcg-call-gatekeeper .iti--separate-dial-code .iti__selected-flag {
    display: flex;
    align-items: center;

    padding: 0 10px 6px 10px;
    font-size: 15px;
    font-weight: 400;
    color: #000;

    background: transparent;
    border: none;
}

/* Phone input field */
#lcg-call-gatekeeper .iti input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cfcfcf;

    /* 🔑 Correct space for flag + code */
    padding: 8px 10px 8px 90px !important;

    font-size: 15px;
    font-weight: 400;
    color: #000;
    font-family: inherit;

    background: transparent;
    outline: none;
}

/* Focus state */
#lcg-call-gatekeeper .iti input:focus {
    border-bottom-color: #ffae00;
}

/* Dropdown arrow */
#lcg-call-gatekeeper .iti__arrow {
    margin-left: 6px;
    border-top-color: #000;
}

/* =========================================================
   CF7 Placeholder Styling – Unified (Popup only)
   ========================================================= */

/* Name, Email, Phone placeholders */
#lcg-call-gatekeeper input::placeholder {
    font-size: 15px;
    font-weight: 400;
    color: #8a8a8a; /* light like mobile field */
    font-family: inherit;
}


/* =========================================================
   Intl Tel Input – Correct spacing & alignment
   ========================================================= */

#lcg-call-gatekeeper .iti {
    width: 100%;
    position: relative;
}

/* Flag + country code block */
#lcg-call-gatekeeper .iti--separate-dial-code .iti__selected-flag {
    display: flex;
    align-items: center;

    padding: 0 10px 6px 10px;
    font-size: 15px;
    font-weight: 400;
    color: #000;

    background: transparent;
    border: none;
}


/* Phone input field */
#lcg-call-gatekeeper .iti input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cfcfcf;

    /* 🔑 Correct space for flag + code */
    padding: 8px 10px 8px 90px !important;

    font-size: 15px;
    font-weight: 400;
    color: #000;
    font-family: inherit;

    background: transparent;
    outline: none;
}

/* Focus state */
#lcg-call-gatekeeper .iti input:focus {
    border-bottom-color: #ffae00;
}

/* Dropdown arrow */
#lcg-call-gatekeeper .iti__arrow {
    margin-left: 6px;
    border-top-color: #000;
}

/* =========================================================
   Reduce top & bottom padding of popup content
   ========================================================= */

#lcg-call-gatekeeper .lcg-modal-content {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* =========================================================
   Submit button – submitting / disabled state
   ========================================================= */

#lcg-call-gatekeeper .wpcf7-submit.is-submitting {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Hide CF7 default validation tips */
.wpcf7-not-valid-tip {
    display: none !important;
}

/* Prevent CF7 error border styles */
.wpcf7-not-valid {
    box-shadow: none !important;
    border-color: inherit !important;
}

/* =====================================================
   LCG custom validation error styles
===================================================== */
.lcg-error {
    color: #d63638;              /* WP admin red (safe & familiar) */
    font-size: 13px;
    margin-top: 6px;
    display: block;
    font-weight: 500;
}

/* Optional: red border for errored fields */
.lcg-has-error {
    border-color: #d63638 !important;
}

/* Optional: subtle focus state when fixing error */
.lcg-has-error:focus {
    box-shadow: 0 0 0 1px rgba(214, 54, 56, 0.4);
}

/* =====================================================
   Full popup loading overlay
===================================================== */

#lcg-call-gatekeeper .lcg-loader-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lcg-call-gatekeeper .lcg-loader-box {
    text-align: center;
}

#lcg-call-gatekeeper .lcg-loader-text {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #444;
}

/* Spinner */
#lcg-call-gatekeeper .lcg-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #eee;
    border-top-color: #ffae00;
    border-radius: 50%;
    animation: lcg-spin 0.9s linear infinite;
}

@keyframes lcg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =====================================================
   Solid action icons – FINAL premium version
===================================================== */

.lcg-action-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.lcg-action-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    cursor: pointer;
    text-decoration: none;

    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* COPY */
.lcg-copy-btn {
    background: #e5e7eb;
    color: #374151;
}

/* CALL */
.lcg-call-btn {
    background: #16a34a;
    color: #ffffff;
}

/* WHATSAPP */
.lcg-whatsapp-btn {
    background: #25D366;
    color: #ffffff;
}

/* Hover & active */
.lcg-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.lcg-action-btn:active {
    transform: scale(0.94);
}

/* =====================================================
   Premium success action buttons – FINAL POLISHED
===================================================== */

.lcg-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;

    margin-top: 22px;
}

/* Base button row */
.lcg-action-row {
    width: 48%;                 /* balanced width */
    min-width: 240px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 20px;         /* 🔑 slimmer height */
    border-radius: 12px;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    color: #ffffff;
    text-decoration: none;
    cursor: pointer;

    border: 1px solid transparent;
    box-shadow: 0 6px 14px rgba(0,0,0,0.10);

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover – subtle premium lift */
.lcg-action-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.16);
}

/* Icon */
.lcg-action-row svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    flex-shrink: 0;
}

/* Text */
.lcg-action-row span {
    white-space: nowrap; /* 🔑 prevent ugly wrapping */
}

/* CALL */
.lcg-call-btn {
    background: #ffae00;
    border-color: #ffae00;
}

/* WHATSAPP */
.lcg-whatsapp-btn {
    background: #22c55e;
    border-color: #22c55e;
}

/* COPY (secondary action) */
.lcg-copy-btn {
    background: #1f2937;
    border-color: #1f2937;
}

/* Copy confirmation text */
.lcg-copy-status {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #2e7d32;
}


/* ================================
   FORCE intl-tel dropdown on top
================================ */

.iti--container {
    z-index: 999999 !important;
}

.iti__country-list {
    z-index: 999999 !important;
}