/**
 * beDots Checkout Form Change Styles
 * 
 * Styles for the custom checkout fields
 */

/* Hide empty " ( )" optional indicator on Postcode / ZIP (PHP filter may not catch all cases) */
#billing_postcode_field label .optional,
#shipping_postcode_field label .optional {
    display: none !important;
}

/* District and City fields styling - full width */
#billing_district_field,
#shipping_district_field,
#billing_city_dropdown_field,
#shipping_city_dropdown_field,
#billing_city_field,
#shipping_city_field {
    margin-bottom: 20px;
    width: 100%;
    clear: both;
}

/* Hide fields initially - JavaScript will show/hide based on country */
#billing_district_field,
#shipping_district_field,
#billing_city_dropdown_field,
#shipping_city_dropdown_field {
    display: none;
}

/* Show city input by default (for non-Oman countries) */
#billing_city_field:not(.bedots-city-dropdown),
#shipping_city_field:not(.bedots-city-dropdown) {
    display: block;
}

#billing_district_field label,
#shipping_district_field label,
#billing_city_field label,
#shipping_city_field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

#billing_district_field select,
#shipping_district_field select,
#billing_city_field select,
#shipping_city_field select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

#billing_district_field select:focus,
#shipping_district_field select:focus,
#billing_city_field select:focus,
#shipping_city_field select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

#billing_district_field select:disabled,
#shipping_district_field select:disabled,
#billing_city_field select:disabled,
#shipping_city_field select:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Loading state */
#billing_district_field.loading select,
#shipping_district_field.loading select,
#billing_city_field.loading select,
#shipping_city_field.loading select {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23999" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="%23999" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></animateTransform></path></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #billing_district_field,
    #shipping_district_field,
    #billing_city_field,
    #shipping_city_field {
        margin-bottom: 15px;
    }
}

/* Pickup location block – less congested on checkout/cart */
.pickup-location-address {
    margin: 14px 0 18px !important;
    padding: 12px 14px;
    line-height: 1.5 !important;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.pickup-location-address small {
    display: block;
    line-height: 1.5;
}

.pickup-location-note {
    margin-top: 12px !important;
    margin-bottom: 0;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
    display: block !important;
    line-height: 1.6 !important;
    font-size: 0.95em;
    word-spacing: 0.02em;
    white-space: normal;
    word-break: break-word;
}

.pickup-location-note strong {
    display: inline;
}

@media (max-width: 768px) {
    .pickup-location-address {
        margin: 16px 0 22px !important;
        padding: 14px 16px;
    }

    .pickup-location-note {
        margin-top: 14px !important;
        padding-top: 12px;
        line-height: 1.7 !important;
        font-size: 1em;
    }
}