/* ============================================================
   Shared stylesheet for the Applebee's + IHOP location website
   Neutral, warm base theme that hosts BOTH brands equally.
   Brand accent colors are available as variables so each
   brand's section can use its own color where appropriate.
   Edit colors, fonts, and spacing here — changes apply to
   every page at once.
   ============================================================ */

:root {
  /* Neutral base */
  --bg: #fffdf8;          /* warm white */
  --bg-soft: #f6f1e8;     /* cream panel */
  --ink: #262019;         /* warm near-black text */
  --muted: #6b6459;       /* secondary text */
  --border: #e7dfd2;

  /* Shared accent (breakfast/grill "maple") — neutral to both brands */
  --accent: #c9741a;
  --accent-dark: #a85e12;

  /* Brand accents — use inside each brand's own areas */
  --ihop-blue: #0071ce;
  --ihop-blue-dark: #00539b;
  --ihop-red: #e4002b;
  --applebees-red: #e2231a;
  --applebees-green: #4c8b2b;

  --max: 1200px;
  --radius: 10px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-dark); }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

img { max-width: 100%; height: auto; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header / Navigation ---------- */
.site-header {
  background: #fff; /* pure white so the JPG logo blends invisibly */
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(38, 32, 25, 0.05);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  max-width: var(--max);
  margin: 0 auto;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.3px;
  color: var(--ink);
  text-decoration: none;
}

/* Logo image slot — drop the real combined logo file in here.
   Until then, the brand renders as clean text. */
.brand .logo {
  height: 48px;
  width: auto;
  display: block;
}

.brand .mark { color: var(--accent); font-weight: 900; }

.nav-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-links a:hover { background: var(--bg-soft); color: var(--accent-dark); }

.nav-links a.active { color: var(--accent-dark); background: var(--bg-soft); }

/* ---------- Page hero ---------- */
.page-hero {
  background: var(--bg-soft);
  color: var(--ink);
  padding: 64px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.page-hero p {
  margin: 0 auto;
  max-width: 560px;
  font-size: 1.1rem;
  color: var(--muted);
}

/* ---------- Main content ---------- */
main { padding: 48px 0 64px; }

.placeholder {
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

.placeholder h2 { color: var(--ink); margin-top: 0; }

main section { margin-bottom: 32px; } /* spacing only inside page content, not full-bleed bands */

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover { background: var(--accent-dark); }

.btn-outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--ink);
}

/* Brand-tinted button helpers (for later, per-brand sections) */
.btn-ihop { background: var(--ihop-blue); }
.btn-ihop:hover { background: var(--ihop-blue-dark); }
.btn-applebees { background: var(--applebees-red); }
.btn-applebees:hover { background: #b71c14; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #ded7cc;
  padding: 32px 20px;
  text-align: center;
  font-size: 0.9rem;
}

.site-footer a { color: #fff; }

.site-footer .footer-logo {
  height: 44px;
  width: auto;
  margin-bottom: 16px;
  opacity: 0.92;
}

.site-footer .footer-links {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  list-style: none;
  padding: 0;
}

/* ---------- Simple form styling (used later) ---------- */
label { display: block; font-weight: 600; margin: 16px 0 6px; }

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}

textarea { min-height: 120px; resize: vertical; }

.form-wrap { max-width: 620px; margin: 0 auto; }

/* ============================================================
   Dual-brand theming — Applebee's (red) + IHOP (blue) accents
   used consistently across the whole site.
   ============================================================ */

/* Gradient brand stripe across the top of the header */
.site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--applebees-red), var(--ihop-blue));
}

/* Gradient underline beneath every page hero */
.page-hero { position: relative; }
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--applebees-red), var(--ihop-blue));
}

/* Brand pills shown in the hero of every page */
.brand-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
}

.pill-applebees { background: var(--applebees-red); }
.pill-ihop { background: var(--ihop-blue); }

/* Inline text badges for use inside page copy */
.badge {
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
}
.badge-applebees { background: var(--applebees-red); }
.badge-ihop { background: var(--ihop-blue); }

/* Placeholder cards get a subtle branded top accent */
.placeholder { border-top: 4px solid var(--ihop-blue); }

/* Gradient brand stripe across the top of the footer */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ihop-blue), var(--applebees-red));
}

/* ============================================================
   Home page — modern, minimal
   ============================================================ */

.home-hero {
  text-align: center;
  padding: 88px 20px 40px;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow .eb-a { color: var(--applebees-red); }
.eyebrow .eb-i { color: var(--ihop-blue); }

.home-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.home-hero .lede {
  margin: 0 auto;
  max-width: 540px;
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.65;
}

.home-main { padding: 28px 0 72px; }

/* ---------- The two menu cards ---------- */
.menu-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.menu-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(38, 32, 25, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(38, 32, 25, 0.14);
}

.card-photo {
  display: block;
  height: 240px;
  position: relative;
  overflow: hidden;
}

.card-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: transform 0.5s ease;
}

.photo-applebees::before { background-image: url("../assets/food-applebees.jpg"); }
.photo-ihop::before { background-image: url("../assets/food-ihop.jpg"); }
.photo-dual::before { background-image: url("../assets/food-dual.jpg"); }

.menu-card:hover .card-photo::before { transform: scale(1.05); }

.card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 26px 24px 28px;
}

.card-logo { height: 58px; width: auto; margin-bottom: 2px; }

.card-line { color: var(--muted); font-size: 0.98rem; }

.card-cta {
  margin-top: 8px;
  font-weight: 700;
  font-size: 1.02rem;
  transition: opacity 0.15s ease;
}

.cta-applebees { color: var(--applebees-red); }
.cta-ihop { color: var(--ihop-blue); }
.cta-dual { color: var(--accent-dark); }

/* combined logo is wide, keep it balanced with the brand logos */
.card-logo-dual { height: 46px; margin-top: 6px; margin-bottom: 8px; }

.menu-card:hover .card-cta { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- "How was your visit?" — its own panel ---------- */
.visit-wrap { margin-top: 56px; }

.visit-panel {
  background: var(--ink);
  color: #fff;
  border-radius: 24px;
  text-align: center;
  padding: 60px 36px;
}

.visit-panel h2 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
}

.visit-panel p {
  margin: 0 auto 26px;
  max-width: 540px;
  color: #d9d2c7;
  font-size: 1.05rem;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .menu-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .home-hero { padding: 64px 20px 28px; }
  .card-photo { height: 200px; }
  .visit-panel { padding: 44px 24px; }
}

@media (max-width: 640px) {
  .nav { justify-content: center; }
  .page-hero { padding: 48px 16px; }
}

/* ============================================================
   Our Story — timeline
   ============================================================ */

.story-intro {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.7;
}

.story-timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 40px;
}

/* the vertical line */
.story-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--ihop-blue), var(--applebees-red));
  opacity: 0.35;
}

.story-item {
  position: relative;
  padding-bottom: 52px;
}

.story-item:last-child { padding-bottom: 0; }

/* the dot */
.story-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg-soft);
}

.story-item.dot-ihop::before { background: var(--ihop-blue); }
.story-item.dot-applebees::before { background: var(--applebees-red); }

.story-year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 6px;
}

.dot-ihop .story-year { color: var(--ihop-blue); }
.dot-applebees .story-year { color: var(--applebees-red); }

.story-item h2 {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--ink);
}

.story-item p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.75;
}

.story-item p:last-child { margin-bottom: 0; }

.story-logo { height: 44px; width: auto; margin-bottom: 14px; display: block; }

/* closing call-to-action block */
.story-cta {
  margin-top: 64px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px 32px;
}

.story-cta h2 { margin: 0 0 10px; }

.story-cta p {
  max-width: 520px;
  margin: 0 auto 24px;
  color: var(--muted);
  line-height: 1.7;
}

.story-cta .btn { margin: 0 6px 10px; }

/* ============================================================
   Menu page
   ============================================================ */

.menu-note {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
  color: var(--muted);
  font-size: 0.98rem;
}

/* jump buttons at the top */
.menu-jump {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* brand section banner */
.brand-section { margin-bottom: 72px; scroll-margin-top: 96px; }

.brand-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 3px solid var(--border);
}

.banner-left > img { height: 60px; width: auto; }

.brand-banner .banner-sub { color: var(--muted); font-size: 1rem; }

.section-ihop .brand-banner { border-bottom-color: var(--ihop-blue); }
.section-applebees .brand-banner { border-bottom-color: var(--applebees-red); }

/* category cards */
.menu-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.menu-cat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 26px;
}

.menu-cat h3 {
  margin: 0 0 16px;
  font-size: 1.15rem;
}

.section-ihop .menu-cat h3 { color: var(--ihop-blue); }
.section-applebees .menu-cat h3 { color: var(--applebees-red); }

.menu-cat ul { list-style: none; margin: 0; padding: 0; }

.menu-cat li { padding: 9px 0; border-top: 1px solid var(--bg-soft); }

.menu-cat li:first-child { border-top: none; padding-top: 0; }

.mi-name { display: block; font-weight: 700; color: var(--ink); }

.mi-desc { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

@media (max-width: 760px) {
  .menu-cats { grid-template-columns: 1fr; }
  .brand-banner { flex-direction: column; text-align: center; gap: 10px; }
}

/* photo sits inside the brand banner at its natural aspect ratio —
   never stretched or cropped */
.banner-left { display: flex; align-items: center; gap: 18px; }

.banner-photo {
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

@media (max-width: 760px) {
  .banner-left { flex-direction: column; gap: 10px; }
  .banner-photo { width: 100%; }
}

/* ============================================================
   Mobile navigation (hamburger)
   ============================================================ */

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  padding: 8px 13px;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 720px) {
  .nav-toggle { display: block; margin-left: auto; }

  .nav { justify-content: flex-start; }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 10px;
  }

  .nav.open .nav-links { display: flex; }

  .nav-links a { display: block; padding: 12px 10px; font-size: 1.02rem; }
}

/* calorie chip on menu items */
.mi-name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.mi-cal {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* ============================================================
   Our Locations page
   ============================================================ */

.loc-intro {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
  color: var(--muted);
  font-size: 1.05rem;
}

.loc-state { margin-bottom: 56px; }

.loc-state > h2 {
  font-size: 1.5rem;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--border);
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.loc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loc-card.is-muted { background: var(--bg-soft); }

.loc-city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
}

.loc-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
}

.tag-applebees { background: var(--applebees-red); }
.tag-ihop { background: var(--ihop-blue); }
.tag-24 { background: var(--applebees-green); }
.tag-soon { background: var(--accent); }
.tag-closed { background: #8a8378; }

.loc-addr { color: var(--muted); font-size: 0.95rem; margin: 0; }

.loc-note { color: var(--muted); font-size: 0.88rem; font-style: italic; margin: 0; }

.loc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }

.btn-sm { padding: 8px 14px; font-size: 0.88rem; border-radius: 7px; }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--ink);
}

.btn-ghost:hover { background: var(--bg-soft); }

@media (max-width: 980px) { .loc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .loc-grid { grid-template-columns: 1fr; } }

/* search + filter toolbar on Our Locations */
.loc-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

#loc-search {
  flex: 1;
  min-width: 220px;
  max-width: 380px;
  padding: 11px 16px;
  border-radius: 999px;
}

.loc-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip:hover { background: var(--bg-soft); }

.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

#loc-near.active { background: var(--accent-dark); }

.loc-msg { color: var(--muted); font-size: 0.88rem; }

.loc-dist {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-left: 6px;
}

@media (max-width: 640px) {
  .loc-tools { flex-direction: column; align-items: stretch; }
  #loc-search { max-width: none; }
  .loc-filters { justify-content: center; }
  #loc-near { align-self: center; }
}

/* ============================================================
   Forms: Guest Comments + Contact Us
   ============================================================ */

.form-lede {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 28px;
}

.form-title { margin: 40px 0 8px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.opt { font-weight: 400; color: var(--muted); font-size: 0.88em; }

.btn-submit { margin-top: 24px; width: 100%; padding: 14px; font-size: 1.05rem; }

.form-note {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.contact-redirect {
  max-width: 620px;
  margin: 0 auto 44px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 14px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.contact-redirect p { margin: 0; color: var(--muted); max-width: 360px; }

.contact-redirect strong { color: var(--ink); }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .contact-redirect { flex-direction: column; text-align: center; }
}

/* phone number on location cards */
.loc-phone { margin: 0; font-size: 0.95rem; }

.loc-phone a {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.loc-phone a:hover { text-decoration: underline; }

/* ============================================================
   Promo signup modal + deals pill
   ============================================================ */

.promo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(38, 32, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.promo-modal {
  background: #fff;
  border-radius: 20px;
  max-width: 440px;
  width: 100%;
  padding: 34px 30px 28px;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  border-top: 5px solid var(--accent);
}

.promo-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
}

.promo-close:hover { color: var(--ink); }

.promo-badge {
  display: inline-block;
  background: var(--applebees-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  padding: 8px 20px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.promo-modal h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
}

.promo-modal p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.promo-modal .promo-code {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.12em;
  background: var(--bg-soft);
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
  padding: 6px 14px;
  display: inline-block;
  margin-bottom: 14px;
}

.promo-modal input[type="email"],
.promo-modal input[type="tel"] {
  margin-bottom: 10px;
  text-align: center;
}

.promo-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 6px 0 14px;
  line-height: 1.45;
}

.promo-consent input { width: auto; margin-top: 2px; }

.promo-modal .btn { width: 100%; }

.promo-error { color: var(--applebees-red); font-size: 0.85rem; margin: 0 0 10px; display: none; }

.promo-success { font-size: 1.05rem; color: var(--ink); padding: 24px 0; }

.deals-pill {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 150;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.deals-pill:hover { background: var(--accent-dark); }

@media (max-width: 480px) {
  .promo-modal { padding: 28px 20px 22px; }
}

/* ============================================================
   Legal pages (Privacy Policy)
   ============================================================ */

.legal { max-width: 720px; margin: 0 auto; }

.legal-date { color: var(--muted); font-size: 0.9rem; font-style: italic; }

.legal h2 { font-size: 1.2rem; margin: 32px 0 10px; }

.legal p, .legal li { color: var(--muted); line-height: 1.7; }

.legal strong { color: var(--ink); }

.legal ul { padding-left: 22px; }

.legal li { margin-bottom: 8px; }