/* Footer styling for desktop and iPad */
@media (min-width: 768px) {
footer.slim-footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1030; /* Above main content */
}
}




body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #dfe9ff 0%, #f9f5ff 40%, #ffeedd 70%, #ffffff 100%);
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
min-height: 80vh;
}
/* Example styles for shimmer effect */
.shimmer-container {
display: flex;
flex-direction: column;
align-items: center;
}
.shimmer-line {
width: 80%;
height: 20px;
margin: 10px 0;
background: linear-gradient(90deg, #f0f0f0, #e0e0e0, #f0f0f0);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
p {
font-size: 14px;
}
small {
font-size: 10px; /* Smaller <small> text */
}
label {
font-size: 13px; /* Smaller form labels */
}
li {
font-size: 14px; /* Smaller list items */
}
@media (min-width: 768px) {
p {
font-size: 15px; /* Slightly larger for medium screens */
}
small {
font-size: 12px; /* Slightly larger for medium screens */
}
}
/* Theme color updates */
.navbar-dark.bg-dark {
background-color: #003535 !important; /* Main theme color */
}
.btn-outline-light {
color: #ffffff;
border-color: #ffffff;
}
.btn-outline-light:hover {
background-color: #ffffff;
color: #003535;
}
.sub-navbar-fixed {
background-color: #EDF2F3; /* Light grey */
border-bottom: 1px solid #ccc;
}
.slim-footer {
background-color: #003535 !important; /* Footer theme color */
}
.big-footer {
background-color: #003535 !important; /* Footer theme color */
}
.bottom-nav-mobile {
background-color: #003535 !important; /* Mobile bottom nav theme color */
}
.bottom-nav-mobile .nav-link {
color: #ffffff;
}
.bottom-nav-mobile .nav-link:hover {
color: #b3d9d9; /* Lighter shade of theme color */
}

.btn-tiny {
    font-size: 10px; /* Smaller font size */
    padding: 2px 6px; /* Reduced padding for compact design */
    line-height: 1.2; /* Slightly tighter line height */
    border-radius: 3px; /* Smaller border radius for a tighter look */
    border: 1px solid transparent; /* Default border */
    display: inline-block; /* Ensure inline-block display for proper alignment */
    cursor: pointer; /* Pointer cursor on hover */
}

.btn-tiny.btn-primary {
    background-color: #007bff; /* Primary button color */
    color: #fff; /* Text color for primary button */
    border-color: #007bff; /* Border color for primary button */
}

.btn-tiny.btn-primary:hover {
    background-color: #0056b3; /* Darker shade on hover */
    border-color: #004085; /* Darker border on hover */
}

.btn-tiny.btn-secondary {
    background-color: #6c757d; /* Secondary button color */
    color: #fff; /* Text color for secondary button */
    border-color: #6c757d; /* Border color for secondary button */
}

.btn-tiny.btn-secondary:hover {
    background-color: #5a6268; /* Darker shade on hover */
    border-color: #545b62; /* Darker border on hover */
}



/* Main Navbar */
.navbar.fixed-top {
height: 60px; /* Set to desired height */
}
/* Sub Navbar */
.sub-navbar-fixed {
position: fixed;
top: 60px; /* Match to main navbar's height */
width: 100%;
z-index: 1020;
height: 40px; /* Optional: Set a fixed height */
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa; /* Ensure consistent background */
}
/* Remove default padding and margins */
.sub-navbar-fixed .container {
padding: 0;
}
.sub-navbar-fixed p {
margin: 0;
}
/* Mobile bottom navbar */
.bottom-nav-mobile {
position: fixed;
bottom: 0;
width: 100%;
height: 60px; /* Fixed height */
z-index: 1031; /* Above footer if present on mobile */
display: flex;
align-items: center;
justify-content: space-around;
padding: 0;
background-color: #343a40;
}
/* Each section in the navbar */
.bottom-nav-mobile .flex-fill {
display: flex;
align-items: center;
justify-content: center;
}
/* Unified Icon size and alignment */
.bottom-nav-mobile .nav-link i {
font-size: 18px; /* Adjust to desired size */
line-height: 1; /* Ensure no extra spacing */
}
/* Change the touch area */
.bottom-nav-mobile .nav-link {
padding: 10px;
height: 100%; /* Ensures the entire navbar height is clickable */
display: flex;
align-items: center; /* Vertical alignment */
justify-content: center; /* Horizontal alignment */
}
/* Light background for My Bookings and Profile */
.bottom-nav-mobile .my-bookings {
background-color: #f8f9fa; /* Light background for My Bookings */
border-top-left-radius: 10px; /* Top-left corner */
border-bottom-left-radius: 10px; /* Bottom-left corner */
}
.bottom-nav-mobile .profile {
background-color: #f8f9fa; /* Light background for Profile */
}
/* Dark icons for My Bookings and Profile */
.bottom-nav-mobile .my-bookings a.nav-link,
.bottom-nav-mobile .profile a.nav-link {
color: #212529 !important; /* Dark color for icons */
}
/* Default styles for other links */
.bottom-nav-mobile a.nav-link {
padding: 0.5rem 0;
display: block;
color: #f8f9fa; /* Light text for other links */
}
/* Capsule Search Bar */
#mobileSearchBar {
display: none; /* Initially hidden */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
background: transparent; /* No background */
z-index: 1050; /* Ensure visibility above other elements */
}
/* Capsule Search Input */
#mobileSearchBar input {
border: 1px solid #ced4da; /* Subtle border for the capsule */
padding: 0.5rem 1.5rem; /* Add padding for capsule shape */
font-size: 1rem; /* Standard font size */
outline: none; /* Remove outline on focus */
box-shadow: none; /* Remove inner shadow */
background-color: #fff; /* White background for input */
color: #495057; /* Text color */
width: 90%; /* Responsive width */
max-width: 500px; /* Maximum width */
}
/* Focus Effects */
#mobileSearchBar input:focus {
border-color: #0d6efd; /* Blue border on focus */
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); /* Subtle glow */
}
/* Placeholder Styling */
#mobileSearchBar input::placeholder {
color: #adb5bd; /* Light placeholder text */
opacity: 1;
}
/* Mobile-Only Display */
@media (max-width: 768px) {
#mobileSearchBar {
display: flex; /* Flex container to center the input */
}
}
.city-item.selected {
border: 2px solid #0d6efd; /* Bootstrap primary color */
background-color: rgba(13, 110, 253, 0.1);
border-radius: 50%;
}
/* Search Results Dropdown Styling */
#desktopSearchResults,
#mobileSearchResults {
max-height: 300px;
overflow-y: auto;
}
#desktopSearchResults li,
#mobileSearchResults li {
cursor: pointer;
}
#desktopSearchResults li:hover,
#mobileSearchResults li:hover {
background-color: #f8f9fa;
}
/* Ensure Mobile Search Bar Appears Above Other Elements */
#mobileSearchBar {
transition: all 0.3s ease-in-out;
}


  @media (max-width: 767.98px) { /* Targets screens smaller than 768px */
    .hide-on-mobile {
      display: none;
    }
	#main-content {
        padding-top: 75px !important; /* Adjust top padding for mobile */
    }
  }

.main-content {
  flex-grow: 1;
}

/* Optional: Style the search modal */
.modal-body .city-item {
cursor: pointer;
text-align: center;
padding: 10px;
}
.modal-body .city-item img {
width: 60px;
height: 60px;
}
.modal-body .city-item p {
margin-top: 5px;
font-size: 14px;
}
/* 1. Remove background from mobile search bar */
#mobileSearchBar {
background: transparent !important; /* override any default or inline styles */
}
/* 2. Center the container (already using text-center above) */
/* If needed further alignment, we can do this: */
/*
#mobileSearchBar .position-relative {
margin: 0 auto;
width: 80%;
text-align: center;
}
*/
/* 3. Make the desktop search bar a bit longer */
@media (min-width: 768px) {
#desktopSearchInput {
width: 400px; /* Adjust to your preferred width */
}
}
/* faq-accordion styles */
.faq-accordion .accordion-item {
border: 1px solid #dee2e6; /* Light border around each accordion item */
border-radius: 10px; /* Rounded corners */
margin-bottom: 1.5rem; /* Space between accordion items */
overflow: hidden; /* Ensure child elements respect the border radius */
background-color: #fff; /* White background */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
}
/* Hover effect for accordion items */
.faq-accordion .accordion-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px); /* Slight lift on hover */
}
/* Remove default border-radius from accordion headers and bodies */
.faq-accordion .accordion-button {
border: none; /* Remove default border */
border-radius: 0; /* Remove border radius to inherit from parent */
background-color: #f1f3f5; /* Light gray background for headers */
padding: 1rem; /* Adequate padding */
font-weight: 600; /* Bold text for questions */
position: relative; /* For positioning shimmer effect */
overflow: hidden; /* Hide overflow for shimmer */
}
/* Add border-radius to the first and last accordion buttons */
.faq-accordion .accordion-button:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.faq-accordion .accordion-button:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* Accordion button active state */
.faq-accordion .accordion-button:not(.collapsed) {
background-color: #e9ecef; /* Slightly darker when expanded */
}
/* Accordion body styling */
.faq-accordion .accordion-body {
padding: 1rem; /* Padding inside the body */
background-color: #ffffff; /* White background for answers */
border-top: 1px solid #dee2e6; /* Border between header and body */
}
/* Shimmer Animation */
@keyframes shimmer {
0% {
background-position: -500px 0;
}
100% {
background-position: 500px 0;
}
}
/* Apply shimmer effect to accordion headers */
.faq-accordion .accordion-button::before {
content: '';
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
animation: shimmer 2s infinite;
}




    /* Transparent Accordion */
	.transparent-accordion .accordion-button {
	  background-color: rgba(0, 0, 0, 0) !important; /* Fully transparent */
	  border: none !important; /* Remove border */
	  box-shadow: none !important; /* Remove shadow */
	  padding: 0.75rem; /* Adjust overall padding */
	  padding-left: 0 !important; /* Remove left padding */
	  font-size: 0.9rem; /* Smaller font size */
	  color: #000; /* Black text */
	  text-align: left;
	  position: relative;
	}


    /* Custom Expand/Collapse Icons */
    .transparent-accordion .accordion-button::after {
      content: none; /* Remove Bootstrap default arrow */
    }

    .transparent-accordion .accordion-button::before {
      content: '+'; /* Default '+' icon */
      position: absolute;
      right: 1rem;
      font-size: 1.25rem;
      color: #000; /* Black color for icon */
    }

    .transparent-accordion .accordion-button:not(.collapsed)::before {
      content: '-'; /* Change to '-' icon when expanded */
    }

    /* Header Bottom Border Only */
    .transparent-accordion .accordion-header {
      border-bottom: 1px solid #dee2e6; /* Bottom border for heading only */
    }

    /* Transparent Accordion Body */
    .transparent-accordion .accordion-body {
      background-color: rgba(0, 0, 0, 0) !important; /* Fully transparent body */
      padding: 0.75rem; /* Adjust padding */
      font-size: 0.85rem; /* Smaller font size */
      color: #333; /* Slightly lighter text for body */
      border: none !important; /* No border around body */
    }

    /* Remove Accordion Item Border */
    .transparent-accordion .accordion-item {
      border: none !important; /* Remove all borders around accordion item */
      background-color: rgba(0, 0, 0, 0) !important; /* Fully transparent background */
    }

    /* Transparent Hover and Focus States */
    .transparent-accordion .accordion-button:hover,
    .transparent-accordion .accordion-button:focus {
      background-color: rgba(0, 0, 0, 0) !important; /* Fully transparent hover/focus */
      color: #007bff; /* Optional: Add hover color */
    }