/* 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;
}

.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;
}