/* Free Shipping Message Module Styles */

/* Utility Classes */
.bg-dark-700 {
    background-color: #374151; /* dark-700 equivalent */
}

.hidden {
    display: none !important;
}

.w-full {
    width: 100%;
}

.text-center {
    text-align: center;
}

.text-xs {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
}

.font-heading {
    font-family: inherit; /* Adjust to your heading font family */
}

.text-secondary-100 {
    color: #f3f4f6; /* secondary-100 equivalent */
}

.py-1\.5 {
    padding-top: 1.375rem; /* 6px */
    padding-bottom: 1.375rem; /* 6px */
}

.order-1 {
    order: 1;
}

.mb-6 {
    margin-bottom: 1.5rem; /* 24px */
}

.mb-0 {
    margin-bottom: 0;
}

/* Custom Classes */
.free-shipping-box-message {
    display: inline-block;
}

.remaining_amount {
    font-weight: 600;
    color: inherit;
}

.free-shipping-text {
    display: inline-block;
}

/* Responsive Styles */
/* Note: Classes with colons (lg:text-xs, xl:order-2) are Tailwind CSS syntax.
   If Tailwind is not available, use the media queries below as alternatives. */

/* For lg:text-xs - text-xs already defined above */
@media (min-width: 1024px) {
    .text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

/* For xl:order-2 - override order-1 at extra large screens */
/* This targets elements that have order-1 class within the free shipping container */
@media (min-width: 1280px) {
    .bg-dark-700.order-1 {
        order: 2;
    }
}