:root,
.innkeeper {
--innkeeper-primary: var(--innkeeper-custom-primary, #2c3e50);
--innkeeper-primary-contrast: var(--innkeeper-custom-primary-contrast, #ffffff);
--innkeeper-button-hover-bg: var(--innkeeper-custom-button-hover-bg, color-mix(in srgb, var(--innkeeper-primary) 85%, #000000));
--innkeeper-button-hover-text: var(--innkeeper-custom-button-hover-text, #ffffff);
--innkeeper-success: var(--innkeeper-custom-success, #16a34a);
--innkeeper-success-bg: color-mix(in srgb, var(--innkeeper-success) 12%, Canvas);
--innkeeper-warning: var(--innkeeper-custom-warning, #f59e0b);
--innkeeper-warning-text: var(--innkeeper-custom-warning-text, #92400e);
--innkeeper-warning-bg: color-mix(in srgb, var(--innkeeper-warning) 12%, Canvas);
--innkeeper-danger: var(--innkeeper-custom-danger, #dc2626);
--innkeeper-danger-bg: color-mix(in srgb, var(--innkeeper-danger) 10%, Canvas);
--innkeeper-text-muted: var(--innkeeper-custom-text-muted, #64748b);
--innkeeper-border: color-mix(in srgb, var(--innkeeper-text-muted) 22%, transparent);
--innkeeper-bg-subtle: color-mix(in srgb, CanvasText 4%, Canvas);
--innkeeper-card-bg: Canvas;
--innkeeper-radius: 12px;
--innkeeper-info-bg: color-mix(in srgb, var(--innkeeper-primary) 8%, Canvas);
--innkeeper-cal-available-bg: color-mix(in srgb, var(--innkeeper-success) 15%, Canvas);
--innkeeper-cal-available-text: var(--innkeeper-success);
--innkeeper-cal-booked-bg: var(--innkeeper-danger-bg);
--innkeeper-cal-booked-text: var(--innkeeper-danger);
}
.innkeeper-button {
display: inline-block;
padding: 0.65em 1.25em;
border: 1px solid currentColor;
border-radius: 4px;
background: transparent;
color: inherit;
font: inherit;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.innkeeper-button--primary {
border-color: var(--innkeeper-primary);
background: var(--innkeeper-primary);
color: var(--innkeeper-primary-contrast);
}
.innkeeper-button--outline {
border-color: var(--innkeeper-primary);
background: transparent;
color: var(--innkeeper-primary);
}
.innkeeper-button--danger {
border-color: var(--innkeeper-danger);
background: transparent;
color: var(--innkeeper-danger);
} .innkeeper-button:hover,
.innkeeper-button:focus-visible,
.innkeeper-button--primary:hover,
.innkeeper-button--primary:focus-visible,
.innkeeper-button--outline:hover,
.innkeeper-button--outline:focus-visible,
.innkeeper-button--danger:hover,
.innkeeper-button--danger:focus-visible { background-color: var(--innkeeper-button-hover-bg) !important;
border-color: var(--innkeeper-button-hover-bg) !important;
color: var(--innkeeper-button-hover-text) !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--innkeeper-primary) 30%, transparent);
}
.innkeeper-button--block {
display: block;
width: 100%;
}
.innkeeper-button--sm {
padding: 0.4em 0.9em;
font-size: 0.85em;
}
.innkeeper-link-button {
padding: 0;
border: 0;
background: none;
color: var(--innkeeper-danger);
font: inherit;
text-decoration: underline;
cursor: pointer;
} .innkeeper-notice {
margin: 1em 0;
padding: 0.85em 1.1em;
border-left: 4px solid var(--innkeeper-border);
border-radius: 3px;
background: var(--innkeeper-bg-subtle);
color: inherit;
}
.innkeeper-notice--success {
border-color: var(--innkeeper-success);
background: var(--innkeeper-success-bg);
}
.innkeeper-notice--error {
border-color: var(--innkeeper-danger);
background: var(--innkeeper-danger-bg);
}
.innkeeper-notice--info {
border-color: var(--innkeeper-primary);
background: var(--innkeeper-info-bg);
} .innkeeper-search-form__fields {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-end;
}
.innkeeper-search-form--vertical .innkeeper-search-form__fields {
flex-direction: column;
align-items: stretch;
}
.innkeeper-search-form__field {
display: flex;
flex: 1 1 160px;
flex-direction: column;
gap: 0.35rem;
}
.innkeeper-search-form__field label {
font-size: 0.85em;
font-weight: 600;
}
.innkeeper-search-form__field input,
.innkeeper-search-form__field select {
padding: 0.6em 0.7em;
border: 1px solid var(--innkeeper-border);
border-radius: 4px;
font: inherit;
}
.innkeeper-search-form__field--submit {
flex: 0 0 auto;
} .innkeeper-search-form--horizontal {
padding: 1rem 1.25rem;
border: 1px solid var(--innkeeper-border);
border-radius: 10px;
background: Canvas;
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}
.innkeeper-search-form--horizontal .innkeeper-search-form__fields {
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
} .innkeeper-search-form--horizontal .innkeeper-search-form__field {
flex: 1 1 150px;
min-width: 150px;
} .innkeeper-search-form--horizontal .innkeeper-search-form__field input:not( [type="checkbox"] ),
.innkeeper-search-form--horizontal .innkeeper-search-form__field select {
box-sizing: border-box;
width: 100%;
min-width: 0;
height: 44px;
margin: 0;
} .innkeeper-search-form--horizontal .innkeeper-search-form__field--guests {
flex: 0 0 auto;
min-width: 0;
}
.innkeeper-search-form--horizontal .innkeeper-search-form__field--guests input {
width: 76px;
max-width: 76px;
} .innkeeper-search-form--horizontal .innkeeper-search-form__field--submit {
flex: 0 0 auto;
min-width: 0;
align-self: flex-end;
}
.innkeeper-search-form--horizontal .innkeeper-search-form__field--submit .innkeeper-button {
box-sizing: border-box;
height: 44px;
padding: 0 1.5em;
white-space: nowrap;
} .innkeeper-search-form--horizontal .innkeeper-search-form__field--filter {
flex: 0 0 auto;
min-width: 0;
} .innkeeper-search-form--horizontal .innkeeper-search-form__checkbox {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.innkeeper-search-form--horizontal .innkeeper-search-form__checkbox input[type="checkbox"] {
box-sizing: border-box;
width: auto;
height: auto;
min-width: 0;
margin: 0;
padding: 0;
flex: 0 0 auto;
} @media ( max-width: 540px ) {
.innkeeper-search-form--horizontal .innkeeper-search-form__fields {
flex-direction: column;
align-items: stretch;
}
.innkeeper-search-form--horizontal .innkeeper-search-form__field {
flex: 1 1 auto;
width: 100%;
}
.innkeeper-search-form--horizontal .innkeeper-search-form__field--submit .innkeeper-button {
width: 100%;
}
}
.innkeeper-search-form__checkboxes {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.innkeeper-search-form__checkbox {
font-size: 0.9em;
font-weight: 400;
} .innkeeper-datepicker__wrap {
position: relative;
}
.innkeeper-datepicker__wrap > .innkeeper-calendar {
position: absolute;
z-index: 50;
width: 18.5rem;
margin-top: 0.35rem;
padding: 0.75rem;
border: 1px solid var(--innkeeper-border);
border-radius: 6px;
background: Canvas;
box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.12 );
overflow: visible;
min-height: 17.5rem;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__title {
font-weight: 600;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid var(--innkeeper-border);
border-radius: 4px;
background: Canvas;
color: CanvasText;
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__nav:hover,
.innkeeper-datepicker__wrap .innkeeper-calendar__nav:focus-visible {
background: color-mix( in srgb, var(--innkeeper-border) 35%, Canvas );
color: CanvasText;
outline: none;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__grid {
display: grid;
grid-template-columns: repeat( 7, 1fr );
grid-auto-rows: minmax( 2rem, auto );
gap: 2px;
text-align: center;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__dow {
padding: 0.25rem 0;
font-size: 0.7em;
font-weight: 600;
text-transform: uppercase;
color: var(--innkeeper-text-muted);
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell {
padding: 0.45rem 0;
border: 0;
border-radius: 4px;
background: none;
font: inherit;
cursor: pointer;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--available {
background: #fff;
color: #1a1a1a;
border: 1px solid color-mix( in srgb, var(--innkeeper-border) 85%, transparent );
font-weight: 600;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--available:hover,
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--available:focus-visible {
background: var(--innkeeper-info-bg);
border-color: var(--innkeeper-primary);
color: inherit;
outline: none;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--past,
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--empty {
color: var(--innkeeper-text-muted);
background: color-mix( in srgb, var(--innkeeper-bg-subtle) 75%, Canvas );
opacity: 0.55;
cursor: default;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--past {
text-decoration: line-through;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--loading {
color: var(--innkeeper-text-muted);
background: color-mix( in srgb, var(--innkeeper-bg-subtle) 55%, Canvas );
cursor: wait;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--booked,
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--blocked {
color: var(--innkeeper-text-muted);
background: color-mix(in srgb, var(--innkeeper-text-muted) 12%, Canvas);
text-decoration: line-through;
cursor: not-allowed;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell--disabled {
color: color-mix(in srgb, var(--innkeeper-text-muted) 45%, transparent);
cursor: default;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__cell.is-selected {
background: var(--innkeeper-primary);
color: var(--innkeeper-primary-contrast);
text-decoration: none;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__loading {
margin: 0.5rem 0 0;
font-size: 0.8em;
color: var(--innkeeper-text-muted);
text-align: center;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.65rem;
margin-top: 0.65rem;
padding-top: 0.55rem;
border-top: 1px solid var(--innkeeper-border);
font-size: 0.65rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-item {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border: 1px solid var(--innkeeper-border);
border-radius: 2px;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__loading.is-error {
color: #b32d2e;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch--available {
background: #fff;
border-color: color-mix( in srgb, var(--innkeeper-border) 85%, transparent );
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch--past {
position: relative;
background: color-mix( in srgb, var(--innkeeper-bg-subtle) 75%, Canvas );
opacity: 0.75;
overflow: hidden;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch--past::after {
content: '';
position: absolute;
left: -1px;
right: -1px;
top: 50%;
height: 1px;
background: var(--innkeeper-text-muted);
transform: translateY( -50% );
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch--booked,
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch--blocked {
position: relative;
background: color-mix(in srgb, var(--innkeeper-text-muted) 12%, Canvas);
color: var(--innkeeper-text-muted);
overflow: hidden;
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch--booked::after,
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch--blocked::after {
content: '';
position: absolute;
left: -1px;
right: -1px;
top: 50%;
height: 1px;
background: currentColor;
transform: translateY(-50%);
}
.innkeeper-datepicker__wrap .innkeeper-calendar__legend-swatch--past {
background: var(--innkeeper-bg-subtle);
} .innkeeper-search-results__container {
max-width: 1100px;
margin-inline: auto;
padding-inline: clamp( 1rem, 4vw, 1.5rem );
padding-block: 0.5rem 2rem;
} .innkeeper-search-results .innkeeper-availability-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
margin: 0 0 1.5rem;
padding: 1.1rem 1.35rem;
border: 1px solid var(--innkeeper-border);
border-left: 4px solid var(--innkeeper-primary);
border-radius: 8px;
background: var(--innkeeper-card-bg);
box-shadow: 0 1px 3px color-mix( in srgb, CanvasText 8%, transparent );
}
.innkeeper-search-results .innkeeper-availability-bar__icon {
display: inline-flex;
align-items: center;
color: var(--innkeeper-primary);
}
.innkeeper-search-results .innkeeper-availability-bar__icon svg {
width: 22px;
height: 22px;
}
.innkeeper-search-results .innkeeper-availability-bar__info {
flex: 1 1 auto;
min-width: min( 100%, 240px );
}
.innkeeper-search-results .innkeeper-availability-bar__label {
display: block;
margin-bottom: 0.15rem;
font-size: 0.78rem;
color: var(--innkeeper-text-muted);
line-height: 1.3;
}
.innkeeper-search-results .innkeeper-availability-bar__detail {
margin: 0;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.4;
}
.innkeeper-search-results .innkeeper-availability-bar__badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.85rem;
border-radius: 6px;
background: color-mix( in srgb, var(--innkeeper-primary) 10%, Canvas );
color: var(--innkeeper-primary);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.3;
}
.innkeeper-search-results .innkeeper-availability-bar__modify {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--innkeeper-primary);
text-decoration: none;
border-bottom: 1px solid color-mix( in srgb, var(--innkeeper-primary) 45%, transparent );
padding-bottom: 2px;
white-space: nowrap;
}
.innkeeper-search-results .innkeeper-availability-bar__modify:hover,
.innkeeper-search-results .innkeeper-availability-bar__modify:focus-visible {
border-bottom-color: var(--innkeeper-primary);
} .innkeeper-search-results .innkeeper-results-sort {
display: flex;
justify-content: flex-end;
margin: 0 0 1.5rem;
}
.innkeeper-search-results .innkeeper-results-sort__form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
margin: 0;
}
.innkeeper-search-results .innkeeper-results-sort__label {
margin: 0;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--innkeeper-text-muted);
white-space: nowrap;
}
.innkeeper-search-results .innkeeper-results-sort__select {
min-width: 12rem;
} .innkeeper-search-results .innkeeper-results-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}
@media ( min-width: 1000px ) {
.innkeeper-search-results .innkeeper-results-grid {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
.innkeeper-search-results .innkeeper-result-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 4px;
background: var(--innkeeper-card-bg);
box-shadow: 0 2px 8px color-mix( in srgb, CanvasText 10%, transparent );
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.innkeeper-search-results .innkeeper-result-card:hover {
transform: translateY( -4px );
box-shadow: 0 14px 32px color-mix( in srgb, CanvasText 18%, transparent );
}
.innkeeper-search-results .innkeeper-result-card__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
background: var(--innkeeper-bg-subtle);
overflow: hidden;
}
.innkeeper-search-results .innkeeper-result-card__image,
.innkeeper-search-results .innkeeper-result-card__placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.innkeeper-search-results .innkeeper-result-card__capacity-badge {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.35rem 0.7rem;
border-radius: 3px;
background: var(--innkeeper-primary);
color: var(--innkeeper-primary-contrast);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
line-height: 1.2;
}
.innkeeper-search-results .innkeeper-result-card__available-badge {
position: absolute;
top: 1rem;
right: 1rem;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.7rem;
border-radius: 3px;
background: rgba( 0, 0, 0, 0.55 );
color: var(--innkeeper-primary-contrast);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
}
.innkeeper-search-results .innkeeper-result-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1.6rem;
}
.innkeeper-search-results .innkeeper-result-card__title {
margin: 0 0 0.6rem;
line-height: 1.2;
} .innkeeper-search-results .innkeeper-result-card__title,
.innkeeper-search-results .innkeeper-result-card__title a {
font-size: max( 24px, 1.5rem ) !important;
}
.innkeeper-search-results .innkeeper-result-card__title a {
color: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-decoration: none;
}
.innkeeper-search-results .innkeeper-result-card__title a:hover,
.innkeeper-search-results .innkeeper-result-card__title a:focus-visible {
color: var(--innkeeper-primary);
}
.innkeeper-search-results .innkeeper-result-card__beds {
margin: 0 0 0.75rem;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--innkeeper-primary);
}
.innkeeper-search-results .innkeeper-result-card__description {
margin: 0 0 1rem;
font-size: 0.95rem;
line-height: 1.55;
color: var(--innkeeper-text-muted);
}
.innkeeper-search-results .innkeeper-result-card__divider {
margin: 0 0 1.1rem;
border: 0;
border-top: 1px solid var(--innkeeper-border);
}
.innkeeper-search-results .innkeeper-result-card__footer {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
}
.innkeeper-search-results .innkeeper-result-card__pricing {
display: flex;
flex-direction: column;
}
.innkeeper-search-results .innkeeper-result-card__price-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--innkeeper-text-muted);
}
.innkeeper-search-results .innkeeper-result-card__price {
display: flex;
align-items: baseline;
gap: 0.3rem;
margin-top: 0.2rem;
}
.innkeeper-search-results .innkeeper-result-card__price-amount {
font-size: 1.85rem;
font-weight: 700;
line-height: 1.1;
}
.innkeeper-search-results .innkeeper-result-card__price-unit {
font-size: 0.9rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-search-results .innkeeper-result-card__price-total {
margin-top: 0.2rem;
font-size: 0.85rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-search-results .innkeeper-result-card__book {
flex: 0 0 auto;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.innkeeper-property-grid {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
gap: 1.5rem;
}
.innkeeper-property-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--innkeeper-border);
border-radius: 8px;
background: Canvas;
}
.innkeeper-property-card__media {
display: block;
aspect-ratio: 3 / 2;
background: var(--innkeeper-bg-subtle);
}
.innkeeper-property-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.innkeeper-property-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
}
.innkeeper-property-card__heading {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.65rem;
align-items: flex-start;
justify-content: space-between;
}
.innkeeper-property-card__title {
margin: 0;
font-size: 1.1em;
}
.innkeeper-property-card__badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2em 0.55em;
border-radius: 999px;
background: var(--innkeeper-success-bg);
color: var(--innkeeper-success);
font-size: 0.72em;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.innkeeper-property-card__badge-icon {
flex-shrink: 0;
}
.innkeeper-search-form__filter-label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.85em;
font-weight: 600;
}
.innkeeper-property-card__amenities {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-property-card__amenity {
padding: 0.15em 0.6em;
border-radius: 999px;
background: var(--innkeeper-bg-subtle);
font-size: 0.75em;
}
.innkeeper-property-card__footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: auto;
padding-top: 0.5rem;
}
.innkeeper-property-card__price-amount {
font-size: 1.2em;
font-weight: 700;
}
.innkeeper-property-card__price-total,
.innkeeper-property-card__price-unit {
display: block;
font-size: 0.8em;
color: var(--innkeeper-text-muted);
} .innkeeper-recommendation {
margin: 1.5rem 0;
padding: 1.25rem;
border: 1px dashed var(--innkeeper-primary);
border-radius: 8px;
background: var(--innkeeper-bg-subtle);
}
.innkeeper-recommendation__list {
margin: 0.5rem 0;
padding-left: 1.25rem;
} .innkeeper-breakdown {
width: 100%;
border-collapse: collapse;
}
.innkeeper-breakdown th,
.innkeeper-breakdown td {
padding: 0.4rem 0;
text-align: left;
font-weight: 400;
vertical-align: top;
}
.innkeeper-breakdown td {
text-align: right;
white-space: nowrap;
}
.innkeeper-breakdown__meta {
color: var(--innkeeper-text-muted);
font-size: 0.85em;
}
.innkeeper-breakdown__row--discount td {
color: var(--innkeeper-success);
}
.innkeeper-breakdown__total th,
.innkeeper-breakdown__total td {
padding-top: 0.6rem;
border-top: 2px solid var(--innkeeper-border);
font-size: 1.1em;
font-weight: 700;
}
.innkeeper-breakdown__deposit th,
.innkeeper-breakdown__deposit td {
color: var(--innkeeper-text-muted);
font-size: 0.9em;
} .innkeeper-checkout__section {
margin-bottom: 1.75rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--innkeeper-border);
}
.innkeeper-checkout__heading {
margin: 0 0 0.85rem;
font-size: 1.2em;
}
.innkeeper-checkout__grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
gap: 1rem;
}
.innkeeper-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.innkeeper-field--full {
grid-column: 1 / -1;
}
.innkeeper-field label {
font-size: 0.85em;
font-weight: 600;
}
.innkeeper-field input,
.innkeeper-field select,
.innkeeper-field textarea {
padding: 0.6em 0.7em;
border: 1px solid var(--innkeeper-border);
border-radius: 4px;
font: inherit;
}
.innkeeper-field__required {
color: var(--innkeeper-danger);
}
.innkeeper-field__inline {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 400;
}
.innkeeper-checkout__property-address,
.innkeeper-confirmation__property-address {
display: block;
margin: 0.25rem 0 0.75rem;
font-size: 0.9em;
color: var(--innkeeper-text-muted);
line-height: 1.5;
}
.innkeeper-address {
margin: 1.25rem 0 0;
padding: 0;
border: 0;
}
.innkeeper-address__legend {
margin: 0 0 0.85rem;
padding: 0;
font-size: 0.95em;
font-weight: 600;
}
.innkeeper-address__row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
@media ( max-width: 640px ) {
.innkeeper-address__row {
grid-template-columns: 1fr;
}
}
.innkeeper-phone-field {
display: flex;
align-items: stretch;
gap: 0;
}
.innkeeper-phone-field__prefix {
position: relative;
flex: 0 0 5.75rem;
width: 5.75rem;
max-width: 5.75rem;
}
.innkeeper-phone-field__dial {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 2.5rem;
padding: 0 0.35rem;
border: 1px solid var(--innkeeper-border);
border-right: 0;
border-radius: 4px 0 0 4px;
background: var(--innkeeper-bg-subtle);
font-weight: 600;
font-size: 0.92em;
pointer-events: none;
}
.innkeeper-phone-field__country {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
cursor: pointer;
}
.innkeeper-phone-field__input {
flex: 1 1 auto;
min-width: 0;
border-radius: 0 4px 4px 0;
}
.innkeeper-services {
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-services__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--innkeeper-border);
}
.innkeeper-services__info {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.innkeeper-services__name {
font-weight: 600;
}
.innkeeper-services__desc,
.innkeeper-services__price {
font-size: 0.85em;
color: var(--innkeeper-text-muted);
}
.innkeeper-services__qty {
width: 4rem;
padding: 0.4em;
border: 1px solid var(--innkeeper-border);
border-radius: 4px;
}
.innkeeper-coupon {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.innkeeper-coupon__input {
flex: 1 1 200px;
padding: 0.6em 0.7em;
border: 1px solid var(--innkeeper-border);
border-radius: 4px;
}
.innkeeper-coupon__message {
flex-basis: 100%;
margin: 0.25rem 0 0;
font-size: 0.9em;
}
.innkeeper-coupon__message.is-success {
color: var(--innkeeper-success);
}
.innkeeper-coupon__message.is-error {
color: var(--innkeeper-danger);
}
.innkeeper-payment__methods {
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-pay-balance-wrap {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--innkeeper-border);
box-sizing: border-box;
}
.innkeeper-pay-balance-wrap[data-open] {
padding: 1.25rem;
border: 2px solid var(--innkeeper-primary);
border-radius: 8px;
background: var(--innkeeper-info-bg);
box-sizing: border-box;
}
.innkeeper-pay-balance__amount table {
width: 100%;
margin: 0 0 0.75rem;
}
.innkeeper-pay-balance__amount .innkeeper-breakdown__total th {
text-align: left;
}
.innkeeper-pay-balance__amount .innkeeper-breakdown__total td {
text-align: right;
font-weight: 700;
}
.innkeeper-payment__method {
padding: 0.6rem 0;
}
.innkeeper-payment__desc {
margin: 0.25rem 0 0 1.6rem;
font-size: 0.85em;
color: var(--innkeeper-text-muted);
}
.innkeeper-payment__deposit {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1rem;
}
.innkeeper-checkout__totals {
margin-bottom: 1rem;
padding: 1.25rem;
border: 1px solid var(--innkeeper-border);
border-radius: 8px;
background: var(--innkeeper-bg-subtle);
}
.innkeeper-checkout__error {
margin: 0.5rem 0 0;
color: var(--innkeeper-danger);
font-size: 0.9em;
} .innkeeper-confirmation__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media ( min-width: 782px ) {
.innkeeper-confirmation__grid {
grid-template-columns: 1fr 1fr;
}
}
.innkeeper-confirmation__list {
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-confirmation__list li {
padding: 0.3rem 0;
} .innkeeper-account__auth-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
@media ( min-width: 782px ) {
.innkeeper-account__auth-grid {
grid-template-columns: 1fr 1fr;
}
}
.innkeeper-account__auth-card {
padding: 1.5rem;
border: 1px solid var(--innkeeper-border);
border-radius: var(--innkeeper-radius);
background: var(--innkeeper-card-bg);
}
.innkeeper-account__auth-card .innkeeper-account__title {
margin-top: 0;
}
.innkeeper-account__tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--innkeeper-border);
}
.innkeeper-account__tab {
padding: 0.6rem 1rem;
color: inherit;
text-decoration: none;
}
.innkeeper-account__tab.is-active {
border-bottom: 2px solid var(--innkeeper-primary);
font-weight: 600;
}
.innkeeper-account__tab--logout {
margin-left: auto;
}
.innkeeper-account__intro {
margin: 0 0 1.25rem;
color: var(--innkeeper-text-muted, #666);
}
.innkeeper-account__register {
margin-top: 1.25rem;
}
.innkeeper-field__hint {
margin: 0.35rem 0 0;
font-size: 0.85em;
color: var(--innkeeper-text-muted, #666);
}
.innkeeper-checkout__account-create {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--innkeeper-border);
}
.innkeeper-register-form .innkeeper-button {
margin-top: 0.5rem;
}
.innkeeper-bookings-table {
width: 100%;
border-collapse: collapse;
}
.innkeeper-bookings-table th,
.innkeeper-bookings-table td {
padding: 0.6rem 0.5rem;
border-bottom: 1px solid var(--innkeeper-border);
text-align: left;
}
.innkeeper-bookings-table__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.innkeeper-status {
display: inline-block;
padding: 0.15em 0.6em;
border-radius: 999px;
background: var(--innkeeper-bg-subtle);
font-size: 0.8em;
}
.innkeeper-status--confirmed {
background: var(--innkeeper-success-bg);
color: var(--innkeeper-success);
}
.innkeeper-status--cancelled {
background: var(--innkeeper-danger-bg);
color: var(--innkeeper-danger);
}
.innkeeper-status--pending_payment,
.innkeeper-status--pending_admin,
.innkeeper-status--pending_guest {
background: var(--innkeeper-warning-bg);
color: var(--innkeeper-warning-text);
} .innkeeper-direct-booking {
margin: 2rem 0;
padding: 1.5rem;
border: 1px solid var(--innkeeper-border);
border-radius: 8px;
}
.innkeeper-direct-booking__fields {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-end;
}
.innkeeper-direct-booking__result {
margin-top: 1rem;
} .innkeeper-rates {
list-style: none;
margin: 0;
padding: 0;
}
.innkeeper-rates__item {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid var(--innkeeper-border);
border-radius: 8px;
}
.innkeeper-rates__label {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
align-items: center;
cursor: pointer;
}
.innkeeper-rates__name {
font-weight: 600;
}
.innkeeper-rates__price {
margin-left: auto;
}
.innkeeper-rates__policy,
.innkeeper-cancel-policy {
margin-top: 0.75rem;
font-size: 0.9em;
color: var(--innkeeper-text-muted);
}
.innkeeper-cancel-policy__tiers {
margin: 0.5rem 0 0 1.25rem;
padding: 0;
}
.innkeeper-confirmation__cancel,
.innkeeper-cancel-panel {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--innkeeper-border);
} .innkeeper-pet-policy-display {
margin: 2rem 0 0;
padding: 1.25rem;
border: 1px solid var(--innkeeper-border);
border-radius: 8px;
background: Canvas;
}
.innkeeper-pet-policy-display__title {
margin: 0 0 0.75rem;
font-size: 1.15rem;
}
.innkeeper-pet-policy-display__list {
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-pet-policy-display__item + .innkeeper-pet-policy-display__item {
margin-top: 0.5rem;
}
.innkeeper-pet-policy-display__meta {
display: block;
color: var(--innkeeper-text-muted);
font-size: 0.9em;
}
.innkeeper-pet-policy-display__notes {
margin-top: 0.85rem;
font-size: 0.9em;
color: var(--innkeeper-text-muted);
}
.innkeeper-checkout-pets__intro {
margin: 0 0 0.75rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-checkout-pets__list {
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-checkout-pets__item {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: center;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid var(--innkeeper-border);
}
.innkeeper-checkout-pets__item:last-child {
border-bottom: 0;
}
.innkeeper-checkout-pets__meta {
display: block;
font-size: 0.85em;
color: var(--innkeeper-text-muted);
}
.innkeeper-checkout-pets__qty {
width: 4.5rem;
}
.innkeeper-checkout-pets__notes {
margin-top: 0.75rem;
font-size: 0.9em;
color: var(--innkeeper-text-muted);
}.innkeeper {
--innkeeper-sidebar-width: 380px;
}
.innkeeper .innkeeper-button--primary {
border-color: var(--innkeeper-primary);
background: var(--innkeeper-primary);
color: var(--innkeeper-primary-contrast);
}
.innkeeper .innkeeper-button--outline {
border: 1px solid var(--innkeeper-primary);
background: transparent;
color: var(--innkeeper-primary);
}
.innkeeper .innkeeper-button--danger {
border: 1px solid var(--innkeeper-danger);
background: transparent;
color: var(--innkeeper-danger);
} .innkeeper .innkeeper-button:hover,
.innkeeper .innkeeper-button:focus-visible,
.innkeeper .innkeeper-button--primary:hover,
.innkeeper .innkeeper-button--primary:focus-visible,
.innkeeper .innkeeper-button--outline:hover,
.innkeeper .innkeeper-button--outline:focus-visible,
.innkeeper .innkeeper-button--danger:hover,
.innkeeper .innkeeper-button--danger:focus-visible { background-color: var(--innkeeper-button-hover-bg) !important;
border-color: var(--innkeeper-button-hover-bg) !important;
color: var(--innkeeper-button-hover-text) !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--innkeeper-primary) 30%, transparent);
}
.innkeeper .innkeeper-button--pay {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.innkeeper-card {
background: var(--innkeeper-card-bg);
border: 1px solid var(--innkeeper-border);
border-radius: var(--innkeeper-radius);
padding: 1.25rem;
}
.innkeeper-card--subtle {
background: var(--innkeeper-card-bg);
}
.innkeeper-booking-summary.innkeeper-card {
margin-bottom: 0;
}
.innkeeper-section-heading {
margin: 0 0 1rem;
padding-bottom: 0.65rem;
border-bottom: 2px solid var(--innkeeper-primary);
font-size: 1.15rem;
}
.innkeeper-meta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.innkeeper-meta-grid__label {
display: block;
margin-bottom: 0.35rem;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--innkeeper-text-muted);
}
.innkeeper-meta-grid__value {
display: block;
font-size: 1rem;
}
.innkeeper-meta-grid__sub {
display: block;
margin-top: 0.2rem;
font-size: 0.85rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-property-thumb {
display: block;
overflow: hidden;
border-radius: 8px;
flex-shrink: 0;
}
.innkeeper-property-thumb--sm {
width: 80px;
height: 80px;
}
.innkeeper-property-thumb--md {
width: 100px;
height: 100px;
}
.innkeeper-property-thumb--lg {
width: 100%;
aspect-ratio: 16 / 10;
margin-bottom: 1rem;
}
.innkeeper-property-thumb__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.innkeeper-property-thumb--placeholder {
background: linear-gradient(135deg, var(--innkeeper-bg-subtle), color-mix(in srgb, var(--innkeeper-primary) 18%, Canvas));
}
.innkeeper-property-card__header {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.innkeeper-property-card__info {
flex: 1;
min-width: 0;
}
.innkeeper-property-card__title {
margin: 0 0 0.25rem;
font-size: 1.1rem;
}
.innkeeper-property-card__address {
display: block;
font-size: 0.9rem;
color: var(--innkeeper-text-muted);
line-height: 1.45;
}
.innkeeper-booking .innkeeper-property-card--detailed > .innkeeper-property-card {
border: 0;
border-radius: 0;
background: transparent;
overflow: visible;
display: block;
}
.innkeeper-booking .innkeeper-property-card--detailed .innkeeper-property-card__title {
margin: 0 0 0.35rem;
font-size: 1.25rem;
line-height: 1.35;
}
.innkeeper-booking .innkeeper-property-card--detailed .innkeeper-property-card__address {
margin-bottom: 0.35rem;
font-size: 0.95rem;
line-height: 1.5;
}
.innkeeper-booking .innkeeper-property-card--detailed .innkeeper-meta-grid {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--innkeeper-border);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
.innkeeper-booking .innkeeper-property-card--detailed .innkeeper-meta-grid__value {
word-break: normal;
overflow-wrap: anywhere;
}
.innkeeper-badge {
display: inline-block;
margin-top: 0.5rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
.innkeeper-badge--success {
background: var(--innkeeper-success-bg);
color: var(--innkeeper-success);
}
.innkeeper-badge--warning {
background: var(--innkeeper-warning-bg);
color: var(--innkeeper-warning-text);
}
.innkeeper-badge--danger {
background: var(--innkeeper-danger-bg);
color: var(--innkeeper-danger);
}
.innkeeper-progress {
margin-bottom: 2rem;
}
.innkeeper-progress__list {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-progress__step {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
text-align: center;
}
.innkeeper-progress__step:not(:last-child)::after {
content: "";
position: absolute;
top: 15px;
left: calc(50% + 18px);
width: calc(100% - 36px);
height: 2px;
background: var(--innkeeper-border);
}
.innkeeper-progress__step--complete:not(:last-child)::after {
background: var(--innkeeper-primary);
}
.innkeeper-progress__marker {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--innkeeper-border);
background: Canvas;
font-size: 0.85rem;
font-weight: 600;
color: var(--innkeeper-text-muted);
z-index: 1;
}
.innkeeper-progress__step--complete .innkeeper-progress__marker,
.innkeeper-progress__step--current .innkeeper-progress__marker {
border-color: var(--innkeeper-primary);
background: var(--innkeeper-primary);
color: var(--innkeeper-primary-contrast);
}
.innkeeper-progress__label {
font-size: 0.78rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-progress__step--current .innkeeper-progress__label {
font-weight: 700;
color: var(--innkeeper-primary);
}
.innkeeper-progress__step--upcoming .innkeeper-progress__label {
color: var(--innkeeper-text-muted);
}
.innkeeper-progress {
margin-bottom: 1.5rem;
}
.innkeeper-checkout,
.innkeeper-booking,
.innkeeper-booking--wide {
max-width: 1100px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
} .entry-content > .innkeeper-booking--wide,
.page-content > .innkeeper-booking--wide,
.wp-block-post-content > .innkeeper-booking--wide,
.site-main > .innkeeper-booking--wide {
width: min(100%, 1100px);
max-width: 1100px;
}
.innkeeper-checkout__layout,
.innkeeper-booking__layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start;
}
.innkeeper-checkout__main,
.innkeeper-checkout__payment,
.innkeeper-checkout__sidebar,
.innkeeper-booking__main,
.innkeeper-sidebar {
min-width: 0;
}
.innkeeper-booking__main {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media ( min-width: 900px ) {
.innkeeper-checkout,
.innkeeper-booking,
.innkeeper-booking--wide {
min-width: min(1000px, 100%);
}
.innkeeper-checkout__layout,
.innkeeper-booking__layout {
grid-template-columns: minmax(0, 1fr) var(--innkeeper-sidebar-width);
gap: 32px;
}
.innkeeper-checkout__main {
grid-column: 1;
grid-row: 1;
}
.innkeeper-checkout__sidebar {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
}
.innkeeper-checkout__payment {
grid-column: 1;
grid-row: 2;
}
}
.innkeeper-sidebar--sticky {
position: sticky;
top: 1.5rem;
}
@media ( max-width: 899px ) {
.innkeeper-sidebar--sticky {
position: static;
}
.innkeeper-checkout__main,
.innkeeper-checkout__sidebar,
.innkeeper-checkout__payment {
grid-column: 1;
grid-row: auto;
}
}
.innkeeper-checkout .innkeeper-phone-field {
width: 100%;
}
.innkeeper-checkout .innkeeper-phone-field__dial {
border-color: var(--innkeeper-border);
background: var(--innkeeper-bg-subtle);
}
.innkeeper-checkout .innkeeper-phone-field__input {
border-color: var(--innkeeper-border);
}
.innkeeper-checkout__grid--guest {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.innkeeper-checkout__grid--guest .innkeeper-field--full {
grid-column: 1 / -1;
}
.innkeeper-checkout .innkeeper-field input:not([type="checkbox"]):not([type="radio"]),
.innkeeper-checkout .innkeeper-field select,
.innkeeper-checkout .innkeeper-field textarea {
width: 100%;
box-sizing: border-box;
}
.innkeeper-checkout .innkeeper-address__row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1rem;
}
.innkeeper-checkout .innkeeper-address {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-top: 0.25rem;
}
.innkeeper-checkout .innkeeper-address__legend {
margin: 0;
}
.innkeeper-checkout .innkeeper-field--special-requests {
margin-top: 1.5rem;
}
.innkeeper-checkout .innkeeper-field--terms {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--innkeeper-border);
}
.innkeeper-checkout .innkeeper-payment-options {
margin-bottom: 1.5rem;
}
.innkeeper-checkout__full-payment-note {
margin: 0 0 1.25rem;
}
.innkeeper-checkout__account-create {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--innkeeper-border);
}
.innkeeper-checkout__account-password {
margin-top: 1rem;
padding-top: 0.25rem;
}
.innkeeper-password-field {
position: relative;
display: block;
}
.innkeeper-password-field__input {
width: 100%;
padding-right: 3rem;
} .innkeeper-password-field__toggle {
position: absolute;
top: 0;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 100%;
padding: 0;
margin: 0;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--innkeeper-text-muted);
cursor: pointer;
}
.innkeeper-password-field__toggle:hover,
.innkeeper-password-field__toggle:focus-visible {
background: transparent !important;
box-shadow: none !important;
color: var(--innkeeper-primary) !important;
outline: none;
}
.innkeeper-password-field__toggle:disabled {
cursor: default;
opacity: 0.5;
}
.innkeeper-password-field__icon--hide {
display: none;
}
.innkeeper-password-field.is-revealed .innkeeper-password-field__icon--show {
display: none;
}
.innkeeper-password-field.is-revealed .innkeeper-password-field__icon--hide {
display: inline-flex;
}
.innkeeper-checkout__auth {
margin-bottom: 1.5rem;
padding: 1.25rem;
border: 1px solid var(--innkeeper-border);
border-radius: var(--innkeeper-radius);
background: var(--innkeeper-card-bg);
}
.innkeeper-checkout__auth-intro {
margin: 0 0 1rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-checkout__auth-panel {
margin-top: 1rem;
}
.innkeeper-checkout__auth-form .innkeeper-field {
margin-bottom: 0.75rem;
}
.innkeeper-checkout__auth-error {
margin: 0 0 0.75rem;
color: var(--innkeeper-danger);
}
.innkeeper-checkout__auth-links {
margin: 0.75rem 0 0;
}
.innkeeper-checkout__auth-links a {
color: var(--innkeeper-primary);
font-weight: 600;
}
.innkeeper-checkout__error a {
color: var(--innkeeper-primary);
font-weight: 600;
text-decoration: underline;
}
.innkeeper-checkout .innkeeper-field__inline--terms {
align-items: flex-start;
gap: 0.65rem;
}
.innkeeper-checkout .innkeeper-field__terms-text {
flex: 1;
min-width: 0;
line-height: 1.5;
}
.innkeeper-checkout .innkeeper-field__terms-text a,
.innkeeper-checkout .innkeeper-field__terms-text a:visited,
.innkeeper-checkout .innkeeper-field__terms-text a:hover {
color: var(--innkeeper-primary);
text-decoration: underline;
font-weight: 600;
}
.innkeeper-field--special-requests textarea {
min-height: 100px;
resize: vertical;
}
.innkeeper-deposit-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.25rem;
}
.innkeeper-deposit-option {
display: flex;
align-items: flex-start;
margin: 0;
padding: 1rem 1.1rem;
border: 1px solid var(--innkeeper-border);
border-radius: 8px;
background: var(--innkeeper-card-bg);
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.innkeeper-deposit-option:has(.innkeeper-deposit-option__radio:checked) {
border-color: var(--innkeeper-primary);
box-shadow: 0 0 0 1px var(--innkeeper-primary);
}
.innkeeper-deposit-option__radio {
flex-shrink: 0;
margin: 0 0.65rem 0 0;
}
.innkeeper-deposit-option__content {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.innkeeper-deposit-option__title {
font-size: 0.9rem;
font-weight: 600;
}
.innkeeper-deposit-option__amount {
font-size: 1.25rem;
font-weight: 700;
color: var(--innkeeper-primary);
}
.innkeeper-deposit-option__desc {
font-size: 0.82rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-payment-options {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.innkeeper-payment-option {
border: 1px solid var(--innkeeper-border);
border-radius: 8px;
background: var(--innkeeper-card-bg);
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.innkeeper-payment-option:has(.innkeeper-payment-option__radio:checked) {
border-color: var(--innkeeper-primary);
box-shadow: 0 0 0 1px var(--innkeeper-primary);
}
.innkeeper-payment-option__header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 0;
padding: 1rem 1.1rem;
cursor: pointer;
}
.innkeeper-payment-option__radio {
flex-shrink: 0;
margin-top: 0.15rem;
}
.innkeeper-payment-option__body {
flex: 1;
min-width: 0;
}
.innkeeper-payment-option__title {
display: block;
font-weight: 600;
}
.innkeeper-payment-option__desc {
display: block;
margin-top: 0.25rem;
font-size: 0.85rem;
color: var(--innkeeper-text-muted);
line-height: 1.45;
}
.innkeeper-payment-option__form {
padding: 1rem 1.1rem;
border-top: 1px solid var(--innkeeper-border);
background: var(--innkeeper-bg-subtle);
}
.innkeeper-payment-option__form[hidden] {
display: none;
}
.innkeeper-payment-option__instructions {
margin: 0;
font-size: 0.9rem;
color: var(--innkeeper-text-muted);
line-height: 1.5;
}
@media ( max-width: 640px ) {
.innkeeper-checkout__grid--guest,
.innkeeper-deposit-options,
.innkeeper-checkout .innkeeper-address__row {
grid-template-columns: 1fr;
}
}
.innkeeper-sidebar__title {
margin: 0 0 0.25rem;
font-size: 1rem;
}
.innkeeper-sidebar__card.innkeeper-card {
--innkeeper-sidebar-card-padding-x: 1.5rem;
--innkeeper-sidebar-card-padding-y: 1.5rem;
padding: 0;
overflow: hidden;
}
.innkeeper-checkout__sidebar .innkeeper-sidebar__card.innkeeper-card > :not(.innkeeper-property-thumb):not(.innkeeper-property-thumb--lg) {
padding-left: var(--innkeeper-sidebar-card-padding-x);
padding-right: var(--innkeeper-sidebar-card-padding-x);
}
.innkeeper-sidebar__card.innkeeper-card > :first-child:not(.innkeeper-property-thumb):not(.innkeeper-property-thumb--lg) {
padding-top: var(--innkeeper-sidebar-card-padding-y);
}
.innkeeper-sidebar__card.innkeeper-card > :last-child {
padding-bottom: var(--innkeeper-sidebar-card-padding-y);
}
.innkeeper-sidebar__card > .innkeeper-property-thumb,
.innkeeper-sidebar__card > .innkeeper-property-thumb--lg {
border-radius: 0;
}
.innkeeper-sidebar__property {
padding-top: 1rem;
}
.innkeeper-sidebar__breakdown {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.innkeeper-sidebar__address {
display: block;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-sidebar__heading {
margin: 0 0 1rem;
font-size: 1.05rem;
}
.innkeeper-sidebar__deposit-note,
.innkeeper-sidebar__balance-note {
margin: 1rem 0 0;
font-size: 0.9rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-policy-box {
margin-top: 1rem;
padding: 1rem;
border-radius: 8px;
}
.innkeeper-policy-box--success {
background: var(--innkeeper-success-bg);
border: 1px solid color-mix(in srgb, var(--innkeeper-success) 20%, transparent);
}
.innkeeper-policy-box--warning {
background: var(--innkeeper-warning-bg);
border: 1px solid color-mix(in srgb, var(--innkeeper-warning) 20%, transparent);
}
.innkeeper-policy-box__title {
margin: 0 0 0.5rem;
font-size: 0.95rem;
}
.innkeeper-policy-box__content {
font-size: 0.85rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-checkout__balance-note {
margin: 0.65rem 0 0;
font-size: 0.85rem;
color: var(--innkeeper-text-muted);
text-align: center;
}
.innkeeper-banner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.65rem;
width: 100%;
margin-bottom: 1.5rem;
padding: 1.75rem 1.5rem;
border-radius: var(--innkeeper-radius);
text-align: center;
background: var(--innkeeper-success-bg);
border: 1px solid color-mix(in srgb, var(--innkeeper-success) 18%, transparent);
box-sizing: border-box;
}
.innkeeper-banner__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--innkeeper-primary);
color: var(--innkeeper-primary-contrast);
flex-shrink: 0;
}
.innkeeper-banner__title {
margin: 0;
font-size: 1.5rem;
line-height: 1.25;
color: var(--innkeeper-success);
}
.innkeeper-banner__ref {
margin: 0;
font-weight: 600;
font-size: 1rem;
}
.innkeeper-banner__note {
margin: 0;
max-width: 36rem;
font-size: 0.95rem;
line-height: 1.5;
color: var(--innkeeper-text-muted);
}
.innkeeper-booking__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.innkeeper-booking__header-main {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.innkeeper-booking__title {
margin: 0;
font-size: 1.5rem;
}
.innkeeper-booking__timeline-wrap {
margin-bottom: 1.5rem;
padding: 1rem;
}
.innkeeper-timeline__list {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
gap: 0.5rem;
}
.innkeeper-timeline__step {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.35rem;
}
.innkeeper-timeline__step:not(:last-child)::after {
content: "";
position: absolute;
top: 11px;
left: calc(50% + 14px);
width: calc(100% - 28px);
height: 2px;
background: var(--innkeeper-border);
}
.innkeeper-timeline__step--complete:not(:last-child)::after {
background: var(--innkeeper-primary);
}
.innkeeper-timeline__marker {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--innkeeper-border);
background: Canvas;
z-index: 1;
}
.innkeeper-timeline__step--complete .innkeeper-timeline__marker {
border-color: var(--innkeeper-primary);
background: var(--innkeeper-primary);
color: var(--innkeeper-primary-contrast);
}
.innkeeper-timeline__label {
display: block;
font-size: 0.78rem;
font-weight: 600;
}
.innkeeper-timeline__date {
display: block;
font-size: 0.72rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-next-steps__list {
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-next-steps__list li {
display: flex;
gap: 0.75rem;
align-items: flex-start;
margin-bottom: 0.85rem;
}
.innkeeper-next-steps__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--innkeeper-bg-subtle);
border: 1px solid var(--innkeeper-border);
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 0;
}
.innkeeper-next-steps__text {
font-size: 0.92rem;
color: var(--innkeeper-text-muted);
}
.innkeeper-payment-card__list {
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-payment-card__list li {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--innkeeper-border);
}
.innkeeper-payment-card__label {
color: var(--innkeeper-text-muted);
font-size: 0.9rem;
}
.innkeeper-payment-card__balance--due strong {
color: var(--innkeeper-danger);
}
.innkeeper-payment-card {
min-width: 0;
}
.innkeeper-payment-card .innkeeper-pay-balance-wrap {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.innkeeper-payment-card .innkeeper-pay-balance-wrap[data-open] {
box-sizing: border-box;
}
.innkeeper-payment-card .innkeeper-pay-balance-wrap .innkeeper-button,
.innkeeper-payment-card .innkeeper-pay-balance-wrap .innkeeper-pay-balance {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.innkeeper-payment-card .innkeeper-payment__methods,
.innkeeper-payment-card .innkeeper-payment__form {
max-width: 100%;
}
.innkeeper-paid-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
padding: 0.75rem 1rem;
border-radius: 8px;
background: var(--innkeeper-success-bg);
}
.innkeeper-paid-bar__amount {
color: var(--innkeeper-success);
}
.innkeeper-booking__actions,
.innkeeper-sidebar__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-top: 1rem;
width: 100%;
}
.innkeeper-sidebar__actions .innkeeper-button {
display: block;
width: 100%;
box-sizing: border-box;
}
.innkeeper-add-calendar-wrap.innkeeper-card {
padding: 1.25rem 1.5rem;
}
.innkeeper-add-calendar-wrap .innkeeper-add-calendar {
margin: 0;
}
.innkeeper-add-calendar {
margin: 0;
}
.innkeeper-add-calendar__heading {
margin: 0 0 0.75rem;
font-size: 0.95rem;
font-weight: 600;
color: CanvasText;
}
.innkeeper-add-calendar__links {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
.innkeeper-add-calendar__links li {
margin: 0;
padding: 0;
}
.innkeeper-add-calendar__links a,
.innkeeper-add-calendar__links a:visited {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.85rem;
border: 1px solid var(--innkeeper-border);
border-radius: 8px;
background: var(--innkeeper-card-bg);
color: var(--innkeeper-primary);
font-size: 0.88rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
opacity: 1;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.innkeeper-add-calendar__links a:hover,
.innkeeper-add-calendar__links a:focus-visible {
border-color: var(--innkeeper-primary);
background: color-mix(in srgb, var(--innkeeper-primary) 10%, var(--innkeeper-card-bg));
color: var(--innkeeper-primary);
}
.innkeeper-add-calendar__links .innkeeper-icon {
flex-shrink: 0;
color: currentColor;
opacity: 1;
}
.innkeeper-cancel-section {
margin-top: 1.5rem;
}
.innkeeper-breakdown {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.innkeeper-breakdown th,
.innkeeper-breakdown td {
padding: 0.45rem 0;
border-bottom: 1px solid var(--innkeeper-border);
text-align: left;
vertical-align: top;
}
.innkeeper-breakdown td {
text-align: right;
white-space: nowrap;
}
.innkeeper-breakdown__total th,
.innkeeper-breakdown__total td {
font-weight: 700;
border-bottom: 0;
}
.innkeeper-breakdown__meta {
font-weight: 400;
color: var(--innkeeper-text-muted);
}
@media ( max-width: 640px ) {
.innkeeper-meta-grid {
grid-template-columns: 1fr;
}
.innkeeper-progress__label {
font-size: 0.68rem;
}
.innkeeper-timeline__list {
flex-direction: column;
align-items: stretch;
}
.innkeeper-timeline__step {
flex-direction: row;
text-align: left;
}
.innkeeper-timeline__step:not(:last-child)::after {
display: none;
}
.innkeeper-booking__header {
flex-direction: column;
align-items: flex-start;
}
} .innkeeper-account-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.innkeeper-account-cta__text {
margin: 0;
flex: 1 1 260px;
color: var(--innkeeper-text-muted);
}
.innkeeper-account-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
} .innkeeper-print-header {
display: none;
}
@media print { #wpadminbar,
.site-header,
.site-footer,
#masthead,
#colophon,
.elementor-location-header,
.elementor-location-footer,
[data-elementor-type="header"],
[data-elementor-type="footer"] {
display: none !important;
} body * {
visibility: hidden !important;
}
.innkeeper-booking,
.innkeeper-booking * {
visibility: visible !important;
}
.innkeeper-booking {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
} .innkeeper-print-header {
display: block !important;
visibility: visible !important;
margin: 0 0 16px !important;
text-align: left !important;
}
.innkeeper-print-logo {
max-height: 64px !important;
width: auto !important;
}
.innkeeper-print-logo-text {
font-size: 20px !important;
font-weight: 700 !important;
} .innkeeper-no-print,
.innkeeper-progress,
.innkeeper-account-cta,
.innkeeper-sidebar__actions,
.innkeeper-cancel-section,
.innkeeper-pay-balance-wrap,
.innkeeper-add-calendar,
.innkeeper-add-calendar-wrap,
.innkeeper-booking .innkeeper-button,
.innkeeper-booking button {
display: none !important;
} .innkeeper-booking__layout {
display: block !important;
}
.innkeeper-sidebar,
.innkeeper-sidebar--sticky {
position: static !important;
width: auto !important;
max-width: 100% !important;
margin-top: 16px !important;
} .innkeeper-booking a[href]::after {
content: "" !important;
} .innkeeper-card {
box-shadow: none !important;
border: 1px solid #ccc !important;
break-inside: avoid;
page-break-inside: avoid;
}
}