.shipit24-shipping-options {
    margin-bottom: 20px;
}

.shipit24-shipping-select,
#shipit24_locker_select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

.shipit24-lockers-wrapper {
    position: relative;
}

/* Once a locker is picked, the search input gives way to the selected-locker
 * card below it — re-shown only via the card's × (.shipit24-remove-locker). */
.shipit24-lockers-container.has-selection .shipit24-lockers-wrapper {
    display: none;
}

.shipit24-city-combobox {
    margin-bottom: 8px;
}

/* Vendored Select2 (src/assets/js/vendor/select2.min.js) powers both the
 * city picker and the locker search — these match its default theme's
 * height/padding to the 40px inputs used elsewhere on the page. Scoped to
 * .shipit24-lockers-wrapper/.shipit24-city-combobox rather than the bare
 * Select2 classes so they don't leak into other Select2 instances WC itself
 * may render elsewhere on the same checkout/cart page. */
.shipit24-lockers-wrapper .select2-container--default .select2-selection--single,
.shipit24-city-combobox .select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.shipit24-lockers-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
.shipit24-city-combobox .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 12px;
}

.shipit24-lockers-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow,
.shipit24-city-combobox .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.shipit24-lockers-wrapper .select2-container--default .select2-selection--single .select2-selection__clear,
.shipit24-city-combobox .select2-container--default .select2-selection--single .select2-selection__clear {
    height: 38px;
    line-height: 38px;
    /* Select2's default margin-right:20px reserves room for the dropdown
     * arrow, which is absolutely positioned at the far right (width:20px) —
     * do not shrink this or the clear × overlaps the arrow. */
    margin-right: 20px;
}

/* Locker results dropdown: dropdownCssClass:'shipit24-locker-dropdown' (set
 * in initLockerSelect()) scopes these to the locker picker only, since its
 * results are rich pre-rendered .shipit24-locker rows (not plain text like
 * the city picker's), which already carry their own padding/hover styling —
 * Select2's default 6px option padding and highlight color would otherwise
 * double up with / clash against them.
 *
 * !important is needed here: Select2's own stylesheet is enqueued after
 * shipit24-styles.css (it's only registered once the city/locker picker
 * actually needs it), so its same-specificity .select2-results__option--
 * highlighted.select2-results__option--selectable rule (background
 * #5897fb + white text) would otherwise win the cascade tie by load
 * order and leave white-on-transparent (invisible) hover text. */
.shipit24-locker-dropdown .select2-results__option {
    padding: 0 !important;
}

.shipit24-locker-dropdown .select2-results__option--highlighted {
    background-color: #f9f9f9 !important;
    color: inherit !important;
}

.shipit24-selected-locker {
    margin-top: 4px;
}

.shipit24-selected-locker,
.shipit24-lockers-container {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    text-indent: 0;
}

.shipit24-locker {
    font-size: 16px;
    line-height: 1.5;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-align: left;
}

.shipit24-locker p,
.shipit24-lockers-container p {
    margin: 0;
}

.shipit24-locker:hover {
    background: #f9f9f9;
}

.shipit24-locker__price,
.shipit24-selected-locker__price {
    font-weight: 700;
    font-size: 16px;
    color: #000;
}

.shipit24-selected-locker__name,
.shipit24-locker__name {
    margin-top: 4px;
    font-size: 14px;
    max-width: 139px;
}

* + .shipit24-lockers-container {
    margin-top: 8px;
}

.shipit24-lockers-container {
    position: relative;
    padding-bottom: 8px;
    display: none;
}

.wc-block-components-shipping-rates-control__package
    + .shipit24-lockers-container {
    margin-top: 8px;
}

.shipit24-selected-locker__title,
.shipit24-locker__title {
    text-align: left;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}

.shipit24-selected-locker__inner {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #417f64;
    background-color: #f2f9f4;
    position: relative;
}

.shipit24-remove-locker {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    user-select: none;
}

.shipit24-remove-locker:hover {
    opacity: 0.6;
}

.shipit24-locker__meta,
.shipit24-selected-locker__meta {
    margin-top: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.shipit24-locker__address,
.shipit24-selected-locker__address {
    margin-top: 4px;
    font-size: 12px;
}

.shipit24-locker__city,
.shipit24-selected-locker__city {
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.6;
}

.shipit24-selected-locker__distance,
.shipit24-locker__distance {
    opacity: 0.6;
    font-size: 14px;
}

@media (min-width: 960px) {
    .woocommerce-checkout form.checkout {
        grid-template-columns: 2fr 2fr;
        grid-column-gap: 30px;
    }
}

.woocommerce label[for^='shipping_method_'] {
    min-width: 225px;
    display: block;
}

.woocommerce
    input[name^='shipping_method']:checked
    ~ .shipit24-lockers-container,
.shipit24-lockers-container.is-open {
    display: block;
}