/* Responsive Design - Improved for Better Visibility */



/* Large screens (1200px and up) */

@media (min-width: 1200px) {

    .container {

        max-width: 1400px;

    }

    

    .hero h1 {

        font-size: 4.5rem;

    }

    

    .hero p {

        font-size: 1.5rem;

    }

    

    .features-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



/* Medium screens (768px to 1199px) */

@media (max-width: 1199px) {

    .hero {

        flex-direction: column;

        text-align: center;

        padding: 80px 0;

    }

    

    .hero-content {

        padding-left: 2rem;

        padding-right: 2rem;

        margin-bottom: 2rem;

    }

    

    .hero h1 {

        font-size: 3.5rem;

    }

    

    .hero p {

        font-size: 1.3rem;

    }

    

    .features-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

    }

}



/* Small screens (tablets - 768px and down) */

@media (max-width: 768px) {

    .hero-image {

        display: none !important;

    }

    .container {

        padding: 0 15px;

    }

    

    /* Typography adjustments for better readability */

    h1 { font-size: 2.5rem; }

    h2 { font-size: 2rem; }

    h3 { font-size: 1.5rem; }

    h4 { font-size: 1.2rem; }

    

    p {

        font-size: 1rem;

        line-height: 1.6;

    }

    

    /* Header adjustments */

    .navbar {

        padding: 1rem 0;

    }

    

    .navbar .container {

        flex-wrap: wrap;

    }

    

    .navbar-brand .logo {

        height: 50px;

    }

    

    .navbar-menu {

        order: 3;

        width: 100%;

        display: none;

        margin-top: 1rem;

    }

    

    .navbar-menu.active {

        display: block;

    }

    

    .navbar-nav {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

    

    .nav-link {

        padding: 12px 16px;

        font-size: 1.1rem;

        border-radius: 8px;

        background-color: var(--background-color);

    }

    

    .navbar-toggle {

        display: flex;

        order: 2;

    }

    

    .navbar-cta {

        order: 1;

    }

    

    /* Hero section */

    .hero {

        padding: 60px 0;

        min-height: 80vh;

        flex-direction: column;

        text-align: center;

    }

    

    .hero-content {

        padding-left: 2rem;

        padding-right: 2rem;

    }

    

    .hero h1 {

        font-size: 2.8rem;

        margin-bottom: 1.5rem;

    }

    

    .hero p {

        font-size: 1.1rem;

        margin-bottom: 2rem;

    }

    

    .hero-image {

        margin-top: 2rem;

    }

    

    .hero-image {

        margin-top: 1.5rem;

    }

    

    .hero-image img {

        width: 100%;

        height: auto;

        border: 3px solid rgba(255, 255, 255, 0.2);

        object-fit: cover;

    }

    

    /* Features section */

    .features {

        padding: 60px 0;

    }

    

    .features h2 {

        font-size: 2.2rem;

        margin-bottom: 2.5rem;

    }

    

    .features-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .feature {

        padding: 2rem 1.5rem;

    }

    

    .feature h3 {

        font-size: 1.6rem;

    }

    

    .feature p {

        font-size: 1.1rem;

    }

    

    /* Booking preview */

    .booking-preview {

        padding: 60px 0;

    }

    

    .booking-preview h2 {

        font-size: 2.2rem;

    }

    

    .booking-preview p {

        font-size: 1.1rem;

    }

    

    /* Buttons */

    .btn {

        padding: 12px 24px;

        font-size: 1rem;

    }

    

    .cta-button {

        padding: 14px 28px;

        font-size: 1.1rem;

    }

    

    /* Forms */

    .form-row {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .form-input,

    .form-select,

    .form-textarea {

        padding: 12px 16px;

        font-size: 1rem;

    }

    

    .form-label {

        font-size: 1rem;

        margin-bottom: 0.5rem;

    }

    

    /* Calendar */

    .calendar-day {

        padding: 1rem;

        min-height: 50px;

        font-size: 1rem;

    }

    

    .calendar-day-header {

        padding: 0.8rem;

        font-size: 0.8rem;

    }

    

    .calendar-legend {

        gap: 1rem;

        flex-wrap: wrap;

    }

    

    .legend-item {

        font-size: 0.9rem;

    }

    

    /* Footer */

    .footer-content {

        grid-template-columns: 1fr;

        gap: 2rem;

        text-align: center;

    }

    

    .footer-section h3,

    .footer-section h4 {

        font-size: 1.3rem;

    }

    

    .social-links {

        justify-content: center;

    }

    

    /* Gallery */

    .gallery-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .gallery-item.featured {

        grid-column: span 1;

    }

    

    .gallery-item.featured .gallery-image {

        height: 250px;

    }

    

    .gallery-filters {

        gap: 0.5rem;

    }

    

    .filter-btn {

        padding: 0.5rem 0.8rem;

        font-size: 0.9rem;

    }

    

    /* FAQ */

    .faq-nav-links {

        flex-direction: column;

        gap: 0.5rem;

    }

    

    .faq-nav-link {

        padding: 0.8rem 1rem;

        font-size: 1rem;

    }

    

    .faq-question {

        padding: 1rem;

        font-size: 1rem;

    }

    

    .faq-answer {

        padding: 0 1rem;

    }

    

    .faq-item.active .faq-answer {

        padding: 0 1rem 1rem 1rem;

    }

    

    /* Contact page */

    .contact-content {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .contact-method {

        flex-direction: column;

        text-align: center;

        padding: 1.5rem;

    }

    

    .contact-icon {

        margin-right: 0;

        margin-bottom: 1rem;

    }

    

    /* Alerts */

    .alert {

        padding: 1rem;

        font-size: 1rem;

    }

    

    /* Utility classes */

    .text-center { text-align: center; }

    .text-left { text-align: left; }

    .text-right { text-align: right; }

}



/* Extra small screens (phones - 480px and down) */

@media (max-width: 480px) {

    .container {

        padding: 0 10px;

    }

    

    /* Typography for very small screens */

    h1 { font-size: 2rem; }

    h2 { font-size: 1.8rem; }

    h3 { font-size: 1.4rem; }

    h4 { font-size: 1.1rem; }

    

    p {

        font-size: 0.95rem;

    }

    

    /* Header */

    .navbar-brand .logo {

        height: 40px;

    }

    

    .nav-link {

        padding: 10px 12px;

        font-size: 1rem;

    }

    

    /* Hero section */

    .hero {

        padding: 40px 0;

        min-height: 70vh;

        flex-direction: column;

        text-align: center;

    }

    

    .hero-content {

        padding-left: 1.5rem;

        padding-right: 1.5rem;

    }

    

    .hero h1 {

        font-size: 2.2rem;

        margin-bottom: 1rem;

    }

    

    .hero p {

        font-size: 1rem;

        margin-bottom: 1.5rem;

    }

    

    .hero-image img {

        width: 100%;

        height: auto;

        object-fit: cover;

    }

    

    /* Features */

    .features {

        padding: 40px 0;

    }

    

    .features h2 {

        font-size: 1.8rem;

        margin-bottom: 2rem;

    }

    

    .feature {

        padding: 1.5rem 1rem;

    }

    

    .feature h3 {

        font-size: 1.4rem;

    }

    

    .feature p {

        font-size: 1rem;

    }

    

    /* Booking preview */

    .booking-preview {

        padding: 40px 0;

    }

    

    .booking-preview h2 {

        font-size: 1.8rem;

    }

    

    .booking-preview p {

        font-size: 1rem;

    }

    

    /* Buttons */

    .btn {

        padding: 10px 20px;

        font-size: 0.95rem;

    }

    

    .cta-button {

        padding: 12px 24px;

        font-size: 1rem;

    }

    

    /* Forms */

    .form-input,

    .form-select,

    .form-textarea {

        padding: 10px 14px;

        font-size: 0.95rem;

    }

    

    .form-label {

        font-size: 0.95rem;

    }

    

    /* Calendar */

    .calendar-day {

        padding: 0.8rem;

        min-height: 45px;

        font-size: 0.9rem;

    }

    

    .calendar-day-header {

        padding: 0.6rem;

        font-size: 0.75rem;

    }

    

    /* Gallery */

    .gallery-image {

        height: 200px;

    }

    

    .gallery-item.featured .gallery-image {

        height: 200px;

    }

    

    .gallery-filters {

        gap: 0.3rem;

    }

    

    .filter-btn {

        padding: 0.4rem 0.6rem;

        font-size: 0.8rem;

    }

    

    /* FAQ */

    .faq-nav-link {

        padding: 0.6rem 0.8rem;

        font-size: 0.9rem;

    }

    

    .faq-question {

        padding: 0.8rem;

        font-size: 0.95rem;

    }

    

    /* Contact */

    .contact-method {

        padding: 1rem;

    }

    

    .contact-icon {

        width: 40px;

        height: 40px;

        font-size: 1rem;

    }

    

    /* Alerts */

    .alert {

        padding: 0.8rem;

        font-size: 0.95rem;

    }

    

    /* Stats */

    .stat-number {

        font-size: 1.5rem;

    }

    

    .stat-label {

        font-size: 0.8rem;

    }

}



/* Landscape orientation adjustments */

@media (max-width: 768px) and (orientation: landscape) {

    .hero {

        min-height: 50vh;

        padding: 40px 0;

    }

    

    .hero h1 {

        font-size: 2.5rem;

    }

    

    .hero p {

        font-size: 1.1rem;

    }

    

    .features {

        padding: 40px 0;

    }

    

    .booking-preview {

        padding: 40px 0;

    }

}



/* High DPI displays */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    .hero-image img {

        image-rendering: -webkit-optimize-contrast;

        image-rendering: crisp-edges;

    }

}



/* Print styles */

@media print {

    .navbar,

    .navbar-toggle,

    .cta-button,

    .btn,

    .footer {

        display: none !important;

    }

    

    .hero {

        background: white !important;

        color: black !important;

        padding: 20px 0 !important;

    }

    

    .hero h1 {

        color: black !important;

    }

    

    .hero p {

        color: black !important;

    }

    

    .container {

        max-width: none !important;

        padding: 0 !important;

    }

    

    body {

        font-size: 12pt !important;

        line-height: 1.4 !important;

    }

    

    h1, h2, h3, h4, h5, h6 {

        page-break-after: avoid;

    }

    

    .feature,

    .gallery-item,

    .faq-item {

        page-break-inside: avoid;

    }

} 



/* --- HONZAA2 BOOKING DETAIL MODAL & DASHBOARD MOBILE FIX --- */

@media (max-width: 600px) {

  .container {

    max-width: 100vw !important;

    width: 100vw !important;

    padding: 0 2vw !important;

    margin: 0 !important;

    box-sizing: border-box !important;

  }

  .modal-content {

    width: 99vw !important;

    min-width: unset !important;

    max-width: 100vw !important;

    padding: 8px 2vw !important;

    border-radius: 8px !important;

    font-size: 0.98rem;

    overflow-x: auto !important;

    box-sizing: border-box !important;

  }

  .booking-details {

    margin: 10px 0 !important;

    font-size: 0.98rem !important;

    word-break: break-word !important;

  }

  .booking-details h3, .booking-details h4 {

    font-size: 1.1rem !important;

    margin-bottom: 10px !important;

    word-break: break-word !important;

  }

  .detail-row {

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 2px !important;

    padding: 6px 0 !important;

    font-size: 0.97rem !important;

    word-break: break-word !important;

  }

  .detail-label {

    margin-bottom: 2px !important;

    font-size: 0.97rem !important;

    word-break: break-word !important;

  }

  .action-buttons {

    flex-direction: column !important;

    gap: 8px !important;

    width: 100% !important;

    margin-top: 12px !important;

  }

  .action-buttons .btn {

    width: 100% !important;

    font-size: 1rem !important;

    padding: 12px 0 !important;

  }

}