/* ==========================================================================
   Ayroassit — Shared Design System
   Neo-Apple / Glassy Gradients / Organic Forms
   Used by: index.html, templates/*.html, admin/admin-panel.html
   ========================================================================== */

:root {
  /* base surface */
  --bg-cream: #f6f1e8;
  --bg-cream-2: #efe7d8;

  /* text */
  --text-dark: #1f2a22;
  --text-muted: #6f6a5e;
  --text-on-dark: #f6f1e8;

  /* brand gradients */
  --green-deep: #1f3d2b;
  --green-deep-2: #2d5a3d;
  --orange: #ff8f5e;
  --peach: #ffcfa8;

  /* glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.65);

  /* shadow */
  --shadow-soft: 0 20px 60px rgba(31, 42, 34, 0.12);
  --shadow-lift: 0 28px 80px rgba(31, 42, 34, 0.18);

  /* radius */
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  color: var(--text-dark);
  background: var(--bg-cream);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------------
   Ambient floating blobs — soft depth behind content
   ------------------------------------------------------------------------ */

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: float-blob 16s ease-in-out infinite;
}

.ambient-bg span:nth-child(1) {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -100px;
  background: radial-gradient(circle at 30% 30%, var(--peach), var(--orange));
  animation-delay: 0s;
}

.ambient-bg span:nth-child(2) {
  width: 360px;
  height: 360px;
  bottom: -140px;
  right: -80px;
  background: radial-gradient(circle at 40% 40%, var(--green-deep-2), var(--green-deep));
  opacity: 0.35;
  animation-delay: -4s;
}

.ambient-bg span:nth-child(3) {
  width: 280px;
  height: 280px;
  top: 40%;
  right: 15%;
  background: radial-gradient(circle at 50% 50%, #fff, var(--peach));
  opacity: 0.3;
  animation-delay: -8s;
}

@keyframes float-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.05); }
}

/* ------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 64px 0;
}

.grid {
  display: grid;
  gap: 24px;
}

.flex {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------ */

h1, h2, h3, h4 {
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

p {
  margin: 0 0 16px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.6;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deep-2);
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------------
   Glass card
   ------------------------------------------------------------------------ */

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.glass-card--strong {
  background: var(--glass-bg-strong);
}

.glass-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------------------
   Gradient accent cards
   ------------------------------------------------------------------------ */

.gradient-card {
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.gradient-card--warm {
  background: linear-gradient(135deg, #ff9d6c 0%, var(--peach) 100%);
  color: #3a2417;
}

.gradient-card--green {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-deep-2) 100%);
  color: var(--text-on-dark);
}

.gradient-card--glow::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  top: -60px;
  right: -60px;
  background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ------------------------------------------------------------------------
   Buttons — pill shaped
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--green-deep);
  color: var(--text-on-dark);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(31, 61, 43, 0.32);
  background: var(--green-deep-2);
}

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--text-dark);
  color: var(--text-dark);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(31, 42, 34, 0.06);
}

.btn-light {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-dark);
}

.btn-light:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ------------------------------------------------------------------------
   Form elements
   ------------------------------------------------------------------------ */

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.field input[type="text"],
.field input[type="number"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 42, 34, 0.12);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green-deep-2);
  background: rgba(255, 255, 255, 0.9);
}

.field textarea {
  resize: vertical;
  min-height: 90px;
}

.field-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.file-drop {
  border: 1.5px dashed rgba(31, 42, 34, 0.25);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.file-drop:hover,
.file-drop.dragover {
  border-color: var(--green-deep-2);
  background: rgba(255, 255, 255, 0.65);
}

/* ------------------------------------------------------------------------
   Demo Preview badge — required everywhere per plan section 8.3
   ------------------------------------------------------------------------ */

.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 143, 94, 0.16);
  border: 1px solid rgba(255, 143, 94, 0.4);
  color: #b8501f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff8f5e;
  box-shadow: 0 0 0 4px rgba(255, 143, 94, 0.25);
}

.demo-badge-fixed {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

/* ------------------------------------------------------------------------
   Admin panel — header layout + responsive dashboard grid
   ------------------------------------------------------------------------ */

.admin-header {
  padding-right: 160px;
}

.admin-header .flex {
  flex-wrap: wrap;
  row-gap: 6px;
}

.admin-dashboard-grid {
  grid-template-columns: 1.3fr 1fr;
}

/* ------------------------------------------------------------------------
   Highlight glow — used by voice-narration.js to point at UI elements
   ------------------------------------------------------------------------ */

.vo-highlight {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--orange);
  outline-offset: 6px;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 10px rgba(255, 143, 94, 0.18), 0 0 40px rgba(255, 143, 94, 0.35);
  transition: outline-color 0.3s ease, box-shadow 0.3s ease;
  scroll-margin: 120px;
}

/* ------------------------------------------------------------------------
   Auto-click pulse — used by voice-narration.js to visually "press" a
   button when the walkthrough simulates a customer action
   ------------------------------------------------------------------------ */

.vo-click-pulse {
  animation: vo-pulse 0.45s ease;
}

@keyframes vo-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.93); box-shadow: 0 0 0 12px rgba(255, 143, 94, 0.25); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------------
   Walkthrough attract pulse — draws the customer's eye (and the guide
   mascot) to the "Start Walkthrough" button on page load, until it's
   clicked and the walkthrough actually starts.
   ------------------------------------------------------------------------ */

.walkthrough-attract {
  animation: walkthrough-pulse 1.6s ease-in-out infinite;
}

@keyframes walkthrough-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 143, 94, 0.55); transform: scale(1); }
  50% { box-shadow: 0 0 0 14px rgba(255, 143, 94, 0); transform: scale(1.05); }
}

/* ------------------------------------------------------------------------
   Admin panel — order toast notification
   ------------------------------------------------------------------------ */

.toast-pop {
  animation: toast-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes toast-in {
  0% { opacity: 0; transform: translateX(120%) scale(0.95); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* ------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------ */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }

@media (max-width: 640px) {
  .section { padding: 40px 0; }
  .gradient-card { padding: 24px; }

  /* fixed badge would otherwise overlap page headers on narrow screens —
     let it flow inline at the top instead */
  .demo-badge-fixed {
    position: static;
    display: inline-flex;
    margin: 16px 0 0 24px;
  }

  .admin-header {
    padding-right: 0;
  }
}

@media (max-width: 700px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------------
   Lead form — mobile layout
   The business/category and product name/price grids, plus the WhatsApp
   country-code + number row, are wide 2-column layouts sized for desktop
   via inline styles — override those (needs !important) to stack them
   on narrow screens so nothing gets squeezed or clipped.
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
  #leadForm {
    padding: 28px 20px !important;
  }

  .two-col-grid {
    grid-template-columns: 1fr !important;
  }

  .whatsapp-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .whatsapp-row select,
  .whatsapp-row input {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 640px) {
  /* the "New Order Received" toast is positioned with inline top/right/
     max-width for desktop — those numbers assume a single-line desktop
     header. On mobile, pin it to the very top instead: the header/badge
     height varies with how the business name wraps, so anchoring near the
     bottom (or any fixed middle offset) risks drifting into page content
     like the customer card. Briefly covering the header for its ~6s
     lifetime is the safer trade-off. */
  #toast {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
    z-index: 1100 !important;
  }
}