@import "tailwindcss";

:root {
  color-scheme: dark;
  --bg: #0c0a09;
  --bg-elevated: #14110f;
  --elevated: var(--bg-elevated);
  --bg-surface: #1c1917;
  --bg-hover: #292524;
  --border: #2a2522;
  --border-subtle: #1f1b18;
  --text: #fafaf9;
  --text-muted: #a8a29e;
  --text-faint: #78716c;
  --accent: #d4a574;
  --accent-hover: #e8bc8a;
  --accent-muted: rgba(212, 165, 116, 0.12);
  --accent-glow: rgba(212, 165, 116, 0.25);
  --accent-fg: #1a1208;
  --danger: #f87171;
  --success: #4ade80;
}

@theme inline {
  --color-background: var(--bg);
  --color-foreground: var(--text);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-geist-sans), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent-muted);
  color: var(--accent-hover);
}

input, select, textarea, button {
  font-family: inherit;
}

select {
  background-color: var(--bg-elevated);
  color: var(--text);
}

select option {
  background-color: var(--bg-elevated);
  color: var(--text);
}

/* Event form progress and review preview */
div[class~="min-h-36"] {
  min-height: 12rem;
  background: linear-gradient(120deg, var(--bg-surface), var(--bg));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

div[class~="min-h-36"] > div:first-child {
  width: 42%;
  height: auto;
  min-height: 12rem;
}

div[class~="min-h-36"] > div:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
}

div[class~="min-h-36"] p[class~="uppercase"] {
  display: none;
}

div[class~="min-h-36"] h3 {
  margin-top: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

div[class~="min-h-36"] h3 + p {
  margin-top: 0.75rem;
  line-height: 1.6;
}

@media (max-width: 480px) {
  div[class~="min-h-36"] > div:first-child {
    width: 38%;
  }

  div[class~="min-h-36"] > div:last-child {
    padding: 1rem;
  }
}

@layer base {
  button:not(:disabled),
  [type="button"]:not(:disabled),
  [type="submit"]:not(:disabled),
  [type="reset"]:not(:disabled),
  a[href],
  select:not(:disabled),
  summary,
  label:has(input[type="checkbox"]:not(:disabled)),
  label:has(input[type="radio"]:not(:disabled)),
  input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  [role="menuitem"],
  [role="option"],
  [role="link"] {
    cursor: pointer;
  }

  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled {
    cursor: not-allowed;
  }
}

@keyframes slide-in-start {
  from {
    opacity: 0.85;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-in-start-rtl {
  from {
    opacity: 0.85;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-slide-in-start {
  animation: slide-in-start 0.22s ease-out forwards;
}

[dir="rtl"] .animate-slide-in-start {
  animation-name: slide-in-start-rtl;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out forwards;
}

/* Preview actions belong below the board, never behind a viewport-pinned preview. */
.menu-board-editor .sticky.top-4 {
  position: static;
  top: auto;
  font-family: var(--menu-board-preview-font), system-ui, sans-serif;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  text-align: right;
}