/*
Theme Name: Turbo Child
Theme URI: https://preview.redq.io/turbo/
Template: turbo
Author: redq.io
Author URI: https://redq.io/
Description: Turbo: A feature-rich booking and rental theme powered by WooCommerce, RnB, and Elementor, offering modern design, advanced search filters, and versatile Elementor widgets for date-based booking systems.
Tags: holiday,right-sidebar,translation-ready,theme-options,two-columns
Version: 1.0.0
Updated: 2023-07-26 04:17:45
*/

.page-template-listing .container-custom-listing {
  background-color: #FCFCFC;
}

.os-content label {
  display: block;
}

h2.inspect-filter-widget-title {
  color: var(--heading__color, #2d3748);
  font-size: var(--base__font-size, 1rem);
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.625;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

#sidebar.z-40 {
  z-index: 29 !important;
}

#sidebar .os-content {
  overflow: auto;
  height: 150px !important;
}

#sidebar .inspect-filter-widget-quick{
  display: none;
}

#sidebar span.btn-filter {
  border: 1px solid #2d3748;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* fiche detaillée des voitures*/

.container-custom-car.container {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
gap: 2rem;
}

.container-custom-car .image-col {
flex: 1 1 500px;
max-width: 500px;
position: relative;
}

.container-custom-car .image-sticky {
position: sticky;
top: 8rem;
}

.container-custom-car .image-sticky .gallery-container {
width: 100%;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.container-custom-car .desc-col {
flex: 2 1 200px;
}

.container-custom-car .desc-col h2 {
margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .container-custom-car.container {
    flex-direction: column;
  }
  .container-custom-car .image-col {
    max-width: 100%;
    flex: unset;
  }
  #sidebar.z-40 {
    z-index: 29 !important;
    position: absolute;
  }

  figure.mt-image {
    display: none;
	}
}

.separateur {
  border-bottom: 1px solid #cccccc;
  margin: 22px;
}

.additionnal span {
  font-weight: bold;
}

.additionnal {
  margin-bottom: 24px;
}

.confirm-booking {
  width: 100% !important;
}

.limit-other {
  border-bottom: 5px solid #cccccc;
  margin: 11px 4em 0px 4em;
}

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

span#closeToggleSidebar {
  margin-left: 12px;
  font-size: 23px;
  border: 1px solid #888888;
  padding: 2px 12px;
  border-radius: 50px;
}

.pickup {
  margin-bottom: 15px;
}

.nb-vehicles {
  padding-left: 1.5rem;
  font-size: 1.2em;
}

.overlay-overlay {
  position: fixed; /* ou absolute si c'est dans un bloc spécifique */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* noir semi-transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* s'assure qu'il passe au-dessus */
}

/* Loader (spinner circulaire) */
.loader-overlay {
  width: 75px;
  height: 75px;
  border: 10px solid #ccc;
  border-top: 10px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hover\:shadow-large:hover {
  --tw-shadow: unset;
  --tw-shadow-colored: unset;
}

.figure-img {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.miniature, .miniature img {
  height: 100px !important;
}

.confirmation {
  margin-top: 0px;
  margin-bottom: 0px;
}

figure.block.icone-list img {
  height: 35px;
  width: 35px;
  min-width: 35px;
}

figure.block.icone-list span {
  font-size: 11px;
}

span.detail-value {
  font-size: 1em;
  font-weight: bold;
  color: #585859;
}

figure.block.icone-list{
  margin: 0px;
}

.section-cgv input {
  margin-right: 15px;
}
.section-cgv {
  margin-bottom: 15px;
  margin-top: 8px;
}

.list-car-detail span {
  margin-left: 5px;
  display: block;
  font-size: 0.875em;
}

.list-car-detail {
  margin: 8px 0px;
}


/*.custom-gallery-container {
  max-width: 500px;
  margin: auto;
  text-align: center;
}
.custom-gallery-container .main-image img {
  width: 100%;
  height: auto;
}
.custom-gallery-container .thumbnails {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.custom-gallery-container .thumbnails img {
  width: 125px;
  height: auto;
  cursor: pointer;
  border: 2px solid transparent;
}
.custom-gallery-container .thumbnails img.active {
  border-color: #333;
  border-radius: 20px;
}

*/
.custom-gallery-container {
  max-width: 800px;
  margin: auto;
}

.custom-gallery-container .main-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.custom-gallery-container .thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.custom-gallery-container .thumbnails img {
  width: 22%;
  min-width: 70px;
  max-width: 120px;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

.custom-gallery-container .thumbnails img.active {
  border-color: #007BFF;
}

@media (max-width: 600px) {
  .custom-gallery-container .thumbnails img {
    width: 30%;
  }
}

@media (max-width: 400px) {
  .custom-gallery-container .thumbnails img {
    width: 45%;
  }
}

.toggle-section .additionnal {
    display: none;
}
.toggle-section.open .additionnal {
    display: block;
}

/* Ajoutez dans votre CSS global ou dans un <style> */
.toggle-section > h3 {
    cursor: pointer;
    position: relative;
    user-select: none;
    padding-right: 30px;
}
.toggle-section > h3 .toggle-arrow {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 8px;
    transition: transform 0.2s;
    background: url('data:image/svg+xml;utf8,<svg fill="gray" height="18" width="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') no-repeat center center;
    background-size: 18px 18px;
}
.toggle-section.open > h3 .toggle-arrow {
    transform: rotate(180deg);
}
/* Optionnel : transition pour le contenu */
.toggle-section .additionnal {
    display: none;
}
.toggle-section.open .additionnal {
    display: block;
}

/* Ajoutez dans votre CSS global ou dans un <style> */
.ressource-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.ressource-right {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
    min-width: 180px;
}

.ressource-desc {
    width: 250px;         /* Largeur fixe pour la description, ajustez selon besoin */
    text-align: left;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ressource-price {
    min-width: 70px;
    text-align: right;
    display: inline-block;
}

.ressource-price label,
.ressource-desc label {
    font-weight: bold;
}

@media (min-width: 1780px){
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.login-info {
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    color: #f00;
    padding: 0.5rem 1rem;
    border-left: 5px solid #3182ce;
    border-radius: 12px;
    font-size: 1.1rem;
    font-family: "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 1.5rem auto;
    max-width: 600px;
    text-align: center;
}