/* Mobile Styles for Account Manager
   Complete mobile-specific CSS separated from main stylesheet
   Author: Claude
   Created: March 9, 2025
*/

/* Tablet Breakpoint - 1024px and below */
@media (max-width: 1024px) {
    /* Section Navigation */
    .section-nav {
        display: none; /* Hide section navigation on tablets and mobile */
    }

    /* Pricing Plans */
    .plan-cards {
        gap: 1rem;
    }

    /* Preview Section */
    .preview-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .preview-container {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* About Section */
    /* .about-content {
        padding: 3rem 0.75rem;
    } */
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .features-grid {
        gap: 1.5rem;
    }
    
    .feature-card, 
    .feature-card-wide {
        padding: 1.75rem;
    }
}

/* Mobile Breakpoint - 768px and below */
@media (max-width: 768px) {
    /* Global Changes */
    html {
        scroll-snap-type: none; /* Disable scroll snapping on mobile */
    }

    .section {
        padding: 4rem 1.5rem;
        height: auto; /* Allow sections to take natural height */
        min-height: 100vh; /* Set minimum height instead of fixed */
        scroll-snap-align: none; /* Disable scroll snap */
    }

    .content-grid {
        gap: 2rem;
    }

    /* Typography */
    h1 {
        font-size: 2.5rem;
        white-space: normal; /* Allow text to wrap */
    }

    .subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    /* UI Elements */
    .time-value {
        font-size: 2rem;
    }

    .time-label {
        font-size: 0.75rem;
    }

    .status-indicator {
        top: 1.5rem;
        right: 1.5rem;
    }

    /* About Section & Feature Cards */
    .features-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 1.25rem;
    }
    
    .feature-card-wide {
        grid-column: 1; /* Reset to single column */
        margin-top: 0; /* No extra margin needed */
    }
    
    .feature-card, 
    .feature-card-wide {
        padding: 1.75rem;
    }
    
    .feature-title {
        font-size: 1.25rem;
    }
    
    .feature-icon {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    /* Plan Cards */
    .plan-cards {
        flex-direction: column;
    }

    .plan-card {
        width: 100%;
    }

    /* Forms */
    .contact-form {
        padding: 1.5rem;
    }

    .form-group-row {
        flex-direction: column;
        gap: 1rem;
    }

    .username-field,
    .uid-field {
        flex: 1;
        width: 100%;
    }

    /* Preview Section */
    .preview-section {
        padding: 4rem 1rem;
    }

    .preview-content {
        width: 100%;
        padding: 0;
    }

    .preview-container {
        margin: 0 auto;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .preview-tabs {
        padding: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar Firefox */
        display: flex;
        justify-content: flex-start;
    }

    .preview-tabs::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari/Edge */
    }

    .preview-tab {
        padding: 1rem;
        white-space: nowrap;
        flex: 0 0 auto;
        font-size: 0.9rem;
    }

    .preview-display {
        padding: 1.25rem;
    }

    .preview-tab-content {
        gap: 1.25rem;
    }

    .preview-tab-content.active {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    .preview-tab-content > * {
        width: 100%;
        margin: 0 auto;
    }

    .preview-image {
        margin: 0 auto;
        border-radius: 6px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }

    .preview-image img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        object-fit: contain;
    }

    .preview-description {
        padding: 1.25rem;
        margin: 0 auto;
        border-radius: 6px;
    }

    .preview-description h3 {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }

    .preview-description p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Social Links */
    .social-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Background Elements */
    .blob-1,
    .blob-2 {
        opacity: 0.08; /* Reduce opacity for less distraction */
    }

    /* UI Adjustments */
    .scroll-indicator {
        bottom: 1rem;
    }
    
    /* Modal Adjustments */
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }

    .modal-header h3 {
        font-size: 1.25rem;
    }

    .guide-step h4 {
        font-size: 1.1rem;
    }
}

/* Small Mobile Breakpoint - 480px and below */
@media (max-width: 480px) {
    /* Global Changes */
    .section {
        padding: 3rem 1rem;
    }

    /* Typography */
    h1 {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.75rem;
        text-align: center;
    }
    
    .section-subtitle {
        font-size: 0.95rem;
        text-align: center;
    }

    /* Countdown */
    .countdown {
        gap: 0.75rem;
    }

    .time-value {
        font-size: 1.5rem;
    }

    .time-label {
        font-size: 0.7rem;
    }

    /* Forms */
    .form-group {
        margin-bottom: 1rem;
    }

    .form-control {
        padding: 0.75rem;
    }

    .submit-button {
        padding: 0.75rem 1.5rem;
        width: 100%; /* Full width button on small screens */
    }

    /* Preview Section */
    .preview-section {
        padding: 3rem 0.75rem;
    }

    .preview-tab {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .preview-image {
        margin: 0 auto;
        border-radius: 4px;
    }

    .preview-image img {
        border-radius: 4px;
    }

    .preview-display {
        padding: 1rem 0.75rem;
    }

    .preview-description {
        padding: 1rem;
        margin: 0 auto;
    }

    .preview-description h3 {
        font-size: 1rem;
    }

    .preview-description p {
        font-size: 0.85rem;
    }

    /* Feature Cards */
    .features-grid {
        gap: 1rem;
    }
    
    .feature-card,
    .feature-card-wide {
        padding: 1.5rem;
    }
    
    .feature-title {
        font-size: 1.1rem;
    }
    
    .feature-description {
        font-size: 0.9rem;
    }
    
    .feature-icon {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    /* About Content */
    /* .about-content {
        padding: 3rem 0.75rem;
    } */

    /* Hero Section */
    .hero-section .content-grid {
        gap: 1.5rem;
    }

    /* Compact Countdown */
    .countdown {
        gap: 0.5rem;
    }

    .time-unit {
        padding: 0.5rem;
    }
    
    /* Confirmation Message */
    .confirmation-message {
        padding: 2rem;
    }

    .confirmation-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .confirmation-message h3 {
        font-size: 1.5rem;
    }

    .confirmation-message p {
        font-size: 1rem;
    }
}

/* Ultra-small devices - 360px and below */
@media (max-width: 360px) {
    /* Typography */
    h1 {
        font-size: 1.75rem;
    }

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

    /* Preview Tabs */
    .preview-tab {
        padding: 0.6rem;
        font-size: 0.8rem;
    }

    .preview-display {
        padding: 0.75rem 0.5rem;
    }

    /* Countdown */
    .time-value {
        font-size: 1.25rem;
    }

    .time-label {
        font-size: 0.65rem;
    }
    
    /* Feature Cards */
    .feature-card,
    .feature-card-wide {
        padding: 1.25rem;
    }
    
    .feature-title {
        font-size: 1rem;
    }
    
    /* Confirmation Message */
    .confirmation-message {
        padding: 1.5rem;
    }

    .confirmation-icon {
        font-size: 2.5rem;
    }

    .confirmation-message h3 {
        font-size: 1.25rem;
    }
}

/* iOS Safari Fixes */
@supports (-webkit-touch-callout: none) {
    .section {
        height: -webkit-fill-available;
    }
    
    .section.about-section {
        min-height: -webkit-fill-available;
    }
}