:root {
    --pio-primary-color: #34368a;
    --pio-primary-hover: #2a2c6e;
    --pio-border-color: #ddd;
    --pio-border-focus: #34368a;
    --pio-text-color: #333;
    --pio-label-color: #555;
    --pio-bg-color: #fff;
    --pio-input-height: 48px;
    --pio-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Fix to ensure country list appears on top of the popup */
.iti--container {
    z-index: 100000 !important;
}

.pio-popup-hidden { display: none !important; }
#pio-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); z-index: 99998;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
#pio-popup-overlay:not(.pio-popup-hidden) { opacity: 1; visibility: visible; }
#pio-popup-content {
    background: var(--pio-bg-color); border-radius: 12px; width: 90%; max-width: 520px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); font-family: var(--pio-font-family);
    transform: scale(0.95); transition: transform 0.3s;
    display: flex; flex-direction: column; max-height: 90vh;
    z-index: 99999;
    position: relative;
}
#pio-popup-overlay:not(.pio-popup-hidden) #pio-popup-content { transform: scale(1); }
.pio-popup-header {
    padding: 1rem 1.5rem; border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;
}
.pio-popup-title { margin: 0; font-size: 1.25rem; color: var(--pio-text-color); }
#pio-close-popup {
    background: transparent; border: none; cursor: pointer; padding: 5px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s;
}
#pio-close-popup svg { width: 22px; height: 22px; stroke: #666; transition: stroke 0.2s; }
#pio-close-popup:hover { background-color: #f1f1f1; }
#pio-close-popup:hover svg { stroke: #333; }
.pio-popup-body { padding: 1.5rem; overflow-y: auto; }
.pio-product-context {
    font-size: 0.95rem; color: var(--pio-label-color); margin: 0 0 1.5rem;
    border-left: 3px solid var(--pio-primary-color); padding-left: 1rem;
}
.pio-form-field { margin-bottom: 1.25rem; }
.pio-form-field label {
    display: block; margin-bottom: 0.5rem; font-weight: 500;
    font-size: 0.9rem; color: var(--pio-label-color);
}
.pio-form-field input[type="text"],
.pio-form-field input[type="email"],
.pio-form-field textarea {
    width: 100%; padding: 0 0.75rem; border: 1px solid var(--pio-border-color);
    border-radius: 6px; box-sizing: border-box; font-size: 1rem;
    height: var(--pio-input-height); transition: border-color 0.2s, box-shadow 0.2s;
}
.pio-form-field textarea { height: auto; min-height: 100px; padding-top: 0.75rem; }
.pio-form-field input:focus, .pio-form-field textarea:focus {
    outline: none; border-color: var(--pio-border-focus);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}
.pio-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pio-phone-container .iti { display: flex; gap: 8px; }
.pio-phone-container .iti__flag-container {
    flex-shrink: 0; border: 1px solid var(--pio-border-color);
    border-radius: 6px; height: var(--pio-input-height);
    width: 110px; box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative; padding: 0;
}
.pio-phone-container .iti__selected-flag { padding: 0 0.75rem; height: 100%; }
.pio-phone-container input#pio-phone {
    flex-grow: 1; border: 1px solid var(--pio-border-color);
    border-radius: 6px; height: var(--pio-input-height);
    padding: 0 0.75rem; width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.iti.iti--container:focus-within .iti__flag-container,
.pio-phone-container input#pio-phone:focus {
    border-color: var(--pio-border-focus) !important;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15) !important;
    z-index: 2;
}
.pio-phone-container.invalid .iti__flag-container,
.pio-phone-container.invalid input#pio-phone {
    border-color: #f5c2c7;
}
.pio-phone-validation-message {
    font-size: 0.85rem;
    margin-top: 6px;
    height: 1em; /* Reserve space to prevent layout shift */
    transition: color 0.2s;
}
.pio-phone-validation-message.error {
    color: #842029;
}
.pio-phone-validation-message.valid {
    color: #0f5132;
}
.pio-honeypot { display: none; }
.pio-form-buttons { margin-top: 1.5rem; display: flex; flex-direction: column; }
#pio-form button {
    padding: 0.85rem 1.5rem; border: none; border-radius: 6px; color: #fff;
    background-color: var(--pio-primary-color); cursor: pointer; font-size: 1rem;
    font-weight: 700; width: 100%; transition: background-color 0.2s, transform 0.1s;
}
#pio-form button:hover { background-color: var(--pio-primary-hover); }
#pio-form button:active { transform: scale(0.98); }
#pio-form button:disabled { background-color: #ccc; cursor: not-allowed; }
#pio-form-notice {
    padding: 0.8rem 1.com; margin-bottom: 1.25rem; border-radius: 6px;
    display: none; border: 1px solid transparent; font-size: 0.95rem;
}
#pio-form-notice.success { display: block; background-color: #d1e7dd; color: #0f5132; border-color: #badbcc;}
#pio-form-notice.error { display: block; background-color: #f8d7da; color: #842029; border-color: #f5c2c7;}
#pio-form-notice.loading { display: block; background-color: #e2e3e5; color: #383d41; border-color: #d6d8db;}

@media (max-width: 500px) {
    .pio-form-row { grid-template-columns: 1fr; }
    .pio-popup-header, .pio-popup-body { padding: 1rem 1.25rem; }

    .pio-phone-container .iti {
        flex-wrap: wrap;
    }
    .pio-phone-container .iti__flag-container {
        width: 100%;
        margin-bottom: 8px; /* Adds space between the two boxes */
    }
    .pio-phone-container input#pio-phone {
        width: 100%;
    }

    /* NEW AGGRESSIVE FIX: Force styles for the mobile phone input */
    .pio-phone-container input#pio-phone {
        color: #000000 !important;      /* Force text color to be black */
        -webkit-text-fill-color: #000000 !important; /* Ensures text color on Safari/Chrome */
        background-color: #FFFFFF !important; /* Force background to be white */
        opacity: 1 !important;           /* Ensure the input is not transparent */
        height: 48px !important;         /* Force the correct height */
        padding: 0 12px !important;      /* Force correct padding */
        line-height: 48px !important;    /* Vertically center the typed text */
        font-size: 16px !important;      /* Force a visible font size */
    }
}