/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/* Variables */
:root {
  --bg: #f2f2f2;
  --font: #000;   
  --primary: #730a0a;
  --secondary: #ccc;
  --tertiary: #fff;
  --quarternary: #e9e9e9;
}

/* Global Styles */
* { box-sizing: border-box; outline:none; -webkit-tap-highlight-color: transparent; }
*:focus { outline: none !important; }
a { color: inherit; }
html, body { background:var(--bg); font-family: 'Lexend', Arial, sans-serif; font-weight:300; font-size: 14px; color: var(--font); margin: 0; padding: 0; height:100%; }

/* Scrollbar Styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
* { scrollbar-color: var(--secondary) var(--bg); scrollbar-width: thin; }
main { width:100%; max-width: 840px; margin: 0 auto; padding: 2em; display: grid; grid-template-columns: auto 1fr; grid-gap:2em; }
view { padding:0; position: relative; z-index: 99; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; margin: 0; }
button { background: var(--secondary); color:var(--font); border:0; padding:0 1em; height:3em; border-radius: 1.5em; font-family: 'Lexend', Arial, sans-serif; font-weight: 600; cursor: pointer; user-select: none; display: inline-flex; align-items: center; transition: background-color 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
button:active { transform: scale(.9); }
button i.bx-arrow-left-stroke,
button i.bx-arrow-right-stroke { font-size: 1.5em; }
button.next, .modal_window button { background: var(--primary); color:var(--tertiary); }
button:disabled, button.disabled { background: var(--quarternary); color:var(--font); opacity: 0.5; cursor: not-allowed; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], textarea, select { width: 100%; padding: 1em; border-radius: .5em; border: none; background: var(--tertiary); color: var(--font); font-family: 'Lexend', Arial, sans-serif; font-weight: 400; transition: border-color .3s ease-in-out; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
textarea { resize: none; min-height: 100px; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); background-repeat: no-repeat; background-position: right 1em center; background-size: 1em auto; }
label { font-weight: 600; display: block; }
form { user-select: none; }
form>label { margin-bottom: 1em; }
label span.required:after { content: 'krævet'; color: var(--primary); font-weight: 700; margin-left: .5em; font-size: .6em; text-transform: uppercase; vertical-align: super; }
table>tbody>tr>th, table>tbody>tr>td { text-align: left; padding: .5em 1em; }
table>tbody>tr>th:first-child, table>tbody>tr>td:first-child { padding-left: 0; }
table>tbody>tr>th:last-child, table>tbody>tr>td:last-child { padding-right: 0; }

.content { overflow-x:hidden; overflow-y:auto; max-height: calc(100vh - 112px); display: block; padding-bottom:32px; }
.p-no-margin p { margin: 0; }
.relative { position: relative; }

p.alert { color:var(--primary); font-weight: 700; margin: 1em 0; }
.swiper-wrapper { box-sizing: border-box !important; }
.swiper, .swiper-slide { transition:height .2s cubic-bezier(0.165, 0.84, 0.44, 1); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); }
.gap { gap:1em; }
.box { background: var(--quarternary); padding: 1.5em; border-radius: 1.5em; position: relative; margin:1em 0;}
.bold { font-weight:700; }
.text-center { text-align: center; }
.d-none { display: none !important; }

/* Datpicker overrides */
.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(--primary) !important; color: var(--tertiary) !important; border-color:var(--primary) !important; }

/* Details */
.detailsWrapper { margin:3em 0 2em; }
.details { display:grid; grid-template-columns: minmax(128px, 2fr) 1.5fr 1fr; grid-gap:1.5em; }
.details label { display: block; margin-bottom: 1em; font-weight: 400; }

.datepickerWrapper { position: relative; cursor:pointer; max-width:128px; }
.datepickerWrapper:after { content: '\ea15'; position: absolute; top: .45em; right: .5em; height: 100%; color: var(--primary); z-index: 1; font-size: 1.5em; text-align: center; pointer-events: none; font-family: 'boxicons'; }
.datepicker { cursor: pointer; }

.numGuestsWrapper { display: flex; flex-direction: row; align-items: center; }
.numGuestsWrapper input { width:48px; margin-right: .5em; }

.numHoursWrapper { display: flex; flex-direction: row; align-items: center; }
.numHoursWrapper input { width:48px; margin-right: .5em; }

.addressInfo label { margin: 1em 0;}
.addressInfo>div:first-child label { margin: 0 0 1em;}

.billingInfo label { margin: 1em 0;}
.billingInfo>div:first-child label { margin: 0 0 1em;}

.timeInfo label { margin: 0 0 1em; }

.contactInfo label { margin: 0 0 1em;}

/* Offer */
.offer label { margin:1em 0 0; }
.offer p { margin:0; }
.offer .grid>div { display: flex; flex-direction: column; justify-content: flex-end; }

/* Radios */
.radiobtngrp { background: var(--quarternary); border-radius: 1.5em; display:grid; grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); overflow:hidden; }
.radiobtngrp label { color: var(--font); cursor: pointer; text-align: center; padding:1em; border-right:1px solid var(--bg); user-select: none; transition: background-color .3s ease-in-out; }
.radiobtngrp label:last-child { border-right:0; }
.radiobtngrp input[type="radio"] { display: none; }
.radiobtngrp label:has(input[type="radio"]:checked) { background: var(--primary); color: var(--tertiary); }
.radiobtngrp label:has(input[type="radio"]:checked):hover { background: var(--primary); color: var(--tertiary); }

.radioiconbtns { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:1em; }
.radioiconbtns label:not(:has(input)) { margin:1em 0; grid-column: span 3; } /* Headline */
.radioiconbtns label:has(input) { font-weight: 400; cursor:pointer; background: var(--quarternary); padding: .5em; border-radius: 1em; display:flex; flex-direction: row; align-items: center; height: 4em; transition: background-color .3s ease-in-out; }
.radioiconbtns label:has(input):not(:has(.icon)) { justify-content: center; }

.radioiconbtns label:has(input:checked) { background: var(--primary); color: var(--tertiary); }
.radioiconbtns label:has(input) input { display:none; } 
.radioiconbtns label:has(input) .icon { display: inline-grid; place-items: center; width:auto; height:100%; aspect-ratio: 1; background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: .25em; }
.radioiconbtns label:has(input) .icon i { font-size: 2em; color:var(--primary); }
.radioiconbtns label:has(input:checked) .icon i { color:var(--tertiary); }

.checkboxbtns { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap:1em; }
.checkboxbtns.cols-min-128 { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.checkboxbtns label { position: relative; font-weight: 400; cursor:pointer; background: var(--quarternary); padding: 1.5em; border-radius: 1em; transition: background-color .3s ease-in-out; display: grid; grid-template-rows: auto 1fr auto; }
.checkboxbtns label:has(input:checked) { background: var(--primary); color: var(--tertiary); }
.checkboxbtns label:has(input) button { display: flex; margin:1em auto 0 auto; transition: all .3s ease-in-out; pointer-events: none; }
.checkboxbtns label:has(input) button:before { content:'Tilføj'; }
.checkboxbtns label:has(input) button:after { content:''; font-family: 'boxicons'; width:0px; overflow:hidden; transition: all .3s ease-in-out; margin-left:0;  }  
.checkboxbtns label:has(input:checked) button { background-color: var(--tertiary); color: var(--primary); }
.checkboxbtns label:has(input:checked) button:before { content:'Valgt'; }
.checkboxbtns label:has(input[data-alwaysincluded="true"]:checked) button:before { content:'Altid inkluderet'; }
.checkboxbtns label:has(input:checked) button:after { content:'\ea41'; overflow: visible; width: auto; margin-left:.5em; }
.checkboxbtns label:has(input) p { font-size: .9em; font-weight: 700; text-align: center; margin:0 0 1em; word-break: break-word; }
.checkboxbtns label:has(input) span { font-size:.9em; }
.checkboxbtns label:has(input) span p { margin:0; }
.checkboxbtns label:has(input) input { display:none; } 
.checkboxbtns label:has(input) .img { position: relative; background-color:var(--secondary); width:calc(100% + 3em); border-radius: 1em 1em 0 0; min-height:100px; aspect-ratio: 4/3; background-size: cover; margin:-1.5em -1.5em 1em -1.5em; background-repeat: no-repeat; background-position: center; }
.checkboxbtns label:has(input) .img.empty:after { content:'\ed0f'; font-family: 'boxicons'; display: block; color: var(--font); font-size: 3em; opacity: .1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.checkboxbtns label:has(input) .img .pricebadge { position: absolute; display: inline-block; bottom: -10px; left:50%; background: var(--primary); color: var(--tertiary); font-size: .7em; padding: .25em .5em; border-radius: 1em; white-space: nowrap; transform: translateX(-50%); text-align: center; }
.checkboxbtns label:has(input) .img .pricebadge:empty { display: none; }
.checkboxbtns label:has(input) .img.clickable:hover:before { content:''; display: block; background: #0003; position:absolute; top:0; left:0; width:100%; height:100%; animation: fadeIn .3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; border-radius: 1em 1em 0 0; }
.checkboxbtns label:has(input) .img.clickable:hover:after { content:'\ebf7'; font-family: 'boxicons'; display: block; color: var(--tertiary); font-size: 3em; position:absolute; top:calc(50% - 16px); left:calc(50% - 20px); animation: fadeInUp .3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; } 
.checkboxbtns label:has(input[name=terms]) button:before { content:'Accepter'; }
.checkboxbtns label:has(input[name=terms]:checked) button:before { content:'Accepteret'; }

.checkboxbtns + h3 { margin-top: 4em; }

.radiobtns label:not(:has(input)) { margin:1em 0; } /* Headline */
.radiobtns label:has(input) { font-weight: 400; cursor:pointer; display: block; padding: .5em 0; display: flex; flex-direction: row; align-items: center; }
.radiobtns label:has(input) input { display:none; }
.radiobtns label:has(input):before { content: ''; width: .75em; height: .75em; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 0 .1em var(--font); background-color: var(--tertiary); display: inline-block; margin: .25em .5em .25em; transition: all .3s ease-in-out; }
.radiobtns label:has(input:checked):before { background-color: var(--primary); border-color:var(--bg); } 

/* Checkboxes */
label:has(input[type="checkbox"]):not(:has(button)) input { display: none; }
label:has(input[type="checkbox"]):not(:has(button))>span { display: inline-block; position: relative; }
label:has(input[type="checkbox"]):not(:has(button))>span:before { cursor:pointer; content: ''; width: 1.5em; height: 1.5em; border-radius: .25em; border: .1em solid var(--secondary); box-shadow: 0 0 0 .1em var(--secondary); background-color: var(--secondary); display: inline-block; margin: .25em .5em .25em; transition: all .3s ease-in-out; }
label:has(input[type="checkbox"]:checked):not(:has(button))>span:before { background-color: var(--primary); border-color:var(--primary); box-shadow: 0 0 0 .1em var(--primary); } 
label:has(input[type="checkbox"]:checked):not(:has(button))>span:after { content: '\ea41'; font-family: 'boxicons'; color: var(--tertiary); position: absolute; top: 0; left: 0; width: 1.5em; height: 1.5em; border: .1em solid #0000; margin: .25em .5em .25em; display: grid; align-items: center; justify-content: center; transition: all .3s ease-in-out; }

/* Progress */
.progress { display: grid; grid-gap: 2em; position: relative; z-index: 1; }
.progress:has(.step2) { grid-template-rows: auto auto 1fr; } 
.progress:has(.step3) { grid-template-rows: auto auto auto 1fr; } 
.progress:has(.step4) { grid-template-rows: auto auto auto auto 1fr; } 
.progress:after { content:''; position: absolute; right:24px; width:1px; height:95%; top:5%; background: var(--font); opacity: .25; z-index: -1; }
.progress>div { display: grid; grid-template-columns: 1fr auto; grid-gap:1em; place-items: center end; }
.progress>div .text { text-align: end; }
.progress>div .icon { display:grid; place-items: center; font-size:28px; width:1.75em; aspect-ratio: 1; border-radius: 50%; border:.05em solid var(--font); background-color:var(--bg); background-position: center center; background-repeat: no-repeat; background-size: contain; background-origin: content-box; position: relative; z-index: 1; transition: all .3s ease-in-out; }
.progress>div:not(.active):has(~ .active) .icon { background-color: var(--primary); color: var(--tertiary); }
.progress>div.active .icon { border-color:var(--primary); border-width: .1em; }
.progress>div.active .iconwrapper { position: relative; }
.progress>div.active .iconwrapper:after { content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; border-radius: 50%; background-color: var(--primary); opacity: 0.25; z-index: -2; animation:pulse 2s infinite; }

/* Steps */
.steps { width:100%; min-width: 0; overflow: hidden !important; }

/* Regions */
.grid:has(.regionImage) { grid-template-columns: auto 1fr; }
.grid:has(.regionImage) label:not(:has(input)) { margin:1em 0; grid-column: span 2; } /* Headline */
.regionImage { background: url('../standard/map.svg') no-repeat center center; background-size: contain; position: relative; z-index: 1; }
.selectedRegionImage { width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 2; background: url('../standard/map.svg') no-repeat center center; background-size: contain; }

/* Searchinput */ 
.searchinput-wrapper { position: relative; }
.searchinput-results { position: absolute;
    top: calc(100% - 12px);
    left: 0;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--bg);
    border-top: 0;
    border-radius: .5em .5em;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    padding: 0;
    box-shadow: 0 5px 5px 0 #0002; }
.searchinput-results li { padding: .5em 1em; margin:0; position: relative; list-style: none; }
.searchinput-results li:nth-child(odd) { background: var(--tertiary); }
.searchinput-results li.clickable:hover { background: var(--quarternary); }

/* Nav buttons */
.navbuttons { display: flex; justify-content: space-between; align-items: center; margin:1em 0 0; position: relative; }
.navbuttons:before { content: ''; position: absolute; top: -64px; left: 0; width: 100%; height: 50px; background: linear-gradient(to top, var(--bg), transparent); z-index: 1; pointer-events: none; }

/* Animations */ 
[a="fadeIn"] { animation: fadeIn 3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; opacity: 0; }
[a="fadeInDown"] { animation: fadeInDown .2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; opacity: 0; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modalOpen { from { opacity: 0; transform: translate3d(0, 25%, 0); } to { opacity: 1; transform: none; } }
@keyframes modalClose { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 25%, 0); } }

/* Modal */
.modal_bg { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; display: none; z-index: 1000; }
.modal_window.fixed { border-radius:0; }
.modal_window.fixed .scrollable { padding-right: 24px; margin-right: -24px; }
.modal_window_open_animation { animation-duration: .25s; animation-fill-mode: both; animation-name: modalOpen; }
.modal_window_close_animation { animation-duration: .25s; animation-fill-mode: both; animation-name: modalClose; }
.modal_noscroll { position: fixed; width: 100%; overflow-y: hidden; }
.modal_noscroll.modal_scrollbars { overflow-y: scroll; }
.modal_buttons { text-align: center; margin: 0 -10px; }
.modal_button_wrapper { margin: 20px -14px -24px -14px; padding: 20px; background: var(--bg); border-radius: 0 0 10px 10px; }
.modal_buttons button { display:inline-block; }
.modal_window img { max-width:100%; height:auto; }
.modal_window { top:50%; left:50%; width:100%; position: absolute; background: var(--tertiary); padding: 24px; min-width: 200px; min-height: 32px; z-index: 1001; box-shadow: 0px 0px 200px 0px rgba(0, 0, 0, 0.05); border-radius: 10px; transform: translatez(0); display:none; }
.modal_top_image {     background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 3;
    margin: -24px -24px 24px;
    border-radius: 10px 10px 0 0; }

/* Toast */
.toast_window { position:absolute; width:100%; background: var(--primary); color:var(--tertiary); padding:16px 12px; text-align:center; z-index:99999; top:0; }

/* Media queries */
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100%; }  
  .content { max-height: calc(100vh - 190px); }
  .progress { grid-template-rows: auto !important; }  
  .progress:after { height:1px; top:50%; }
  .progress:has(.step2) { grid-template-columns: auto auto; }  
  .progress:has(.step2):after { width:100%; left:0; }
  .progress:has(.step3) { grid-template-columns: auto 1fr auto; }  
  .progress:has(.step3):after { width:80%; left:10%; }
  .progress:has(.step4) { grid-template-columns: auto auto auto auto; }  
  .progress:has(.step4):after { width:80%; left:10%; }
  .progress>div { grid-template-columns: auto; place-items: center; }
  .progress>div .text { display: none; }
  .progress>div .icon { width:1.8em; }
  .radioiconbtns { grid-template-columns: 1fr 1fr; font-size:.8em; }
  .radioiconbtns label:not(:has(input)) { grid-column: span 2; }
  .details { grid-template-columns: 1.2fr 1fr; }
  .details>div:first-child { grid-column: span 2; border-bottom:1px solid var(--secondary); padding-bottom: 2em; }
  .grid { display: block;}

  .timeInfo div:last-child label { margin: 1em 0; }
  .contactInfo div:last-child label { margin: 1em 0; }
}