/* ── Altronix Shipping Selector — Frontend ── */

.alx-ship-selector {
    margin-block-end: 24px;
}

.alx-ship-selector__inner {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Field */
.alx-ship-selector__field {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alx-ship-selector__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #a3aec2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.alx-ship-required { color: #ef4444; }

.alx-ship-selector__select {
    background: #1a2236 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    color: #f5f7fa !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    height: 44px !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
    appearance: auto;
    width: 100% !important;
}

.alx-ship-selector__select:focus {
    border-color: #00a6fb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,166,251,0.15) !important;
}

.alx-ship-selector__select.alx-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important;
    animation: alx-shake 0.4s ease;
}

@keyframes alx-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Placeholder option — dimmed, never re-selectable once a choice is made */
.alx-ship-selector__select option[value=""] {
    color: #6b7689;
}

/* Inline error — sits right under the select */
.alx-ship-selector__error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #ef4444;
    animation: alx-fade-in 0.2s ease;
}

.alx-ship-selector__error svg { flex-shrink: 0; }

@keyframes alx-fade-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Place-order / proceed-to-checkout buttons — locked until a city is chosen */
#place_order.alx-ship-locked,
.wc-proceed-to-checkout a.checkout-button.alx-ship-locked,
a.wc-block-cart__submit-button.alx-ship-locked {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.4);
}

/* Info panel */
.alx-ship-selector__info {
    flex: 1 1 200px;
    background: rgba(0,166,251,0.06);
    border: 1px solid rgba(0,166,251,0.2);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alx-ship-selector__info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #f5f7fa;
}

.alx-ship-selector__info-rate {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.alx-ship-selector__rate-label { color: #a3aec2; }

.alx-ship-selector__rate-value {
    font-size: 18px;
    font-weight: 800;
    color: #00a6fb;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.alx-ship-free { color: #10b981 !important; }

.alx-ship-selector__free-notice {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #a3aec2;
    margin-block-start: 2px;
}

.alx-ship-selector__free-notice svg { color: #f59e0b; flex-shrink: 0; }

/* Loading spinner */
/* ── Loading: subtle visual on select instead of spinner ──── */
.alx-ship-selector__select.is-updating {
    opacity: 0.6;
    pointer-events: none;
}

.alx-ship-selector__info.is-updating {
    opacity: 0.4;
    transition: opacity 0.2s;
}

/* Mobile */
@media (max-width: 640px) {
    .alx-ship-selector__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .alx-ship-selector__info { flex: none; }
}