* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --pink: #ff5c8a;
  --pink-dark: #e0446f;
  --pink-light: #ffe3ec;
  --purple: #8b5cf6;
  --text: #46243a;
  --card-bg: rgba(255, 255, 255, 0.94);

  /* ברירת מחדל: ורוד/סגול */
  --accent: #ff5c8a;
  --accent-dark: #e0446f;
  --accent-light: #ffe3ec;
  --bg1: #ffd3e0;
  --bg2: #ffe9f0;
  --bg3: #e6d9ff;
}

/* ---- ערכות נושא לפי פעילות נבחרת ---- */
body[data-theme="movie"] {
  --accent: #6366f1;
  --accent-dark: #4338ca;
  --accent-light: #e6e5ff;
  --bg1: #c7c3ff;
  --bg2: #ffe9c7;
  --bg3: #1e1b4b;
}

body[data-theme="food"] {
  --accent: #ff8a3d;
  --accent-dark: #e8630e;
  --accent-light: #ffe8d3;
  --bg1: #ffd9a8;
  --bg2: #ffb199;
  --bg3: #ffe9c7;
}

body[data-theme="escape"] {
  --accent: #14b8a6;
  --accent-dark: #0d8f80;
  --accent-light: #d3fdf4;
  --bg1: #7ee8d3;
  --bg2: #4c9f8c;
  --bg3: #103c3a;
}

body[data-theme="other"] {
  --accent: #a855f7;
  --accent-dark: #8626d9;
  --accent-light: #f2e3ff;
  --bg1: #f3c9ff;
  --bg2: #ffd6ec;
  --bg3: #d9c2ff;
}

html, body {
  height: 100%;
}

body {
  font-family: "Segoe UI", "Heebo", Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  background-size: 200% 200%;
  transition: background 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-x: hidden;
}

/* לבבות מרחפים ברקע */
.hearts-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hearts-bg span {
  position: absolute;
  bottom: -10vh;
  animation: floatUp linear infinite;
  opacity: 0.5;
}

@keyframes floatUp {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-120vh) rotate(30deg); }
}

/* כתמי צבע רכים שנותנים עומק לרקע ומשנים גוון עם הנושא */
.blobs-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.blobs-bg .blob {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(70px);
  opacity: 0.45;
  animation: blobFloat ease-in-out infinite;
  transition: background 0.8s ease;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -50px) scale(1.15); }
  66%      { transform: translate(-30px, 30px) scale(0.9); }
}

/* ניצוצות שמהבהבים לאורך זמן לתחושת חיים ברקע */
.sparkle-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sparkle {
  position: absolute;
  color: var(--accent);
  animation: sparkleTwinkle 2.2s ease-out forwards;
}

@keyframes sparkleTwinkle {
  0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40%  { opacity: 0.9; transform: scale(1.1) rotate(45deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(90deg); }
}

.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--card-bg);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(70, 36, 58, 0.22);
  padding: 40px 28px;
  text-align: center;
  backdrop-filter: blur(6px);
}

/* ---- מד התקדמות ---- */
.progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
  transition: opacity 0.25s ease;
}

.progress.hidden {
  display: none;
}

.progress .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-light);
  transition: background 0.3s ease, transform 0.3s ease;
}

.progress .dot.filled {
  background: var(--accent);
  transform: scale(1.25);
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.step.enter-fwd {
  animation: stepInFwd 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.step.enter-back {
  animation: stepInBack 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes stepInFwd {
  from { opacity: 0; transform: translateX(-26px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes stepInBack {
  from { opacity: 0; transform: translateX(26px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.landing-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.halo {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 92, 138, 0.35), transparent 70%);
  animation: haloPulse 2.4s ease-in-out infinite;
}

@keyframes haloPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.25); opacity: 1; }
}

.big-emoji {
  position: relative;
  font-size: 64px;
  margin-bottom: 12px;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 10px;
  transition: color 0.3s ease, background 0.3s ease;
}

h1 {
  font-size: 2rem;
  margin-bottom: 10px;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.lead {
  color: #8a6178;
  margin-bottom: 22px;
  font-size: 0.98rem;
}

.btn-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 14px 38px;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 8px 20px rgba(224, 68, 111, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(224, 68, 111, 0.5);
}

.btn-secondary {
  background: #fff;
  color: var(--pink-dark);
  border: 2px solid var(--pink-light);
}

/* "לא" הופך ל"ברור שכן!" בריחוף */
#btn-no:hover,
#btn-no:focus-visible {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.btn-big {
  padding: 16px 44px;
  font-size: 1.25rem;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.food-grid {
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px;
}

.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid var(--pink-light);
  border-radius: 20px;
  padding: 18px 10px;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.option:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgba(70, 36, 58, 0.16);
}

.option:active {
  transform: scale(0.96);
}

.option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 28px;
  background: var(--pink-light);
  transition: background 0.2s ease, transform 0.2s ease;
}

.option:hover .option-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* גוונים ייחודיים לכפתורי הבחירה הראשית לפי סוג פעילות */
.option.theme-movie .option-icon { background: #e6e5ff; }
.option.theme-food .option-icon { background: #ffe8d3; }
.option.theme-escape .option-icon { background: #d3fdf4; }
.option.theme-other .option-icon { background: #f2e3ff; }

.option.theme-movie:hover { border-color: #6366f1; }
.option.theme-food:hover { border-color: #ff8a3d; }
.option.theme-escape:hover { border-color: #14b8a6; }
.option.theme-other:hover { border-color: #a855f7; }

/* בשלבי המשנה (לא בחירת הקטגוריה) האייקונים משתמשים בגוון הנוכחי */
#step-movie .option-icon,
#step-food .option-icon {
  background: var(--accent-light);
}

/* ---- שבבי בחירה מהירה (שלב "אחר") ---- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}

.chip {
  border: 2px solid var(--accent-light);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-2px);
}

.chip:active {
  transform: scale(0.95);
}

textarea {
  width: 100%;
  border: 2px solid var(--pink-light);
  border-radius: 16px;
  padding: 14px;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
  margin-bottom: 18px;
  outline: none;
  transition: border-color 0.2s ease;
}

textarea:focus {
  border-color: var(--accent);
}

.datetime-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.datetime-fields label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-weight: 600;
}

.datetime-fields input {
  width: 100%;
  border: 2px solid var(--pink-light);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 1.1rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease;
}

.datetime-fields input:focus {
  border-color: var(--accent);
}

.summary {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  margin-bottom: 20px;
  transition: background 0.3s ease, color 0.3s ease;
}

.recap-card {
  background: var(--accent-light);
  border-radius: 18px;
  padding: 18px;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}

.recap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.recap-icon {
  font-size: 1.2rem;
}

.subtext {
  color: #8a6178;
  margin-top: 8px;
}

.error {
  color: #d33;
  font-weight: 600;
  min-height: 1.4em;
  margin-top: 12px;
}

.btn-back {
  margin-top: 22px;
  background: none;
  border: none;
  color: #a06a85;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}

.btn-back:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

@media (max-width: 380px) {
  .card { padding: 30px 18px; }
  h1 { font-size: 1.6rem; }
}