/*
Theme Name: Leflite child
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Child thema van het thema Leflite
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

/* FOOTER */
footer img {
    width: auto;
}
h1,h2 {
	font-weight: 900;
}

/* general */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }
}
.menu-item-has-translate, .menu-item-has-translate .gtranslate_wrapper #gt_float_wrapper {
    height: 65px;
}

/* hero */
section.full-background-overlay .background-image-wrapper img {
 	opacity: 0.7; 
}
.home main > .text-holder > section:first-child .background-image-wrapper {
    animation: none;
    opacity: 1;
}

/* colors */

.bg-pentiary {
 	background-color: var(--pentiary);  	
  	color: var(--pentiary-content); 
}

/* fotos */

figure.image-outer.has-caption {
    padding: 22px;
    background: var(--white);    
 	color: var(--white-content);
    border-radius: var(--general-border-radius);
  	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
figure.image-outer.has-caption figcaption {
    border-left: none;
    margin-top: 12px;
    padding-left: 0;
  	text-align: center;
}
.screen-right figure.image-outer.has-caption {
  transform: rotate(6deg);
}
.screen-left figure.image-outer.has-caption {
  transform: rotate(-6deg);
}

/* header / topbar */

header#header {
  padding-top: 25px;
}
header#header .navigation-inner {
	background: var(--white);
  	color: var(--white-content);
  	position:relative;
    z-index: 30;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
header#header .navigation-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(assets/wood-patern.png);
    opacity: 0.1;
    z-index: 0;
  	pointer-events: none;
}
header#header .navigation-inner,
.topbar,
div#header-notification {
    max-width: 1538px;
    margin: 0 auto;
}
header#header .navigation-inner,
.topbar {
    border-radius: var(--general-border-radius);
}
header#header .topbar { 
    padding: 7px 20px 0 20px;
  	top: -7px;
    position:relative;
    z-index: 10;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
div#header-notification {
    padding-top: 12px;
    margin-top: -7px;
    position: relative;
    z-index: 20;
  	border-radius: var(--general-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.topbar .topbar-inner {
 	width: 100%; 
}
ul.topbar-usps {
    flex: 1;
    justify-content: space-between;
}
.topbar ul.topbar-usps li {
    align-items: center;
    display: block;
}
ul.topbar-usps li {
	/*white-space: pre; */
}
.main-nav-menu {
  	margin-right: -10px;
    margin-left: -10px;
}

/* beschikbaarheid */

.beschikbaarheidbox {
    margin-bottom: calc((var(--section-padding) * -1) - 50px) !important;
    position: relative;
    display: block;
    color: var(--white-content);
}
.beschikbaarheidboxinner {
    padding: 22px 34px;
    background: var(--white);
    color: var(--white-content);
    border-radius: var(--global-border-radius);
    border-radius: var(--general-border-radius);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  	border: 1px solid #E2E2E2;
}

/* section extras */

@keyframes grass-sway {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(10px) translateY(0px);
    }
}
.grass-shape {
    position: relative;
}
.grass-shape::before {
    content: "";
	animation: grass-sway 1s ease-in-out infinite alternate;
  	will-change: transform;
    position: absolute;
    top: -85px;
    left: -50px; /* start slightly outside left */
    width: calc(100vw + 100px); /* slightly wider than viewport */
    height: 87px; /* height of your grass */
  	pointer-events: none;
    -webkit-mask-image: url('assets/grass-wide.svg');
    mask-image: url('assets/grass-wide.svg');
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: auto 60px;
    mask-size: auto 60px;
    -webkit-mask-position: top left;
    mask-position: bottom left;
    pointer-events: none; /* prevents blocking clicks */
  	z-index: 1;
}
.bg-primary.grass-shape::before { background-color: var(--primary); }
.bg-secondary.grass-shape::before { background-color: var(--secondary); }
.bg-tertiary.grass-shape::before { background-color: var(--tertiary); }
.bg-quartiary.grass-shape::before { background-color: var(--quartiary); }
.bg-pentiary.grass-shape::before { background-color: var(--pentiary); }
.bg-white.grass-shape::before { background-color: var(--white); }
.bg-black.grass-shape::before { background-color: var(--black); }
.bg-gray.grass-shape::before { background-color: var(--gray); }
.bg-darkgray.grass-shape::before { background-color: var(--darkgray); }
.bg-yellow.grass-shape::before { background-color: var(--yellow); }
.bg-succes.grass-shape::before { background-color: var(--succes); }
.bg-warning.grass-shape::before { background-color: var(--warning); }
.bg-error.grass-shape::before { background-color: var(--error); }

.horse-before {
	position: relative; 
}
.horse-before::after {
    content: "";
    position: absolute;
    top: -138px;
    left: 0;
    width: 247px;
    height: 150px;
  	pointer-events: none;
  	display: block;
  	opacity: 1;
    background-image: url('assets/horse.svg');
    transform: translateX(-300px) translateY(0px) rotate(0deg);
    /*background-image: url('assets/horse.svg');
    animation: horse-run 20s linear infinite,
               horse-bounce 0.5s ease-in-out infinite;
    animation-delay: 10s;*/
}
.horse-before.run::after {
    

    animation:
        horse-run 10s linear forwards,
        horse-bounce 0.5s ease-in-out infinite;
}
@keyframes horse-run {
    0% {
        transform: translateX(-300px) translateY(0px) rotate(0deg);
    }

    5% {
        transform: translateX(-200px) translateY(-2px) rotate(-1deg);
    }

    10% {
        transform: translateX(-100px) translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateX(50vw) translateY(-3px) rotate(1deg);
    }

    90% {
        transform: translateX(120vw) translateY(0px) rotate(0deg);
    }

    100% {
        transform: translateX(140vw) translateY(0px) rotate(0deg);
    }
}
@keyframes horse-bounce {

    0% {
        top: -138px;
    }

    25% {
        top: -144px;
    }

    50% {
        top: -150px;
    }

    75% {
        top: -144px;
    }

    100% {
        top: -138px;
    }
}
.overflow-half-bottom > .container {
    margin-bottom: calc((var(--section-padding) * -1) - 53px);
}
.overflow-half-bottom {
    background-image: url('assets/bottom-shape.svg');
    background-repeat: no-repeat;
    background-position: bottom -1px center;
    background-size: 100% auto;
}
.spies-bg {
    background-image: url('assets/fireplace-spies.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 432px;
    /*background-attachment: fixed;*/
}

/* cards */

.card .image-holder {
    margin: 20px 20px 0 20px;
}
.card .buttons-holder {
  margin-top: 0;
}

/* footer */
footer#footer a.social-link {
    text-decoration: none;
    font-size: 34px;
}

/* hbook */

.checkout-coupon-overlay input, .checkout-coupon-overlay select, .checkout-coupon-overlay textarea, .filter-item input, .filter-item select, .filter-item textarea, form input, form select {
    border-radius: 999px;
}
.hb-search-fields.hb-clearfix {
    display: flex;
    flex-wrap: wrap;
}
.hb-search-fields.hb-clearfix > * {
	flex: 1;
}
.hb-search-fields-and-submit input, .hb-search-fields-and-submit select, form .hb-search-fields-and-submit input, form .hb-search-fields-and-submit select {
      padding: 9px 20px;
}
.hb-search-fields-and-submit select, form .hb-search-fields-and-submit select {
      padding: 12.4px 20px;
}
.hb-search-button-wrapper input {
    width: 100% !important;
    display: block;
    float: none;
    padding: 9px;
}
.hb-search-error, .hbook-wrapper .form-error, .hb-confirm-error, .hb-policies-error, .hb-stripe-error, .hb-coupon-error {
  margin: 3px 0;
  background-color: var(--error);  
  color: var(--error-content);
  padding: 5px 20px;
}
p.hb-check-dates-wrapper, p.hb-accom-number-wrapper, p.hb-people-wrapper, p.hb-search-button-wrapper {
	margin-bottom: 0; 
}
form.hb-options-form, .hb-booking-details-form {
    border: 1px solid var(--black);
    padding: var(--general-padding);
    border-radius: var(--general-border-radius);
}
.hb-searched-summary > *:not(.hb-change-search-wrapper) {
    padding: 9px 0;
}

/* cols */

.hb-booking-details-form {
  flex-wrap: wrap;
  gap: 30px;
}
.hb-booking-details-form[style*="display: block"] {
  display: flex !important;
}

.hb-details-fields {
  flex: 1 1 calc(50% - 30px);
  min-width: 300px;
}

.hb-summary-wrapper,
.hb-policies-area,
.hb-payment-info-wrapper,
.hb-confirm-area {
  flex: 0 0 calc(50% - 30px);
  min-width: 280px;
}

.hb-details-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.hb-details-fields h3.hb-title {
  width: 100%;
}

.hb-details-fields > p {
  flex: 1 1 calc(50% - 10px);
  min-width: 200px;
}

.hb-details-fields > p:has(textarea) {
  flex: 1 1 100%;
}

.hb-step-button.hb-previous-step {
  width: 100%;
}

.hb-bottom-area {
  width: 100%;
}

@media (max-width: 768px) {
  .hb-booking-details-form {
    flex-direction: column;
  }

  .hb-summary-wrapper,
  .hb-policies-area,
  .hb-payment-info-wrapper,
  .hb-confirm-area {
    flex: 1 1 100%;
  }

  .hb-details-fields > p {
    flex: 1 1 100%;
  }
}
@media (max-width: 991px) {
  .hb-search-fields.hb-clearfix > * {
      min-width: 48%;
      margin: 3px 0;
  }
}
@media (max-width: 768px) {
  .hb-search-fields.hb-clearfix > * {
      min-width: 100%;
      margin: 3px 0;
  }
}

#hb-resa-confirm-done {
  position: relative;
  background: linear-gradient(135deg, #fffdf0 0%, #fff8e1 100%);
  border: 2px solid #f0c040;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 24px rgba(240, 192, 64, 0.25);
}

#hb-resa-confirm-done .hb-resa-summary-title {
  color: #2e7d32;
  font-size: 1.3em;
  text-align: center;
  letter-spacing: 0.03em;
}

#hb-resa-confirm-done .hb-resa-summary-title::before {
  content: '🎉 ';
}

#hb-resa-confirm-done .hb-resa-summary-title::after {
  content: ' 🎉';
}

#hb-resa-confirm-done .hb-summary-accom-name {
  font-weight: bold;
  color: #1a6b1a;
}

#hb-resa-confirm-done .hb-summary-accom-price,
#hb-resa-confirm-done .hb-summary-deposit {
  color: #b8860b;
  font-weight: 600;
}

#hb-resa-confirm-done .hb-resa-summary-content {
  border-top: 1px dashed #f0c040;
  padding-top: 16px;
  margin-top: 8px;
}