/* Custom styles for ComfortCamp to supplement Tailwind CSS */

/* Prevent horizontal overflow scrolling on mobile */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* For creating a uniform grid of images like Airbnb */
.aspect-w-1 { --tw-aspect-w: 1; }
.aspect-h-1 { --tw-aspect-h: 1; }
.aspect-ratio-1-1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 Aspect Ratio */
}
.aspect-ratio-1-1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
}
::-webkit-scrollbar-thumb {
    background: #94a3b8; /* slate-400 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}

/* Print CSS Styles for Printable Surat Jalan & Booking Order (BEO) */
@media print {
    body * {
        visibility: hidden !important;
    }
    #printable-surat-jalan, #printable-surat-jalan *,
    #beo-printable-area, #beo-printable-area *,
    #printable-area, #printable-area *,
    .a4-page, .a4-page * {
        visibility: visible !important;
    }
    #printable-surat-jalan {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: none !important;
        z-index: 99999 !important;
    }
    #beo-printable-area {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: none !important;
    }
    .no-print {
        display: none !important;
    }
}

/* Touch-friendly UX utilities for Mobile & Tablet */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Hide scrollbars for smooth swipeable tab bars on mobile */
.scrollbar-none::-webkit-scrollbar {
    display: none !important;
}
.scrollbar-none {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Prevent iOS Safari automatic zoom on form input focus */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}