/*
Theme Name:   Safar Child
Theme URI:    https://safardemo.devsvibe.co/
Author:       DevsVibe
Author URI:   https://themeforest.net/user/devsvibe/portfolio
Description:  Safar Child Theme For For Hotel & Resort Booking Purpose.
Version:      1.0.0
Template:     safar
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain:  safar-child
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
*/
.safar-header-area.safar-navbar .site-branding {
    line-height: 10px!important;
}
p.elementor-heading-title.elementor-size-default {
    font-family: 'Roboto';
	color: var(--e-global-color-secondary);
}

.responsive-header-logo .logo-wrapper img, .safar-header-area .logo-wrapper img {
    max-width: 250px;
    max-height: 100px;
}
.site-header.theme-header-6:not(.header-trans) {
    background-color: #fcfbf9;
}

.elementor-widget-db-fw-nav-menu .db-fw-nav-menu.desktop-menu-active .menu-item a {
    position: relative;
    text-decoration: none;
    display: flex;
    padding: 0 0 1em;}


/* Logo dans le sticky header 
.safar-header-area.safar-header-sticky .logo-wrapper img,
.site-header.safar-header-sticky .logo-wrapper img {
    content: url("/wp-content/uploads/2026/05/logo-sicky-header.png");
    max-width: 180px;
    max-height: 90px;
    object-fit: contain;
}
*/


/* Champs RéservPro */
.formreserv input[type="text"],
.formreserv select,
.formreserv .nice-select {
    background: #F4F2F0 !important;
    border: 1px solid #E8E3DD !important;
    border-radius: 35px !important;
    min-height: 68px !important;
    padding: 0 24px !important;
    font-size: 16px !important;
    color: #1F3E68 !important;
    box-shadow: none !important;
}

/* Labels */
.formreserv label,
.formreserv .col-md-3,
.formreserv .col-md-2 {
    color: #1F3E68;
    font-weight: 600;
}

/* Bouton */
.formreserv input[type="submit"] {
    background: #D8B06A;
    color: #fff ;
	    font-size: 20px;
    border-radius: 40px;
    border: none;
    min-height: 68px;
    padding: 0 35px;
    font-weight: 600;
}
/* Formulaire en grille */
.formreserv .search_reservpro {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
}

/* Ligne 1 : date + durée */
.formreserv .search_reservpro > .col-md-3 {
    flex: 0 0 calc(68% - 9px) !important;
    width: calc(68% - 9px) !important;
    max-width: none !important;
    margin: 0 !important;
}

.formreserv .search_reservpro > .colduree {
    flex: 0 0 calc(32% - 9px) !important;
    width: calc(32% - 9px) !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Ligne 2 : adultes / enfants / chiens */
.formreserv .search_reservpro > .col-md-2:not(.colduree) {
    flex: 0 0 calc(33.333% - 12px) !important;
    width: calc(33.333% - 12px) !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Champs pleine largeur */
.formreserv input[type="text"],
.formreserv select,
.formreserv .nice-select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Bouton pleine largeur */
.formreserv input[type="submit"] {
    width: 100% !important;
    margin-top: 18px !important;
}




.formreserv .nice-select span,
.formreserv .nice-select .current {
    line-height: 72px !important;
}
.formreserv .nice-select {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}


/* Calendrier RéservPro - style proche du modèle */
.xdsoft_datetimepicker {
    width: 620px !important;
    max-width: 90vw !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.18) !important;
    background: #fff !important;
}

/* Entête calendrier */
.xdsoft_datetimepicker .xdsoft_monthpicker {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: #D8B06A !important;
    padding: 14px 18px !important;
    height: auto !important;
}

/* Mois + année côte à côte */
.xdsoft_datetimepicker .xdsoft_label {
    float: none !important;
    width: auto !important;
    min-width: 120px !important;
    height: 42px !important;
    line-height: 42px !important;
    background: #0D3763 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

/* Texte dans mois / année */
.xdsoft_datetimepicker .xdsoft_label span {
    color: #fff !important;
    line-height: 42px !important;
}

/* Flèches */
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
    display: none;
}

/* Zone calendrier */
.xdsoft_datetimepicker .xdsoft_datepicker,
.xdsoft_datetimepicker .xdsoft_calendar {
    width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
}

/* Table */
.xdsoft_datetimepicker table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 8px 8px !important;
}

/* Jours semaine */
.xdsoft_datetimepicker .xdsoft_calendar th {
    color: #0D3763 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
}

/* Cases dates */
.xdsoft_datetimepicker .xdsoft_calendar td {
    height: 46px !important;
    border: none !important;
    background: transparent !important;
    color: #1f1f1f !important;
    font-size: 16px !important;
    text-align: center !important;
    border-radius: 9px !important;
}

/* Jours désactivés */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
    color: #B8C1CA !important;
}

/* Date sélectionnée */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
    background: #0D3763 !important;
    color: #fff !important;
    border-radius: 9px !important;
}

/* Aujourd'hui / hover */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today,
.xdsoft_datetimepicker .xdsoft_calendar td:hover {
    background: #F4EFE8 !important;
    color: #0D3763 !important;
    border-radius: 9px !important;
}

/* Flèches */
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}
.safar__btn::before {
   background: #D8B06A;
}
/* Style des listes de base */
.elementor-widget-text-editor ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.elementor-widget-text-editor ul li {
    position: relative;
    padding-left: 38px !important;
    margin-bottom: 14px !important;
    line-height: 1.6;
}

.elementor-widget-text-editor ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;

    width: 24px;
    height: 24px;
    line-height: 24px;

    text-align: center;
    border-radius: 50%;

    background: #D8B06A;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.safar-button.bg_animated::before {
    background: #0D3763!important;
}

.safar-animal-safari-item .thumb {
    width: 50%;
    aspect-ratio: 1 / 1; /* carré */
    overflow: hidden;
}

.safar-animal-safari-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.safar-portfolio-inner .thumb{
    aspect-ratio: 4 / 3; /* ou 1/1 si tu veux des carrés */
    overflow:hidden;
    border-radius:24px;
}

.safar-portfolio-inner .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.elementor-image-gallery .gallery-item img{
    width: 100%;
    height: 300px; /* ajuste selon la hauteur désirée */
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 24px;
	padding: 15px;
}

.safar-animal-safari-wrap ul li {
    width: 55%!important;
}

.safar-animal-safari-item .title {
    font-size: 38px!important;
 
}

.safar-header-area.safar-navbar-expand-lg ul.safar-navbar-nav>li>a.nav-link, .safar-header-area ul.safar-navbar-nav>li>a {
    padding: 0 19px!important;
  }

.elementor-element-7478e63 .safar-section-title__title {
  font-size: clamp(45px, 8vw, 112px);
  line-height: 1;
  white-space: nowrap;
}

.safar-header-area.safar-navbar {
    z-index: 999;}

.grid-dispo {
    gap: 5%!important;}
/*
.xdsoft_datetimepicker {
    height: 415px!important;
}
*/
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_calendar td:hover div {
    color: #0b3d78 !important;
    opacity: 1 !important;
}


.responsive-header-top {
   background: #fcfbf9;
}

@media (max-width: 767px) {
  .xdsoft_datetimepicker {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 360px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .xdsoft_datetimepicker .xdsoft_calendar,
  .xdsoft_datetimepicker table {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  body.home .xdsoft_datetimepicker {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.home .xdsoft_datetimepicker .xdsoft_calendar {
    height: auto !important;
    overflow: visible !important;
  }

  body.home .xdsoft_datetimepicker table {
    height: auto !important;
  }
}

@media (max-width: 767px) {

  .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
    max-height: 260px !important;
    height: auto !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
  }
/*
  .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div {
    margin-top: 0 !important;
  }
*/
  .xdsoft_datetimepicker .xdsoft_monthselect {
    min-height: 260px !important;
  }
}

.xdsoft_option {
    color: #0D3763;
}






@media (max-width: 767px) {
  body .xdsoft_datetimepicker.xdsoft_noselect.xdsoft_ {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
	  left: 200px!important;
  }

  body .xdsoft_datetimepicker .xdsoft_datepicker,
  body .xdsoft_datetimepicker .xdsoft_calendar,
  body .xdsoft_datetimepicker table {
    height: auto !important;
    overflow: visible !important;
  }
	
	.badge-dispo::after {
    bottom: -93px !important;
    left: -353% !important;
}
	
	
	.safar-contact-form-actions::after{
      left: 59% !important;
}
}

.xdsoft_datetimepicker {
  height: auto !important;
  overflow: visible !important;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
  height: auto !important;
}

.xdsoft_datetimepicker .xdsoft_calendar {
  height: auto !important;
}



.badge-ko::after {
    content: "Indisponible pour ces dates" !important;
    white-space: nowrap;
    background: rgba(0, 0, 0, .72) !important;
    color: #fff !important;
    opacity: 1 !important;
}
.safar-contact-form-actions{
    display:flex !important;
    justify-content:center !important;
    position:relative;
}

.safar-contact-form-actions p{
    position:relative;
    display:inline-block;
}

.safar-contact-form-actions::after{
      left: 55% !important;
    margin-left: 10px;
    inset-inline-end: auto !important;
    transform: translateY(-50%) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .safar-mobile-menu-nav-wrapper {
        z-index: 9999999;
    }
}

/* scroll qui saute */
@media (max-width: 767px) {

  html,
  body {
    overflow-x: hidden !important;
  }

  .safar-header-navbar {
    position: relative !important;
    min-height: 88px !important;
  }

  .site-branding.site-logo-info {
    padding-right: 70px !important;
  }

  .quote-icon.safar-theme-nav-responsive.hamburger-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 99999 !important;
  }

  .safar-mobile-hamburger-menu,
  .safar-mobile-hamburger-menu a {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
	
	
    body.admin-bar .safar-sticky-header-wrapper.safar-header-sticky, body.admin-bar .site-header.safar-header-sticky {
        z-index: 999;
    }
	
	.availlable-section {
    overflow-y: hidden;
}
   }