/* Base styles */
/*
  Use Škoda Next as primary font when available. The font files are
  referenced from the /public/fonts folder but not included due to
  licensing restrictions. If a user places the appropriate font files
  (SkodaNext-Regular.woff2/woff) into /public/fonts, they will be
  automatically used. Otherwise, the design falls back to Montserrat
  and system sans-serif fonts.
*/
/*
  Embed the Škoda Next typeface directly from the TTF files provided.  The fonts are
  stored in the /public/fonts directory.  We declare multiple @font-face rules
  so the correct weight and style are used when text is bolded or italicised.
*/
@font-face {
  font-family: 'Škoda Next';
  src: url('/fonts/SKODANext-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Škoda Next';
  src: url('/fonts/SKODANext-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Škoda Next';
  src: url('/fonts/SKODANext-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Škoda Next';
  src: url('/fonts/SKODANext-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Škoda Next';
  src: url('/fonts/SKODANext-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
body {
  font-family: 'Škoda Next', 'Montserrat', 'Arial', sans-serif;
  line-height: 1.6;
  color: #212529;
  padding-top: 76px; /* height of the fixed navbar; pushes content down on all pages */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

a {
  color: #014A82;
}
a:hover {
  color: #012b51;
}

/* Navbar */
#navbar.navbar-light {
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s;
}
#navbar.navbar-light .nav-link,
#navbar.navbar-light .navbar-brand img,
#navbar.navbar-light #loginLink,
#navbar.navbar-light #searchBtn {
  color: #212529;
}

#navbar.navbar-dark {
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color 0.3s, color 0.3s;
}
#navbar.navbar-dark .nav-link,
#navbar.navbar-dark .navbar-brand img,
#navbar.navbar-dark #loginLink,
#navbar.navbar-dark #searchBtn {
  color: #fff;
}

/* Visual feedback when hovering over navigation links */
/* Visual feedback when hovering over navigation links */
.navbar-nav .nav-link {
  transition: color 0.2s ease, transform 0.2s ease;
}
.navbar-nav .nav-link:hover {
  color: #01355c;
  text-decoration: none;
  transform: scale(1.05);
}

/* Apply the same subtle zoom effect to individual navbar icons and links (search, login/logout, admin) */
#searchBtn,
#loginLink,
#mobileLoginLink,
#adminLink,
#mobileAdminLink {
  transition: transform 0.2s ease;
}
#searchBtn:hover,
#loginLink:hover,
#mobileLoginLink:hover,
#adminLink:hover,
#mobileAdminLink:hover {
  transform: scale(1.05);
}

/* Add a zoom effect to the hero buttons (Rezervovať, Detail) to match other interactive elements */
.hero-buttons .btn {
  transition: transform 0.2s ease;
}
.hero-buttons .btn:hover {
  transform: scale(1.05);
}

/* Hero section */
#hero {
  overflow: hidden;
  /* pull the hero up so it sits behind the transparent navbar */
  margin-top: -76px;
  padding-top: 0;
}
.hero-slide {
  min-height: 100vh;
  position: relative;
  text-align: center;
  padding-top: 0;
}
/*
  Position hero headings higher in the slide with a semi‑transparent overlay. The overlay sits above the
  vehicle image and spans horizontally across the slide. We give it an opacity of 0.5 as requested.
*/
.hero-text-overlay {
  position: absolute;
  /* Horizontally center the overlay. Vertical positioning will be set via JS based on slider settings. */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.5;
  /* Place the overlay behind the car image so text appears behind the vehicle */
  z-index: 1;
  width: 100%;
  pointer-events: none; /* make overlay ignore clicks so buttons remain clickable */
}
/* Buttons in hero slide should sit below the car image and remain centered */
/*
  Position the hero action buttons above the car image so they remain clickable.
  Previously the buttons used a z-index of 2 while the car image had a
  z-index of 3, which caused the image to overlap and intercept pointer
  events. Bump the buttons' z-index so they sit on top of the car image.
*/
.hero-buttons {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
/* Center the car image in the slide */
.hero-slide .hero-image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  /* Ensure the car image sits above the overlay text */
  z-index: 3;
}
.hero-slide .hero-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Enlarge heading and subheading on hero slides */
.hero-slide h1 {
  /* Increase hero title size to three times its previous size */
  font-size: 24rem;
  letter-spacing: 0.05em;
  line-height: 1;
}
.hero-slide h5 {
  /* Increase hero subtitle size correspondingly */
  font-size: 7.5rem;
  letter-spacing: 0.15em;
}

/* Popular cards */
.card-img-top {
  height: 180px;
  object-fit: contain;
  background-color: #f8f9fa;
}
.card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
}

/* Give cards in the popular section a slight zoom on hover */
#popularCars .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#popularCars .card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* Style the filter button on the vehicles page so that it fills when hovered */
#filterBtn {
  transition: background-color 0.2s ease, color 0.2s ease;
}
#filterBtn:hover {
  background-color: #014A82;
  color: #fff;
}

/* Give cards on the vehicles page a zoom effect on hover */
#carsList .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#carsList .card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* Make entire car tiles clickable on vehicles page */
#carsList .card {
  cursor: pointer;
}

/* Remove generic card hover so only targeted sections zoom cards */

/* Vehicle specifications boxes on car detail page */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.spec-box {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.spec-box i {
  font-size: 1.6rem;
  color: #014A82;
  margin-bottom: 0.5rem;
  display: block;
}
.spec-box .spec-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.spec-box .spec-value {
  color: #6c757d;
}

/* Invert logo when navbar turns dark */
#navbar.navbar-dark .navbar-brand img {
  filter: brightness(0) invert(1);
}

/* Accordion overrides */
.accordion-button:not(.collapsed) {
  background-color: #014A82;
  color: #fff;
}
.accordion-button::after {
  filter: invert(1);
}

/* Offcanvas */
.offcanvas-header {
  border-bottom: 1px solid #dee2e6;
}
.offcanvas-body a.nav-link {
  font-size: 1.2rem;
  padding: 0.5rem 0;
}

/* Footer */
footer a {
  color: #cfdbe2;
}
footer a:hover {
  color: #fff;
}

/* Buttons */
.btn-primary {
  background-color: #014A82;
  border-color: #014A82;
}
.btn-primary:hover {
  background-color: #01355c;
  border-color: #01355c;
}
.btn-outline-primary {
  color: #014A82;
  border-color: #014A82;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #014A82;
}

/* Style for the filter button: outlined by default, filled on hover */
#filterBtn.btn-outline-secondary {
  border-color: #014A82;
  color: #014A82;
}
#filterBtn.btn-outline-secondary:hover {
  background-color: #014A82;
  color: #fff;
}

/* Reservation form alert fix */
.alert {
  padding: 0.75rem 1rem;
}

/* Customize carousel control icons and indicators to dark blue */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2rem;
  height: 2rem;
  background-size: 100%, 100%;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23014A82' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1-.708 0L4.146 8l6.5 6.354a.5.5 0 0 1-.708.708l-7-7a.5.5 0 0 1 0-.708l7-7a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23014A82' viewBox='0 0 16 16'%3e%3cpath d='M4.646 14.354a.5.5 0 0 1 0-.708L11.146 8l-6.5-6.354a.5.5 0 1 1 .708-.708l7 7a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0z'/%3e%3c/svg%3e");
}
.carousel-indicators button {
  background-color: #014A82 !important;
}

/* Appearance for a card while it is being dragged in reorder mode */
.sortable-ghost {
  opacity: 0.6;
  background-color: #f0f4f8;
}

/* Lightbox modal styling */
.lightbox-modal .modal-dialog {
  max-width: 50vw;
}
.lightbox-modal .modal-content {
  background-color: transparent;
  border: none;
}
/* Ensure the close button in the lightbox sits above any content and is always clickable */
.lightbox-modal .btn-close {
  z-index: 5;
}
/* So that when the modal backdrop shows, the rest of the page is darkened by 50% */
.modal-backdrop.show {
  opacity: 0.5 !important;
}

/* Search modal enhancements */
#searchModal .modal-content {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
/* Ensure the search modal sits above other content */
/* Increase z-index for the search modal itself and its dialog so it always appears above the hero slider */
#searchModal {
  z-index: 2000 !important;
  pointer-events: auto;
}
#searchModal .modal-dialog {
  z-index: 2001 !important;
}
/* Soften the backdrop and blur the page behind the search modal */
.modal-backdrop.show {
  backdrop-filter: blur(2px);
  opacity: 0.5 !important;
}

/* When a Bootstrap modal is open, disable pointer events on the hero carousel and its children
   so that background interactions do not interfere with the modal. This helps ensure that
   clicking within the search modal will not accidentally trigger slide drags or other events. */
/* When any Bootstrap modal is open (e.g., search modal), disable pointer events on the hero
   carousel or hero section and all of their descendants. This prevents background slides
   from capturing mouse/touch events while a modal is active. */
/* Removed disabling pointer events on hero elements when a modal is open.
   This avoids blocking interaction with custom overlays such as search. */

/* Remove default bottom margin on hero subtitle to allow precise spacing control via settings */
.hero-text-overlay h5 {
  margin-bottom: 0;
}

/* On small screens widen the car image in the hero slider */
@media (max-width: 768px) {
  .hero-slide .hero-image-container {
    width: 90%;
  }
}

/*
  Custom search overlay styles.  The overlay covers the entire viewport when
  active and uses flexbox to center the search box.  The search box itself
  has a white background, rounded corners, and an internal close button.
*/
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.search-box {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}