label.align-tilvalg{
	display:flex !important;
}        
.form-error{
	color: red; 
    margin-bottom: 15px;        
}
.birthday-booking-form {
    width: 100%;
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.form-group {
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: none;
    height: 100%;
}
.form-group .rows {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
.form-group .column {
    width: 50%;
}
@media only screen and (max-width: 600px) {
    .form-group .rows {
        flex-direction: column;
        gap: 0;
    }
    .form-group .column {
        width: 100%;
    }
}
.form-group.visible {
    display: block;
}
#skojter {
    display: none;
}
#skojter.visible {
    display: block;
}
.form-group label {
    font-size: 14px;
    font-weight: 500;
    left: 0rem!important;
    position: relative;
    display: block;
}
.form-group label:not(label.align-tilvalg) {
    margin: 0.5rem 0!important;
}
.birthday-booking-form .booking-field {
    margin-bottom: 5px;
}
.booking-field.price {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 1rem 0;
    margin-bottom: 1rem;
    font-weight: bold;
}
.birthday-booking-form label {
    margin-bottom: 10px;
}

.birthday-booking-form input[type="number"],
.birthday-booking-form input[type="text"],
.birthday-booking-form input[type="time"],
.birthday-booking-form select,
.birthday-booking-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.birthday-booking-form input[type="checkbox"] {
    margin-right: 8px;
}

.birthday-booking-form button {
    background-color: #67e6c3;
    color: #000;
    padding: 12px 24px;
    border-radius: 8px;
}
.birthday-booking-form button:hover {
    background-color: #5cd8b7;
}

.woocommerce-invalid {
    border-color: red !important;
}
.booking-calendar {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
}
.booking-calendar::after {
    content: 'Indlæser datoer...';
    color: #000;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background: white;
    opacity: 0;
    transition: .3s ease-in-out;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.booking-calendar.loading::after {
    opacity: 1;
}
.booking-day:hover,
.booking-day.selected {
    background-color: #c7f3e8;
    border-color: #c7f3e8;
}
.booking-day strong,
.booking-day p,
.booking-day span {
    pointer-events: none;
}
#booking-timeslots {
    margin-top: 1rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
#booking-timeslots::after {
    content: 'Indlæser tidspunkter...';
    color: #000;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background: white;
    opacity: 0;
    transition: .3s ease-in-out;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#booking-timeslots.loading::after {
    opacity: 1;
}
#booking-timeslots label {
    display: block;
    width: 100%;
}
.timeslot {
    margin: 0.25rem;
    background: #67e6c3;
    color: #000!important;
    cursor: pointer;
    border-radius: 5px;
    width: 75px;
    height: 38px;
    display: inline-block;
    text-align: center;
    line-height: 38px;
}

.timeslot:hover {
    background: #5cd8b7;
}
.timeslot.selected {
    background: #000;
    color: #fff!important;
    display: inline-block;
    padding: 0;
}

.booking-day.disabled,
.timeslot.disabled {
    opacity: 0.5;
    pointer-events: none;
}
li.calendar-controls {
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin-top: 1rem;
}
li.calendar-controls span {
    background: #67e6c3;
    color: #000 !important;
    cursor: pointer;
    border-radius: 5px;
    padding: 0 0.5rem;
    width: auto;
    height: 38px;
    display: inline-block;
    text-align: center;
    line-height: 38px;
}
/*****/

.birthday {
    flex: 1;
    margin-top: 0;
    position: relative;
    width: 100%;
}
.birthday .list {
    flex: 3;
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}
.birthday .list .loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 99999;
    opacity: 1;
    pointer-events: all;
    transition: .3s ease-in-out;
}
.birthday .list.loaded .loader {
    opacity: 0;
    pointer-events: none;
}
.birthday h2 {
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}
.birthday ul {
    padding: 0;
    margin: 0;
}
.event-list {
    list-style: none;
    padding: 1.5rem;
    margin: 0;
}
li.booking-day {
    position: relative;
    background: white;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(4px);
    margin-bottom: 1rem;
    cursor: pointer;
    width: 100%;
    border-top: 1px solid #e1e1e1!important;
    padding: 1rem;
    margin: 0;
}
li.booking-day.selected {
    border: none!important;
    border-radius: 8px;
}
li.booking-day .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    position: relative;
    z-index: 999;
}
li.booking-day .icon {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 100%;
    border: 1px solid #eee;
    transition: .2s ease-in-out;
    flex-shrink: 0;
    margin-left: 1rem;
}
li.booking-day .icon .check-icon {
    display: none;
    fill: #fff;
    padding: 2px;
}
li.booking-day.selected .icon {
    border-color: #000;
    background: #000;
}
li.booking-day.selected .icon .check-icon {
    display: block;
}
li.booking-day .status.no-tickets {
    color: #eee;
}
li.booking-day .status {
    color: #67e6c3;
    font-weight: bold;
}
.event-list {
    display: flex;
    flex-direction: column;
}

.event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 8px;
}
.event-row.odd {
    background: #fff;
}
.event-row.even {
    background: rgba(137, 206, 235, 0.1);
}
.event-row .title {
    flex: 3;
    margin: 0;
    font-weight: 600;
}
.event-row .count {
    flex: 2;
    font-weight: 600;
    color: #67e6c3;
}
.event-row.no-tickets .count {
    color: #eee;
}
.event-row .signup {
    flex: 1;
}
.weekday {
    color: #000;
    font-weight: bold;
    padding: 0px 15px;
}
.arrow-icon {
    width: 14px;
    height: 14px;
    fill: black;
}
.event-row .signup a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    text-decoration: none;
    color: #000!important;
    cursor: pointer;
    font-weight: 600;
}
.signup-button {
    background-color: #87CEFA;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
    border: none;
    cursor: pointer;
}

.signup-button:hover {
    background-color: #47E3FF;
}
.birthday label {
    position: relative;
    left: 1rem;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}
.birthday .toggle {
    background: white;
    width: 100%;
    font-weight: 500;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    border: 1px solid #ccc;
}
.birthday:has(ul.open) .toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid black;
    border-bottom: 0;
    }
.toggle .selected {
    display: flex;
    justify-content: space-between;
}
.birthday ul.list {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: -1;
}
.birthday ul.list.open {
    opacity: 1;
    pointer-events: all;
    z-index: 999;
    border: 1px solid black;
    border-top: 0;
    border-radius: 0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.count svg {
        width: 16px;
        height: 16px;
        position: relative;
        top: 3px;
    }
/* Skift layout */
@media only screen and (max-width: 600px) {
    .birthday .toggle {
        font-size: 14px;
    }
    li.booking-day {
        font-size: 14px;
    }
    li.booking-day:last-child {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    li.booking-day .title {
        margin: 0;
    }
    li.booking-day .status {
        font-size: 12px;
    }
    li.booking-day .icon {
        top: 8px;
    }
    .weekday {
        padding: 0;
        margin: 0px 5px;
    }
    .form-group label {
        font-size: 14px;
    }
    .event-row {
        padding: 5px;
        position: relative;
        font-size: 12px;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: flex-start;
        flex-direction: column-reverse!important;
    }
    .event-row .signup {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
    }
    .signup span {
        display: none;
    }
    .timeslot {
        width: calc(25% - 0.50rem);
    }
}
#booking-days {
    display: none;
}
#booking-days.visible {
    display: block;
}
.page-id-3230 #booing-days {
    display: block;
}
.custom-dropdown {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
  font-family: inherit;
}

.custom-dropdown-selected {
    position: relative;
    background: white;
    width: 100%;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
}

.custom-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  z-index: 100;
  display: none;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-dropdown-options.open {
  display: block;
}

.custom-dropdown-options li {
  padding: 0.75em 1em;
  cursor: pointer;
}

.custom-dropdown-options li:hover {
  background: #f0f0f0;
}

.dropdown-arrow {
  margin-left: 1em;
  pointer-events: none;
  width: 24px;
  height: 24px;
  position: relative;
  top: 3px;
  border-radius: -6px;
}

.custom-dropdown-options {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.custom-dropdown-options.open {
  display: block;
}

.custom-dropdown-options li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1em;
  cursor: pointer;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.custom-dropdown-options li:hover {
  background-color: #f0f0f0;
}

.dropdown-item-icon {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 100%;
    border: 1px solid #eee;
    transition: .2s ease-in-out;
    flex-shrink: 0;
    margin-left: 1rem;
    padding: 3px;
}
.dropdown-item-icon path {
    fill: #fff;
    opacity: 0;
}
.custom-dropdown-options li.selected-item .dropdown-item-icon {
    background: #000;
}
.custom-dropdown-options li.selected-item .dropdown-item-icon path {
    opacity: 1;
}

/* ===== SKOJTEHAL FORM: visual parity with birthday form ===== */

/* Form container parity */
.skoj-form {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
}

/* Field groups (your skoj form uses plain blocks, so mirror .form-group) */
.skoj-form .skoj-fields,
.skoj-form .form-group { 
  background: #fff;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Labels & spacing */
.skoj-form label {
  font-size: 14px;
  font-weight: 500;
  position: relative;
  display: block;
  margin: 0.5rem 0 !important;
}

/* Inputs */
.skoj-form input[type="number"],
.skoj-form input[type="text"],
.skoj-form input[type="email"],
.skoj-form input[type="time"],
.skoj-form select,
.skoj-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* Submit button */
.skoj-form .skoj-submit {
  background-color: #ff9697;
  color: #000;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
}
.skoj-form .skoj-submit:hover {
  background-color: #eb6c6d;
}

/* Error text */
.skoj-form .form-error,
#skoj-error { 
  color: red; 
  margin-bottom: 15px; 
}

/* Calendar/dropdown shell — mirror your .birthday block */
.skoj-form .birthday {
  flex: 1;
  margin-top: 0;
  position: relative;
  width: 100%;
}
.skoj-form .birthday label {
  left: 1rem;
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
}

/* The “selected” header should look like your custom dropdown trigger */
.skoj-form .birthday .toggle {
  background: #fff;
  width: 100%;
  font-weight: 500;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  border: 1px solid #ccc;
}
.skoj-form .toggle .selected {
  display: flex;
  justify-content: space-between;
}

/* Match open state (seamless join) */
.skoj-form .birthday:has(ul.open) .toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #000;
  border-bottom: 0;
}

/* Dropdown list container */
.skoj-form .birthday .list {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

/* The floating dropdown list */
.skoj-form .birthday ul.list {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: -1;
}
.skoj-form .birthday ul.list.open {
  opacity: 1;
  pointer-events: all;
  z-index: 999;
  border: 1px solid #000;
  border-top: 0;
  border-radius: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Day item */
.skoj-form li.booking-day {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  margin: 0;
  cursor: pointer;
  width: 100%;
  border-top: 1px solid #e1e1e1 !important;
  padding: 1rem;
}
.skoj-form li.booking-day:hover,
.skoj-form li.booking-day.selected {
  background-color: #ff9697;
  border-color: #ff9697;
}
.skoj-form li.booking-day.selected {
  border: none !important;
  border-radius: 8px;
}

/* Day title row + check icon parity */
.skoj-form li.booking-day .title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.skoj-form li.booking-day .icon {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  transition: .2s ease-in-out;
  flex-shrink: 0;
  margin-left: 1rem;
}
.skoj-form li.booking-day .icon .check-icon { display: none; fill: #fff; padding: 2px; }
.skoj-form li.booking-day.selected .icon { border-color: #000; background: #000; }
.skoj-form li.booking-day.selected .icon .check-icon { display: block; }

/* Loader states (same as birthday) */
.skoj-form .booking-calendar { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; }
.skoj-form .booking-calendar::after {
  content: 'Indlæser datoer...';
  color: #000;
  position: absolute; inset: 0;
  z-index: 99; background: #fff;
  opacity: 0; transition: .3s ease-in-out;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.skoj-form .booking-calendar.loading::after { opacity: 1; }

/* Timeslots */
.skoj-form #booking-timeslots {
  margin-top: 1rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.skoj-form #booking-timeslots::after {
  content: 'Indlæser tidspunkter...';
  color: #000;
  position: absolute; inset: 0;
  z-index: 99; background: #fff;
  opacity: 0; transition: .3s ease-in-out;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.skoj-form #booking-timeslots.loading::after { opacity: 1; }
.skoj-form #booking-timeslots label { display: block; width: 100%; }

/* Timeslot buttons (match color/hover/selected) */
.skoj-form .timeslot {
  margin: 0.25rem;
  padding: 0.25rem 1.25rem;
  background: #ff9697;
  font-weight: 600;
  color: #000 !important;
  cursor: pointer;
  border-radius: 5px;
  width: auto;
  min-width: 100px;
  height: auto;
  display: inline-block;
  text-align: center;
  line-height: 24px;
}
.skoj-form .timeslot div {
    font-size: 0.8rem;
    font-weight: 400;
}
.skoj-form .timeslot:hover { background: #eb6c6d; }
.skoj-form .timeslot.selected {
  background: #000;
  color: #fff !important;
}

/* Prev/next week controls */
.skoj-form li.calendar-controls {
  display: flex; list-style: none; justify-content: space-between; margin-top: 1rem;
}
.skoj-form li.calendar-controls span {
  background: #ff9697; color: #000 !important;
  cursor: pointer; border-radius: 5px; padding: 0 0.5rem;
  width: auto; height: 38px; line-height: 38px; display: inline-block;
}

/* Mobile tweaks – mirror birthday */
@media only screen and (max-width: 600px) {
  .skoj-form .birthday .toggle { font-size: 14px; }
  .skoj-form li.booking-day { font-size: 14px; }
  .skoj-form li.booking-day .status { font-size: 12px; }
  .skoj-form .timeslot { width: calc(25% - 0.5rem); }
}

/* Show the day picker when needed (you already toggle .visible in JS) */
#booking-days { display: none; }
#booking-days.visible { display: block; }

#slot-bookings { 
    margin-top: 1rem; 
}
.bookings-head { 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
}
.bookings-list { 
    list-style: none; 
    margin: 0; 
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.bookings-list li { 
    margin: 0.25rem;
    padding: 0.25rem 1.25rem;
    background: #ededed;
    border-radius: 5px;
}
.bookings-list li strong {
    display: block;
}
.booking-line .booking-time {
    font-size: 0.8rem;
}
.bookings-empty, 
.bookings-loading, 
.bookings-error { 
    color: #555; 
    font-size: 14px; 
}
/* Prevent background scroll when modal is open */
.skoj-modal-open { overflow: hidden; }

/* Backdrop */
.skoj-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(12px);
}
.skoj-modal.show { display: flex; }

/* Panel */
.skoj-modal__panel {
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  width: min(560px, calc(100% - 32px));
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  position: relative;
  text-align: left;
}
.skoj-modal__panel h2 {
  margin: 0 0 8px;
  font-size: 22px;
  color: #000!important;
}
.skoj-modal__panel p {
  margin: 0 0 8px;
  line-height: 1.6;
}

/* Close button */
.skoj-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #000;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: .3s ease-in-out;
}
.skoj-modal__close:hover { background: #797979; }

/* Optional: emphasize CTA color to match your theme */
.skoj-modal__panel h2 + p { color: #000; }
/* Hidden by default */
.skoj-details {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}

/* Shown once a timeslot is selected */
.skoj-details.show {
  display: block;
  opacity: 1;
  transform: none;
}