/* ==========================================================
   MVPROMOCODES MOBILE
   Version 1.0
========================================================== */

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1100px){

    .container{

        width:min(100%,calc(100% - 40px));

    }

    .hero{

        padding:80px 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-content p{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-card{

        max-width:620px;

        margin:auto;

    }

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .feature-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .guides-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .page-grid{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:static;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .container{

        width:calc(100% - 28px);

    }

    .section{

        padding:70px 0;

    }

    .hero{

        padding:65px 0;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-card{

        padding:30px;

    }

    .hero-card h2{

        font-size:40px;

    }

    .hero-stats{

        gap:25px;

    }

    .hero-stats strong{

        font-size:24px;

    }

    .quick-answer{

        padding:30px;

    }

    .promo-card{

        padding:28px;

    }

    .feature-box{

        padding:28px;

    }

    .author-card{

        flex-direction:column;

        text-align:center;

    }

    .author-card img{

        margin:auto;

    }

}

/* ==========================================================
   MOBILE NAVIGATION
========================================================== */

@media (max-width:768px){

    .navbar{

        min-height:72px;

    }

    .mobile-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:46px;

        height:46px;

        border:none;

        background:#F8FAFC;

        border-radius:12px;

        cursor:pointer;

        color:#0F172A;

        transition:.3s;

    }

    .mobile-toggle:hover{

        background:#ECFDF5;

    }

    .nav-menu{

        position:absolute;

        top:100%;

        left:0;

        right:0;

        display:none;

        flex-direction:column;

        gap:0;

        padding:20px;

        background:#fff;

        border-top:1px solid #E2E8F0;

        box-shadow:0 15px 40px rgba(15,23,42,.08);

    }

    .nav-menu.show{

        display:flex;

    }

    .nav-menu a{

        width:100%;

        padding:16px 0;

        border-bottom:1px solid #F1F5F9;

    }

    .nav-menu a:last-child{

        border-bottom:none;

    }

}

/* ==========================================================
   TABLES
========================================================== */

@media (max-width:768px){

    .table-wrapper{

        overflow-x:auto;

    }

    .compare-table{

        min-width:650px;

    }

}

/* ==========================================================
   FOOTER
========================================================== */

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-column{

        text-align:center;

    }

}

/* ==========================================================
   FAQ
========================================================== */

@media (max-width:768px){

    .faq-question{

        padding:20px;

        padding-right:55px;

        font-size:17px;

    }

    .faq-answer{

        padding:0 20px;

    }

    .faq-item.active .faq-answer{

        padding:0 20px 20px;

    }

}

/* ==========================================================
   STICKY CTA
========================================================== */

@media (max-width:768px){

    .sticky-cta{

        left:14px;

        right:14px;

        bottom:14px;

    }

}

/* ==========================================================
   ARTICLE
========================================================== */

@media (max-width:768px){

    .article-content{

        font-size:1rem;

    }

    .article-content h2{

        font-size:1.9rem;

    }

    .article-content h3{

        font-size:1.45rem;

    }

}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width:480px){

    .hero{

        padding:55px 0;

    }

    .hero h1{

        font-size:1.9rem;

    }

    .hero-card{

        padding:24px;

    }

    .hero-card h2{

        font-size:34px;

    }

    .promo-code{

        font-size:34px;

    }

    .promo-card{

        padding:24px;

    }

    .feature-box{

        padding:24px;

    }

    .quick-answer{

        padding:24px;

    }

    .author-card{

        padding:28px;

    }

    .author-card img{

        width:100px;

        height:100px;

    }

    .section-title h2{

        font-size:1.9rem;

    }

}

/* ==========================================================
   LANDSCAPE PHONES
========================================================== */

@media (max-width:900px) and (orientation:landscape){

    .hero{

        padding:60px 0;

    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (pointer:coarse){

    .btn{

        min-height:48px;

    }

    .copy-btn{

        min-height:50px;

    }

    .mobile-toggle{

        min-width:48px;

        min-height:48px;

    }

}

/* ==========================================================
   MOBILE UTILITIES
========================================================== */

.hide-mobile{

    display:block;

}

.show-mobile{

    display:none;

}

@media (max-width:768px){

    .hide-mobile{

        display:none !important;

    }

    .show-mobile{

        display:block !important;

    }

}