/* Enhanced checkout dropdown fixes (override) */
.woocommerce-checkout .woocommerce-input-wrapper {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
}

.woocommerce-checkout .woocommerce-input-wrapper::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    width: 10px !important;
    height: 6px !important;
    transform: translateY(-50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 10px 6px !important;
    pointer-events: none !important;
    z-index: 20 !important;
    opacity: 0 !important; /* Start hidden, only show for selects */
}

.woocommerce-checkout .woocommerce-input-wrapper.select-wrapper::after,
.woocommerce-checkout span.select2-container + i + .woocommerce-input-wrapper::after,
.woocommerce-checkout .select2-container::after,
.woocommerce-checkout .select2-selection__arrow {
    /* We'll refine which one shows the arrow below */
}

/* Show arrow only for containers that have a select or select2 */
.woocommerce-checkout .woocommerce-input-wrapper:has(select)::after,
.woocommerce-checkout .woocommerce-input-wrapper:has(.select2-container)::after {
    opacity: 1 !important;
}

/* Apply custom arrow only to Select2-enabled select wrappers */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    padding-right: 42px !important;
}

/* Hide Select2's own arrow and preserve our custom arrow */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

/* Prevent text and tel inputs from showing browser-native arrows/icons */
.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],
.woocommerce-checkout input[type=number],
.woocommerce-checkout input[type=password],
.woocommerce-checkout textarea {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

.woocommerce-checkout input[type=number]::-webkit-inner-spin-button,
.woocommerce-checkout input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Stabilize Select2 dropdown rendering and prevent footer clipping */
.woocommerce-checkout .select2-container--open {
    overflow: visible !important;
    z-index: 99999 !important;
}

.woocommerce-checkout .select2-dropdown {
    overflow: hidden !important;
    border-radius: 14px !important;
    z-index: 100000 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
    border: 1px solid #e5e7eb !important;
    /* Do not force width to 100%, let Select2 handle it correctly */
}

.woocommerce-checkout .select2-results__options {
    max-height: 270px !important;
    overflow-y: auto !important;
}

/* Allow Select2 to naturally calculate the wrapper width on the floating dropdown, 
   but ensure the original form element takes 100% of its form-row parent. */
.woocommerce-checkout .form-row .select2-container {
    width: 100% !important;
    display: block !important;
}

.woocommerce-checkout .select2-container--open {
    /* Remove width overrides that break body-appended dropdowns */
}

.woocommerce-checkout .select2-selection--single {
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: var(--brand-pink) !important;
    box-shadow: 0 0 0 4px rgba(228, 83, 102, 0.1) !important;
}

.woocommerce-checkout .select2-selection__rendered {
    padding-left: 16px !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Placeholder text inside Select2 dropdowns (e.g. Wilaya / Commune) */
.woocommerce-checkout .select2-selection__placeholder,
.woocommerce-checkout .select2-selection__rendered.select2-selection__placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hard fallback when Select2 container text is empty */
#select2-billing_state-container:empty::before,
#select2-billing_city-container:empty::before {
    content: attr(data-fallback-placeholder);
    color: #9ca3af;
    font-weight: 400;
}

/* Some builds inject non-breaking spaces; treat those as placeholder state */
#select2-billing_state-container[data-is-empty="1"],
#select2-billing_city-container[data-is-empty="1"] {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* Force visibility on the Select2 container so it's never empty/invisible */
#billing_state_field .select2-container,
#billing_city_field .select2-container {
    display: block !important;
    visibility: visible !important;
    min-height: 48px !important;
}

.woocommerce-checkout .select2-results__option {
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: background 0.2s !important;
}

.woocommerce-checkout .select2-results__option--highlighted[aria-selected],
.woocommerce-checkout .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--brand-pink) !important;
    color: #fff !important;
}

.woocommerce-checkout .select2-search--dropdown .select2-search__field {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    border: 1px solid #e5e7eb !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
}

/* Base input styling for consistency */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea {
    height: 48px;
    border-radius: 12px !important;
    padding: 0 16px !important;
    border: 1px solid #e5e7eb !important;
    width: 100% !important;
}

.woocommerce-checkout .form-row textarea {
    height: auto !important;
    padding: 12px 16px !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--brand-pink) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(228, 83, 102, 0.1) !important;
}

/* Remove placeholder text when WooCommerce injects label-like placeholder content */
.woocommerce-checkout #billing_address_1[placeholder],
.woocommerce-checkout #billing_address_2[placeholder] {
    color: inherit !important;
}


/* ══════════════════════════════════════════════
   2026 CHECKOUT UI REFINEMENT LAYER
   ══════════════════════════════════════════════ */
.woocommerce-checkout .form-row input.input-text,.woocommerce-checkout .form-row textarea,.woocommerce-checkout .select2-container--default .select2-selection--single,.woocommerce-checkout select { border-radius: 16px !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; }
.woocommerce-checkout .form-row input.input-text:hover,.woocommerce-checkout .form-row textarea:hover,.woocommerce-checkout select:hover,.woocommerce-checkout .select2-container--default .select2-selection--single:hover { border-color: #cbd5e1 !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 16px !important; padding-right: 42px !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { right: 12px !important; }
.woocommerce-checkout .select2-container--open .select2-selection--single,.woocommerce-checkout .select2-container--focus .select2-selection--single { box-shadow: 0 0 0 4px rgba(228, 83, 102, 0.12) !important; }