/**
 * Premium Circle – Progress Bar Responsive Rules
 * File: assets/css/progress-bar-responsive.css
 * 
 * Purpose:
 * - Media queries for mobile/tablet/desktop breakpoints
 * - Controls visibility of progress bar sections
 * - NO styling changes, only visibility logic
 * 
 * Feature_014: ProgressBar Mobile Screens Implementation
 * Date: 2026-01-27
 */

/* ===== MOBILE RULES (max-width: 768px) ===== */
@media (max-width: 768px) {
    
    /* Hide heavy 5-column grid on mobile (CRITICAL: must be !important) */
    .evo-loyalty-progress-bar__grid {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide cart discount block on mobile - only show in mobile summary */
    .evo-loyalty-cart-discount {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Show compact mobile summary: "weitere +298 € → erhalte 10 % Rabatt" */
    .evo-loyalty-progress-bar__mobile-summary {
        display: block !important;
    }
    
    /* Hide visual progress bar by default on mobile (CRITICAL: must be !important) */
    .evo-loyalty-progress-bar__bar-container {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide max-tier message on mobile (will show compact mobile version instead) */
    .evo-loyalty-max-tier-message {
        display: none !important;
        visibility: hidden !important;
    }
    
}

/* ===== TABLET RULES (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Tablet: show grid but might need spacing adjustments */
    .evo-loyalty-progress-bar__grid {
        display: grid;
    }
    
    /* Show cart discount on tablet */
    .evo-loyalty-cart-discount {
        display: block !important;
    }
    
    /* Hide mobile summary on tablet+ */
    .evo-loyalty-progress-bar__mobile-summary {
        display: none !important;
    }
    
    /* Show full max-tier message on tablet */
    .evo-loyalty-max-tier-message {
        display: block !important;
    }
    
}

/* ===== DESKTOP RULES (min-width: 1025px) ===== */
/* FEATURE_TODO_448: Show mini progress bar on all screen sizes (desktop too) */
@media (min-width: 1025px) {
    
    /* CHANGED: Hide grid on desktop (too fat, colleague wants mini version) */
    .evo-loyalty-progress-bar__grid {
        display: none !important;
    }
    
    /* CHANGED: Hide cart discount on desktop (only in mini version) */
    .evo-loyalty-cart-discount {
        display: none !important;
    }
    
    /* CHANGED: Show mobile summary on desktop (mini version for all sizes) */
    .evo-loyalty-progress-bar__mobile-summary {
        display: block !important;
    }
    
    /* Show full max-tier message on desktop */
    .evo-loyalty-max-tier-message {
        display: block !important;
    }
    
    /* CHANGED: Hide progress bar visual on desktop (not needed for mini) */
    .evo-loyalty-progress-bar__bar-container {
        display: none !important;
    }
    
}

/* ===== GENERAL MOBILE-SUMMARY STYLING (applied when visible) ===== */
.evo-loyalty-progress-bar__mobile-summary {
    padding: 12px 16px;
    text-align: center;
    color: #ffffff;
    margin: 10px 0;
    background: linear-gradient(135deg, #2d5f3f 0%, #4a8c5f 100%);
    border: 1px solid #eee;
    border-radius: 4px;
}

/* Line 1: "Premium Circle" title */
.evo-loyalty-progress-bar__mobile-summary__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* Line 2: "weitere +298 € → erhalte 10 % Rabatt" */
.evo-loyalty-progress-bar__mobile-summary__text {
    font-size: 15px;
    font-weight: normal;
    line-height: 1.3;
    color: #ffffff;
}