/* Responsive CSS for France Project */

/* ===========================================
   MOBILE RESPONSIVE (768px and below)
   =========================================== */
@media (max-width: 768px) {
    /* Coupon Buttons - Full width on mobile */
    .coupon-detail .coupon-button.getdeal-btn {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .coupon-detail .coupon-button.coupon-code {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .coupon-detail {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Exclusive Badge - Center on mobile */
    .group .absolute.-top-3 {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Coupon Cards - Full width */
    .group {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .group .relative.bg-white.rounded-t-xl {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Button Container - Full width */
    .group .flex-shrink-0.flex.flex-col.items-center {
        width: 100% !important;
        align-items: stretch !important;
    }
    
    /* Details Section - Full width */
    .group .flex-1 {
        width: 100% !important;
        min-width: auto !important;
    }
}

/* ===========================================
   TABLET RESPONSIVE (769px - 1024px)
   =========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Coupon Buttons - Adjusted width for tablet */
    .coupon-detail .coupon-button.getdeal-btn {
        width: 180px !important;
        max-width: 180px !important;
        font-size: 0.65rem !important;
    }
    
    .coupon-detail .coupon-button.coupon-code {
        width: 180px !important;
        max-width: 180px !important;
    }
    
    .coupon-detail {
        width: 180px !important;
        max-width: 180px !important;
    }
    
    .coupon-code .get-code {
        font-size: 0.65rem !important;
    }
    
    /* Container - Proper sizing */
    .container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Coupon Cards - Full width */
    .group {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Card Content - Column layout */
    .group .p-4.sm\\:p-6.lg\\:p-8 {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* Button Container - Stretch */
    .group .flex-shrink-0.flex.flex-col.items-center {
        width: 100% !important;
        align-items: stretch !important;
    }
    
    /* Details Section - Full width */
    .group .flex-1 {
        width: 100% !important;
        min-width: auto !important;
    }
}

/* ===========================================
   LARGE TABLET RESPONSIVE (1025px - 1200px)
   =========================================== */
@media (min-width: 1025px) and (max-width: 1200px) {
    /* Coupon Buttons - Medium width */
    .coupon-detail .coupon-button.getdeal-btn {
        width: 200px !important;
        max-width: 200px !important;
    }
    
    .coupon-detail .coupon-button.coupon-code {
        width: 200px !important;
        max-width: 200px !important;
    }
    
    .coupon-detail {
        width: 200px !important;
        max-width: 200px !important;
    }
}

/* ===========================================
   DESKTOP RESPONSIVE (1201px and above)
   =========================================== */
@media (min-width: 1201px) {
    /* Coupon Buttons - Full desktop width */
    .coupon-detail .coupon-button.getdeal-btn {
        width: 235px !important;
        max-width: 235px !important;
    }
    
    .coupon-detail .coupon-button.coupon-code {
        width: 235px !important;
        max-width: 235px !important;
    }
    
    .coupon-detail {
        width: 235px !important;
        max-width: 235px !important;
    }
}

/* ===========================================
   GRID LAYOUTS RESPONSIVE
   =========================================== */

/* Today's Top Offers Grid */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\\:grid-cols-3.lg\\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid.grid-cols-1.md\\:grid-cols-3.lg\\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1025px) {
    .grid.grid-cols-1.md\\:grid-cols-3.lg\\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Flash Deals Grid */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1025px) {
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ===========================================
   UTILITY RESPONSIVE CLASSES
   =========================================== */

/* Hide on mobile */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .hidden-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 1025px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* Show only on tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .tablet-only {
        display: block !important;
    }
}

@media (max-width: 768px), (min-width: 1025px) {
    .tablet-only {
        display: none !important;
    }
}

/* Show only on desktop */
@media (min-width: 1025px) {
    .desktop-only {
        display: block !important;
    }
}

@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }
}

/* ===========================================
   CONTAINER RESPONSIVE
   =========================================== */

/* Container padding adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 1025px) {
    .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ===========================================
   TYPOGRAPHY RESPONSIVE
   =========================================== */

/* Responsive text sizes */
@media (max-width: 768px) {
    .text-responsive {
        font-size: 0.875rem !important;
    }
    
    .text-responsive-lg {
        font-size: 1.125rem !important;
    }
    
    .text-responsive-xl {
        font-size: 1.25rem !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .text-responsive {
        font-size: 1rem !important;
    }
    
    .text-responsive-lg {
        font-size: 1.25rem !important;
    }
    
    .text-responsive-xl {
        font-size: 1.5rem !important;
    }
}

@media (min-width: 1025px) {
    .text-responsive {
        font-size: 1.125rem !important;
    }
    
    .text-responsive-lg {
        font-size: 1.5rem !important;
    }
    
    .text-responsive-xl {
        font-size: 1.875rem !important;
    }
}