/* Ivanos 1.0: ordering site look, replicating ivanos.online (2019-2023).
   Tokens from brand/legacy/DESIGN-TOKENS.md: Bootstrap 4 light theme, green #28a745,
   charcoal #343a40, light #f8f9fa, Montserrat body, P22 Corinthia wordmark. */

/* TODO(before go-live): P22 Corinthia is a commercial font; buy a web licence or use the logo image. */
@font-face {
  font-family: "P22 Corinthia";
  src: url("/assets/fonts/P22Corinthia.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ivanos-green: #28a745;
  --ivanos-charcoal: #343a40;
  --ivanos-light: #f8f9fa;
  --ivanos-shadow: 0 1px 3px 0 #e6ebf1;
  color-scheme: light;
}

html, body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #ffffff;
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

/* Navbar */
.navbar-header .navbar-brand {
  font-family: "P22 Corinthia", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  padding-bottom: 0;
}
.navbar-details { margin: 0; padding: 0 0 .25rem; font-size: .8rem; color: #6c757d; }
.navbar-spacer { margin-top: 6.5em; }

/* Menu title and category cards */
.menuTitle,
.dynContainer {
  text-align: center;
  border-radius: 26px;
  border: 1px solid transparent;
  box-shadow: var(--ivanos-shadow);
}
.menuTitle { padding: 2em 0; }
.menuTitle .fas { font-size: 3em; }
.menuTitle h1 { font-weight: 300; margin-top: .3em; }
.dynContainer { margin: 1em 0; padding: 1.25em 0; }
.category-collapse, .category-collapse:hover { color: #000; text-decoration: none; }
.dynTitle h2 { text-align: center; font-weight: 400; font-size: 1.8rem; margin: 0; }
.dynTitle hr { width: 60%; margin: .6rem auto; }
.dynTitle .chev { color: var(--ivanos-green); transition: transform .25s ease; display: inline-block; }
.category-collapse[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dynTable { text-align: left; margin: 1em auto 0; width: 92%; }
.dynTable th { font-weight: 500; border-top: 0; }
.dynTable td { vertical-align: middle; }
.productMenuName { color: #000; cursor: pointer; text-decoration: underline dotted rgba(0,0,0,.25); text-underline-offset: 4px; }
.productMenuName:hover { color: #000; }
.product-desc { display: block; font-size: .8rem; color: #6c757d; margin-top: .15rem; }
.product-tags .badge { font-weight: 500; margin-left: .25rem; }
.btn-add { min-width: 4.2rem; }

/* Ivanos 1.15: dish photos (the owner's approved mockup, mockups/menu-photos/). A dish WITH a photo gets a square
   thumbnail stacked on its Add button, and a 4:3 picture at the top of its pop-up; a dish without one is untouched.
   The thumbnail is exactly the Add button's own min-width (4.2rem), so the column never changes width and the Add
   buttons on rows without a photo stay exactly as they were. */
:root {
  --thumb: 4.2rem;                 /* = .btn-add min-width above */
  --photo-ground: #eef0f2;         /* what shows before a picture arrives */
  --photo-ink: #343a40;
  --photo-pill: rgba(255, 255, 255, .9);
  --photo-radius: 12px;
  --photo-lift: 0 1px 2px rgba(52, 58, 64, .10), 0 2px 8px rgba(52, 58, 64, .08);
}
.dish-stack { display: inline-flex; flex-direction: column; gap: .45rem; width: var(--thumb); vertical-align: middle; }
.dish-stack .btn-add { width: 100%; min-width: 0; }
.dish-thumb {
  display: block;
  width: var(--thumb);
  height: var(--thumb);
  max-width: 100%;
  border-radius: var(--photo-radius);
  overflow: hidden;
  background: var(--photo-ground);
  box-shadow: var(--photo-lift);
  cursor: pointer;
}
.dish-thumb.is-static { cursor: default; } /* ordering closed or dish unavailable: the photo opens nothing, like the name */
.dish-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
@media (hover: hover) { .dynTable tr:hover .dish-thumb:not(.is-static) img { transform: scale(1.05); } }

/* The pop-up picture: the box is sized (4:3) before the picture loads, so nothing moves; a 20 x 15 blurred copy fills
   it straight away and the sharp one fades in on top. */
.dish-photo {
  position: relative;
  margin: 0 0 1.1rem;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--photo-ground);
  box-shadow: var(--photo-lift);
}
.dish-photo .lqip { position: absolute; inset: -12px; background: center / cover no-repeat; filter: blur(10px); }
.dish-photo img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.dish-photo img.is-loaded { opacity: 1; }
.dish-photo figcaption {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--photo-pill);
  color: var(--photo-ink);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) {
  .dish-thumb img, .dish-photo img { transition: none; }
  .dynTable tr:hover .dish-thumb img { transform: none; }
}

/* Offline / closed boxes */
.status-banner {
  border-radius: 18px;
  padding: 1rem 1.25rem;
  box-shadow: var(--ivanos-shadow);
  margin: 1rem 0;
  text-align: center;
}
.status-banner .fas { font-size: 1.8rem; display: block; margin-bottom: .25rem; }

/* Floating order box (mobile) */
.nav-orderbox {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  background: var(--ivanos-green);
  color: #fff;
  border-radius: 14px;
  padding: .6rem 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  text-decoration: none;
}
.nav-orderbox:hover { color: #fff; text-decoration: none; }
.nav-orderbox .min-spend { font-size: .7rem; margin: 0; opacity: .9; }

/* Item modal */
.custom-control-label { width: 100%; margin-bottom: .5rem; cursor: pointer; }
.custom-control-label .price { float: right; color: #6c757d; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ivanos-green);
  border-color: var(--ivanos-green);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(40,167,69,.25); }
.extras-group-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; margin: 1rem 0 .4rem; }
#modalPrice { font-weight: 500; }

/* Forms (legacy ivanos.online field style) */
.form-control {
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: var(--ivanos-shadow);
  transition: box-shadow 150ms ease;
}
.form-control:focus { border-color: var(--ivanos-green); box-shadow: 0 0 0 .2rem rgba(40,167,69,.25); }
.discount-field { font-weight: 300; }

/* Basket */
.basket-card { border-radius: 26px; box-shadow: var(--ivanos-shadow); padding: 1.5rem; }
.basket-line { border-bottom: 1px solid #eee; padding: .75rem 0; }
.basket-line:last-child { border-bottom: 0; }
.basket-extras { font-size: .8rem; color: #6c757d; }
.qty-btn { width: 2.25rem; }
.method-toggle .btn { min-width: 8.5rem; }
.method-offline { text-decoration: line-through; }

/* Footer */
.site-footer { background: var(--ivanos-charcoal); color: var(--ivanos-light); padding: 2.5rem 1rem 1.5rem; margin-top: 3rem; }
.site-footer .font-brand { font-family: "P22 Corinthia", Georgia, serif; font-size: 2.7rem; line-height: 1; }
.site-footer a { color: var(--ivanos-light); }
.site-footer .copyright { font-size: .7rem; color: rgba(248,249,250,.55); }
.site-footer hr { border-color: rgba(248,249,250,.2); width: 60%; }

.prototype-note { font-size: .75rem; background: #fff3cd; color: #856404; text-align: center; padding: .35rem .75rem; }
/* required-field marker on checkout (2026-09-18) */
.req { color: #c0392b; font-weight: 600; }
/* Ivanos 1.10: footer links, checkout legal line, allergens / privacy / terms pages */
.site-footer .footer-links { font-size: .85rem; }
.site-footer .copyright { max-width: 46rem; margin-left: auto; margin-right: auto; }
.checkout-legal a { color: inherit; text-decoration: underline; }
.legal-page h1 { margin-bottom: 1rem; }
.legal-page h2 { font-weight: 500; }
.legal-page li { margin-bottom: .35rem; }
.allergen-list { columns: 2 16rem; column-gap: 2rem; padding-left: 1.4rem; }
.allergen-list li { break-inside: avoid; }
.allergy-callout a { color: inherit; text-decoration: underline; }
/* Ivanos 1.9: Stripe Payment Element box and the order status page */
.payment-element { min-height: 3rem; padding: .25rem 0; }
.status-icon { font-size: 3.5rem; }
.status-spin { animation: ivanos-spin 1.4s linear infinite; }
@keyframes ivanos-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status-spin { animation: none; } }
/* Ivanos 1.11 draft: the per-dish allergen table on /allergens (built from data/allergens.json) */
.al-legend { font-size: .8rem; color: #495057; background: #fff; border: 1px solid #e9ecef; border-radius: 10px; padding: .5rem .75rem; margin-bottom: .5rem; }
.al-key { display: inline-block; margin-right: .75rem; white-space: nowrap; }
.al-cat { margin: 1.75rem 0 .35rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--ivanos-charcoal); }
.allergen-table { font-size: .8rem; background: #fff; margin-bottom: .5rem; }
.allergen-table thead th { text-align: center; font-weight: 500; border-top: 0; white-space: nowrap; padding: .35rem .25rem; }
.allergen-table thead th abbr { text-decoration: none; border-bottom: 1px dotted #adb5bd; cursor: help; }
.allergen-table td { text-align: center; padding: .35rem .25rem; vertical-align: middle; }
.allergen-table th.al-dish { text-align: left; font-weight: 500; min-width: 11rem; }
.allergen-table .al-y { color: #b02a37; font-weight: 700; }
.allergen-table .al-m { color: #9a6700; font-weight: 700; }
.allergen-table .al-u { color: #adb5bd; }
.al-plain { display: block; font-weight: 400; font-size: .75rem; color: #6c757d; margin-top: .15rem; }
.al-todo { display: inline-block; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #856404; background: #fff3cd; border-radius: 4px; padding: 0 .3rem; vertical-align: middle; }
.al-extras { font-size: .85rem; }
.al-extras li { margin-bottom: .3rem; }
@media print {
  .navbar, .navbar-spacer, .site-footer, .nav-orderbox { display: none !important; }
  .basket-card { box-shadow: none; }
  .allergen-table { font-size: 8pt; }
  .table-responsive { overflow: visible !important; }
  .al-plain { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Ivanos 1.12: customer accounts. Additive only, from mockups/accounts/shared/mock.css
   (the mockup-only chrome is left out). Nothing here changes an existing page.
   --------------------------------------------------------------------------- */

/* Icons from brand/icons/icons.svg, inlined in the pages that use them */
.ic { width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; flex: none; }
.ic-lg { width: 1.5rem; height: 1.5rem; vertical-align: -.35rem; }

/* Account item in the navbar */
.nav-account .ic { width: 1.05em; height: 1.05em; }
.acct-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--ivanos-green);
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  vertical-align: -.45rem;
  margin-right: .25rem;
}
.acct-avatar-lg { width: 3rem; height: 3rem; font-size: 1.3rem; vertical-align: middle; margin-right: .75rem; }

/* Account cards: the same shell as .basket-card */
.acct-card {
  border-radius: 26px;
  box-shadow: var(--ivanos-shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--ivanos-light);
}
.acct-card h2 { font-size: 1.25rem; font-weight: 400; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
.acct-card h2 .ic { color: var(--ivanos-green); }
.acct-card .card-hint { font-size: .8rem; color: #6c757d; margin: 0 0 1rem; }

/* "Order again" tiles */
.again-tile { background: #fff; border-radius: 18px; box-shadow: var(--ivanos-shadow); padding: .9rem 1rem; margin-bottom: .75rem; }
.again-tile:last-child { margin-bottom: 0; }
.again-body, .hist-main { min-width: 0; }
.again-when { font-size: .75rem; color: #6c757d; text-transform: uppercase; letter-spacing: .05em; }
.again-items { font-size: .9rem; margin: .2rem 0 .1rem; }
.again-items .sep { color: #ced4da; padding: 0 .15rem; }
.again-total { font-weight: 500; }
/* Phone: the button goes full width under the order. Desktop: beside it. */
.again-action .btn { white-space: nowrap; display: block; width: 100%; margin-top: .65rem; }

/* Order history rows */
.hist-row { border-bottom: 1px solid #e9ecef; padding: .8rem 0; }
.hist-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hist-row:first-child { padding-top: 0; }
.hist-ref { font-size: .72rem; color: #adb5bd; letter-spacing: .04em; }
.hist-items { font-size: .85rem; color: #495057; }
.hist-side { margin-top: .3rem; }
.hist-side > * { margin-right: .7rem; }
.hist-status { font-size: .78rem; }
.hist-status .badge { font-weight: 500; }

@media (min-width: 576px) {
  .again-tile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .again-action .btn { width: auto; margin-top: 0; }
  .hist-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .hist-side { margin-top: 0; text-align: right; flex: none; }
  .hist-side > * { display: block; margin-right: 0; }
}

/* Your details */
.detail-row { display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #e9ecef; }
.detail-row:last-child { border-bottom: 0; }
.detail-row .ic { color: #adb5bd; margin-top: .2rem; }
.detail-label { font-size: .72rem; color: #6c757d; text-transform: uppercase; letter-spacing: .05em; }
.detail-value { font-size: .95rem; word-break: break-word; }

/* The gap kept for a possible paid membership. Not built, not decided (owner, 2026-09-20). */
.later-card { border: 2px dashed #ced4da; border-radius: 26px; background: #fff; padding: 1.35rem 1.5rem; margin-bottom: 1.5rem; color: #6c757d; }
.later-card h2 { font-size: 1.1rem; font-weight: 400; color: #495057; margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; }
.later-card .price { font-weight: 500; color: #343a40; }
.later-tag { display: inline-block; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; background: #fff3cd; color: #856404; border: 1px solid #ffe08a; border-radius: 4px; padding: 0 .3rem; vertical-align: middle; }

/* Delete my account, kept quiet at the bottom */
.quiet-zone { text-align: center; padding: .5rem 0 2rem; }
.quiet-zone a { color: #adb5bd; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.quiet-zone a:hover { color: #c0392b; }

/* Sign-up / log-in / claim / reset panels */
.auth-wrap { max-width: 27rem; margin: 0 auto; }
.auth-card { border-radius: 26px; box-shadow: var(--ivanos-shadow); background: var(--ivanos-light); padding: 1.75rem 1.5rem; }
.auth-card h1 { font-size: 1.6rem; font-weight: 300; margin-bottom: .25rem; text-align: center; }
.auth-card .lead-sub { font-size: .85rem; color: #6c757d; text-align: center; margin-bottom: 1.25rem; }
.auth-card label { font-size: .85rem; margin-bottom: .2rem; }
.auth-foot { text-align: center; font-size: .85rem; margin-top: 1.1rem; }

/* The "or" rule between the form and Continue with Google */
.or-rule { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: #adb5bd; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: #dee2e6; }

/* Google's own guidance: a white button, the four-colour G */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: .55rem .75rem;
  font-size: .95rem;
  font-weight: 500;
  box-shadow: var(--ivanos-shadow);
}
.btn-google:hover { background: #f8f9fa; color: #3c4043; text-decoration: none; }
.btn-google svg { width: 18px; height: 18px; flex: none; }

/* "you can always order as a guest" reassurance */
.guest-note { background: #fff; border-radius: 14px; box-shadow: var(--ivanos-shadow); padding: .75rem .9rem; font-size: .82rem; color: #495057; margin-top: 1.25rem; text-align: center; }
.guest-note .ic { color: var(--ivanos-green); }

/* Claim-your-account page */
.claim-prefill { background: #fff; border-radius: 14px; box-shadow: var(--ivanos-shadow); padding: .9rem 1rem; margin-bottom: 1.1rem; }
.claim-prefill .detail-row:first-child { padding-top: 0; }
.claim-prefill .detail-row:last-child { padding-bottom: 0; }

@media (max-width: 575.98px) {
  .acct-card, .auth-card { padding: 1.15rem 1rem; border-radius: 20px; }
  .later-card { padding: 1.1rem 1rem; border-radius: 20px; }
  .again-tile { padding: .8rem .85rem; }
}