/**
 * AuthorShelf — Mobile & tablet responsive overrides
 * Breakpoints: 1024px (tablet/iPad landscape), 768px (tablet portrait), 480px (phone)
 */

/* ============================================
   Site header — phones & tablets
   ============================================ */
@media (max-width: 1024px) {
    .header-top {
        padding: 8px 16px;
        gap: 8px;
    }

    .header-portal .portal-greeting {
        display: none;
    }

    .header-cart .cart-link {
        padding: 8px 12px;
        min-height: 44px;
    }

    .header-portal .portal-btn {
        min-height: 44px;
        padding: 8px 14px;
    }
}

@media (max-width: 768px) {
    .header-top {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .header-welcome {
        flex: 1 1 100%;
        font-size: 0.82rem;
    }

    .header-top .header-cart {
        margin-left: 0 !important;
        order: 2;
    }

    .header-portal {
        order: 3;
        margin-left: auto;
    }

    .header-cart .cart-total {
        display: none;
    }

    .header-main {
        padding: 12px 16px;
    }

    .site-branding img,
    .site-branding .custom-logo {
        max-height: 48px;
        width: auto;
    }
}

@media (max-width: 480px) {
    .header-portal .portal-text {
        display: none;
    }

    .header-portal .portal-btn {
        padding: 10px 12px;
    }
}

/* ============================================
   Author portal — sidebar → horizontal nav
   ============================================ */
@media (max-width: 1024px) {
    .author-portal .dashboard-container {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 0;
    }

    .author-portal .dashboard-sidebar {
        display: block !important;
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        margin: 0 0 12px;
        padding: 0;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(30, 47, 66, 0.08);
        height: auto;
    }

    .author-portal .dashboard-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        padding: 8px 10px;
    }

    .author-portal .dashboard-nav::-webkit-scrollbar {
        display: none;
    }

    .author-portal .dashboard-nav .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 14px;
        min-height: 44px;
        border-left: none !important;
        border-radius: 8px;
        font-size: 0.88rem;
    }

    .author-portal .dashboard-nav .nav-item.active {
        background: var(--as-ink);
        color: #fff;
        border-left: none;
    }

    .author-portal .dashboard-nav .nav-item .nav-icon {
        font-size: 1rem;
    }

    .author-portal--v2 .dashboard-nav .nav-item .nav-icon {
        font-size: inherit;
        width: 18px;
        height: 18px;
    }

    .author-portal .sidebar-support {
        display: none;
    }

    .author-portal .dashboard-main {
        padding: 0;
        min-width: 0;
    }

    .author-portal .dashboard-welcome {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .author-portal .welcome-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .author-portal .welcome-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .author-portal .dashboard-container {
        padding: 12px 10px;
    }

    .author-portal .dashboard-main > .dashboard-tab {
        padding: 14px 12px;
    }

    .author-portal .dashboard-section {
        padding: 18px 14px;
    }

    .author-portal .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .author-portal .project-header {
        flex-direction: column;
        gap: 8px;
    }

    .author-portal .project-actions {
        flex-wrap: wrap;
    }

    .author-portal .project-actions .btn-small {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .author-portal .account-sub-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .author-portal .account-sub-nav::-webkit-scrollbar {
        display: none;
    }

    .author-portal .account-sub-link {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .author-portal .as-section-head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .author-portal .as-section-head-row .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Portal tables — horizontal scroll on narrow screens */
@media (max-width: 768px) {
    .author-portal .royalties-table,
    .author-portal .as-payments-table,
    .author-portal table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .author-portal .royalties-table table,
    .author-portal .as-payments-table {
        min-width: 520px;
    }
}

/* ============================================
   New Title Wizard — stack on mobile/tablet
   ============================================ */
@media (max-width: 1024px) {
    #new-title-wizard-page .wizard-page-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px !important;
    }

    #new-title-wizard-page .wizard-page-layout {
        flex-direction: column !important;
        min-height: auto !important;
    }

    #new-title-wizard-page #wizard-steps-nav {
        width: 100% !important;
        max-height: none;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 8px !important;
        gap: 6px;
        scrollbar-width: none;
    }

    #new-title-wizard-page #wizard-steps-nav::-webkit-scrollbar {
        display: none;
    }

    #new-title-wizard-page #wizard-page-body {
        padding: 16px 14px !important;
    }

    #new-title-wizard-page .two-col,
    #new-title-wizard-page .three-col {
        grid-template-columns: 1fr !important;
    }

    #new-title-wizard-page .review-row {
        flex-direction: column;
        gap: 2px;
    }

    #new-title-wizard-page .review-row .k {
        width: auto;
    }

    #new-title-wizard-page .wizard-stepper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    #new-title-wizard-page .wizard-stepper::-webkit-scrollbar {
        display: none;
    }

    #new-title-wizard-page .wizard-stepper .step {
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    #new-title-wizard-page {
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    #new-title-wizard-page .wizard-page-header > div:last-child {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    #new-title-wizard-page .wizard-page-header button {
        min-height: 44px;
        padding: 10px 14px !important;
    }

    #new-title-wizard-page .wizard-page-layout > div:last-child > div:last-child {
        flex-wrap: wrap;
        justify-content: stretch !important;
    }

    #new-title-wizard-page .wizard-page-layout > div:last-child > div:last-child .btn {
        flex: 1 1 100%;
        min-height: 44px;
    }
}

/* ============================================
   Modals & overlays
   ============================================ */
@media (max-width: 768px) {
    .author-portal .modal-overlay .modal,
    .modal-overlay .modal {
        width: 94% !important;
        max-width: 94% !important;
        margin: 12px auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .author-portal .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .author-portal .modal-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    .as-status-message {
        left: 8px;
        right: 8px;
        transform: none;
        max-width: none;
    }
}

/* ============================================
   WooCommerce — payment options & product pages
   ============================================ */
@media (max-width: 768px) {
    .authorshelf-payment-options {
        max-width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

    .authorshelf-payment-options .border {
        padding: 1rem !important;
    }

    .authorshelf-payment-options label {
        padding: 1rem !important;
        min-height: 44px;
    }

    .authorshelf-payment-options .authorshelf-choose-plan-btn {
        min-height: 48px;
    }

    #as-payment-plans {
        padding: 12px !important;
    }

    #as-payment-plans label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 0;
        min-height: 44px;
    }

    .woocommerce div.product {
        padding-left: 16px;
        padding-right: 16px;
    }

    .woocommerce div.product form.cart {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
    }

    .woocommerce div.product form.cart .quantity {
        width: 100%;
    }

    .woocommerce div.product form.cart .button {
        width: 100%;
        min-height: 48px;
    }
}

/* Product template outer wrapper (inline max-width containers) */
@media (max-width: 768px) {
    .woocommerce .product > div[style*="max-width: 1400px"],
    .single-product div[style*="max-width: 1400px"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

/* ============================================
   Pricing & comparison tables
   ============================================ */
@media (max-width: 768px) {
    .authorshelf-pricing-table-wrapper {
        padding: 20px 10px;
    }

    .authorshelf-comparison-table {
        font-size: 0.82rem;
        min-width: 640px;
    }

    .authorshelf-comparison-table thead th,
    .authorshelf-comparison-table tbody td {
        padding: 12px 8px;
    }
}

/* ============================================
   Footer
   ============================================ */
@media (max-width: 768px) {
    .site-footer {
        padding: 28px 16px 20px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ============================================
   Touch-friendly global targets
   ============================================ */
@media (max-width: 1024px) and (pointer: coarse) {
    .btn,
    .btn-small,
    .mobile-menu-toggle,
    .portal-logout {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main-navigation a,
    .mobile-navigation a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* iPad portrait — slightly tighter hero without crushing layout */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-main-title {
        font-size: 2.75rem;
    }

    .hero-tagline {
        font-size: 1.35rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}