/**
 * Cion Location Fields - Styles
 * Inherits Elementor Form styles
 */

/* Wrapper - Vertical Layout */
.cion-location-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Wrapper - Horizontal Layout */
.cion-location-wrapper.cion-location-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Field container */
.cion-location-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Stacked layout - full width fields */
.cion-location-wrapper:not(.cion-location-inline) .cion-location-field {
    width: 100%;
}

/* Inline layout - respect column widths */
.cion-location-wrapper.cion-location-inline .cion-location-field {
    flex: none;
}

/* Inherit Elementor select styles */
.cion-location-field select.elementor-field {
    width: 100%;
    box-sizing: border-box;
}

/* Make sure selects inherit form styles */
.elementor-form .cion-location-field select {
    /* Inherit from .elementor-field-textual */
}

/* Loading state */
.cion-location-field select.cion-loading {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20fill%3D%22%23999%22%20d%3D%22M25%2C5A20%2C20%2C0%2C1%2C1%2C5%2C25%22%20stroke%3D%22%23999%22%20stroke-width%3D%223%22%20fill%3D%22none%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2025%2025%22%20to%3D%22360%2025%2025%22%20dur%3D%220.8s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px !important;
}

/* Disabled state - lighter background */
.cion-location-field select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 767px) {
    .cion-location-wrapper.cion-location-inline {
        flex-direction: column;
    }
    
    .cion-location-wrapper.cion-location-inline .cion-location-field {
        width: 100% !important;
    }
}

/* Label alignment - override Elementor defaults */
.cion-location-field .elementor-field-label {
    width: 100%;
    display: block;
}

.cion-location-field .elementor-field-label[style*="text-align: left"] {
    text-align: left !important;
}

.cion-location-field .elementor-field-label[style*="text-align: center"] {
    text-align: center !important;
}

.cion-location-field .elementor-field-label[style*="text-align: right"] {
    text-align: right !important;
}