/*
 * application.css — Wedding Invites
 * --color-primary y --color-secondary se inyectan dinámicamente desde el layout.
 * --color-cream es fijo y se define aquí.
 */

/* ── Tipografía base ─────────────────────────────────────── */
body {
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  background: var(--color-cream);
  color: #2d2d2d;
  font-weight: 300;
}

/* ── Bootstrap overrides ─────────────────────────────────── */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: color-mix(in srgb, var(--color-primary) 82%, black);
  border-color: color-mix(in srgb, var(--color-primary) 82%, black);
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* ── Sobre ───────────────────────────────────────────────── */
#envelope-layer {
  transition: opacity 600ms ease;
}

/* ── Sello dorado en el sobre ────────────────────────────── */
.envelope-seal {
  fill: var(--color-secondary);
}
.envelope-seal-ring {
  stroke: color-mix(in srgb, var(--color-secondary) 70%, white);
}
.envelope-seal-branch {
  fill: color-mix(in srgb, var(--color-secondary) 50%, #5a3e00);
}

/* ── Tarjeta de invitación ───────────────────────────────── */
#invitation-card {
  background: var(--color-cream);
}

#invitation-card section {
  background: var(--color-cream);
}

/* ── Calendario ──────────────────────────────────────────── */
.calendar-marked {
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ── Timeline lugares ────────────────────────────────────── */
.timeline-line {
  background: var(--color-primary);
}
.timeline-dot {
  background: var(--color-primary);
}
.timeline-icon-circle {
  border: 1.5px solid var(--color-primary);
  background: var(--color-cream);
}

/* ── Botones de acción (Ver Mapa, Confirmar) ─────────────── */
.btn-wedding {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.btn-wedding:hover {
  background: color-mix(in srgb, var(--color-primary) 82%, black);
  color: white;
}

/* ── Contador regresivo ──────────────────────────────────── */
.countdown-section {
  background: var(--color-primary);
}

/* ── Sección confirmación ────────────────────────────────── */
.confirm-box {
  background: var(--color-primary);
  color: white;
  border-radius: 12px;
  padding: 2rem;
}

/* ── Carrusel custom ─────────────────────────────────────── */
.carousel-arrow {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: white;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* ── Admin / Guests table ────────────────────────────────── */
.badge-confirmed {
  background: var(--color-primary);
  color: white;
}
.badge-pending {
  background: #aaa;
  color: white;
}

/* ── Parallax hero ───────────────────────────────────────── */
.hero-parallax-img {
  position: absolute;
  inset: -15% 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  opacity: 0.85;
  will-change: transform;
}


/* ── Animaciones flores ──────────────────────────────────── */
@keyframes floatLeaf {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(2deg); }
  66%       { transform: translateY(-4px) rotate(-1.5deg); }
}
@keyframes floatLeafAlt {
  0%, 100% { transform: translateY(0px); }
  33%       { transform: translateY(-6px); }
  66%       { transform: translateY(-10px); }
}

.leaf-top-left {
  animation: floatLeaf 6s ease-in-out infinite;
  transform-origin: top left;
}
.leaf-bottom-right {
  animation: floatLeafAlt 7s ease-in-out infinite;
  transform-origin: bottom right;
}

/* ── Animaciones íconos timeline ─────────────────────────── */
@keyframes ringPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30%       { transform: scale(1.12) rotate(-6deg); }
  60%       { transform: scale(1.08) rotate(4deg); }
}
@keyframes partyBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%       { transform: translateY(-6px) rotate(-8deg); }
  40%       { transform: translateY(-2px) rotate(6deg); }
  60%       { transform: translateY(-5px) rotate(-4deg); }
  80%       { transform: translateY(-1px) rotate(3deg); }
}

.icon-anillos {
  animation: ringPulse 3.5s ease-in-out infinite;
  transform-origin: center;
}
.icon-fiesta {
  animation: partyBounce 2.8s ease-in-out infinite;
  transform-origin: center;
}


.font-script  { font-family: 'Cookie', cursive; }
.font-serif   { font-family: 'Cormorant Garamond', serif; }
.font-sans    { font-family: 'Open Sans', sans-serif; }
.color-primary   { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.bg-cream     { background: var(--color-cream); }