/* Custom Scrollbar for hiding */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Stepper CSS */
.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
  font-size: 12px;
  font-weight: 500;
  position: relative;
  flex: 1;
}
.step-indicator.active {
  opacity: 1;
  color: #4f46e5; /* Indigo 600 */
}
.step-indicator.active .step-num {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
}
.step-indicator.completed .step-num {
  background: #10b981; /* Emerald 500 */
  color: white;
  border-color: #10b981;
}
.step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  transition: all 0.2s;
  background: white;
  z-index: 2;
}
/* Connecting line between steps */
.step-indicator:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #e2e8f0;
  z-index: 1;
}
html[dir="rtl"] .step-indicator:not(:last-child)::after {
  left: auto;
  right: 50%;
}

/* Form Styles */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
  background: #fff;
}
.form-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Theme Selector */
.template-card {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: #f8fafc;
}
.template-card:hover {
  border-color: #cbd5e1;
}
.template-card.active {
  border-color: #4f46e5;
  background: #eef2ff;
  color: #4f46e5;
}

/* Color Swatches */
.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.color-swatch:hover {
  transform: scale(1.1);
}
.color-swatch.active {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #4f46e5;
}

/* Canvas Formats */
.format-a4 {
  width: 595px;
  height: 842px;
}
.format-square {
  width: 600px;
  height: 600px;
}
.format-story {
  width: 540px;
  height: 960px;
}

/* Landscape orientation swaps dimensions */
#invitation-card.orientation-landscape.format-a4 {
  width: 842px;
  height: 595px;
}
#invitation-card.orientation-landscape.format-story {
  width: 960px;
  height: 540px;
}
/* Square stays the same */

/* --- THEMES FOR INVITATION CARD --- */

/* Base overrides for dynamic color injection */
#invitation-card {
  --theme-color: #1e293b;
}
#invitation-card .text-primary {
  color: var(--theme-color) !important;
}
#invitation-card .bg-primary {
  background-color: var(--theme-color) !important;
}

/* Theme: Classic (Default) */
.theme-classic {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
}
.theme-classic h1 {
  font-weight: 700;
}
.theme-classic #card-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 20px;
}

/* Theme: Modern */
.theme-modern {
  background-color: #f8fafc;
  border-radius: 24px;
}
.theme-modern #card-content {
  align-items: flex-start;
  text-align: left;
}
html[dir="rtl"] .theme-modern #card-content {
  align-items: flex-start;
  text-align: right;
}
.theme-modern h1 {
  font-size: 2.5rem;
  margin-bottom: 24px;
}
.theme-modern .w-16.h-\[1px\] {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .theme-modern .w-16.h-\[1px\] {
  margin-left: auto;
  margin-right: 0;
}
.theme-modern .flex-col.gap-4 {
  align-items: flex-start;
}

/* Theme: Elegant */
.theme-elegant {
  background-color: #fffaf0;
  border: 12px solid var(--theme-color);
  font-family: 'Playfair Display', serif !important;
}
.theme-elegant h1 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--theme-color);
  font-size: 3.5rem;
}
.theme-elegant #render-organizer {
  letter-spacing: 0.2em;
}

/* Theme: Minimal */
.theme-minimal {
  background-color: #ffffff;
  font-family: 'Inter', sans-serif !important;
}
.theme-minimal h1 {
  font-weight: 500;
  letter-spacing: -0.05em;
  font-size: 3rem;
}
.theme-minimal .w-16.h-\[1px\] {
  display: none;
}
.theme-minimal #render-desc {
  font-size: 0.9rem;
  color: #94a3b8;
}

/* Theme: Luxury */
.theme-luxury {
  background-color: #020617; /* Very dark slate */
  color: #f8fafc;
}
.theme-luxury #card-bg {
  opacity: 0.2;
}
.theme-luxury h1 {
  font-family: 'Playfair Display', serif;
  color: #fbbf24; /* Amber/Gold */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.theme-luxury .w-16.h-\[1px\] {
  background-color: #fbbf24;
  opacity: 1;
}
.theme-luxury #render-desc, .theme-luxury .text-slate-700 {
  color: #cbd5e1 !important;
}
.theme-luxury .text-slate-800 {
  color: #f8fafc !important;
}
.theme-luxury .text-primary {
  color: #fbbf24 !important;
}
.theme-luxury #render-dresscode-container {
  background: transparent;
  border-color: #334155;
  color: #94a3b8;
}

/* Theme: Vintage */
.theme-vintage {
  background-color: #fdf6e3;
  color: #5c4b37;
  font-family: 'Playfair Display', serif !important;
}
.theme-vintage h1 {
  color: #4a3b2c;
  border-bottom: 2px dashed #d4c4b7;
  padding-bottom: 12px;
  display: inline-block;
}
.theme-vintage .w-16.h-\[1px\] {
  display: none;
}
.theme-vintage .text-slate-800 {
  color: #4a3b2c !important;
}
.theme-vintage .text-slate-600, .theme-vintage .text-slate-700 {
  color: #5c4b37 !important;
}
.theme-vintage #render-dresscode-container {
  background-color: #f5eedc;
  border: 1px solid #e3d5c1;
  color: #5c4b37;
}

/* Theme: Floral */
.theme-floral {
  background-color: #fff1f2; /* rose-50 */
  color: #881337; /* rose-900 */
  font-family: 'Playfair Display', serif !important;
  background-image: radial-gradient(circle at top right, #ffe4e6 0%, transparent 40%), radial-gradient(circle at bottom left, #ffe4e6 0%, transparent 40%);
}
.theme-floral h1 {
  color: #be185d;
  font-style: italic;
}
.theme-floral .w-16.h-\[1px\] {
  background-color: #fda4af;
}

/* Theme: Neon Night */
.theme-neon {
  background-color: #09090b;
  color: #fff;
  font-family: 'Montserrat', sans-serif !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.2);
}
.theme-neon h1 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px var(--theme-color), 0 0 20px var(--theme-color);
}
.theme-neon #render-organizer {
  color: var(--theme-color);
  text-shadow: 0 0 5px var(--theme-color);
}
.theme-neon .w-16.h-\[1px\] {
  background-color: var(--theme-color);
  box-shadow: 0 0 10px var(--theme-color);
}
.theme-neon #render-dresscode-container {
  background: transparent;
  border: 1px solid var(--theme-color);
  color: #fff;
  box-shadow: inset 0 0 5px var(--theme-color);
}

/* Theme: Watercolor */
.theme-watercolor {
  background-color: #f0fdf4; /* green-50 */
  color: #064e3b;
  font-family: 'Playfair Display', serif !important;
  background-image: linear-gradient(120deg, #dcfce7 0%, #f0fdf4 100%);
}
.theme-watercolor h1 {
  color: #047857;
  font-size: 3.5rem;
  opacity: 0.9;
}
.theme-watercolor .w-16.h-\[1px\] {
  background-color: #34d399;
  height: 2px;
  border-radius: 2px;
}

/* Theme: Cyberpunk */
.theme-cyberpunk {
  background-color: #fde047; /* yellow-300 */
  color: #000;
  font-family: 'Inter', sans-serif !important;
  border: 4px solid #000;
}
.theme-cyberpunk h1 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -2px;
  background-color: #000;
  color: #fde047;
  padding: 10px 20px;
  display: inline-block;
  transform: skewX(-10deg);
}
.theme-cyberpunk #card-footer {
  border-top: 4px solid #000;
  padding-top: 20px;
}
.theme-cyberpunk #render-dresscode-container {
  background: #000;
  color: #fde047;
  border: none;
  border-radius: 0;
  transform: skewX(-10deg);
}

/* --- EFFECTS & BORDERS --- */
.effect-shadow {
  box-shadow: inset 0 0 40px rgba(0,0,0,0.1);
}
.effect-frame::before {
  content: '';
  position: absolute;
  top: 16px; left: 16px; right: 16px; bottom: 16px;
  border: 2px solid var(--theme-color);
  pointer-events: none;
  z-index: 20;
}
.effect-double::before {
  content: '';
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  border: 4px double var(--theme-color);
  pointer-events: none;
  z-index: 20;
}

/* Animations */
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -20px); }
}
.animate-toast-in { animation: toast-in 0.3s ease-out forwards; }
.animate-toast-out { animation: toast-out 0.3s ease-in forwards; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }