/**
 * Quantilus_CheckoutLoader
 * Full-section skeleton mask for the checkout Shipping Methods step.
 */

.checkout-shipping-method {
    position: relative;
}

/* Dim/lock the real content while the mask is active, without removing it
   from the DOM (avoids layout jump when the mask is removed). */
.checkout-shipping-method.quantilus-shipping-mask-active > *:not(.quantilus-shipping-skeleton) {
    visibility: hidden;
}

.quantilus-shipping-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: #fff;
    padding: 20px 0;
    box-sizing: border-box;
    overflow: hidden;
}

.quantilus-skeleton-row {
    display: flex;
    align-items: center;
    padding: 14px 4px;
}

.quantilus-skeleton-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-right: 16px;
    background: linear-gradient(90deg, #e8e5f5 25%, #f3f1fb 37%, #e8e5f5 63%);
    background-size: 400% 100%;
    animation: quantilus-shimmer 1.4s ease infinite;
}

.quantilus-skeleton-bar {
    flex: 1 1 auto;
    height: 16px;
    border-radius: 8px;
    background: linear-gradient(90deg, #e8e5f5 25%, #f3f1fb 37%, #e8e5f5 63%);
    background-size: 400% 100%;
    animation: quantilus-shimmer 1.4s ease infinite;
    max-width: 92%;
}

.quantilus-skeleton-row:nth-child(1) .quantilus-skeleton-bar {
    max-width: 96%;
}

.quantilus-skeleton-row:nth-child(2) .quantilus-skeleton-bar {
    max-width: 70%;
}

.quantilus-skeleton-row:nth-child(3) .quantilus-skeleton-bar {
    max-width: 88%;
}

.quantilus-skeleton-row:nth-child(4) .quantilus-skeleton-bar {
    max-width: 60%;
}

.quantilus-skeleton-row:nth-child(5) .quantilus-skeleton-bar {
    max-width: 80%;
}

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

@media only screen and (max-width: 768px) {
    .quantilus-skeleton-bar {
        max-width: 100% !important;
    }
}