/* ============================================================ WHEELSBOOK — Overrides CSS Hertz Corse Activé via dans les templates index.html / index.de.html ============================================================ */ /* ── Wheelsys booking engine overrides ── */ #wheelsbook.bookEngRoot { margin: 0 auto !important; border-radius: 12px; } /* ── Modal mode (activé au clic/focus sur #wheelsbook) ── */ .hertz-wheels-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 9000; animation: hertz-wheels-fade-in 0.18s ease-out; } @keyframes hertz-wheels-fade-in { from { opacity: 0; } to { opacity: 1; } } .hertz-wheels-close { position: fixed; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); color: #000; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 9003; padding: 0; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .hertz-wheels-close:hover { background: var(--color-hertz-yellow, #ffcc00); border-color: var(--color-hertz-yellow, #ffcc00); transform: scale(1.05); } body.hertz-wheels-modal-active { overflow: hidden; } body.hertz-wheels-modal-active #wheelsbook { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: min(92vw, 1100px) !important; max-height: 90vh !important; overflow-y: auto !important; background: #fff !important; border-radius: 12px !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45) !important; z-index: 9001 !important; padding: 28px !important; margin: 0 !important; } body.hertz-wheels-modal-active #responseResults .cardata p.InclusiveTitles, body.hertz-wheels-modal-active #responseResults .cardata p.featureTitle { max-width: 100% !important; } @media (max-width: 768px) { body.hertz-wheels-modal-active #wheelsbook { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; padding: 56px 16px 20px !important; } .hertz-wheels-close { top: 10px; right: 10px; } } /* ── Pop-ups / dropdowns au-dessus du backdrop quand modal actif ── */ body.hertz-wheels-modal-active .daterangepicker, body.hertz-wheels-modal-active #wheelsbook .selectActiveContainer, body.hertz-wheels-modal-active #wheelsbook .selectActiveContainer select, body.hertz-wheels-modal-active #wheelsbook select.wbeInputElement, body.hertz-wheels-modal-active #wheelsbook .wbeDatepickerContainer .selectActiveContainer { z-index: 9100 !important; } /* Autocomplete adresse — toujours au-dessus des autres dropdowns (âge, code promo, time) */ body.hertz-wheels-modal-active #wbeaddressResults, body.hertz-wheels-modal-active #wbeaddressResults3, #wbeaddressResults, #wbeaddressResults3 { z-index: 9200 !important; } /* Le picker peut être appendé directement à , hors de #wheelsbook */ .daterangepicker { z-index: 9100 !important; } /* ============================================================ ÉTAPE 1 — Barre de recherche sur une seule ligne APPLIQUÉ UNIQUEMENT EN MODE INLINE (avant ouverture du modal). En mode modal, le formulaire reprend son layout natif. ============================================================ */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; font-size: 13px !important; padding-top: 8px !important; } body:not(.hertz-wheels-modal-active) #wheelsbook .wbeInputContainerCheck { top: -36px; } body:not(.hertz-wheels-modal-active) #wheelsbook .wbeInputContainer { margin-bottom: 0 !important; } body:not(.hertz-wheels-modal-active) #wheelsbook .bookedli { background: transparent !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #selection3 { color: #fff !important; } body:not(.hertz-wheels-modal-active) #wheelsbook .WheelsContainer { background-color: rgba(255, 255, 255, 0.72); border-radius: 12px; } body:not(.hertz-wheels-modal-active) #wheelsbook .search-bar { padding: 0 1em; } body:not(.hertz-wheels-modal-active) #wheelsbook .wbeInputElement { height: 47px; } /* ── Nav-bar (Already Booked? / Manage your booking) ── Reste dans #wheelsbook. Positionnée visuellement EN DESSOUS via position: absolute. Espace réservé sous le widget par margin-bottom pour qu'aucun layout shift ne survienne. */ body:not(.hertz-wheels-modal-active) #wheelsbook { position: relative; margin-bottom: 50px; } body:not(.hertz-wheels-modal-active) #wheelsbook .navigation-bar { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; background: transparent !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 18px !important; margin: 0 !important; cursor: pointer; } body:not(.hertz-wheels-modal-active) #wheelsbook .navigation-bar * { cursor: pointer; } /* Mode modal : nav-bar reprend son layout natif (le widget la gère) */ body.hertz-wheels-modal-active #wheelsbook .navigation-bar { position: static !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wbeDriverAgeContainer, body:not(.hertz-wheels-modal-active) #wheelsbook #wbeCouponContainer { margin-top: 16px; align-self: flex-end !important; } /* Section adresse (pickup + toggle dropoff + dropoff) */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeAddressSection { display: flex !important; gap: 8px !important; flex: 2 1 0 !important; min-width: 0 !important; align-items: stretch !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch #wbeaddressContainer { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeaddressOptionContainer, body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch #wbeaddress3Container { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; } /* Checkbox "Use different drop-off" : pousser le contenu vers le bas pour s'aligner avec l'input */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeaddressOptionContainer { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; } /* Calendriers (pick-up date + drop-off date) */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .calendarWrapper { flex: 2 1 0 !important; min-width: 0 !important; width: auto !important; align-self: flex-end; } /* Time selects compacts — laisse plus d'espace à la date et à l'âge */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .calendarWrapper .selectActiveContainer, body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .calendarWrapper select { flex: 0 0 auto !important; width: 90px !important; min-width: 90px !important; } /* Âge conducteur + code promo */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeDriverAgeContainer { flex: 1.3 1 0 !important; min-width: 0 !important; width: auto !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeCouponContainer { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; } /* Bouton recherche : aligné en bas, même hauteur que les inputs (47px) */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .searchClick { flex: 0 0 auto !important; width: 100px; height: 47px !important; align-self: flex-end !important; margin: 0 !important; font-size: 10px !important; letter-spacing: 0.05em !important; padding: 0 14px !important; position: relative; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .searchClick i { font-size: 12px !important; } /* Polices légèrement réduites */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch input, body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch select, body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeInputElement { font-size: 13px !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeLabel, body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeLabelCheck { font-size: 11px !important; margin-bottom: 0 !important; } /* ── Tablet (≤ 900px) : adresse + calendriers pleine largeur, âge/coupon 50/50 ── */ @media (max-width: 900px) { body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch { flex-wrap: wrap !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeAddressSection { flex: 1 1 100% !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .calendarWrapper { flex: 1 1 100% !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeDriverAgeContainer, body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeCouponContainer { flex: 1 1 calc(50% - 5px) !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .searchClick { flex: 1 1 100% !important; height: 47px !important; position: static !important; top: auto !important; } } /* ── Mobile (≤ 640px) : tout en colonne, sous-éléments adresse aussi ── */ @media (max-width: 640px) { body:not(.hertz-wheels-modal-active) #wheelsbook .wbeInputContainerCheck { top: 0 !important; } /* Time selects reprennent une largeur fluide en mobile */ body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .calendarWrapper .selectActiveContainer, body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .calendarWrapper select { width: auto !important; min-width: 0 !important; flex: 1 1 auto !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeAddressSection { flex-wrap: wrap !important; gap: 6px !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch #wbeaddressContainer { flex: 1 1 100% !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeaddressOptionContainer { flex: 0 0 auto !important; flex-direction: row !important; justify-content: flex-start !important; width: 100% !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch #wbeaddress3Container { flex: 1 1 100% !important; } body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeDriverAgeContainer, body:not(.hertz-wheels-modal-active) #wheelsbook #wheelsbookingEnginesearch .wbeCouponContainer { flex: 1 1 100% !important; } }