/* ==================== RESPONSIVE DESIGN ==================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .onboarding-wrapper {
        padding: 60px 24px 100px;
    }

    .report-grid {
        max-width: 500px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .theme-toggle {
        top: 12px;
        right: 12px;
    }

    .onboarding-wrapper {
        padding: 56px 16px 100px;
    }

    .features-grid {
        gap: 10px;
    }

    .feature-card {
        padding: 14px 10px;
    }

    .login-wrapper {
        padding: 56px 16px 24px;
    }

    .report-grid {
        max-width: 400px;
    }

    .premium-scrollable {
        padding: 48px 16px 140px;
    }
}

/* Mobile Small (360px - 480px) */
@media (max-width: 480px) {
    .theme-toggle {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .theme-icon-dark,
    .theme-icon-light {
        font-size: 18px;
    }

    /* Onboarding */
    .onboarding-content {
        padding: 40px 16px 20px;
        gap: 14px;
    }

    .logo-image {
        width: 72px;
        height: 72px;
    }

    .brand-title {
        font-size: 1.5rem;
    }

    .brand-subtitle {
        font-size: 0.8125rem;
    }

    .features-grid {
        gap: 10px;
        margin-top: 6px;
    }

    .feature-card {
        padding: 14px 8px;
    }

    .feature-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .feature-icon {
        font-size: 20px;
    }

    .feature-content h3 {
        font-size: 0.75rem;
    }

    .feature-content p {
        font-size: 0.6875rem;
    }

    .section-title {
        font-size: 1rem;
    }

    .step-item {
        padding: 14px;
    }

    .step-number {
        font-size: 1.25rem;
    }

    .step-icon {
        font-size: 24px;
    }

    .step-content h3 {
        font-size: 0.875rem;
    }

    .step-content p {
        font-size: 0.75rem;
    }

    .cta-section-sticky {
        padding: 14px 16px;
    }

    .btn-primary.btn-large {
        padding: 16px 28px;
        font-size: 1rem;
    }

    .trust-badges {
        gap: 8px;
    }

    .badge-item {
        font-size: 0.6875rem;
    }

    /* Login */
    .login-wrapper {
        padding: 52px 16px 24px;
    }

    .login-card {
        padding: 20px;
    }

    .phone-input-group {
        gap: 6px;
    }

    .country-selector {
        padding: 10px;
        border-radius: 10px;
    }

    .flag {
        font-size: 1.375rem;
    }

    .country-code {
        font-size: 0.8125rem;
        min-width: 32px;
    }

    /* History Type */
    .history-type-wrapper {
        padding: 52px 16px 24px;
    }

    .report-grid {
        gap: 10px;
    }

    .report-card {
        padding: 16px 12px;
    }

    .report-icon {
        width: 44px;
        height: 44px;
    }

    .report-card h3 {
        font-size: 0.9375rem;
    }

    .report-card p {
        font-size: 0.75rem;
    }

    /* Gateway */
    .gateway-wrapper {
        padding: 52px 16px 24px;
    }

    .shield-container {
        width: 90px;
        height: 90px;
    }

    .shield-icon {
        width: 54px;
        height: 54px;
    }

    /* Premium */
    .premium-scrollable {
        padding: 48px 16px 140px;
    }

    .plans-carousel {
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .plans-track {
        gap: 12px;
    }

    .plan-card {
        flex: 0 0 250px;
        min-width: 250px;
        padding: 16px;
    }

    .plan-name {
        font-size: 1.125rem;
    }

    .current-price {
        font-size: 1.75rem;
    }

    .plan-features li {
        font-size: 0.8125rem;
    }

    .premium-sticky-bottom {
        padding: 14px 16px;
    }

    /* Bottom Sheets */
    .sheet-content {
        padding: 24px 16px;
    }
}

/* Extra Small Phones (320px - 360px) */
@media (max-width: 360px) {
    .onboarding-wrapper {
        padding: 48px 14px 100px;
    }

    .logo-image {
        width: 64px;
        height: 64px;
    }

    .brand-title {
        font-size: 1.5rem;
    }

    .brand-subtitle {
        font-size: 0.8125rem;
    }

    .feature-card {
        padding: 12px 6px;
    }

    .feature-icon-wrapper {
        width: 36px;
        height: 36px;
    }

    .feature-content h3 {
        font-size: 0.75rem;
    }

    .feature-content p {
        font-size: 0.625rem;
    }

    .step-item {
        padding: 10px;
    }

    .step-content h3 {
        font-size: 0.8125rem;
    }

    .step-content p {
        font-size: 0.6875rem;
    }

    .btn-primary.btn-large {
        padding: 14px 28px;
        font-size: 0.9375rem;
    }

    .login-card {
        padding: 18px;
    }

    .report-grid {
        gap: 8px;
    }

    .report-card {
        padding: 14px 10px;
    }

    .plan-card {
        flex: 0 0 220px;
        padding: 14px;
    }

    .current-price {
        font-size: 1.5rem;
    }
}

/* Very Small Phones (below 320px) */
@media (max-width: 320px) {
    .onboarding-wrapper {
        padding: 44px 12px 100px;
    }

    .logo-image {
        width: 56px;
        height: 56px;
    }

    .brand-title {
        font-size: 1.375rem;
    }

    .features-grid {
        gap: 6px;
    }

    .feature-card {
        padding: 10px 4px;
    }

    .feature-content h3 {
        font-size: 0.6875rem;
    }

    .step-content h3 {
        font-size: 0.75rem;
    }

    .plan-card {
        flex: 0 0 200px;
    }
}

/* Landscape Mode */
@media (max-height: 500px) and (orientation: landscape) {
    .onboarding-wrapper {
        padding: 50px 20px 20px;
        overflow-y: auto;
    }

    .login-wrapper {
        padding: 40px 20px 20px;
        overflow-y: auto;
    }

    .history-type-wrapper {
        padding: 40px 20px 20px;
    }

    .gateway-wrapper {
        padding: 40px 20px 20px;
    }

    .premium-scrollable {
        padding: 40px 16px 140px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn-primary:hover {
        transform: none;
    }

    .report-card:hover {
        transform: none;
    }

    .feature-card:hover {
        transform: none;
    }

    .plan-card:hover {
        transform: none;
    }
}

/* Print Styles */
@media print {

    .toast,
    .loading-overlay,
    .bottom-sheet,
    .theme-toggle {
        display: none !important;
    }
}