/* Overall styling applied to the entire website */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #fafafa;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.main-container {
    width: 85%; /* Adjust this value according to your needs */
    max-width: none;
    margin: auto; /* Center the content */
}

.text-orange {
    color: orange !important;
}

/* Button base style */
.btn-custom {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #1a1a2e;
    color: #e0e0e0;
    border: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-custom:hover, .btn:focus {
    background-color: #23234e;
    color: #ffffff;
}

/* Button size modifiers */
.btn-custom-lg {
    padding: .5rem 1rem; /* Increase padding */
    font-size: 1.25rem; /* Increase font size */
    line-height: 1.5; /* Set line height */
    border-radius: .3rem; /* Set border radius */
}

/* Styling for containers used in all pages */
.container {
    max-width: 960px;
}


/*#1747A4*/ 
/* Styling for the header and navbar components in all pages */
.header, .navbar {
    background-color: #1747a4 !important;
}


/* Styling for the brand and navigation links in the header and navbar */
.navbar-brand, .nav-link, .header a {
    color: #e0e0e0 !important;
}
/* Styling for hover and focus states of navigation links in the header and navbar */



/* Styling for navigation links in the navbar */
.navbar-nav .nav-link {
    margin-right: 25px; /* Add spacing to the right of each item */
}

/* Styling for the active navigation item */
.nav-item.active .nav-link {
    color: #ffffff !important;
}


/* Styling for the footer component in all pages */
footer {
    background-color: #1747a4;
    color: #e0e0e0;
    text-align: center;
    padding: 10px;
    width: 100%;
}

/* Styling for links in the footer */
.footer a {
    color: white;
}

.footer a:hover {
    color: white;
}

ul {
    list-style-type: none;
}



.faq-header {
    text-align: center;
    color: #333;
    padding: 20px;
}

.faq-section-header {
    color: #666;
    margin-top: 40px;
    margin-bottom: 20px;
}

.faq-box {
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

.faq-dt {
    font-weight: bold;
}

.faq-dd {
    padding-left: 20px;
}


/* Styling specific to elements in search.html */
#search-rooms, #search-budget {
    margin-bottom: 15px;
}

.question-box {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
  }


.card {
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card-title {
    font-weight: 700;
    color: #333;
}




#pagination .btn {
    background-color: #2a2a4e;
    color: #f0f0f0;
    border-color: #2a2a4e;
}

#pagination .btn:hover {
    background-color: #23234e;
    color: #ffffff;
    border-color: #23234e;
}




/* Style for home.html*/

.home-main {
    padding: 3rem 0!important; /* Increase vertical padding */
    background-color: #f8f9fa!important; /* Set light background color */
}

/* Mobile-specific overrides for .home-main */
/* Mobile-specific overrides for .home-main */
@media (max-width: 767px) {
    .home-main {
        padding-top: 0 !important;       /* Mobile: 0 top padding - hero image will be flush */
    }
}

/* Modify existing .card style or add this if not present for this specific context */
#search-results .card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    overflow: hidden; /* Add this to clip child elements to the card's border-radius */
  }
  
  /*
    Target the card-body specifically within your search results to remove padding.
    The d-flex and flex-column classes are already in your HTML structure, which is good.
  */
  #search-results .card .card-body {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    /* padding-top can remain if you want space between content above and buttons,
       or you can set it to what the .card-buttons top padding was (e.g., 10px)
       and remove top padding from .card-buttons */
    /* e.g., padding-top: 1.25rem; /* Or your default card-body padding */
  }
.home-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 960px; /* Set maximum width for better readability on larger screens */
}


.home-section-title {
    font-weight: 700!important; /* Increase font weight */
}

/* ═════════ NAV BAR DESKTOP (≥ 992 px) ═════════ */
@media (min-width: 992px) {

    /* base link look (bigger & nicer) */
    .navbar-nav .nav-link{
        position: relative;
        padding: 0.65rem 1.25rem;   /* ⬆ larger click-area */
        font-size: 1.05rem;         /* ⬆ text size */
        font-weight: 500;
        line-height: 1.2;
        transition: color .25s ease;
    }





    .navbar-nav .nav-link:not(.profile-link):hover::after,
    .nav-item.active .nav-link:not(.profile-link)::after{
        width: 100%;
    }

   

    /* === pill-style “Profile” link ===================== */
    .profile-link{
        background: linear-gradient(135deg, #ff9800, #ffb74d);
        color: #fff !important;
        padding: 8px 28px !important;   /* wider pill */
        font-size: 1.05rem;
        border-radius: 32px;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .profile-link:hover,
    .profile-link:focus{
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0,0,0,.3);
        color: #fff !important;        /* stay white */
    }

    /* keep pill readable when it’s the current page */
    .nav-item.active .profile-link{
        color: #fff !important;        /* override orange */
    }
}

/* profile.html <style> or site-wide css */
#favourites .btn-danger   { margin-left: .5rem; }
#fav-btn i.fa-heart       { color:#dc3545; }   /* filled */
#fav-btn i.fa-heart-o     { color:#dc3545; }   /* outline */


.home-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff; /* Set white background */
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125); /* Add border */
    border-radius: .25rem; /* Add slight border radius */
}


.home-shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; /* Add small shadow */
}


.home-card-title {
    margin-bottom: .75rem; /* Add bottom margin */
}


.home-card-text:last-child {
    margin-bottom: 0; /* Remove bottom margin for last text item */
}




.home-lead {
    font-size: 1.25rem; /* Increase font size */
    font-weight: 300; /* Set font weight */
}



.contact-now {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-btn-wrapper {
    display: flex;
    align-items: center;
}

.contact-btn-wrapper .icon-wrapper {
    margin-right: 10px; /* Adjust the spacing between the icon and the text */
}

.contact-btn-wrapper .icon {
    width: 20px; /* Adjust the size of the icon if needed */

}

/* Mobile-specific styles — ONLY the navbar hamburger modal */
/* ===== Navbar hamburger modal (phones + tablets up to <992px) ===== */
@media (max-width: 991.98px) {
    /* Fill the viewport and respect iOS safe areas */
    #navbarModal.modal {
      position: fixed;
      inset: 0;
      overflow: hidden;
      padding: env(safe-area-inset-top, 10px)
               env(safe-area-inset-right, 10px)
               env(safe-area-inset-bottom, 10px)
               env(safe-area-inset-left, 10px);
    }
  
    /* Base dialog — no Bootstrap margins fighting centering */
    #navbarModal .modal-dialog {
      margin: 0 auto;
      width: 100%;
      max-width: none;
      height: auto;
    }
  
    /* True centering for the fullscreen dialog */
    #navbarModal .modal-dialog.modal-fullscreen {
      display: grid;
      place-items: center;
      min-height: 100vh; /* fallback */
    }
    @supports (height: 100svh) {
      #navbarModal .modal-dialog.modal-fullscreen { min-height: 100svh; } /* correct on iPad */
    }
  
    /* The dark menu “card” */
    #navbarModal .modal-content {
      width: min(92vw, 380px);
      background: #212529;
      border-radius: 15px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
  
    #navbarModal .modal-header {
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      display: flex;
      justify-content: center;
      position: relative;
    }
    #navbarModal .modal-header .close {
      position: absolute;
      top: 10px; right: 10px;
      font-size: 1.5rem;
      color: #fff;
    }
  
    #navbarModal .modal-body {
      padding: 15px 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
  
    #navbarModal .modal-body .nav-item {
      width: 100%;
      text-align: center;
      margin-bottom: 15px;
      display: flex;
      justify-content: center;
    }
  
    #navbarModal .modal-body .nav-link {
      width: 100%;
      padding: 10px 0;
      font-size: 1.2rem;
      color: #fff;
      border-radius: 5px;
      transition: background .3s ease, color .3s ease;
      text-align: center;
      display: block;
    }
    #navbarModal .modal-body .nav-link:hover {
      background: rgba(255,165,0,.2);
      color: #ffa500;
    }
  
    #navbarModal .modal-body .nav-item:last-child { margin-bottom: 0; }
  }
  
  /* Optional: keep the dark skin even if someone opens the modal above 992px (e.g. dev tools) */
  #navbarModal .modal-content { background: #212529; }
  #navbarModal .modal-header .close { color: #fff; }
  #navbarModal .modal-body .nav-link { color: #fff; }
  #navbarModal .modal-body .nav-link:hover { background: rgba(255,165,0,.2); color: #ffa500; }
  
  



/* Custom styling for the hamburger menu button */
.navbar-toggler {
    background-color: transparent; /* Transparent background for a sleek look */
    border: 2px solid #fff; /* White border for clarity */
    padding: 8px 12px; /* Subtle padding */
    border-radius: 4px; /* Slightly rounded corners */
    transition: all 0.3s ease; /* Smooth transition for all properties */
}

.navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight white overlay on hover */
    border-color: #ccc; /* Light gray border on hover for a softer look */
}

/* Base Scoped Modal CSS for subscription_modal.html */
#unique-modal-container .modal-open {
    overflow: hidden;
}
#unique-modal-container .modal { /* Base style for this modal wrapper */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
#unique-modal-container .modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto; /* Allow scroll for overflowing content on desktop */
}
#unique-modal-container .modal-dialog { /* Base style for this modal dialog */
    position: relative;
    width: auto;
    margin: 10px; /* Default Bootstrap margin for desktop */
}
#unique-modal-container .modal-content { /* Base style for this modal content */
    position: relative;
    background-color: #fff; /* Subscription modal is white */
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,0.2); /* Standard Bootstrap border */
    border-radius: 6px; /* Standard Bootstrap radius for desktop */
    outline: 0;
    box-shadow: 0 3px 9px rgba(0,0,0,0.5); /* Standard Bootstrap shadow for desktop */
}
#unique-modal-container .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
#unique-modal-container .modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}
#unique-modal-container .modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
#unique-modal-container .modal-header { /* Specific header for subscription modal */
    padding: 15px;
    background-color: #1481f8;
    border-bottom: 10px solid #0166d4;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#unique-modal-container .modal-title-section h4,
#unique-modal-container .modal-title-section h5,
#unique-modal-container .modal-title-section p {
    margin: 0;
}
#unique-modal-container .modal-title-section .advantages p {
    font-size: 0.9em;
    margin-top: 10px;
    line-height: 1.4;
}
#unique-modal-container .modal-title-section .advantages i {
    margin-right: 5px;
}
#unique-modal-container .modal-title {
    margin: 0;
    line-height: 1.42857143;
}
#unique-modal-container .modal-body { /* Specific body for subscription modal */
    position: relative; /* Keep for positioning context if needed */
    padding: 15px; /* Internal padding for body content */
}
#unique-modal-container .modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

/* Desktop Styles for subscription_modal */
@media (min-width: 768px) {
    #unique-modal-container .modal-dialog {
        width: 600px; /* Default width for this modal on desktop */
        margin: 30px auto; /* Centering on desktop */
    }
    /* .modal-content styles for desktop are inherited from base #unique-modal-container .modal-content */
}
@media (min-width: 992px) {
    #unique-modal-container .modal-lg .modal-dialog { /* If you ever use modal-lg with this */
        width: 900px;
    }
}

/* --- MOBILE OVERRIDES for subscription_modal (to counteract styles.css) --- */
@media (max-width: 767px) {
    #unique-modal-container .modal {
        padding: 10px; /* Add some padding around the modal itself */
        overflow-y: auto; /* Allow scrolling if dialog is taller than viewport */
    }

    #unique-modal-container .modal-dialog {
        margin: 10px auto; /* Center it with some margin top/bottom */
        width: 90%;       /* Make it less than full width */
        height: auto;     /* Let height be determined by content */
        max-width: 450px; /* Set a max width for smaller screens */
    }

    #unique-modal-container .modal-content {
        /* Inherits background, border, radius, and shadow from base styles */
        width: 100%;    /* Fill the dialog width */
        max-width: none; /* No max-width here, controlled by .modal-dialog */
        height: auto;   /* Let height be determined by content */
        padding: 0;     /* Header/body have their own padding */
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #unique-modal-container .modal-header {
        flex-shrink: 0;
        border-top-left-radius: 5px; /* Match modal-content radius (base is 6px) */
        border-top-right-radius: 5px; /* Match modal-content radius (base is 6px) */
    }

    #unique-modal-container .modal-body {
        flex-grow: 1;
        overflow-y: auto;
        display: block;
    }
}
/* --- END OF MOBILE OVERRIDES --- */

/* Payment Form Specific Styles */
#unique-modal-container .modal-body .amount-payable {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #bababa;
    margin-bottom: 15px;
}
#unique-modal-container .modal-body .amount-payable .heading {
    text-align: center;
}
#unique-modal-container .modal-body .amount-payable .amount {
    color: #5d5d5d;
    text-align: center;
    font-size: 40px;
}

/* --- Combined Button Styles for DRY principle --- */
/* Common base styles for all payment/submit buttons */
#unique-modal-container .payment-options .payment-method.btn,
#unique-modal-container #submit-button,
#unique-modal-container #submit-stripe-button,
#unique-modal-container #submit-mobilepay-button {
    border: 1px solid gray;
    border-radius: 8px;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 20px;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    font-size: 1rem;
}
/* Unique styles for choice buttons */
#unique-modal-container .payment-options .payment-method.btn,
#unique-modal-container #submit-button {
    justify-content: space-between;
    color: black;
    background: white;
    margin-top: 0;
}
/* Unique styles for final action buttons */
#unique-modal-container #submit-stripe-button,
#unique-modal-container #submit-mobilepay-button {
    justify-content: center;
    color: white;
    background: #007bff;
    margin-top: 15px;
}
/* Hover effects for choice buttons */
#unique-modal-container .payment-options .payment-method.mobilepay:hover,
#unique-modal-container .payment-options .payment-method.btn-stripe:hover {
     background: #f8f9fa;
}
/* --- End of Combined Button Styles --- */

#unique-modal-container .payment-methods img {
    display: block;
    margin: 15px auto;
    max-width: 100%;
    height: auto;
}
#unique-modal-container .dotted-line {
    border: none;
    border-top: 1px dotted grey;
    color: #fff;
    background-color: #fff;
    height: 1px;
    width: 100%;
    margin: 15px 0;
}
#unique-modal-container .fineprint {
    color: #8C8C8C;
    font-size: 0.7em;
    text-align: center;
    margin-top: 10px;
}
#unique-modal-container .mobilepay-fields,
#unique-modal-container #stripe-register-form,
#unique-modal-container .login-fields {
    display: none;
}
#unique-modal-container .form-group {
    margin-bottom: 1rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
#unique-modal-container .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
#unique-modal-container .form-label {
    margin-bottom: .5rem;
    display: inline-block;
}
#unique-modal-container .text-danger {
    color: #dc3545 !important;
    font-size: 0.875em;
}
#unique-modal-container .alert {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
#unique-modal-container .alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
#unique-modal-container .auth-options {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 0.9em;
}
#unique-modal-container .mb-3 {
    margin-bottom: 1rem !important;
}
#unique-modal-container .d-grid {
    display: grid;
}
#unique-modal-container .gap-2 {
    gap: .5rem;
}
#unique-modal-container .btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
#unique-modal-container .btn-lg {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .3rem;
}
#unique-modal-container .btn-block {
    width: 100%;
}