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

@media (max-width:1024px){

    .container{
        width:90%;
    }


    .hero{
        padding:100px 0;
    }

    .cards{
        gap:20px;
    }

    .card{
        width:48%;
    }

}

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

@media (max-width:768px){


    .document-builder-card input,
    .document-builder-card select,
    .document-builder-card textarea{
        width:100% !important;
        max-width:100% !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea{
        width:100% !important;
        max-width:100% !important;
    }

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

    .budget-row select,
    .budget-row input{
        width:100% !important;
    }




    .document-builder-card{
        padding:25px;
    }

    .document-builder-card select{
        width:100% !important;
        max-width:100% !important;
    }

    .form-group select{
        width:100% !important;
        max-width:100% !important;
    }

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

    .budget-row select{
        width:100% !important;
    }

    .budget-row input{
        width:100% !important;
    }

    html,
    body{
        overflow-x:hidden;
    }

    .container{
        width:92%;
    }

    .landing-topbar{
        padding:10px 15px;
    }

    .topbar-logo img{
        height:32px;
    }

    .topbar-right{
        gap:6px;
        font-size:12px;
        flex-wrap:wrap;
    }

    .language-switcher{
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
    }

    .nav-links{
        display:none;
    }

    .hero-section{
        padding-top:40px;
    }

    .hero{
        padding:80px 0;
        margin-top:30px;
        text-align:center;
    }

    .hero h1{
        font-size:38px;
        line-height:1.2;
    }

    .hero p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

    .steps{
        grid-template-columns:1fr;
        gap:20px;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .pricing-grid{
        grid-template-columns:1fr;
    }

    .cards{
        flex-direction:column;
        gap:20px;
    }

    .card{
        width:100%;
    }

    .dashboard{
        padding:20px 20px 30px;
    }

    .credits-page{
        padding:20px 20px 30px;
    }


    .dashboard-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .auth-card h1{
        font-size:38px;
        line-height:1.1;
    }

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

    .main-content{
        margin-left:0;
        width:100%;
        padding-top:70px;
    }

    #mobile-menu-btn{
        display:flex;

        position:fixed;
        top:12px;
        left:12px;

        width:46px;
        height:46px;

        align-items:center;
        justify-content:center;

        border:none;
        border-radius:10px;

        background:white;

        font-size:22px;
        cursor:pointer;

        box-shadow:
            0 4px 15px rgba(0,0,0,.10);

        z-index:10001;
    }

    .sidebar{
        position:fixed;

        top:0;
        left:0;

        width:260px;
        height:100vh;

        transform:translateX(-100%);
        transition:transform .3s ease;

        z-index:10000;

        overflow-y:auto;
    }

    .sidebar.active{
        transform:translateX(0);
    }

    /* ======================
       DOCUMENTS
    ====================== */

    .document-actions{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .document-btn{
        width:100%;
    }

    /* ======================
       HISTORY
    ====================== */

    .history-header{
        flex-direction:column;
        align-items:center;
        gap:16px;
    }

    .history-header h1{
        font-size:30px;
        margin:0;
    }

    .history-table{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .history-table-header,
    .history-row{
        min-width:700px;

        display:grid;

        grid-template-columns:
            80px
            140px
            120px
            120px
            120px;
    }

    .history-page{
        max-width:1200px;
        padding:30px 20px;
    }

    /* ======================
       ADMIN
    ====================== */

    .admin-page{
        padding:20px;
        margin-left:0;
    }

    .admin-stats{
        grid-template-columns:1fr;
    }

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

    .admin-btn{
        width:100%;
        min-width:unset;
    }

    .admin-table{
        overflow-x:auto;
    }

    .admin-table table{
        min-width:600px;
    }

    /* ======================
       TABLE WRAPPERS
    ====================== */

    .credit-table-wrapper,
    .payment-history-table{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

}

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

@media (max-width:480px){

    .container{
        width:95%;
    }

    .hero h1{
        font-size:30px;
    }

    .hero p{
        font-size:15px;
    }

    h2{
        font-size:24px;
    }

    .btn{
        width:100%;
    }

    .card{
        padding:20px;
    }

    .step-card{
        padding:20px;
    }

}
/* ======================
   NEW DOCUMENT MOBILE
====================== */

.document-form,
.new-document-form{
    width:100%;
}

.document-form input,
.document-form select,
.document-form textarea,
.new-document-form input,
.new-document-form select,
.new-document-form textarea{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}

.document-form .form-group,
.new-document-form .form-group{
    width:100%;
}


@media (max-width:768px){

    .document-preview{
        width:100%;
        max-width:100%;
    }

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

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

    .signature-section{
        grid-template-columns:1fr !important;
        gap:40px !important;
    }

    .proposal-header{
        padding:15px !important;
    }

    .proposal-card{
        padding:15px !important;
    }

}