/* Mobile-specific styles */

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

/* 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;
        gap: 8px;
        padding: 5px;
    }

    .header-left,
    .header-center,
    .header-right {
        text-align: center;
        justify-content: center;
        padding: 5px;
    }

    /* Scope logo sizing to header only so the topbar brand doesn't get oversized on mobile */
    .header .logo {
        font-size: 2rem;
    }

    .tagline {
        font-size: 0.9rem;
        margin: 5px 0;
    }

    .price-info {
        font-size: 0.9rem;
        margin: 5px 0;
    }

    .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;
    }

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

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

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

    .section {
        padding: 2px;
    }

    /* Prevent overlap between left brand and centered title in the fixed top bar */
    .topbar-inner {
        /* reserve space for the left brand so the centered title doesn't overlap */
        padding-left: 96px; /* roughly width of the brand on mobile */
        padding-right: 12px;
    }
    .topbar .topbar-brand {
        /* keep brand compact on mobile */
        font-size: 16px;
        line-height: 1.2;
    }
    .topbar .topbar-center {
        font-size: 14px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .journey-header {
        font-size: 20px;
        text-align: left;
    }

    .description {
        font-size: 0.9rem;
        text-align: left;
    }

    .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;
}