/* Shared base for the five structural layouts and their showcase demos.
   The accent gradient is supplied per site as inline custom properties, so one
   stylesheet serves all five layouts plus every custom re-tint. Layout-specific
   structure lives in layouts.css; the widget engine's own rules live in widget.css,
   which is what a custom-HTML page is given so its modal is never unstyled. */

:root {
  /* --- Fallback palette -------------------------------------------------------
     Every layout overrides these with the tokens emitted by _site_head.html. They
     exist so the stylesheet also renders correctly on a page that never loaded a
     layout (a bare custom-HTML page that only links site.css). The values are the
     dark neutral base; the five real identities live in templates_catalog.py. */
  --accent-a: #3A86FF;
  --accent-b: #22D3EE;
  --bg-deep: #060B19;
  --bg-surface: #0A122B;
  --bg-surface-elevated: #101E42;
  --surface-card: #0E1730;
  --surface-strong: #16213F;
  --surface-input: #0A1226;
  /* --- Form fields ------------------------------------------------------------
     Widget.js builds every form control in JavaScript, so it cannot know which of the
     five layouts (or a custom page) it landed on. It reads these three tokens instead:
     the palette in templates_catalog.py emits them per layout, and the dark neutral
     values here are the fallback for a page that only linked site.css. `--input-text`
     belongs to the *field*, not the page, so a white field keeps near-black text even
     on a palette whose body copy is white. */
  --input-bg: #0A1226;
  --input-text: #F1F5F9;
  --input-border: rgba(255, 255, 255, .16);
  --border-subtle: rgba(255, 255, 255, .09);
  --border-active: rgba(255, 255, 255, .16);
  --text-main: #F1F5F9;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --hero-glow: #3A86FF;
  --card-shadow: 0 12px 32px -8px rgba(0, 0, 0, .5);
  --on-accent: #FFFFFF;
  --overlay-weak: rgba(255, 255, 255, .04);
  --overlay-soft: rgba(255, 255, 255, .05);
  --on-accent-text: #0B1220;
  --accent-soft: rgba(58, 134, 255, .13);
  --accent-line: rgba(58, 134, 255, .3);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-deep, #060B19);
  color: var(--text-main, #F1F5F9);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.ldg-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.ldg-top {
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 30;
}
.ldg-top-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px; padding: 8px 0;
}
.ldg-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17px; }
.ldg-mark {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color: var(--on-accent, #fff); font-size: 18px;
}
.ldg-contact { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.ldg-phone { font-weight: 700; }
.ldg-hours { color: var(--text-muted, #94A3B8); font-size: 13px; }

/* ---------- Hero ---------- */
.ldg-hero { position: relative; overflow: hidden; padding: 64px 0 56px; }
.ldg-hero-glow {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(110px); opacity: .38; pointer-events: none;
  background: var(--hero-glow, var(--accent-a)); top: -240px; right: -140px;
}
.ldg-hero-inner { position: relative; z-index: 1; max-width: 62ch; }
.ldg-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; margin-bottom: 22px; border-radius: 999px;
  background: var(--overlay-weak);
  border: 1px solid var(--border-active);
  font-size: 13px; font-weight: 600;
}
.ldg-badge .material-symbols-outlined { font-size: 17px; color: var(--accent-a); }
.ldg-hero h1 { font-size: clamp(2rem, 5.6vw, 3.4rem); font-weight: 800; margin-bottom: 18px; }
.ldg-hero h1 .ldg-grad {
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ldg-hero p { color: var(--text-muted, #94A3B8); font-size: clamp(1rem, 2.2vw, 1.14rem); margin-bottom: 28px; }
.ldg-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ldg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 24px; border-radius: 12px;
  border: 1px solid transparent; font-family: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer;
  transition: filter .2s, border-color .2s, background .2s;
}
.ldg-btn:hover { filter: brightness(1.08); }
.ldg-btn-primary {
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color: var(--on-accent, #fff); box-shadow: var(--card-shadow);
}
.ldg-btn-ghost { background: var(--overlay-weak); border-color: var(--border-active); color: var(--text-main, #F1F5F9); }

/* ---------- Sections ---------- */
.ldg-section { padding: 56px 0; border-top: 1px solid var(--border-subtle); }
.ldg-head { max-width: 52ch; margin-bottom: 30px; }
.ldg-head h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 800; margin-bottom: 10px; }
.ldg-head p { color: var(--text-muted, #94A3B8); }

.ldg-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ldg-card {
  padding: 24px 22px; border-radius: 16px;
  background: var(--surface-strong);
  border: 1px solid var(--border-subtle);
}
.ldg-card .material-symbols-outlined {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px;
  font-size: 24px; color: var(--on-accent, #fff);
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
}
.ldg-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.ldg-card p { color: var(--text-muted, #94A3B8); font-size: 14.5px; }

/* ---------- Price list ---------- */
.ldg-items { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ldg-item {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 18px; border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--border-subtle);
}
.ldg-item-name { font-weight: 600; }
.ldg-item-note { color: var(--text-dim, #64748B); font-size: 12.5px; }
.ldg-item-dots { flex: 1; border-bottom: 1px dashed var(--border-active); }
.ldg-item-price { font-weight: 800; white-space: nowrap; color: var(--accent-a); }

/* ---------- Widget triggers ----------
   The forms themselves live in the modal built by static/js/widget.js and are styled by
   the nx-* rules in widget.css, which that engine ships with. These styles are only for
   the buttons that open it. */
.ldg-widgets { display: grid; grid-template-columns: 1fr; gap: 18px; }

.ldg-widget-trigger {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 20px 22px; border-radius: 16px; cursor: pointer;
  text-align: left; font-family: inherit;
  background: var(--surface-card);
  border: 1px solid var(--accent-line);
  color: var(--text-main, #F1F5F9);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.ldg-widget-trigger:hover {
  border-color: var(--accent-a); transform: translateY(-2px);
  background: var(--surface-card);
}
.ldg-widget-trigger:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 2px; }
.ldg-widget-icon { font-size: 30px; color: var(--accent-a); flex: none; }
.ldg-widget-body { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ldg-widget-name { font-weight: 700; font-size: 1rem; }
.ldg-widget-desc { font-size: 13.5px; color: var(--text-muted, #94A3B8); line-height: 1.45; }
.ldg-widget-go {
  flex: none; padding: 9px 15px; border-radius: 9px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 12.5px; font-weight: 700; color: var(--text-main, #F1F5F9);
}

/* ---------- FAQ ---------- */
.ldg-faq { display: grid; gap: 10px; }
.ldg-faq details {
  border-radius: 12px; padding: 0 18px;
  background: var(--surface-strong);
  border: 1px solid var(--border-subtle);
}
.ldg-faq summary { padding: 16px 0; cursor: pointer; font-weight: 650; list-style: none; }
.ldg-faq summary::-webkit-details-marker { display: none; }
.ldg-faq p { padding-bottom: 16px; color: var(--text-muted, #94A3B8); font-size: 14.5px; }

/* ---------- CTA band + footer ---------- */
.ldg-cta {
  padding: 44px 26px; border-radius: 20px; text-align: center;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color: var(--on-accent, #fff);
}
.ldg-cta h2 { font-size: clamp(1.3rem, 3.4vw, 1.9rem); margin-bottom: 10px; }
.ldg-cta p { opacity: .9; margin-bottom: 22px; }
.ldg-cta .ldg-btn { background: var(--on-accent, #fff); color: var(--on-accent-text, #0B1220); }

.ldg-footer {
  padding: 30px 0; margin-top: 20px; text-align: center;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-dim, #64748B); font-size: 13px;
}

/* ---------- Form fields ----------
   A field's background is the page's job, not the browser's. Without these rules an
   input on a light layout inherits the UA's white field with dark text — until the
   layout's own `color: var(--text-main)` (white, on the dark palettes' body copy) or a
   `color-scheme` hint turns it into dark-on-dark. The field therefore states both its
   background and its text colour from tokens, and keeps a visible hairline so a white
   field on a white card is still visibly a field. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select,
.form-control {
  background-color: var(--input-bg, #0A1226);
  color: var(--input-text, #F1F5F9);
  border: 1px solid var(--input-border, rgba(255, 255, 255, .16));
  border-radius: 10px;
  font-family: inherit;
}
input::placeholder,
textarea::placeholder { color: var(--text-dim, #64748B); opacity: 1; }
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 1px; }

/* Light palettes: the requirement is absolute — a white field with dark, readable text
   and a hairline border — so it is stated for the whole document rather than left to
   each control's own rule. `<body data-surface="light">` is emitted by _site_head.html
   from the palette, and it is the only signal a custom page needs to supply. */
body[data-surface="light"] input:not([type="checkbox"]):not([type="radio"]),
body[data-surface="light"] textarea,
body[data-surface="light"] select,
body[data-surface="light"] .form-control {
  background-color: #FFFFFF;
  color: #1A1A1A;
  border: 1px solid #E2E8F0;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal; font-style: normal; font-size: 22px; line-height: 1;
  display: inline-block; white-space: nowrap; direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  user-select: none;
  /* Hidden until the icon font is confirmed, so a slow CDN never paints the ligature
     name ("restaurant") as body copy. The landing script adds .icons-ready; the
     <noscript> rule in the head covers the JS-off case. */
  visibility: hidden;
}
html.icons-ready .material-symbols-outlined { visibility: visible; }
.icon-filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

@media (min-width: 760px) {
  .ldg-hero { padding: 92px 0 76px; }
  .ldg-cards { grid-template-columns: repeat(3, 1fr); }
  .ldg-items { grid-template-columns: repeat(2, 1fr); }
  .ldg-widgets { grid-template-columns: repeat(2, 1fr); }
  .ldg-section { padding: 76px 0; }
}

@media (max-width: 520px) {
  .ldg-row { grid-template-columns: 1fr; }
  .ldg-hours { display: none; }
}