/* -------------------------- */
/* 📱 Mobile (<768px) */
/* -------------------------- */
@media (max-width: 767px) {
    main {
        flex-direction: column;
        height: calc(100dvh - 4rem);

    }
    
    aside, section {
        width: 100%;
    }
    
    aside {
        height: 100%;
    }
    
    aside form {
        display: none;
        flex-direction: column;
        gap: 0.25rem;
    }
    /* Class to show it again */
    aside form.show {
        display: flex !important;
    }
    aside input {
        width: 100%;
    }
    
    
    aside .easynav {
        display: flex;
    }
    
    section {
        height: 100%;
        display: none;
    }
    .basic-details {
        grid-template-columns: 1fr 4fr 0fr;
    }
    .basic-details label {
        grid-column-start: 1;
        
    }
    .basic-details label:nth-of-type(even) {
            text-align: left;
    }
    .basic-details input, .basic-details select {
        grid-column-start: 2;
    }
    .order-table {
        height: 200px;
        overflow-y: auto;
    }
    .costs-payments {
        flex-direction: column;
        font-size: 0.75rem;
    }
    .costs {
        margin-top: 0.5rem;
    }
    .btn {
        font-size: 0.6rem;
    }
    
    footer {
        flex-direction: column;
        height: 2.25rem;
        align-items: center;
    }

/* ---------- SECTION > BASIC DETAILS INFO FLEX ------------*/    
    .row-2-2-1 {
    flex-direction: column;
    margin-top: 0;
    }

    .row-2-2-1 .col {
        width: 100%;
        margin-top: 0.25rem;
    }

    .row-2-2-1 label {
        max-width: 20%;
    }

    .row-2-2-1 input, .row-2-2-1 select {
        width: 79%;
    }
}


/* -------------------------- */
/* 💻 Tablet (768px–1280px) */
/* -------------------------- */
@media (max-width: 1280px) and (min-width: 768px) {
  aside {
    width: 30%;
  }

  section {
    width: 70%;
  }
}