/* ==========================================================================
   Zotter Reservation System - Custom CSS
   ========================================================================== */


/* --------------------------------------------------------------------------
   Wizard extras (TYPO3 plugin / config notice)
   -------------------------------------------------------------------------- */
   .wizard-inline-error {
    color: #b00020;
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
}

.dev-res-wizard-config-notice {
    max-width: 720px;
    margin: 1rem auto;
    padding: 1rem 1.25rem;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
}

.capacity-empty {
    font-size: 0.875rem;
    color: #777;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Reservation Stepper Navigation
   -------------------------------------------------------------------------- */
.reservation-stepper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 20px 0;
    margin-left: auto;
    width: 66%;
    gap: 0;
    position: relative;
    z-index: 2;
}

.reservation-stepper .stepper-step {
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.reservation-stepper .stepper-step i {
    font-size: 0.85rem;
    margin-right:10px;
}

.reservation-stepper .stepper-step .stepper-arrow {
    margin-left: 12px;
    font-size: 0.7rem;
    position:relative;
    top:1px;
}

.reservation-stepper .stepper-step.active {
    background-color: #000000;
    color: #ffffff;
}

.reservation-stepper .stepper-step.active i {
    color: #ffffff;
}

.reservation-stepper .stepper-step.completed {
    color: #000000;
    cursor: pointer;
}

.reservation-stepper .stepper-step.completed:hover {
    opacity: 0.7;
}

.reservation-stepper .stepper-step.disabled {
    color: #000000;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reservation Layout
   -------------------------------------------------------------------------- */
.reservation-wrapper {
    padding-top: 0;
}

.reservation-section {
    position: relative;
    overflow: hidden;
}

.reservation-section > .container {
    position: relative;
    z-index: 1;
}

/* Sidebar background removed - no yellow/cream background per design */

.reservation-sidebar {
    position: relative;
    z-index: 1;
}

.reservation-content {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Sidebar - Tour Info Card
   -------------------------------------------------------------------------- */
.tour-info-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
}
.tour-info-card .skew1 {
  position: relative;
  top: 0px;
  display: block;
  width: 100%;
  height: 40px;
}

.tour-info-card .tour-info-body {
    margin:20px;
    padding:15px;
    background:#eeeeee;
    border-radius:5px;
}
.tour-info-card .tour-info-body p{
    margin-bottom:0 !important;
}



.tour-info-card .tour-info-heading {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0.5em;
}

.tour-info-card .tour-title,
.tour-info-card .buttontooltip {
    font-family: 'FuturaBT-Book', 'IBM Plex Sans', sans-serif;
    color: #000000;
    font-weight: 400;
    font-style: normal;
}

.tour-info-card .tour-title {
    flex: 1;
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.1em;
}

.tour-info-card .buttontooltip,
.tour-info-card .tour-info-tooltip-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
}

.tour-info-card .buttontooltip i,
.tour-info-card .tour-info-tooltip-btn i {
    font-size: 1.4rem;
    font-style: normal;
}


.tour-info-card .tour-description {
    font-size: 0.85rem;
    color: #444444;
    line-height: 1.5;
    margin-bottom: 15px;
}

.tour-info-card .tour-link {
    font-size: 0.85rem;
    margin-left:20px;
}


.tour-info-card .tour-link i {
    margin-right: 4px;
    font-size: 0.75rem;
}

/* Sidebar selected info */
.tour-info-card .selected-info {
    margin: 15px 20px;
    background-color: #EEEEEE;
    padding:15px 15px 5px 15px;
    border-radius:5px;
}


.tour-info-card .selected-date {
    font-size: 1.6rem;
    font-size:24px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 10px;
}

.tour-info-card .selected-visitors {
    font-size: 1.6rem;
    font-size:24px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 5px;
}

.tour-info-card .selected-note {
    font-size: 0.8rem;
    color: #444444;
    line-height: 1.4;
}
.tour-info-card .selected-visitortype{
    line-height: 1.7;
}
.tour-info-card .selected-visitortype span {
    font-size: 0.8rem;
    color: #444444;
    line-height: 1.4;
}

/* Sidebar separator and links */
.tour-info-card .sidebar-separator {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0 20px;
}

.tour-info-card .sidebar-section {
    padding: 15px 20px;
}

.sidebar-pricelist__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0;
    user-select: none;
}

.sidebar-pricelist__summary::-webkit-details-marker {
    display: none;
}

.sidebar-pricelist__summary::after {
    content: "";
    flex-shrink: 0;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #000;
    transition: transform 0.2s ease;
}

.sidebar-pricelist[open] > .sidebar-pricelist__summary::after {
    transform: rotate(180deg);
}

.sidebar-pricelist__heading {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.sidebar-pricelist__body {
    margin-top: 8px;
}

.sidebar-pricelist__hint,
.sidebar-pricelist__caption {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.4;
    margin: 0 0 10px;
}

.sidebar-pricelist:not([data-layout="group"]) .sidebar-pricelist__caption {
    display: none;
}

.sidebar-pricelist__list {
    margin: 0;
}

.sidebar-pricelist__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8rem;
}

.sidebar-pricelist__table col.sidebar-pricelist__col-tier {
    width: auto;
}

.sidebar-pricelist__table col.sidebar-pricelist__col-offline,
.sidebar-pricelist__table col.sidebar-pricelist__col-group,
.sidebar-pricelist__table col.sidebar-pricelist__col-online {
    width: 4.75rem;
}

.sidebar-pricelist__table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    color: #666;
    text-align: right;
    padding: 0 0 6px 6px;
    vertical-align: bottom;
}

.sidebar-pricelist__table thead th.sidebar-pricelist__col-tier {
    width: auto;
    text-align: left;
    padding-left: 0;
}

.sidebar-pricelist__table tbody th,
.sidebar-pricelist__table tbody td {
    padding: 4px 0 4px 6px;
    vertical-align: top;
    line-height: 1.35;
}

.sidebar-pricelist__table tbody th {
    font-weight: 500;
    text-align: left;
    padding-left: 0;
    padding-right: 8px;
}

.sidebar-pricelist__table tbody td {
    text-align: right;
    white-space: nowrap;
}

.sidebar-pricelist__table tbody tr:last-child th,
.sidebar-pricelist__table tbody tr:last-child td {
    padding-bottom: 0;
}

.sidebar-pricelist__table .sidebar-pricelist__amount {
    display: table-cell;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: right;
    vertical-align: top;
}

.sidebar-pricelist__row {
    margin: 0;
}

.sidebar-pricelist__tier {
    margin-bottom: 10px;
}

.sidebar-pricelist[data-mode="single"] .sidebar-pricelist__tier,
.sidebar-pricelist[data-layout="group"] .sidebar-pricelist__tier {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}

.sidebar-pricelist[data-mode="single"] .sidebar-pricelist__tier:last-child,
.sidebar-pricelist[data-layout="group"] .sidebar-pricelist__tier:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-pricelist__tier:last-child {
    margin-bottom: 0;
}

.sidebar-pricelist__label {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 4px;
}

.sidebar-pricelist[data-mode="single"] .sidebar-pricelist__label,
.sidebar-pricelist[data-layout="group"] .sidebar-pricelist__label {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.sidebar-pricelist__prices {
    display: flex;
    gap: 6px;
    margin: 0;
}

.sidebar-pricelist[data-mode="single"] .sidebar-pricelist__prices,
.sidebar-pricelist[data-layout="group"] .sidebar-pricelist__prices {
    flex-shrink: 0;
    margin: 0;
}

.sidebar-pricelist__pill {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    background: #f5f5f5;
    border-radius: 4px;
}

.sidebar-pricelist__channel {
    display: block;
    font-size: 0.7rem;
    color: #666;
}

.sidebar-pricelist__amount {
    font-size: 0.85rem;
    font-weight: 500;
    text-align: right;
}

.sidebar-pricelist__pill .sidebar-pricelist__amount {
    display: block;
}

.sidebar-pricelist__amount--inline {
    white-space: nowrap;
}

.sidebar-pricelist__empty {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
}

@media (max-width: 359px) {
    .sidebar-pricelist__amount {
        font-size: 0.8rem;
    }
}

/* Custom dropdown arrow (native + form-control use appearance:none) */
.select {
    display: block;
    position: relative;
    width: 100%;
}

.select::after,
.reservation-wrapper .select::after,
#group-inquiry-root .select::after,
.ticket-checkout .select::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -1px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #000;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.select select.form-control {
    width: 100%;
    padding-right: 2.25rem;
}

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.tour-info-card .restart-link {
    font-size: 0.85rem;
}


/* --------------------------------------------------------------------------
   Visitor Count Section
   -------------------------------------------------------------------------- */
.visitor-count-section {
    margin-bottom: 30px;
}

.visitor-count-section h3 {
    color: #000000;
}

.visitor-count-controls {
    display: flex;
    align-items: center;
    gap: 0;
}

.visitor-count-controls.ticket-types{
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
}

.visitor-count-controls.ticket-types .form-group {
    display: contents;
}

.visitor-count-controls.ticket-types .form-group label {
    grid-column: 1 / -1;
    grid-row: 1;
    display: block;
    text-align: left;
    margin: 0;
    font-size: 0.95rem;
}

.visitor-count-controls.ticket-types > .count-btn:first-child {
    grid-column: 1;
    grid-row: 2;
}

.visitor-count-controls.ticket-types > .count-btn:last-child {
    grid-column: 3;
    grid-row: 2;
}

.visitor-count-controls.ticket-types .count-input {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
}

.tier-input-col {
    margin-bottom: 12px;
}
.visitor-count-controls .count-btn {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 40px;
    height: 40px;
    border:none;
    background: #ffffff;
    color: #333333;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.visitor-count-controls .count-btn:hover {
    border-color: #000000;
    color: #000000;
}

.visitor-count-controls .count-btn:disabled {
    border-color: #dddddd;
    color: #dddddd;
    cursor: not-allowed;
}

.visitor-count-controls .count-input {
    width: 190px;
    height: 40px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    text-align: center;
    font-size: 1rem;
    color: #333333;
    margin: 0 10px;
    padding: 0 10px;
}
.visitor-count-controls.ticket-types label span{
    text-align:left;
    font-size:0.85rem;
    color:#444444;
}

.visitor-count-controls.ticket-types .count-input {
    height: 40px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    text-align: center;
    font-size: 1rem;
    color: #333333;
    padding: 0 10px;
}

.visitor-count-controls .count-input::placeholder {
    color: #bbbbbb;
    font-size: 0.9rem;
}

.visitor-count-controls .count-input:focus {
    outline: none;
    border-color: #FCC942;
    box-shadow: 0 0 0 2px rgba(252, 201, 66, 0.25);
}

/* --------------------------------------------------------------------------
   Calendar Section
   -------------------------------------------------------------------------- */
.calendar-section {
    margin-bottom: 30px;
    transition: opacity 0.3s ease;
}

.calendar-section.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.calendar-section h3 {
    color: #000000;
    margin-bottom: 20px;
}

.calendar-section.disabled h2 {
    color: #cccccc;
}


.calendar-panel {
    position: relative;
}

.calendar-section.is-loading .calendar-panel .calendar-nav,
.calendar-section.is-loading .calendar-panel .calendar-grid,
.calendar-section.is-loading .calendar-panel .calendar-legend {
    opacity: 0.4;
    filter: grayscale(0.35);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.calendar-section.is-loading .calendar-panel {
    pointer-events: none;
}

.calendar-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
}

.calendar-loading[hidden] {
    display: none !important;
}

.calendar-loading__spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #333333;
    text-align: center;
}

.calendar-loading__spinner .fa-spinner {
    font-size: 2.5rem;
    color: #000000;
}

.calendar-loading__text {
    font-size: 0.95rem;
    font-weight: 600;
} 

/* Calendar Navigation */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 15px 0;
    background:#eeeeee;
}

.calendar-nav .nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #333333;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0;
}

.calendar-nav .nav-arrow:hover {
    color: #000000;
}

.calendar-nav .month-year-selects {
    display: flex;
    gap: 15px;
    flex: 1;
    justify-content: center;
}

.calendar-nav .month-select,
.calendar-nav .year-select {
    padding: 8px 35px 8px 15px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #333333;
    background-color: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.calendar-nav .month-select {
    min-width: 180px;
    width:50%;
}

.calendar-nav .year-select {
    min-width: 120px;
    width:50%;
}

/* Calendar Grid */
.calendar-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background:#eeeeee;
    padding-bottom:15px;
}

.calendar-grid thead th {
    text-align: center;
    padding: 10px 5px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333333;
    border-bottom: 1px solid #eeeeee;
}

.calendar-grid tbody td {
    text-align: center;
    padding: 8px 5px;
    vertical-align: top;
    height: 60px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.calendar-grid tbody td:hover {
    background-color: #f9f9f9;
}

.calendar-grid tbody td.empty {
    cursor: default;
}

.calendar-grid tbody td.empty:hover {
    background-color: transparent;
}
.calendar-grid tbody td.unavailable,
.calendar-grid tbody td.past {
    cursor: default;
    pointer-events: none;
}
.calendar-grid tbody td.unavailable:hover,
.calendar-grid tbody td.past:hover {
    background-color: transparent;
}
.calendar-grid tbody td.past .day-number {
    color: #bbbbbb;
}
.calendar-grid .day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 35px;
    font-size: 0.95rem;
    font-weight: 400;
    color: #333333;
    margin: 0 auto;
    background-color: transparent;
    border-radius: 5px 5px 0 0;
}

.calendar-grid td.selected {
    background-color: transparent;
}

.calendar-grid td.selected .day-number {
    background-color: #444444;
    color: #ffffff;
    font-weight: 700;
}

.calendar-grid td.selected span.availability-dot{
    background:#444444;
    width:60px;
    height:25px;
    border-radius: 0px 0px 5px 5px;
}

.calendar-grid td.today .day-number {
    font-weight: 700;
}

/* Availability Indicators */
.calendar-grid .availability-dot {
    display: block;
    margin: 0 auto;
    font-size: 0.65rem;
    line-height: 1;
    height:25px;      
}

.calendar-grid .availability-dot.available {
    color: #279B38;
}

.calendar-grid .availability-dot.few-spots {
    color: #E6A817;
}

.calendar-grid .availability-dot.sold-out {
    color: #C00D0D;
}

.calendar-grid .availability-dot.not-available {
    color: #cccccc;
}

/* Calendar Legend */
.calendar-legend {
    display: flex;
    justify-content: left;
    gap: 25px;
    padding: 15px 0;
    margin-top: 5px;
}

.calendar-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #000000;
}

.calendar-legend .legend-dot {
    font-size: 0.7rem;
}

.calendar-legend .legend-dot.available {
    color: #11A900;
}

.calendar-legend .legend-dot.few-spots {
    color: #D75F03;
}

.calendar-legend .legend-dot.sold-out {
    color: #C00D0D;
}

.calendar-legend .legend-dot.not-available {
    color: #888888;
}

/* --------------------------------------------------------------------------
   Capacity Chart Section
   -------------------------------------------------------------------------- */
.capacity-section {
    margin: 30px 0;
    padding-top:30px;
    transition: opacity 0.3s ease;
    border-top:1px solid #eeeeee;
}

.capacity-section.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.capacity-section--hidden,
.capacity-section[hidden] {
    display: none !important;
}

.capacity-panel {
    position: relative;
    min-height: 160px;
}

.capacity-panel.is-loading .capacity-chart {
    opacity: 0.35;
    filter: grayscale(0.35);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.capacity-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    pointer-events: none;
}

.capacity-loading[hidden] {
    display: none !important;
}

.capacity-loading__spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #333333;
    text-align: center;
}

.capacity-loading__spinner .fa-spinner {
    font-size: 2rem;
    color: #000000;
}

.capacity-loading__text {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Availability / Hobex debug panels (booking wizard troubleshooting) */
.booking-debug-panel {
    margin: 24px 0;
    padding: 16px;
    background: #fff8e6;
    border: 1px solid #e6c200;
    font-size: 0.75rem;
    line-height: 1.4;
}

.booking-debug-panel__title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
}

.booking-debug-panel__hint {
    margin: 0 0 12px;
    color: #555;
}

.booking-debug-panel__body {
    margin: 0;
    max-height: 420px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.7rem;
    background: #fff;
    border: 1px solid #ddd;
    padding: 12px;
}

.capacity-section p{
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 25px;
}

.capacity-section h3 strong {
    font-weight: 700;
    font-style: normal;
}

.capacity-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 180px;
    padding: 0 10px;
    margin-bottom: 10px;
}

.capacity-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 70px;
}

.capacity-bar-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 5px;
}

.capacity-bar {
    width: 50px;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
    position: relative;
}

.capacity-bar.level-low {
    background-color: #279B38;
}

.capacity-bar.level-medium-low {
    background-color: #5BAD3C;
}

.capacity-bar.level-medium {
    background-color: #E6A817;
}

.capacity-bar.level-medium-high {
    background-color: #E67C2B;
}

.capacity-bar.level-high {
    background-color: #C00D0D;
}

.capacity-bar.level-full {
    background-color: #8B0000;
}

.capacity-time-label {
    font-size: 0.8rem;
    color: #333333;
    margin-top: 8px;
    font-weight: 400;
}

.capacity-time-label.full {
    color: #C00D0D;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Group Info Box
   -------------------------------------------------------------------------- */
.group-info-box {
    background-color: #eeeeee;
    border-radius: 5px;
    padding: 20px 25px;
    margin-bottom: 30px;
    max-width: 550px;
    display:none;
}

.timeslot-section-container .col.col-12.col-sm-12.col-md-12.col-lg-8{
    flex: 0 0 100%;
    max-width: 100%;
}

.group-info-box .group-info-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.group-info-box .group-info-text {
    font-size: 0.85rem;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 12px;
}

.group-info-box .group-info-link {
    align-items: center;
    font-size: 0.85rem;
    color: #000000;
    padding:0;
    margin:0 0 5px 0;
}

.group-info-box .group-info-link a {
    color: #000000;
    font-weight: 700;
}

.group-info-box .group-info-link a:hover,
.group-info-box .group-info-link a:focus {
    color: #000000;
}

.group-info-box p i {
    font-size: 0.65rem;
}



/* --------------------------------------------------------------------------
   Navigation Buttons
   -------------------------------------------------------------------------- */
.reservation-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0px 0;
}

.reservation-nav-buttons--submit-only {
    justify-content: flex-end;
}

.reservation-nav-buttons--centered {
    justify-content: center;
}

.reservation-nav-buttons .btn-back {
    display: inline-flex;
    align-items: center;
    padding: 10px 30px;
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.reservation-nav-buttons .btn-back:hover {
    background: #000000;
    color: #ffffff;
}

.reservation-nav-buttons .btn-next {
    display: inline-flex;
    align-items: center;
    padding: 10px 30px;
    border: 2px solid #FCC942;
    background: #FCC942;
    color: #000000;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.reservation-nav-buttons .btn-next:hover {
    background: #e6b530;
    border-color: #e6b530;
}

.reservation-nav-buttons .btn-next:disabled,
.reservation-nav-buttons .btn-next.disabled {
    background: #eeeeee;
    border-color: #eeeeee;
    color: #bbbbbb;
    cursor: not-allowed;
    pointer-events: none;
}


/* ==========================================================================
   Step 2: Time Selection (Uhrzeit waehlen)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Time Slot Section
   -------------------------------------------------------------------------- */
.timeslot-section {
    margin-bottom: 0;
}

.timeslot-section h2,
.resi-login h2{
    font-family: 'FuturaBT-Book', 'IBM Plex Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #000000;
    margin-bottom: 15px;
}

.timeslot-section h3 {
    font-size: 1.4rem;
    color: #000000;
}
.timeslot-description,
.takeover{
    font-size: 0.9rem;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 12px;
}

.timeslot-tip {
    font-size: 0.9rem;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 12px;
}

.timeslot-duration {
    font-size: 0.9rem;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   Recommended Times Checkbox
   -------------------------------------------------------------------------- */
.timeslot-filter {
    margin-bottom: 25px;
}

.timeslot-checkbox-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    color: #333333;
    cursor: pointer;
    gap: 8px;
    user-select: none;
}

.timeslot-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid #cccccc;
    border-radius: 3px;
    cursor: pointer;
    accent-color: #000000;
    margin: 0;
    flex-shrink: 0;
}

.timeslot-checkbox-label button{
    border:none;
    background:none;
}

/* --------------------------------------------------------------------------
   Time Slot Grid
   -------------------------------------------------------------------------- */
/* Outer bordered white container for content sections (Step 1 & Step 2) */
.reservation-section-container,
.timeslot-section-container {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 25px;
}

/* Grey background wrapper for timeslot columns */
.timeslot-grid-bg {
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 15px 15px 15px 15px;
    margin-bottom: 5px;
}

.timeslot-grid {
    margin-bottom: 15px;
}

.timeslot-column-title {
    font-family: 'FuturaBT-Book', 'IBM Plex Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    padding-bottom: 10px;
    margin-top: 5px;
    margin-bottom: 8px;
}

/* Individual Time Slot Row */
.timeslot-row {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    background-color: #ffffff;
    margin-bottom: 6px;
}

.timeslot-row:last-child {
    margin-bottom: 0;
}

.timeslot-row:hover {
    background-color: #f0f0f0;
}

.timeslot-row.selected {
    background-color: #333333;
}

.timeslot-row.selected .timeslot-time {
    color: #ffffff;
    font-weight: 700;
}

.timeslot-row.selected .timeslot-spots {
    color: #ffffff;
}

.timeslot-row.selected .timeslot-spots.few {
    color: #f0c75e;
}

.timeslot-row.selected .timeslot-indicator .fa-circle {
    color: #ffffff;
}

.timeslot-row.selected .timeslot-indicator .fa-exclamation-triangle {
    color: #ffffff;
}

/* Availability Indicator */
.timeslot-indicator {
    width: 20px;
    flex-shrink: 0;
    font-size: 1rem;
    margin-right: 10px;
    text-align: center;
}

.timeslot-indicator .fa-circle {
    color: #11A900;
}

.timeslot-indicator .far.fa-triangle {
    color: #D75F03;
    font-size: 0.7rem;
}

.timeslot-indicator .fa-times {
    color: #c0392b;
}

.timeslot-spots.sold-out {
    color: #c0392b;
}

.timeslot-row.selected .timeslot-spots.sold-out {
    color: #f5b7b1;
}

.timeslot-legend .legend-dot.sold-out {
    color: #c0392b;
}

.timeslot-row.timeslot-row--not-selectable {
    cursor: default;
    opacity: 0.85;
}

.timeslot-row.timeslot-row--not-selectable:hover {
    background-color: transparent;
}

.timeslot-empty-message {
    margin: 16px 0 0;
    padding: 12px;
    text-align: center;
    color: #666666;
    font-size: 0.9rem;
}

.timeslot-column-empty {
    margin: 8px 0 0;
    padding: 14px 12px;
    text-align: center;
    color: #666666;
    font-size: 0.9rem;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 4px;
}

/* Time Label */
.timeslot-time {
    font-size: 0.95rem;
    font-weight: 400;
    color: #333333;
    flex-shrink: 0;
    min-width: 50px;
}

/* Available Spots */
.timeslot-spots {
    font-size: 0.85rem;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Time Slot Legend
   -------------------------------------------------------------------------- */
.timeslot-legend {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 15px 0;
    border-top: none;
    margin-top: 5px;
    margin-bottom: 20px;
}

.timeslot-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #666666;
}

.timeslot-legend .legend-dot {
    font-size: 0.7rem;
}

.timeslot-legend .legend-dot.available {
    color: #279B38;
}

.timeslot-legend .legend-dot.few-spots {
    color: #E6A817;
}

/* --------------------------------------------------------------------------
   Sidebar - Additional fields for Step 2
   -------------------------------------------------------------------------- */
.tour-info-card .selected-time {
    font-size: 0.95rem;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 2px;
}

.tour-info-card .selected-time-note {
    font-size: 0.8rem;
    color: #666666;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Responsive Adjustments for Step 2
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    .timeslot-grid .timeslot-column {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .timeslot-row {
        padding: 10px 12px;
        margin: 0 -12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .timeslot-legend {
        flex-wrap: wrap;
        gap: 15px;
    }
}

/* --------------------------------------------------------------------------
   Step 3 
   -------------------------------------------------------------------------- */

.row.res-types{
    margin: 50px 0 0 0 !important;
}

.row.res-types h4{
    text-transform:none;
    padding-bottom:0;
    margin-bottom:0;
}
.row.res-types table td,
.row.res-types p,
.row.res-types h4{
    font-size:16px;
}
p.res-small{
    font-size:14px !important;
    color:#444444;
}
.row.res-types .row{
    background:#eeeeee;
    border-radius:5px;    
    padding:15px 0 !important;
}
.row.res-types .row>div>div{
    background:#ffffff;
    border-radius:5px;
    padding:10px 15px 45px 15px;
    position:relative;
}

.row.res-types .row h3{
    color:#000000;
    margin:15px 0;
}
.row.res-types table{
    width:100%;
    margin-bottom:15px;
}
.row.res-types table tr{
    border:none;
}

.row.res-types table td,
.row.res-types table.table td{
    vertical-align: top;
    border:none;
    border-top:none;
    padding:0 5px 0 0;
}

.row.res-types table td.tier-breakdown-tier {
    width: 100%;
}

.row.res-types table td.tier-breakdown-price {
    text-align: right;
    white-space: nowrap;
    vertical-align: top;
    padding-left: 12px;
}

.row.res-types .btn-primary{
    position:absolute;
    bottom:15px;
    right:0px;
}

.row.res-types .btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.selected-visitortype {
    margin: 0 0 8px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.tier-distribution-hint {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    background: #fff8e6;
    border: 1px solid #fcc942;
    color: #333333;
}

.tier-distribution-hint.is-error {
    background: #fdecea;
    border-color: #e8a9a3;
    color: #5c1a1a;
}

.tier-distribution-hint[hidden] {
    display: none !important;
}

.booking-wizard-flash-messages {
    max-width: 1140px;
    margin: 0 auto 16px;
    padding: 0 15px;
}

.timeslot-section .booking-wizard-flash-messages {
    max-width: none;
    margin: 0;
    padding: 0;
}

.ticket-checkout > .container > .booking-wizard-flash-messages {
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
}

.booking-wizard-flash-messages .alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    background: #fff8e6;
    border: 1px solid #fcc942;
    color: #333333;
}

.booking-wizard-flash-messages .alert-warning {
    background: #fff8e6;
    border-color: #fcc942;
    color: #333333;
}

.booking-wizard-flash-messages .alert-danger {
    background: #fdecea;
    border-color: #e8a9a3;
    color: #5c1a1a;
}

.booking-hold-countdown {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    background: #fff8e6;
    border: 1px solid #fcc942;
    color: #333333;
}

.timeslot-section .booking-hold-countdown {
    margin: 8px 0 24px;
}

.booking-hold-countdown.is-warning {
    background: #fdecea;
    border-color: #e8a9a3;
    color: #5c1a1a;
}

.booking-hold-countdown.is-expired {
    background: #f5f5f5;
    border-color: #999999;
    color: #333333;
}

.booking-hold-countdown__text {
    flex: 1;
}

.booking-wizard--hold-expired {
    pointer-events: none;
    opacity: 0.65;
}

.booking-wizard--hold-expired .restart-link,
.booking-wizard--hold-expired a.restart-link {
    pointer-events: auto;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Step 4 
   -------------------------------------------------------------------------- */

.booking-step4-loading {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
}

.booking-step4-loading[hidden] {
    display: none;
}

.booking-step4-loading__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #fcc942;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    color: #333333;
    font-size: 0.95rem;
    text-align: center;
}

.booking-step4-loading__panel .fa-spinner {
    font-size: 1.75rem;
    color: #333333;
}

.booking-step4--checking-email .container {
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
}

/* Google Places dropdown above modals / payment panels */
.pac-container {
    z-index: 1055 !important;
}

.reservation-sidebar table{
    width:100%;
    margin-bottom:15px;
    font-size:0.9rem;
}
.reservation-sidebar table tfoot{
   text-align:right;
}

.reservation-sidebar table td{
    vertical-align: top;
    border:none;
    padding:0 5px 0 0;
}
.reservation-sidebar table td.ticket-price{
    vertical-align: top;
    border:none;
    text-align: right;
    padding:0 5px 0 0;
}
.reservation-sidebar table span{
    font-size: 0.8rem;
    color: #444444;
    line-height: 1.4;    
}

.reservation-wrapper .form-control {
	border-radius: 9px;
	opacity: .7;
}
.ticket-gutschein{
    margin-right:15px;
}

.form-note{
    color: #6c757d;
}

/* Total price */
.total-price {
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Choco Club box */
.choco-club-box {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-width: 60%;        /* matches the ~50% width in the screenshot */
}


.choco-club-headline {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.choco-club-link {
 
}

.choco-club-arrow {
  font-size: 1.1rem;
  margin-right: 4px;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #222;
  border-color: #222;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #222;
}

.custom-control-input:active ~ .custom-control-label::before {
  background-color: #888;
  border-color: #888;
}


/* Payment section */
.payment-section,
.reservation-wrapper .summary {
    border-bottom: 1px solid #ced4da;
    margin: 2em 0;
    padding-bottom: 2em;
}

.payment-section h5 {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
}

.payment-method-select {
    max-width: 260px;
}

.ticket-checkout #bookingPaymentSection .payment-method-select,
.ticket-checkout #bookingPaymentSection .payment-method-select .select,
.ticket-checkout #bookingPaymentSection .payment-method-select .form-group {
    width: 100%;
    max-width: none;
}

.ticket-checkout #bookingPaymentSection .payment-method-select .form-control,
.ticket-checkout #bookingPaymentSection #paymentMethod {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.payment-panel {
    display: none;
    margin-top: 1.5rem;
}

.payment-panel.active {
    display: block;
}

.cc-helper {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.2rem;
}

.card-number-wrapper {
    position: relative;
}

.card-number-wrapper .form-control {
    padding-left: 1rem;
    transition: padding-left 0.15s ease;
}

.card-number-wrapper.has-icon .form-control {
    padding-left: 3rem;
}

.card-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
    flex-shrink: 0;
    pointer-events: none;
}

.card-icon img,
.card-icon svg {
    height: 24px;
    width: auto;
}

.card-icon svg {
    width: 38px;
    height: 24px;
    display: block;
}

.bank-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bank-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-size: 0.875rem;
    white-space: nowrap;
}

.bank-btn:hover {
    border-color: #adb5bd;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.bank-btn.selected {
    border-color: #5cb85c;
    box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.25);
}

.bank-btn img {
    width: 32px;
    height: 22px;
    object-fit: contain;
}

.bank-selected-indicator {
    display: none;
    color: #5cb85c;
    font-size: 1.2rem;
    margin-left: 4px;
    align-self: center;
}

.bank-selected-indicator.visible {
    display: inline-block;
}

.paypal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}

.paypal-btn:hover {
    border-color: #adb5bd;
}

.paypal-btn img {
    height: 22px;
}

.checkout-points-summary {
    background: url(../img/pod-yellowb.svg) no-repeat 10px 50% #eeeeee;
    background-size: 25px 25px;
    margin-top: 5px;
    border-radius: 5px;
}

/* --------------------------------------------------------------------------
   50+ form
   -------------------------------------------------------------------------- */
.picker-field {
    position: relative;
}

.picker-input {
    display: flex;
    align-items: center;
    border: 1.5px solid #ccc;
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    background: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.picker-input:focus-within,
.picker-input.open {
    border-color: #333;
    outline: none;
}

.picker-input .picker-value {
    flex: 1;
    font-size: 1rem;
    color: #555;
}

.picker-input .picker-icon {
    font-size: 1.2rem;
    color: #222;
    margin-left: 0.5rem;
}

.picker-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1.5px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    min-width: 340px;
    padding: 1rem;
}

.picker-dropdown.open {
    display: block;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.cal-nav .btn-nav {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    line-height: 1;
    color: #222;
    touch-action: manipulation;
}

.cal-nav .btn-nav:hover {
    background: #f0f0f0;
}

.cal-nav select {
    flex: 1;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.95rem;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 1.6rem;
}

.cal-grid-wrap {
    position: relative;
    min-height: 220px;
}

.group-cal-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
}

.group-cal-loading[hidden] {
    display: none !important;
}

.group-cal-loading .calendar-loading__spinner .fa-spinner {
    font-size: 1.6rem;
}

.group-cal-loading .calendar-loading__text {
    font-size: 0.85rem;
}

.cal-grid {
    width: 100%;
    border-collapse: collapse;
}

.cal-grid th {
    text-align: center;
    font-size: 0.8rem;
    color: #888;
    font-weight: 600;
    padding: 0.3rem 0;
}

.cal-grid td {
    text-align: center;
    padding: 0.15rem;
}

.cal-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    background: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.cal-day:hover:not(.disabled):not(.selected) {
    background: #f0f0f0;
}

.cal-day.today {
    border: 1.5px solid #ccc;
}

.cal-day.selected {
    background: #222;
    color: #fff;
    border-radius: 8px;
}

.cal-day.disabled {
    color: #ccc;
    cursor: default;
    pointer-events: none;
}

.cal-day.other-month {
    color: #ccc;
}

.time-picker-dropdown {
    min-width: 340px;
}

.time-columns {
    display: flex;
    gap: 0;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.time-col {
    flex: 1;
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.time-col::-webkit-scrollbar {
    display: none;
}

.time-col + .time-col {
    border-left: 1.5px solid #e0e0e0;
}

.time-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    color: #444;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 6px;
    margin: 0 12px;
}

.time-item:hover:not(.selected) {
    background: #f5f5f5;
}

.time-item.selected {
    background: #444;
    color: #fff;
    font-weight: 600;
}

.time-item.disabled {
    color: #ccc;
    cursor: default;
    pointer-events: none;
}

.btn-ok {
    width: 100%;
    border: 2px solid #222;
    border-radius: 8px;
    background: #fff;
    font-size: 1rem;
    padding: 0.55rem;
    cursor: pointer;
    touch-action: manipulation;
}

.btn-ok:hover {
    background: #f5f5f5;
}

.field-note {
    font-size: 0.82rem;
    color: #555;
    margin-top: 0.4rem;
    max-width: 340px;
}
/* --------------------------------------------------------------------------
   Confirmation
   -------------------------------------------------------------------------- */
.confirmation h2{
    color:#000;
    text-align:center;
}
.confirmation .conf-top{
    text-align:center !important;
}
.confirmation .confirmation-info{
    margin: 25px 35px;
}
.confirmation .confirmation-info p{
    padding:0;
    margin:0;
    font-family: 'FuturaBT-Book', 'IBM Plex Sans', sans-serif;
    font-size:21px;
}
.confirmation .confirmation-info h2{
    text-align: left;
}

.confirmation .tour-info-card .selected-info {
    margin: 25px 30px;
    padding:15px 15px 5px 15px;
    border-radius:5px;
}
.confirmation .tour-info-card .sidebar-separator {
    margin: 0 35px;
}

.ticket-checkout .form-note.small {
    display: block;
    margin-top: 0.35rem;
    color: #666;
}

.ticket-checkout .booking-email-existing-account-login-link {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-decoration: underline;
    vertical-align: baseline;
    border: none;
}

.ticket-checkout .booking-email-existing-account-login-link:hover,
.ticket-checkout .booking-email-existing-account-login-link:focus {
    color: inherit;
    text-decoration: underline;
}

.ticket-checkout .form-row {
    margin-bottom: 0;
}

.ticket-checkout .booking-name-group {
    margin-bottom: 1rem;
}

.ticket-checkout .booking-name-row,
.ticket-checkout .booking-billing-name-row {
    margin-bottom: 0;
}

.ticket-checkout .booking-name-row .form-group,
.ticket-checkout .booking-billing-name-row .form-group {
    margin-bottom: 0;
}

.ticket-checkout .booking-billing-name-row {
    margin-bottom: 1rem;
}

.ticket-checkout .booking-name-note {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.ticket-checkout .booking-contact-validation {
    margin-bottom: 1rem;
}

.ticket-checkout .form-control.is-invalid {
    border-color: #c0392b;
}

.ticket-checkout .gutschein-row {
    gap: 0.5rem;
}

.ticket-checkout .gutschein-row .ticket-gutschein {
    flex: 1 1 12rem;
    min-width: 0;
}

.ticket-checkout .voucher-list {
    margin-top: 0.75rem;
}

.ticket-checkout .voucher-list-item {
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ticket-checkout .voucher-list-item:last-child {
    border-bottom: 0;
}

.ticket-checkout .voucher-remove-btn {
    padding: 0;
    min-width: 1.75rem;
    font-size: 1.35rem;
    line-height: 1;
    color: #6c757d;
    text-decoration: none;
}

.ticket-checkout .voucher-remove-btn:hover,
.ticket-checkout .voucher-remove-btn:focus {
    color: #c0392b;
    text-decoration: none;
}

.ticket-checkout .booking-checkout-total .total-price {
    font-size: 1.75rem;
    font-weight: 700;
}

.ticket-checkout .choco-club-box {
    background: #f5f0e8;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

.ticket-checkout .choco-club-headline {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.ticket-checkout .payment-section {
    margin: 1.5rem 0;
}

.ticket-checkout .payment-panel {
    display: none;
    margin-top: 1rem;
}

.ticket-checkout .payment-panel.active {
    display: block;
}

.ticket-checkout .payment-panel[hidden] {
    display: none !important;
}

.ticket-checkout .hobex-creditcard-iframe-host {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.ticket-checkout .hobex-creditcard-iframe-host iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    height: 280px;
    min-height: 200px;
    border: 0;
    overflow: hidden;
}

.ticket-checkout .institution-bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    max-width: 100%;
}

.ticket-checkout .institution-bank-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    min-height: 4.75rem;
    padding: 0.5rem 0.35rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ticket-checkout .institution-bank-icon {
    display: block;
    width: 48px;
    height: 32px;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

.ticket-checkout .institution-bank-btn .bank-btn-label {
    display: block;
    width: 100%;
    max-width: 100%;
}

.ticket-checkout .institution-bank-btn:hover,
.ticket-checkout .institution-bank-btn.selected {
    border-color: #fcc942;
    background: #fff9e6;
    box-shadow: 0 0 0 2px rgba(252, 201, 66, 0.25);
}

@media (max-width: 575px) {
    .ticket-checkout .institution-bank-grid {
        grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr));
    }
}

.ticket-checkout .payment-section-error {
    margin-top: 0.75rem;
}

.ticket-checkout .booking-contact-summary {
    margin-bottom: 1.5rem;
}

.ticket-checkout .booking-email-with-login {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.ticket-checkout .booking-email-with-login > div,
.ticket-checkout .booking-email-with-login .booking-email-input,
.ticket-checkout .booking-email-with-login input.form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.ticket-checkout .booking-email-with-login > div .form-control {
    width: 100%;
}

.ticket-checkout .booking-email-login-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.ticket-checkout .booking-email-login-btn:disabled,
.ticket-checkout .booking-email-login-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.booking-login-modal-content {
    border-radius: 10px;
    padding: 0.5rem 1rem 1rem;
}

.booking-verification-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.booking-verification-modal__dialog {
    max-width: 640px;
    width: 100%;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 20px 24px;
    position: relative;
}

.booking-verification-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1;
}

.booking-verification-modal__dialog h2 {
    padding-right: 2rem;
}

.booking-verification-modal .verification-modal-body {
    max-height: 50vh;
    overflow: auto;
    margin-bottom: 16px;
}

.booking-verification-notice {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}

.booking-verification-notice h3 {
    margin-bottom: 12px;
    font-size: 1.15rem;
}

#bookingStep4Submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Booking confirmation (TYPO3 template wrapper) */
.reservation-confirmation .confirmation {
    text-align: center;
}

.reservation-confirmation .confirmation h2 {
    margin-bottom: 1rem;
}

.reservation-confirmation .conf-top {
    margin-bottom: 1.5rem;
}

.reservation-confirmation .tour-info-card {
    text-align: left;
    margin-top: 0;
}

.reservation-confirmation .confirmation-info p {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.reservation-confirmation .confirmation-info h2 {
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
    text-align: left;
}

.reservation-confirmation .selected-visitortype {
    margin-bottom: 0.75rem;
}

.reservation-confirmation .selected-note {
    font-size: 0.9rem;
    color: #555;
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */

/* Tablet and below (using custom breakpoints: sm = 992px) */
@media only screen and (max-width: 991px) {
    .reservation-stepper {
        flex-wrap: wrap;
        gap: 5px;
        padding: 20px 0 15px 0;
        margin-left: 0;
        width: 100%;
    }

    .reservation-stepper .stepper-step {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .calendar-nav .month-select {
        min-width: 140px;
    }

    .calendar-nav .year-select {
        min-width: 100px;
    }

    .capacity-bar {
        width: 40px;
    }

    .calendar-legend {
        flex-wrap: wrap;
        gap: 15px;
    }
    /* Choco Club box */
    .choco-club-box {
      max-width: 100%;
    }    
}

/* Mobile (below 768px) */
@media only screen and (max-width: 767px) {
    .reservation-stepper {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .reservation-stepper .stepper-step {
        justify-content: center;
    }

    .visitor-count-controls.ticket-types .count-input {
        width: 100%;
    }

    .visitor-count-controls .count-input {
        width: 180px;
    }

    .calendar-nav .month-year-selects {
        flex-direction: column;
        gap: 8px;
    }

    .calendar-nav .month-select,
    .calendar-nav .year-select {
        min-width: 100%;
    }

    .calendar-grid thead th {
        font-size: 0.75rem;
        padding: 8px 2px;
    }

    .calendar-grid tbody td {
        padding: 6px 2px;
        height: 50px;
    }

    .calendar-grid .day-number {
        font-size: 0.85rem;
    }

    .capacity-bar {
        width: 30px;
        min-width: 30px;
    }

    .capacity-bar-wrapper {
        min-width: 40px;
    }

    .group-info-box {
        max-width: 100%;
    }

    .reservation-nav-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .reservation-nav-buttons .btn{
        width: 100%;
        justify-content: center;
        
    }
}

.reservation-sidebar .no-group {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.reservation-sidebar .no-group p {
    margin-bottom: 0.75rem;
}

.reservation-sidebar .no-group .tour-link {
    margin-bottom: 0;
}

/* My Bookings → Modify: Plätze / Datum-Uhrzeit tabs */
.pay-booking-manage-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dddddd;
}

.pay-booking-manage-tab {
    border: none;
    background: none;
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: 600;
    color: #666666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pay-booking-manage-tab:hover {
    color: #000000;
}

.pay-booking-manage-tab.active {
    color: #000000;
    border-bottom-color: #fcc942;
}

.pay-booking-manage-panel {
    margin-bottom: 10px;
}

.sidebar-visitors-split {
    margin: -6px 0 10px;
    font-size: 0.9rem;
    color: #666666;
}

.sidebar-free-tier-body .sidebar-free-section-heading td {
    padding-top: 12px;
    padding-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666666;
    border-top: 1px solid #e6e6e6;
}

.sidebar-free-tier-body .sidebar-free-price {
    font-style: italic;
    color: #666666;
}

.sidebar-free-footnote {
    margin: 8px 0 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #777777;
}

/* Reschedule (Datum / Uhrzeit) panel */
.reschedule-date-nav {
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.reschedule-date-input {
    padding: 8px 15px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #333333;
    background-color: #ffffff;
}

.reschedule-today-btn {
    padding: 8px 16px;
}

.reschedule-status {
    text-align: center;
    padding: 10px 0;
}

.reschedule-status--error {
    color: #c0392b;
}

.reschedule-footer {
    margin: 20px 0;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 6px;
}

.reschedule-footer-line {
    margin-bottom: 6px;
}

.reschedule-footer-line:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .pay-booking-manage-tabs {
        gap: 4px;
    }

    .pay-booking-manage-tab {
        flex: 1;
        padding: 10px 8px;
        font-size: 0.9rem;
        text-align: center;
    }

    .reschedule-date-nav {
        justify-content: space-between;
    }
}