/* ShipSavvy front-end styles
---------------------------------------------- */

.shipsavvy-spacer-20 {
	height: 20px;
	width: 100%;
	clear: both;
}

/* Real-time rate loading state (Classic checkout)
---------------------------------------------------------------------------------------*/

.savvy-rates-loading {
    position: relative;
}

/* Dims the current rates rather than removing them, so the layout does not
   jump and the shopper can carry on with the rest of the form. */
.savvy-rates-loading li,
.savvy-rates-loading label {
    opacity: 0.45;
    transition: opacity 0.15s ease-in-out;
}

.savvy-rates-loading::after {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    margin-top: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #e6e6e6 25%, #cfcfcf 37%, #e6e6e6 63%);
    background-size: 400% 100%;
    animation: savvy-rates-shimmer 1.2s ease-in-out infinite;
}

@keyframes savvy-rates-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .savvy-rates-loading::after {
        animation: none;
    }
}