/* ==============================================
   mobile.css - Comprehensive Mobile Optimization
   ============================================== */

/* ===== iOS Auto-Zoom Prevention =====
   iOS Safari zooms in when input font-size < 16px */
@media (max-width: 768px) {
    .form-input,
    .form-select,
    .form-textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        /* iOS Safari zoom prevention — must stay 16px literal */
        font-size: 16px !important;
    }
}

/* ===== Touch Target Minimums (44px) ===== */
@media (max-width: 768px) {
    /* Hamburger button */
    .hamburger-btn {
        width: 44px;
        height: 44px;
    }

    /* Drawer close button */
    .mobile-drawer-close {
        width: 44px;
        height: 44px;
    }

    /* Quantity buttons */
    .qty-btn {
        width: 44px;
        height: 44px;
        font-size: var(--text-xl);
    }

    .qty-input {
        height: 44px;
        width: 48px;
    }

    /* Bottom tab items - ensure adequate touch area */
    .bottom-tab-item {
        min-height: 44px;
        padding: var(--space-2) 0;
    }

    /* Generic buttons minimum height */
    .btn {
        min-height: 44px;
        padding: var(--space-25) var(--space-4);
    }

    .btn-sm {
        min-height: 36px;
        padding: var(--space-15) var(--space-3);
    }

    /* Card wishlist button - 44px min touch target (iOS HIG) */
    .card-wishlist-btn {
        width: 44px;
        height: 44px;
    }

    /* Price preset buttons */
    .price-preset-btn {
        min-height: 36px;
        padding: var(--space-15) var(--space-3);
    }

    /* Filter tabs */
    .filter-tab {
        min-height: 40px;
        padding: var(--space-2) var(--space-35);
    }

    /* Mypage filter tabs */
    .mypage-filter-tab {
        min-height: 44px;
        padding: var(--space-25) var(--space-35);
    }
}

/* ===== Safe Area Insets (Notched Devices) ===== */
@supports (padding: env(safe-area-inset-top)) {
    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .mobile-drawer {
        padding-top: env(safe-area-inset-top);
    }

    @media (max-width: 768px) {
        .container {
            padding-left: max(var(--space-4), env(safe-area-inset-left));
            padding-right: max(var(--space-4), env(safe-area-inset-right));
        }
    }
}

/* ===== Responsive Typography ===== */
@media (max-width: 768px) {
    h1 {
        font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
    }

    h2 {
        font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
    }

    /* Landing hero */
    .landing-hero-desc {
        font-size: var(--text-base);
    }

    /* Footer readability */
    .footer-desc {
        font-size: var(--text-md);
    }

    .footer-link {
        font-size: var(--text-md);
    }

    .footer-copyright {
        font-size: var(--text-sm);
    }

    /* Search input */
    .header-search-input {
        font-size: var(--text-lg);
    }
}

/* ===== Mobile Layout Improvements ===== */
@media (max-width: 768px) {
    /* Container padding */
    .container {
        padding: 0 var(--space-3);
    }

    /* Main content reduced top padding */
    .main-content {
        padding: var(--space-4) 0 var(--space-8);
    }

    /* Page titles */
    .cart-title,
    .checkout-title,
    .mypage-title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-4);
    }

    /* Footer stacked layout */
    .footer-top {
        flex-direction: column;
        gap: var(--space-4);
    }

    .footer-links {
        gap: var(--space-3) var(--space-4);
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .site-footer {
        padding: var(--space-6) 0;
    }
}

/* ===== Landing Page Mobile ===== */
@media (max-width: 480px) {
    .landing-hero {
        min-height: 360px;
        padding: var(--space-10) var(--space-4);
    }

    .landing-hero-badge {
        font-size: var(--text-2xs);
        padding: var(--space-1) var(--space-25);
    }

    .landing-hero-desc {
        font-size: var(--text-md);
    }

    .landing-btn {
        padding: var(--space-25) var(--space-5);
        font-size: var(--text-md);
        width: 100%;
        justify-content: center;
    }

    .landing-hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    /* Stats: 2x2 grid tighter */
    .landing-stats {
        gap: var(--space-2);
        margin-top: -1.5rem;
    }

    .landing-stat-card {
        padding: var(--space-3);
    }

    .landing-stat-value {
        font-size: var(--text-2xl);
    }

    .landing-stat-label {
        font-size: var(--text-2xs);
    }

    /* Deal cards: single column on very small screens */
    .landing-deals {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    /* Section padding tighter */
    .landing-section {
        padding: var(--space-8) 0;
    }

    .landing-section-header h2 {
        font-size: var(--text-xl);
    }
}

/* ===== Cart Page Mobile ===== */
@media (max-width: 480px) {
    .cart-item {
        padding: var(--space-3);
    }

    .cart-item-name {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .cart-item-subtotal {
        min-width: auto;
    }

    .cart-actions {
        flex-direction: column;
    }

    .cart-actions .btn {
        width: 100%;
    }
}

/* ===== Checkout Mobile ===== */
@media (max-width: 768px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .checkout-card {
        padding: var(--space-4);
    }

    .checkout-item-name {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .checkout-discount-input-row {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .checkout-discount-input-row .form-input {
        flex: 1;
        min-width: 80px;
    }

    .checkout-submit-btn {
        position: sticky;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-3));
        z-index: var(--z-sticky);
    }
}

/* ===== Mypage Mobile ===== */
@media (max-width: 480px) {
    .mypage-card {
        padding: var(--space-4);
        flex-direction: column;
        align-items: stretch;
    }

    .mypage-user-info {
        gap: var(--space-3);
    }

    .mypage-stats {
        justify-content: space-around;
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
    }

    .mypage-section {
        padding: var(--space-4);
    }

    .mypage-summary-cards {
        gap: var(--space-2);
    }

    .mypage-summary-card {
        padding: var(--space-3);
    }

    .mypage-summary-card-value {
        font-size: var(--text-xl);
    }

    /* Quick nav: 3 columns on small, 2 columns on very small */
    .mypage-quick-nav {
        gap: var(--space-2);
    }

    .mypage-nav-item {
        padding: var(--space-3) var(--space-2);
        font-size: var(--text-xs);
        gap: var(--space-15);
    }

    .mypage-nav-item svg {
        width: 18px;
        height: 18px;
    }

    /* Referral section responsive */
    .mypage-referral-row {
        flex-direction: column;
        gap: var(--space-3);
    }

    .mypage-referral-code {
        font-size: var(--text-lg);
    }

    .mypage-referral-link-row {
        flex-direction: column;
        gap: var(--space-2);
    }

    .mypage-referral-link-row .btn {
        width: 100%;
    }

    /* Grade summary responsive */
    .mypage-grade-summary {
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Order item responsive */
    .mypage-order-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .mypage-order-detail {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 360px) {
    .mypage-quick-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Product Detail Mobile ===== */
@media (max-width: 768px) {
    .detail-name {
        font-size: var(--text-xl);
    }

    .detail-price,
    .detail-price-sale {
        font-size: var(--text-2xl);
    }

    .detail-add-cart {
        position: sticky;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-3));
        z-index: var(--z-sticky);
        margin: var(--space-3) calc(-1 * var(--space-3)) 0;
        border-radius: 0;
    }

    .detail-description {
        margin-top: var(--space-8);
        padding-top: var(--space-6);
    }

    .detail-related {
        margin-top: var(--space-8);
        padding-top: var(--space-6);
    }

    .detail-tabs {
        margin-top: var(--space-8);
        padding-top: var(--space-6);
    }
}

/* ===== Table Responsive ===== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
    .table-responsive {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
    }

    .table-responsive .data-table {
        min-width: 600px;
    }

    /* Admin layout mobile */
    .admin-main {
        padding: var(--space-3);
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .admin-page-title {
        font-size: var(--text-2xl);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-value {
        font-size: var(--text-2xl);
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar .form-input {
        max-width: 100%;
    }
}

/* ===== Lightbox Mobile ===== */
@media (max-width: 768px) {
    .lightbox-content {
        max-width: 95vw;
        max-height: 80vh;
    }

    .lightbox-close {
        top: -2rem;
        right: 0;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        font-size: var(--text-3xl);
    }
}

/* ===== Horizontal Scroll Indicators ===== */
@media (max-width: 768px) {
    .filter-tabs,
    .filter-sub-tabs,
    .mypage-mobile-nav,
    .mypage-filter-tabs,
    .header-nav {
        position: relative;
        -webkit-mask-image: linear-gradient(
            to right,
            black calc(100% - 2rem),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            black calc(100% - 2rem),
            transparent 100%
        );
    }

    /* Remove mask when scrolled to end (JS adds this class) */
    .scroll-end {
        -webkit-mask-image: linear-gradient(
            to left,
            black calc(100% - 2rem),
            transparent 100%
        );
        mask-image: linear-gradient(
            to left,
            black calc(100% - 2rem),
            transparent 100%
        );
    }

    .scroll-middle {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 2rem,
            black calc(100% - 2rem),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 2rem,
            black calc(100% - 2rem),
            transparent 100%
        );
    }
}

/* ===== Product Grid Small Screen ===== */
@media (max-width: 374px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

/* ===== Auth Pages Mobile ===== */
@media (max-width: 480px) {
    .auth-card {
        padding: var(--space-6) var(--space-4);
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .auth-container {
        padding: var(--space-4) var(--space-2);
        align-items: flex-start;
        padding-top: var(--space-12);
    }

    .auth-title {
        font-size: var(--text-2xl);
    }
}

/* ===== Shop Header Mobile ===== */
@media (max-width: 480px) {
    .shop-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .shop-logo {
        width: 48px;
        height: 48px;
    }

    .shop-name {
        font-size: var(--text-2xl);
    }
}

/* ===== Bottom Tab Safe Area ===== */
@media (max-width: 768px) {
    /* Sticky elements above bottom tab */
    .detail-add-cart,
    .checkout-submit-btn {
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ===== Tap Highlight & Active States ===== */
@media (max-width: 768px) {
    a, button {
        -webkit-tap-highlight-color: transparent;
    }

    .product-card:active {
        transform: scale(0.98);
    }

    .btn:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    .mypage-nav-item:active,
    .mypage-summary-card:active,
    .bottom-tab-item:active {
        transform: scale(0.95);
    }
}

/* ===== Pull-to-refresh prevention on iOS ===== */
@media (max-width: 768px) {
    body {
        overscroll-behavior-y: contain;
    }
}

/* ===== Pagination Mobile ===== */
@media (max-width: 480px) {
    .pagination {
        gap: var(--space-1);
    }

    .pagination a,
    .pagination span {
        min-width: 36px;
        height: 36px;
        font-size: var(--text-sm);
    }
}

/* ===== Notification Page Mobile ===== */
@media (max-width: 480px) {
    .notification-item {
        padding: var(--space-3);
    }
}

/* ===== Banner Slider Mobile Touch ===== */
@media (max-width: 768px) {
    .landing-banner-slider {
        touch-action: pan-x;
    }

    .landing-banner-dots {
        bottom: var(--space-2);
    }
}

/* ===== Responsive Images ===== */
img { max-width: 100%; height: auto; }

/* ===== Compare Page Mobile ===== */
@media (max-width: 768px) {
    .compare-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .compare-table {
        min-width: 600px;
    }
}

/* ===== Chat Page Mobile ===== */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 120px - 56px);
    }
    .chat-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        width: 80%;
        max-width: 300px;
        z-index: var(--z-dropdown);
        background: var(--color-card-bg);
        transition: left 0.3s ease;
    }
    .chat-sidebar.active {
        left: 0;
    }
    .chat-messages {
        padding: var(--space-3);
    }
    .chat-input-area {
        padding: var(--space-2);
    }
}

/* ===== PDP Sticky Bottom Bar (Mobile) ===== */
.pdp-sticky-bar {
    display: none; /* Hidden on desktop and by default */
}

@media (max-width: 768px) {
    .pdp-sticky-bar {
        display: block;
        position: fixed;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        background: var(--color-card-bg);
        border-top: 1px solid var(--color-border);
        padding: var(--space-2) var(--space-3);
        z-index: var(--z-sticky);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }

    .pdp-sticky-bar.visible {
        transform: translateY(0);
    }

    .pdp-sticky-bar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .pdp-sticky-price {
        display: flex;
        flex-direction: column;
        gap: var(--space-05);
    }

    .pdp-sticky-price-sale {
        font-size: var(--text-lg);
        font-weight: var(--font-bold);
        color: var(--color-text);
    }

    .pdp-sticky-price-original {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        text-decoration: line-through;
    }

    .pdp-sticky-cart-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-sticky-bar {
        transition: none;
    }
}

/* ===== Landscape Mode (Short Viewport) ===== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Compact bottom tab bar instead of hiding */
    .bottom-tab-bar {
        height: 36px;
        padding: 0;
        flex-direction: row;
        gap: 0;
    }
    .bottom-tab-item {
        min-height: 36px;
        padding: var(--space-05) var(--space-3);
        flex-direction: row;
        gap: var(--space-1);
        font-size: var(--text-2xs);
    }
    .bottom-tab-item svg {
        width: 16px;
        height: 16px;
    }
    .bottom-tab-label {
        font-size: var(--text-2xs);
    }
    .site-header { position: static; }
    .main-content { padding-bottom: var(--space-10); }
    .detail-add-cart,
    .checkout-submit-btn { position: static; }
}