.preview-badge{position:fixed;bottom:12px;left:12px;z-index:80;padding:8px 12px;border-radius:8px;background:#000;color:#fff;font:12px Inter,sans-serif;box-shadow:0 2px 8px #0002}
.preview-dialog{position:fixed;inset:0;margin:auto;overflow:auto;border:0;border-radius:12px;padding:20px;width:min(93vw,600px);max-height:90vh;max-height:90dvh;background:var(--vh-white);color:var(--vh-black)}
.preview-dialog::backdrop{background:#0006;backdrop-filter:blur(4px)}
.preview-dialog header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.preview-dialog h2{font-size:24px;font-weight:600}.preview-dialog-body{font-size:16px}.preview-dialog-body p{margin-bottom:16px;color:var(--vh-muted)}
.preview-icon{width:40px;height:40px;border:0;border-radius:8px;background:var(--vh-line);color:var(--vh-black);font-size:24px;cursor:pointer;flex-shrink:0}
.preview-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:var(--vh-surface-muted);border-radius:8px;margin-bottom:8px;cursor:pointer}
.preview-primary{background:var(--vh-black);color:var(--vh-white);padding:12px 20px;border-radius:8px;cursor:pointer;margin-top:16px}
.preview-dialog input[type=date]{display:block;width:100%;padding:12px;border:1px solid var(--vh-line);border-radius:8px;margin:8px 0 16px}.preview-dialog label{display:block}
.preview-gallery img{width:100%;border-radius:8px;margin-bottom:12px}.preview-links{display:grid;gap:16px}.preview-links a{font-size:20px}
[data-demo-guest-value]{font-variant-numeric:tabular-nums}.cabin-preview-card[aria-hidden]{visibility:visible}
.preview-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:20px 0}.preview-calendar>span{text-align:center;color:var(--vh-muted);font-size:12px}.preview-day{padding:12px 0;border-radius:8px;cursor:pointer}.preview-day:hover{background:var(--vh-surface-muted)}.preview-day.selected{background:var(--vh-black);color:var(--vh-white)}.preview-row .preview-icon{width:32px;height:32px;font-size:20px;display:inline-grid;place-items:center}

.preview-booking .preview-row{min-height:72px;padding:12px 16px;text-align:left;border:0;cursor:default}
.preview-booking button.preview-row{cursor:pointer}
.preview-booking .preview-row>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.preview-booking .preview-row .preview-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:var(--vh-radius-control)}
.preview-booking button.preview-icon:hover{background:var(--vh-muted);color:var(--vh-white)}
.preview-booking button:focus-visible,.preview-booking input:focus-visible{outline:2px solid var(--vh-blue);outline-offset:3px}
.preview-booking input[type=checkbox]{appearance:auto;width:var(--vh-control-xs-size);height:var(--vh-control-xs-size);flex-shrink:0;margin:0;accent-color:var(--vh-black);cursor:pointer}
.preview-booking label{gap:16px;cursor:pointer}
.preview-booking .preview-primary{min-height:52px;font-weight:500;font-size:16px;line-height:24px;border:0}

/* Match the original app's centered modal shell and controls. */
body:has(.preview-dialog[open]){overflow:hidden}
.preview-dialog{width:93vw;max-width:512px;padding:0;border-radius:12px;box-shadow:0 25px 50px -12px #0004}
.preview-dialog::backdrop{background:#0006;backdrop-filter:blur(4px)}
.preview-dialog header{position:relative;min-height:72px;align-items:flex-start;padding:20px 72px 8px 20px;margin:0}
.preview-dialog h2{font-family:var(--font-heading);font-size:24px;line-height:32px;font-weight:500}
.preview-dialog header>[data-close]{position:absolute;top:20px;right:20px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:var(--vh-surface-muted)}
.preview-dialog-body{padding:8px 20px 20px}
.preview-dialog .preview-row{display:flex;min-height:64px;gap:16px;text-align:left;padding:16px;border:1px solid transparent}
.preview-dialog label.preview-row:has(input:checked){border-color:var(--vh-black);background:var(--vh-surface-muted)}
.preview-dialog input[type=checkbox]{appearance:auto;width:var(--vh-control-xs-size);height:var(--vh-control-xs-size);margin:0;flex-shrink:0;accent-color:var(--vh-black);cursor:pointer}
.preview-dialog .preview-primary{display:block;min-height:52px;width:100%;border:0;font-size:16px;line-height:24px;font-weight:500;margin-top:24px}
.preview-dialog button:focus-visible,.preview-dialog input:focus-visible{outline:2px solid var(--vh-blue);outline-offset:2px}
.preview-dialog--calendar{max-width:768px}
.preview-dialog--gallery{max-width:1152px}
.preview-month{text-align:center;font-size:14px;line-height:44px;font-weight:600}
.preview-calendar{gap:1px;max-width:420px;margin:0 auto 20px}
.preview-calendar>span{font-size:14px;font-weight:500;padding:8px 0}
.preview-calendar>i{aspect-ratio:1}
.preview-day{aspect-ratio:1;padding:0;border:0;font-size:14px;font-weight:500;background:white}
.preview-day.in-range{background:var(--vh-surface-muted);border-radius:0}
.preview-day.selected{background:var(--vh-black);color:white}
@media(prefers-reduced-motion:no-preference){.preview-dialog[open]{animation:preview-modal-in .2s ease-out}@keyframes preview-modal-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}}

.preview-dialog header>.content-block{width:100%}
.preview-dialog header>.content-block>p{margin:0}
.preview-dialog-body:empty{display:none}

.preview-calendar-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.preview-calendar-months .preview-calendar{width:100%;margin-bottom:12px}
.preview-calendar-navigation{display:flex;justify-content:space-between;margin-bottom:-40px;position:relative;pointer-events:none}
.preview-calendar-navigation button{pointer-events:auto;display:grid;place-items:center;background:transparent}
.preview-date-summary{font-size:14px;line-height:20px;margin:8px 0 0}
.preview-dialog .preview-primary:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:639px){.preview-calendar-months{grid-template-columns:1fr}.preview-calendar-month:nth-child(2){display:none}}

/* Choice controls share the soft button surface rather than native borders. */
input[type=checkbox],input[type=radio],
.choice-control input,
.preview-booking input[type=checkbox],.preview-dialog input[type=checkbox]{
 appearance:none;box-sizing:border-box;display:inline-block;vertical-align:middle;
 width:var(--vh-control-xs-size);height:var(--vh-control-xs-size);padding:0;margin:0;
 border:0;background-color:var(--vh-surface-muted);background-image:none;
 color:var(--vh-black);box-shadow:none;cursor:pointer;flex-shrink:0;
 transition:background-color .15s;
}
input[type=checkbox]{border-radius:var(--vh-radius-control)}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{background-color:var(--vh-line)}
input[type=checkbox]:checked,input[type=radio]:checked,
input[type=checkbox]:checked:hover,input[type=radio]:checked:hover,
input[type=checkbox]:checked:focus,input[type=radio]:checked:focus{
 background-color:var(--vh-black);background-position:center;background-repeat:no-repeat;border:0;box-shadow:none;
}
input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");background-size:20px 20px}
input[type=radio]:checked{background-image:radial-gradient(circle,white 0 5px,transparent 5.5px);background-size:100% 100%}
input[type=checkbox]:indeterminate{background-color:var(--vh-black);background-image:linear-gradient(white,white);background-size:14px 2px;background-position:center;background-repeat:no-repeat}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--vh-blue);outline-offset:3px;box-shadow:none}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.4;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){input[type=checkbox],input[type=radio]{transition:none}}