:root{
  --brand-primary:#E8141D;
  --brand-primary-hover:#444141;


  --color-range-start:var(--brand-primary);
  --color-range-end:color-mix(in srgb, var(--brand-primary) 40%, white);
  --color-range-middle:color-mix(in srgb, var(--brand-primary) 20%, white);
  --color-pending:rgba(255,200,0,.25);
  --color-confirmed:rgba(67,67,67,.45);
  --text-light:#fff;
  --text-dark:#000;
}
#booking-step1,#booking-step2,#booking-step3,#booking-step4{display:none}
#booking-step1.active,#booking-step2.active,#booking-step3.active,#booking-step4.active{display:block}

.booking-card{border-radius:16px;box-shadow:0 0 0 rgba(0,0,0,.08);background:#fff;text-align:left}
.booking-input,.booking-textarea,.booking-button{width:100%;padding:10px;margin:5px 0;border-radius:8px;border:1px solid #ccc;font-size:15px}
.booking-button{background:var(--brand-primary);color:var(--text-light);border:none;cursor:pointer;transition:ease-in-out .2s}
.booking-button:hover{background:var(--brand-primary-hover)}
.booking-button.gray{background:#ccc;color:#333}
.booking-checkbox{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:15px;line-height:1.4}
.booking-checkbox input[type="checkbox"]{width:18px;height:18px;accent-color:var(--brand-primary);cursor:pointer}
.booking-checkbox a{color:var(--brand-primary);margin-left:-4px}
.booking-input select,select.booking-input{color:#757575}
select.booking-input:valid{color:#000}
select.booking-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,#999 50%),linear-gradient(135deg,#999 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 11px) 50%;background-size:6px 6px;background-repeat:no-repeat}

.flatpickr-calendar{width:100%!important;max-width:100%!important;box-shadow:none!important;border:none!important}
.flatpickr-innerContainer{display:flex;justify-content:center;width:100%}
.flatpickr-months{position:relative;margin-bottom:18px;padding-bottom:8px}
.flatpickr-months::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#eee}
.flatpickr-current-month{font-weight:600}
.flatpickr-rContainer,.flatpickr-weekdays,.flatpickr-days,.dayContainer{width:100%!important;min-width:100%!important;max-width:100%!important}
.flatpickr-weekdays,.flatpickr-days{display:flex;flex-wrap:wrap}
.flatpickr-day{flex:1 0 calc(100% / 7);max-width:calc(100% / 7);height:40px;line-height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.flatpickr-day.pending-day,.flatpickr-day.confirmed-day{color:var(--text-dark)!important;opacity:1!important;transform:scale(.9)}
.flatpickr-day.pending-day{background:var(--color-pending)!important}
.flatpickr-day.confirmed-day{background:var(--color-confirmed)!important;font-weight:500}
.flatpickr-day.startRange,.flatpickr-day.startRange:hover,.flatpickr-day.startRange:focus,.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus{background:var(--color-range-start)!important;border-color:var(--color-range-start)!important;color:var(--text-light)!important;transform:scale(.9)}
.flatpickr-day.endRange,.flatpickr-day.endRange:hover,.flatpickr-day.endRange:focus{background:var(--color-range-end)!important;border-color:var(--color-range-start)!important;color:var(--text-dark)!important;transform:scale(.9)}
.flatpickr-day.inRange,.flatpickr-day.inRange:hover,.flatpickr-day.inRange:focus{background:var(--color-range-middle)!important;border-color:var(--color-range-start)!important;color:var(--text-dark)!important;transform:scale(.9)}
.flatpickr-day.startRange + .endRange{box-shadow:-10px 0 0 var(--color-range-middle)!important;transform:scale(.9)}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Viktig: nullstill bredde her */
.form-row .booking-input {
  width: 100%;
  box-sizing: border-box;
}
.booking-input,
.booking-textarea,
.booking-button {
  box-sizing: border-box;
}

.flatpickr-day.special-price-day{
  position:relative;
}

.flatpickr-day.special-price-day::after{
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#E8141D;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(232,20,29,.25);
}

#booking-step2 > h4,
 #booking-step2 > p {
	text-align: center;
}

#bookingForm {
	margin-top: 1rem;
}