/**
 * Mobile Responsive Fixes for KurdishManhwa
 * Comprehensive mobile support across all pages.
 *
 * Breakpoints:
 * - 1024px: Tablets landscape
 * - 768px: Tablets portrait / large phones
 * - 480px: Small phones
 * - 360px: Very small phones
 *
 * @package MangaReader_Child
 * @since 3.0.0
 */

/* ============================================================
   GLOBAL MOBILE FIXES
   ============================================================ */

/* Prevent horizontal overflow on all devices */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Better box sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Ensure images don't break layout */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   NAVBAR - MOBILE FIXES (now handled by redesign.css)
   ============================================================ */
/* Legacy navbar fixes removed — redesign.css handles all navbar styling */

/* ============================================================
   FOOTER - RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    #footer {
        padding: 20px 12px !important;
    }

    #footer .socialbutton {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    #footer .socialbutton a {
        margin: 0 6px !important;
    }

    #footer .fab, #footer .fas {
        font-size: large !important;
    }

    .footercopyright {
        padding: 10px;
        text-align: center;
    }

    .footercopyright .copyright .txt {
        font-size: 12px;
        line-height: 1.5;
    }

    .flame-footer {
        height: auto !important;
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    #footer .socialbutton a {
        margin: 0 4px !important;
    }

    #footer .fab, #footer .fas {
        font-size: medium !important;
    }
}

/* ============================================================
   CHAPTER PAGE - MOBILE READING
   ============================================================ */

@media (max-width: 768px) {
    /* Chapter navigation buttons */
    .chnav {
        padding: 0 6px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nextprev a[rel=prev],
    .nextprev a[rel=next] {
        padding: 10px 16px !important;
        font-size: 13px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Chapter selector */
    .chnav .selector select {
        padding: 8px 12px;
        font-size: 13px;
        max-width: 100%;
    }

    /* Reading area - images at natural size, scale down on small screens only */
    .chapterbody .entry-content img,
    .chapterbody .entry-content_manga img,
    #readerarea img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Remove unnecessary margins in reading mode */
    .chapterbody {
        padding: 0 !important;
        margin: 0 !important;
    }

    .chapterbody .bs {
        padding: 0;
    }
}

@media (max-width: 480px) {
    .nextprev a[rel=prev],
    .nextprev a[rel=next] {
        padding: 8px 12px !important;
        font-size: 12px;
    }

    .chnav .selector select {
        font-size: 12px;
        border-radius: 12px;
    }
}

/* ============================================================
   ARCHIVE / FILTER PAGE - MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .quickfilter .filters {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .filter.submit {
        grid-area: auto !important;
    }

    .quickfilter .filters .filter button {
        width: 100%;
        padding: 10px 16px;
        font-size: 14px;
        min-height: 44px;
    }

    /* Archive manga grid */
    .listupd {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .listupd .bs {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .listupd {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .quickfilter .filters .filter button {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* ============================================================
   HOME PAGE - MOBILE ENHANCEMENTS
   ============================================================ */

@media (max-width: 768px) {
    /* Content area padding */
    #content {
        padding-bottom: 100px;
    }

    /* Section headings */
    .section-header h2,
    .releases h2,
    .hothome h2 {
        font-size: 1.3rem !important;
    }

    /* Popular/Trending cards */
    .popularslider .bs {
        min-width: 120px;
    }

    /* Latest updates - manga items */
    .utao .uta .imgu {
        width: 80px !important;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .section-header h2,
    .releases h2,
    .hothome h2 {
        font-size: 1.1rem !important;
    }

    .utao .uta .imgu {
        width: 65px !important;
        min-width: 65px;
    }

    /* Chapter list on home */
    .utao .uta .luf ul li a {
        font-size: 12px;
    }

    .utao .uta .luf ul li span.timeago {
        font-size: 10px;
    }
}

/* ============================================================
   SERIES / MANGA PAGE - MOBILE
   ============================================================ */

@media (max-width: 768px) {
    /* Series info layout */
    .seriestucontent {
        flex-direction: column !important;
    }

    /* Cover image */
    .seriestucontent .thumb {
        width: 100% !important;
        max-width: 200px;
        margin: 0 auto 16px !important;
    }

    /* Series meta info */
    .seriestucontent .seriestucon {
        width: 100% !important;
    }

    /* Chapter list items - touch friendly */
    .eplister ul li {
        min-height: 48px;
    }

    .eplister ul li a {
        padding: 12px 8px !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Chapter number */
    .epl-num {
        font-size: 13px;
    }

    .epl-date {
        font-size: 11px;
    }

    /* Premium lock indicator */
    .mpc-lock-icon {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .seriestucontent .thumb {
        max-width: 160px;
    }

    .eplister ul li a {
        padding: 10px 6px !important;
        font-size: 13px;
    }
}

/* ============================================================
   NAVBAR EXTRA - MOBILE LOGIN/SOCIAL ITEMS
   ============================================================ */

@media (max-width: 768px) {
    .socials-menu {
        gap: 8px !important;
    }

    .socials-menu a {
        transform: scale(0.85);
    }

    .socials-menu svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ============================================================
   PLUGIN COMPONENTS - MOBILE OVERRIDES
   ============================================================ */

/* Subscription plans grid on mobile */
@media (max-width: 768px) {
    .mpc-plans-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 8px;
    }

    .mpc-plan-card {
        padding: 20px 16px !important;
    }

    .mpc-plan-name {
        font-size: 1.3rem !important;
    }

    .mpc-plan-price {
        font-size: 2rem !important;
    }
}

/* Subscription status card - mobile */
@media (max-width: 768px) {
    .mpc-sub-status-card {
        padding: 20px 16px !important;
    }

    .mpc-countdown-grid {
        gap: 10px !important;
    }

    .mpc-countdown-item .mpc-countdown-value {
        font-size: 1.5rem !important;
    }
}

/* Profile components on mobile */
@media (max-width: 768px) {
    .mpc-profile-container {
        padding: 0 8px;
    }

    .mpc-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .mpc-profile-header {
        flex-direction: column;
        text-align: center;
    }

    .mpc-profile-avatar {
        margin: 0 auto 12px;
    }
}

@media (max-width: 480px) {
    .mpc-plans-grid {
        padding: 0 4px;
    }

    .mpc-stat-grid {
        grid-template-columns: 1fr !important;
    }

    .mpc-plan-card {
        padding: 16px 12px !important;
    }
}

/* Leaderboard on mobile */
@media (max-width: 768px) {
    .mpc-leaderboard {
        padding: 0 4px;
    }

    .mpc-lb-row {
        gap: 10px;
        padding: 12px 14px;
    }

    .mpc-lb-avatar {
        width: 40px;
        height: 40px;
    }

    .mpc-lb-gold .mpc-lb-avatar {
        width: 48px;
        height: 48px;
    }

    .mpc-lb-name {
        font-size: 0.9em;
    }
}

/* Purchased chapters list on mobile */
@media (max-width: 768px) {
    .mpc-purchased-list .mpc-purchased-item {
        padding: 12px !important;
    }

    .mpc-purchased-item .mpc-purchased-title {
        font-size: 14px;
    }

    .mpc-purchased-item .mpc-purchased-meta {
        font-size: 12px;
    }
}

/* Points history on mobile */
@media (max-width: 768px) {
    .mpc-points-history .mpc-history-item {
        padding: 12px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Team members grid on mobile */
@media (max-width: 768px) {
    .mpc-team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .mpc-team-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   GENERAL CONTENT - MOBILE SPACING
   ============================================================ */

@media (max-width: 768px) {
    /* Reduce padding on containers */
    .wrapper,
    .container,
    .postbody {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Sidebar - stack below content on mobile */
    .sidebar {
        width: 100% !important;
        margin-top: 20px;
    }

    /* WP content images */
    .entry-content img,
    .entry-content_manga img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tables */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pagination */
    .pagination,
    .hpage {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }

    .pagination a,
    .pagination span,
    .hpage a,
    .hpage span {
        min-width: 36px;
        min-height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .wrapper,
    .container,
    .postbody {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ============================================================
   FORMS - TOUCH FRIENDLY
   ============================================================ */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px !important;
        min-height: 44px;
    }

    button,
    input[type="submit"],
    .button,
    .btn {
        min-height: 44px;
        padding: 12px 20px !important;
        font-size: 15px;
    }
}

/* ============================================================
   RTL-SPECIFIC MOBILE FIXES
   ============================================================ */

@media (max-width: 768px) {
    /* User dropdown alignment — legacy, kept for compatibility */
}

/* ============================================================
   SAFE AREA / NOTCH SUPPORT (iPhone X+)
   ============================================================ */

@supports (padding: env(safe-area-inset-bottom)) {
    .navbar {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    #footer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   VERY SMALL SCREENS (360px and below)
   ============================================================ */

@media (max-width: 360px) {
    .listupd {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .membership-page-title {
        font-size: 1.4rem !important;
    }

    /* Tighter chapter list */
    .eplister ul li a {
        padding: 8px 4px !important;
        font-size: 12px;
    }
}