/* ============================================================
   Online eMenu — Orange Brand Theme
   Matched to logo: Coral Orange #E8622A + Charcoal #2D2D2D
   Link AFTER style.css to apply this theme.
   ============================================================ */

:root {
  --blue:        #E8622A;   /* Logo coral-orange (primary) */
  --blue-dark:   #CF5220;   /* Darker coral-orange */
  --blue-light:  #FEF0EB;   /* Soft warm orange tint */
  --gold:        #F59E0B;   /* Amber as secondary accent */
  --gold-bright: #F59E0B;
  --gold-light:  #FEF3C7;
  --green:       #10B981;
  --navy:        #1A1A1A;   /* Charcoal matching logo text */
  --navy-mid:    #2D2D2D;
  --navy-light:  #3D3D3D;
  --text:        #1A1A1A;
  --gray-800:    #2D2D2D;
}

/* ── Logo text — styled to match brand ─────────────────────── */
.nav-logo-text {
  font-size: 1.4rem;
  font-weight: 400;
  color: #2D2D2D;
  letter-spacing: -0.01em;
}
.nav-logo-text .e-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #E8622A;
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  border: 2.5px dashed rgba(255,255,255,0.6);
  margin-right: 2px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.footer-brand .nav-logo-text { color: rgba(255,255,255,.9); }

/* ── Hero — warm dark charcoal gradient ──────────────────────*/
.hero {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D1810 60%, #221409 100%);
}
.hero-glow {
  background: radial-gradient(circle, rgba(232,98,42,.28) 0%, transparent 70%);
}

/* ── Navbar ──────────────────────────────────────────────────*/
.navbar { border-bottom-color: rgba(232,98,42,.12); }
.nav-links a:hover,
.nav-links a.active {
  color: var(--blue);
  background: var(--blue-light);
}
.lang-switcher:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}

/* ── Buttons ─────────────────────────────────────────────────*/
.btn-primary {
  background: var(--blue);
  box-shadow: 0 4px 14px rgba(232,98,42,.35);
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 6px 20px rgba(232,98,42,.45);
}
.btn-gold {
  background: #1A1A1A;
  color: #fff;
  box-shadow: 0 4px 14px rgba(26,26,26,.4);
}
.btn-gold:hover {
  background: #2D2D2D;
}
.btn-outline-blue {
  border-color: var(--blue);
  color: var(--blue);
}
.btn-outline-blue:hover {
  background: var(--blue);
  color: #fff;
}
.btn-outline {
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
}

/* ── Badges ──────────────────────────────────────────────────*/
.badge-blue  { background: var(--blue-light); color: var(--blue); }
.badge-gold  { background: #1A1A1A; color: #fff; }
.badge-navy  { background: rgba(255,255,255,.15); color: #fff; }

/* ── Section headers ─────────────────────────────────────────*/
.section-header h2 { color: #1A1A1A; }

/* ── Announce bar ────────────────────────────────────────────*/
.announce-bar {
  background: linear-gradient(90deg, #1A1A1A 0%, #2D2D2D 100%);
}
.announce-bar a { color: #E8622A; }

/* ── Stats bar number accent ─────────────────────────────────*/
.stat-item .num span { color: var(--blue); }

/* ── Product cards ───────────────────────────────────────────*/
.product-card:hover { border-color: rgba(232,98,42,.25); }
.product-card::before {
  background: linear-gradient(90deg, var(--blue), var(--gold-bright));
}
.product-link { color: var(--blue); }
.product-card ul li i { color: var(--blue); }

/* ── Feature section ─────────────────────────────────────────*/
.feature-icon {
  background: var(--blue-light);
  color: var(--blue);
}

/* ── Industry tabs ───────────────────────────────────────────*/
.ind-tab:hover  { border-color: var(--blue); color: var(--blue); }
.ind-tab.active { background: var(--blue); border-color: var(--blue); }
.industry-features li i { color: var(--blue); }

/* ── Steps ───────────────────────────────────────────────────*/
.step-num {
  background: var(--blue);
  box-shadow: 0 4px 14px rgba(232,98,42,.4);
}
.steps-grid::before {
  background: linear-gradient(90deg, var(--blue), var(--gold-bright));
}

/* ── Pricing ─────────────────────────────────────────────────*/
.toggle-switch { background: var(--blue); }
.pricing-card.featured {
  background: #1A1A1A;
  border-color: var(--blue);
  box-shadow: 0 20px 60px rgba(232,98,42,.2);
}
.featured-badge {
  background: linear-gradient(90deg, var(--blue), var(--gold-bright));
}
.plan-price .currency,
.plan-price .amount { color: #1A1A1A; }
.pricing-card.featured .plan-price .currency,
.pricing-card.featured .plan-price .amount { color: #fff; }
.pricing-card.featured .plan-name { color: rgba(255,255,255,.6); }
.pricing-card.featured .plan-desc { color: rgba(255,255,255,.55); }
.pricing-card.featured .plan-features li { color: rgba(255,255,255,.75); }
.pricing-card.featured .plan-features li i { color: #34D399; }

/* ── CTA section ─────────────────────────────────────────────*/
.cta-section {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D1810 100%);
}
.cta-section::before {
  background: radial-gradient(ellipse at center, rgba(232,98,42,.2) 0%, transparent 70%);
}

/* ── Contact ─────────────────────────────────────────────────*/
.contact-icon { background: var(--blue-light); color: var(--blue); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(232,98,42,.12);
}

/* ── Page hero (inner pages) ─────────────────────────────────*/
.page-hero {
  background: linear-gradient(135deg, #1A1A1A, #2D1810);
}

/* ── Footer ──────────────────────────────────────────────────*/
.footer { background: #111111; }
.footer-social:hover {
  background: var(--blue);
  border-color: var(--blue);
}

/* ── Dashboard mock orange bars ──────────────────────────────*/
.dash-bar {
  background: linear-gradient(180deg, #E8622A 0%, rgba(232,98,42,.35) 100%);
}
.dash-bar.gold {
  background: linear-gradient(180deg, var(--gold-bright) 0%, rgba(245,158,11,.35) 100%);
}

/* ── Compare table ───────────────────────────────────────────*/
.compare-table th.featured-col { background: var(--blue); }
.compare-table tr:hover td { background: var(--blue-light); }
.section-divider { color: var(--blue); }

/* ── Scroll progress / active nav ───────────────────────────*/
.navbar.scrolled { box-shadow: 0 4px 20px rgba(232,98,42,.08); }