/* Small refinements on top of Bootstrap 5.3 (light/dark aware via CSS variables). */

.shipment-card .card-header {
    background: var(--bs-tertiary-bg);
}

.rate-option {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.rate-option:hover {
    background: var(--bs-tertiary-bg);
}

.rate-option.selected {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.rate-option img.carrier-logo {
    height: 26px;
    width: 72px;
    object-fit: contain;
}

.rate-option .logo-fallback {
    width: 72px;
    text-align: center;
    font-weight: 600;
    font-size: .8rem;
}

.rate-option .price {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.rate-option .surcharge-list {
    font-size: .78rem;
}

.details-block {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: 1rem;
}

.collapse-chevron {
    transition: transform .15s ease;
}

.collapse-chevron.collapsed {
    transform: rotate(-90deg);
}

.selected-summary .header-logo {
    height: 20px;
    width: 56px;
    object-fit: contain;
}

/* subtle busy indicator while the zip -> city lookup runs */
.city-loading {
    background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bs-primary) 15%, transparent), transparent);
    background-size: 200% 100%;
    animation: city-shimmer 1s linear infinite;
}

@keyframes city-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}