/* Responsive CSS for Heni Store - Safe Layout Only */

/* Mobile First Approach */
@media (max-width: 768px) {
    /* Container responsive */
    .container {
        padding: 0 0.5rem !important;
    }

    /* Cards responsive - only layout, preserve colors */
    .deposit-card, .change-password-card {
        margin: 0.5rem 0 !important;
        padding: 1rem !important;
    }

    /* Form responsive - only sizing */
    .form-group {
        margin-bottom: 1rem !important;
    }

    .form-control {
        padding: 0.6rem !important;
        font-size: 0.9rem !important;
    }

    .btn-primary, .btn, .btn-secondary {
        padding: 0.6rem 1.5rem !important;
        font-size: 0.9rem !important;
    }

    /* Button groups responsive */
    .purchase-buttons,
    div[style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .purchase-buttons .btn,
    div[style*="display: flex"] .btn {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Account cards responsive */
    .accounts-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 0.5rem !important;
    }

    .account-badges {
        gap: 0.3rem !important;
    }

    .info-badge {
        font-size: 0.75rem !important;
        padding: 0.3rem 0.5rem !important;
    }

    .info-badge i {
        font-size: 0.7rem !important;
    }

    /* Grid responsive - only layout */
    .amount-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.3rem !important;
    }

    .amount-btn {
        padding: 0.4rem 0.2rem !important;
        font-size: 0.8rem !important;
    }

    /* Auth Forms Responsive */
    .auth-container {
        padding: 1rem 0.5rem !important;
        min-height: 100vh !important;
    }

    .auth-card {
        padding: 1.5rem !important;
        border-radius: 15px !important;
        margin: 0 !important;
    }

    .auth-title {
        font-size: 1.5rem !important;
    }

    .floating-label input {
        padding: 0.8rem 0.6rem 0.4rem 0.6rem !important;
        font-size: 0.9rem !important;
    }

    .floating-label label {
        left: 0.6rem !important;
        font-size: 0.9rem !important;
    }

    .floating-label input:focus + label,
    .floating-label input:not(:placeholder-shown) + label {
        font-size: 0.75rem !important;
    }

    .auth-btn {
        padding: 0.8rem !important;
        font-size: 1rem !important;
    }

    .password-requirements {
        font-size: 0.75rem !important;
    }

    /* QR section responsive - only sizing */
    .qr-code {
        max-width: 250px !important;
    }

    .bank-info {
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }

    /* Admin forms responsive */
    .admin-content form div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .admin-content form div[style*="display: flex"] .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Tablet responsive - only layout adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 95% !important;
    }

    .amount-buttons {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .deposit-container, .change-password-container {
        max-width: 90% !important;
    }

    .accounts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.2rem !important;
    }
}