/* ==========================================================================
   MenuCraft design system — shared by marketing, dashboards and installer.
   Built on Bootstrap 5.3; tokens taken from the mockup collection.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-sans-devanagari-devanagari-wght-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

/* ---------- Tokens ---------- */
:root {
  --mc-maroon: #7A1424;
  --mc-maroon-600: #8E1B2D;
  --mc-maroon-700: #5E0E1B;
  --mc-maroon-900: #3D0811;
  --mc-maroon-50: #FBEFEF;
  --mc-maroon-100: #F6DADC;
  --mc-gold: #C99A3B;
  --mc-gold-600: #A97D26;
  --mc-gold-100: #F3E3BF;
  --mc-cream: #FBF5EE;
  --mc-cream-2: #FFF9F3;
  --mc-sand: #F1E6D8;
  --mc-navy: #0E1F2F;
  --mc-navy-800: #13283B;
  --mc-ink: #1F1A1A;
  --mc-ink-2: #3B3333;
  --mc-muted: #6B6161;
  --mc-line: #EADFD3;
  --mc-white: #fff;
  --mc-success: #1E8E5A;
  --mc-warning: #D98A1C;
  --mc-danger: #C62828;
  --mc-info: #2F6FD6;

  --mc-font-display: "Fraunces", "Noto Sans Devanagari", "Georgia", "Times New Roman", serif;
  --mc-font-ui: "Inter", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --mc-radius-sm: 8px;
  --mc-radius: 12px;
  --mc-radius-lg: 18px;
  --mc-radius-xl: 28px;
  --mc-shadow-sm: 0 1px 2px rgba(61, 8, 17, .06), 0 2px 8px rgba(61, 8, 17, .04);
  --mc-shadow: 0 10px 30px -12px rgba(61, 8, 17, .18), 0 2px 6px rgba(61, 8, 17, .05);
  --mc-shadow-lg: 0 30px 60px -20px rgba(61, 8, 17, .35);

  /* Bootstrap bridge */
  --bs-primary: var(--mc-maroon);
  --bs-primary-rgb: 122, 20, 36;
  --bs-link-color: var(--mc-maroon);
  --bs-link-color-rgb: 122, 20, 36;
  --bs-link-hover-color: var(--mc-maroon-700);
  --bs-body-font-family: var(--mc-font-ui);
  --bs-body-color: var(--mc-ink);
  --bs-body-bg: var(--mc-cream);
  --bs-border-color: var(--mc-line);
  --bs-border-radius: var(--mc-radius);
  --bs-focus-ring-color: rgba(122, 20, 36, .22);
  --bs-success: var(--mc-success);
  --bs-danger: var(--mc-danger);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--mc-font-ui); color: var(--mc-ink); background: var(--mc-cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:lang(hi) body, [lang="hi"] { font-family: "Noto Sans Devanagari", var(--mc-font-ui); }
img { max-width: 100%; height: auto; }
::selection { background: var(--mc-maroon-100); color: var(--mc-maroon-900); }

/* ---------- Typography ---------- */
.mc-display, h1.mc-display, .mc-h1, .mc-h2, .mc-h3 { font-family: var(--mc-font-display); font-optical-sizing: auto; letter-spacing: -.015em; color: var(--mc-maroon); }
.mc-h1 { font-size: clamp(2.4rem, 4.6vw + .6rem, 4.25rem); font-weight: 700; line-height: 1.02; }
.mc-h2 { font-size: clamp(1.8rem, 2.4vw + .8rem, 2.75rem); font-weight: 650; line-height: 1.1; }
.mc-h3 { font-size: 1.35rem; font-weight: 650; line-height: 1.2; }
.mc-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--mc-maroon); background: var(--mc-maroon-50); border: 1px solid var(--mc-maroon-100); padding: .4rem .85rem; border-radius: 999px; }
.mc-lead { font-size: 1.125rem; line-height: 1.6; color: var(--mc-ink-2); }
.text-maroon { color: var(--mc-maroon) !important; }
.text-gold { color: var(--mc-gold) !important; }
.text-muted { color: var(--mc-muted) !important; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.25rem; --bs-btn-border-radius: var(--mc-radius-sm); letter-spacing: .005em; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: 1.0625rem; --bs-btn-border-radius: 10px; }
.btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .85rem; }
.btn-primary {
  --bs-btn-bg: var(--mc-maroon); --bs-btn-border-color: var(--mc-maroon);
  --bs-btn-hover-bg: var(--mc-maroon-700); --bs-btn-hover-border-color: var(--mc-maroon-700);
  --bs-btn-active-bg: var(--mc-maroon-900); --bs-btn-active-border-color: var(--mc-maroon-900);
  --bs-btn-disabled-bg: var(--mc-maroon); --bs-btn-disabled-border-color: var(--mc-maroon);
  --bs-btn-focus-shadow-rgb: 122, 20, 36;
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  box-shadow: 0 6px 16px -6px rgba(122, 20, 36, .55);
}
.btn-primary:hover { box-shadow: 0 10px 22px -8px rgba(122, 20, 36, .6); }
.btn-outline-primary {
  --bs-btn-color: var(--mc-maroon); --bs-btn-border-color: var(--mc-maroon);
  --bs-btn-hover-bg: var(--mc-maroon); --bs-btn-hover-border-color: var(--mc-maroon); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mc-maroon-700); --bs-btn-active-border-color: var(--mc-maroon-700);
  --bs-btn-focus-shadow-rgb: 122, 20, 36; background: #fff;
}
.btn-gold {
  --bs-btn-bg: var(--mc-gold); --bs-btn-border-color: var(--mc-gold); --bs-btn-color: #2a1a05;
  --bs-btn-hover-bg: var(--mc-gold-600); --bs-btn-hover-border-color: var(--mc-gold-600); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mc-gold-600); --bs-btn-active-border-color: var(--mc-gold-600);
}
.btn-light-cream { --bs-btn-bg: #fff; --bs-btn-color: var(--mc-maroon); --bs-btn-border-color: #fff; --bs-btn-hover-bg: var(--mc-cream); --bs-btn-hover-color: var(--mc-maroon-700); --bs-btn-hover-border-color: var(--mc-cream); }

/* ---------- Forms ---------- */
.form-label { font-size: .875rem; font-weight: 600; color: var(--mc-ink-2); margin-bottom: .35rem; }
.form-control, .form-select { border-color: var(--mc-line); border-radius: var(--mc-radius-sm); padding: .65rem .9rem; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--mc-maroon); box-shadow: 0 0 0 .2rem rgba(122, 20, 36, .12); }
.form-check-input:checked { background-color: var(--mc-maroon); border-color: var(--mc-maroon); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(122, 20, 36, .15); border-color: var(--mc-maroon); }
.form-switch .form-check-input:checked { background-color: var(--mc-success); border-color: var(--mc-success); }

/* ---------- Cards & surfaces ---------- */
.mc-card { background: #fff; border: 1px solid var(--mc-line); border-radius: var(--mc-radius-lg); box-shadow: var(--mc-shadow-sm); }
.mc-card--lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mc-card--lift:hover { transform: translateY(-4px); box-shadow: var(--mc-shadow); border-color: var(--mc-maroon-100); }
.mc-icon-tile { width: 48px; height: 48px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--mc-maroon-50); color: var(--mc-maroon); font-size: 1.35rem; flex: none; }
.mc-icon-tile--gold { background: #FBF1DD; color: var(--mc-gold-600); }

/* ---------- Brand lockup ---------- */
.mc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mc-maroon); }
.mc-brand strong { display: block; font-family: var(--mc-font-display); font-size: 1.45rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.mc-brand small { display: block; font-size: .72rem; color: var(--mc-muted); margin-top: 3px; letter-spacing: .01em; }
.mc-brand--light { color: #fff; } .mc-brand--light small { color: rgba(255,255,255,.62); }

/* ---------- Badges ---------- */
.mc-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .28rem .6rem; border-radius: 999px; line-height: 1.2; }
.mc-badge--success { background: #E6F4EC; color: var(--mc-success); }
.mc-badge--warning { background: #FCF1DE; color: #A8680D; }
.mc-badge--danger { background: #FBE6E6; color: var(--mc-danger); }
.mc-badge--info { background: #E7EFFC; color: var(--mc-info); }
.mc-badge--maroon { background: var(--mc-maroon); color: #fff; }
.mc-badge--gold { background: var(--mc-gold-100); color: #7a5512; }

/* ---------- Food-type marks (Indian veg / non-veg convention) ---------- */
.mc-veg, .mc-nonveg { width: 14px; height: 14px; border: 1.5px solid; border-radius: 3px; display: inline-grid; place-items: center; flex: none; }
.mc-veg { border-color: #1E8E5A; } .mc-veg::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1E8E5A; }
.mc-nonveg { border-color: #A3341B; } .mc-nonveg::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #A3341B; }

/* ---------- Ornaments ---------- */
.mc-lotus { display: flex; align-items: center; justify-content: center; gap: .75rem; color: var(--mc-gold); }
.mc-lotus::before, .mc-lotus::after { content: ""; height: 1px; flex: 0 1 80px; background: linear-gradient(90deg, transparent, var(--mc-gold)); }
.mc-lotus::after { transform: scaleX(-1); }

/* ---------- Installer ---------- */
.mc-install { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, var(--mc-maroon-50), transparent 60%), radial-gradient(900px 500px at 110% 10%, #FBF1DD, transparent 60%), var(--mc-cream); }
.mc-install__wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px; }
.mc-stepper { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 0; gap: 8px; counter-reset: s; }
.mc-stepper li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8125rem; color: var(--mc-muted); font-weight: 500; position: relative; }
.mc-stepper li span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--mc-line); font-weight: 700; color: var(--mc-muted); z-index: 1; }
.mc-stepper li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--mc-line); }
.mc-stepper li.is-current span { background: var(--mc-maroon); border-color: var(--mc-maroon); color: #fff; box-shadow: 0 0 0 5px var(--mc-maroon-50); }
.mc-stepper li.is-current { color: var(--mc-maroon); font-weight: 600; }
.mc-stepper li.is-done span { background: var(--mc-success); border-color: var(--mc-success); color: #fff; }
.mc-stepper li.is-done::after { background: var(--mc-success); }
.mc-success-tick { width: 72px; height: 72px; border-radius: 50%; background: var(--mc-success); color: #fff; display: grid; place-items: center; font-size: 2.2rem; box-shadow: 0 0 0 10px #E6F4EC; }

/* ---------- Utilities ---------- */
.mc-section { padding: clamp(64px, 8vw, 112px) 0; }
.mc-container { max-width: 1240px; }
.visually-hidden-focusable:focus { position: fixed; top: 10px; left: 10px; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 8px; box-shadow: var(--mc-shadow); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.mc-badge--muted { background: #EFEAE4; color: #6B6161; }