/* Mobile-specific styles */

/* Apply mobile padding globally since we only have mobile version */
.grid-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.desktop-main-grid {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.section {
    padding-left: 21px !important;
    padding-right: 21px !important;
}

/* Mobile Layout - Hide mobile elements by default */
.mobile-layout {
    display: none;
}

/* Ensure desktop grid doesn't apply on mobile */
@media (max-width: 1023px) {
    .desktop-main-grid {
        display: block;
    }

    .desktop-steps-column,
    .desktop-preview-column {
        width: 100%;
        padding: 0;
        position: static;
        max-height: none;
    }

    .desktop-preview-column .section {
        background: white;
        border: none;
        padding: 20px;
        min-height: auto;
    }

    .desktop-recommendations-section {
        margin: 20px auto 0;
        padding: 0 10px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Show mobile-only elements on small screens */
    .mobile-only {
        display: block;
    }

    .mobile-layout {
        display: block;
    }

    .grid-container {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 5px 24px !important; /* increased left/right padding by 5mm (19px) */
    }

    /* Override desktop grid on mobile */
    .desktop-main-grid {
        display: block !important;
        gap: 0 !important;
        padding: 5px 24px !important; /* increased left/right padding by 5mm (19px) */
    }

    .desktop-steps-column,
    .desktop-preview-column {
        width: 100% !important;
        padding: 0 !important;
        position: static !important;
        max-height: none !important;
        margin: 0 !important;
    }

    .desktop-preview-column .section {
        background: white !important;
        border: none !important;
        padding: 20px 39px !important; /* increased left/right padding by 5mm (19px) */
        min-height: auto !important;
        box-shadow: none !important;
    }

    .desktop-recommendations-section {
        margin: 20px auto 0 !important;
        padding: 0 29px !important; /* increased left/right padding by 5mm (19px) */
    }

    .header-left,
    .header-center,
    .header-right {
        text-align: center;
        justify-content: center;
        padding: 7px; /* increased by 30% from 5px */
    }

    /* Scope logo sizing to header only so the topbar brand doesn't get oversized on mobile */
    .header .logo {
        font-size: 3.4rem; /* increased by 30% from 2.6rem */
    }

    .tagline {
        font-size: 1.2rem; /* increased by 30% from 0.9rem */
        margin: 7px 0; /* increased by 30% from 5px */
    }

    .price-info {
        font-size: 1.2rem; /* increased by 30% from 0.9rem */
        margin: 7px 0; /* increased by 30% from 5px */
    }

    .features {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1px;
    }

    .feature {
        flex: 1;
        min-width: 100px;
    }

    .feature-label {
        font-size: 0.8rem;
        padding: 3px 4px;
    }

    .features-list {
        gap: 13px; /* increased by 30% from 10px */
        padding: 0 32px; /* increased by 30% from 0 10px, then +5mm (19px) */
    }

    .feature-item {
        font-size: 0.85em;
    }

    .feature-check {
        font-size: 1em;
    }

    .hero-image-container {
        flex-direction: column;
        gap: 8px;
    }

    .hero-divider {
        width: 100%;
        height: 2px !important;
        margin: 8px 0;
    }

    .hero-image-wrapper {
        width: 100%;
    }

    .hero-image-label-left,
    .hero-image-label-right {
        font-size: 0.7em !important;
        padding: 3px 6px !important;
        bottom: 6px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-cta {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1em !important;
    }

    .price-subtext {
        font-size: 0.8em !important;
        font-weight: 400 !important;
    }

    .supported-docs {
        margin-top: 12px !important;
        padding: 0 29px; /* increased left/right padding by 5mm (19px) */
    }

    .supported-docs-line,
    .supported-countries-line {
        font-size: 0.8em !important;
        line-height: 1.4;
    }

    .hero-banner img {
        max-height: 150px !important;
    }

    .hero-image-container {
        padding: 0 29px !important; /* increased left/right padding by 5mm (19px) */
    }

    .hero-image-wrapper {
        max-width: 100% !important;
    }

    .hero-image-single {
        max-height: 150px !important;
    }

    .hero-image-label-left,
    .hero-image-label-right {
        font-size: 0.7em !important;
        padding: 3px 6px !important;
        bottom: 6px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header-right {
        margin-top: 39px !important; /* increased by 30% from 30px */
        padding-top: 39px !important; /* increased by 30% from 30px */
    }

    .footer {
        margin-top: 40px !important;
        padding-top: 30px !important;
    }

    /* Main content mobile adjustments */
    .main-content .grid-container {
        gap: 10px;
    }

    .main-content {
        margin-top: 5px;
    }

    .section {
        padding: 2px 21px !important; /* increased left/right padding by 5mm (19px) */
    }

    /* Topbar navigation on mobile */
    .topbar-inner {
        padding: 10px 16px;
        justify-content: space-between;
    }
    
    .topbar .topbar-brand {
        position: static;
        font-size: 21px;
        line-height: 1.2;
        flex-shrink: 0;
    }
    
    .topbar-nav {
        gap: 16px;
    }
    
    .topbar-nav-link {
        font-size: 14px;
        padding: 4px 0;
    }
    
    .topbar .topbar-center {
        display: none; /* Hide center title on mobile */
    }

    .journey-header {
        font-size: 22px;
        text-align: left;
        margin-bottom: 6px;
    }

    .journey-subtext {
        font-size: 0.9em;
        margin-bottom: 20px;
    }

    .description {
        font-size: 1em;
        text-align: left;
        margin-bottom: 12px;
    }

    .step-helper-text {
        font-size: 0.8em;
        margin-bottom: 24px;
    }

    .empty-upload-state {
        min-height: 250px;
        padding: 30px 15px;
    }

    .upload-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .empty-upload-title {
        font-size: 1em;
        margin-bottom: 6px;
    }

    .empty-upload-subtext {
        font-size: 0.85em;
        max-width: 100%;
    }

    .photo-container {
        min-height: 200px;
        /* Improve touch interaction */
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        cursor: grab;
        margin: 20px 0;
        background-color: #f8f9fa;
        border: 2px dashed #d1d5db;
        border-radius: 8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .photo-container:active {
        cursor: grabbing;
    }

    .upload-area {
        padding: 5px;
    }

    .upload-text {
        font-size: 0.9rem;
    }

    .button-group {
        flex-direction: column;
        gap: 4px;
    }

    /* Optimize mobile button interactions */
    .btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Mobile layout specific styling */
    .mobile-section {
        padding: 15px;
    }
}

/* Mobile-specific form styling */
.form-group {
    margin-bottom: 8px;
}

/* Mobile-specific footer styling */
.footer {
    margin-top: 10px;
    padding: 10px;
}

/* Increase height of Pay & download button by 20% */
#donateDownloadBtn {
    height: 43px !important; /* 36px * 1.2 = 43.2px, rounded to 43px */
    padding-top: 10px !important; /* 8px * 1.2 = 9.6px, rounded to 10px */
    padding-bottom: 10px !important;
    font-size: 15px !important; /* Slightly increase font size for better proportion */
}