@font-face { font-family: "Poppins"; src: url("../../generated-assets/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../../generated-assets/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../../generated-assets/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../../generated-assets/fonts/Cairo.ttf") format("truetype"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("../../generated-assets/fonts/GreatVibes-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --event-bg: #f8fafc;
  --event-primary: #14b8a6;
  --event-primary-strong: #0f766e;
  --event-accent: #ff6b6b;
  --event-heading: #111827;
  --event-text: #111827;
  --event-muted: #4b5563;
  --event-border: rgba(17, 24, 39, 0.14);
  --event-surface: rgba(255, 255, 255, 0.76);
  --event-surface-strong: rgba(255, 255, 255, 0.92);
  --event-shadow: rgba(17, 24, 39, 0.14);
  --event-ui-font: Poppins, Cairo, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --event-script-font: "Great Vibes", "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--event-bg); color: var(--event-text); font-family: var(--event-ui-font); letter-spacing: 0; }
button, a { font: inherit; }
.event-page, .event-shell { width: 100%; min-height: 100svh; min-height: 100dvh; }
.event-shell { position: relative; display: grid; place-items: center; overflow: auto; background: var(--event-bg); }
.event-background, .event-background img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.event-background img { object-fit: cover; object-position: center; }
.event-content { position: relative; z-index: 1; width: min(100% - 36px, 560px); padding: 56px 0 88px; text-align: center; }
.event-title { margin: 0; color: var(--event-heading); font-size: 3rem; font-weight: 800; line-height: 0.98; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 10px 28px rgba(255,255,255,.62); }
.event-subtitle, .event-text-block { width: min(100%, 620px); margin: 14px auto 0; color: var(--event-muted); font-size: 1rem; line-height: 1.55; }
.event-eyebrow, .event-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; color: var(--event-primary-strong); background: color-mix(in srgb, var(--event-accent) 22%, white 78%); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.couple-lockup { display: grid; justify-items: center; gap: 4px; margin: 0 auto 16px; color: var(--event-primary-strong); }
.script-name { max-width: 100%; font-family: var(--event-script-font); font-size: 4.75rem; line-height: .95; overflow-wrap: anywhere; text-shadow: 0 8px 20px rgba(255,255,255,.8); }
.couple-divider { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 1.05rem; }
.team-lockup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 0 auto 16px; color: var(--event-heading); }
.team-name { min-width: 0; padding: 12px 14px; border-radius: 8px; background: var(--event-surface-strong); font-size: 2.75rem; font-weight: 900; overflow-wrap: anywhere; }
.team-versus { color: var(--event-primary-strong); font-weight: 900; }
.event-divider { width: min(260px, 70%); height: 1px; margin: 18px auto; background: linear-gradient(90deg, transparent, var(--event-primary), transparent); }
.countdown-card { display: grid; gap: 10px; width: min(100%, 560px); margin: 24px auto 14px; }
.countdown-card[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.countdown-card[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.countdown-unit { min-width: 0; background: var(--event-surface); border: 1px solid var(--event-border); box-shadow: 0 12px 30px var(--event-shadow); backdrop-filter: blur(10px); }
.countdown-value { display: block; color: var(--event-heading); font-size: 2.35rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-label { display: block; margin-top: 7px; color: var(--event-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.countdown-circles .countdown-unit, .countdown-scoreboard .countdown-unit { display: grid; place-items: center; align-content: center; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--event-primary); background: rgba(255,255,255,.64); }
.countdown-strip, .countdown-segmented, .countdown-compact { grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); gap: 0; border: 1px solid var(--event-border); border-radius: 12px; overflow: hidden; background: var(--event-surface); }
.countdown-strip .countdown-unit, .countdown-segmented .countdown-unit, .countdown-compact .countdown-unit { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 14px 8px; }
.countdown-cards .countdown-unit { border-radius: 10px; padding: 18px 10px; }
.countdown-compact .countdown-value { font-size: 1.45rem; }
.event-details { display: grid; gap: 9px; width: min(100%, 620px); margin: 12px auto 0; }
.detail-row { display: grid; grid-template-columns: minmax(88px, .36fr) 1fr; gap: 12px; align-items: center; min-height: 48px; padding: 12px 15px; border: 1px solid var(--event-border); border-radius: 8px; background: var(--event-surface); box-shadow: 0 10px 24px rgba(17,24,39,.08); text-align: start; }
.detail-key { color: var(--event-primary-strong); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.detail-text { min-width: 0; color: var(--event-text); font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.event-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px auto 0; }
.event-button { min-width: 132px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 1px solid var(--event-primary); border-radius: 8px; color: var(--event-primary-strong); background: var(--event-surface-strong); font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(17,24,39,.11); }
.event-button--primary, .event-button--share { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--event-primary), var(--event-primary-strong)); }
.event-due-panel { width: min(100%, 620px); margin: 24px auto 0; padding: 20px; border: 1px solid var(--event-border); border-inline-start: 5px solid var(--event-primary); border-radius: 12px; background: var(--event-surface-strong); box-shadow: 0 14px 34px var(--event-shadow); backdrop-filter: blur(10px); text-align: start; }
.event-due-kicker { margin: 0 0 8px; color: var(--event-primary-strong); font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.event-due-title { margin: 0; color: var(--event-heading); font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.event-due-text { margin: 8px 0 0; color: var(--event-text); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.layout-corporate .event-due-panel, .layout-conference .event-due-panel, .layout-online .event-due-panel { margin-inline-start: 0; margin-inline-end: auto; }
.powered-by { position: absolute; z-index: 1; inset-inline: 0; bottom: 18px; color: var(--event-muted); font-size: .78rem; text-align: center; }
.layout-wedding-splash, .layout-wedding-timer { width: min(100% - 32px, 820px); padding-top: 38px; }
.layout-wedding-splash .event-subtitle, .layout-wedding-timer .event-subtitle { color: var(--event-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.layout-wedding-invitation, .layout-classic, .layout-ceremony { padding: 42px 20px 92px; border-radius: 18px; background: rgba(255,255,255,.42); box-shadow: 0 18px 46px rgba(17,24,39,.1); }
.layout-poster .event-title { text-transform: uppercase; letter-spacing: 0; }
.layout-corporate, .layout-conference, .layout-online { text-align: start; width: min(100% - 36px, 820px); }
.layout-corporate .event-actions, .layout-conference .event-actions, .layout-online .event-actions { justify-content: flex-start; }
.layout-notice .event-details, .layout-online .event-details { gap: 8px; }
[dir="rtl"] .layout-corporate, [dir="rtl"] .layout-conference, [dir="rtl"] .layout-online, [dir="rtl"] .detail-row { text-align: right; }
@media (min-width: 901px) {
  .event-content { width: min(100% - 80px, 900px); padding: 64px 0 78px; }
  .countdown-card[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .layout-wedding-splash { transform: translateY(-2vh); }
  .layout-wedding-splash .countdown-card { width: min(58vw, 700px); }
  .layout-wedding-splash .event-actions { margin-top: 28px; }
  .layout-wedding-invitation .event-details, .layout-corporate .event-details, .layout-conference .event-details, .layout-online .event-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-match { width: min(100% - 72px, 960px); }
}
@media (max-width: 520px) {
  .event-content { width: min(100% - 32px, 390px); padding: 44px 0 82px; }
  .event-title { font-size: 2.35rem; }
  .script-name { font-size: 3.1rem; }
  .team-name { font-size: 1.7rem; }
  .layout-wedding-splash, .layout-wedding-timer { width: min(100% - 32px, 360px); padding-top: 20px; padding-bottom: 66px; }
  .layout-wedding-splash .couple-lockup, .layout-wedding-timer .couple-lockup { gap: 2px; margin-bottom: 10px; }
  .layout-wedding-splash .script-name, .layout-wedding-timer .script-name { font-size: 3rem; }
  .layout-wedding-splash .couple-divider, .layout-wedding-timer .couple-divider { width: 30px; height: 30px; }
  .layout-wedding-splash .countdown-card, .layout-wedding-timer .countdown-card { width: min(100%, 304px); gap: 8px; margin: 14px auto 10px; }
  .layout-wedding-splash .event-actions, .layout-wedding-timer .event-actions { margin-top: 10px; }
  .detail-row { grid-template-columns: 1fr; gap: 4px; }
  .event-actions { flex-direction: column; }
  .countdown-value { font-size: 1.95rem; }
  .event-button { width: 100%; }
}