/*
Theme Name: Astra Child - Dhia Rentacar Premium
Theme URI: https://dhia-rentacar.com
Description: Child theme premium luxe pour Dhia Rentacar
Author: Dhia Rentacar
Author URI: https://dhia-rentacar.com
Template: astra
Version: 1.1.0
Text Domain: astra-child
*/
/* ============================================
DHIA RENTACAR — ANIMATIONS CIBLÉES
Nos Services | Faites le premier pas |
Pourquoi nous choisir | Prêt à réserver | Footer
============================================ */
/* ----- Design Tokens (used only by targeted sections) ----- */
:root {
--dhia-gold: #C9A84C;
--dhia-gold-light: #E2C97E;
--dhia-gold-dark: #A68B3C;
--dhia-dark-card: #161616;
--dhia-dark-border: #2A2A2A;
--dhia-dark: #111111;
--dhia-black: #0A0A0A;
--dhia-gray: #8A8A8A;
--dhia-gray-light: #B0B0B0;
--dhia-white-soft: #F0EEEA;
/* Override Tourfic primary color (was a dull #b19540) */
--tf-primary: #D4AF37;
--font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--radius-md: 16px;
--radius-lg: 24px;
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
--shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.6);
--shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.3);
--shadow-gold-hover: 0 8px 40px rgba(201, 168, 76, 0.5);
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-elegant: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
/* ============================================
1. NOS SERVICES — CARDS PREMIUM
============================================ */
.elementor-element-bc62c96,
.elementor-element-574f6e3,
.elementor-element-37996d1 {
background: var(--dhia-dark-card) !important;
border: 1px solid var(--dhia-dark-border) !important;
border-radius: var(--radius-lg) !important;
padding: 40px 30px !important;
position: relative;
overflow: hidden;
transition: all var(--transition-elegant) !important;
}
/* Gold accent line on top */
.elementor-element-bc62c96::after,
.elementor-element-574f6e3::after,
.elementor-element-37996d1::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--dhia-gold-dark), var(--dhia-gold-light));
border-radius: 0 0 4px 4px;
transition: width var(--transition-elegant);
}
.elementor-element-bc62c96:hover,
.elementor-element-574f6e3:hover,
.elementor-element-37996d1:hover {
transform: translateY(-8px) !important;
border-color: rgba(201, 168, 76, 0.3) !important;
box-shadow: var(--shadow-card-hover), 0 0 60px rgba(201, 168, 76, 0.08) !important;
}
.elementor-element-bc62c96:hover::after,
.elementor-element-574f6e3:hover::after,
.elementor-element-37996d1:hover::after {
width: 100px;
}
/* Card icons — gold glow on hover */
.elementor-element-bc62c96 .elementor-widget-image img,
.elementor-element-574f6e3 .elementor-widget-image img,
.elementor-element-37996d1 .elementor-widget-image img {
transition: all var(--transition-smooth) !important;
filter: brightness(0.9);
/* Force toutes les images à la même taille (largeur de la carte,
ratio 5:3 comme configuré dans Elementor). Sans ça, la 1ère image
"Location" s'affichait à sa taille intrinsèque (1024px). */
width: 100% !important;
height: auto !important;
aspect-ratio: 5 / 3;
object-fit: cover;
}
.elementor-element-bc62c96:hover .elementor-widget-image img,
.elementor-element-574f6e3:hover .elementor-widget-image img,
.elementor-element-37996d1:hover .elementor-widget-image img {
filter: brightness(1.1) drop-shadow(0 0 12px rgba(201, 168, 76, 0.4));
transform: scale(1.05);
}
/* Card titles — gold gradient text */
.elementor-element-bc62c96 .elementor-heading-title,
.elementor-element-574f6e3 .elementor-heading-title,
.elementor-element-37996d1 .elementor-heading-title {
font-family: var(--font-heading) !important;
background: linear-gradient(135deg, var(--dhia-gold-light), var(--dhia-gold)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Card text */
.elementor-element-bc62c96 .elementor-widget-text-editor,
.elementor-element-574f6e3 .elementor-widget-text-editor,
.elementor-element-37996d1 .elementor-widget-text-editor {
color: var(--dhia-gray-light) !important;
line-height: 1.8 !important;
}
/* Card dividers */
.elementor-element-bc62c96 .elementor-divider-separator,
.elementor-element-574f6e3 .elementor-divider-separator,
.elementor-element-37996d1 .elementor-divider-separator {
border-color: var(--dhia-gold) !important;
opacity: 0.4;
transition: opacity var(--transition-smooth);
}
.elementor-element-bc62c96:hover .elementor-divider-separator,
.elementor-element-574f6e3:hover .elementor-divider-separator,
.elementor-element-37996d1:hover .elementor-divider-separator {
opacity: 1;
}
/* Card buttons — full width */
.elementor-element-bc62c96 .elementor-button,
.elementor-element-574f6e3 .elementor-button,
.elementor-element-37996d1 .elementor-button {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
}
/* Hover shine sweep */
.elementor-element-bc62c96::before,
.elementor-element-574f6e3::before,
.elementor-element-37996d1::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.03), transparent);
transition: left 0.8s ease;
z-index: 0;
pointer-events: none;
}
.elementor-element-bc62c96:hover::before,
.elementor-element-574f6e3:hover::before,
.elementor-element-37996d1:hover::before {
left: 100%;
}
/* ============================================
2. FAITES LE PREMIER PAS (section d334265)
============================================ */
/* Title — gold gradient */
.elementor-element-f4684c4 .elementor-heading-title {
font-family: var(--font-heading) !important;
background: linear-gradient(135deg, var(--dhia-gold-light), var(--dhia-gold)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Description text */
.elementor-element-96f3d1d {
color: #f1f1f1 !important;
line-height: 1.8 !important;
}
/* Button hover */
.elementor-element-9fbd41f .elementor-button {
transition: all var(--transition-smooth) !important;
}
.elementor-element-9fbd41f .elementor-button:hover,
.elementor-element-9fbd41f .elementor-button:focus {
box-shadow: var(--shadow-gold) !important;
transform: translateY(-2px);
}
/* ============================================
3. POURQUOI NOUS CHOISIR (stats section 40c3883)
============================================ */
/* Section title */
.elementor-element-2e16e94 .elementor-heading-title {
font-family: var(--font-heading) !important;
background: linear-gradient(135deg, var(--dhia-gold-light), var(--dhia-gold)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Big numbers — gold gradient */
.elementor-element-160cb8a .elementor-heading-title,
.elementor-element-d953381 .elementor-heading-title,
.elementor-element-c509883 .elementor-heading-title,
.elementor-element-19f57b4 .elementor-heading-title {
background: linear-gradient(180deg, var(--dhia-gold), var(--dhia-gold-dark)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-family: var(--font-heading) !important;
font-weight: 700 !important;
}
/* Stats labels */
.elementor-element-06c5332 .elementor-heading-title,
.elementor-element-3eaf9a6 .elementor-heading-title,
.elementor-element-7076c2a .elementor-heading-title,
.elementor-element-50bf790 .elementor-heading-title {
color: var(--dhia-gray) !important;
font-family: var(--font-body) !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
font-size: 0.85rem !important;
}
/* ============================================
4. PRÊT À RÉSERVER (CTA section 126ab1b)
============================================ */
.elementor-element-80b033a .elementor-heading-title {
background: linear-gradient(135deg, var(--dhia-gold-light), var(--dhia-gold)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-family: var(--font-heading) !important;
}
.elementor-element-857f613 .elementor-heading-title {
color: var(--dhia-white-soft) !important;
}
/* Phone / contact links */
.elementor-element-8b1d0c3 .elementor-heading-title,
.elementor-element-8b1d0c3 .elementor-heading-title a {
color: var(--dhia-gold) !important;
transition: all var(--transition-fast) !important;
}
.elementor-element-8b1d0c3 .elementor-heading-title a:hover {
color: var(--dhia-gold-light) !important;
text-shadow: 0 0 20px rgba(201, 168, 76, 0.4);
}
/* CTA buttons */
.elementor-element-eb523d2 .elementor-button,
.elementor-element-126ab1b .elementor-button {
transition: all var(--transition-smooth) !important;
}
.elementor-element-eb523d2 .elementor-button:hover,
.elementor-element-126ab1b .elementor-button:hover {
box-shadow: var(--shadow-gold) !important;
transform: translateY(-2px);
}
/* ============================================
5. FOOTER — PREMIUM
============================================ */
footer,
.site-footer,
.ast-footer,
.ast-small-footer,
footer.site-footer,
.site-below-footer-wrap,
.ast-footer-overlay,
.ast-small-footer .ast-footer-overlay,
.ehf-footer,
[data-elementor-type="footer"] {
background: linear-gradient(180deg, var(--dhia-dark) 0%, #050505 100%) !important;
border-top: 1px solid rgba(201, 168, 76, 0.2) !important;
position: relative;
}
/* Footer gold accent line */
footer::before,
.site-footer::before,
.ehf-footer::before,
[data-elementor-type="footer"]::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--dhia-gold), transparent);
}
/* Footer headings */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.ehf-footer h1,
.ehf-footer h2,
.ehf-footer h3,
.ehf-footer h4,
[data-elementor-type="footer"] h1,
[data-elementor-type="footer"] h2,
[data-elementor-type="footer"] h3,
[data-elementor-type="footer"] h4,
[data-elementor-type="footer"] .elementor-heading-title {
font-family: var(--font-heading) !important;
color: var(--dhia-gold) !important;
letter-spacing: 0.05em !important;
font-weight: 600 !important;
}
/* Footer text */
footer p,
footer span,
footer li,
.site-footer p,
.site-footer span,
.site-footer li,
.ehf-footer p,
.ehf-footer span,
.ehf-footer li,
[data-elementor-type="footer"] p,
[data-elementor-type="footer"] span,
[data-elementor-type="footer"] li {
color: var(--dhia-gray) !important;
font-size: 0.9rem !important;
line-height: 1.8 !important;
}
/* Footer links */
footer a,
.site-footer a,
.ehf-footer a,
[data-elementor-type="footer"] a {
color: var(--dhia-gray-light) !important;
transition: all var(--transition-fast) !important;
}
footer a:hover,
.site-footer a:hover,
.ehf-footer a:hover,
[data-elementor-type="footer"] a:hover {
color: var(--dhia-gold) !important;
}
/* Footer social icons */
footer .elementor-social-icon,
.site-footer .elementor-social-icon,
.ehf-footer .elementor-social-icon,
[data-elementor-type="footer"] .elementor-social-icon {
background: transparent !important;
border: 1px solid var(--dhia-dark-border) !important;
color: var(--dhia-gray) !important;
transition: all var(--transition-smooth) !important;
border-radius: 50% !important;
}
/* Astra footer social icons (builder) */
footer .ast-builder-social-element,
.site-footer .ast-builder-social-element {
color: var(--dhia-gold-light) !important;
transition: all var(--transition-smooth) !important;
}
footer .ast-builder-social-element svg,
.site-footer .ast-builder-social-element svg {
fill: var(--dhia-gold-light) !important;
width: 22px !important;
height: 22px !important;
}
footer .ast-builder-social-element:hover,
.site-footer .ast-builder-social-element:hover {
color: var(--dhia-gold) !important;
transform: translateY(-3px);
}
footer .ast-builder-social-element:hover svg,
.site-footer .ast-builder-social-element:hover svg {
fill: var(--dhia-gold) !important;
}
footer .elementor-social-icon:hover,
.site-footer .elementor-social-icon:hover,
.ehf-footer .elementor-social-icon:hover,
[data-elementor-type="footer"] .elementor-social-icon:hover {
background: var(--dhia-gold) !important;
border-color: var(--dhia-gold) !important;
color: var(--dhia-black) !important;
transform: translateY(-3px);
box-shadow: var(--shadow-gold) !important;
}
footer .elementor-social-icon:hover i,
footer .elementor-social-icon:hover svg,
.ehf-footer .elementor-social-icon:hover i,
.ehf-footer .elementor-social-icon:hover svg,
[data-elementor-type="footer"] .elementor-social-icon:hover i,
[data-elementor-type="footer"] .elementor-social-icon:hover svg {
color: var(--dhia-black) !important;
fill: var(--dhia-black) !important;
}
/* Footer dividers */
footer .elementor-divider-separator,
.ehf-footer .elementor-divider-separator,
[data-elementor-type="footer"] .elementor-divider-separator {
border-color: rgba(201, 168, 76, 0.15) !important;
}
/* Footer copyright */
.ast-small-footer,
.site-below-footer-wrap,
.site-below-footer-wrap[data-section="section-below-footer-builder"],
.ast-footer-copyright {
background: transparent !important;
border-top: none !important;
padding: 20px 0 !important;
}
.ast-footer-copyright p,
.ast-footer-copyright span,
.ast-footer-copyright a,
.site-below-footer-wrap p {
color: var(--dhia-gray) !important;
font-size: 0.8rem !important;
letter-spacing: 0.05em !important;
}
/* Copyright on one line */
.ast-footer-copyright {
display: flex !important;
flex-wrap: wrap;
gap: 0 0.6em;
align-items: center;
}
.ast-footer-copyright p {
display: inline !important;
margin: 0 !important;
}
/* Footer lists (Service & Support) — separated rows */
footer .elementor-icon-list-items,
.site-footer .elementor-icon-list-items,
.ehf-footer .elementor-icon-list-items,
[data-elementor-type="footer"] .elementor-icon-list-items,
footer ul.wp-block-list,
.site-footer ul.wp-block-list,
footer .widget_nav_menu ul,
.site-footer .widget_nav_menu ul,
footer .menu,
.site-footer .menu {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
footer .elementor-icon-list-item,
.site-footer .elementor-icon-list-item,
.ehf-footer .elementor-icon-list-item,
[data-elementor-type="footer"] .elementor-icon-list-item,
footer ul.wp-block-list li,
.site-footer ul.wp-block-list li,
footer .widget_nav_menu li,
.site-footer .widget_nav_menu li,
footer .menu li,
.site-footer .menu li {
padding: 5px 0 !important;
border-bottom: 1px solid rgba(201, 168, 76, 0.12) !important;
margin: 0 !important;
}
footer .elementor-icon-list-item:last-child,
.site-footer .elementor-icon-list-item:last-child,
.ehf-footer .elementor-icon-list-item:last-child,
[data-elementor-type="footer"] .elementor-icon-list-item:last-child,
footer ul.wp-block-list li:last-child,
.site-footer ul.wp-block-list li:last-child,
footer .widget_nav_menu li:last-child,
.site-footer .widget_nav_menu li:last-child,
footer .menu li:last-child,
.site-footer .menu li:last-child {
border-bottom: none !important;
}
/* Footer Support widget — separated rows (same as Service list) */
footer .widget_text .textwidget p,
.site-footer .widget_text .textwidget p,
.ehf-footer .widget_text .textwidget p,
[data-elementor-type="footer"] .widget_text .textwidget p {
padding: 5px 0 !important;
border-bottom: 1px solid rgba(201, 168, 76, 0.12) !important;
margin: 0 !important;
}
footer .widget_text .textwidget p:last-child,
.site-footer .widget_text .textwidget p:last-child,
.ehf-footer .widget_text .textwidget p:last-child,
[data-elementor-type="footer"] .widget_text .textwidget p:last-child {
border-bottom: none !important;
}
/* ============================================
SCROLL ANIMATIONS (applied via JS)
============================================ */
.dhia-animate {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.dhia-animate.dhia-visible {
opacity: 1;
transform: translateY(0);
}
.dhia-delay-1 {
transition-delay: 0.1s !important;
}
.dhia-delay-2 {
transition-delay: 0.2s !important;
}
.dhia-delay-3 {
transition-delay: 0.3s !important;
}
/* ============================================
RESPONSIVE — TARGETED SECTIONS ONLY
============================================ */
@media (max-width: 480px) {
.elementor-element-bc62c96,
.elementor-element-574f6e3,
.elementor-element-37996d1 {
padding: 28px 20px !important;
border-radius: var(--radius-md) !important;
margin-bottom: 16px !important;
}
.elementor-element-160cb8a .elementor-heading-title,
.elementor-element-d953381 .elementor-heading-title,
.elementor-element-c509883 .elementor-heading-title,
.elementor-element-19f57b4 .elementor-heading-title {
font-size: 64px !important;
}
.elementor-element-80b033a .elementor-heading-title {
font-size: 32px !important;
}
footer,
.site-footer,
.ehf-footer,
[data-elementor-type="footer"] {
padding: 40px 16px !important;
text-align: center !important;
}
}
@media (min-width: 481px) and (max-width: 767px) {
.elementor-element-bc62c96,
.elementor-element-574f6e3,
.elementor-element-37996d1 {
padding: 32px 24px !important;
}
.elementor-element-160cb8a .elementor-heading-title,
.elementor-element-d953381 .elementor-heading-title,
.elementor-element-c509883 .elementor-heading-title,
.elementor-element-19f57b4 .elementor-heading-title {
font-size: 72px !important;
}
.elementor-element-80b033a .elementor-heading-title {
font-size: 36px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-element-bc62c96,
.elementor-element-574f6e3,
.elementor-element-37996d1 {
padding: 36px 28px !important;
}
.elementor-element-160cb8a .elementor-heading-title,
.elementor-element-d953381 .elementor-heading-title,
.elementor-element-c509883 .elementor-heading-title,
.elementor-element-19f57b4 .elementor-heading-title {
font-size: 80px !important;
}
.elementor-element-80b033a .elementor-heading-title {
font-size: 50px !important;
}
}
@media (min-width: 1025px) {
.elementor-element-9907ea5:hover .elementor-element-bc62c96 {
transform: translateX(-4px) translateY(-8px);
}
.elementor-element-9907ea5:hover .elementor-element-37996d1 {
transform: translateX(4px) translateY(-8px);
}
.elementor-element-160cb8a .elementor-heading-title,
.elementor-element-d953381 .elementor-heading-title,
.elementor-element-c509883 .elementor-heading-title,
.elementor-element-19f57b4 .elementor-heading-title {
font-size: 140px !important;
}
}
@media (min-width: 1440px) {
.elementor-element-bc62c96,
.elementor-element-574f6e3,
.elementor-element-37996d1 {
padding: 48px 40px !important;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.dhia-animate {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ============================================
6. VEHICLE CARDS — SHARED PREMIUM STYLE
(Tourfic cars + ECAB transfers)
============================================ */
/* --- Shared card: shadow + rounded corners + hover lift --- */
.tf-single-car-view,
.mptbm_booking_item {
border-radius: 12px !important;
overflow: hidden !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.tf-single-car-view:hover,
.mptbm_booking_item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14) !important;
border-color: rgba(177, 149, 64, 0.2) !important;
}
/* --- Image: subtle zoom on hover --- */
.tf-single-car-view .tf-car-image,
.mptbm_booking_item .bg_image_area {
overflow: hidden !important;
border-radius: 12px 12px 0 0 !important;
}
/* List-view: image left, rounded left only */
.tf-car-result.list-view .tf-single-car-view .tf-car-image,
.mptbm_booking_item .bg_image_area {
border-radius: 12px 0 0 12px !important;
}
.tf-single-car-view .tf-car-image img,
.mptbm_booking_item .bg_image_area div[data-bg-image] {
transition: transform 0.5s ease !important;
}
.tf-single-car-view:hover .tf-car-image img,
.mptbm_booking_item:hover .bg_image_area div[data-bg-image] {
transform: scale(1.04);
}
/* --- ECAB image: legacy fallback (overridden by section 10.3) --- */
.mptbm_booking_item ._max_200_mR_xs {
min-width: 280px;
}
.mptbm_booking_item .bg_image_area,
.mptbm_booking_item .bg_image_area div[data-bg-image] {
height: 100% !important;
min-height: 100% !important;
background-size: cover !important;
background-position: center !important;
}
/* --- Shared details area --- */
.tf-single-car-view .tf-car-details,
.mptbm_booking_item .mptbm_list_details {
padding: 16px 20px !important;
}
/* --- Title: gold accent on hover --- */
.tf-single-car-view .tf-car-content h3 a,
.mptbm_booking_item .mptbm_list_details h5 {
transition: color 0.2s ease !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
}
.tf-single-car-view:hover .tf-car-content h3 a,
.mptbm_booking_item:hover .mptbm_list_details h5 {
color: var(--dhia-gold-dark) !important;
}
/* --- Spec icons: gold tint (Tourfic) --- */
.tf-single-car-view .list-items .list svg path,
.tf-single-car-view .list-items .list svg rect,
.tf-single-car-view .list-items .list svg circle {
stroke: var(--dhia-gold-dark) !important;
}
/* --- Feature icons: gold tint (ECAB) --- */
.mptbm_booking_item .list_inline_two li i {
color: var(--dhia-gold-dark) !important;
}
/* --- Feature text: match sizes (ECAB) --- */
.mptbm_booking_item .list_inline_two li span {
font-size: 0.85rem !important;
}
/* --- Price: bold gold --- */
.tf-single-car-view .tf-price-info h3,
.mptbm_booking_item h4.textCenter {
color: var(--dhia-gold-dark) !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
}
/* --- Buttons: gold outline → filled on hover --- */
.tf-single-car-view .view-more,
.mptbm_booking_item .mptbm_transport_select {
border: 2px solid var(--dhia-gold) !important;
color: var(--dhia-gold-dark) !important;
background: transparent !important;
border-radius: 6px !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
}
.tf-single-car-view .view-more:hover,
.mptbm_booking_item .mptbm_transport_select:hover {
background: var(--dhia-gold) !important;
color: #fff !important;
}
/* --- Review star: gold (Tourfic) --- */
.tf-single-car-view .tf-reviews-box .fa-star {
color: var(--dhia-gold) !important;
}
/* ============================================
7. TRANSFER SUMMARY BOX — match Car Filter sidebar
============================================ */
div.mptbm_transport_search_area div.mp_sticky_on_scroll.summary-box {
background: var(--tf-filling-foreground, #fff) !important;
border-radius: 16px !important;
padding: 32px !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
/* Title: same weight/color as filter sidebar */
div.mptbm_transport_search_area .summary-box h3 {
font-size: 1.25rem !important;
font-weight: 600 !important;
color: var(--dhia-gold-dark) !important;
margin-bottom: 16px !important;
}
/* Labels: match filter sidebar headings */
div.mp_sticky_on_scroll.summary-box h6 {
font-size: 0.9rem !important;
font-weight: 500 !important;
color: #333 !important;
}
/* Values: match filter text */
div.mp_sticky_on_scroll.summary-box p._textLight_1 {
font-size: 0.875rem !important;
color: #6D6D6D !important;
}
/* Dividers: subtle like filter separators */
div.mp_sticky_on_scroll.summary-box .divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
margin: 12px 0 !important;
background: none !important;
}
/* ============================================
8. PREMIUM POLISH v2 — incremental enhancement
Purely additive: targets cars + transfers + tours
without altering the existing structure.
============================================ */
:root {
--dhia-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.06);
--dhia-shadow-strong: 0 18px 50px rgba(0, 0, 0, 0.18);
--dhia-gradient-gold: linear-gradient(135deg, var(--dhia-gold-light) 0%, var(--dhia-gold-dark) 100%);
}
/* --- Card elevation v2: deeper hover, softer base --- */
.tf-car-result.list-view .tf-single-car-view,
.mptbm_booking_item,
.tf-archive-view-item {
background: #fff;
isolation: isolate;
}
.tf-car-result.grid-view .tf-single-car-view {
isolation: isolate;
}
.tf-single-car-view:hover,
.mptbm_booking_item:hover,
.tf-archive-view-item:hover {
transform: translateY(-6px) !important;
box-shadow: var(--dhia-shadow-strong) !important;
border-color: rgba(201, 168, 76, 0.35) !important;
}
/* --- Image: cover + relative for overlay --- */
.tf-single-car-view .tf-car-image,
.mptbm_booking_item .bg_image_area,
.tf-archive-view-item .tf-archive-thumbnail {
position: relative;
}
.tf-single-car-view .tf-car-image img,
.tf-archive-view-item .tf-archive-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
/* --- Subtle gradient overlay on hover (better text contrast) --- */
.tf-single-car-view .tf-car-image::after,
.mptbm_booking_item .bg_image_area::after,
.tf-archive-view-item .tf-archive-thumbnail::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.22) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease;
}
.tf-single-car-view:hover .tf-car-image::after,
.mptbm_booking_item:hover .bg_image_area::after,
.tf-archive-view-item:hover .tf-archive-thumbnail::after {
opacity: 1;
}
/* --- Price badge (pill): more visible, "premium" feel --- */
.tf-single-car-view .tf-price-info h3,
.mptbm_booking_item h4.textCenter,
.tf-archive-view-item .tf-archive-price {
display: inline-block !important;
width: fit-content;
background: var(--dhia-gradient-gold) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background-clip: padding-box !important;
padding: 6px 16px !important;
border-radius: 999px !important;
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
box-shadow: 0 4px 14px rgba(201, 168, 76, 0.28);
margin: 0 auto !important;
}
/* --- CTA buttons: filled gold gradient, more engaging --- */
.tf-single-car-view .view-more,
.mptbm_booking_item .mptbm_transport_select,
.tf-archive-view-item .tf-archive-btn {
background: var(--dhia-gradient-gold) !important;
color: #fff !important;
border: none !important;
padding: 10px 24px !important;
font-weight: 600 !important;
letter-spacing: 0.03em;
border-radius: 8px !important;
box-shadow: 0 4px 14px rgba(201, 168, 76, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.tf-single-car-view .view-more:hover,
.mptbm_booking_item .mptbm_transport_select:hover,
.tf-archive-view-item .tf-archive-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(201, 168, 76, 0.42);
filter: brightness(1.06);
color: #fff !important;
}
/* --- Listing pages: more breathing room --- */
.tf-archive-template,
.mptbm_transport_search_area {
padding-top: 1.5rem;
padding-bottom: 3rem;
}
.tf-archive-grid-view .tf-single-car-view,
.tf-archive-grid-view .tf-archive-view-item,
.mptbm_transport_search_area .mptbm_booking_item {
margin-bottom: 1.5rem;
}
/* --- Title hierarchy: stronger heading --- */
.tf-single-car-view .tf-car-content h3 a,
.mptbm_booking_item .mptbm_list_details h5,
.tf-archive-view-item .tf-archive-title a {
font-family: var(--font-heading), Georgia, serif !important;
letter-spacing: -0.01em !important;
line-height: 1.25 !important;
}
/* --- Focus visible (accessibility) --- */
.tf-single-car-view a:focus-visible,
.tf-single-car-view button:focus-visible,
.mptbm_booking_item a:focus-visible,
.mptbm_booking_item button:focus-visible,
.tf-archive-view-item a:focus-visible,
.tf-archive-view-item button:focus-visible {
outline: 3px solid var(--dhia-gold);
outline-offset: 2px;
border-radius: 6px;
}
/* --- Reduced motion respect --- */
@media (prefers-reduced-motion: reduce) {
.tf-single-car-view,
.mptbm_booking_item,
.tf-archive-view-item,
.tf-single-car-view .tf-car-image img,
.mptbm_booking_item .bg_image_area div[data-bg-image],
.tf-single-car-view .view-more,
.mptbm_booking_item .mptbm_transport_select,
.tf-archive-view-item .tf-archive-btn {
transition: none !important;
}
.tf-single-car-view:hover,
.mptbm_booking_item:hover,
.tf-archive-view-item:hover,
.tf-single-car-view .view-more:hover,
.mptbm_booking_item .mptbm_transport_select:hover,
.tf-archive-view-item .tf-archive-btn:hover {
transform: none !important;
}
}
/* ============================================
9. CARDS UNIFORMITY + LIST PRICE FIX
- Equal heights/sizes in grid view
- Compact price badge on list view (one line)
- Transfers card mirrors /cars list-view style
============================================ */
/* --- 9.1 Grid view: enforce identical card sizes --- */
body .tf-car-archive-result .tf-car-result.grid-view {
align-items: stretch !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view {
display: flex !important;
flex-direction: column !important;
align-self: stretch !important;
height: auto;
}
/* Image area: fixed aspect ratio in grid → identical heights everywhere */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-image {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-image img {
height: 100% !important;
width: 100% !important;
object-fit: cover !important;
}
/* Details fill remaining height; CTA pinned to bottom */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-details {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-details>*:last-child {
margin-top: auto;
}
/* Featured cards: same width as the others (no oversize) */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view.tf-featured-car,
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view[class*="featured"] {
width: calc(50% - 16px) !important;
flex: 0 0 calc(50% - 16px) !important;
max-width: calc(50% - 16px) !important;
}
@media (max-width: 1024px) {
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view,
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view.tf-featured-car,
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view[class*="featured"] {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* --- 9.2 List view: compact price badge on a single line --- */
.tf-car-result.list-view .tf-single-car-view .tf-price-info,
.tf-car-result.list-view .tf-single-car-view .tf-price-info>* {
white-space: nowrap;
}
.tf-car-result.list-view .tf-single-car-view .tf-price-info h3 {
font-size: 0.85rem !important;
padding: 4px 12px !important;
line-height: 1.3 !important;
white-space: nowrap !important;
letter-spacing: 0 !important;
box-shadow: 0 2px 8px rgba(201, 168, 76, 0.22) !important;
}
/* Make sure the price column has enough room and no wrap */
.tf-car-result.list-view .tf-single-car-view .tf-car-price-area,
.tf-car-result.list-view .tf-single-car-view .tf-price-info,
.tf-car-result.list-view .tf-single-car-view [class*="price"] {
min-width: max-content;
}
/* --- 9.3 Transfers (/transferts) → 100% identical to /cars list-view ---
Native ecab structure:
.mptbm_booking_item (row)
├── ._max_200_mR_xs (image col)
└── .mptbm_list_details (column)
├── h5 (title)
└── .justifyBetween (row)
├── .list_inline_two (features)
└── ._min_150_mL_xs (price + button container)
├── h4.textCenter (price)
└── .mptbm-button-container (button)
Strategy: use CSS grid + display:contents to flatten the DOM into a
2x2 grid identical to /cars list-view:
┌────────┬─────────────┬────────┐
│ │ TITLE │ PRICE │
│ IMAGE ├─────────────┼────────┤
│ │ FEATURES │ BUTTON │
└────────┴─────────────┴────────┘
*/
/* --- 9.3 Transfers (/transferts) — PREMIUM LUXURY PEARL REDESIGN --- */
/* Strategy: Mobile First. Image on top, prominent. Smooth hover zoom. */
.mptbm_transport_search_area .mptbm_booking_item,
body .mptbm-show-search-result .mptbm_booking_item {
display: flex !important;
flex-direction: column !important;
/* Mobile first stack */
background: #ffffff !important;
border-radius: 20px !important;
overflow: hidden !important;
width: 100% !important;
margin-bottom: 24px !important;
padding: 0 !important;
border: 1px solid #f2eedf !important;
box-shadow: 0 10px 40px rgba(18, 25, 38, 0.05) !important;
transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease !important;
}
.mptbm_transport_search_area .mptbm_booking_item:hover {
border-color: #d4af37 !important;
box-shadow: 0 20px 50px rgba(18, 25, 38, 0.12) !important;
transform: translateY(-4px) !important;
}
/* Image column — Prominent, mise en valeur */
.mptbm_transport_search_area .mptbm_booking_item ._max_200_mR_xs {
width: 100% !important;
max-width: 100% !important;
height: 260px !important;
min-height: 260px !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
display: block !important;
}
.mptbm_transport_search_area .mptbm_booking_item .bg_image_area,
.mptbm_transport_search_area .mptbm_booking_item .bg_image_area div[data-bg-image] {
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
border-radius: 20px 20px 0 0 !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Hover zoom on image disabled to prevent studio background shifting */
.mptbm_transport_search_area .mptbm_booking_item:hover .bg_image_area div[data-bg-image] {
transform: none !important;
}
/* Overlay gradient for extra premium feel (bottom up) */
.mptbm_transport_search_area .mptbm_booking_item .bg_image_area::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: linear-gradient(to top, rgba(30, 41, 59, 0.15) 0%, transparent 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Details column */
.mptbm_transport_search_area .mptbm_booking_item .mptbm_list_details {
width: 100% !important;
padding: 24px 28px !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
box-sizing: border-box !important;
}
.mptbm_transport_search_area .mptbm_booking_item .mptbm_list_details>h5 {
margin: 0 !important;
font-family: var(--font-body), sans-serif !important;
font-size: 1.35rem !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
color: #1e293b !important;
/* Slate Blue, NO BLACK */
line-height: 1.3 !important;
}
/* Flatten wrappers */
.mptbm_transport_search_area .mptbm_booking_item .mptbm_list_details>.justifyBetween,
.mptbm_transport_search_area .mptbm_booking_item .mptbm_list_details ._min_150_mL_xs {
display: contents !important;
}
.mptbm_transport_search_area .mptbm_booking_item .mptbm_list_details .mptbm-tier-pricing-savings-ticket-container:empty {
display: none !important;
}
/* Features list */
.mptbm_transport_search_area .mptbm_booking_item .list_inline_two {
margin: 0 0 8px 0 !important;
padding: 16px 0 !important;
border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
/* Gold subtle border */
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px 24px !important;
list-style: none !important;
}
.mptbm_transport_search_area .mptbm_booking_item .list_inline_two li {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
color: #334155 !important;
/* Lighter Slate, NO BLACK */
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
.mptbm_transport_search_area .mptbm_booking_item .list_inline_two li i {
font-size: 1.05rem !important;
color: #d4af37 !important;
/* Luxury Gold */
display: block !important;
}
.mptbm_transport_search_area .mptbm_booking_item .list_inline_two li span {
color: #334155 !important;
line-height: 1 !important;
}
/* Bottom Row Container (Price + Button) */
.mptbm_transport_search_area .mptbm_booking_item .mptbm_list_details ._min_150_mL_xs {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
margin-top: 4px !important;
}
/* Price */
.mptbm_transport_search_area .mptbm_booking_item h4.textCenter {
background: transparent !important;
-webkit-text-fill-color: initial !important;
color: #1e293b !important;
/* Slate Blue, NO BLACK */
font-family: var(--font-body), sans-serif !important;
font-size: 1.6rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: left !important;
}
/* Button */
.mptbm_transport_search_area .mptbm_booking_item .mptbm-button-container {
margin: 0 !important;
}
.mptbm_transport_search_area .mptbm_booking_item .mptbm_transport_select {
background: #d4af37 !important;
/* Pure gold */
color: #ffffff !important;
border: none !important;
padding: 12px 26px !important;
font-weight: 700 !important;
border-radius: 8px !important;
font-size: 0.95rem !important;
letter-spacing: 0.02em !important;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
transition: all 0.3s ease !important;
}
.mptbm_transport_search_area .mptbm_booking_item .mptbm_transport_select:hover {
background: #c29b2b !important;
color: #ffffff !important;
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
transform: translateY(-2px) !important;
}
/* Hidden elements */
.mptbm_transport_search_area .mptbm_booking_item .mptbm-tier-pricing-savings-ticket-container,
.mptbm_transport_search_area .mptbm_booking_item .mptbm_quantity_selector {
display: none !important;
}
/* Desktop: Row Layout */
@media (min-width: 992px) {
.mptbm_transport_search_area .mptbm_booking_item {
flex-direction: row !important;
align-items: stretch !important;
}
.mptbm_transport_search_area .mptbm_booking_item ._max_200_mR_xs {
width: 45% !important;
max-width: 450px !important;
height: auto !important;
min-height: 100% !important;
}
.mptbm_transport_search_area .mptbm_booking_item .bg_image_area,
.mptbm_transport_search_area .mptbm_booking_item .bg_image_area div[data-bg-image] {
border-radius: 20px 0 0 20px !important;
}
.mptbm_transport_search_area .mptbm_booking_item .mptbm_list_details {
width: 55% !important;
padding: 32px 40px !important;
justify-content: center !important;
}
}
/* ============================================
10. PREMIUM LUXURY CARDS — Dark Theme
Applies to: /cars grid view + /transferts grid layout
============================================ */
/* --- 10.1 CARS — grid view, premium dark card (black + gold accents) --- */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view {
background: #151515 !important;
border: none !important;
border-radius: 16px !important;
padding: 0 !important;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
transition: box-shadow 0.4s ease, transform 0.4s ease !important;
color: #f5f0e6 !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(201, 168, 76, 0.15) !important;
transform: translateY(-5px) !important;
}
/* Hero image — full-bleed */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-image {
background: url('https://img.sixt.com/1600/6f09b0e8-6820-4ac0-bedd-5797e9814c18.jpg') no-repeat center center / cover !important;
aspect-ratio: 4 / 3 !important;
display: block !important;
padding: 0 !important;
position: relative !important;
border-radius: 0 !important;
overflow: hidden !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-image::after {
display: none !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-image img {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
object-position: center !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: none !important;
mix-blend-mode: normal !important;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view:hover .tf-car-image img {
transform: scale(1.08) !important;
}
/* Top badges row (tags) — elegant blur */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-other-infos {
position: absolute !important;
top: 16px !important;
left: 16px !important;
right: 16px !important;
z-index: 2 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 8px !important;
background: transparent !important;
pointer-events: none;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-other-infos>* {
pointer-events: auto;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-other-infos .tf-tags-box {
flex: 0 1 auto !important;
width: auto !important;
max-width: 70% !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-other-infos .tf-tags-box ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-other-infos .tf-tags-box ul li {
display: inline-flex !important;
align-items: center !important;
background: rgba(21, 21, 21, 0.7) !important;
color: #c9a84c !important;
font-size: 0.75rem !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding: 6px 14px !important;
border-radius: 4px !important;
border: 1px solid rgba(201, 168, 76, 0.3) !important;
font-weight: 600 !important;
line-height: 1.4 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
backdrop-filter: blur(8px);
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-other-infos .tf-reviews-box {
display: none !important;
}
/* Details area */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-details {
padding: 24px !important;
gap: 20px;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-content {
margin-bottom: 0 !important;
}
/* Title — clean and bright */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-content h3 {
margin: 0 0 6px 0 !important;
font-family: var(--font-body), sans-serif !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-content h3 a {
color: #ffffff !important;
text-decoration: none !important;
font-family: var(--font-body), sans-serif !important;
text-transform: none !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-car-content h3::after {
content: none !important;
display: none !important;
}
/* Spec list — muted grey text, gold icons */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .list-items {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px 18px !important;
margin: 18px 0 22px 0 !important;
padding: 18px 0 !important;
border-top: 1px solid #2a2a2a !important;
border-bottom: 1px solid #2a2a2a !important;
list-style: none !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .list-items .list {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 0.85rem !important;
color: #a0a0a0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
min-width: 0 !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .list-items .list svg,
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .list-items .list i {
flex: 0 0 auto;
width: 18px !important;
height: 18px !important;
font-size: 1rem !important;
color: #c9a84c !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .list-items .list svg path,
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .list-items .list svg rect,
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .list-items .list svg circle {
stroke: #c9a84c !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .list-items .list p {
margin: 0 !important;
font-size: 0.85rem !important;
color: #a0a0a0 !important;
font-weight: 400 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.3 !important;
word-break: keep-all !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
/* Bottom row: price (left, large) + CTA (right) */
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-booking-btn {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-booking-btn .tf-price-info {
flex: 1 1 auto;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-booking-btn .tf-price-info h3 {
background: none !important;
-webkit-text-fill-color: initial !important;
background-clip: initial !important;
color: #ffffff !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 1.6rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
margin: 0 !important;
display: block !important;
width: auto !important;
white-space: nowrap;
font-family: var(--font-body), sans-serif !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-booking-btn .tf-price-info h3 small {
font-size: 0.8rem !important;
font-weight: 400 !important;
color: #7a7a7a !important;
margin-left: 4px !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-booking-btn a.view-more {
background: #c9a84c !important;
color: #111111 !important;
border: none !important;
padding: 12px 24px !important;
font-weight: 700 !important;
border-radius: 6px !important;
font-size: 0.9rem !important;
letter-spacing: 0.03em;
box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3) !important;
white-space: nowrap;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
body .tf-car-archive-result .tf-car-result.grid-view .tf-single-car-view .tf-booking-btn a.view-more:hover {
background: #d4b55b !important;
color: #000000 !important;
box-shadow: 0 6px 20px rgba(201, 168, 76, 0.5) !important;
transform: translateY(-2px) !important;
}
/* --- 10.2 LIST VIEW — same premium look as grid (white + gold + sand)
Keeps the horizontal layout; just realigns colors, fonts, badges, CTA. */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view {
background: linear-gradient(to bottom, #2a2a2a 0%, #000000 100%) !important;
border: none !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
color: #f5f0e6 !important;
transition: box-shadow 0.4s ease, transform 0.4s ease !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(201, 168, 76, 0.15) !important;
transform: translateY(-3px) !important;
}
/* Force card row to stretch image full height */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view {
display: flex !important;
align-items: stretch !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-car-image {
align-self: stretch !important;
height: auto !important;
aspect-ratio: auto !important;
display: flex !important;
flex: 0 0 450px !important;
width: 450px !important;
max-width: 50% !important;
min-width: 320px !important;
border-radius: 16px 0 0 16px !important;
overflow: hidden !important;
background: url('https://img.sixt.com/1600/6f09b0e8-6820-4ac0-bedd-5797e9814c18.jpg') no-repeat center center / cover !important;
position: relative !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-car-image::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: auto !important;
right: -1px !important;
width: 30% !important;
height: 100% !important;
background: linear-gradient(to right, transparent 0%, #2a2a2a 100%) !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 1 !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-car-image img {
height: 100% !important;
width: 100% !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 16px 0 0 16px !important;
position: relative !important;
z-index: 2 !important;
}
/* Hide reviews badge in list too */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-other-infos .tf-reviews-box {
display: none !important;
}
/* Tag badges — white pill + gold border */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-other-infos .tf-tags-box ul li {
background: rgba(27, 30, 35, 0.8) !important;
color: #c9a84c !important;
border: 1px solid rgba(201, 168, 76, 0.40) !important;
border-radius: 999px !important;
padding: 4px 10px !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
backdrop-filter: blur(6px);
}
/* Title — same font/color as grid */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-car-content h3 {
font-family: var(--font-body), sans-serif !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
margin: 0 0 6px 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-car-content h3 a {
color: #f5f0e6 !important;
text-decoration: none !important;
font-family: var(--font-body), sans-serif !important;
text-transform: none !important;
}
/* Hide "Ou modèle similaire" subtitle in list */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-car-content h3::after {
content: none !important;
display: none !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items .list svg,
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items .list i {
color: #c9a84c !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
display: block !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items .list svg path,
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items .list svg rect,
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items .list svg circle {
stroke: #c9a84c !important;
}
/* Price — charcoal, no gradient, premium */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-price-info h3,
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-booking-btn .tf-price-info h3 {
background: none !important;
-webkit-text-fill-color: initial !important;
background-clip: initial !important;
color: #f5f0e6 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 1.45rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
font-family: var(--font-body), sans-serif !important;
white-space: nowrap;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-price-info h3 small,
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-booking-btn .tf-price-info h3 small {
color: #8a7f6b !important;
font-size: 0.72rem !important;
font-weight: 400 !important;
}
/* CTA — charcoal pill, gold on hover */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .view-more,
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-booking-btn a.view-more {
background: #c9a84c !important;
color: #000 !important;
border: none !important;
padding: 10px 22px !important;
font-weight: 700 !important;
border-radius: 6px !important;
font-size: 0.88rem !important;
letter-spacing: 0.02em;
box-shadow: none !important;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .view-more:hover,
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-booking-btn a.view-more:hover {
background: #d4b55b !important;
color: #000 !important;
}
/* --- 10.2.b CARS LIST-VIEW layout — identical structure as /transferts:
title (top) → features w/ sand separators → price (bottom-left) + CTA (bottom-right) */
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-car-details {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 22px 30px !important;
gap: 0 !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-car-content {
margin: 0 !important;
width: 100% !important;
max-width: none !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items {
margin: 18px 0 22px 0 !important;
padding: 20px 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px 28px !important;
list-style: none !important;
border-top: 1px solid #2a2a2a !important;
border-bottom: 1px solid #2a2a2a !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items .list,
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items .list p {
color: #a8a8a8 !important;
font-size: 0.85rem !important;
font-weight: 400 !important;
white-space: nowrap !important;
word-break: keep-all !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
line-height: 1.3 !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .list-items .list {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-booking-btn {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-booking-btn .tf-price-info {
flex: 1 1 auto;
text-align: left !important;
min-width: 0;
}
body .tf-car-archive-result .tf-car-result.list-view .tf-single-car-view .tf-booking-btn a.view-more {
flex: 0 0 auto;
}
/* --- 10.3 TRANSFERS (ecab/mptbm) ---
Moved to Section 9.3 for unified Pearl Luxury mobile-first design.
*/
/* ============================================================================
11. WOOCOMMERCE CHECKOUT — PREMIUM CLEAN
============================================================================ */
.woocommerce-checkout {
/* background: #faf8f3; removed */
}
.woocommerce-checkout .site-content #primary,
.woocommerce-checkout .site-content .ast-container,
.woocommerce-checkout .site-content .ast-article-single,
.woocommerce-checkout .site-content #content,
.woocommerce-checkout .site-content .entry-content {
background: transparent;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
width: 100% !important;
}
.woocommerce-checkout .site-content main#main {
padding: 32px 24px 80px !important;
max-width: 1320px !important;
margin: 0 auto !important;
}
/* Coupon: single unified card. JS moves form.checkout_coupon inside .woocommerce-form-coupon-toggle */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
background: #fff !important;
border: 1px solid #ebe6db !important;
border-left: 3px solid var(--dhia-gold) !important;
border-radius: 12px !important;
padding: 18px 22px !important;
box-shadow: 0 6px 24px rgba(140, 110, 60, 0.06);
margin: 0 0 28px !important;
width: 100% !important;
color: #1f1b15 !important;
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
color: inherit !important;
font-size: inherit !important;
font-family: inherit !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
display: none !important;
}
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .showcoupon {
color: var(--dhia-gold-dark) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.woocommerce-checkout .woocommerce-info a:hover {
text-decoration: underline !important;
}
/* Form lives inside the toggle now: just spacing + flex layout */
.woocommerce-checkout form.checkout_coupon {
background: transparent !important;
border: none !important;
border-top: 1px solid #ebe6db !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 14px 0 0 !important;
padding: 14px 0 0 !important;
width: 100% !important;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
}
.woocommerce-checkout form.checkout_coupon[style*="display: block"],
.woocommerce-checkout form.checkout_coupon[style*="display:block"] {
display: flex !important;
}
.woocommerce-checkout form.checkout_coupon p:not(.form-row) {
flex: 1 1 100%;
margin: 0 !important;
font-size: 0.85rem;
color: #6b5e4a;
}
.woocommerce-checkout form.checkout_coupon .form-row-first {
flex: 1 1 240px;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.woocommerce-checkout form.checkout_coupon .form-row-last {
flex: 0 0 auto;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.woocommerce-checkout form.checkout_coupon input[name="coupon_code"] {
width: 100% !important;
background: #faf8f3 !important;
border: 1px solid #e3dccb !important;
border-radius: 10px !important;
padding: 12px 14px !important;
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
color: #1f1b15 !important;
height: auto !important;
}
.woocommerce-checkout form.checkout_coupon input[name="coupon_code"]:focus {
background: #fff !important;
border-color: var(--dhia-gold) !important;
outline: none !important;
}
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
background: #1f1b15 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 12px 22px !important;
font-family: var(--font-body) !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer;
transition: background 0.2s ease !important;
white-space: nowrap;
}
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover {
background: var(--dhia-gold-dark) !important;
}
/* Two-column layout polish */
.woocommerce-checkout form.checkout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 420px;
grid-template-areas:
"customer review";
gap: 28px;
align-items: start;
}
.woocommerce-checkout #customer_details {
grid-area: customer;
min-width: 0;
width: auto !important;
padding: 0 !important;
float: none !important;
}
.woocommerce-checkout #order_review_heading {
grid-area: heading;
min-width: 0;
width: 420px !important;
max-width: 420px !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
display: none !important;
}
.woocommerce-checkout #order_review {
grid-area: review;
min-width: 0;
width: 420px !important;
max-width: 420px !important;
float: none !important;
}
@media (max-width: 900px) {
.woocommerce-checkout form.checkout {
grid-template-columns: 1fr !important;
grid-template-areas:
"customer"
"review";
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
width: 100% !important;
max-width: 100% !important;
}
}
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
width: 100% !important;
float: none !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
/* Section cards */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
background: #fff;
border: 1px solid #ebe6db;
border-radius: 16px;
padding: 28px 32px !important;
margin-bottom: 24px;
box-shadow: 0 8px 32px rgba(140, 110, 60, 0.06);
}
/* Hide empty shipping wrapper (no h3 = no fields, e.g. transfer checkout) */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(h3)) {
display: none !important;
}
/* Order review: inject "Votre commande" title styled like billing h3 */
.woocommerce-checkout #order_review::before {
content: "Votre commande";
display: block;
font-family: var(--font-body) !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
color: #1f1b15 !important;
margin: 0 0 22px !important;
padding: 0 0 14px !important;
border-bottom: 1px solid #ebe6db !important;
letter-spacing: -0.005em !important;
line-height: 1.3 !important;
}
/* Section titles — identical look across all cards */
.woocommerce-checkout .woocommerce-billing-fields>h3,
.woocommerce-checkout .woocommerce-shipping-fields>h3,
.woocommerce-checkout .woocommerce-additional-fields>h3,
.woocommerce-checkout #order_review h3 {
font-family: var(--font-body) !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
color: #1f1b15 !important;
margin: 0 0 22px !important;
padding: 0 0 14px !important;
border-bottom: 1px solid #ebe6db !important;
letter-spacing: -0.005em !important;
line-height: 1.3 !important;
text-transform: none !important;
}
/* Form fields */
.woocommerce-checkout .form-row {
margin-bottom: 18px !important;
padding: 0 !important;
}
.woocommerce-checkout .form-row label {
font-family: var(--font-body) !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
color: #6b5e4a !important;
margin-bottom: 6px !important;
display: block;
letter-spacing: 0.01em;
}
.woocommerce-checkout .form-row .required {
color: var(--dhia-gold-dark) !important;
text-decoration: none !important;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single {
width: 100% !important;
background: #faf8f3 !important;
border: 1px solid #e3dccb !important;
border-radius: 10px !important;
padding: 12px 14px !important;
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
color: #1f1b15 !important;
height: auto !important;
line-height: 1.4 !important;
box-shadow: none !important;
transition: border-color 0.2s ease, background 0.2s ease;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
background: #fff !important;
border-color: var(--dhia-gold) !important;
outline: none !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.4 !important;
color: #1f1b15 !important;
padding: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
top: 0 !important;
right: 8px !important;
}
/* Two columns inline (first/last name etc.) */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
width: calc(50% - 8px) !important;
}
.woocommerce-checkout .form-row-first {
float: left !important;
clear: left !important;
}
.woocommerce-checkout .form-row-last {
float: right !important;
clear: right !important;
}
@media (max-width: 600px) {
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
width: 100% !important;
float: none !important;
}
}
/* Right column — order summary card */
.woocommerce-checkout .woocommerce-checkout-review-order {
position: sticky;
top: 24px;
}
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
background: transparent !important;
border: none !important;
border-collapse: collapse !important;
width: 100% !important;
margin: 0 !important;
table-layout: auto !important;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
border: none !important;
border-bottom: 1px solid #ebe6db !important;
padding: 16px 0 !important;
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
color: #1f1b15 !important;
background: transparent !important;
vertical-align: top !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
.woocommerce-checkout .shop_table thead th {
font-weight: 600 !important;
font-size: 0.78rem !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: #6b5e4a !important;
padding: 0 0 12px !important;
}
.woocommerce-checkout .shop_table .product-name {
font-weight: 700 !important;
color: #1f1b15 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
padding-right: 12px !important;
}
.woocommerce-checkout .shop_table .product-total {
width: 1% !important;
white-space: nowrap !important;
padding-left: 12px !important;
}
.woocommerce-checkout .shop_table .product-name a,
.woocommerce-checkout .shop_table .product-name strong {
color: var(--dhia-gold-dark) !important;
font-weight: 700 !important;
text-decoration: none !important;
font-size: 0.95rem !important;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.woocommerce-checkout .shop_table .product-name dl,
.woocommerce-checkout .shop_table .product-name .wc-item-meta {
margin: 8px 0 0 !important;
padding: 0 !important;
font-size: 0.85rem !important;
color: #4a4033 !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
.woocommerce-checkout .shop_table .product-name dt,
.woocommerce-checkout .shop_table .product-name .wc-item-meta strong {
font-weight: 500 !important;
color: #6b5e4a !important;
margin-top: 6px !important;
text-transform: none !important;
}
.woocommerce-checkout .shop_table .product-name dd,
.woocommerce-checkout .shop_table .product-name .wc-item-meta p {
margin: 0 0 4px !important;
color: #1f1b15 !important;
}
.woocommerce-checkout .shop_table .product-total {
font-weight: 700 !important;
color: #1f1b15 !important;
text-align: right !important;
white-space: nowrap !important;
width: 1% !important;
padding-left: 12px !important;
}
.woocommerce-checkout .shop_table .cart_item .product-total bdi {
font-size: 1rem;
}
.woocommerce-checkout .shop_table tfoot th,
.woocommerce-checkout .shop_table tfoot td {
font-weight: 600 !important;
color: #1f1b15 !important;
}
.woocommerce-checkout .shop_table tfoot .order-total th,
.woocommerce-checkout .shop_table tfoot .order-total td {
border-bottom: none !important;
padding-top: 18px !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
}
.woocommerce-checkout .shop_table tfoot .order-total .amount {
color: var(--dhia-gold-dark) !important;
font-size: 1.4rem !important;
font-weight: 800 !important;
}
/* Payment methods */
.woocommerce-checkout #payment {
background: transparent !important;
border-radius: 0 !important;
margin-top: 20px;
}
.woocommerce-checkout #payment ul.payment_methods {
list-style: none !important;
padding: 0 !important;
margin: 0 0 20px !important;
border: none !important;
background: transparent !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
background: #faf8f3 !important;
border: 1px solid #e3dccb !important;
border-radius: 12px !important;
padding: 14px 18px !important;
margin-bottom: 10px !important;
transition: border-color 0.2s ease, background 0.2s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
border-color: var(--dhia-gold) !important;
background: #fff !important;
box-shadow: 0 0 0 1px var(--dhia-gold) inset;
}
.woocommerce-checkout #payment ul.payment_methods li label {
font-family: var(--font-body) !important;
font-weight: 600 !important;
color: #1f1b15 !important;
font-size: 0.95rem !important;
cursor: pointer;
margin: 0 !important;
display: inline !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio] {
accent-color: var(--dhia-gold) !important;
margin-right: 10px;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box {
background: #faf8f3 !important;
border-radius: 8px !important;
padding: 12px 14px !important;
margin-top: 10px !important;
color: #4a4033 !important;
font-size: 0.88rem !important;
line-height: 1.5;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box::before {
display: none !important;
}
/* Privacy & terms */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
font-size: 0.82rem !important;
color: #6b5e4a !important;
line-height: 1.6 !important;
margin-bottom: 14px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce-terms-and-conditions-link {
color: var(--dhia-gold-dark) !important;
text-decoration: none !important;
font-weight: 600 !important;
}
/* Place order button */
.woocommerce-checkout #place_order,
.woocommerce-checkout .place-order .button {
width: 100% !important;
background: #1f1b15 !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
padding: 16px 24px !important;
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
cursor: pointer;
transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
box-shadow: 0 4px 16px rgba(31, 27, 21, 0.15);
word-break: keep-all !important;
white-space: nowrap !important;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .place-order .button:hover {
background: var(--dhia-gold-dark) !important;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(201, 168, 76, 0.3);
}
.woocommerce-checkout #place_order:active {
transform: translateY(0);
}
/* Errors / notices */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
border-radius: 12px !important;
border: 1px solid #ebe6db !important;
background: #fff !important;
padding: 14px 18px !important;
font-family: var(--font-body) !important;
}
.woocommerce-checkout .woocommerce-error {
border-left: 3px solid #c0392b !important;
}
.woocommerce-checkout .woocommerce-message {
border-left: 3px solid var(--dhia-gold) !important;
}
/* Checkbox row (different shipping address etc.) */
.woocommerce-checkout #ship-to-different-address label {
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
color: #1f1b15 !important;
font-weight: 500 !important;
cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address input[type=checkbox] {
accent-color: var(--dhia-gold) !important;
margin-right: 8px;
}
/* ============================================
SECTION 12 — UNIFIED ARCHIVE AESTHETIC
/cars, /transferts, /excursions
Same cream background + white cards as checkout
============================================ */
/* Page background — cream like checkout */
body.post-type-archive-tf_carrental,
body.post-type-archive-tf_tours,
body.page-id-2096,
body.page-excursions {
background: #faf8f3;
}
body.post-type-archive-tf_carrental .site-content,
body.post-type-archive-tf_tours .site-content,
body.page-id-2096 .site-content,
body.page-excursions .site-content,
body.post-type-archive-tf_carrental #content,
body.post-type-archive-tf_tours #content,
body.page-id-2096 #content,
body.page-excursions #content {
background: transparent;
}
/* ===== Card aesthetic — search & filter wrappers (excluding /cars search box & banner) ===== */
.tf-car-archive-sidebar,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper,
body.post-type-archive-tf_tours .tf-archive-booking-form__style-1,
body.post-type-archive-tf_tours .tf-archive-booking-form,
body.page-excursions .mptbm_search_area {
background: #fff !important;
border: 1px solid #ebe6db !important;
border-radius: 16px !important;
box-shadow: 0 6px 20px -12px rgba(70, 50, 20, 0.18) !important;
padding: 24px 26px !important;
}
/* Subtle gold left accent on filter sidebar */
.tf-car-archive-sidebar {
border-left: 3px solid var(--dhia-gold) !important;
}
/* Section headings inside search/filter cards */
.tf-car-archive-sidebar h3,
.tf-car-archive-sidebar h4,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper h3,
body.post-type-archive-tf_tours .tf-archive-booking-form__style-1 h3 {
font-family: var(--font-body) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #1f1b15 !important;
margin: 0 0 16px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid #ebe6db !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
}
/* Inputs / selects inside archive search & filter cards */
.tf-car-archive-sidebar input[type="text"],
.tf-car-archive-sidebar input[type="number"],
.tf-car-archive-sidebar input[type="date"],
.tf-car-archive-sidebar input[type="time"],
.tf-car-archive-sidebar select,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="text"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="date"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="time"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper select,
body.post-type-archive-tf_tours .tf-archive-booking-form input[type="text"],
body.post-type-archive-tf_tours .tf-archive-booking-form input[type="date"],
body.post-type-archive-tf_tours .tf-archive-booking-form input[type="time"],
body.post-type-archive-tf_tours .tf-archive-booking-form select {
background: #faf8f3 !important;
border: 1px solid #e3dccb !important;
border-radius: 10px !important;
padding: 11px 14px !important;
font-size: 0.95rem !important;
color: #1f1b15 !important;
transition: border-color 0.18s, box-shadow 0.18s !important;
}
.tf-car-archive-sidebar input:focus,
.tf-car-archive-sidebar select:focus,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input:focus,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper select:focus,
body.post-type-archive-tf_tours .tf-archive-booking-form input:focus,
body.post-type-archive-tf_tours .tf-archive-booking-form select:focus {
border-color: var(--dhia-gold) !important;
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18) !important;
outline: none !important;
}
/* Checkboxes / radios — gold accent */
.tf-car-archive-sidebar input[type="checkbox"],
.tf-car-archive-sidebar input[type="radio"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="checkbox"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="radio"] {
accent-color: var(--dhia-gold) !important;
}
/* Search / submit buttons inside archive cards */
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper button[type="submit"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-search-btn,
body.post-type-archive-tf_tours .tf-archive-booking-form button[type="submit"],
body.post-type-archive-tf_tours .tf-archive-booking-form .tf-search-btn {
background: #1f1b15 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 12px 22px !important;
font-family: var(--font-body) !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.2s, transform 0.18s !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper button[type="submit"]:hover,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-search-btn:hover,
body.post-type-archive-tf_tours .tf-archive-booking-form button[type="submit"]:hover,
body.post-type-archive-tf_tours .tf-archive-booking-form .tf-search-btn:hover {
background: var(--dhia-gold-dark) !important;
transform: translateY(-1px) !important;
}
/* Archive header banner — softer feel on cream bg (excluding /cars: keep original banner) */
body.post-type-archive-tf_tours .tf-archive-car-banner,
body.post-type-archive-tf_tours .tf-archive-header {
background: transparent !important;
}
/* Hide the carrental archive banner entirely — keep only the search bar */
.post-type-archive-tf_carrental .tf-archive-car-banner,
.tax-carrental_location .tf-archive-car-banner,
.tax-carrental_brand .tf-archive-car-banner,
.tax-carrental_category .tf-archive-car-banner,
.page-template-tf-search .tf-archive-car-banner {
display: none !important;
}
/* Layout for archive details wrapper + reset search box top offset */
.tf-archive-car-details-warper {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.tf-archive-search-box {
top: 0 !important;
}
.tf-archive-template__one {
padding: 30px 0 !important;
}
/* ============================================
SECTION — OVERRIDE LEGACY #B19540 / #DDA704
These hex codes are baked into the WP custom
CSS (Customizer) and Elementor inline styles
in the database. Force them onto the new
--tf-primary brand color.
============================================ */
/* Tourfic search button hover (was #DDA704) */
.tf_btn:hover {
background-color: var(--tf-primary) !important;
color: #fff !important;
}
/* Tourfic autocomplete items hover */
.tf_form-inner .autocomplete-items div:hover,
.single-tf_carrental .tf-single-template__one .tf-date-select-box .tf-date-single-select .tf-select-date .info-select .autocomplete-items>div:hover {
background-color: var(--tf-primary) !important;
}
/* Time picker option hover */
.info-select .tf-select-time .time-options-list li:hover {
background: var(--tf-primary) !important;
}
/* Flatpickr selected / range days */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: var(--tf-primary) !important;
border-color: var(--tf-primary) !important;
}
/* MotoPress transport buttons (mp_style theme_color was #b19540) */
div.mptbm_transport_search_area button.mptbm_transport_select,
div.mptbm_transport_search_area button.mptbm_price_calculation {
background: var(--tf-primary) !important;
}
/* Elementor inline button text/background (color="#B19540") */
.elementor-button[style*="#B19540"],
.elementor-button[style*="#b19540"],
.elementor-widget-button .elementor-button-link[style*="#B19540"] {
color: var(--tf-primary) !important;
}
.elementor-widget-heading h1[style*="#B19540"],
.elementor-widget-heading h2[style*="#B19540"],
.elementor-widget-heading h3[style*="#B19540"],
.elementor-widget-heading h4[style*="#B19540"],
.elementor-widget-heading h5[style*="#B19540"],
.elementor-widget-heading h6[style*="#B19540"] {
color: var(--tf-primary) !important;
}
/* ============================================
SECTION — UNIFY FONT ON HOME
Force Montserrat on every element on the
homepage so Elementor, plugins and inline
widgets stop showing different typefaces.
============================================ */
body.home,
body.home *:not(i):not(.fa):not([class*="fa-"]):not([class*="icon"]):not([class*="dashicons"]):not(.elementor-star-rating):not(.elementor-star-rating *) {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home h6,
body.home .elementor-heading-title,
body.home .elementor-widget-heading,
body.home .elementor-widget-text-editor,
body.home .elementor-button,
body.home p,
body.home a,
body.home span:not(.elementor-star-rating *),
body.home li,
body.home button,
body.home input,
body.home select,
body.home textarea {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Keep Elementor star rating icons rendered with eicons font */
body.home .elementor-star-rating,
body.home .elementor-star-rating *,
body.home .elementor-star-rating i,
body.home .elementor-star-rating::before,
body.home .elementor-star-rating *::before {
font-family: eicons !important;
}
/* ============================================
SECTION — HEADER WHATSAPP BUTTON
Make the Astra header button (.ast-custom-button)
look like the Elementor "Demander un transfert"
button so the visual style is consistent.
============================================ */
.ast-header-button-1 .ast-builder-button-wrap {
display: inline-flex !important;
}
/* Hide the duplicate text link Astra outputs alongside the button */
.ast-header-button-1 a.menu-link {
display: none !important;
}
.ast-header-button-1 .ast-custom-button-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
background-color: var(--tf-primary, #D4AF37) !important;
color: #fff !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.3px !important;
padding: 12px 24px !important;
border: 1px solid var(--tf-primary, #D4AF37) !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25) !important;
transition: all 0.25s ease !important;
cursor: pointer !important;
}
.ast-header-button-1 .ast-custom-button {
background: transparent !important;
color: inherit !important;
font: inherit !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
/* WhatsApp icon before the number */
.ast-header-button-1 .ast-custom-button::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ast-header-button-1 .ast-custom-button-link:hover {
background-color: var(--dhia-gold-dark, #A68B3C) !important;
border-color: var(--dhia-gold-dark, #A68B3C) !important;
box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35) !important;
transform: translateY(-1px);
}
.ast-header-button-1 .ast-custom-button-link:focus-visible {
outline: 2px solid var(--tf-primary, #D4AF37);
outline-offset: 3px;
}
@media only screen and (max-width: 575.98px) {
.ast-header-button-1 .ast-custom-button-link {
padding: 10px 16px !important;
font-size: 13px !important;
}
}
/* ============================================
SECTION — MOBILE RESPONSIVE FIXES
Mobile-first overrides to remove the excessive
vertical space on the homepage and tighten
spacing on small screens.
============================================ */
/* HOME — shrink the hero from 80vh to something usable */
@media (max-width: 767.98px) {
body.home .elementor-section,
body.home .elementor-top-section,
body.home .e-con,
body.home .elementor-element {
min-height: auto !important;
}
/* Hero (first full-width section with car_mustang background)
Elementor stores this as a CSS variable --min-height (62vh on mobile),
so we override the variable AND the property for safety. */
body.home .elementor-element.elementor-element-71ed2ca,
body.home .elementor-section[data-id="71ed2ca"],
body.home .e-con[data-id="71ed2ca"] {
--min-height: 0 !important;
min-height: 0 !important;
--padding-top: 64px !important;
--padding-bottom: 32px !important;
padding-top: 64px !important;
padding-bottom: 32px !important;
/* Make content sit at the top instead of being vertically centered
in the leftover space, which created an empty band above the title. */
--align-items: flex-start !important;
align-items: flex-start !important;
}
/* Inner container: Elementor uses a 3-row grid with align-items:end which
pushes the title to the bottom of its row, leaving empty space above.
Switch to a simple flex column on mobile. */
body.home .elementor-element.elementor-element-ad2bb25 {
--display: flex !important;
--flex-direction: column !important;
--align-items: stretch !important;
--justify-content: flex-start !important;
--e-con-grid-template-columns: none !important;
--e-con-grid-template-rows: none !important;
--grid-auto-flow: row !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
body.home .elementor-element.elementor-element-ad2bb25>.e-con-inner {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
/* Reduce hero typography */
body.home .elementor-widget-heading h1,
body.home .elementor-widget-heading h2 {
font-size: 2.6rem !important;
line-height: 1.15 !important;
}
body.home .elementor-widget-text-editor,
body.home .elementor-widget-text-editor p {
font-size: 0.95rem !important;
line-height: 1.45 !important;
}
/* Reduce padding inside Elementor containers */
body.home .elementor-section,
body.home .e-con,
body.home .elementor-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Tighter spacing between sections */
body.home .elementor-section+.elementor-section,
body.home .e-con+.e-con {
margin-top: 0 !important;
}
/* Spacers — cap to reasonable values on phones */
body.home .elementor-widget-spacer .elementor-spacer-inner {
height: 24px !important;
}
}
/* TABLET breakpoint — apply the same hero fix as mobile */
@media (min-width: 768px) and (max-width: 1023.98px) {
body.home .elementor-element.elementor-element-71ed2ca,
body.home .elementor-section[data-id="71ed2ca"],
body.home .e-con[data-id="71ed2ca"] {
--min-height: 0 !important;
min-height: 0 !important;
--padding-top: 80px !important;
--padding-bottom: 48px !important;
padding-top: 80px !important;
padding-bottom: 48px !important;
--align-items: flex-start !important;
align-items: flex-start !important;
}
body.home .elementor-element.elementor-element-ad2bb25 {
--display: flex !important;
--flex-direction: column !important;
--align-items: stretch !important;
--justify-content: flex-start !important;
--e-con-grid-template-columns: none !important;
--e-con-grid-template-rows: none !important;
--grid-auto-flow: row !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
body.home .elementor-element.elementor-element-ad2bb25>.e-con-inner {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
body.home .elementor-widget-heading h1,
body.home .elementor-widget-heading h2 {
font-size: 3rem !important;
line-height: 1.15 !important;
}
}
/* ============================================
NOS SERVICES — Tablet 3-column layout
Cards: bc62c96 (Location), 574f6e3 (Transfert),
37996d1 (Excursions)
Parent row: 98c927e
============================================ */
@media (min-width: 768px) and (max-width: 1365.98px) {
body.home .elementor-element.elementor-element-98c927e {
--display: flex !important;
--flex-direction: row !important;
--flex-wrap: nowrap !important;
--gap: 16px !important;
--column-gap: 16px !important;
--row-gap: 16px !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 16px !important;
align-items: stretch !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.home .elementor-element.elementor-element-98c927e>.e-con-inner {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
flex-wrap: nowrap !important;
}
body.home .elementor-element.elementor-element-bc62c96,
body.home .elementor-element.elementor-element-574f6e3,
body.home .elementor-element.elementor-element-37996d1 {
--width: calc((100% - 32px) / 3) !important;
width: calc((100% - 32px) / 3) !important;
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
--padding-left: 20px !important;
--padding-right: 20px !important;
--padding-top: 28px !important;
--padding-bottom: 28px !important;
padding: 28px 20px !important;
}
/* Reset Elementor heading negative side-margins inside cards
(Elementor stores margin: 0 -70px on some headings to overflow) */
body.home .elementor-element.elementor-element-98c927e .elementor-widget-heading>.elementor-widget-container {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Scale typography down to fit 3 cards */
body.home .elementor-element.elementor-element-98c927e .elementor-widget-heading h2,
body.home .elementor-element.elementor-element-98c927e .elementor-widget-heading h3,
body.home .elementor-element.elementor-element-98c927e .elementor-widget-heading h5 {
font-size: 1.2rem !important;
line-height: 1.3 !important;
}
body.home .elementor-element.elementor-element-98c927e .elementor-widget-text-editor,
body.home .elementor-element.elementor-element-98c927e .elementor-widget-text-editor p {
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
body.home .elementor-element.elementor-element-98c927e .elementor-button {
font-size: 0.8rem !important;
padding: 10px 14px !important;
}
/* Align buttons at the same vertical position across all 3 cards.
Make each card a flex column and push the button widget to the bottom. */
body.home .elementor-element.elementor-element-bc62c96,
body.home .elementor-element.elementor-element-574f6e3,
body.home .elementor-element.elementor-element-37996d1 {
display: flex !important;
flex-direction: column !important;
--flex-direction: column !important;
}
body.home .elementor-element.elementor-element-bc62c96>.e-con-inner,
body.home .elementor-element.elementor-element-574f6e3>.e-con-inner,
body.home .elementor-element.elementor-element-37996d1>.e-con-inner {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
width: 100% !important;
}
body.home .elementor-element.elementor-element-bc62c96 .elementor-widget-button,
body.home .elementor-element.elementor-element-574f6e3 .elementor-widget-button,
body.home .elementor-element.elementor-element-37996d1 .elementor-widget-button {
margin-top: auto !important;
}
}
/* ============================================
POURQUOI NOUS CHOISIR — Responsive
Row: c415343
Items: 8740396, d08db38, e716c40, cc1de2f
============================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
/* 2 × 2 grid on tablet — items are too narrow at 4-up */
body.home .elementor-element.elementor-element-c415343 {
--display: flex !important;
--flex-direction: row !important;
--flex-wrap: wrap !important;
--gap: 24px !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 24px !important;
}
body.home .elementor-element.elementor-element-8740396,
body.home .elementor-element.elementor-element-d08db38,
body.home .elementor-element.elementor-element-e716c40,
body.home .elementor-element.elementor-element-cc1de2f {
--width: calc((100% - 24px) / 2) !important;
width: calc((100% - 24px) / 2) !important;
flex: 0 0 calc((100% - 24px) / 2) !important;
min-width: 0 !important;
}
/* Same fix as mobile: kill Elementor's -65px negative bottom margin
on the number heading widget container */
body.home .elementor-element.elementor-element-c415343 .elementor-widget-heading>.elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
body.home .elementor-element.elementor-element-c415343 .elementor-widget-heading h2.elementor-heading-title {
font-size: 64px !important;
line-height: 1 !important;
}
}
@media (max-width: 767.98px) {
/* 1 column on mobile, with the number above the label
(Elementor displays them as side-by-side widgets and the number
overlaps the label text on small viewports). */
body.home .elementor-element.elementor-element-c415343 {
--display: flex !important;
--flex-direction: column !important;
--gap: 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
body.home .elementor-element.elementor-element-8740396,
body.home .elementor-element.elementor-element-d08db38,
body.home .elementor-element.elementor-element-e716c40,
body.home .elementor-element.elementor-element-cc1de2f {
--display: flex !important;
--flex-direction: column !important;
--gap: 8px !important;
--width: 100% !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
align-items: flex-start !important;
}
/* Number + label widgets: full width, no overlap */
body.home .elementor-element.elementor-element-8740396 .elementor-widget,
body.home .elementor-element.elementor-element-d08db38 .elementor-widget,
body.home .elementor-element.elementor-element-e716c40 .elementor-widget,
body.home .elementor-element.elementor-element-cc1de2f .elementor-widget {
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
body.home .elementor-element.elementor-element-8740396 .elementor-widget-heading,
body.home .elementor-element.elementor-element-d08db38 .elementor-widget-heading,
body.home .elementor-element.elementor-element-e716c40 .elementor-widget-heading,
body.home .elementor-element.elementor-element-cc1de2f .elementor-widget-heading {
margin: 0 !important;
}
/* KILL Elementor's negative bottom margin (margin: 0 0 -65px 0)
applied via inline post-408.css to the number heading widgets.
IDs: 160cb8a, d953381, e716c40-child, cc1de2f-child */
body.home .elementor-element.elementor-element-c415343 .elementor-widget-heading>.elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
/* Shrink the giant 100px numbers so the layout breathes */
body.home .elementor-element.elementor-element-c415343 .elementor-widget-heading h2.elementor-heading-title {
font-size: 56px !important;
line-height: 1 !important;
}
}
/* ============================================
TRANSFERTS — Mobile fix
Override the 34% max-width that breaks the form on mobile.
============================================ */
@media (max-width: 1023.98px) {
div.mptbm_transport_search_area .mptbm_search_area.inputHorizontal {
max-width: 100% !important;
width: 100% !important;
}
/* Spacing + reset margin on the booking flex wrapper */
.mptbm_transport_search_area .flexWrap,
.mp_sticky_section .flexWrap {
gap: 10px !important;
}
.mptbm_transport_search_area .mainSection,
.mp_sticky_section .mainSection {
margin: 0 !important;
}
}
/* Tablet: passengers + bags side-by-side AND breathing room between vehicle cards */
@media (min-width: 768px) and (max-width: 1023.98px) {
.mptbm-filter-feature {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 16px !important;
}
.mptbm-filter-feature .mptbm-filter-feature-input {
flex: 1 1 0 !important;
min-width: 0 !important;
width: 50% !important;
}
.mptbm-filter-feature .mptbm-filter-feature-input select.formControl {
width: 100% !important;
box-sizing: border-box !important;
}
/* Add gap between vehicle result cards */
.mptbm_transport_search_area .mainSection .mp_sticky_depend_area {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.mptbm_transport_search_area .mptbm_booking_item {
margin-bottom: 0 !important;
}
}
@media (max-width: 767.98px) {
/* Passengers + Bags filters side-by-side on one line */
.mptbm-filter-feature {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 12px !important;
}
.mptbm-filter-feature .mptbm-filter-feature-input {
flex: 1 1 0 !important;
min-width: 0 !important;
width: 50% !important;
}
.mptbm-filter-feature .mptbm-filter-feature-input select.formControl {
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ============================================
TRANSFERTS — Hide consecutive/empty dividers
in the booking summary card.
The plugin emits conditionally; when a
field is empty, two dividers end up next to each other.
============================================ */
.mptbm_transport_search_area .summary-box .divider+.divider,
.summary-box .divider+.divider {
display: none !important;
}
.mptbm_transport_search_area .summary-box .divider:first-child,
.mptbm_transport_search_area .summary-box .divider:last-child,
.summary-box .divider:first-child,
.summary-box .divider:last-child {
display: none !important;
}
/* Hide the divider that sits between the inner content and the
"Précédent" button (direct child of .summary-box, before the button) */
.summary-box>.divider,
.summary-box>.divider:has(+ button),
.summary-box .divider+button {
/* fallback: hide all dividers that are direct children of summary-box */
}
.summary-box>.divider {
display: none !important;
}
/* Mobile: tighten the summary card spacing */
@media (max-width: 767.98px) {
.summary-box {
padding: 16px !important;
}
.summary-box h3 {
font-size: 1.1rem !important;
margin: 0 0 8px !important;
}
.summary-box h6 {
font-size: 0.9rem !important;
margin: 0 0 2px !important;
line-height: 1.3 !important;
}
.summary-box p,
.summary-box ._textLight_1 {
font-size: 0.9rem !important;
margin: 0 0 8px !important;
line-height: 1.35 !important;
}
.summary-box .divider {
margin: 6px 0 !important;
height: 1px !important;
}
.summary-box ._dFlex_fdColumn {
gap: 0 !important;
}
.summary-box ._dFlex_fdColumn>* {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
.ast-hfb-header .ast-main-header-wrap,
header.site-header,
header.site-header .ast-primary-header-bar,
header.site-header .main-header-bar {
box-shadow: 0 4px 16px -8px rgba(70, 50, 20, 0.18),
0 1px 0 rgba(235, 230, 219, 0.9) !important;
position: relative;
z-index: 5;
}
/* ============================================
SECTION 14 — HOME HEADER MATCHES FOOTER
Dark gradient header on the homepage only.
============================================ */
body.home header.site-header,
body.home header.site-header .ast-main-header-wrap,
body.home header.site-header .ast-primary-header-bar,
body.home header.site-header .main-header-bar,
body.home header.site-header .main-header-bar-wrap,
body.home .ast-above-header,
body.home .ast-below-header {
background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%) !important;
border-bottom: none !important;
}
/* Home — readable text on dark header */
body.home header.site-header .menu-item>a,
body.home header.site-header .ast-builder-menu-1 .menu-item>a,
body.home header.site-header .ast-header-account-wrap a,
body.home header.site-header .ast-builder-text-element {
color: #f5efe0 !important;
}
body.home header.site-header .menu-item>a:hover,
body.home header.site-header .menu-item.current-menu-item>a {
color: var(--dhia-gold) !important;
}
/* Home — remove header caramel shadow (dark bg already separates it) */
body.home .ast-hfb-header .ast-main-header-wrap,
body.home header.site-header,
body.home header.site-header .ast-primary-header-bar,
body.home header.site-header .main-header-bar {
box-shadow: none !important;
}
/* Home — kill any white separator line under header */
body.home header.site-header,
body.home header.site-header *,
body.home .ast-main-header-wrap,
body.home .main-header-bar,
body.home .ast-primary-header-bar,
body.home .site-header .main-header-bar-wrap,
body.home #masthead {
border: none !important;
border-bottom: 0 !important;
border-top: 0 !important;
outline: none !important;
}
body.home header.site-header::after,
body.home .main-header-bar::after,
body.home .ast-primary-header-bar::after {
display: none !important;
content: none !important;
}
/* Home — kill any 1px separator div between header and content */
body.home #masthead+*,
body.home .ast-header-break-point,
body.home .ast-builder-grid-row-container-inner,
body.home .ast-flex.main-header-container,
body.home .site-content>*:first-child,
body.home .site-content,
body.home #content,
body.home #primary {
border-top: 0 !important;
box-shadow: none !important;
}
/* Force the area under the header to share the dark color */
body.home #masthead {
background-color: #000 !important;
}
/* Home — body background dark to avoid any seam between header and hero */
body.home {
background-color: #000 !important;
}
body.home .site,
body.home #page {
background: transparent !important;
}
/* Home — nuclear: kill ALL margins and 1px seams between header and hero */
body.home #masthead,
body.home #masthead>*,
body.home .ast-main-header-wrap,
body.home .main-header-bar,
body.home .ast-primary-header-bar,
body.home .ast-builder-grid-row,
body.home .ast-builder-grid-row-container,
body.home .ast-builder-grid-row-container-inner {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
body.home #content,
body.home #primary,
body.home .site-content,
body.home .ast-container,
body.home .entry-content,
body.home .elementor-section:first-of-type,
body.home .elementor section:first-of-type {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
body.home .elementor-element:first-child {
margin-top: 0 !important;
border-top: 0 !important;
}
/* ============================================
SECTION 14b — CONTACT HEADER (same as Home)
============================================ */
body.page-id-15 header.site-header,
body.page-id-15 header.site-header .ast-main-header-wrap,
body.page-id-15 header.site-header .ast-primary-header-bar,
body.page-id-15 header.site-header .main-header-bar,
body.page-id-15 header.site-header .main-header-bar-wrap,
body.page-id-15 .ast-above-header,
body.page-id-15 .ast-below-header {
background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%) !important;
border-bottom: none !important;
}
body.page-id-15 header.site-header .menu-item>a,
body.page-id-15 header.site-header .ast-builder-menu-1 .menu-item>a,
body.page-id-15 header.site-header .ast-header-account-wrap a,
body.page-id-15 header.site-header .ast-builder-text-element {
color: #f5efe0 !important;
}
body.page-id-15 header.site-header .menu-item>a:hover,
body.page-id-15 header.site-header .menu-item.current-menu-item>a {
color: var(--dhia-gold) !important;
}
body.page-id-15 .ast-hfb-header .ast-main-header-wrap,
body.page-id-15 header.site-header,
body.page-id-15 header.site-header .ast-primary-header-bar,
body.page-id-15 header.site-header .main-header-bar {
box-shadow: none !important;
}
/* Home & Contact — kill box-shadow on main-header wrappers */
body.home .ast-main-header-wrap,
body.home .main-header-bar-wrap,
body.home .ast-main-header-wrap.main-header-bar-wrap,
body.page-id-15 .ast-main-header-wrap,
body.page-id-15 .main-header-bar-wrap,
body.page-id-15 .ast-main-header-wrap.main-header-bar-wrap {
box-shadow: none !important;
}
/* ============================================
SECTION 15 — LOGO FIX
Restore the original colored logo on EVERY page
(Astra applies a white SVG filter when the
.ast-theme-transparent-header class is set).
============================================ */
.ast-theme-transparent-header .site-logo-img img,
.site-logo-img .transparent-custom-logo img,
.site-logo-img img {
filter: none !important;
}
/* ============================================
SECTION 16 — MOBILE BURGER MENU READABILITY
The off-canvas mobile popup uses a light
background, so force dark text colors there
even on Home / Contact (which override desktop
menu links to cream).
============================================ */
.ast-mobile-popup-drawer .menu-item>a,
.ast-mobile-popup-drawer .menu-item>.menu-link,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item>.menu-link,
.ast-mobile-popup-content .menu-item>a,
.ast-mobile-popup-content .menu-item>.menu-link,
.ast-mobile-header-content .menu-item>a,
.ast-mobile-header-content .menu-item>.menu-link,
body.home .ast-mobile-popup-drawer .menu-item>a,
body.home .ast-mobile-popup-drawer .menu-item>.menu-link,
body.home .ast-mobile-header-content .menu-item>a,
body.home .ast-mobile-header-content .menu-item>.menu-link,
body.page-id-15 .ast-mobile-popup-drawer .menu-item>a,
body.page-id-15 .ast-mobile-popup-drawer .menu-item>.menu-link,
body.page-id-15 .ast-mobile-header-content .menu-item>a,
body.page-id-15 .ast-mobile-header-content .menu-item>.menu-link {
color: #1f1b15 !important;
}
.ast-mobile-popup-drawer .menu-item>a:hover,
.ast-mobile-popup-drawer .menu-item.current-menu-item>a,
.ast-mobile-popup-content .menu-item>a:hover,
.ast-mobile-popup-content .menu-item.current-menu-item>a,
.ast-mobile-header-content .menu-item>a:hover,
.ast-mobile-header-content .menu-item.current-menu-item>a {
color: var(--dhia-gold) !important;
}
/* Burger trigger icon — gold on all pages (unified) */
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-outline,
[data-section="section-header-mobile-trigger"] .menu-toggle,
[data-section="section-header-mobile-trigger"] svg {
color: var(--dhia-gold, #c9a84c) !important;
fill: var(--dhia-gold, #c9a84c) !important;
}
/* Hide the list-view toggle button on /cars (mobile only — keep grid only) */
@media (max-width: 768px) {
body.post-type-archive-tf_carrental li[data-view="list"] {
display: none !important;
}
}
/* ==========================================================================
Section 19 — Checkout order item details: gold icons before each label
(Layout untouched — icons only, both for Tourfic car and any product.)
========================================================================== */
.woocommerce-checkout #order_review dl.variation dt::before {
font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif;
font-weight: 900;
color: var(--dhia-gold-dark, #8c6e3c);
margin-right: 8px;
display: inline-block;
width: 14px;
text-align: center;
}
/* Pick up / pickup / lieu de prise en charge */
.woocommerce-checkout #order_review dl.variation dt[class*="ick"]::before,
.woocommerce-checkout #order_review dl.variation dt[class*="rise"]::before,
.woocommerce-checkout #order_review dl.variation dt[class*="harge"]::before {
content: "\f3c5";
}
/* map-marker-alt */
/* Drop off / lieu de retour / lieu de dépôt */
.woocommerce-checkout #order_review dl.variation dt[class*="rop"]::before,
.woocommerce-checkout #order_review dl.variation dt[class*="etour"]::before,
.woocommerce-checkout #order_review dl.variation dt[class*="épôt"]::before,
.woocommerce-checkout #order_review dl.variation dt[class*="epot"]::before {
content: "\f3c5";
}
/* map-marker-alt */
/* Date / date de départ / date de retour */
.woocommerce-checkout #order_review dl.variation dt[class*="ate"]::before {
content: "\f073";
}
/* calendar */
/* Time / heure */
.woocommerce-checkout #order_review dl.variation dt[class*="ime"]::before,
.woocommerce-checkout #order_review dl.variation dt[class*="eure"]::before {
content: "\f017";
}
/* clock */
/* Extra */
.woocommerce-checkout #order_review dl.variation dt[class*="xtra"]::before {
content: "\f02b";
}
/* tag */
/* Protection */
.woocommerce-checkout #order_review dl.variation dt[class*="rotection"]::before {
content: "\f132";
}
/* shield */
/* Due / price / prix — no icon */
.woocommerce-checkout #order_review dl.variation dt[class*="ue"]::before,
.woocommerce-checkout #order_review dl.variation dt[class*="rix"]::before {
content: none !important;
margin: 0 !important;
width: 0 !important;
}
/* ==========================================================================
Section 20 — Render ECAB transfer checkout details exactly like Tourfic car
Each becomes a label-block + value-block pair, with the same gold icon style.
========================================================================== */
/* Hide the "Booking Details:" key — we display its contents directly */
.woocommerce-checkout #order_review dl.variation dt[class*="ooking_Details"],
.woocommerce-checkout #order_review dl.variation dt[class*="ooking-details"] {
display: none !important;
}
.woocommerce-checkout #order_review dl.variation dd[class*="ooking_Details"],
.woocommerce-checkout #order_review dl.variation dd[class*="ooking-details"] {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* Strip ECAB inner wrappers so the list flows like Tourfic dt/dd */
.woocommerce-checkout #order_review .mpStyle,
.woocommerce-checkout #order_review .mpStyle .dLayout_xs {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Force Tourfic body font on every ECAB descendant in checkout */
.woocommerce-checkout #order_review .mpStyle,
.woocommerce-checkout #order_review .mpStyle * {
font-family: var(--font-body) !important;
}
.woocommerce-checkout #order_review .mpStyle ul.cart_list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Each line = label block + value block (mimics Tourfic dt+dd stacking) */
.woocommerce-checkout #order_review .mpStyle ul.cart_list li {
display: block !important;
margin: 0 0 14px !important;
padding: 0 !important;
font-family: var(--font-body) !important;
}
/* Hide ECAB's own FA icon span — we apply ::before icons below to match Tourfic */
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>span.fas,
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>span.far,
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>span.fa,
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>span[class^="fa-"],
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>span[class*=" fa-"] {
display: none !important;
}
/* Label (h6) — IDENTICAL to Tourfic dt (high specificity to beat .mpStyle defaults) */
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>h6,
.woocommerce-checkout div.mpStyle ul.cart_list li>h6._mR_xs,
.woocommerce-checkout div.mpStyle ul.cart_list li h6 {
display: block !important;
margin: 6px 0 0 !important;
padding: 0 !important;
font-family: var(--font-body) !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
color: #6b5e4a !important;
text-transform: none !important;
line-height: 1.6 !important;
letter-spacing: normal !important;
}
/* Gold icon before label — Font Awesome pseudo-element (no default; set per type) */
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>h6::before {
font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif;
font-weight: 900;
color: var(--dhia-gold-dark, #8c6e3c);
margin-right: 0;
display: inline-block;
width: 0;
text-align: center;
content: none;
}
/* Value (span/p after h6) — IDENTICAL to Tourfic dd */
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>span:not(.fas):not(.far):not(.fa):not([class*="fa-"]),
.woocommerce-checkout div.mpStyle ul.cart_list li>span:not(.fas):not(.far):not(.fa):not([class*="fa-"]),
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>p,
.woocommerce-checkout div.mpStyle ul.cart_list li>p,
.woocommerce-checkout #order_review .mpStyle ul.cart_list li>p>span,
.woocommerce-checkout div.mpStyle ul.cart_list li>p>span {
display: block !important;
margin: 0 0 4px !important;
padding: 0 !important;
font-family: var(--font-body) !important;
font-size: 0.85rem !important;
font-weight: 400 !important;
color: #1f1b15 !important;
line-height: 1.6 !important;
letter-spacing: normal !important;
}
/* Pick the right icon based on the original ECAB class on the same */
.woocommerce-checkout #order_review .mpStyle ul.cart_list li:has(> span.fa-map-marker-alt)>h6::before {
content: "\f3c5";
width: 14px;
margin-right: 8px;
}
.woocommerce-checkout #order_review .mpStyle ul.cart_list li:has(> span.fa-route)>h6::before {
content: "\f4d7";
width: 14px;
margin-right: 8px;
}
.woocommerce-checkout #order_review .mpStyle ul.cart_list li:has(> span.fa-clock)>h6::before {
content: "\f017";
width: 14px;
margin-right: 8px;
}
.woocommerce-checkout #order_review .mpStyle ul.cart_list li:has(> span.fa-calendar-alt)>h6::before {
content: "\f073";
width: 14px;
margin-right: 8px;
}
.woocommerce-checkout #order_review .mpStyle ul.cart_list li:has(> span.fa-users)>h6::before {
content: "\f0c0";
width: 14px;
margin-right: 8px;
}
.woocommerce-checkout #order_review .mpStyle ul.cart_list li:has(> span.fa-suitcase)>h6::before {
content: "\f0f2";
width: 14px;
margin-right: 8px;
}
.woocommerce-checkout #order_review .mpStyle ul.cart_list li:has(> span.fa-briefcase)>h6::before {
content: "\f0b1";
width: 14px;
margin-right: 8px;
}
.woocommerce-checkout #order_review .mpStyle ul.cart_list li:has(> span.fa-car)>h6::before {
content: "\f1b9";
width: 14px;
margin-right: 8px;
}
/* ==========================================================================
Section 20 — Checkout "Votre commande" card: clean mobile layout (≤767.98px)
Goals:
- Card has enough internal padding so content doesn't touch edges
- Product name + price on the SAME row (price aligned right)
- Meta labels (Lieu de prise / Date) below, on ONE line, gold icon visible
- Meta values below their label, full width
- Totals (Sous-total / Expédition / Total) keep label left, amount right
========================================================================== */
@media (max-width: 767.98px) {
/* Card itself */
.woocommerce-checkout #order_review {
padding: 22px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Table fills the card, no overflow */
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
width: 100% !important;
max-width: 100% !important;
table-layout: auto !important;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
padding: 12px 0 !important;
font-size: 0.88rem !important;
}
/* Header (PRODUIT / SOUS-TOTAL) — keep small uppercase */
.woocommerce-checkout .shop_table thead th {
font-size: 0.7rem !important;
padding: 0 0 10px !important;
}
/* Product name cell: takes remaining width */
.woocommerce-checkout .shop_table .cart_item .product-name {
padding-right: 8px !important;
width: auto !important;
}
.woocommerce-checkout .shop_table .product-name a,
.woocommerce-checkout .shop_table .product-name strong {
font-size: 0.88rem !important;
}
/* Price cell: hugs the right edge, no wrap */
.woocommerce-checkout .shop_table .cart_item .product-total {
width: 1% !important;
white-space: nowrap !important;
text-align: right !important;
padding-left: 8px !important;
font-size: 0.88rem !important;
}
.woocommerce-checkout .shop_table .cart_item .product-total bdi {
font-size: 0.88rem !important;
}
/* Meta block (Lieu de prise / Date …) — slightly smaller, single-line labels */
.woocommerce-checkout .shop_table .product-name dl,
.woocommerce-checkout .shop_table .product-name .wc-item-meta {
margin: 8px 0 0 !important;
font-size: 0.78rem !important;
line-height: 1.5 !important;
}
.woocommerce-checkout .shop_table .product-name dl dt,
.woocommerce-checkout .shop_table .product-name dl.variation dt,
.woocommerce-checkout .shop_table .product-name .wc-item-meta-label,
.woocommerce-checkout .shop_table .product-name .wc-item-meta strong {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
font-size: 0.74rem !important;
margin-top: 6px !important;
}
.woocommerce-checkout .shop_table .product-name dl dd,
.woocommerce-checkout .shop_table .product-name .wc-item-meta p {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
font-size: 0.82rem !important;
margin: 0 0 4px !important;
}
/* Totals (tfoot) — label left, amount right */
.woocommerce-checkout .shop_table tfoot th {
text-align: left !important;
width: auto !important;
font-size: 0.9rem !important;
}
.woocommerce-checkout .shop_table tfoot td {
text-align: right !important;
white-space: nowrap !important;
width: 1% !important;
font-size: 0.9rem !important;
padding-left: 8px !important;
}
.woocommerce-checkout .shop_table tfoot .order-total th,
.woocommerce-checkout .shop_table tfoot .order-total td {
font-size: 1rem !important;
}
.woocommerce-checkout .shop_table tfoot .order-total .amount {
font-size: 1.15rem !important;
}
}
/* ==========================================================================
Section 21 — Mobile burger menu: overlay (don't push content)
On non-home pages the dropdown menu (.ast-mobile-header-content) sits in
the document flow and pushes the page when opened. Make it overlay.
========================================================================== */
@media (max-width: 921px) {
/* Anchor for the absolute dropdown */
.ast-mobile-header-wrap,
.main-header-bar,
.main-header-bar-wrap,
.ast-main-header-wrap {
position: relative !important;
}
.ast-mobile-header-content {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99 !important;
background: #ffffff !important;
box-shadow: 0 12px 24px -12px rgba(70, 50, 20, 0.25) !important;
border-top: 1px solid #ebe6db !important;
}
/* Home & Contact have a dark transparent header — keep dropdown contrasting */
body.home .ast-mobile-header-content,
body.page-id-15 .ast-mobile-header-content {
background: #ffffff !important;
}
}
/* ==========================================================================
Section 23 — PREMIUM FOOTER (CSS-only, enhances existing Astra builder)
Improves the existing dark/gold base with: refined spacing, decorative
gold accents, icon-prefixed support lines, polished social pills,
animated link underlines, and a top divider separating areas.
========================================================================== */
/* Layout polish: comfortable padding + gradient with subtle radial highlight */
footer.site-footer {
padding: 64px 0 0 !important;
background:
radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.06), transparent 60%),
linear-gradient(180deg, #0d0d0d 0%, #050505 100%) !important;
overflow: hidden;
}
/* The top gold accent line — make it a glowing thicker ribbon */
footer.site-footer::before {
width: 220px !important;
height: 3px !important;
background: linear-gradient(90deg, transparent, var(--dhia-gold, #c9a84c), transparent) !important;
box-shadow: 0 0 24px rgba(201, 168, 76, 0.45);
}
/* Constrain inner widths on large screens for editorial feel */
.site-primary-footer-wrap .ast-builder-grid-row-container-inner,
.site-below-footer-wrap .ast-builder-grid-row-container-inner {
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
/* Footer columns: gap + divider between them on desktop */
.site-primary-footer-inner-wrap {
gap: 48px !important;
padding-bottom: 56px !important;
position: relative;
}
@media (min-width: 768px) {
.site-primary-footer-inner-wrap>.site-footer-section+.site-footer-section {
border-left: 1px solid rgba(201, 168, 76, 0.12);
padding-left: 48px;
}
}
/* Widget titles — premium: small caps, gold, accented underline */
footer.site-footer .widget-title {
font-family: var(--font-heading, 'Playfair Display', serif) !important;
font-size: 0.95rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--dhia-gold, #c9a84c) !important;
font-weight: 600 !important;
margin: 0 0 22px !important;
padding: 0 0 14px !important;
position: relative;
}
footer.site-footer .widget-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 36px;
height: 2px;
background: linear-gradient(90deg, var(--dhia-gold-dark, #8c6e3c), var(--dhia-gold-light, #e8d28a));
border-radius: 2px;
}
/* Services menu — pretty list with chevron + slide on hover */
footer.site-footer .widget_nav_menu .menu {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
footer.site-footer .widget_nav_menu .menu .menu-item {
margin: 0 !important;
padding: 0 !important;
}
footer.site-footer .widget_nav_menu .menu .menu-item .menu-link,
footer.site-footer .widget_nav_menu .menu .menu-item a {
display: inline-block !important;
padding: 6px 0 6px 18px !important;
position: relative;
color: var(--dhia-gray-light, #cdc7b8) !important;
font-size: 0.92rem !important;
letter-spacing: 0.02em;
transition: transform 0.3s ease, color 0.3s ease;
}
footer.site-footer .widget_nav_menu .menu .menu-item a::before {
content: '›';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: var(--dhia-gold, #c9a84c);
font-weight: 700;
font-size: 1.05rem;
transition: transform 0.3s ease, color 0.3s ease;
}
footer.site-footer .widget_nav_menu .menu .menu-item a:hover {
color: var(--dhia-gold-light, #e8d28a) !important;
transform: translateX(4px);
}
footer.site-footer .widget_nav_menu .menu .menu-item a:hover::before {
transform: translateY(-50%) translateX(2px);
color: var(--dhia-gold-light, #e8d28a);
}
/* Support widget: icon prefix per line (email, phone, phone, clock, pin, pin) */
footer.site-footer .widget_text .textwidget p {
margin: 0 0 6px !important;
padding-left: 26px !important;
position: relative;
font-size: 0.92rem !important;
color: var(--dhia-gray-light, #cdc7b8) !important;
line-height: 1.5 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
footer.site-footer .widget_text .textwidget p a {
color: inherit !important;
text-decoration: none;
}
footer.site-footer .widget_text .textwidget p a:hover {
color: var(--dhia-gold-light, #e8d28a) !important;
}
footer.site-footer .widget_text .textwidget p::before {
position: absolute;
left: 0;
top: 4px;
width: 18px;
height: 18px;
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
font-weight: 900;
color: var(--dhia-gold, #c9a84c);
font-size: 0.85rem;
display: inline-block;
}
/* 1: envelope */
footer.site-footer .widget_text .textwidget p:nth-child(1)::before { content: '\f0e0'; }
/* 2: phone */
footer.site-footer .widget_text .textwidget p:nth-child(2)::before { content: '\f095'; }
/* 3: phone */
footer.site-footer .widget_text .textwidget p:nth-child(3)::before { content: '\f095'; }
/* 4: clock */
footer.site-footer .widget_text .textwidget p:nth-child(4)::before { content: '\f017'; }
/* 5 & 6: map-marker (agences) */
footer.site-footer .widget_text .textwidget p:nth-child(5)::before,
footer.site-footer .widget_text .textwidget p:nth-child(6)::before {
content: '\f3c5';
}
footer.site-footer .widget_text .textwidget p.dhia-footer-agency strong {
color: var(--dhia-gold-light, #e8d28a) !important;
font-weight: 600;
margin-right: 4px;
}
/* Below-footer area: top divider + balanced padding */
.site-below-footer-wrap {
padding: 22px 0 28px !important;
border-top: 1px solid rgba(201, 168, 76, 0.12);
background: transparent !important;
}
.site-below-footer-inner-wrap {
align-items: center !important;
}
.ast-footer-copyright p {
margin: 0 !important;
font-size: 0.8rem !important;
letter-spacing: 0.04em;
color: rgba(205, 199, 184, 0.7) !important;
}
/* Social icons — premium pill */
footer.site-footer .ast-builder-social-element {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(201, 168, 76, 0.05) !important;
border: 1px solid rgba(201, 168, 76, 0.2) !important;
margin: 0 6px !important;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
overflow: hidden;
}
footer.site-footer .ast-builder-social-element::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--dhia-gold, #c9a84c), var(--dhia-gold-dark, #8c6e3c));
opacity: 0;
transition: opacity 0.35s ease;
z-index: 0;
}
footer.site-footer .ast-builder-social-element span,
footer.site-footer .ast-builder-social-element svg {
position: relative;
z-index: 1;
}
footer.site-footer .ast-builder-social-element svg {
width: 18px !important;
height: 18px !important;
}
footer.site-footer .ast-builder-social-element:hover {
border-color: var(--dhia-gold, #c9a84c) !important;
transform: translateY(-4px) !important;
box-shadow: 0 8px 22px rgba(201, 168, 76, 0.35);
}
footer.site-footer .ast-builder-social-element:hover::before {
opacity: 1;
}
footer.site-footer .ast-builder-social-element:hover svg {
fill: #0d0d0d !important;
}
/* Mobile — stack & center */
@media (max-width: 767.98px) {
footer.site-footer {
padding-top: 48px !important;
text-align: center;
}
.site-primary-footer-inner-wrap {
gap: 32px !important;
padding-bottom: 40px !important;
}
footer.site-footer .widget-title::after {
left: 50%;
transform: translateX(-50%);
}
footer.site-footer .widget_nav_menu .menu .menu-item a {
padding-left: 16px !important;
}
.site-below-footer-inner-wrap {
flex-direction: column !important;
gap: 16px;
text-align: center;
}
}
/* Mobile — center copyright block */
@media (max-width: 767.98px) {
.site-below-footer-wrap .ast-builder-grid-row,
.site-below-footer-inner-wrap,
.site-below-footer-wrap .site-footer-section,
.site-below-footer-wrap .site-footer-below-section-1,
.site-below-footer-wrap .site-footer-below-section-2,
.site-below-footer-wrap .ast-builder-layout-element,
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap .ast-footer-social-1-wrap,
.site-below-footer-wrap .footer-social-inner-wrap {
justify-content: center !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
.site-below-footer-wrap .ast-footer-copyright p {
text-align: center !important;
}
}
/* Mobile — tighten gap between footer columns and copyright, adjust social icons spacing */
@media (max-width: 767.98px) {
footer.site-footer .site-primary-footer-wrap {
padding-bottom: 0 !important;
}
footer.site-footer .site-primary-footer-inner-wrap {
padding-bottom: 24px !important;
gap: 24px !important;
}
footer.site-footer .site-below-footer-wrap {
padding: 16px 0 36px !important;
/* Reduced top, increased bottom padding so icons aren't glued to edge */
margin-top: 0 !important;
}
/* Reduce space above social buttons, ensure space below */
footer.site-footer .site-below-footer-wrap .site-footer-below-section-1 {
margin-bottom: 4px !important;
/* Pull copyright closer to social */
}
footer.site-footer .site-below-footer-wrap .site-footer-below-section-2,
footer.site-footer .site-below-footer-wrap .ast-footer-social-1-wrap {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 12px !important;
}
footer.site-footer .site-footer-section {
padding: 0 !important;
margin: 0 !important;
}
footer.site-footer .site-below-footer-wrap .site-footer-section+.site-footer-section {
margin-top: 8px !important;
}
}
/* Tablet — align copyright/social with the primary footer columns */
@media (min-width: 768px) and (max-width: 1023.98px) {
footer.site-footer .site-below-footer-wrap .ast-builder-grid-row-container-inner,
footer.site-footer .site-primary-footer-wrap .ast-builder-grid-row-container-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 32px !important;
box-sizing: border-box !important;
}
footer.site-footer .site-below-footer-inner-wrap {
align-items: center !important;
justify-content: space-between !important;
}
footer.site-footer .site-below-footer-wrap .site-footer-section,
footer.site-footer .site-below-footer-wrap .ast-builder-layout-element,
footer.site-footer .site-below-footer-wrap .ast-footer-copyright {
margin: 0 !important;
padding: 0 !important;
}
footer.site-footer .site-below-footer-wrap .ast-footer-copyright p {
text-align: left !important;
}
}
/* Tablet — "Faites le premier pas" CTA: add breathing room around the
vertical divider between the button and the phone number.
Parent row: .elementor-element-0378880 (button col 7ec7b5f | phone col 309aaf4) */
@media (min-width: 768px) and (max-width: 1023.98px) {
body.home .elementor-element-0378880 {
gap: 40px !important;
}
body.home .elementor-element-7ec7b5f {
padding-right: 24px !important;
}
body.home .elementor-element-309aaf4 {
padding-left: 24px !important;
}
}
/* ==========================================================================
Section 24 — PREMIUM MENU (header navigation)
Refines existing Astra/Elementor header without changing markup.
- Desktop: refined font, animated gold underline on hover/current
- WhatsApp / phone CTA button: premium pill with shine
- Mobile drawer: nicer spacing, gold accents, slide-in items
========================================================================== */
/* --- Desktop primary menu --- */
@media (min-width: 922px) {
header.site-header .main-header-menu {
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
header.site-header .main-header-menu>.menu-item {
margin: 0 !important;
}
header.site-header .main-header-menu>.menu-item>.menu-link {
position: relative;
padding: 10px 16px !important;
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
transition: color 0.3s ease !important;
}
/* Animated gold underline */
header.site-header .main-header-menu>.menu-item>.menu-link::after {
content: '';
position: absolute;
left: 50%;
bottom: 4px;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--dhia-gold-dark, #8c6e3c), var(--dhia-gold-light, #e8d28a));
transform: translateX(-50%);
transition: width 0.35s ease;
border-radius: 2px;
}
header.site-header .main-header-menu>.menu-item:hover>.menu-link::after,
header.site-header .main-header-menu>.menu-item.current-menu-item>.menu-link::after,
header.site-header .main-header-menu>.menu-item.current-menu-ancestor>.menu-link::after {
width: calc(100% - 32px);
}
header.site-header .main-header-menu>.menu-item:hover>.menu-link,
header.site-header .main-header-menu>.menu-item.current-menu-item>.menu-link,
header.site-header .main-header-menu>.menu-item.current-menu-ancestor>.menu-link {
color: var(--dhia-gold, #c9a84c) !important;
}
/* Submenu (dropdown) — premium dark card */
header.site-header .main-header-menu .sub-menu {
background: linear-gradient(180deg, #131313, #0a0a0a) !important;
border: 1px solid rgba(201, 168, 76, 0.18) !important;
border-radius: 12px !important;
box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6),
0 0 30px rgba(201, 168, 76, 0.08) !important;
padding: 8px 0 !important;
overflow: hidden;
min-width: 220px !important;
}
header.site-header .main-header-menu .sub-menu .menu-link {
padding: 10px 18px !important;
font-size: 0.82rem !important;
color: var(--dhia-gray-light, #cdc7b8) !important;
transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease !important;
}
header.site-header .main-header-menu .sub-menu .menu-item:hover>.menu-link {
background: rgba(201, 168, 76, 0.08) !important;
color: var(--dhia-gold, #c9a84c) !important;
padding-left: 24px !important;
}
}
/* --- Header background subtle gold ribbon under bar (non-home/contact) --- */
body:not(.home):not(.page-id-15) header.site-header .main-header-bar {
position: relative;
}
body:not(.home):not(.page-id-15) header.site-header .main-header-bar::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.5), transparent);
pointer-events: none;
}
/* --- Burger toggle: gold accent (UNIFIED for ALL pages — no overrides) --- */
html body .ast-mobile-menu-trigger-fill,
html body .ast-mobile-menu-trigger-minimal,
html body .ast-mobile-menu-trigger-outline,
html body .menu-toggle.main-header-menu-toggle,
html body .menu-toggle {
color: var(--dhia-gold, #c9a84c) !important;
background: transparent !important;
background-color: transparent !important;
border: 1px solid rgba(201, 168, 76, 0.3) !important;
border-radius: 10px !important;
transition: all 0.35s ease !important;
}
html body .menu-toggle:hover,
html body .menu-toggle:focus {
background: rgba(201, 168, 76, 0.08) !important;
border-color: var(--dhia-gold, #c9a84c) !important;
transform: scale(1.05);
}
/* --- Mobile dropdown menu (.ast-mobile-header-content) — premium list --- */
@media (max-width: 921.98px) {
.ast-mobile-header-content {
padding: 12px 0 !important;
}
.ast-mobile-header-content .menu-item>.menu-link,
.ast-mobile-header-content .menu-item>a {
position: relative;
padding: 14px 24px !important;
font-size: 0.92rem !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-bottom: 1px solid rgba(201, 168, 76, 0.08) !important;
transition: padding-left 0.3s ease, color 0.3s ease, background 0.3s ease !important;
}
.ast-mobile-header-content .menu-item>.menu-link::before,
.ast-mobile-header-content .menu-item>a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
background: linear-gradient(180deg, var(--dhia-gold-light, #e8d28a), var(--dhia-gold-dark, #8c6e3c));
transition: height 0.3s ease;
}
.ast-mobile-header-content .menu-item:hover>.menu-link,
.ast-mobile-header-content .menu-item.current-menu-item>.menu-link,
.ast-mobile-header-content .menu-item:hover>a,
.ast-mobile-header-content .menu-item.current-menu-item>a {
color: var(--dhia-gold, #c9a84c) !important;
background: rgba(201, 168, 76, 0.04) !important;
padding-left: 32px !important;
}
.ast-mobile-header-content .menu-item:hover>.menu-link::before,
.ast-mobile-header-content .menu-item.current-menu-item>.menu-link::before,
.ast-mobile-header-content .menu-item:hover>a::before,
.ast-mobile-header-content .menu-item.current-menu-item>a::before {
height: 60%;
}
/* Stagger fade-in when menu opens (Astra toggles a class — animate items) */
.ast-mobile-header-content.toggle-on .menu-item,
.ast-header-break-point .ast-mobile-header-content .menu-item {
animation: dhia-menu-slide-in 0.4s ease-out both;
}
.ast-mobile-header-content .menu-item:nth-child(1) {
animation-delay: 0.05s;
}
.ast-mobile-header-content .menu-item:nth-child(2) {
animation-delay: 0.10s;
}
.ast-mobile-header-content .menu-item:nth-child(3) {
animation-delay: 0.15s;
}
.ast-mobile-header-content .menu-item:nth-child(4) {
animation-delay: 0.20s;
}
.ast-mobile-header-content .menu-item:nth-child(5) {
animation-delay: 0.25s;
}
}
@keyframes dhia-menu-slide-in {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Desktop — copyright left, social right (NOT centered) */
@media (min-width: 1024px) {
footer.site-footer .site-below-footer-inner-wrap {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
text-align: left !important;
}
footer.site-footer .site-below-footer-wrap .ast-footer-copyright,
footer.site-footer .site-below-footer-wrap .ast-footer-copyright p {
text-align: left !important;
}
footer.site-footer .site-below-footer-wrap .site-footer-section-1 {
text-align: left !important;
}
footer.site-footer .site-below-footer-wrap .site-footer-section-2 {
text-align: right !important;
}
}
/* Desktop — force the below-footer to be a 2-column row (Astra default is "stack") */
@media (min-width: 1024px) {
footer.site-footer .site-below-footer-wrap.ast-footer-row-stack .site-below-footer-inner-wrap {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
gap: 24px !important;
}
footer.site-footer .site-below-footer-wrap .site-footer-below-section-1,
footer.site-footer .site-below-footer-wrap .site-footer-below-section-2 {
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
}
footer.site-footer .site-below-footer-wrap .site-footer-below-section-1 {
margin-right: auto !important;
text-align: left !important;
}
footer.site-footer .site-below-footer-wrap .site-footer-below-section-2 {
margin-left: auto !important;
text-align: right !important;
}
}
/* Disable Astra's native underline hover style (we have our own gold one) */
@media (min-width: 922px) {
header.site-header .main-header-menu .menu-link {
background-image: none !important;
}
header.site-header .main-header-menu .menu-link::before {
display: none !important;
content: none !important;
}
header.site-header .ast-menu-hover-style-underline .menu-link::before,
header.site-header .ast-menu-hover-style-underline .menu-link::after {
display: none !important;
content: none !important;
}
/* Re-enable our gold underline on the >.menu-item>.menu-link::after */
header.site-header .main-header-menu>.menu-item>.menu-link::after {
display: block !important;
content: '' !important;
}
}
/* --- Global horizontal overflow guard (home) --- */
html,
body.home {
overflow-x: clip;
max-width: 100vw;
}
body.home #page,
body.home #content,
body.home .site-content {
overflow-x: clip;
max-width: 100%;
}
/* ============================================
GLOBAL FONT — Montserrat partout
(override Astra/Elementor/Tourfic/Woo)
============================================ */
html,
body,
button,
input,
select,
textarea,
optgroup,
h1,
h2,
h3,
h4,
h5,
h6,
.elementor-widget-container,
.elementor-widget-heading .elementor-heading-title,
.elementor-button,
.elementor-widget-text-editor,
.elementor *,
.ast-container,
.entry-title,
.entry-content,
.main-header-menu,
.ast-builder-menu-1,
.menu-link,
.ast-mobile-popup-drawer,
.ast-builder-menu-mobile,
.woocommerce,
.woocommerce *,
.tf-archive-car-banner,
.tf_single_carrental,
[class*="tf-"],
[class*="tourfic"],
.site-footer,
.site-footer * {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Preserve icon fonts (Font Awesome, Dashicons, Tourfic icons) */
html [class^="fa-"]::before,
html [class*=" fa-"]::before,
html [class^="fa-"]::after,
html [class*=" fa-"]::after,
html .fa,
html .fas,
html .far,
html .fal,
html .fad,
html .fass,
html .fasr,
html .fa::before,
html .fas::before,
html .far::before,
html .fal::before,
html .fad::before,
html .fass::before,
html .fasr::before {
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free',
'FontAwesome', sans-serif !important;
}
html .fab,
html .fab::before,
html [class^="fa-"].fab,
html [class*=" fa-"].fab {
font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important;
}
html .dashicons,
html .dashicons-before::before,
html .dashicons::before {
font-family: 'dashicons' !important;
}
html [class^="eicon-"],
html [class*=" eicon-"],
html [class^="eicon-"]::before,
html [class*=" eicon-"]::before {
font-family: 'eicons' !important;
}
html [class^="tf-icon"],
html [class*=" tf-icon"],
html [class^="tf-icon"]::before,
html [class*=" tf-icon"]::before,
html [class^="tourfic-icon"]::before,
html [class*=" tourfic-icon"]::before {
font-family: 'tourfic-icon', 'tf-icon' !important;
}
/* MapsIcons / Mage Icons (mi mi-*, mir, mis…) — eCab / MPTBM icon font */
html .mi,
html .mir,
html .mis,
html .mil,
html .mid,
html [class^="mi-"],
html [class*=" mi-"],
html .mi::before,
html .mir::before,
html .mis::before,
html [class^="mi-"]::before,
html [class*=" mi-"]::before {
font-family: 'mageicon' !important;
}
/* Material Icons */
html .material-icons,
html .material-icons-outlined,
html .material-icons-round,
html .material-icons-sharp,
html .material-icons-two-tone {
font-family: 'Material Icons', 'Material Icons Outlined',
'Material Icons Round', 'Material Icons Sharp' !important;
}
/* ============================================
/cars — Filtres sidebar : différencier titres et contenu
============================================ */
body.post-type-archive-tf_carrental .tf_widget .tf-widget-title,
body.post-type-archive-tf_carrental .tf_widget .tf-widget-title span {
font-family: 'Montserrat', sans-serif !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #1a1a1a !important;
}
body.post-type-archive-tf_carrental .tf_widget .tf-widget-title {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin: 0 0 14px !important;
padding: 0 0 10px !important;
border-bottom: 2px solid var(--dhia-gold, #c9a84c) !important;
cursor: pointer;
}
body.post-type-archive-tf_carrental .tf_widget .tf-widget-title i {
color: var(--dhia-gold-dark, #8c6e3c) !important;
font-size: 0.9rem !important;
}
/* Filter list items — lighter, regular weight */
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists li.tf-filter-item {
font-family: 'Montserrat', sans-serif !important;
font-size: 0.88rem !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #4a4a4a !important;
line-height: 1.4 !important;
padding: 6px 0 !important;
}
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists li.tf-filter-item label {
font-weight: 400 !important;
color: inherit !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists li.tf-filter-item:hover {
color: var(--dhia-gold-dark, #8c6e3c) !important;
}
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists .btn-link,
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists .see-more,
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists .see-less {
margin-top: 8px !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: var(--dhia-gold-dark, #8c6e3c) !important;
text-decoration: none !important;
}
/* see-less hidden by default — JS toggles it */
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists .see-less {
display: none;
}
body.post-type-archive-tf_carrental .tf_widget .tf-category-lists .btn-link:hover {
color: var(--dhia-gold, #c9a84c) !important;
text-decoration: underline !important;
}
/* Spacing between filter widgets */
body.post-type-archive-tf_carrental .tf_widget {
margin-bottom: 28px !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
body.post-type-archive-tf_carrental .tf_widget:last-child {
margin-bottom: 0 !important;
}
/* /cars — search box transparent (no card bg) */
body.post-type-archive-tf_carrental .tf-archive-search-box,
body.post-type-archive-tf_carrental .tf-archive-search-box-wrapper {
background: transparent !important;
}
/* Footer — no padding on all pages */
footer.site-footer,
footer.site-footer .ast-builder-grid-row-container-inner,
footer.site-footer .site-primary-footer-wrap,
footer.site-footer .site-below-footer-wrap {
padding: 0 !important;
}
/* Footer — push Services / Support block down a bit (more breathing room from top hairline) */
footer.site-footer .site-primary-footer-wrap {
padding-top: 24px !important;
}
footer.site-footer .site-primary-footer-inner-wrap {
padding-top: 24px !important;
}
/* ============================================
FINAL — Below-footer alignment
Mirrors primary footer layout exactly:
- same 1200px container, 24px padding
- same 2:1 grid (2fr 1fr), 48px gap
- section-2 has padding-left: 48px to mirror the gold border-left + padding
of the primary footer's second column (so social icons sit right under
the word "SUPPORT")
============================================ */
@media (min-width: 768px) {
html body footer.site-footer .site-below-footer-wrap {
padding: 22px 0 28px !important;
text-align: unset !important;
}
html body footer.site-footer .site-below-footer-wrap .ast-builder-grid-row-container-inner {
max-width: 1200px !important;
width: 100% !important;
padding: 0 24px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
html body footer.site-footer .site-below-footer-wrap .site-below-footer-inner-wrap {
display: grid !important;
grid-template-columns: 2fr 1fr !important;
gap: 48px !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-1 {
grid-column: 1 / 2 !important;
justify-self: start !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
width: 100%;
}
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-2 {
grid-column: 2 / 3 !important;
justify-self: start !important;
align-self: center !important;
margin: 0 !important;
padding-left: 48px !important;
text-align: left !important;
width: 100%;
}
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-1 .ast-footer-copyright,
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-1 .ast-footer-copyright p {
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-2 .ast-footer-social-1-wrap,
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-2 .footer-social-inner-wrap {
margin: 0 !important;
justify-content: flex-start !important;
}
}
@media (max-width: 767.98px) {
html body footer.site-footer .site-below-footer-wrap .site-below-footer-inner-wrap {
grid-template-columns: 1fr !important;
gap: 16px !important;
text-align: center !important;
}
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-1,
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-2 {
grid-column: 1 / -1 !important;
justify-self: center !important;
padding-left: 0 !important;
text-align: center !important;
}
html body footer.site-footer .site-below-footer-wrap .site-footer-below-section-2 .footer-social-inner-wrap {
justify-content: center !important;
}
}
/* Mobile — Support items: FORCE icon+label glued together, centered as a block */
@media (max-width: 767.98px) {
html body footer.site-footer .widget_text .textwidget {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
text-align: center !important;
}
html body footer.site-footer .widget_text .textwidget p {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: fit-content !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: left !important;
position: static !important;
}
html body footer.site-footer .widget_text .textwidget p::before {
position: static !important;
display: inline-block !important;
flex: 0 0 auto !important;
width: 18px !important;
height: auto !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
}
}
/* /cars grid view — premium showroom dark background */
body.post-type-archive-tf_carrental .tf-car-result:not(.list-view) .tf-single-car-view .tf-car-image,
body.post-type-archive-tf_carrental .tf-car-archive-view .tf-single-car-view .tf-car-image {
background: url('https://img.sixt.com/1600/6f09b0e8-6820-4ac0-bedd-5797e9814c18.jpg') no-repeat center center / cover !important;
}
body.post-type-archive-tf_carrental .tf-car-result:not(.list-view) .tf-single-car-view .tf-car-image img,
body.post-type-archive-tf_carrental .tf-car-archive-view .tf-single-car-view .tf-car-image img {
object-fit: contain !important;
mix-blend-mode: normal !important;
}
/* Mobile — remove padding on /cars search box */
@media (max-width: 767.98px) {
body.post-type-archive-tf_carrental .tf-archive-search-box,
body.post-type-archive-tf_carrental .tf-archive-search-box-wrapper {
padding: 0 !important;
}
}
/* Typography override for Search Form Labels to match the menu (without uppercase) */
body.post-type-archive-tf_carrental .tf-archive-search-box h5,
body.post-type-archive-tf_carrental .tf-archive-search-box-wrapper h5,
body.post-type-archive-tf_carrental .tf-archive-search-box .tf-label,
body.post-type-archive-tf_carrental .tf-archive-search-box-wrapper .tf-label,
body.post-type-archive-tf_carrental .tf-archive-search-box .tf-driver-location label,
body.post-type-archive-tf_carrental .tf-archive-search-box-wrapper .tf-driver-location label {
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: none !important;
color: #555 !important;
}
/* Mobile — Tourfic location autocomplete dropdown: keep it inside its field */
@media (max-width: 767.98px) {
body.post-type-archive-tf_carrental .tf-pick-drop-location,
body.post-type-archive-tf_carrental .tf-driver-location-box {
position: relative !important;
}
body.post-type-archive-tf_carrental .autocomplete-items,
body.post-type-archive-tf_carrental .tf-driver-location .autocomplete-items,
body.post-type-archive-tf_carrental .tf-pick-drop-location .autocomplete-items {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
z-index: 9999 !important;
background: #fff !important;
border: 1px solid rgba(201, 168, 76, 0.25) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
max-height: 240px !important;
overflow-y: auto !important;
}
body.post-type-archive-tf_carrental .autocomplete-items>div {
padding: 10px 12px !important;
font-size: 0.85rem !important;
line-height: 1.3 !important;
white-space: normal !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
border-bottom: 1px solid #f0f0f0 !important;
}
body.post-type-archive-tf_carrental .autocomplete-items>div:last-child {
border-bottom: none !important;
}
}
/* Mobile — Départ + Retour : 1 par ligne (full width) */
@media (max-width: 767.98px) {
body.post-type-archive-tf_carrental .tf-pick-drop-location {
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
body.post-type-archive-tf_carrental .tf-pick-drop-location>.tf-select-date {
width: 100% !important;
min-width: 0 !important;
flex: 1 1 100% !important;
}
}
/* Mobile — STRONGER override: Départ/Retour stack 100% */
@media (max-width: 767.98px) {
html body.post-type-archive-tf_carrental .tf-archive-search-box-wrapper .tf-pick-drop-location,
html body.post-type-archive-tf_carrental .tf-pick-drop-location.tf-flex.tf-flex-gap-8.tf-flex-space-bttn {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body.post-type-archive-tf_carrental .tf-archive-search-box-wrapper .tf-pick-drop-location>.tf-select-date,
html body.post-type-archive-tf_carrental .tf-pick-drop-location.tf-flex>.tf-select-date {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 8px !important;
box-sizing: border-box !important;
}
html body.post-type-archive-tf_carrental .tf-pick-drop-location>.tf-select-date:last-child {
margin-bottom: 0 !important;
}
}
/* Hide "Retour" input when "Retour au même endroit" is checked
(Tourfic adds .active class on .tf-pick-drop-location when same_location is on) */
body.post-type-archive-tf_carrental .tf-pick-drop-location.active>.tf-select-date:nth-child(2) {
display: none !important;
}
/* Mobile — kill the gold divider on Départ box + add spacing between inputs */
@media (max-width: 767.98px) {
html body.post-type-archive-tf_carrental .tf-pick-drop-location>.tf-select-date {
border: 1px solid var(--tf-brand-dark, #1a1a2e) !important;
border-radius: 8px !important;
margin: 0 0 12px !important;
padding: 12px 14px !important;
background: #fff !important;
}
html body.post-type-archive-tf_carrental .tf-pick-drop-location>.tf-select-date::after,
html body.post-type-archive-tf_carrental .tf-pick-drop-location>.tf-select-date::before {
display: none !important;
content: none !important;
}
html body.post-type-archive-tf_carrental .tf-pick-drop-location>.tf-select-date:last-child {
margin-bottom: 0 !important;
}
}
/* Remove native browser "x" clear button globally */
input[type="text"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-cancel-button,
input[type="text"]::-webkit-clear-button,
input::-ms-clear,
input::-ms-reveal {
-webkit-appearance: none !important;
appearance: none !important;
display: none !important;
}
/* Tourfic "Effacer" (×) span on Départ/Retour inputs — Premium Design */
.tf-select-date {
position: relative !important;
}
.info-select {
position: static !important;
}
.info-select .autocomplete-wrapper {
position: static !important;
}
span[title="Effacer"],
span[title="Clear"] {
z-index: 10 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
background: #f4f0ea !important;
color: #a8a8a8 !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: bold !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
position: absolute !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
right: 14px !important;
margin: 0 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
span[title="Effacer"]:hover,
span[title="Clear"]:hover {
background: #1f1b15 !important;
color: #ffffff !important;
transform: translateY(-50%) scale(1.1) !important;
}
/* Hide it entirely when the Astra mobile menu is open */
body.ast-mobile-menu-buttons-fill.menu-show span[title="Effacer"],
body.ast-mobile-menu-buttons-fill.menu-show span[title="Clear"],
body.ast-main-header-nav-open span[title="Effacer"],
body.ast-main-header-nav-open span[title="Clear"],
.ast-mobile-popup-drawer.active~* span[title="Effacer"],
.ast-mobile-popup-drawer.active~* span[title="Clear"],
html:has(.ast-mobile-popup-drawer.active) span[title="Effacer"],
html:has(.ast-mobile-popup-drawer.active) span[title="Clear"] {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
z-index: -1 !important;
}
/* ============================================
PREMIUM MOBILE MENU — typography only (no dark bg)
============================================ */
@media (max-width: 921.98px) {
/* Burger toggle — premium gold outline */
.menu-toggle.main-header-menu-toggle,
.menu-toggle.ast-mobile-menu-trigger-outline {
border: 1.5px solid var(--dhia-gold, #c9a84c) !important;
border-radius: 10px !important;
color: var(--dhia-gold, #c9a84c) !important;
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.menu-toggle.main-header-menu-toggle:hover,
.menu-toggle.main-header-menu-toggle:focus {
background: rgba(201, 168, 76, 0.08) !important;
box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.10) !important;
}
/* Menu items — refined typography, gold hover */
.ast-mobile-header-content .menu-item>.menu-link,
.ast-mobile-header-content .menu-item>a,
.ast-mobile-popup-drawer .menu-item>.menu-link,
.ast-mobile-popup-drawer .menu-item>a {
position: relative;
font-family: 'Montserrat', sans-serif !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: #1a1a1a !important;
transition: color 0.25s ease, padding-left 0.3s ease !important;
}
/* Hover / current — gold */
.ast-mobile-header-content .menu-item:hover>.menu-link,
.ast-mobile-header-content .menu-item.current-menu-item>.menu-link,
.ast-mobile-header-content .menu-item:hover>a,
.ast-mobile-header-content .menu-item.current-menu-item>a,
.ast-mobile-popup-drawer .menu-item:hover>.menu-link,
.ast-mobile-popup-drawer .menu-item.current-menu-item>.menu-link,
.ast-mobile-popup-drawer .menu-item:hover>a,
.ast-mobile-popup-drawer .menu-item.current-menu-item>a {
color: var(--dhia-gold-dark, #8c6e3c) !important;
}
/* Sub-menus — softer, indented */
.ast-mobile-header-content .sub-menu .menu-item>.menu-link,
.ast-mobile-header-content .sub-menu .menu-item>a,
.ast-mobile-popup-drawer .sub-menu .menu-item>.menu-link,
.ast-mobile-popup-drawer .sub-menu .menu-item>a {
font-size: 0.76rem !important;
letter-spacing: 0.10em !important;
color: #555 !important;
}
}
@keyframes dhia-menu-fade-in {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ============================================
GLOBAL — Dark header on ALL pages (match home)
============================================ */
header.site-header,
header.site-header .ast-main-header-wrap,
header.site-header .ast-primary-header-bar,
header.site-header .main-header-bar,
header.site-header .main-header-bar-wrap,
.ast-above-header,
.ast-below-header {
background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%) !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* Readable text on dark header */
header.site-header .menu-item>a,
header.site-header .ast-builder-menu-1 .menu-item>a,
header.site-header .ast-header-account-wrap a,
header.site-header .ast-builder-text-element {
color: #f5efe0 !important;
}
header.site-header .menu-item>a:hover,
header.site-header .menu-item.current-menu-item>a {
color: var(--dhia-gold, #c9a84c) !important;
}
/* Burger / close icon — gold on dark */
header.site-header .menu-toggle.main-header-menu-toggle,
header.site-header .menu-toggle.ast-mobile-menu-trigger-outline {
color: var(--dhia-gold, #c9a84c) !important;
border-color: var(--dhia-gold, #c9a84c) !important;
background: rgba(255, 255, 255, 0.04) !important;
}
/* Kill any white separator under header */
header.site-header,
header.site-header *,
.ast-main-header-wrap,
.main-header-bar,
.ast-primary-header-bar,
.site-header .main-header-bar-wrap,
#masthead {
border-top: 0 !important;
border-bottom: 0 !important;
}
header.site-header::after,
.main-header-bar::after,
.ast-primary-header-bar::after {
display: none !important;
content: none !important;
}
/* Header — align right edge with page content (1200px container + 24px padding) */
header.site-header .ast-builder-grid-row-container-inner,
header.site-header .main-header-bar-wrap>.main-header-bar,
header.site-header .ast-flex.main-header-container {
max-width: 1400px !important;
margin: 0 auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
@media (max-width: 921.98px) {
header.site-header .ast-builder-grid-row-container-inner,
header.site-header .main-header-bar,
header.site-header .ast-flex.main-header-container {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
/* Mobile — strip horizontal padding on archive containers */
@media (max-width: 921.98px) {
.ast-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.tf-archive-template__one {
padding: 20px 0 !important;
}
}
/* Burger toggle — align right edge with .tf-container (page content padding) */
html body .menu-toggle.main-header-menu-toggle,
html body .menu-toggle {
margin-right: -4px !important;
}
/* Header bar — left/right padding 16px (mobile) to align with page content */
@media (max-width: 921.98px) {
html body .ast-primary-header-bar,
html body .main-header-bar.site-primary-header-wrap {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* Mobile header — show logo (left) + burger (right), aligned + spaced */
@media (max-width: 921.98px) {
/* Make sure the logo is visible on mobile */
html body header.site-header .site-branding,
html body header.site-header .ast-site-identity {
display: flex !important;
visibility: visible !important;
align-items: center !important;
margin: 0 !important;
}
/* Constrain the logo image height */
html body header.site-header .site-branding img,
html body header.site-header .ast-site-identity img {
max-height: 44px !important;
width: auto !important;
display: block !important;
}
/* Header row: space-between so logo goes left, burger goes right */
html body header.site-header .site-header-section.site-header-section-left {
margin-right: auto !important;
flex: 0 0 auto !important;
justify-content: flex-start !important;
}
html body header.site-header .site-header-section.ast-grid-right-section {
margin-left: auto !important;
flex: 0 0 auto !important;
justify-content: flex-end !important;
}
html body header.site-header .ast-flex.main-header-container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
}
}
/* Mobile header — inject the logo on the left section (Astra builder doesn't place it on mobile)
No media query: #ast-mobile-header is already shown only on the mobile breakpoint by Astra. */
html body #ast-mobile-header .ast-builder-grid-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
}
html body #ast-mobile-header .site-header-primary-section-left,
html body #ast-mobile-header .site-header-section-left {
display: flex !important;
visibility: visible !important;
align-items: center !important;
flex: 1 1 auto !important;
min-width: 120px !important;
min-height: 44px !important;
position: relative !important;
}
/* Logo as background on the section itself — paints immediately, no flash */
html body #ast-mobile-header .site-header-primary-section-left,
html body #ast-mobile-header .site-header-section-left {
background-image: url('/wp-content/uploads/2026/04/cropped-logo_dhia-rentacar.png') !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: auto 46px !important;
}
/* Injected anchor sits on top of the section and makes ONLY the logo area clickable */
html body #ast-mobile-header a.dhia-mobile-logo {
position: absolute !important;
top: 50% !important;
left: 0 !important;
transform: translateY(-50%) !important;
display: block !important;
width: auto !important;
aspect-ratio: 201 / 206 !important;
height: 46px !important;
text-indent: -9999px !important;
overflow: hidden !important;
cursor: pointer !important;
background: transparent !important;
z-index: 2 !important;
}
/* Right section keeps the burger flush right */
html body #ast-mobile-header .site-header-primary-section-right,
html body #ast-mobile-header .ast-grid-right-section {
flex: 0 0 auto !important;
margin-left: auto !important;
justify-content: flex-end !important;
}
/* Forced header bar constraints */
html body header.site-header .main-header-bar-wrap>.main-header-bar,
html body header.site-header .main-header-bar-wrap>.ast-primary-header-bar {
max-width: 1400px !important;
margin: 0 auto !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
/* ============================================
12. PAGE BACKGROUND — WHITE
============================================ */
body,
.site-content,
.ast-separate-container .site-content,
.ast-plain-container .site-content,
body.post-type-archive-tf_carrental {
background-color: #ffffff !important;
}
/* Hide "Age of driver 18-40" checkbox in Tourfic car search form (keep "Return in same location") */
.tf-driver-location ul li:nth-child(2),
.tf-driver-location ul li:has(input[name="driver_age"]) {
display: none !important;
}
/* ============================================
DHIA DESTINATIONS — Cities grid (GetYourGuide-style)
Shortcode: [dhia_destinations]
============================================ */
.dhia-destinations {
width: 100%;
margin: 60px auto;
padding: 0 16px;
max-width: 1200px;
box-sizing: border-box;
}
.dhia-destinations__title {
font-family: var(--font-heading, "Playfair Display", serif);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 700;
color: var(--dhia-gold, #c9a84c);
background: linear-gradient(135deg, var(--dhia-gold-light, #e0c97a), var(--dhia-gold, #c9a84c));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 28px;
letter-spacing: 0.02em;
}
.dhia-destinations__grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.dhia-destinations[data-columns="2"] .dhia-destinations__grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.dhia-destinations[data-columns="3"] .dhia-destinations__grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.dhia-destinations[data-columns="4"] .dhia-destinations__grid {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.dhia-destinations[data-columns="5"] .dhia-destinations__grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.dhia-destinations__card {
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none !important;
color: inherit;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dhia-destinations__card:hover {
transform: translateY(-4px);
}
.dhia-destinations__img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 14px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.35s ease, filter 0.35s ease;
filter: brightness(0.96) saturate(1.05);
}
.dhia-destinations__card:hover .dhia-destinations__img {
box-shadow: 0 10px 30px rgba(201, 168, 76, 0.25);
filter: brightness(1.02) saturate(1.1);
}
.dhia-destinations__name {
font-family: var(--font-body, "Inter", sans-serif);
font-size: 1.05rem;
font-weight: 700;
color: var(--dhia-text-primary, #1a1a2e);
letter-spacing: 0.01em;
}
@media (max-width: 600px) {
.dhia-destinations__grid {
gap: 14px;
grid-template-columns: repeat(2, 1fr);
}
.dhia-destinations__name {
font-size: 0.95rem;
}
}
/* ============================================
/excursions — Cleanup sidebar layout
- sticky search form
- destinations injected into right sidebar (replaces empty filters)
============================================ */
.post-type-archive-tf_tours .tf-sidebar.tf-archive-right {
align-self: flex-start;
}
/* Bloc destinations dans la colonne étroite : design premium overlay */
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations {
margin: 0 !important;
width: 100% !important;
padding: 0 !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__title {
font-family: var(--font-heading, 'Playfair Display', serif) !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #1a232c !important;
margin-bottom: 24px !important;
border-bottom: 2px solid rgba(201, 168, 76, 0.15) !important;
padding-bottom: 14px !important;
background: none !important;
-webkit-text-fill-color: initial !important;
text-align: left !important;
letter-spacing: normal !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__card {
position: relative !important;
border-radius: 12px !important;
overflow: hidden !important;
display: block !important;
aspect-ratio: 1 / 1 !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
transform: none !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__card:hover {
transform: translateY(-3px) !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__img {
position: absolute !important;
inset: 0 !important;
height: 100% !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: none !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__card::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 50%) !important;
z-index: 1 !important;
transition: background 0.3s ease !important;
pointer-events: none !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__card:hover::after {
background: linear-gradient(to top, rgba(201, 168, 76, 0.85) 0%, rgba(0, 0, 0, 0) 60%) !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__card:hover .dhia-destinations__img {
transform: scale(1.1) !important;
}
body.post-type-archive-tf_tours #tf__booking_sidebar .dhia-destinations__name {
position: absolute !important;
bottom: 12px !important;
left: 0 !important;
right: 0 !important;
z-index: 2 !important;
color: #ffffff !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-align: center !important;
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
pointer-events: none !important;
}
@media (max-width: 991px) {
.post-type-archive-tf_tours .tf-sidebar.tf-archive-right {
position: static;
}
}
/* ============================================
13. EXCURSIONS — LUXURY & PREMIUM (NON-BLACK)
============================================ */
/* Page Background */
body.post-type-archive-tf_tours {
background-color: #ffffff !important;
}
/* SEARCH BOX MODERN FIELDS */
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper {
background: #ffffff !important;
border: 1px solid rgba(201, 168, 76, 0.15) !important;
border-radius: 20px !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03) !important;
padding: 28px !important;
margin-bottom: 45px !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-search-form {
display: flex !important;
gap: 16px !important;
flex-wrap: wrap !important;
align-items: flex-end !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-search-form>* {
flex: 1 1 200px !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper h3 {
font-family: var(--font-heading, 'Playfair Display', serif) !important;
color: #1a232c !important;
/* Deep rich blue-grey instead of black */
font-size: 1.6rem !important;
margin-bottom: 24px !important;
width: 100% !important;
flex: 1 1 100% !important;
}
/* Modern Inputs */
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="text"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="date"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper select,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-field-text {
background: #f7f6f2 !important;
border: 1px solid rgba(201, 168, 76, 0.1) !important;
border-radius: 12px !important;
padding: 18px 22px !important;
font-size: 0.95rem !important;
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
color: #1a232c !important;
transition: all 0.3s ease !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="text"]:focus,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper input[type="date"]:focus,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper select:focus,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-field-text:focus {
background: #ffffff !important;
border-color: var(--dhia-gold, #c9a84c) !important;
box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.12) !important;
outline: none !important;
}
/* Submit Button */
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper button[type="submit"],
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-search-btn {
background: linear-gradient(135deg, var(--dhia-gold-light, #e0c97a), var(--dhia-gold, #c9a84c)) !important;
color: #ffffff !important;
border: none !important;
border-radius: 12px !important;
padding: 18px 32px !important;
font-size: 1rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
box-shadow: 0 8px 24px rgba(201, 168, 76, 0.25) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
height: 100% !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper button[type="submit"]:hover,
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-search-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px rgba(201, 168, 76, 0.35) !important;
background: linear-gradient(135deg, var(--dhia-gold, #c9a84c), var(--dhia-gold-dark, #8c6e3c)) !important;
}
/* EXCURSION CARDS LUXURY */
body.post-type-archive-tf_tours .tf-item-card {
background: #ffffff !important;
border: 1px solid rgba(201, 168, 76, 0.15) !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04) !important;
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
display: flex !important;
flex-direction: column !important;
margin-bottom: 30px !important;
}
body.post-type-archive-tf_tours .tf-layout-list .tf-item-card {
flex-direction: row !important;
}
body.post-type-archive-tf_tours .tf-item-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(201, 168, 76, 0.4) !important;
}
body.post-type-archive-tf_tours .tf-item-featured {
position: relative !important;
overflow: hidden !important;
flex: 0 0 40% !important;
/* For list view */
}
body.post-type-archive-tf_tours .tf-layout-grid .tf-item-featured {
flex: none !important;
width: 100% !important;
aspect-ratio: 4/3 !important;
}
body.post-type-archive-tf_tours .tf-item-featured a {
display: block !important;
height: 100% !important;
width: 100% !important;
}
body.post-type-archive-tf_tours .tf-item-featured img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
filter: brightness(0.96) saturate(1.05) !important;
}
body.post-type-archive-tf_tours .tf-item-card:hover .tf-item-featured img {
transform: scale(1.08) !important;
filter: brightness(1.02) saturate(1.1) !important;
}
/* Card Content Area */
body.post-type-archive-tf_tours .tf-item-details {
padding: 30px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
}
/* Tour Title */
body.post-type-archive-tf_tours .tf-title h2 {
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-bottom: 14px !important;
line-height: 1.3 !important;
}
body.post-type-archive-tf_tours .tf-title h2 a {
color: #1a232c !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
body.post-type-archive-tf_tours .tf-item-card:hover .tf-title h2,
body.post-type-archive-tf_tours .tf-item-card:hover .tf-title h2 a {
color: var(--dhia-gold-dark, #8c6e3c) !important;
}
/* Meta Data / Location / Duration */
body.post-type-archive-tf_tours .tf-title-meta,
body.post-type-archive-tf_tours .tf-details {
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
font-size: 0.9rem !important;
color: #646a73 !important;
margin-bottom: 20px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
align-items: center !important;
}
body.post-type-archive-tf_tours .tf-title-meta i {
color: var(--dhia-gold, #c9a84c) !important;
margin-right: 6px !important;
font-size: 1.1em !important;
}
/* Pricing Area */
body.post-type-archive-tf_tours .tf-post-footer {
margin-top: auto !important;
padding-top: 20px !important;
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
body.post-type-archive-tf_tours .tf-pricing {
font-size: 0.95rem !important;
font-weight: 500 !important;
color: #646a73 !important;
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
}
body.post-type-archive-tf_tours .tf-pricing .amount,
body.post-type-archive-tf_tours .tf-pricing .woocommerce-Price-currencySymbol {
font-size: 1.35rem !important;
font-weight: 700 !important;
color: var(--dhia-gold-dark, #8c6e3c) !important;
font-family: var(--font-heading, 'Playfair Display', serif) !important;
}
body.post-type-archive-tf_tours .tf-pricing .amount {
margin-left: 6px !important;
}
/* Book Now Button on Card */
body.post-type-archive-tf_tours .tf-booking-bttns a.tf_btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1.5px solid var(--dhia-gold, #c9a84c) !important;
color: var(--dhia-gold-dark, #8c6e3c) !important;
padding: 12px 24px !important;
border-radius: 30px !important;
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
body.post-type-archive-tf_tours .tf-booking-bttns a.tf_btn:hover {
background: var(--dhia-gold, #c9a84c) !important;
color: #ffffff !important;
box-shadow: 0 6px 16px rgba(201, 168, 76, 0.3) !important;
transform: scale(1.02) !important;
}
/* LUXURY FILTERS (Sidebar) */
body.post-type-archive-tf_tours .tf-sidebar {
background: transparent !important;
}
body.post-type-archive-tf_tours .tf-sidebar>* {
margin-bottom: 30px !important;
}
body.post-type-archive-tf_tours .tf-sidebar .tf-archive-booking-form__style-1,
body.post-type-archive-tf_tours .tf-archive-template__one .tf-archive-right #tf__booking_sidebar {
background: #ffffff !important;
border-radius: 20px !important;
padding: 30px !important;
box-shadow: 0 16px 45px rgba(0, 0, 0, 0.03) !important;
border: 1px solid rgba(201, 168, 76, 0.1) !important;
}
body.post-type-archive-tf_tours .tf-widget-title {
font-family: var(--font-heading, 'Playfair Display', serif) !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #1a232c !important;
margin-bottom: 24px !important;
border-bottom: 2px solid rgba(201, 168, 76, 0.15) !important;
padding-bottom: 14px !important;
}
/* Custom Checkboxes */
body.post-type-archive-tf_tours .tf-filter-item {
margin-bottom: 14px !important;
}
body.post-type-archive-tf_tours .tf-filter-item label {
font-family: var(--font-body, 'Montserrat', sans-serif) !important;
font-size: 0.95rem !important;
color: #4a4e58 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
transition: color 0.2s ease !important;
}
body.post-type-archive-tf_tours .tf-filter-item:hover label {
color: var(--dhia-gold-dark, #8c6e3c) !important;
}
body.post-type-archive-tf_tours .tf-filter-item input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 22px !important;
height: 22px !important;
border: 2px solid #e0dfdc !important;
border-radius: 6px !important;
margin-right: 14px !important;
cursor: pointer !important;
position: relative !important;
background: #faf9f7 !important;
transition: all 0.2s ease !important;
}
body.post-type-archive-tf_tours .tf-filter-item input[type="checkbox"]:checked {
background: var(--dhia-gold, #c9a84c) !important;
border-color: var(--dhia-gold, #c9a84c) !important;
}
body.post-type-archive-tf_tours .tf-filter-item input[type="checkbox"]:checked::after {
content: '' !important;
position: absolute !important;
left: 6px !important;
top: 2px !important;
width: 5px !important;
height: 10px !important;
border: solid white !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
}
/* Tourfic specific wrapper adjustments */
body.post-type-archive-tf_tours .tf-container {
max-width: 1280px !important;
margin: 0 auto !important;
}
body.post-type-archive-tf_tours .tf-archive-right {
margin-top: 0 !important;
}
/* MOBILE FIRST / RESPONSIVE */
@media (max-width: 991px) {
body.post-type-archive-tf_tours .tf-layout-list .tf-item-card {
flex-direction: column !important;
}
body.post-type-archive-tf_tours .tf-item-featured {
flex: none !important;
width: 100% !important;
aspect-ratio: 4/3 !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-search-form {
flex-direction: column !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper .tf-search-form>* {
width: 100% !important;
flex: 1 1 100% !important;
}
body.post-type-archive-tf_tours .tf-archive-search-box-wrapper {
padding: 20px !important;
}
body.post-type-archive-tf_tours .tf-item-details {
padding: 20px !important;
}
body.post-type-archive-tf_tours .tf-sidebar {
/* margin-top: 40px !important; */
}
}
/* ============================================
/excursions — Search form: highlight destination input
============================================ */
.post-type-archive-tf_tours .tf-destination-box {
border: 1px solid var(--tf-brand-dark, #1a1a2e);
border-radius: 8px;
padding: 8px 14px;
background: #fff;
transition: border-color .25s ease, box-shadow .25s ease;
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
box-sizing: border-box;
}
.post-type-archive-tf_tours .tf-destination-box>i.fa-location-dot,
.post-type-archive-tf_tours .tf-destination-box>i.fa-solid {
position: static !important;
color: var(--dhia-gold, #c5a572);
font-size: 1rem;
flex-shrink: 0;
line-height: 1;
}
.post-type-archive-tf_tours .tf-destination-box:hover,
.post-type-archive-tf_tours .tf-destination-box:focus-within {
border-color: var(--dhia-gold, #c5a572);
box-shadow: 0 0 0 3px rgba(197, 165, 114, 0.15);
}
.post-type-archive-tf_tours .tf-destination-box .tf-field,
.post-type-archive-tf_tours .tf-destination-box #tf-destination,
.post-type-archive-tf_tours .tf-destination-box .tf-field:focus,
.post-type-archive-tf_tours .tf-destination-box #tf-destination:focus {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
width: 100%;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
height: auto !important;
line-height: 1.4 !important;
font-size: 0.95rem;
}
.post-type-archive-tf_tours .tf-destination-box .tf-field::placeholder {
color: #6b7280;
opacity: 1;
}
/* Date field (calendar) — même style que la box destination */
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date) {
border: 1px solid var(--tf-brand-dark, #1a1a2e);
border-radius: 8px;
padding: 0 10px !important;
background: #fff;
transition: border-color .25s ease, box-shadow .25s ease;
display: flex;
align-items: center;
gap: 8px;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
box-sizing: border-box;
overflow: hidden;
}
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date):hover,
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date):focus-within {
border-color: var(--dhia-gold, #c5a572);
box-shadow: 0 0 0 3px rgba(197, 165, 114, 0.15);
}
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date)>i.fa-solid {
position: static !important;
color: var(--dhia-gold, #c5a572);
font-size: 1rem;
flex-shrink: 0;
line-height: 1;
}
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date) #check-in-out-date,
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date) #check-in-out-date:focus,
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date) input.flatpickr-input,
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date) input.flatpickr-input:focus,
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date) input.form-control.input,
.post-type-archive-tf_tours .tf_archive_search_result .tf-field-group:has(#check-in-out-date) input.form-control.input:focus {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
width: 100%;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
height: auto !important;
line-height: 1.4 !important;
font-size: 0.85rem !important;
text-align: left !important;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
/* /excursions — Destination autocomplete list: same style as /cars Départ list */
.post-type-archive-tf_tours .tf-destination-box {
position: relative !important;
}
.post-type-archive-tf_tours .autocomplete-items,
.post-type-archive-tf_tours .tf-destination-box .autocomplete-items,
#tf-destinationautocomplete-list,
#tf-destination-autocomplete-list {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
z-index: 9999 !important;
background: #fff !important;
border: 1px solid rgba(201, 168, 76, 0.25) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
max-height: 240px !important;
overflow-y: auto !important;
margin-top: 4px !important;
}
.post-type-archive-tf_tours .autocomplete-items>div,
#tf-destinationautocomplete-list>div,
#tf-destination-autocomplete-list>div {
padding: 10px 12px !important;
font-size: 0.85rem !important;
line-height: 1.3 !important;
white-space: normal !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
border-bottom: 1px solid #f0f0f0 !important;
cursor: pointer !important;
}
.post-type-archive-tf_tours .autocomplete-items>div:last-child,
#tf-destinationautocomplete-list>div:last-child,
#tf-destination-autocomplete-list>div:last-child {
border-bottom: none !important;
}
.post-type-archive-tf_tours .autocomplete-items>div:hover,
.post-type-archive-tf_tours .autocomplete-items>div.autocomplete-active,
#tf-destinationautocomplete-list>div:hover,
#tf-destinationautocomplete-list>div.autocomplete-active,
#tf-destination-autocomplete-list>div:hover,
#tf-destination-autocomplete-list>div.autocomplete-active {
background: #f4f0ea !important;
}
/* /excursions — hide rating & review box on tour cards */
body.post-type-archive-tf_tours .tf-single-rating,
body.post-type-archive-tf_tours .tf-single-review-box,
.tf-single-template__one .tf-hero-gallery .tf-gallery-featured .tf-single-review-box {
display: none !important;
}
body.post-type-archive-tf_tours .tf-reviews {
display: none !important;
}
/* ---------------------------------------------------------------------------
Checkout (Tourfic excursion) — alignement TND/EUR + meta sur une seule ligne
--------------------------------------------------------------------------- */
/* TND equivalent aligné sur la ligne de base du prix EUR (subtotal/total) */
.woocommerce-checkout .shop_table .product-total .dhia-tnd-eq,
.woocommerce-checkout .shop_table .product-subtotal .dhia-tnd-eq,
.woocommerce-checkout-review-order-table .dhia-tnd-eq,
.woocommerce-checkout .shop_table .cart-subtotal .dhia-tnd-eq,
.woocommerce-checkout .shop_table .order-total .dhia-tnd-eq,
.woocommerce-checkout .shop_table tfoot .dhia-tnd-eq {
display: inline-block !important;
vertical-align: baseline !important;
line-height: 1 !important;
font-size: 0.78em !important;
margin-left: 6px;
position: relative;
top: 0.05em;
/* léger ajustement optique vers le bas */
}
/* Permettre au prix de passer à la ligne (ex: TND en dessous) pour éviter que ça dépasse la carte */
.woocommerce-checkout .shop_table td.product-total,
.woocommerce-checkout .shop_table td.product-subtotal,
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout .shop_table tfoot .order-total td,
.woocommerce-checkout .shop_table tfoot .cart-subtotal td {
white-space: normal !important;
word-break: break-word !important;
}
/* Empêcher le prix TND de se couper en deux au milieu du mot */
.woocommerce-checkout .shop_table .dhia-tnd-eq {
white-space: nowrap !important;
}
/* Forcer le prix TND à passer à la ligne sur les petits écrans SEULEMENT pour la colonne des totaux */
@media (max-width: 580px) {
.woocommerce-checkout .shop_table td.product-total .dhia-tnd-eq,
.woocommerce-checkout .shop_table td.product-subtotal .dhia-tnd-eq,
.woocommerce-checkout .shop_table tfoot .order-total .dhia-tnd-eq,
.woocommerce-checkout .shop_table tfoot .cart-subtotal .dhia-tnd-eq {
display: block !important;
margin-left: 0 !important;
margin-top: 4px !important;
line-height: 1.2 !important;
}
}
.woocommerce-checkout .shop_table td.product-total .woocommerce-Price-amount,
.woocommerce-checkout .shop_table td.product-subtotal .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table td.product-total .woocommerce-Price-amount {
vertical-align: baseline !important;
}
/* Méta des items Tourfic (Adultes, Date de la tournée…) :
chaque paire dt+dd tient sur une seule ligne, sans retour à la ligne. */
.woocommerce-checkout .shop_table .product-name dl.variation,
.woocommerce-checkout-review-order-table .product-name dl.variation {
margin: 6px 0 0;
}
.woocommerce-checkout .shop_table .product-name dl.variation dt,
.woocommerce-checkout .shop_table .product-name dl.variation dd,
.woocommerce-checkout-review-order-table .product-name dl.variation dt,
.woocommerce-checkout-review-order-table .product-name dl.variation dd {
display: inline !important;
float: none !important;
clear: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
.woocommerce-checkout .shop_table .product-name dl.variation dt,
.woocommerce-checkout-review-order-table .product-name dl.variation dt {
font-weight: 600;
margin-right: 4px !important;
}
.woocommerce-checkout .shop_table .product-name dl.variation dd p,
.woocommerce-checkout-review-order-table .product-name dl.variation dd p {
display: inline !important;
margin: 0 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
/* Force un retour à la ligne après chaque dd (donc avant le dt suivant) */
.woocommerce-checkout .shop_table .product-name dl.variation dd::after,
.woocommerce-checkout-review-order-table .product-name dl.variation dd::after {
content: '\A';
white-space: pre;
}
/* Tourfic — centrer verticalement les éléments de .tf-product-total */
.tf-product-total {
align-items: center !important;
}
/* =========================================================
Video Carousel — homepage flotte showcase
========================================================= */
.dhia-video-carousel {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 60px 16px;
box-sizing: border-box;
font-family: 'Inter', system-ui, sans-serif;
background: none !important;
}
/* Kill background on Elementor containers wrapping the video carousel */
.elementor-element:has(.dhia-video-carousel),
.elementor-widget-wrap:has(.dhia-video-carousel),
.elementor-widget:has(.dhia-video-carousel),
.e-con:has(.dhia-video-carousel) {
background: none !important;
background-color: transparent !important;
background-image: none !important;
}
.dhia-vc__head {
text-align: center;
margin-bottom: 36px;
}
.dhia-vc__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
font-weight: 700;
margin: 0 0 10px;
color: #1a1a1a;
letter-spacing: -0.01em;
}
.dhia-vc__subtitle {
font-size: 1rem;
color: #666;
margin: 0;
font-weight: 400;
}
.dhia-vc__viewport {
position: relative;
padding: 0 64px;
background: transparent;
}
@media (max-width: 1100px) {
.dhia-vc__viewport {
padding: 0 56px;
}
}
@media (max-width: 600px) {
.dhia-vc__viewport {
padding: 0;
}
}
.dhia-vc__track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 0;
scrollbar-width: none;
background: transparent;
}
.dhia-vc__track::-webkit-scrollbar {
display: none;
}
.dhia-vc__slide {
flex: 0 0 calc((100% - 40px) / 3);
/* 3 slides on desktop */
scroll-snap-align: start;
min-width: 0;
}
@media (min-width: 1280px) {
.dhia-video-carousel {
max-width: 1440px;
}
}
@media (max-width: 900px) {
.dhia-vc__slide {
flex-basis: 45%;
}
}
@media (max-width: 600px) {
.dhia-vc__slide {
flex-basis: 70%;
}
.dhia-vc__card {
aspect-ratio: 9 / 16;
}
.dhia-video-carousel {
padding: 40px 12px;
}
}
.dhia-vc__card {
position: relative;
aspect-ratio: 9 / 14;
border-radius: 14px;
overflow: hidden;
background: transparent;
box-shadow: none;
cursor: pointer;
}
.dhia-vc__card:hover .dhia-vc__video {
transform: scale(1.05);
}
.dhia-vc__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: transparent;
transition: transform 0.4s ease;
}
/* Overlay layer that perfectly centers the play button regardless of theme styles */
.dhia-vc__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
/* let card's click handler bubble */
z-index: 3;
}
/* Hide native controls until the user starts playback */
.dhia-vc__card:not(.is-playing) .dhia-vc__video::-webkit-media-controls {
display: none !important;
}
.dhia-vc__card:not(.is-playing) .dhia-vc__video {
pointer-events: none;
}
.dhia-vc__play {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
flex: 0 0 64px;
padding: 0;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.95);
color: #c9a961;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
appearance: none;
-webkit-appearance: none;
line-height: 0;
box-sizing: border-box;
pointer-events: auto;
}
.dhia-vc__play svg {
width: 28px;
height: 28px;
display: block;
flex-shrink: 0;
margin-left: 3px;
}
.dhia-vc__play,
.dhia-vc__play:hover,
.dhia-vc__play:focus,
.dhia-vc__play:focus-visible,
.dhia-vc__play:active {
color: #c9a961;
background: rgba(255, 255, 255, 0.95);
border: 0;
outline: none;
}
.dhia-vc__play svg path {
fill: #c9a961;
}
.dhia-vc__play:hover {
transform: scale(1.1);
background: #fff;
box-shadow: 0 14px 36px rgba(201, 169, 97, 0.5);
}
.dhia-vc__play:focus-visible {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(201, 169, 97, 0.5);
}
.dhia-vc__card.is-playing .dhia-vc__play {
opacity: 0;
pointer-events: none;
}
/* Subtle gradient overlay for unplayed state */
.dhia-vc__card:not(.is-playing)::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%);
pointer-events: none;
}
/* Navigation arrows — round, clean, gold-on-hover */
.dhia-vc__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
flex: 0 0 48px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
color: #1a1a1a;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
line-height: 0;
transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.dhia-vc__nav svg {
width: 22px;
height: 22px;
display: block;
flex-shrink: 0;
}
.dhia-vc__nav:hover {
background: #c9a961;
color: #fff;
border-color: #c9a961;
transform: translateY(-50%) scale(1.08);
box-shadow: 0 10px 26px rgba(201, 169, 97, 0.35);
}
.dhia-vc__nav:focus-visible {
outline: 2px solid #c9a961;
outline-offset: 3px;
}
.dhia-vc__nav:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: translateY(-50%);
box-shadow: none;
}
.dhia-vc__nav:disabled:hover {
background: #fff;
color: #1a1a1a;
border-color: rgba(0, 0, 0, 0.08);
}
.dhia-vc__nav--prev {
left: 0;
}
.dhia-vc__nav--next {
right: 0;
}
@media (max-width: 600px) {
.dhia-vc__nav {
display: none;
}
}
/* =========================================================
Video Lightbox — fullscreen player on play click
========================================================= */
.dhia-vc-lightbox {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
padding: 24px;
box-sizing: border-box;
}
.dhia-vc-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.dhia-vc-lightbox__stage {
position: relative;
width: auto;
max-width: min(45vh, 500px);
max-height: 90vh;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
background: #000;
align-self: center;
transition: aspect-ratio 0.4s ease, width 0.4s ease, height 0.4s ease;
}
.dhia-vc-lightbox__track {
position: relative;
width: 100%;
height: 100%;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.dhia-vc-lightbox__track::-webkit-scrollbar {
display: none;
}
.dhia-vc-lightbox__panel {
position: relative;
flex: 0 0 100%;
width: 100%;
height: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.dhia-vc-lightbox__video {
width: 100%;
height: 100%;
display: block;
background: #000;
object-fit: cover;
}
.dhia-vc-lightbox__close {
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
flex: 0 0 44px;
border-radius: 50%;
border: 0;
padding: 0;
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
appearance: none;
-webkit-appearance: none;
line-height: 0;
box-sizing: border-box;
z-index: 10;
}
.dhia-vc-lightbox__close:hover {
background: #c9a961;
color: #fff;
transform: scale(1.1) rotate(90deg);
}
.dhia-vc-lightbox__close svg {
width: 22px;
height: 22px;
display: block;
}
@media (max-width: 700px) {
.dhia-vc-lightbox {
padding: 0;
}
.dhia-vc-lightbox__stage {
max-width: 100vw;
max-height: 100vh;
width: 100vw;
height: 100vh;
border-radius: 0;
aspect-ratio: 9 / 16;
}
.dhia-vc-lightbox__video {
object-fit: cover;
}
.dhia-vc-lightbox__close {
top: 8px;
right: 8px;
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
}
}
/* Lightbox prev/next arrows */
.dhia-vc-lightbox__nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
min-width: 52px;
min-height: 52px;
flex: 0 0 52px;
padding: 0;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.92);
color: #1a1a1a;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
appearance: none;
-webkit-appearance: none;
line-height: 0;
box-sizing: border-box;
z-index: 100000;
}
.dhia-vc-lightbox__nav--prev {
left: 24px;
}
.dhia-vc-lightbox__nav--next {
right: 24px;
}
.dhia-vc-lightbox__nav svg {
width: 26px;
height: 26px;
display: block;
}
.dhia-vc-lightbox__nav:hover {
background: #c9a961;
color: #fff;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 10px 30px rgba(201, 169, 97, 0.45);
}
.dhia-vc-lightbox__nav:disabled {
opacity: 0.25;
cursor: not-allowed;
transform: translateY(-50%);
box-shadow: none;
}
.dhia-vc-lightbox__nav:disabled:hover {
background: rgba(255, 255, 255, 0.92);
color: #1a1a1a;
}
@media (max-width: 700px) {
.dhia-vc-lightbox__nav {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
.dhia-vc-lightbox__nav--prev {
left: 8px;
}
.dhia-vc-lightbox__nav--next {
right: 8px;
}
.dhia-vc-lightbox__nav svg {
width: 20px;
height: 20px;
}
}
.dhia-vc-lightbox {
flex-direction: row;
gap: 16px;
}
.dhia-vc-lightbox__arrow {
flex: 0 0 56px;
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
border-radius: 50%;
border: 0;
padding: 0;
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
appearance: none;
-webkit-appearance: none;
line-height: 0;
box-sizing: border-box;
align-self: center;
z-index: 10;
}
.dhia-vc-lightbox__arrow,
.dhia-vc-lightbox__arrow:hover,
.dhia-vc-lightbox__arrow:focus,
.dhia-vc-lightbox__arrow:active {
background: rgba(255, 255, 255, 0.95);
outline: none;
}
.dhia-vc-lightbox__arrow:hover {
background: #c9a961;
color: #fff;
transform: scale(1.08);
}
.dhia-vc-lightbox__arrow svg {
width: 28px;
height: 28px;
display: block;
}
/* (panel transitions are handled inline by JS for the conveyor-belt effect) */
@media (max-width: 700px) {
.dhia-vc-lightbox {
gap: 6px;
}
.dhia-vc-lightbox__arrow {
flex: 0 0 42px;
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
}
.dhia-vc-lightbox__arrow svg {
width: 22px;
height: 22px;
}
}
/* Mobile scroll progress — dots stepper */
.dhia-vc__dots {
display: none;
justify-content: center;
gap: 8px;
margin-top: 16px;
padding: 0;
}
.dhia-vc__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
border: 0;
padding: 0;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
appearance: none;
-webkit-appearance: none;
}
.dhia-vc__dot.is-active {
background: #c9a961;
transform: scale(1.3);
}
@media (max-width: 900px) {
.dhia-vc__dots {
display: flex;
}
}
/* =========================================================================
Lightbox — Custom Play button (replaces native overlay)
========================================================================= */
/* Always hide the browser's native big play overlay */
.dhia-vc-lightbox__video::-webkit-media-controls-overlay-play-button,
.dhia-vc-lightbox__video::-webkit-media-controls-start-playback-button {
display: none !important;
}
/* Custom play button — positioned on the lightbox center, always centered */
.dhia-vc-lightbox__play,
.dhia-vc-lightbox__play:hover,
.dhia-vc-lightbox__play:focus,
.dhia-vc-lightbox__play:focus-visible,
.dhia-vc-lightbox__play:active {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 84px;
min-width: 84px;
min-height: 84px;
flex: 0 0 84px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(201, 169, 97, 0.5);
color: #c9a961;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0 0 6px;
appearance: none;
-webkit-appearance: none;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 169, 97, 0.3);
z-index: 12;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
.dhia-vc-lightbox__play svg {
width: 32px;
height: 32px;
}
.dhia-vc-lightbox__play svg path {
fill: #c9a961;
}
.dhia-vc-lightbox__play:hover {
transform: translate(-50%, -50%) scale(1.06);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(201, 169, 97, 0.18);
}
/* Show only when paused & not sliding */
.dhia-vc-lightbox.is-open.is-paused:not(.is-sliding) .dhia-vc-lightbox__play {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Tap-zone overlay — catches clicks/taps to toggle play/pause on mobile,
while leaving the bottom 60px strip free for the native control bar. */
.dhia-vc-lightbox__tapzone {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 60px;
/* leave room for native controls bar */
z-index: 6;
cursor: pointer;
background: transparent;
}
/* Remove blue tap-highlight + focus outline on play buttons & lightbox controls */
.dhia-vc__play,
.dhia-vc-lightbox__play,
.dhia-vc-lightbox__close,
.dhia-vc-lightbox__nav,
.dhia-vc-lightbox__tapzone {
-webkit-tap-highlight-color: transparent;
outline: none;
}
.dhia-vc__play:focus,
.dhia-vc__play:focus-visible,
.dhia-vc-lightbox__play:focus,
.dhia-vc-lightbox__play:focus-visible,
.dhia-vc-lightbox__close:focus,
.dhia-vc-lightbox__close:focus-visible,
.dhia-vc-lightbox__nav:focus,
.dhia-vc-lightbox__nav:focus-visible {
outline: none;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 169, 97, 0.3);
}
/* Remove blue tap-highlight + focus outline on header logo link */
.site-branding a,
.ast-site-identity a,
.site-logo-img a,
.custom-logo-link {
-webkit-tap-highlight-color: transparent;
outline: none;
}
.site-branding a:focus,
.site-branding a:focus-visible,
.ast-site-identity a:focus,
.ast-site-identity a:focus-visible,
.custom-logo-link:focus,
.custom-logo-link:focus-visible {
outline: none;
box-shadow: none;
}
/* Stronger override — kill blue tap-highlight everywhere, especially mobile header logo */
html,
body,
a,
button,
.site-header a,
.site-header img,
.site-branding,
.site-branding *,
.ast-site-identity,
.ast-site-identity *,
.custom-logo-link,
.custom-logo-link * {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
-webkit-touch-callout: none;
}
/* ============================================
MOBILE / TABLET — WhatsApp button injected
between logo (left) and burger (right), centered.
Injected via JS (setupMobileHeaderWhatsApp).
============================================ */
.dhia-mobile-wa {
display: none;
}
@media (max-width: 921px) {
.ast-mobile-header-wrap .ast-builder-grid-row {
position: relative;
}
.dhia-mobile-wa {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: auto;
}
.dhia-mobile-wa__link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background-color: var(--tf-primary, #D4AF37);
color: #fff !important;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.3px;
border: 1px solid var(--tf-primary, #D4AF37);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.dhia-mobile-wa__link:hover,
.dhia-mobile-wa__link:focus {
background-color: var(--dhia-gold-dark, #A68B3C);
border-color: var(--dhia-gold-dark, #A68B3C);
box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
transform: translateY(-1px);
}
.dhia-mobile-wa__icon {
display: inline-flex;
align-items: center;
color: #fff;
}
}
/* Very small screens — hide the label, keep only the icon */
@media (max-width: 380px) {
.dhia-mobile-wa__text {
display: none;
}
.dhia-mobile-wa__link {
padding: 8px 10px;
}
}
/* ============================================
MOBILE / TABLET — WhatsApp button (v2)
The is now the link itself.
Positioned absolutely centered within the mobile header bar.
============================================ */
.dhia-mobile-wa {
display: none;
}
@media (max-width: 921px) {
.dhia-mobile-wa {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
padding: 8px 14px;
background-color: var(--tf-primary, #D4AF37);
color: #fff !important;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.3px;
border: 1px solid var(--tf-primary, #D4AF37);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
text-decoration: none !important;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
}
.dhia-mobile-wa:hover,
.dhia-mobile-wa:focus,
.dhia-mobile-wa:focus-visible {
background-color: var(--dhia-gold-dark, #A68B3C);
border-color: var(--dhia-gold-dark, #A68B3C);
box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
transform: translate(-50%, calc(-50% - 1px));
outline: none;
}
.dhia-mobile-wa__icon {
display: inline-flex;
align-items: center;
color: #fff;
}
/* Fallback: appended to body, position fixed at top */
.dhia-mobile-wa--fixed {
position: fixed;
top: 40px;
left: 50%;
transform: translate(-50%, 0);
}
}
@media (max-width: 380px) {
.dhia-mobile-wa__text {
display: none;
}
.dhia-mobile-wa {
padding: 8px 10px;
}
}
/* Mobile WA button — absolutely positioned at the top of the page so it
scrolls away with the header (logo + burger). Header height is 80px so
top:40px places it vertically centered on the bar. */
@media (max-width: 921px) {
body {
position: relative;
}
.dhia-mobile-wa.dhia-mobile-wa--fixed {
position: absolute !important;
top: 40px;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
.dhia-mobile-wa.dhia-mobile-wa--fixed:hover,
.dhia-mobile-wa.dhia-mobile-wa--fixed:focus,
.dhia-mobile-wa.dhia-mobile-wa--fixed:focus-visible {
transform: translate(-50%, calc(-50% - 1px));
}
}
/* ============================================================================
Section 25 — ORDER RECEIVED / THANK YOU PAGE — PREMIUM MOBILE-FIRST
============================================================================ */
/* Page wrapper */
.woocommerce-order-received .site-content #primary,
.woocommerce-order-received .site-content .ast-container,
.woocommerce-order-received .site-content .ast-article-single,
.woocommerce-order-received .site-content #content,
.woocommerce-order-received .site-content .entry-content {
background: transparent;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
width: 100% !important;
}
.woocommerce-order-received {
background: #faf8f3;
}
.woocommerce-order-received .site-content main#main {
padding: 32px 16px 80px !important;
max-width: 900px !important;
margin: 0 auto !important;
}
/* Success message */
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
background: linear-gradient(135deg, #1f1b15 0%, #2d2820 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 16px !important;
padding: 28px 24px !important;
font-family: var(--font-body) !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
text-align: center !important;
margin: 0 0 28px !important;
position: relative;
overflow: hidden;
}
.woocommerce-order-received .woocommerce-notice--success::before,
.woocommerce-order-received .woocommerce-thankyou-order-received::before {
content: "✓";
display: block;
width: 48px;
height: 48px;
line-height: 48px;
background: var(--dhia-gold);
color: #1f1b15;
border-radius: 50%;
font-size: 1.4rem;
font-weight: 700;
margin: 0 auto 14px;
}
/* Order overview (number, date, email, total, payment method) */
.woocommerce-js ul.order_details::before,
.woocommerce-js ul.order_details::after {
content: none !important;
display: none !important;
}
.woocommerce-order-received .woocommerce-order-overview {
list-style: none !important;
margin: 0 0 28px !important;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 12px !important;
background: #fff;
border: 1px solid #ebe6db;
border-radius: 16px;
padding: 20px !important;
box-shadow: 0 6px 24px rgba(140, 110, 60, 0.06);
}
.woocommerce-order-received .woocommerce-order-overview li {
padding: 12px 14px !important;
background: #faf8f3;
border-radius: 10px;
border: none !important;
border-right: none !important;
margin: 0 !important;
float: none !important;
display: flex !important;
flex-direction: column;
gap: 4px;
font-family: var(--font-body) !important;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b5e4a;
width: auto !important;
}
.woocommerce-order-received .woocommerce-order-overview li:last-child {
grid-column: 1 / -1;
background: linear-gradient(135deg, #1f1b15 0%, #2d2820 100%);
border-radius: 12px;
color: #fff;
align-items: center;
justify-content: center;
padding: 16px !important;
}
.woocommerce-order-received .woocommerce-order-overview li:last-child strong {
color: var(--dhia-gold) !important;
font-size: 1.3rem !important;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
display: block;
font-family: var(--font-body) !important;
font-size: 1rem;
font-weight: 700;
color: #1f1b15;
order: 2;
}
/* Order details table */
.woocommerce-order-received .woocommerce-order-details {
background: #fff;
border: 1px solid #ebe6db;
border-radius: 16px;
padding: 24px 20px !important;
margin: 0 0 24px !important;
box-shadow: 0 6px 24px rgba(140, 110, 60, 0.06);
}
.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-order-details__title {
font-family: var(--font-body) !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #1f1b15 !important;
margin: 0 0 18px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
text-transform: none !important;
}
.woocommerce-order-received .woocommerce-table--order-details {
border: none !important;
border-collapse: collapse !important;
width: 100% !important;
margin: 0 !important;
}
.woocommerce-order-received .woocommerce-table--order-details thead th {
font-family: var(--font-body) !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: #6b5e4a !important;
border: none !important;
border-bottom: 1px solid #ebe6db !important;
padding: 0 0 10px !important;
background: transparent !important;
}
.woocommerce-order-received .woocommerce-table--order-details td,
.woocommerce-order-received .woocommerce-table--order-details th {
border: none !important;
border-bottom: 1px solid #f0ebe0 !important;
padding: 14px 0 !important;
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
color: #1f1b15 !important;
background: transparent !important;
vertical-align: top !important;
}
.woocommerce-order-received .woocommerce-table--order-details .product-name {
font-weight: 700 !important;
}
.woocommerce-order-received .woocommerce-table--order-details .product-name a {
color: var(--dhia-gold-dark) !important;
text-decoration: none !important;
font-weight: 700 !important;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.01em;
}
/* Item meta (pick up, drop off, dates etc.) */
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta {
list-style: none !important;
padding: 0 !important;
margin: 10px 0 0 !important;
}
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li {
padding: 4px 0 !important;
margin: 0 !important;
font-size: 0.85rem !important;
color: #4a4033 !important;
display: flex;
gap: 6px;
align-items: baseline;
}
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li strong,
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li dt {
font-weight: 600 !important;
color: #6b5e4a !important;
min-width: 0;
white-space: nowrap;
}
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li p {
margin: 0 !important;
color: #1f1b15 !important;
}
/* Footer rows (subtotal, shipping, total, payment) */
.woocommerce-order-received .woocommerce-table--order-details tfoot th {
font-weight: 600 !important;
color: #6b5e4a !important;
font-size: 0.88rem !important;
text-transform: none !important;
letter-spacing: normal !important;
white-space: nowrap !important;
width: 1% !important; /* shrink label column so value side keeps all the room */
}
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
font-weight: 600 !important;
text-align: right !important;
white-space: nowrap !important;
}
/* TND equivalent in tfoot stays inline next to the EUR amount (one line) */
.woocommerce-order-received .woocommerce-table--order-details tfoot td .dhia-tnd-eq {
white-space: nowrap !important;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
border-bottom: none !important;
padding-top: 16px !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
color: #1f1b15 !important;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td .amount {
color: var(--dhia-gold-dark) !important;
font-size: 1.3rem !important;
}
/* Customer details (billing & shipping addresses).
Par défaut, .woocommerce-customer-details EST elle-même la card pleine
largeur (cas /transferts & /excursions : pas de col2-set, juste
Adresse de facturation
+ directement enfants). */
.woocommerce-order-received .woocommerce-customer-details {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 24px 0 0 !important;
float: none !important;
background: #fff;
border: 1px solid #ebe6db;
border-radius: 16px;
padding: 24px 20px !important;
box-shadow: 0 6px 24px rgba(140, 110, 60, 0.06);
}
/* Cas avec col2-set (2 adresses billing+shipping) : le parent redevient un
wrapper transparent et chaque colonne enfant porte sa propre card. */
.woocommerce-order-received .woocommerce-customer-details:has(.col2-set) {
background: transparent;
border: none;
border-radius: 0;
padding: 0 !important;
box-shadow: none;
}
.woocommerce-order-received .woocommerce-customer-details .col2-set {
display: grid !important;
/* Full-width single card when only billing is present (transferts/excursions
n'ont pas d'adresse de livraison). On bascule en 2 colonnes uniquement
si la grille a effectivement deux enfants (cf. :has plus bas). */
grid-template-columns: 1fr !important;
gap: 24px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
box-sizing: border-box !important;
}
.woocommerce-order-received .woocommerce-customer-details .col2-set:has(.col-2) {
grid-template-columns: 1fr 1fr !important;
}
.woocommerce-order-received .woocommerce-customer-details .col2-set::after,
.woocommerce-order-received .woocommerce-customer-details .col2-set::before {
content: none !important;
display: none !important;
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column,
.woocommerce-order-received .woocommerce-customer-details .col-1,
.woocommerce-order-received .woocommerce-customer-details .col-2 {
background: #fff;
border: 1px solid #ebe6db;
border-radius: 16px;
padding: 20px !important;
box-shadow: 0 6px 24px rgba(140, 110, 60, 0.06);
margin-bottom: 0 !important;
margin: 0 !important;
width: auto !important;
float: none !important;
max-width: none !important;
}
.woocommerce-order-received .woocommerce-customer-details h2,
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #1f1b15 !important;
margin: 0 0 14px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
text-transform: none !important;
}
.woocommerce-order-received .woocommerce-customer-details address {
font-family: var(--font-body) !important;
font-size: 0.88rem !important;
line-height: 1.7 !important;
color: #4a4033 !important;
font-style: normal !important;
border: none !important;
}
.woocommerce-order-received .woocommerce-customer-details address p {
margin: 0 !important;
}
/* "Actions" row with invoice button */
.woocommerce-order-received .woocommerce-table--order-details + .woocommerce-order-downloads,
.woocommerce-order-received .order-again {
margin-top: 16px !important;
}
.woocommerce-order-received .order-again .button,
.woocommerce-order-received .woocommerce-order-details .button {
display: inline-block !important;
background: #1f1b15 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 12px 20px !important;
font-family: var(--font-body) !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
text-decoration: none !important;
white-space: nowrap !important;
word-break: keep-all !important;
transition: background 0.2s ease;
}
.woocommerce-order-received .order-again .button:hover,
.woocommerce-order-received .woocommerce-order-details .button:hover {
background: var(--dhia-gold-dark) !important;
}
/* "Payer en argent comptant" notice */
.woocommerce-order-received .woocommerce-order > p:not(.woocommerce-thankyou-order-received) {
font-family: var(--font-body) !important;
font-size: 0.9rem !important;
color: #6b5e4a !important;
background: #fff8e1;
border: 1px solid #f0e4b8;
border-left: 3px solid var(--dhia-gold);
border-radius: 10px;
padding: 14px 18px !important;
margin: 0 0 24px !important;
}
/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 600px) {
.woocommerce-order-received .site-content main#main {
padding: 20px 14px 60px !important;
}
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
padding: 22px 18px !important;
font-size: 1rem !important;
border-radius: 14px !important;
}
.woocommerce-order-received .woocommerce-order-overview {
grid-template-columns: 1fr 1fr;
gap: 8px !important;
padding: 14px !important;
}
.woocommerce-order-received .woocommerce-order-overview li {
padding: 10px 12px !important;
font-size: 0.7rem;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
font-size: 0.88rem;
}
.woocommerce-order-received .woocommerce-order-details {
padding: 18px 14px !important;
border-radius: 14px !important;
}
.woocommerce-order-received .woocommerce-customer-details .col2-set {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
border-radius: 14px;
padding: 16px !important;
}
/* Table: stack product name and total on mobile */
.woocommerce-order-received .woocommerce-table--order-details td,
.woocommerce-order-received .woocommerce-table--order-details th {
padding: 12px 0 !important;
font-size: 0.88rem !important;
}
/* Stack item meta labels and values vertically on mobile */
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li {
flex-direction: column !important;
gap: 2px !important;
}
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li strong,
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li dt {
white-space: normal !important;
}
}
}
/* ============================================================
Contact page — section "Nos agences"
Override Font Awesome glyphs des Icon List Elementor pour
moderniser : map-marker-alt → location-dot style,
phone-alt → phone-volume, mail-bulk → envelope-open.
============================================================ */
.elementor-icon-list-item .fa-map-marker-alt::before {
content: "\f3c5"; /* location-dot (FA5 map-marker-alt = même unicode) */
}
.elementor-icon-list-item .fa-phone-alt::before {
content: "\f2a0"; /* phone-volume */
}
.elementor-icon-list-item .fa-mail-bulk::before {
content: "\f2b6"; /* envelope-open */
}
/* Liens tel: dans Icon List (numéros agences) — même police/couleur
que le texte courant (email, adresse), pas le bleu/noir des liens. */
.elementor-icon-list-item .elementor-icon-list-text a,
.elementor-icon-list-item .elementor-icon-list-text a:link,
.elementor-icon-list-item .elementor-icon-list-text a:visited,
.elementor-icon-list-item .elementor-icon-list-text a:hover,
.elementor-icon-list-item .elementor-icon-list-text a:focus {
color: inherit;
font: inherit;
text-decoration: none;
}
/* ------------------------------------------------------------------ *
* Coupon / Code promo — notice de succès + ligne de remise
* ------------------------------------------------------------------ */
/* 1. Notice "Code promo appliqué avec succès" — neutralise l'icône
native (svg/img/i) injectée par Tourfic/WC qui chevauche le texte,
puis pose notre propre ✓ via ::before. */
html body .woocommerce-message,
html body .woocommerce-notices-wrapper .woocommerce-message,
html body .woocommerce-message[role="alert"] {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 14px 18px !important;
background: #f6f0e0 !important;
border: 1px solid #e3dccb !important;
border-left: 3px solid var(--dhia-gold) !important;
border-radius: 10px !important;
color: #1f1b15 !important;
font-family: var(--font-body), sans-serif !important;
font-size: 0.95rem !important;
line-height: 1.4 !important;
list-style: none !important;
}
/* Masque toute icône native (svg, img, , span d'icône) placée
directement à l'intérieur — au cas où une variante l'injecte. */
html body .woocommerce-message > svg,
html body .woocommerce-message > img,
html body .woocommerce-message > i,
html body .woocommerce-message > .icon,
html body .woocommerce-message > [class*="icon"]:not(a),
html body .woocommerce-message > span > svg,
html body .woocommerce-message > span > img,
html body .woocommerce-message > span > i {
display: none !important;
}
html body .woocommerce-message::before,
html body .woocommerce-message[role="alert"]::before {
content: "\2713" !important; /* ✓ unicode */
position: static !important; /* sort du positionnement absolu */
transform: none !important;
top: auto !important;
left: auto !important;
flex: 0 0 22px !important; /* devient un item flex à part entière */
width: 22px !important;
height: 22px !important;
line-height: 22px !important;
text-align: center !important;
background: var(--dhia-gold) !important;
color: #fff !important;
font-family: var(--font-body), sans-serif !important;
font-size: 0.85rem !important;
font-weight: 800 !important;
border-radius: 50% !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 1px 3px rgba(140, 110, 60, 0.25);
}
html body .woocommerce-message::after {
content: none !important; /* clear potential float spacer */
}
/* 2. Ligne "Code promo : XXX" dans l'order summary — visible (doré) */
.woocommerce-checkout-review-order-table tr.cart-discount th,
.woocommerce-checkout-review-order-table tr.cart-discount td,
table.shop_table tr.cart-discount th,
table.shop_table tr.cart-discount td {
color: var(--dhia-gold-dark) !important;
font-family: var(--font-body), sans-serif !important;
font-weight: 700 !important;
background: #faf8f3 !important;
}
table.shop_table tr.cart-discount td .amount {
color: var(--dhia-gold-dark) !important;
font-weight: 700 !important;
}
/* 3. Bouton "Enlever" / "[Remove]" — vrai bouton, pas du texte brut */
.woocommerce-remove-coupon,
a.woocommerce-remove-coupon,
table.shop_table .woocommerce-remove-coupon {
display: inline-block !important;
margin-left: 10px !important;
padding: 4px 12px !important;
background: #fff !important;
border: 1px solid var(--dhia-gold) !important;
border-radius: 6px !important;
color: var(--dhia-gold-dark) !important;
font-family: var(--font-body), sans-serif !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
text-decoration: none !important;
vertical-align: middle !important;
transition: background 0.2s ease, color 0.2s ease !important;
}
.woocommerce-remove-coupon:hover,
a.woocommerce-remove-coupon:hover {
background: var(--dhia-gold) !important;
color: #fff !important;
text-decoration: none !important;
}
/* ==========================================================================
Section 21 — Checkout meeting sign field: leading icon (driver name sign)
========================================================================== */
.woocommerce-checkout #billing_flight_number_field input.input-text,
.woocommerce-checkout input#billing_flight_number {
padding-left: 44px !important;
background-color: #faf8f3 !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 22px 22px !important;
}
.woocommerce-checkout #billing_flight_number_field input.input-text:focus,
.woocommerce-checkout input#billing_flight_number:focus {
background-color: #fff !important;
}
.woocommerce-checkout #billing_meeting_sign_field input.input-text,
.woocommerce-checkout input#billing_meeting_sign {
padding-left: 44px !important;
background-color: #faf8f3 !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 22px 22px !important;
}
.woocommerce-checkout #billing_meeting_sign_field input.input-text:focus,
.woocommerce-checkout input#billing_meeting_sign:focus {
background-color: #fff !important;
}
/* ==========================================================================
Section 22 — Checkout passenger / child-seat counters
========================================================================== */
.woocommerce-checkout .dhia-counter > label {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
font-family: var(--font-body) !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
color: #6b5e4a !important;
margin-bottom: 6px !important;
line-height: 1.3 !important;
letter-spacing: 0.01em !important;
white-space: nowrap !important;
min-width: 0 !important;
}
.woocommerce-checkout .dhia-counter > label .dhia-counter-desc {
display: inline-block;
margin-left: 0;
padding: 4px 12px;
border-radius: 999px;
background: #eaf3ff;
color: #1f4d8c;
border: 1px solid #cfe0f7;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.01em;
vertical-align: middle;
white-space: nowrap;
flex: 0 0 auto;
}
@media (max-width: 480px) {
.woocommerce-checkout .dhia-counter > label {
font-size: 0.88rem !important;
gap: 6px !important;
}
.woocommerce-checkout .dhia-counter > label .dhia-counter-desc {
font-size: 0.72rem;
padding: 3px 9px;
}
/* WooCommerce ajoute " (facultatif)" via .optional — on le cache en mobile
pour laisser la place au badge sur la même ligne. */
.woocommerce-checkout .dhia-counter > label .optional {
display: none !important;
}
}
.woocommerce-checkout .dhia-counter-baby > label .dhia-counter-desc {
background: #fdecef;
color: #9a1d3c;
border-color: #f6cbd4;
}
.woocommerce-checkout .dhia-counter-convertible > label .dhia-counter-desc {
background: #fff0d6;
color: #8a5a14;
border-color: #f3d9a3;
}
.woocommerce-checkout .dhia-counter-booster > label .dhia-counter-desc {
background: #e5f5e8;
color: #1f6b34;
border-color: #b9e1c2;
}
.woocommerce-checkout .dhia-counter .description,
.woocommerce-checkout .dhia-counter small.description {
display: none !important;
}
.woocommerce-checkout .dhia-counter .dhia-counter-ui {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
background: #faf8f3 !important;
border: 1px solid #e3dccb !important;
border-radius: 10px !important;
padding: 6px 10px !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 22px 22px !important;
padding-left: 44px !important;
}
.woocommerce-checkout .dhia-counter .dhia-counter-ui input[type="number"] {
flex: 0 0 auto !important;
text-align: center !important;
border: none !important;
background: transparent !important;
padding: 6px 0 !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #1f1b15 !important;
-moz-appearance: textfield !important;
width: 44px !important;
box-shadow: none !important;
min-width: 0 !important;
}
.woocommerce-checkout .dhia-counter .dhia-counter-ui input[type="number"]::-webkit-outer-spin-button,
.woocommerce-checkout .dhia-counter .dhia-counter-ui input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.woocommerce-checkout .dhia-counter .dhia-counter-btn {
flex: 0 0 36px !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
border: 1px solid #d8cfb8 !important;
background: #fff !important;
color: #1f1b15 !important;
font-size: 1.1rem !important;
line-height: 1 !important;
font-weight: 700 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.woocommerce-checkout .dhia-counter .dhia-counter-btn:hover:not(:disabled) {
background: var(--dhia-gold, #c2a058) !important;
border-color: var(--dhia-gold, #c2a058) !important;
color: #fff !important;
}
.woocommerce-checkout .dhia-counter .dhia-counter-btn:disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
}
/* Per-field leading icons */
.woocommerce-checkout .dhia-counter-adults .dhia-counter-ui {
background-image: url("data:image/svg+xml;utf8,") !important;
}
.woocommerce-checkout .dhia-counter-baby .dhia-counter-ui,
.woocommerce-checkout .dhia-counter-convertible .dhia-counter-ui,
.woocommerce-checkout .dhia-counter-booster .dhia-counter-ui {
background-image: url("images/siege_bebe.png") !important;
background-size: 26px 26px !important;
}