/* CreateAI platform design system — shared product chrome, 2026 */
:root {
  --ca-obsidian: #090908;
  --ca-obsidian-2: #11110f;
  --ca-surface: #171714;
  --ca-surface-raised: #1d1c18;
  --ca-ivory: #f7f1e5;
  --ca-ivory-muted: #c4bcaf;
  --ca-champagne: #e8c86b;
  --ca-champagne-strong: #f3d77c;
  --ca-copper: #a56f4b;
  --ca-positive: #78c6a4;
  --ca-danger: #e37c72;
  --ca-stroke: rgba(247, 241, 229, .12);
  --ca-stroke-strong: rgba(232, 200, 107, .34);
  --ca-shadow-soft: 0 24px 80px rgba(0, 0, 0, .34);
  --ca-shadow-focus: 0 0 0 4px rgba(232, 200, 107, .13);
  --ca-radius-sm: 12px;
  --ca-radius-md: 20px;
  --ca-radius-lg: 30px;
  --ca-ease: cubic-bezier(.22, .8, .22, 1);
}

::selection { color: #13120e; background: var(--ca-champagne); }

body {
  color: var(--ca-ivory);
  background:
    radial-gradient(circle at 72% -12%, rgba(165, 111, 75, .11), transparent 32rem),
    var(--ca-obsidian);
}

.site-header {
  border-bottom-color: rgba(247, 241, 229, .08);
  background: rgba(9, 9, 8, .82);
}

.site-logo,
.nav-link,
.mobile-nav-link { color: var(--ca-ivory); }

.nav-link::after { background: var(--ca-champagne); }

.btn-primary,
.button.primary {
  color: #16140e !important;
  border-color: var(--ca-champagne) !important;
  background: linear-gradient(135deg, var(--ca-champagne-strong), #d6ad49) !important;
  box-shadow: 0 14px 34px rgba(232, 200, 107, .18) !important;
}

.btn-primary:hover,
.button.primary:hover {
  background: linear-gradient(135deg, #ffe28a, var(--ca-champagne)) !important;
  box-shadow: 0 20px 48px rgba(232, 200, 107, .25) !important;
}

.btn-ghost,
.button.ghost {
  color: var(--ca-ivory);
  border-color: var(--ca-stroke);
  background: rgba(255, 255, 255, .035);
}

.form-control,
.field input,
.field textarea,
.field select {
  color: var(--ca-ivory);
  border-color: var(--ca-stroke);
  background: rgba(255, 255, 255, .045);
}

.form-control:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(232, 200, 107, .68);
  background: rgba(255, 255, 255, .065);
  box-shadow: var(--ca-shadow-focus);
}

.form-control::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: #77736b; }

/* Authentication is part of the product, not a detached legacy screen. */
.auth-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  width: min(1320px, calc(100% - 40px));
  min-height: 100svh;
  margin-inline: auto;
  padding: 8rem 0 4rem !important;
  overflow: visible !important;
  background: transparent !important;
}

.auth-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(9, 9, 8, .1), rgba(9, 9, 8, .92) 62%),
    url("/static/images/homepage/hero-premium-v2.webp") center / cover no-repeat;
}

.auth-wrap::after {
  content: "یک منوی حرفه‌ای، از اولین ورود";
  align-self: end;
  max-width: 12ch;
  padding: 0 0 4rem;
  color: var(--ca-ivory);
  font-size: clamp(2.4rem, 5vw, 5.6rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.auth-card {
  grid-column: 2;
  grid-row: 1;
  max-width: none !important;
  padding: clamp(1.6rem, 4vw, 3rem) !important;
  overflow: hidden;
  border: 1px solid var(--ca-stroke) !important;
  border-radius: var(--ca-radius-lg) !important;
  background: linear-gradient(150deg, rgba(27, 27, 24, .96), rgba(11, 11, 10, .98)) !important;
  box-shadow: var(--ca-shadow-soft);
  backdrop-filter: blur(22px);
}

.auth-card::before {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--ca-champagne), transparent) !important;
}

.auth-logo img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
}

.auth-title {
  color: var(--ca-ivory) !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  letter-spacing: -.04em;
}

.auth-sub,
.auth-footer,
.terms-note { color: var(--ca-ivory-muted) !important; }

.auth-footer a,
.terms-note a { color: var(--ca-champagne) !important; }

.auth-card .form-group label { color: var(--ca-ivory); }
.auth-card .form-control { min-height: 54px; border-radius: 15px; }
.auth-card .btn-full { min-height: 56px; border-radius: 15px; }
.auth-blob { display: none; }

/* Menu platform: one premium chrome around every independent product page. */
body.menu-app {
  --ca-bg: var(--ca-obsidian);
  --ca-panel: var(--ca-surface);
  --ca-text: var(--ca-ivory);
  --ca-muted: #aaa398;
  --ca-gold: var(--ca-champagne);
  --ca-line: var(--ca-stroke);
  color: var(--ca-ivory);
  background:
    radial-gradient(circle at 80% 0, rgba(165, 111, 75, .13), transparent 28rem),
    linear-gradient(180deg, #0b0b09, #090908);
}

.menu-app [hidden] { display: none !important; }

.menu-app .app-topbar {
  height: 78px;
  border-bottom: 1px solid var(--ca-stroke);
  background: rgba(9, 9, 8, .88);
  backdrop-filter: blur(24px);
}

.menu-app .brand { color: var(--ca-ivory); }
.menu-app .brand img { filter: drop-shadow(0 8px 18px rgba(232, 200, 107, .18)); }
.menu-app .brand small,
.menu-app .topbar-context,
.menu-app .avatar-button b { color: var(--ca-ivory-muted); }
.menu-app .context-dot { background: var(--ca-positive); }
.menu-app .topbar-preview { color: var(--ca-champagne); border: 1px solid var(--ca-stroke); }
.menu-app .avatar-button > span { color: #16140e; background: var(--ca-champagne); }
.menu-app .account-menu {
  color: var(--ca-ivory);
  border-color: var(--ca-stroke);
  background: #171714;
  box-shadow: var(--ca-shadow-soft);
}
.menu-app .account-menu a,
.menu-app .account-menu button { color: var(--ca-ivory); }
.menu-app .account-menu a:hover,
.menu-app .account-menu button:hover { background: rgba(255, 255, 255, .06); }

.menu-app .app-sidebar {
  top: 78px;
  border-left: 1px solid var(--ca-stroke);
  background: linear-gradient(180deg, rgba(20, 20, 17, .98), rgba(10, 10, 9, .99));
}

.menu-app .business-switcher {
  padding: 14px;
  border: 1px solid var(--ca-stroke);
  border-radius: 17px;
  background: rgba(255, 255, 255, .035);
}

.menu-app .business-switcher select {
  color: var(--ca-ivory);
  border: 0;
  background: transparent;
}

.menu-app .business-switcher option { color: #171714; background: #fff; }
.menu-app .side-nav a { color: var(--ca-ivory); border: 1px solid transparent; }
.menu-app .side-nav a small { color: #817c73; }
.menu-app .side-nav a:hover { border-color: var(--ca-stroke); background: rgba(255,255,255,.04); }
.menu-app .side-nav a.active {
  color: var(--ca-ivory);
  border-color: rgba(232, 200, 107, .28);
  background: linear-gradient(110deg, rgba(232, 200, 107, .14), rgba(255, 255, 255, .025));
}
.menu-app .side-nav a.active small { color: var(--ca-champagne); }
.menu-app .sidebar-foot { border-color: var(--ca-stroke); }
.menu-app .sidebar-foot a { color: var(--ca-ivory-muted); }
.menu-app .sidebar-foot span { color: var(--ca-champagne); }

.menu-app .app-main { padding-top: calc(78px + clamp(28px, 4vw, 60px)); }
.menu-app .page-heading h1,
.menu-app .builder-head h1 {
  max-width: 20ch;
  color: var(--ca-ivory);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.12;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.menu-app .page-heading p { color: var(--ca-ivory-muted); }
.menu-app .eyebrow { color: var(--ca-champagne); }

.menu-app .surface,
.menu-app .status-stage,
.menu-app .next-action,
.menu-app .publish-result,
.menu-app .subscription-status,
.menu-app .qr-layout,
.menu-app .preview-stage,
.menu-app .onboarding-card,
.menu-app .catalog-navigator,
.menu-app .content-editor {
  color: var(--ca-ivory);
  border-color: var(--ca-stroke);
  background: linear-gradient(150deg, rgba(27, 27, 24, .96), rgba(13, 13, 11, .98));
  box-shadow: 0 24px 72px rgba(0, 0, 0, .25);
}

.menu-app .next-action {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 100%, rgba(232, 200, 107, .14), transparent 54%),
    linear-gradient(145deg, #201c13, #11110f);
}

.menu-app .status-stage-top span,
.menu-app .status-facts span,
.menu-app .overview-strip span,
.menu-app .next-action p,
.menu-app .form-heading p,
.menu-app .onboarding-intro > p,
.menu-app .field small { color: var(--ca-ivory-muted); }
.menu-app .status-badge { color: var(--ca-ivory-muted); background: rgba(255,255,255,.06); }
.menu-app .status-line { background: rgba(255,255,255,.08); }
.menu-app .status-line i { background: linear-gradient(90deg, var(--ca-champagne), var(--ca-copper)); }
.menu-app .overview-strip { border-color: var(--ca-stroke); }
.menu-app .overview-strip div { border-color: var(--ca-stroke); }

.menu-app .field input,
.menu-app .field textarea,
.menu-app .field select,
.menu-app .slug-input,
.menu-app .copy-field {
  color: var(--ca-ivory);
  border-color: var(--ca-stroke);
  background: rgba(255, 255, 255, .04);
}
.menu-app .field select option { color: #171714; background: #fff; }
.menu-app .slug-input span { border-color: var(--ca-stroke); color: #8d877d; }
.menu-app .field input:focus,
.menu-app .field textarea:focus,
.menu-app .field select:focus {
  border-color: rgba(232, 200, 107, .62);
  color: var(--ca-ivory);
  background: rgba(255,255,255,.06);
  box-shadow: var(--ca-shadow-focus);
}

.menu-app .industry-option {
  border-color: var(--ca-stroke);
  background: rgba(255, 255, 255, .025);
}
.menu-app .industry-option:hover { border-color: rgba(232, 200, 107, .28); }
.menu-app .industry-option.selected,
.menu-app .industry-option:has(input:checked) {
  border-color: rgba(232, 200, 107, .7);
  background: linear-gradient(140deg, rgba(232, 200, 107, .15), rgba(255, 255, 255, .025));
}
.menu-app .industry-icon { background: #0b0b09; }
.menu-app .stepper li { color: #716d66; }
.menu-app .stepper li span { background: rgba(255,255,255,.07); }
.menu-app .stepper li.active { color: var(--ca-ivory); }
.menu-app .stepper li.active span { color: #17140c; background: var(--ca-champagne); }
.menu-app .starter-suggestion { border-color: rgba(232,200,107,.22); background: rgba(232,200,107,.07); }
.menu-app .wizard-actions { isolation: isolate; }

.menu-app .menu-settings,
.menu-app .menu-settings summary {
  color: var(--ca-ivory) !important;
  border-color: var(--ca-stroke);
  background: rgba(255,255,255,.035) !important;
}
.menu-app .menu-settings-body { background: transparent; }
.menu-app .category-entry.active,
.menu-app .item-mini:hover,
.menu-app .item-mini.active { color: var(--ca-ivory); border-color: rgba(232,200,107,.26); background: rgba(232,200,107,.09); }
.menu-app .category-add-item { color: var(--ca-champagne); border-color: rgba(232,200,107,.34); }
.menu-app .content-editor { overflow: visible; }
.menu-app .catalog-navigator {
  min-height: min(680px, calc(100dvh - 120px));
  height: calc(100dvh - 120px);
  max-height: 680px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,200,107,.28) transparent;
}
.menu-app .live-preview { border-color: var(--ca-stroke); background: #10100e; }
.menu-app .preview-toolbar { color: var(--ca-ivory-muted); }
.menu-app .device-frame { border-color: #26231c; box-shadow: 0 28px 70px rgba(0,0,0,.38); }

.menu-app .theme-studio-intro,
.menu-app .template-studio-card,
.menu-app .theme-card {
  border-color: var(--ca-stroke);
  background: linear-gradient(145deg, #191915, #0c0c0b);
}
.menu-app .theme-card-copy small,
.menu-app .theme-studio-note strong { color: var(--ca-champagne); }
.menu-app .theme-card-copy p,
.menu-app .theme-card-meta span,
.menu-app .theme-studio-note span { color: var(--ca-ivory-muted); }
.menu-app .theme-card.selected { border-color: rgba(232,200,107,.7); box-shadow: 0 0 0 3px rgba(232,200,107,.08), 0 30px 70px rgba(0,0,0,.32); }
.menu-app .theme-filterbar button.active { color:#17140c; background:var(--ca-champagne); border-color:var(--ca-champagne); }
.menu-app .theme-live-thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ca-ease), filter .3s;
}
.menu-app .theme-card:hover .theme-live-thumb > img { transform: scale(1.025); filter: saturate(1.05); }
.menu-app .theme-device-chrome {
  position: absolute;
  inset: 12px 12px auto;
  z-index: 2;
  display: flex;
  gap: 5px;
  direction: ltr;
}
.menu-app .theme-device-chrome i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.menu-app .theme-live-thumb > button {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
  border: 0;
  background: linear-gradient(transparent 52%, rgba(0,0,0,.78));
  color: #fff;
}
.menu-app .theme-live-thumb > button span {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(8,8,7,.48);
  backdrop-filter: blur(10px);
  font-size: .72rem;
}

.menu-app .plan {
  color: var(--ca-ivory);
  border-color: var(--ca-stroke);
  background: linear-gradient(150deg, #1b1a17, #10100e);
}
.menu-app .plan.recommended { border-color: var(--ca-champagne); }
.menu-app .plan-tag { color:#17140c; background:var(--ca-champagne); }
.menu-app .payment-note { color:var(--ca-ivory-muted); }
.menu-app .qr-preview { border-color:var(--ca-stroke); background:rgba(255,255,255,.035); }

.mobile-product-nav { display: none; }

@media (max-width: 820px) {
  .menu-app .app-topbar { height: 68px; }
  .menu-app .app-sidebar { top: 68px; }
  .menu-app .app-main { padding: 92px 14px 108px; }
  .menu-app .page-heading h1,
  .menu-app .builder-head h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .menu-app .onboarding-card { border-radius: 24px; }
  .menu-app .industry-picker { max-height: none; }
  .menu-app .catalog-navigator { height:auto;min-height:0;max-height:none;overflow:visible; }
  .menu-app .category-list { max-height: none; overflow: visible; }
  .mobile-product-nav {
    position: fixed;
    inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px;
    z-index: 65;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 7px;
    border: 1px solid var(--ca-stroke);
    border-radius: 19px;
    background: rgba(16, 16, 14, .92);
    box-shadow: 0 20px 55px rgba(0,0,0,.48);
    backdrop-filter: blur(22px);
  }
  .mobile-product-nav a {
    display: grid;
    place-items: center;
    min-height: 48px;
    padding: 5px 2px;
    color: #8f897f;
    border-radius: 13px;
    text-decoration: none;
    font-size: .62rem;
  }
  .mobile-product-nav a.active {
    color: #17140c;
    background: var(--ca-champagne);
  }
}

@media (max-width: 820px) {
  .auth-wrap {
    display: flex !important;
    width: min(100% - 24px, 520px);
    padding: 6.2rem 0 2rem !important;
  }
  .auth-wrap::before {
    background:
      linear-gradient(rgba(9, 9, 8, .68), rgba(9, 9, 8, .96) 45%),
      url("/static/images/homepage/hero-premium-v2.webp") 34% center / cover no-repeat;
  }
  .auth-wrap::after { display: none; }
  .auth-card { width: 100%; border-radius: 24px !important; }
}

@media (max-width: 560px) {
  .menu-app .industry-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .menu-app .theme-live-thumb { aspect-ratio: 4 / 5; }
  .menu-app .industry-option {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 76px;
    padding: 11px;
  }
  .menu-app .industry-option small { display: none; }
  .menu-app .industry-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 1rem;
  }
  .menu-app .industry-option b {
    font-size: .75rem;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
.enamad-verify-link{display:inline-grid;gap:.2rem;min-width:112px;padding:.7rem .9rem;border:1px solid color-mix(in srgb,var(--gold,#c9a84c) 38%,transparent);border-radius:14px;background:color-mix(in srgb,var(--gold,#c9a84c) 8%,transparent);color:inherit;text-align:center;text-decoration:none}
.enamad-verify-link strong{font-size:.78rem}
.enamad-verify-link small{color:var(--t4,#a7a2b7);font-size:.62rem}