/**
 * GF International Phone Field Styles
 */

/* Container */
.ginput_container_international_phone {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

/* Country dropdown - auto width for flag + code */
.gf_international_phone_country {
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 130px;
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.3s ease;
    height: 48px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236E0147' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    text-align: center;
}

.gf_international_phone_country:hover {
    border-color: #6E0147;
    box-shadow: 0 2px 8px rgba(110, 1, 71, 0.1);
}

.gf_international_phone_country:focus {
    outline: none;
    border-color: #6E0147;
    box-shadow: 0 0 0 3px rgba(110, 1, 71, 0.1);
}

/* Phone input - 67% width */
.gf_international_phone_number {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    line-height: 1.4;
    transition: all 0.3s ease;
    height: 48px;
}

.gf_international_phone_number:hover {
    border-color: #6E0147;
}

.gf_international_phone_number:focus {
    outline: none;
    border-color: #6E0147;
    box-shadow: 0 0 0 3px rgba(110, 1, 71, 0.1);
}

/* Placeholder styling */
.gf_international_phone_number::placeholder {
    color: #999;
    font-size: 14px;
}

/* Responsive - stack on mobile */
@media (max-width: 600px) {
    .ginput_container_international_phone {
        flex-wrap: wrap;
    }
    
    .gf_international_phone_country {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }
    
    .gf_international_phone_number {
        flex: 1 1 100%;
    }
}

/* Error states */
.gfield_error .gf_international_phone_country,
.gfield_error .gf_international_phone_number {
    border-color: #dc3232;
    background-color: #fff5f5;
}

.gfield_error .gf_international_phone_country:focus,
.gfield_error .gf_international_phone_number:focus {
    border-color: #dc3232;
    box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.15);
}

.ginput_container_international_phone .validation_message {
    color: #dc3232;
    font-size: 13px;
    margin-top: 6px;
    flex: 1 1 100%;
    width: 100%;
    font-weight: 500;
}

/* Dropdown options styling */
.gf_international_phone_country option {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
}

.gf_international_phone_country option.preferred-country {
    font-weight: 600;
    background-color: #f8f0f7;
    color: #6E0147;
}

.gf_international_phone_country option[disabled] {
    color: #ccc;
    font-size: 10px;
    padding: 4px 12px;
    background-color: #f8f8f8;
    font-weight: 300;
}

/* Size variations based on Gravity Forms field size setting */
.small .gf_international_phone_country,
.small .gf_international_phone_number {
    padding: 8px 12px;
    font-size: 13px;
    height: 36px;
}

.medium .gf_international_phone_country,
.medium .gf_international_phone_number {
    padding: 12px 14px;
    font-size: 15px;
    height: 48px;
}

.large .gf_international_phone_country,
.large .gf_international_phone_number {
    padding: 14px 18px;
    font-size: 17px;
    height: 56px;
}

/* Admin styles */
body.forms_page_gf_edit_forms .gf_international_phone_country,
body.forms_page_gf_edit_forms .gf_international_phone_number,
body.forms_page_gf_entries .gf_international_phone_country,
body.forms_page_gf_entries .gf_international_phone_number {
    font-size: 13px;
}

/* Placeholder */
.gf_international_phone_number::placeholder {
    color: #757575;
    opacity: 1;
}

/* Loading state */
.gf_international_phone_country.loading {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="20" height="20" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="10" cy="10" r="8" stroke="%232271b1" stroke-width="2" fill="none" stroke-dasharray="12.566370614359172" stroke-dashoffset="0"%3E%3CanimateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 10 10;360 10 10"%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
}

/* Hidden field */
.gf_international_phone_full {
    display: none !important;
}

/* RTL support */
.rtl .ginput_container_international_phone {
    direction: rtl;
}

.rtl .gf_international_phone_country,
.rtl .gf_international_phone_number {
    direction: ltr;
    text-align: right;
}

/* Print styles */
@media print {
    .gf_international_phone_country,
    .gf_international_phone_number {
        border: 1px solid #000;
        background: none;
    }
}

/* Gravity Forms compatibility */
.gform_wrapper .ginput_container_international_phone {
    margin-top: 8px;
}

.gform_wrapper.gravity-theme .ginput_container_international_phone input[type="tel"],
.gform_wrapper.gravity-theme .ginput_container_international_phone select {
    margin-bottom: 0;
}

/* Fix for some themes */
.gform_wrapper .ginput_container_international_phone select,
.gform_wrapper .ginput_container_international_phone input {
    box-sizing: border-box;
}

/* Enhanced styling for better UX */
.gf_international_phone_country {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #333;
}

.gf_international_phone_number {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #333;
}

/* Focus states for accessibility */
.gf_international_phone_country:focus-visible,
.gf_international_phone_number:focus-visible {
    outline: 2px solid #6E0147;
    outline-offset: 2px;
}

/* Disabled states */
.gf_international_phone_country:disabled,
.gf_international_phone_number:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Smooth transitions */
.ginput_container_international_phone * {
    transition-property: border-color, box-shadow, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Half-width field support */
.gfield--width-half .ginput_container_international_phone {
    max-width: 100%;
}

.gfield--width-half .gf_international_phone_country {
    max-width: 150px;
}

/* Loading state for country detection */
.gf_international_phone_country.detecting-country {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner%7Banimation:rotate 2s linear infinite;transform-origin:center center%7D@keyframes rotate%7B0%25%7Btransform:rotate(0deg)%7D100%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cg class='spinner'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%236E0147' stroke-width='2' fill='none' stroke-dasharray='20 10'/%3E%3C/g%3E%3C/svg%3E"), 
                         url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236E0147' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 40px center, right 14px center;
}

/* Country hint/helper messages */
.ginput_container_international_phone {
    position: relative;
}

.country-hint {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    font-size: 13px;
    color: #6E0147;
    background-color: #f8f0f7;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e8d0e5;
    box-shadow: 0 2px 8px rgba(110, 1, 71, 0.1);
    animation: slideIn 0.3s ease;
    z-index: 100;
}

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