/**
 * Flexible List View Fix
 * Allows cards to expand based on content while staying reasonably compact
 * Better text fitting with smart layout adjustments
 */

/* ========================================
   BASE STYLES - RESET CONSOLIDATED CSS
   ======================================== */
.esim-plans-grid[data-view="list"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.esim-plans-grid[data-view="list"] .esim-plan-card {
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.esim-plans-grid[data-view="list"] .esim-plan-header,
.esim-plans-grid[data-view="list"] .esim-plan-details,
.esim-plans-grid[data-view="list"] .esim-plan-actions {
    grid-column: unset !important;
    grid-area: unset !important;
    margin: 0 !important;
}

/* ========================================
   DESKTOP - FLEXIBLE HEIGHT WITH SMART LAYOUT
   ======================================== */
@media (min-width: 769px) {
    .esim-plans-grid[data-view="list"] .esim-plan-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important; /* Allow sections to expand */
        padding: 14px 18px !important;
        gap: 18px !important;
        min-height: 75px !important; /* Minimum height */
        max-height: none !important; /* Allow expansion */
        overflow: visible !important; /* Allow content to show */
    }
    
    .esim-plans-grid[data-view="list"] .esim-plan-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        border-color: #3b82f6 !important;
    }
    
    /* Header section - Allow proper text wrapping */
    .esim-plans-grid[data-view="list"] .esim-plan-header {
        flex: 0 0 300px !important; /* Wider for longer product names */
        min-width: 300px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-plan-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
        /* Allow text wrapping for long titles */
        white-space: normal !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        max-height: none !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-plan-badges {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-top: 4px !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-provider-badge,
    .esim-plans-grid[data-view="list"] .esim-discount-badge,
    .esim-plans-grid[data-view="list"] .esim-plan-label {
        font-size: 11px !important;
        padding: 3px 6px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Special styling for discount badge */
    .esim-plans-grid[data-view="list"] .esim-discount-badge {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border: 1px solid #fca5a5 !important;
        font-weight: 600 !important;
    }
    
    /* Special styling for label badge */
    .esim-plans-grid[data-view="list"] .esim-plan-label {
        background: #eff6ff !important;
        color: #2563eb !important;
        border: 1px solid #93c5fd !important;
        font-weight: 600 !important;
    }
    
    /* Details section - Better spacing for data and price */
    .esim-plans-grid[data-view="list"] .esim-plan-details {
        flex: 0 0 220px !important; /* Wider for better text fit */
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        gap: 20px !important;
        overflow: visible !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-plan-data,
    .esim-plans-grid[data-view="list"] .esim-plan-price {
        flex: 1 !important;
        text-align: center !important;
        min-width: 0 !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-data-amount {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 0 4px 0 !important;
        white-space: nowrap !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-validity {
        font-size: 12px !important;
        color: #6b7280 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-price-main {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #059669 !important;
        line-height: 1.2 !important;
        margin: 0 0 4px 0 !important;
        white-space: nowrap !important;
    }
    
    /* Price per GB with special styling */
    .esim-plans-grid[data-view="list"] .esim-price-per-gb {
        font-size: 11px !important;
        color: #059669 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        background: #f0fdf4 !important;
        border: 1px solid #bbf7d0 !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        font-weight: 500 !important;
        display: inline-block !important;
        white-space: nowrap !important;
    }
    
    /* Actions section - Better button layout */
    .esim-plans-grid[data-view="list"] .esim-plan-actions {
        flex: 1 !important;
        min-width: 280px !important; /* Ensure enough space for buttons */
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-actions-secondary,
    .esim-plans-grid[data-view="list"] .esim-actions-primary {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-btn {
        flex: 1 !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
        text-align: center !important;
        line-height: 1.2 !important;
        min-width: 60px !important; /* Ensure readable button width */
    }
    
    .esim-plans-grid[data-view="list"] .esim-btn-buy {
        background: #0066cc !important;
        color: white !important;
        font-weight: 600 !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-btn-select {
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        color: #495057 !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-btn-coverage,
    .esim-plans-grid[data-view="list"] .esim-btn-info {
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        color: #6c757d !important;
    }
}

/* ========================================
   MOBILE - FLEXIBLE HORIZONTAL LIST
   ======================================== */
@media (max-width: 768px) {
    .esim-plans-grid[data-view="list"] {
        padding: 0 8px !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-plan-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        min-height: 55px !important; /* Flexible minimum height */
        max-height: none !important; /* Allow expansion */
        overflow: visible !important;
    }
    
    /* Product name - Allow text wrapping */
    .esim-plans-grid[data-view="list"] .esim-plan-header {
        flex: 0 0 30% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-plan-title {
        font-size: 11px !important;
        font-weight: 600 !important;
        margin: 0 0 3px 0 !important;
        line-height: 1.2 !important;
        /* Allow wrapping for mobile */
        white-space: normal !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-plan-badges {
        display: flex !important;
        gap: 3px !important;
        flex-wrap: wrap !important;
        margin-top: 2px !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-provider-badge,
    .esim-plans-grid[data-view="list"] .esim-discount-badge,
    .esim-plans-grid[data-view="list"] .esim-plan-label {
        font-size: 8px !important;
        padding: 1px 3px !important;
        border-radius: 2px !important;
        white-space: nowrap !important;
    }
    
    /* Mobile discount badge */
    .esim-plans-grid[data-view="list"] .esim-discount-badge {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border: 1px solid #fca5a5 !important;
        font-weight: 600 !important;
    }
    
    /* Mobile label badge */
    .esim-plans-grid[data-view="list"] .esim-plan-label {
        background: #eff6ff !important;
        color: #2563eb !important;
        border: 1px solid #93c5fd !important;
        font-weight: 600 !important;
    }
    
    /* Data and Price - More space */
    .esim-plans-grid[data-view="list"] .esim-plan-details {
        flex: 0 0 35% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        gap: 8px !important;
        overflow: visible !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-plan-data,
    .esim-plans-grid[data-view="list"] .esim-plan-price {
        flex: 1 !important;
        text-align: center !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-data-amount {
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        margin: 0 0 2px 0 !important;
        white-space: nowrap !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-validity {
        font-size: 9px !important;
        color: #6b7280 !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-price-main {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #059669 !important;
        line-height: 1.1 !important;
        margin: 0 0 2px 0 !important;
        white-space: nowrap !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-price-per-gb {
        font-size: 7px !important;
        color: #059669 !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        background: #f0fdf4 !important;
        border: 1px solid #bbf7d0 !important;
        padding: 1px 3px !important;
        border-radius: 2px !important;
        font-weight: 500 !important;
        display: inline-block !important;
        white-space: nowrap !important;
    }
    
    /* Actions - Better button layout */
    .esim-plans-grid[data-view="list"] .esim-plan-actions {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        align-items: stretch !important;
        overflow: visible !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-actions-secondary,
    .esim-plans-grid[data-view="list"] .esim-actions-primary {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        justify-content: stretch !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-btn {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 5px 6px !important;
        font-size: 9px !important;
        min-height: 24px !important;
        white-space: nowrap !important;
        border-radius: 3px !important;
        line-height: 1.1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .esim-plans-grid[data-view="list"] .esim-btn-buy {
        background: #0066cc !important;
        color: white !important;
        font-weight: 600 !important;
    }
}

/* ========================================
   BADGE STYLES FOR ALL VIEWS (GRID & LIST)
   ======================================== */
/* Label badge styling - applies to both grid and list views */
.esim-plan-label {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #93c5fd !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

/* Discount badge styling - applies to both grid and list views */
.esim-discount-badge {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 600 !important;
}

/* Price per GB styling - applies to both grid and list views */
.esim-price-per-gb {
    background: #f0fdf4 !important;
    color: #059669 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    font-size: 11px !important;
    margin-top: 2px !important;
}

/* ========================================
   CRITICAL OVERRIDES
   ======================================== */
body .esim-plans-grid[data-view="list"] .esim-btn {
    max-width: none !important;
    min-width: 0 !important;
}

@media (max-width: 768px) {
    body .esim-plans-grid[data-view="list"] .esim-plan-card {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }
}