/* SIDEBAR */
.sidebar-content {
    display: none;
}
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(37, 28, 29, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 100;
}
.sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(480px, 90vw);
    /* The panel is a light surface whatever the page behind it is; style.css
       re-declares the light tokens on .sidebar, so everything in here follows. */
    background: var(--bg);
    color: var(--text);
    padding: 4rem 3rem 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 101;
}
.sidebar.open {
    transform: translateX(0);
    /* only cast the shadow once on-screen — otherwise it bleeds onto the
       right edge while the panel is parked off-screen */
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
}
.sidebar-title {
    margin-bottom: 1.5rem;
    padding-right: 2rem; /* clear the close button */
}
.sidebar-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-strong);
    background: none;
    border: 0;
    cursor: pointer;
    font-family: sans-serif;
}
/* the read-more trigger, styled as an inline link */
.read-more {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0;
    color: var(--text);
    background: none;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}
/* lock background scroll while a panel is open */
body.sidebar-open {
    overflow: hidden;
}
/* the booking form rendered inside the panel */
.sidebar-body form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.sidebar-body form > div {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
}
.sidebar-body form > div.half {
    flex: 1 1 calc(50% - 0.5rem);
}
/* The titles the form is divided into are not headings of the same rank as the
   panel's own — they name a group of fields inside it — so they take the step
   the itinerary titles take: the page's own type at 1.25rem in the strong ink,
   which reads as a heading over the labels under it without the serif setting
   it level with "Wait list" above. The first one opens the form and has the
   title's own margin over it already. */
.sidebar-body form h2 {
    font-family: inherit;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 0;
    color: var(--text-strong);
    margin: 2.25rem 0 -0.25rem;
}
.sidebar-body form > div:first-child h2 {
    margin-top: 0.75rem;
}
.sidebar-body form label {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}
.sidebar-body form a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 0.15rem;
    text-decoration-color: rgba(37, 28, 29, 0.3);;
}
.sidebar-body form .checkbox label,
.sidebar-body form .radio label {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}
.sidebar-body form input,
.sidebar-body form select,
.sidebar-body form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-bottom: 1px solid transparent;
    background: rgba(37, 28, 29, 0.05);
    color: var(--text-strong);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
.sidebar-body form input:placeholder-shown,
.sidebar-body form select:has(option:first-child:checked),
.sidebar-body form textarea:placeholder-shown {
    background: transparent;
    border-color: rgba(37, 28, 29, 0.25);
}
.sidebar-body form .radio input {
    width: auto;
}
.sidebar-body form .checkbox label {
    line-height: 1.5;
}
.sidebar-body form .checkbox label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(37, 28, 29, 0.4);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 0.5em;
    position: relative;
    bottom: 1px;
}
.sidebar-body form .checkbox label input[type="checkbox"]:checked {
    background-color: #251C1D;
    border-color: #251C1D;
    /* checkmark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F9FAF5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem;
}
.sidebar-body form textarea {
    field-sizing: content;
    min-height: 3lh;
    max-height: 12lh;
    resize: vertical;
}
.sidebar-body form button[type="submit"] {
    width: 100%;
    margin-top: 2.5rem;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.1rem;
    background: var(--button-bg);
    font-weight: 400;
    border-radius: 0.5rem;
    color: var(--button-text);
    padding: 1rem 1.25rem;
    text-decoration: none;
    display: inline-block;
}

/* Chrome, Safari, Edge */
.sidebar-body form input[type="number"]::-webkit-inner-spin-button,
.sidebar-body form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.sidebar-body form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}