/* 
  style.css contains a reset, font normalization and some base styles.
  
  credit is left where credit is due.
*/


/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:98%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, figure, footer, header, 
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:top; }
/* END RESET CSS */

/* 
 * Fix overflow in IE 
 */
html {
	*overflow-x:hidden;	
}

There are three custom edits:
 * remove arial, helvetica from explicit font stack
 * make the line-height relative and unit-less
 * remove the pre, code styles
*/
body { font-size:12px; line-height:1.22;}

table { font-size:inherit; font:100%; }

select, input, textarea { font:99%; }


/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }
 

/* 
 * minimal base styles 
 */


/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 
body, select, textarea { color:#474646; }

/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }

 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

a, a:active, a:visited { color:#607890; }
a:hover { color:#036; }


ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }

small { font-size:85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align:top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; width: 20px;}
input[type="checkbox"] { margin:0px; vertical-align:-2px; width: 20px;}
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
/* label, input[type=button], input[type=submit], button { cursor: pointer; } */


/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 
   Also: hot pink. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } 

/*  j.mp/webkit-tap-highlight-color - #FF5E99 was this old boilerplate reset's own placeholder
    hot pink (see the ::selection joke above), never themed for this app; neutralised here so a
    themed one can replace it inside .booking-shell without a stray pink flash anywhere else */
a:link { -webkit-tap-highlight-color: transparent; }


/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }



/*////   - Body Styles -   ////*/

html {
    font-size: 14px;
	color:#333;
	background-color: #FFF;
}
h1#logo {
	background:url(../../img/logo.png) no-repeat scroll 0 0 transparent;
}
nav a, nav a:visited {
	color: #1a1a1a !important;	
text-shadow:0 1px 0 #FFFFFF;
}
nav a:hover {
	color:#666666;
}

footer {
color:#666666;
}
footer li a, footer li a:visited  {
color:#191919;
}
footer li a:hover {
	color:#666666;
}

#wrapper {
	width:980px;
	margin:0 auto;
}
a, a:hover {
	text-decoration:none;
}
/*////   - Headings -   ////*/
h1 {
	font-size:20px;
	color:#888;
	margin:10px 0 0 0px;
	line-height:20px;
}
h1 span {
	color:#000;
}
h2 {
	font-size: 18px;
	margin-bottom: 8px;
}

h3 {
	font-size: 16px;
	margin-bottom: 5px;
}

h4 {
	font-size: 14px;
	margin-bottom: 5px;
}

/*////   - Misc -   ////*/
.fl {
	float:left;
}
img.fl {
	margin:0 25px 25px 0;
}
.fr {
	float:right;
}
img.fr {
	margin:0 0 25px 25px;
}
.fn {
	float:none!important;
}
.cl {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.tl {
	text-align:left;
}
.tr {
	text-align:right;
}
.tc {
	text-align:center;
}
.hd {
	display: none;
}
.strong {
	font-weight: 700!important;
}
.no-margin {
	margin:0!important;
}
.no-padding {
	padding:0!important;
}
.margin-left {
	margin-left:20px;
}
.margin-right {
	margin-right:20px;
}
.margin-top {
	margin-top:20px;
}
.margin-bottom {
	margin-bottom:20px;
}
.border-top {
	border-top:1px solid #D9D9D9;
	padding-top:10px;
	margin-top:20px;
}
.border-left {
	border-left:1px solid #D9D9D9;
	padding-left:10px;
	margin-left:20px;
}
.border-bottom {
	border-bottom:1px solid #D9D9D9;
	padding-bottom:10px;
	margin-bottom:20px;
}
.border-right {
	border-top:1px solid #D9D9D9;
	padding-top:10px;
	margin-top:20px;
}
.txt-smaller {
	font-size:85%
}
.txt-small {
	font-size:93%
}
.txt-big {
	font-size:120%
}
.txt-xxlbig {
	font-size:160%
}
.txt-light {
	color:#4d4d4d;
}
.txt-lighter {
	color:#666;
}

/*//   Language Navigation   //*/
.langnav {
	float:right;
	text-align:right; 
	font-size: 0.8em !important; 
	margin-top:8px;	
}

/*////   General Styling   ////*/
p {
	line-height:1.6;
	margin-bottom:20px;
}

/*////   - Forms -   ////*/
form {
	margin-bottom:20px;
	margin-left:30px
}
body.ie7 form, body.ie8 {
	margin-bottom:40px;
}
form p {
	margin-bottom:15px;
}
form label {
	float:left;
	width:140px;
	margin-top:5px;
}
form input, form textarea {   
	background: #FFF;
    border: 1px solid #CCC;
    color: #000;
    font-size: 14px;
    line-height: 20px;
    margin-top: 5px;
    outline: medium none;
    padding-left: 4px;
    padding-top: 4px;
    /* width: 180px; */
	border:1px solid #D9D9D9;
	width:418px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	
}
select{
    background: #FFF;
    border: 1px solid #CCC;
    color: #000;
    font-size: 14px;
    line-height: 20px;
	margin-bottom: 10px;
}
form input.small {
	width:35px;
}
#message {
	margin-bottom:20px;
}
#messageBox {
	margin-left:120px; 
	width:500px;
}
.error-message {
	background:url("../img/error.png") no-repeat 10px center #FECDC6;
	padding:10px 35px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.success-message {
	background:url(../img/success.png) no-repeat 10px center #F1FFBF;
	padding:10px 35px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

/* PAGE style */
#page-content {
min-height: 100%;
height: auto!important;
height: 100%;
width: 530px;
}
.data1 {
	width:195px;
	height:60px;
	float:left;
	background-color:#f3f3f3;
	padding:10px 10px 10px 40px;
	margin-bottom:10px;
	margin-right:10px;
	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}
.data2 {
	width:195px;
	height:60px;
	float:left;
	background-color:#f3f3f3;
	padding:10px 10px 10px 40px;
	margin-bottom:10px;
	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}
.data3 {
	clear:both;
	background-color:#f3f3f3;
	padding:10px 10px 10px 40px;
	margin-bottom:10px;
	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}
.data1 {
	width:195px;
	height:60px;
	float:left;
	background-color:#f3f3f3;
	padding:10px 10px 10px 40px;
	margin-bottom:10px;
	margin-right:10px;
	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}
.register {
	clear:both;
	background-color:#f3f3f3;
	padding:10px 10px 10px 40px;
	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}
.data1 .number {
	position:absolute;
	margin-top:-10px;
	margin-left:-35px;
	font-size:40px;
	font-weight:bold;
	color:#ccc;
}
.data2 .number {
	position:absolute;
	margin-top:-10px;
	margin-left:-35px;
	font-size:40px;
	font-weight:bold;
	color:#ccc;
}
.data3 .number,.register .number {
	position:absolute;
	margin-top:-10px;
	margin-left:-35px;
	font-size:40px;
	font-weight:bold;
	color:#ccc;
}
.trenner {
	clear:both;
	font-size:12px;
	height:10px;
}
.langnav {
	float:right;
	text-align:right;
	list-style: none; 
	font-size: 0.9em !important; 
	margin-top:0px;	
}

/* Buttons */

button, .button {
	cursor:pointer;
	display:inline-block;
	font-size:108%;
	font-weight:700;
	margin:0 5px 15px 0;
	outline:none;
	padding:10px 15px;
	width:auto;
	text-align:center;
	text-decoration:none !important;
	vertical-align:middle;
	background-color:#c3c3c3;
	color:#444444;
	border:1px solid #c3c3c3;
	text-shadow:0 1px 0 #FFFFFF;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

.btn_pax {
	margin: 5px 0 0 5px;
	padding: 0px 5px;
	font-size:20px;
	line-height: 28px;
	cursor: pointer;
	float: left;
	font-weight: bold;
	text-align: center;
	width:auto;
	text-decoration:none !important;
	vertical-align:middle;
	background-color:#c3c3c3;
	color:#444444;
	border:1px solid #c3c3c3;
	text-shadow: none;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

body.ie7 button, body.ie8 button, body.ie7 .button, body.ie8 .button {
	zoom:1;
	display:inline;
}
button:hover, .button:hover {
	background: #c3c3c3;
	text-decoration:none;
	outline:none;
}
button:active, .button:active {
	position:relative;
	top:1px;
	outline:none;
	background: #c3c3c3;
}

button.large, .button.large {
	font-size:138.5%;
	padding:10px 30px;
}
button.small, .button.small {
	font-size:93%;
	padding:4px 10px 5px;
}
button.disabled, button.disabled:hover, .button.disabled, .button.disabled:hover {
	background-color:#ccc !important;
	color:#666 !important;
	text-shadow:0 1px 0 #CCCCCC;
	cursor:default;
}
body.ie7 button.disabled, body.ie8 button.disabled {
	border-color:#a3a3a3;
}
button.disabled:active, .button.disabled:active {
	position:relative;
	top:0;
	background-image: url('../img/grad.png');
}
fieldset button, .button {
	margin:0 5px 10px 0;
}
button img, .button img {
	display:inline;
	height:16px;
	margin-right:10px;
	vertical-align:-3px;
	width:16px;
}

/* Table Styles */
.table {
	border:1px solid #CCCCCC;
	width:100%;
	margin-bottom:20px;
}
.table.no-border {
	border:none
}
.table thead th, .table thead td {
	padding:6px 10px;
	font-weight: 700;
	color: #333;
	background: #E2E2E2;
	border-bottom: 1px solid #cccccc;
	border-right:1px solid #CCCCCC;
}
.table thead th.last, .table thead td.last {
	border-right:0;
}
.table thead th.checkbox, .table thead td.checkbox {
	width:25px;
}
.table tbody th, .table tbody td {
	background:#fff;
	border-right:1px dotted #CCCCCC;
	vertical-align:middle;
	padding:10px;
	font-size:93%;
}
.table tbody tr.alt td {
	background:#F2F2F2;
}
.table tbody th.last, .table tbody td.last {
	border-right:0 none;
}
.table tbody tr.last td {
	border-bottom:0 none;
}
.table tbody tr:hover th, .table tbody tr:hover td {
	background:#d3ecf9;
}

/*////   - Specials -   ////*/

.highlight{
	background: none repeat scroll 0 0 #FFFFCC;
	padding: 3px;
}

span.hide { display:none; }


.property-image	{
	background-position:center center;
	background-repeat: no-repeat; 
	width: 350px;
	height: 200px;
	float: left;
}
					
/* alert boxes */
.error           	{
					  background: #F7CBCA !important;
					}
					
.alert_error{
    background: #FFCECE;
    border: 1px solid #DF8F8F;
    color: #E3302C;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.49);
    margin: 20px;
    font-size: 1.0em;
}
.alert_tip{
    background: #EBD9F1;
    border: 1px solid #A7A1B6;
    color: #543551;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.49);
    margin: 20px;
    font-size: 1.0em;
}
.alert_info{
    background: #DBE3FF;
    border: 1px solid #A2B4EE;
    color: #0888C3;
	padding: 2px 7px 1px 8px;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.49);
    margin: 20px;
    font-size:1.0em;
}
.alert_info a{
	color: #0888C3;
}
.alert_tip {	
	color: #543551;
}
.alert_success {
    background: #D5FFCE;
    border: 1px solid #9ADF8F;
    cursor: pointer;
    color: #508600;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.49);  
}
.alert_ads								{
                                            background: #FDF6E5;
                                            border: 1px solid #FDF6E5;
                                            margin: 8px;
											font-size:1.0em;
											padding: 2px 7px 1px 8px;
                                            color: #543551;
											cursor:pointer;
                                            text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.49);
										}
.alert_ads a							{
											color: #2200C1;
											text-decoration:none;
										}
			
.alert_ads cite, cite a:link, cite a:visited {
    										color: #0E774A;
    										font-style: normal;
}
.alert_ads .ads, .alert_info .ads		{
											float: right; 
											font-weight: normal; 
											color: #767676;
											padding: 1px 0pt 1px 1px; 
											font-size:0.8em;
											margin: 3px 0pt 0pt;
											text-shadow: none;										
										}
										
.alert_error p, .alert_tip p, .alert_info p, .alert_success p, .alert_ads p{ 
	margin: 10px;
	font-size:0.9em;
}
.alert_error a, .alert_tip a, .alert_info a, .alert_success p, .alert_ads p{ 
	text-decoration: none; 
}


/* ==========================================================================
   Online reservation — dark/gold redesign
   ========================================================================== */

.booking-shell {
	--bg: #0c0b0a;
	--surface: #151312;
	--surface-2: #1c1a18;
	--border: rgba(201, 164, 89, 0.22);
	--border-soft: rgba(245, 240, 230, 0.08);
	--gold: #c9a259;
	--gold-strong: #e2c07f;
	--text: #f3ede1;
	--text-muted: #a89e8c;
	--danger: #e2867c;
	--success: #8fbf7a;
	--daypart-morning: #d8c9a6;
	--daypart-evening: #7a5c2e;
	--radius: 10px;
	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	min-height: 100vh;
	padding: 48px 24px;
	box-sizing: border-box;
	width: auto;
}
.booking-shell *, .booking-shell *::before, .booking-shell *::after {
	box-sizing: border-box;
}
.booking-shell ::selection {
	background: var(--gold);
	color: #1a1408;
}
.booking-shell a {
	color: var(--gold);
	-webkit-tap-highlight-color: rgba(201, 162, 89, 0.25);
}
.booking-shell a:hover {
	color: var(--gold-strong);
}
.booking-shell :focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.booking-grid {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 56px;
	align-items: start;
}

/* ---- Sidebar ---- */
.booking-sidebar {
	position: sticky;
	top: 48px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	padding: 10px 16px;
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	width: fit-content;
	transition: border-color 150ms ease, transform 150ms ease;
}
.back-link:hover {
	color: var(--gold-strong);
	border-color: var(--border);
	transform: translateX(-2px);
}
.back-link svg {
	flex: none;
}

.hours-card h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text);
	margin: 0 0 14px;
}
.hours-card h3 svg {
	color: var(--gold);
	flex: none;
}
.hours-card dl {
	margin: 0;
	border-top: 1px solid var(--border-soft);
}
.hours-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border-soft);
	font-size: 14px;
}
.hours-row dt {
	color: var(--text-muted);
	font-weight: 500;
}
.hours-row dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}

.contact-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 4px;
	border-top: 1px solid var(--border-soft);
}
.contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-muted);
	text-decoration: none;
}
.contact-item svg {
	flex: none;
	margin-top: 2px;
	color: var(--gold);
}
a.contact-item:hover {
	color: var(--gold-strong);
}
a.contact-item:hover svg {
	color: var(--gold-strong);
}

/* ---- Main column ---- */
.booking-main {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: 16px;
	padding: 40px 44px 44px;
}
.booking-main form {
	/* the legacy shared "form { margin-left: 30px }" rule (still used by
	   other pages built on this stylesheet) pushed the whole wizard form
	   - and everything centered inside it on mobile, like the step
	   titles - 30px off from the heading above it, which sits outside
	   the form. */
	margin-left: 0;
}
.booking-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--text);
}
.booking-subtitle {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 6px 0 28px;
}

/* minimal fallback so the language links stay readable wherever this
   shared markup is used without the .booking-shell theme (cancel.php) */
.langnav .lang-picker a {
	margin-right: 6px;
}
.langnav .lang-cancel svg {
	vertical-align: middle;
}

.booking-shell .langnav {
	/* its own row above the heading, not floated/absolute beside it -
	   a float only narrows that one line (skewing text-align:center on
	   a short title without reserving space), and absolute positioning
	   in the corner collides with a centered heading long enough to
	   reach it. A plain flex row above avoids both failure modes.
	   float:none is required here: the legacy shared .langnav rule
	   (used by cancel.php) sets float:right, and display:flex alone
	   does not override a float declared on a lower-specificity rule -
	   it just narrows the following lines' line boxes, which is exactly
	   what skewed the centered title/subtitle on mobile. */
	float: none;
	text-align: left;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
.booking-shell .lang-picker {
	display: flex;
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	padding: 2px;
}
.booking-shell .lang-picker a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	min-width: 44px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}
.booking-shell .lang-picker a:hover {
	color: var(--text);
}
.booking-shell .lang-picker a.active {
	background: var(--gold);
	color: #1a1408;
}
.booking-shell .lang-cancel {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--border-soft);
	color: var(--text-muted);
}
.booking-shell .lang-cancel:hover {
	color: var(--danger);
	border-color: var(--danger);
}

.picker-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.picker {
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	padding: 10px 16px 12px;
}
.picker-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 4px;
}
.timeslot-section > .picker-label {
	margin-bottom: 12px;
}

.pax-stepper {
	display: flex;
	align-items: center;
	gap: 14px;
}
.pax-stepper input {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	width: 40px;
	text-align: center;
	padding: 0;
	cursor: text;
}
.pax-stepper input:focus {
	border-bottom-color: var(--gold);
	outline: none;
}
.booking-shell .btn_pax {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--border);
	color: var(--gold);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	background: transparent;
	margin: 0;
	transition: background 150ms ease, color 150ms ease;
}
.booking-shell .btn_pax:hover {
	background: var(--gold);
	color: #1a1408;
}

.date-picker-field {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.date-picker-icon {
	flex: none;
	color: var(--gold);
}
.date-picker #reservation_date {
	background: transparent;
	border: 0;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	width: 100%;
	padding: 0;
	line-height: 24px;
	cursor: pointer;
}
.date-today-btn {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 10px;
	border-radius: 11px;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--gold);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}
.date-today-btn:hover {
	background: var(--gold);
	color: #1a1408;
}
.ui-datepicker-trigger {
	display: none;
}

.timeslot-section {
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	padding: 16px 18px 6px;
	margin-bottom: 24px;
}
#timeslot-results {
	transition: opacity 150ms ease;
}
#timefield {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
#timefield .elem1, #timefield .elem2 {
	display: contents;
}
.timeslot {
	position: relative;
	display: block;
}
.timeslot input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.timeslot .radiotext {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 8px;
	border: 1px solid var(--border-soft);
	background: transparent;
	color: var(--text);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.timeslot:hover .radiotext {
	border-color: var(--border);
	color: var(--gold-strong);
}
.timeslot input[type="radio"]:checked + .radiotext {
	background: var(--gold);
	border-color: var(--gold);
	color: #1a1408;
	font-weight: 600;
}
.timeslot input[type="radio"]:focus-visible + .radiotext {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
.timeslot-disabled .radiotext,
.timeslot input[type="radio"]:disabled + .radiotext {
	color: rgba(243, 237, 225, 0.28);
	border-color: var(--border-soft);
	cursor: not-allowed;
	text-decoration: line-through;
}
.timeslot-disabled:hover .radiotext {
	border-color: var(--border-soft);
	color: rgba(243, 237, 225, 0.28);
}
.radiotext.error {
	border-color: var(--danger);
	color: var(--danger);
}

/* daypart sub-headers inside the time grid (#timefield is display:grid, 3 columns; .elem1/.elem2
   are display:contents so these headers land as direct grid items and need to span all columns) */
.daypart-header {
	grid-column: 1 / -1;
	margin: 4px 0 -2px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.daypart-header:first-child { margin-top: 0; }
.daypart-header.daypart-midday { color: var(--gold); }
.daypart-header.daypart-afternoon { color: var(--daypart-morning); }
.daypart-header.daypart-evening { color: var(--daypart-evening); }

.wizard-step .field {
	margin-bottom: 16px;
}
.wizard-step label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 6px;
	float: none;
	width: auto;
}
.wizard-step input[type="text"],
.wizard-step textarea,
.wizard-step select {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	padding: 11px 14px;
	margin: 0;
	transition: border-color 150ms ease;
}
.wizard-step input[type="text"]:focus,
.wizard-step textarea:focus,
.wizard-step select:focus {
	border-color: var(--gold);
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}
.wizard-step input.error,
.wizard-step textarea.error {
	border-color: var(--danger) !important;
	background: rgba(226, 134, 124, .10) !important;
}
.wizard-step textarea {
	resize: vertical;
	min-height: 90px;
	font-family: var(--font-body);
}

/* ---- Wizard progress bar (steps remaining until the reservation is complete) ---- */
.wizard-progress {
	margin: 0 0 26px;
}
.wizard-progress-steps {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}
.wizard-progress-step {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wizard-progress-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.wizard-progress-label {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	white-space: nowrap;
	transition: color 150ms ease;
}
.wizard-progress-step.is-active .wizard-progress-dot,
.wizard-progress-step.is-done .wizard-progress-dot {
	background: var(--gold);
	border-color: var(--gold);
	color: #1a1408;
}
.wizard-progress-step.is-active .wizard-progress-label,
.wizard-progress-step.is-done .wizard-progress-label {
	color: var(--gold-strong);
}
.wizard-progress-track {
	height: 4px;
	background: var(--surface-2);
	border-radius: 999px;
	overflow: hidden;
}
.wizard-progress-fill {
	height: 100%;
	width: 100%;
	background: var(--gold);
	border-radius: 999px;
	transform: scaleX(0.333);
	transform-origin: left;
	transition: transform 250ms ease;
}
.wizard-progress-remaining {
	margin: 8px 0 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-align: right;
}

/* ---- Wizard steps ---- */
.wizard-step-hidden {
	display: none;
}
.wizard-step-title {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	text-transform: uppercase;
	text-align: left;
	margin: 0 0 24px;
}
.wizard-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
}
.wizard-nav .wizard-btn.submit-button {
	width: auto;
	min-width: 160px;
	display: inline-block;
}
.wizard-nav > span:first-child {
	flex: 1;
}
.wizard-back {
	background: none;
	border: 0;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 4px;
}
.wizard-back:hover {
	color: var(--gold-strong);
}

.wizard-error {
	display: none;
	color: var(--danger);
	font-size: 13px;
	margin: 10px 0 0;
}
.wizard-error-visible {
	display: block;
}

.wizard-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	padding: 16px 18px;
	margin-bottom: 28px;
}
.summary-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.summary-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.summary-value {
	font-size: 15px;
	font-weight: 600;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.consent-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}
.checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted);
	cursor: pointer;
	float: none;
	width: auto;
}
.checkbox-row input[type="checkbox"] {
	margin-top: 2px;
	width: 16px;
	height: 16px;
	accent-color: var(--gold);
	flex: none;
}
.checkbox-row .checktext.error {
	color: var(--danger);
}
.checkbox-row a {
	white-space: nowrap;
}

.submit-button {
	display: block;
	width: 100%;
	background: var(--gold);
	color: #1a1408;
	border: 0;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 15px 20px;
	cursor: pointer;
	transition: background 150ms ease, transform 150ms ease;
}
.submit-button:hover {
	background: var(--gold-strong);
	transform: translateY(-1px);
}
.submit-button:active {
	transform: translateY(0);
}
.submit-button:disabled,
.submit-button.is-saving {
	opacity: .6;
	cursor: default;
	transform: none;
}

.booking-shell .alert_error,
.booking-shell .alert_success,
.booking-shell .alert_ads,
.booking-shell .alert_info,
.booking-shell .alert_tip {
	border-radius: var(--radius);
	text-shadow: none;
	font-family: var(--font-body);
	margin: 0 0 20px;
}
.booking-shell .alert_error {
	background: rgba(226, 134, 124, 0.12);
	border: 1px solid rgba(226, 134, 124, 0.4);
	color: var(--danger);
}
.booking-shell .alert_success {
	background: rgba(143, 191, 122, 0.12);
	border: 1px solid rgba(143, 191, 122, 0.4);
	color: var(--success);
}
.booking-shell .alert_info {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: rgba(201, 162, 89, 0.08);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 18px 20px;
}
.booking-shell .alert_info .notice-icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	color: var(--gold);
}
.booking-shell .alert_info .notice-body {
	flex: 1;
	min-width: 0;
}
.booking-shell .alert_info p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
}
.booking-shell .alert_info .notice-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}
.booking-shell .alert_info .notice-hint {
	margin-top: 4px;
	color: var(--text-muted);
	max-width: 52ch;
}
.booking-shell .alert_info .notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.booking-shell .alert_info a.notice-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	font-family: var(--font-body);
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--gold);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.booking-shell .alert_info a.notice-btn:hover,
.booking-shell .alert_info a.notice-btn:focus-visible {
	background: var(--gold);
	color: #1a1408;
}
.booking-shell .alert_ads {
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	color: var(--text-muted);
	padding: 16px 20px;
}
.booking-shell .alert_ads p {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.6;
}
.booking-shell .alert_ads a {
	color: var(--gold);
}
.booking-shell .alert_ads cite, .booking-shell .alert_ads cite a {
	color: var(--text-muted);
}

/* ---- Booking confirmation (process_booking.php) ---- */
.confirm-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* matches .booking-shell's own min-height: 100vh - a plain child
	   block won't otherwise stretch to fill it, which left a band of
	   the page's white default background exposed below the card */
	min-height: 100vh;
}
.confirm-card {
	width: 100%;
	max-width: 460px;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: 16px;
	padding: 48px 40px;
	text-align: center;
}
.confirm-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--border);
}
.confirm-icon svg {
	width: 26px;
	height: 26px;
}
.confirm-icon.is-success {
	color: var(--success);
	border-color: rgba(143, 191, 122, 0.4);
}
.confirm-icon.is-waitlist {
	color: var(--gold);
}
.confirm-icon.is-error {
	color: var(--danger);
	border-color: rgba(226, 134, 124, 0.4);
}
.confirm-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 30px;
	line-height: 1.15;
	margin: 0 0 10px;
	color: var(--text);
}
.confirm-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0 0 28px;
}
.confirm-text strong {
	color: var(--gold);
	font-weight: 600;
}
.confirm-text a {
	color: var(--gold);
}
.confirm-card .wizard-summary {
	text-align: left;
}
.confirm-actions {
	margin-top: 28px;
}
.confirm-actions .submit-button {
	/* .booking-shell a { color: var(--gold) } otherwise outranks
	   .submit-button's own color on an <a> (a class+element selector
	   beats a single class) and the CTA renders gold-on-gold */
	color: #1a1408;
	text-decoration: none;
}
.confirm-actions .submit-button:hover {
	color: #1a1408;
}
.confirm-card .wizard-step {
	text-align: left;
}
.confirm-card form {
	margin-left: 0;
}
.confirm-card .wizard-step .confirm-actions {
	text-align: center;
}
.confirm-card form.confirm-actions {
	margin: 28px 0 0;
}
.booking-shell .confirm-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	margin-top: 16px;
	font-size: 13px;
	color: var(--text-muted);
	text-decoration: none;
}
.booking-shell .confirm-secondary:hover {
	color: var(--gold-strong);
}
@media (max-width: 560px) {
	.confirm-card {
		padding: 40px 24px;
	}
}

/* jQuery UI datepicker — reskinned to match */
/* the calendar is appended to <body>, outside .booking-shell, so the theme
   variables have to be defined on it as well (otherwise it renders transparent) */
#ui-datepicker-div {
	--surface-2: #1c1a18;
	--border: rgba(201, 164, 89, 0.22);
	--gold: #c9a259;
	--text: #f3ede1;
	--text-muted: #a89e8c;
	--font-body: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	z-index: 1000 !important;
}
.ui-datepicker {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px;
	width: 260px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.45);
	font-family: var(--font-body);
}
.ui-datepicker .ui-datepicker-title {
	color: var(--text);
	font-family: var(--font-body);
	font-weight: 600;
}
.ui-datepicker th {
	color: var(--text-muted);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	color: var(--text);
	text-shadow: none;
	border-radius: 6px;
}
.ui-datepicker td a:hover {
	background: var(--gold);
	color: #1a1408;
}
.ui-datepicker td.ui-datepicker-current-day a {
	background: var(--gold);
	color: #1a1408;
}
.ui-datepicker-today a {
	border: 1px solid var(--gold) !important;
}
.ui-datepicker td.ui-state-disabled span {
	background: transparent;
	color: rgba(243, 237, 225, 0.25);
}
.ui-datepicker-prev span, .ui-datepicker-next span {
	filter: invert(1);
}

/* ---- Compact, scrollable time grid on desktop ---- */
@media (min-width: 861px) {
	#timefield {
		max-height: 420px;
		overflow-y: auto;
		padding-right: 8px;
		margin-right: -8px;
	}
	#timefield::-webkit-scrollbar {
		width: 8px;
	}
	#timefield::-webkit-scrollbar-track {
		background: transparent;
	}
	#timefield::-webkit-scrollbar-thumb {
		background: var(--border);
		border-radius: 8px;
	}
	#timefield::-webkit-scrollbar-thumb:hover {
		background: var(--gold);
	}
	#timefield {
		scrollbar-width: thin;
		scrollbar-color: var(--border) transparent;
	}
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.booking-shell {
		padding: 20px 12px 40px;
	}
	.booking-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.booking-sidebar {
		display: none;
	}
	/* drop the outer "card" look on mobile - the individual pickers and
	   time-slot pills already carry their own border, so wrapping them
	   in a card, in a card, in a card just eats into the available
	   width for no visual benefit on a narrow screen */
	.booking-main {
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}
	.booking-title {
		font-size: 32px;
		text-align: center;
	}
	.booking-subtitle {
		text-align: center;
	}
	.wizard-step-title {
		text-align: center;
	}
	.timeslot-section {
		background: none;
		border: 0;
		padding: 0;
		margin-bottom: 24px;
	}
	.guest-details,
	.wizard-step .field:last-child {
		border-top: 0;
	}
}
@media (max-width: 360px) {
	/* only stack on genuinely tiny screens - the reference layout keeps
	   guests/date side by side down to ~375px */
	.picker-row {
		grid-template-columns: 1fr;
	}
	.wizard-progress-dot {
		width: 20px;
		height: 20px;
		font-size: 11px;
	}
	.wizard-progress-label {
		font-size: 11px;
	}
}

/* legacy datepicker styles give the cell of today / the hovered cell a light grey background */
.ui-datepicker td,
.ui-datepicker td.ui-datepicker-today,
.ui-datepicker td.ui-datepicker-days-cell-over {
	background: transparent;
	border-color: transparent;
}

/* imprint / privacy links under every guest page */
.legal-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	padding: 20px 16px 28px;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--text-muted);
}
.booking-shell .legal-footer a {
	color: var(--text-muted);
	padding: 10px 8px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.booking-shell .legal-footer a:hover,
.booking-shell .legal-footer a:focus-visible {
	color: var(--gold-strong);
	border-bottom-color: currentColor;
}

/* ---- offer times (Angebotszeiten): highlighted slots, legend chips, dialog ---- */
.timeslot-offer .radiotext {
	background: rgba(201, 162, 89, 0.14);
	border-color: var(--gold);
}
.timeslot-offer:hover .radiotext { background: rgba(201, 162, 89, 0.24); }
.timeslot-offer.timeslot-disabled .radiotext,
.timeslot-offer input[type="radio"]:disabled + .radiotext { background: transparent; border-color: var(--border-soft); }
/* the old system styles put a white text shadow on buttons; on the dark widget it reads as a white outline */
.offer-chip, .offer-chip * { text-shadow: none; }
.offer-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.offer-chip {
	display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
	min-height: 40px; padding: 8px 14px; border-radius: 12px;
	background: rgba(201, 162, 89, 0.12); border: 1px solid var(--gold);
	color: var(--text); font: inherit; font-size: 14px; line-height: 1.4; text-align: left;
}
.offer-chip .offer-title { font-weight: 700; color: var(--gold-strong); }
.offer-chip .offer-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.offer-chip .offer-more { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
button.offer-chip { cursor: pointer; transition: background 150ms ease; }
button.offer-chip:hover, button.offer-chip:focus-visible { background: rgba(201, 162, 89, 0.22); }
button.offer-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* the dialog is moved to <body> when opened (outside .booking-shell), so it carries its own tokens */
.offer-dialog {
	--surface-2: #1c1a18;
	--border: rgba(201, 164, 89, 0.22);
	--gold: #c9a259;
	--gold-strong: #e2c07f;
	--text: #f3ede1;
	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.offer-dialog {
	width: min(92vw, 480px); max-height: 88vh; overflow: auto; padding: 28px 26px 22px;
	background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 16px;
	font-family: var(--font-body); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.offer-dialog::backdrop { background: rgba(0, 0, 0, 0.68); }
.offer-dialog h2, .offer-dialog p, .offer-dialog a, .offer-dialog button { text-shadow: none; }
.offer-dialog p, .offer-dialog a, .offer-dialog button { font-family: var(--font-body); }
.offer-dialog h2 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--gold-strong); }
.offer-dialog img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 10px; margin: 0 0 14px; }
.offer-dialog p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; max-width: 60ch; overflow-wrap: anywhere; }
.offer-dialog a { color: var(--gold); text-underline-offset: 3px; }
.offer-dialog .offer-close {
	margin: 0;
	min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--gold);
	background: transparent; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer;
}
.offer-dialog .offer-close:hover, .offer-dialog .offer-close:focus-visible { background: var(--gold); color: #1a1408; }
@media (prefers-reduced-motion: reduce) { button.offer-chip { transition: none; } }

/* short note under a form field */
.field-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-muted); text-shadow: none; }

/* inline validation message under a form field - empty and collapsed until a validator fills it */
.field-error { display: block; margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--danger); text-shadow: none; }
.field-error:empty { display: none; }

/* ---- Guest page (api/cancel.php): the reservation, menus, arrival, contact, and cancelling last ---- */
.booking-shell.guest-shell {
	padding: 24px 16px 56px;
}
.guest-page {
	max-width: 560px;
	margin: 0 auto;
}
.guest-head {
	margin: 32px 0 26px;
}
.guest-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(32px, 9vw, 42px);
	line-height: 1.1;
	margin: 0 0 12px;
	color: var(--text);
	text-wrap: balance;
}
.guest-lead {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
	max-width: 46ch;
	margin: 0;
}
.guest-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--border-soft);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	overflow: hidden;
}
.guest-facts > div {
	background: var(--surface-2);
	padding: 14px 16px;
	min-width: 0;
}
.guest-facts dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 4px;
}
.guest-facts dd {
	font-size: 17px;
	font-weight: 600;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.guest-facts .guest-when, .guest-facts .guest-nr {
	grid-column: 1 / -1;
}
.guest-facts .guest-when dd {
	font-size: 20px;
}
.guest-facts .guest-number {
	letter-spacing: 0.08em;
}
.guest-facts .guest-note {
	grid-column: 1 / -1;
}
.guest-facts .guest-note dd {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--text);
}
.guest-section {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--border-soft);
}
.guest-section h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.2;
	margin: 0 0 16px;
	color: var(--text);
	text-wrap: balance;
}
.guest-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0 0 16px;
	max-width: 52ch;
}
.guest-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.booking-shell .guest-btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--gold-strong);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 150ms ease, border-color 150ms ease;
}
.booking-shell .guest-btn:hover {
	background: rgba(201, 162, 89, 0.12);
	border-color: var(--gold);
	color: var(--gold-strong);
}
.guest-info > div {
	padding: 0 0 18px;
}
.guest-info > div:last-child {
	padding-bottom: 0;
}
.guest-info dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 4px;
}
.guest-info dd {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text);
	max-width: 58ch;
}
.guest-info a, .guest-contact a {
	text-underline-offset: 3px;
}
.guest-info dd a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}
.guest-fold {
	border-top: 1px solid var(--border-soft);
}
.guest-fold:last-child {
	border-bottom: 1px solid var(--border-soft);
}
.guest-fold summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gold);
	cursor: pointer;
	list-style: none;
}
.guest-fold summary::-webkit-details-marker {
	display: none;
}
.guest-fold summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 150ms ease;
}
.guest-fold[open] summary::after {
	transform: rotate(-135deg);
}
.guest-fold p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text);
	max-width: 58ch;
	margin: 0 0 16px;
}
.guest-info + .guest-fold {
	margin-top: 8px;
}
@media (min-width: 520px) {
	.guest-info > div {
		display: grid;
		grid-template-columns: 132px 1fr;
		gap: 16px;
	}
	.guest-info dt {
		padding-top: 3px;
		margin: 0;
	}
}
.guest-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 0;
	font-size: 16px;
}
.guest-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}
.guest-cancel-box summary {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid rgba(226, 134, 124, 0.5);
	border-radius: 999px;
	color: var(--danger);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: background 150ms ease;
}
.guest-cancel-box summary::-webkit-details-marker {
	display: none;
}
.guest-cancel-box summary:hover {
	background: rgba(226, 134, 124, 0.1);
}
.guest-cancel-box[open] summary {
	background: rgba(226, 134, 124, 0.1);
}
.guest-cancel-box form {
	margin: 18px 0 0;
}
.guest-danger {
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--danger);
	color: #1c0c09;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.guest-danger:hover {
	background: #efa199;
}
.guest-cancel-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.guest-keep {
	background: none;
	border: 0;
	margin: 0;
	padding: 0 4px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
@media (max-width: 380px) {
	.guest-buttons {
		grid-template-columns: 1fr;
	}
}

/* the old admin theme puts a white text-shadow on every button (and some links); on the dark booking pages it shows as a light outline */
.booking-shell button, .booking-shell .button, .booking-shell a, .booking-shell summary { text-shadow: none; }

/* ---- logo ---- */
.brand-logo {
	display: block;
	height: 40px;
	width: auto;
	max-width: 100%;
}
.booking-title .brand-logo-title {
	height: 64px;
}
@media (max-width: 720px) {
	.booking-title .brand-logo-title {
		height: 52px;
		margin: 0 auto;
	}
}
.brand-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.booking-shell .brand-row .langnav {
	margin-bottom: 0;
	margin-left: auto;
}

.guest-quick-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 12px;
}
@media (max-width: 380px) {
	.guest-quick-actions {
		grid-template-columns: 1fr;
	}
}
.guest-share {
	/* undoes the legacy global `button {}` rule's margin (line ~500), which the sibling
	   .guest-ics <a> never had - without this the two grid cells look mismatched even though
	   the grid itself gives them equal width */
	margin: 0;
	/* a <button> keeps native OS chrome (padding, min size, background) in WebKit/Safari
	   unless appearance is turned off - the <a> next to it never had any, so without this the
	   two looked mismatched on an iPhone even though they measured equal in a Chromium test */
	appearance: none;
	-webkit-appearance: none;
	background: none;
	font-family: var(--font-body);
	line-height: normal;
	cursor: pointer;
}
.guest-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 12px);
	z-index: 60;
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease;
	max-width: calc(100% - 32px);
	text-align: center;
}
.guest-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
	.guest-toast {
		transition: none;
	}
}