/* Kanit Font - Offline */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/Kanit-Light.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Kanit-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Kanit-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/Kanit-SemiBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Kanit-Bold.ttf') format('truetype');
    font-display: swap;
}

/* Override Tailwind's default font-sans with Kanit */
.font-sans {
    font-family: 'Kanit', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
}

/* Ensure body uses Kanit by default */
body {
    font-family: 'Kanit', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Font size increases by 2px */
.font-plus-2px {
    font-size: calc(1rem + 2px);
}

.font-plus-2px-sm {
    font-size: calc(0.875rem + 2px);
}

.font-plus-2px-xs {
    font-size: calc(0.75rem + 2px);
}

.swal-button-font {
    font-size: calc(0.875rem + 2px) !important;
}

/* Modal fixes for mobile/iPad scrolling */
.modal-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Mobile First Approach - Extra Small Devices (phones, 576px and down) */
@media (max-width: 575.98px) {
    .modal-container {
        padding: 0.5rem !important;
        align-items: flex-start !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-margin-mobile {
        height: calc(var(--spacing) * 15);
    }

    .modal-panel {
        max-height: calc(100vh - 1rem) !important;
        margin: 0.5rem !important;
        width: calc(100vw - 1rem) !important;
        max-width: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 0.75rem !important;
    }

    /* Mobile modal content adjustments */
    .modal-panel .grid {
        grid-template-columns: 1fr !important;
    }

    .modal-panel .flex.justify-between {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }

    .modal-panel .flex.gap-2 {
        justify-content: stretch !important;
        flex-direction: column !important;
    }

    .modal-panel button {
        width: 100% !important;
    }
}

/* Small Devices (landscape phones, tablets, 576px - 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .modal-container {
        padding: 1rem !important;
        align-items: flex-start !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }

    .modal-panel {
        max-height: calc(100vh - 2rem) !important;
        margin: 1rem !important;
        width: calc(100vw - 2rem) !important;
        max-width: 90vw !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-panel .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
}

/* Medium Devices (tablets, 768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .modal-container {
        padding: 1.5rem !important;
        align-items: center !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }

    .modal-panel {
        max-height: calc(100vh - 3rem) !important;
        margin: 1.5rem !important;
        width: 85vw !important;
        max-width: 85vw !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-panel .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .modal-container {
        padding: 2rem !important;
        align-items: center !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }

    .modal-panel {
        max-height: calc(100vh - 4rem) !important;
        margin: 2rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .modal-panel {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    .modal-panel input,
    .modal-panel select,
    .modal-panel button {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    .modal-panel button {
        min-height: 44px !important; /* iOS touch target minimum */
        padding: 0.75rem 1rem !important;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .modal-container {
        align-items: flex-start !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .modal-panel {
        max-height: calc(100vh - 1rem) !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
}