/* BistroBook reservation form
   Default type: Avenir with graceful fallbacks. Overridable via Elementor. */

.bb-form {
	--bb-accent: #1F4D3A;
	--bb-ink: #1a1c1e;
	--bb-muted: #6f6a61;
	--bb-line: #d9d4c9;
	--bb-bg: #ffffff;
	--bb-btn-bg: var(--bb-accent);
	--bb-btn-bg-hover: #163a2c;
	--bb-btn-speed: 250ms;
	font-family: Avenir, 'Avenir Next', 'Avenir Next LT Pro', 'Nunito Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
	color: var(--bb-ink);
	background: var(--bb-bg);
	max-width: 560px;
	box-sizing: border-box;
	position: relative;
}
.bb-form *, .bb-form *::before, .bb-form *::after { box-sizing: border-box; }

.bb-form__head { margin-bottom: 20px; }
.bb-form__head.bb-has-divider {
	border-bottom: var(--bb-divider-w, 1px) solid var(--bb-divider-c, var(--bb-line));
	padding-bottom: var(--bb-divider-gap, 16px);
}
.bb-form__title { margin: 0 0 4px; font-size: 24px; font-weight: 600; line-height: 1.2; }
.bb-form__subtitle { margin: 0; color: var(--bb-muted); font-size: 14px; }

.bb-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px 16px;
}
.bb-field { display: block; margin-bottom: 14px; position: relative; }
.bb-form__grid .bb-field { margin-bottom: 0; }
.bb-form__grid { margin-bottom: 14px; }

.bb-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-muted);
	margin-bottom: 6px;
}
.bb-label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; }

.bb-input {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--bb-ink);
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: 2px;
	padding: 10px 12px;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
	appearance: none;
	-webkit-appearance: none;
}
.bb-input:focus {
	outline: none;
	border-color: var(--bb-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-accent) 18%, transparent);
}
textarea.bb-input { resize: vertical; min-height: 60px; }
select.bb-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f6a61' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

/* time chips */
.bb-times__list { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-times__list button {
	font: inherit; font-size: 14px;
	border: 1px solid var(--bb-line);
	background: #fff; color: var(--bb-ink);
	padding: 8px 14px; border-radius: 2px;
	cursor: pointer;
	transition: all .15s ease;
}
.bb-times__list button:hover:not(:disabled) { border-color: var(--bb-accent); color: var(--bb-accent); }
.bb-times__list button[aria-checked="true"] { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }
.bb-times__list button:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.bb-notice { font-size: 14px; color: var(--bb-muted); margin: 8px 0 14px; }
.bb-notice a, .bb-notice button.bb-link {
	background: none; border: 0; padding: 0; font: inherit;
	color: var(--bb-accent); text-decoration: underline; cursor: pointer;
}

.bb-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--bb-muted); margin: 4px 0 18px; cursor: pointer; }
.bb-consent input { margin-top: 2px; accent-color: var(--bb-accent); }

.bb-result { font-size: 15px; padding: 14px 16px; border: 1px solid var(--bb-line); background: #f8f7f3; margin-top: 8px; }
.bb-result.bb-result--ok { border-color: var(--bb-accent); color: var(--bb-accent); background: color-mix(in srgb, var(--bb-accent) 7%, #fff); }
.bb-result.bb-result--err { border-color: #b3261e; color: #b3261e; background: #fdf4f3; }

/* ---------------------------------------------------------------- button */
.bb-button {
	font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
	color: #fff; background: var(--bb-btn-bg);
	border: 0; border-radius: 2px;
	padding: 13px 32px;
	cursor: pointer;
	position: relative; overflow: hidden; isolation: isolate;
	transition: background var(--bb-btn-speed) ease, transform var(--bb-btn-speed) ease,
		box-shadow var(--bb-btn-speed) ease, color var(--bb-btn-speed) ease;
}
.bb-button:disabled { opacity: .6; cursor: wait; }
.bb-button > span { position: relative; z-index: 1; }

/* hover animations */
.bb-hover-none:hover      { background: var(--bb-btn-bg-hover); }
.bb-hover-grow:hover      { background: var(--bb-btn-bg-hover); transform: scale(1.05); }
.bb-hover-shrink:hover    { background: var(--bb-btn-bg-hover); transform: scale(0.96); }
.bb-hover-lift:hover      { background: var(--bb-btn-bg-hover); transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(0,0,0,.45); }
.bb-hover-glow:hover      { background: var(--bb-btn-bg-hover); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-btn-bg) 30%, transparent), 0 0 24px color-mix(in srgb, var(--bb-btn-bg) 55%, transparent); }

@keyframes bb-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.bb-hover-pulse:hover     { background: var(--bb-btn-bg-hover); animation: bb-pulse 1s ease-in-out infinite; }

.bb-hover-fill::before {
	content: ""; position: absolute; inset: 0;
	background: var(--bb-btn-bg-hover);
	transform: translateX(-101%);
	transition: transform var(--bb-btn-speed) cubic-bezier(.4,0,.2,1);
}
.bb-hover-fill:hover::before { transform: translateX(0); }

.bb-hover-underline::after {
	content: ""; position: absolute; left: 16%; right: 84%; bottom: 8px; height: 2px;
	background: currentColor; opacity: 0;
	transition: right var(--bb-btn-speed) ease, opacity var(--bb-btn-speed) ease;
}
.bb-hover-underline:hover::after { right: 16%; opacity: 1; }

.bb-hover-shine::before {
	content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
	left: -60%; transform: skewX(-20deg);
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
	transition: left calc(var(--bb-btn-speed) * 2.2) ease;
}
.bb-hover-shine:hover::before { left: 130%; }
.bb-hover-shine:hover { background: var(--bb-btn-bg-hover); }

/* Line below the button rises and merges into the bottom border on hover. */
.bb-hover-lineup { overflow: visible; }
.bb-hover-lineup::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px;
	background: var(--bb-lineup-c, currentColor);
	transition: transform var(--bb-btn-speed) ease,
		opacity calc(var(--bb-btn-speed) * 0.35) ease calc(var(--bb-btn-speed) * 0.65);
}
.bb-hover-lineup:hover::after { transform: translateY(-8px); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.bb-form *, .bb-form *::before, .bb-form *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ================================================================ STYLES */

/* 1 — Classic: bordered, editorial */
.bb-style-classic { border: 1px solid var(--bb-line); padding: 32px; }
.bb-style-classic .bb-form__title { font-weight: 500; }

/* 2 — Minimal: underline fields, airy */
.bb-style-minimal { padding: 8px 0; --bb-line: #c9c4b9; }
.bb-style-minimal .bb-input {
	border: 0; border-bottom: 1px solid var(--bb-line);
	border-radius: 0; padding-left: 0; padding-right: 0; background: transparent;
}
.bb-style-minimal select.bb-input { background-position: right 0 center; }
.bb-style-minimal .bb-input:focus { box-shadow: none; border-bottom-color: var(--bb-accent); }
.bb-style-minimal .bb-times__list button { border-radius: 999px; }
.bb-style-minimal .bb-button { border-radius: 999px; }

/* 3 — Card: soft elevated panel */
.bb-style-card {
	background: #fff; border-radius: 14px; padding: 36px;
	box-shadow: 0 18px 50px -18px rgba(26,28,30,.22), 0 2px 8px rgba(26,28,30,.05);
}
.bb-style-card .bb-input, .bb-style-card .bb-times__list button { border-radius: 8px; }
.bb-style-card .bb-input { background: #f7f6f2; border-color: transparent; }
.bb-style-card .bb-input:focus { background: #fff; border-color: var(--bb-accent); }
.bb-style-card .bb-button { border-radius: 8px; }

/* 4 — Dark Luxe: evening menu */
.bb-style-lux {
	--bb-ink: #f3efe7; --bb-muted: #b3ab9c; --bb-line: #46413a;
	--bb-accent: #c8a96a; --bb-btn-bg: #c8a96a; --bb-btn-bg-hover: #dabd80;
	background: #181512; color: var(--bb-ink);
	padding: 40px; border: 1px solid #2c2823;
}
.bb-style-lux .bb-input { background: #211d18; color: var(--bb-ink); }
.bb-style-lux .bb-times__list button { background: #211d18; color: var(--bb-ink); }
.bb-style-lux .bb-times__list button[aria-checked="true"] { color: #181512; }
.bb-style-lux .bb-button { color: #181512; }
.bb-style-lux .bb-result { background: #211d18; }
.bb-style-lux .bb-form__title { font-weight: 400; letter-spacing: 0.02em; }

/* 5 — Split: horizontal inline bar */
.bb-style-split { max-width: 860px; padding: 24px 28px; border: 1px solid var(--bb-line); background: #fdfcf9; }
.bb-style-split .bb-form__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; }
.bb-style-split .bb-details .bb-form__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.bb-style-split .bb-form__head { margin-bottom: 14px; }
.bb-style-split .bb-form__title { font-size: 19px; }

@media (max-width: 600px) {
	.bb-style-classic, .bb-style-card, .bb-style-lux { padding: 22px; }
	.bb-form__grid { grid-template-columns: 1fr 1fr; }
}