@import url('https://fonts.googleapis.com/css?family=Fenix');
@import './fontello.css';

:root {
  --main: #60826a;
  --main-dark: #2a392e;
  --sub: #dc3f32;
  --fb: #3b5998;
}

html {
  font-family: 'Fenix', serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

a {
  text-decoration: none;
  opacity: .9;
  transition: opacity .1s color .5s;
  color: var(--main);
}

a:hover {
  opacity: 1;
}

a.is-selected {
  color: var(--sub);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
  color: var(--main-dark);
  border-bottom: 2px solid var(--main-dark);
  text-align: center;
  margin-bottom: 1rem;
}

.container {
  margin: 0 auto;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-direction: column;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.icon {
  font-size: 2rem;
}

.social-fb {
  color: var(--fb);
}

.social .label {
  transform: scaleX(0);
  width: 1px;
}

@media screen and (min-width: 451px) {
  .social .label {
    transform: scaleX(1);
    width: auto;
  }
}

.branch-panel {
  border-radius: 1rem;
  margin: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,.9);
  color: black;
  font-size: 1.2rem;
}

.branch-panel p,
.branch-panel li {
  text-align: left;
}

.branch-panel p,
.branch-panel ul {
  margin: 0 0 .5rem;
}

.branch-panel ul {
  padding: 0;
}

.branch-panel li {
  list-style: none;
}

.branch-panel p .icon,
.branch-panel li .icon {
  font-size: 1.2rem;
}

.menu-enter-active, .menu-leave-active,
.splash-enter-active, .splash-leave-active,
.fade-buttons-enter-active, .fade-buttons-leave-active {
  transition: all .4s;
}

.menu-enter, .menu-leave-to {
  opacity: 0;
  transform: translateX(4rem);
}

.splash-leave, .splash-leave-to {
  opacity: 0;
  transform: scale(1.5);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-buttons-enter-active, .fade-buttons-leave-active {
  transition: all .5s;
}

.fade-buttons-enter, .fade-buttons-leave-to {
  opacity: 0;
  transform: translateX(-1rem)
}

.page-enter-active {
  animation: enterPage 2s ease-out both;
}

.page-leave-active {
  animation: leavePage 2s ease-in both;
}

@keyframes enterPage {
  0% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes leavePage {
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.page-leave-active .branch-selector {
  animation: leaveBranchSelector .8s ease-in both;
}

.page-leave-active .branch-selector a:not(.is-selected) {
  animation: leaveBranchSelectorA .2s ease-out both;
  display: block;
}

.page-leave-active .branch-selector a.is-selected {
  animation: leaveBranchSelectorSelected .3s ease-out both;
  display: block;
}

@keyframes leaveBranchSelector {
  0% { transform: scaleY(1); }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

@keyframes leaveBranchSelectorA {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes leaveBranchSelectorSelected {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.page-enter-active .branch-top {
  animation: branchTop 1s ease-in both;
}

.page-leave-active .branch-top {
  animation: branchTop 1s ease-out reverse;
}

.page-leave-to .branch-top {
  transform: translateY(-10vh) scaleY(0);
  opacity: 0;
}

@keyframes branchTop {
  0% {
    transform: translateY(-10vh) scaleY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}

/* Cross-page transitions, restored via Astro's <ClientRouter />. The default
   rules below cover main -> branch: the leaving page shrinks to the click point
   as it fades out, while the next page starts enlarged and scales down in.
   Branch -> main uses its own keyframes/origin, injected per-navigation by
   BaseLayout (see ft-branch-out / ft-branch-in). */
@keyframes ft-page-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0); }
}

@keyframes ft-page-in {
  from { opacity: 0; transform: scale(2); }
  to   { opacity: 1; transform: scale(1); }
}

/* Branch -> main: the branch page just fades out (ft-branch-out) while the
   incoming main page unfolds from the logo. The unfold uses a
   dynamically-generated keyframe (ft-logo-unfold, built in BaseLayout) because
   it depends on the measured logo rects; ft-branch-in below is the fallback
   used when a logo can't be measured. */
@keyframes ft-branch-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ft-branch-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* Native cross-document View Transitions (Chromium). Both pages opt in, so the
   browser cross-fades the page and — because the logo carries a shared
   view-transition-name (see below) — morphs the logo between its home position
   and the branch header automatically. No router/JS needed; other browsers
   simply navigate instantly. */
@view-transition {
  navigation: auto;
}

/* Default (untyped) navigation: a plain cross-fade. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: ease;
}

/* home -> branch: the home page collapses toward the clicked branch (origin set
   per-navigation by the router) while the branch page rushes in — "walking into
   the store". Reuses ft-page-out (scale 1 -> 0) / ft-page-in (scale 2 -> 1).
   The router sets data-vt on <html> for the duration of the transition. */
html[data-vt="to-branch"]::view-transition-old(root) {
  transform-origin: var(--vt-origin, center center);
  animation: ft-page-out .9s ease-in both;
}
html[data-vt="to-branch"]::view-transition-new(root) {
  /* Slight delay so the storefront recedes first, then the interior zooms in —
     makes the "walking into the restaurant" motion clearly readable. */
  animation: ft-page-in 1s ease-out .3s both;
}
/* Logo snaps quickly to the header while the page keeps zooming in slowly. */
html[data-vt="to-branch"]::view-transition-group(site-logo) {
  animation-duration: .4s;
  animation-timing-function: ease-out;
}

/* branch -> home: the branch page fades out while the shared logo blows up to
   its home size and the rest of the home page unfolds in behind it. */
html[data-vt="to-home"]::view-transition-old(root) {
  animation: ft-branch-out .5s ease-in both;
}
html[data-vt="to-home"]::view-transition-new(root) {
  animation: ft-home-in .6s ease-out both;
}
@keyframes ft-home-in {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* The logo is the shared element that morphs across every navigation. Only when
   the visitor hasn't asked to reduce motion. Each page has exactly one .logo
   img, so the name stays unique per document. */
@media (prefers-reduced-motion: no-preference) {
  .logo img {
    view-transition-name: site-logo;
  }
  ::view-transition-group(site-logo) {
    animation-duration: .6s;
    animation-timing-function: ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ==========================================================================
   Component styles — consolidated from the former Astro/Vue components into
   plain global CSS during the Hugo migration. Selectors are specific class
   names, so global scope is safe.
   ========================================================================== */

/* --- Home page (index.astro) --- */
.container {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.index-social,
.copyright {
  margin-top: auto;
  transition: opacity .5s;
}
@media screen and (min-width: 769px) {
  .index-social,
  .copyright { margin: 1rem auto; }
}
.copyright { font-size: .875rem; }
.index-social a {
  transition: all .4s;
  display: inline-block !important;
  transform: scale(.9);
}
.index-social a:hover { transform: scale(1.1); }
.front-notice {
  color: #fff;
  font-weight: bold;
  padding: .5rem 1rem;
  z-index: 100;
  min-width: 100vw;
  background: #3e3e04;
}
.front-notice a { color: #d7e4dd; }

/* --- Branch selector + hover backgrounds (Branches.vue) --- */
.branch-selector {
  margin: 0 auto;
  min-width: 100vw;
  display: flex;
  flex-direction: column;
  padding-bottom: 32px;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, .8);
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .branch-selector {
    flex-direction: row;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
.branch-selector a {
  font-size: 2rem;
  padding: .5rem .175rem;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transform: scale(.8);
  opacity: .7;
  transition: all .5s;
  position: relative;
}
/* Mobile (stacked) order: Maginhawa > Reservations > Order Now */
.branch-selector a.branch-link { order: 1; }
.branch-selector a.reservations { order: 2; }
.branch-selector a.order-now { order: 3; }
@media screen and (min-width: 769px) {
  /* Desktop row: Maginhawa (left) > Order Now > Reservations (right). */
  .branch-selector a.branch-link { order: 1; }
  .branch-selector a.order-now { order: 2; }
  .branch-selector a.reservations { order: 3; }
  .branch-selector a {
    font-size: 3rem;
    padding: 1rem .25rem;
    width: 30%;
  }
}
.branch-selector a:hover {
  transform: scale(1);
  opacity: 1;
  text-decoration: underline;
}
.branch-selector .order-now {
  position: relative;
  min-width: 220px;
}
.branch-selector .order-now aside {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 8px);
}
@media screen and (min-width: 769px) {
  .branch-selector .order-now aside { top: calc(100% - 24px); }
}
.background-images {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bgs {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.bg-img {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .5s;
  z-index: 1;
}
.bg-img.loaded { opacity: 1; }
.bg-blur {
  position: fixed;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 0;
  animation: bg-blur-in .5s ease both;
}
@keyframes bg-blur-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Logo (Logo.astro) --- */
.logo {
  position: relative;
  opacity: 1;
  z-index: 10;
  transition: opacity .5s;
}
.logo a {
  flex-direction: row;
  display: flex;
  align-items: center;
  font-size: 2rem;
  color: #60826a;
  text-decoration: none;
  transition: opacity .5s;
}
.logo img {
  max-height: 60vh;
  height: auto;
  width: auto;
  display: block;
  max-width: 100%;
}
.logo .label {
  font-size: 2rem;
  color: #60826a;
  line-height: 90px;
  font-weight: bold;
  display: none;
}
@media screen and (min-width: 626px) {
  .logo .label { margin: 0 .5rem; display: inline; }
}
.branch-logo { display: flex; flex-direction: row; }
.logo-branch {
  margin: 0 1vw;
  display: flex;
  align-items: center;
}
.logo-branch a { font-size: inherit; }
.logo-branch img { max-height: 90px; }
/* Toggled on <body> by branches.js while hovering a branch. */
.previewing-branch .logo { opacity: 0; }

/* --- Branch page shell (branch/maginhawa.astro) --- */
.branch-container {
  justify-content: flex-start;
  align-items: stretch;
}
.branch-top {
  width: 100vw;
  overflow: hidden;
  height: 90px;
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: space-between;
  z-index: 10;
  background: rgba(255, 255, 255, .95);
}
.branch-main {
  width: 100vw;
  height: calc(100vh - 90px);
  height: calc(var(--vh, 1vh) * 100 - 90px);
  /* `clip` (not `hidden`) so this is NOT a scroll container: hidden panels sit
     at translateX(30%) and overflow to the right. */
  overflow: clip;
  max-width: 100vw;
  position: relative;
}
.panel {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity .3s, transform .4s ease;
}
/* Keep display:block (overriding the UA [hidden] rule) so hidden panels can
   slide/fade rather than vanish. */
.panel[hidden] {
  display: block;
  opacity: 0;
  transform: translateX(30%);
  pointer-events: none;
}

/* --- Branch nav (BranchNav.vue; root <nav> is now .branch-nav) --- */
.branch-nav {
  display: flex;
  margin-left: auto;
}
.branch-nav > a {
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}
@media screen and (min-width: 451px) {
  .branch-nav > a { width: 80px; margin: 0 4px; }
  .branch-nav .social { width: 128px; }
}
.branch-nav .icon { font-size: 2rem; }
.branch-nav .img-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.branch-nav .img-icon svg { width: 2rem; height: 2rem; }
.branch-nav .label {
  text-align: center;
  line-height: 1.2;
  transition: transform .3s;
}
@media screen and (max-width: 450px) {
  .branch-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .branch-nav > a { flex-shrink: 0; width: auto; }
  .branch-nav .label { transform: scaleX(0); width: 1px; }
}

/* --- Menu gallery (MenuGallery.vue) --- */
.branch-gallery {
  position: absolute;
  inset: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
  cursor: default;
  overflow: hidden;
}
.gallery-nav {
  flex: 0 0 auto;
  font-size: 1rem;
  font-variant: small-caps;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: 0.5rem;
}
.gallery-nav::-webkit-scrollbar { display: none; }
.gallery-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  list-style: none;
}
.gallery-nav li {
  padding: 0 0 0.75rem 0.75rem;
  margin: 0;
  white-space: nowrap;
}
.gallery-nav a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color 0.2s;
}
.gallery-nav a.menu-page-active { color: #fff; }
.gallery-nav a:hover { color: var(--main); }
@media screen and (min-width: 321px) { .gallery-nav { font-size: 1.1rem; } }
@media screen and (min-width: 451px) { .gallery-nav { font-size: 1.2rem; } }
.menu-nav-label { display: none; }
@media screen and (min-width: 451px) { .menu-nav-label { display: block; } }
.gallery-viewer {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
.gallery-stage { position: absolute; inset: 0; }
.gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.branch-gallery.gallery-loaded .gallery-img { opacity: 1; }
.gallery-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: opacity 0.3s;
}
.branch-gallery.gallery-loaded .gallery-loading {
  opacity: 0;
  visibility: hidden;
}
.gallery-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--main);
  animation: g-spin 0.9s linear infinite;
}
@keyframes g-spin { to { transform: rotate(360deg); } }
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.gallery-arrow svg {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery-arrow:hover { background: var(--main); }
.gallery-arrow:active { transform: translateY(-50%) scale(0.92); }
.gallery-prev { left: 0.5rem; }
.gallery-next { right: 0.5rem; }
@media screen and (max-width: 450px) {
  .gallery-arrow { width: 2.25rem; height: 2.25rem; }
  .gallery-arrow svg { width: 1.15rem; height: 1.15rem; }
}
.gallery-zoom {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.gallery-zoom button {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.gallery-zoom button:hover:not(:disabled) { background: var(--main); }
.gallery-zoom button:disabled { opacity: 0.35; cursor: default; }
/* On touch-primary devices panzoom owns the gestures; hide the buttons. */
@media (hover: none) and (pointer: coarse) {
  .gallery-arrow,
  .gallery-zoom { display: none; }
}
.gallery-counter {
  position: absolute;
  left: 0.75rem;
  bottom: 0.85rem;
  z-index: 5;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
  pointer-events: none;
}
.gallery-hint {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  max-width: 90%;
  text-align: center;
  font-style: italic;
  font-size: 0.8rem;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.35rem 0.85rem;
  border-radius: 1rem;
  pointer-events: none;
  transition: opacity 0.3s;
}
.gallery-hint.hint-hidden { opacity: 0; visibility: hidden; }
.gallery-hint .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .gallery-hint .hint-pointer { display: none; }
  .gallery-hint .hint-touch { display: inline; }
}
.gallery-notice {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.5rem 1rem;
  background: #3e3e04;
  color: #fff;
  font-weight: bold;
  font-size: 0.8rem;
  text-align: center;
}

/* --- Location panel (Location.astro) --- */
.branch-location {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  overflow: hidden;
}
.location-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem;
  gap: 0.5rem;
  overflow-y: auto;
}
.location-tagline,
.location-tags {
  text-align: center;
  font-size: 1.1rem;
  margin: 0;
  flex-shrink: 0;
}
.location-tags a { color: var(--main); }
.map-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.location-image {
  display: none;
  flex: 0 0 200px;
  width: 100%;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) and (min-height: 601px) {
  .location-image { display: block; }
  .location-content { padding: 0.75rem 1.5rem 1.5rem; }
}

/* --- Contact panel (in-house reservation form) --- */
.branch-contact {
  position: relative;
  width: 100%;
  height: 100%;
  /* Drop the .branch-panel margin/padding so the facade image is full-bleed;
     the text inset is restored via .contact-body's horizontal padding. */
  margin: 0;
  padding: 0;
  /* The whole panel scrolls so the facade image flows directly after the text
     instead of being pinned to the bottom. */
  overflow-y: auto;
}
/* The facade (FRIULI sign) shown in full below the text. The top third (awning /
   menu boards) is trimmed off so the image "starts" at the FRIULI sign, and
   everything from there down is shown at full width. Hidden on small screens. */
.contact-image {
  display: none;
  width: 100%;
  aspect-ratio: 2 / 1;
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.contact-body {
  /* Horizontal padding keeps the text inset that the removed panel margin used
     to provide, while the image stays full-bleed. */
  padding: 1rem 2.5rem;
  /* Stacked on small screens; Reservation first (order: -1) without reordering
     the markup. Becomes a two-column row on medium+ (see below). */
  display: flex;
  flex-direction: column;
}
.contact-body h2 { text-align: left; }
.reservation-block { order: -1; }
.contact-block { margin-top: 1.5rem; }
/* Two-column body (Reservation | Contact), then the facade image below it. */
@media screen and (min-width: 768px) {
  .contact-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
  .reservation-block { flex: 1 1 60%; min-width: 0; }
  .contact-block { flex: 1 1 40%; min-width: 0; margin-top: 0; }
  .contact-image { display: block; }
}
.contact-list { font-size: 1.1rem; }
.contact-list li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .35rem;
}
.contact-list li .icon {
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.2rem;
  color: inherit;
}
.contact-list li .icon::before {
  margin: 0 !important;
  width: 1.2rem !important;
}
.contact-list li .icon-svg {
  flex-shrink: 0;
  vertical-align: baseline;
  width: 1.2rem;
  height: 1.2rem;
}
.contact-label { font-weight: bold; }

/* --- Reservation form --- */
.reservation-form .form-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
}
.reservation-form .form-row label {
  flex: 0 0 auto;
  width: 8rem;
  text-align: right;
  font-weight: bold;
  color: #333;
  font-size: .95rem;
  line-height: 1.2;
}
.reservation-form .form-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .4rem .5rem;
  font: inherit;
  font-weight: normal;
  color: #000;
  border: 1px solid #bbb;
  border-radius: .3rem;
  background: #fff;
}
.reservation-form .form-row input:user-valid { border-color: var(--main); }
.reservation-form .form-row input:user-invalid:not(:placeholder-shown) { border-color: var(--sub); }
.form-note {
  font-style: italic;
  color: var(--main-dark);
  text-align: right;
  font-size: .85rem;
  margin: .75rem 0 .5rem;
}
.form-row-submit { justify-content: flex-end; }
.form-row-submit span { width: 8rem; }
.reservation-form button {
  font: inherit;
  font-weight: bold;
  font-size: .95rem;
  color: #fff;
  background: var(--main);
  border: 0;
  border-radius: .3rem;
  padding: .5rem 1.5rem;
  cursor: pointer;
  transition: opacity .2s;
}
.reservation-form button:hover { opacity: .9; }
.reservation-form button:disabled { opacity: .6; cursor: not-allowed; }
.form-status {
  text-align: right;
  font-size: .9rem;
  margin-top: .5rem;
  min-height: 1.2em;
}
.form-status.success { color: #2e7d32; }
.form-status.error { color: #c62828; }
.honey-row {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.reservation-confirmed {
  text-align: center;
  padding: 2rem 0;
  font-size: 1.05rem;
  color: var(--main-dark);
  font-style: italic;
}