/* ========================================= */


/*  DESKTOP RESOLUTION OPTIMIZATIONS */


/* ========================================= */


/* Small Desktop / Large Laptop (1024px - 1280px) */

@media (min-width: 1024px) and (max-width: 1280px) {
    .app {
        padding: 14px;
        gap: 14px;
    }
    .toolbar {
        padding: 11px;
        gap: 10px;
    }
    .btn,
    .btn-secondary,
    .file-input {
        font-size: 13px;
        padding: 9px 14px;
    }
    .card {
        padding: 13px;
    }
    .card h3 {
        font-size: 14px;
        margin-bottom: 11px;
    }
    .form-field label {
        font-size: 11px;
    }
    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 13px;
        padding: 9px 11px;
    }
    .a4 {
        transform: scale(0.85);
        transform-origin: top center;
    }
    .items-table {
        font-size: 12px;
    }
    .items-table th,
    .items-table td {
        padding: 9px 7px;
    }
    .items-table input,
    .items-table textarea,
    .items-table select {
        font-size: 12px;
        padding: 7px 9px;
    }
}


/* Standard Laptop (1280px - 1440px) */

@media (min-width: 1281px) and (max-width: 1440px) {
    .app {
        padding: 15px;
        gap: 15px;
    }
    .toolbar {
        padding: 12px;
        gap: 11px;
    }
    .btn,
    .btn-secondary,
    .file-input {
        font-size: 14px;
        padding: 10px 16px;
    }
    .card {
        padding: 14px;
    }
    .card h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }
    .form-field label {
        font-size: 12px;
    }
    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 14px;
        padding: 10px 12px;
    }
    .a4 {
        transform: scale(0.92);
        transform-origin: top center;
    }
    .items-table {
        font-size: 13px;
    }
    .items-table th,
    .items-table td {
        padding: 10px 8px;
    }
    .items-table input,
    .items-table textarea,
    .items-table select {
        font-size: 13px;
        padding: 8px 10px;
    }
}


/* Large Desktop / Full HD (1441px - 1920px) */

@media (min-width: 1441px) and (max-width: 1920px) {
    .app {
        padding: 16px;
        gap: 16px;
    }
    .toolbar {
        padding: 12px;
        gap: 12px;
    }
    .btn,
    .btn-secondary,
    .file-input {
        font-size: 14px;
        padding: 10px 18px;
    }
    .card {
        padding: 15px;
    }
    .card h3 {
        font-size: 16px;
        margin-bottom: 13px;
    }
    .form-field label {
        font-size: 12px;
    }
    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 14px;
        padding: 11px 13px;
    }
    .a4 {
        transform: scale(1);
        transform-origin: top center;
    }
    .items-table {
        font-size: 14px;
    }
    .items-table th,
    .items-table td {
        padding: 11px 9px;
    }
    .items-table input,
    .items-table textarea,
    .items-table select {
        font-size: 14px;
        padding: 9px 11px;
    }
}


/* Extra Large Desktop / 2K (1921px - 2560px) */

@media (min-width: 1921px) and (max-width: 2560px) {
    .app {
        padding: 20px;
        gap: 20px;
        max-width: 1800px;
        margin: 0 auto;
    }
    .toolbar {
        padding: 14px;
        gap: 14px;
    }
    .btn,
    .btn-secondary,
    .file-input {
        font-size: 15px;
        padding: 11px 20px;
    }
    .card {
        padding: 18px;
    }
    .card h3 {
        font-size: 17px;
        margin-bottom: 15px;
    }
    .form-field label {
        font-size: 13px;
    }
    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 15px;
        padding: 12px 15px;
    }
    .a4 {
        transform: scale(1.1);
        transform-origin: top center;
    }
    .items-table {
        font-size: 15px;
    }
    .items-table th,
    .items-table td {
        padding: 12px 10px;
    }
    .items-table input,
    .items-table textarea,
    .items-table select {
        font-size: 15px;
        padding: 10px 12px;
    }
    .floating-whatsapp {
        width: 64px;
        height: 64px;
    }
    .floating-whatsapp svg {
        width: 34px;
        height: 34px;
    }
    .demo-modal {
        max-width: 550px;
        padding: 40px 35px;
    }
}


/* Ultra Wide / 4K (> 2560px) */

@media (min-width: 2561px) {
    body {
        font-size: 18px;
    }
    .app {
        padding: 24px;
        gap: 24px;
        max-width: 2200px;
        margin: 0 auto;
    }
    .toolbar {
        padding: 16px;
        gap: 16px;
    }
    .btn,
    .btn-secondary,
    .file-input {
        font-size: 16px;
        padding: 12px 24px;
    }
    .card {
        padding: 22px;
    }
    .card h3 {
        font-size: 19px;
        margin-bottom: 17px;
    }
    .form-field label {
        font-size: 14px;
    }
    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 16px;
        padding: 14px 17px;
    }
    .a4 {
        transform: scale(1.25);
        transform-origin: top center;
    }
    .items-table {
        font-size: 16px;
    }
    .items-table th,
    .items-table td {
        padding: 14px 12px;
    }
    .items-table input,
    .items-table textarea,
    .items-table select {
        font-size: 16px;
        padding: 11px 14px;
    }
    .floating-whatsapp {
        width: 72px;
        height: 72px;
    }
    .floating-whatsapp svg {
        width: 40px;
        height: 40px;
    }
    .demo-modal {
        max-width: 650px;
        padding: 50px 45px;
    }
    .demo-modal h2 {
        font-size: 32px;
    }
    .demo-modal p {
        font-size: 18px;
    }
}


/* Hover Enhancement for Desktop */

@media (min-width: 1024px) {
    .btn:hover,
    .btn-secondary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
    }
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    }
    .floating-whatsapp:hover {
        transform: translateY(-4px) scale(1.05);
    }
}


/* ========================================= */


/*  LOADING SCREEN RESPONSIVE */


/* ========================================= */


/* Small Desktop (1024px - 1280px) */

@media (min-width: 1024px) and (max-width: 1280px) {
    .emd-spinner {
        width: 120px !important;
        height: 120px !important;
    }
    .emd-brand-text {
        font-size: 38px !important;
        letter-spacing: 6px !important;
        margin: 35px 0 28px !important;
    }
    .emd-loading-message {
        font-size: 15px !important;
    }
    .emd-progress-container {
        width: 280px !important;
        height: 5px !important;
    }
}


/* 2K Resolution (1921px - 2560px) */

@media (min-width: 1921px) and (max-width: 2560px) {
    .emd-spinner {
        width: 160px !important;
        height: 160px !important;
    }
    .emd-logo-center {
        width: 80px !important;
        height: 80px !important;
    }
    .emd-text {
        font-size: 28px !important;
    }
    .emd-brand-text {
        font-size: 56px !important;
        letter-spacing: 10px !important;
        margin: 50px 0 40px !important;
    }
    .emd-loading-message {
        font-size: 19px !important;
    }
    .emd-progress-container {
        width: 400px !important;
        height: 7px !important;
    }
}


/* 4K+ Resolution (> 2560px) */

@media (min-width: 2561px) {
    .emd-spinner {
        width: 200px !important;
        height: 200px !important;
    }
    .emd-logo-center {
        width: 100px !important;
        height: 100px !important;
    }
    .emd-text {
        font-size: 36px !important;
    }
    .emd-brand-text {
        font-size: 72px !important;
        letter-spacing: 14px !important;
        margin: 70px 0 60px !important;
    }
    .emd-loading-message {
        font-size: 24px !important;
    }
    .emd-progress-container {
        width: 550px !important;
        height: 9px !important;
    }
}