/* Responsive Styles */

/* Tablets */
@media (max-width: 850px) {
    .gradient-main-title { 
        font-size: 2.1rem; 
    }
    
    .hero-subtitle-text { 
        font-size: 1rem; 
    }

    .before-after-showcase-container { 
        flex-direction: column; 
        align-items: center; 
    }
    
    .center-arrow-circle { 
        transform: rotate(90deg); 
        margin: -4px 0; 
    }
    
    .before-card, 
    .after-card { 
        width: 100%; 
        max-width: 440px; 
    }
    
    .before-img-box { 
        height: auto; 
        overflow: visible; 
        min-height: 0; 
        max-height: none; 
    }
    
    .after-grid-box { 
        height: 200px !important; 
        overflow: hidden; 
        padding: 4px !important; 
    }
    
    .before-img-box img { 
        height: auto; 
        max-height: 360px; 
        object-fit: contain; 
    }
    
    .after-grid-box img { 
        max-width: 100%; 
        max-height: 100%; 
        width: auto; 
        height: auto; 
        object-fit: contain; 
    }

    .modal-crop-body-layout {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }
    
    .right-sidebar-panel { 
        max-width: 500px; 
        width: 100%; 
        margin: 0 auto; 
    }
    
    .left-crop-viewport-box { 
        height: 340px; 
    }
    
    .canvas-crop-frame-wrapper { 
        touch-action: none; 
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .step3-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .step3-queue-column {
        max-width: 100%;
    }
}

/* Mobile phones */
@media (max-width: 640px) {
    body { 
        padding: 14px 10px 40px 10px; 
    }
    
    .app-container { 
        gap: 20px; 
    }
    
    .gradient-main-title { 
        font-size: 1.7rem; 
        letter-spacing: -0.4px; 
    }
    
    .hero-subtitle-text { 
        font-size: 0.9rem; 
    }

    .hero-upload-card { 
        padding: 28px 14px; 
        min-height: 200px; 
        border-radius: 18px; 
    }
    
    .cloud-icon-circle { 
        width: 54px; 
        height: 54px; 
        margin-bottom: 12px; 
    }
    
    .upload-click-title { 
        font-size: 1.25rem; 
    }
    
    .upload-drag-sub { 
        font-size: 0.82rem; 
        margin-bottom: 14px; 
    }
    
    .pro-tip-pill-badge { 
        font-size: 0.76rem; 
        padding: 6px 12px; 
    }

    .demo-section-title { 
        font-size: 1.4rem; 
    }
    
    .demo-subtitle-desc { 
        font-size: 0.88rem; 
    }
    
    .before-img-box { 
        height: auto; 
        overflow: visible; 
        min-height: 0; 
        max-height: none; 
    }
    
    .after-grid-box { 
        height: 320px !important; 
        overflow: hidden; 
        padding: 4px !important; 
    }
    
    .before-img-box img { 
        height: auto; 
        max-height: 280px; 
        object-fit: contain; 
    }
    
    .after-grid-box img { 
        max-width: 100%; 
        max-height: 100%; 
        width: auto; 
        height: auto; 
        object-fit: contain; 
    }

    .perfect-photo-modal-card { 
        border-radius: 0;
    }

    .modal-step-view {
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 100%;
    }
    
    .modal-card-top-bar { 
        padding: 12px 14px; 
    }
    
    .modal-card-title { 
        font-size: 1.05rem; 
    }
    
    .top-mode-close-group { 
        gap: 8px; 
    }
    
    .link-manual-mode { 
        font-size: 0.78rem; 
    }

    .modal-crop-body-layout {
        padding: 12px;
        gap: 12px;
        min-height: auto;
        overflow: visible;
    }

    .left-crop-viewport-box { 
        height: 300px; 
        border-radius: 12px;
    }
    
    .canvas-crop-frame-wrapper { 
        touch-action: none; 
    }

    .right-sidebar-panel {
        max-width: 100%;
        width: 100%;
        overflow-y: auto;
        max-height: calc(100vh - 60px);
    }

    .preset-select-card {
        max-width: 100%;
        overflow: hidden;
    }

    .passport-size-select-dropdown {
        width: 100%;
        font-size: 0.88rem;
        padding: 10px 12px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .preset-top-tabs-row {
        gap: 4px;
    }

    .preset-tab-btn { 
        font-size: 0.82rem; 
        padding: 8px 0; 
        gap: 4px; 
        flex: 1;
    }

    .custom-size-inputs-row {
        gap: 8px;
    }

    .btn-crop-photo-submit {
        width: 100%;
        padding: 14px;
        font-size: 1rem;
    }

    .bottom-action-stack {
        gap: 8px;
    }

    .btn-stack-purple,
    .btn-stack-green-queue,
    .btn-stack-download-single {
        width: 100%;
        padding: 12px;
        font-size: 0.88rem;
    }

    .tool-tabs-navbar-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 2px;
        padding: 3px;
        justify-content: flex-start;
    }
    
    .tool-tabs-navbar-row::-webkit-scrollbar { 
        display: none; 
    }
    
    .tool-tab-btn { 
        font-size: 0.68rem; 
        padding: 6px 3px; 
        min-width: 44px; 
        flex-shrink: 0; 
    }
    
    .tool-tab-btn i { 
        font-size: 0.82rem; 
    }

    .color-correction-card { 
        padding: 12px; 
        gap: 10px; 
    }

    .eraser-modal-dialog { 
        height: 95vh; 
        height: 95dvh; 
        border-radius: 12px; 
    }
    
    .eraser-bottom-control-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }
    
    .eraser-mode-btn-group { 
        width: 100%; 
        justify-content: center; 
    }
    
    .eraser-sliders-center-group {
        width: 100%;
        justify-content: space-around;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .eraser-right-action-group { 
        width: 100%; 
        justify-content: space-between; 
    }

    .download-modal-btns {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 16px 20px !important;
    }

    .rotation-btns-row { 
        flex-direction: column; 
    }

    .slider-tune-group {
        margin-bottom: 10px;
    }
}

/* Small phones */
@media (max-width: 420px) {
    body { 
        padding: 8px 6px 28px 6px; 
    }
    
    .app-container { 
        gap: 14px; 
    }
    
    .gradient-main-title { 
        font-size: 1.42rem; 
    }
    
    .hero-upload-card { 
        padding: 20px 10px; 
        border-radius: 14px; 
    }
    
    .upload-click-title { 
        font-size: 1.1rem; 
    }
    
    .cloud-icon-circle { 
        width: 46px; 
        height: 46px; 
    }

    .modal-card-top-bar { 
        flex-wrap: wrap; 
        gap: 6px; 
        padding: 10px 10px; 
    }
    
    .modal-card-title { 
        font-size: 0.95rem; 
    }

    .modal-crop-body-layout {
        padding: 8px;
        gap: 10px;
    }
    
    .left-crop-viewport-box { 
        height: 260px; 
    }
    
    .canvas-crop-frame-wrapper { 
        touch-action: none; 
    }
    
    .tool-tab-btn { 
        min-width: 38px; 
        font-size: 0.62rem; 
        padding: 5px 2px; 
    }

    .print-controls-grid { 
        grid-template-columns: 1fr !important; 
        gap: 8px !important; 
    }
    
    .print-sliders-grid { 
        grid-template-columns: 1fr !important; 
        gap: 8px !important; 
    }
}