/**
 * WooCommerce City & Street Selector Pro - Frontend Styles
 * Version: 3.3.0
 */

/* General */
.wccs-city-select, .wccs-street-select { width: 100%; }
.wccs-city-select select, .wccs-street-select select { width: 100%; max-width: 100%; }

/* Select2 RTL */
.select2-container--default .select2-selection--single { direction: rtl; text-align: right; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 10px; padding-left: 28px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; }
.select2-dropdown { direction: rtl; text-align: right; }
.select2-container--default .select2-results__option { padding: 8px 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #0073aa; color: #fff; }
.select2-search--dropdown .select2-search__field { direction: rtl; text-align: right; padding: 8px; }
.select2-results__message { color: #666; padding: 10px; }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: #0073aa; box-shadow: 0 0 0 1px #0073aa; }
.wccs-street-field[disabled] + .select2-container .select2-selection--single { background-color: #f5f5f5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════
   Extra address fields – flex row (JS wraps them)
   ═══════════════════════════════════════════════ */

/* JS will add this wrapper div around the 3 fields */
.wccs-extra-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    width: 100%;
    clear: both;
}

.wccs-extra-row .form-row {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
}

.wccs-extra-row .form-row label {
    display: block;
    margin-bottom: 4px;
}

.wccs-extra-row .form-row input[type="text"],
.wccs-extra-row .form-row input[type="number"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* Responsive */
@media (max-width: 520px) {
    .wccs-extra-row { flex-direction: column !important; gap: 0; }
    .wccs-extra-row .form-row { width: 100% !important; }
    .select2-container { width: 100% !important; }
}