/* ============================================
   Timexora — Countdown Display
   Shared structure (used on both the full /e/{slug} page and the compact
   /embed/{slug} page) plus three selectable visual themes.
   ============================================ */

/* ---------- Shared structure ---------- */

.countdown-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-4);
    text-align: center;
    overflow: hidden;
}

/* Event-type motif — the same line-art icon rendered once, large and
   centered, plus several smaller copies gently floating around the page.
   Tinted with the current theme's own text color via currentColor, so it
   never needs its own per-theme color rules. Purely decorative — hidden
   from screen readers and clicks pass straight through it. */
.event-motif-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.event-motif {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(65vw, 600px);
    height: min(65vw, 600px);
    transform: translate(-50%, -50%);
    color: currentColor;
    opacity: 0.1;
}

.event-particle {
    position: absolute;
    color: currentColor;
    opacity: 0.22;
    animation: motif-float 10s ease-in-out infinite;
}

.event-particle:nth-child(odd) { animation-duration: 12s; }
.event-particle:nth-child(3n) { animation-duration: 8.5s; }

@keyframes motif-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .event-particle { animation: none; }
}

.countdown-page > *:not(.event-motif-layer) {
    position: relative;
    z-index: 1;
}

@media (max-width: 600px) {
    .event-motif { width: 85vw; height: 85vw; }
}

/* Sits outside .countdown-page as a sibling, so give it its own stacking
   context above the motif layer — otherwise the full-bleed page (painted
   later in the DOM) intercepts its clicks even though nothing is drawn there. */
.countdown-topbar {
    position: absolute;
    top: var(--space-4);
    left: var(--space-5);
    z-index: 2;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.countdown-topbar:hover { opacity: 1; }

.event-type-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

.event-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 800;
    margin: 0 0 var(--space-2);
    line-height: 1.2;
}

.recurring-badge {
    font-size: 0.75rem;
    opacity: 0.65;
    margin-left: 4px;
}

.tz-toggle-btn {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.55;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-main);
    text-decoration: underline;
    vertical-align: baseline;
}

.tz-toggle-btn:hover { opacity: 0.9; }

.social-proof {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 4px;
    color: #fff;
}

.event-subdate {
    font-size: 1rem;
    margin-bottom: var(--space-7);
    opacity: 0.75;
    color: inherit;
}

.countdown-grid {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.countdown-unit {
    min-width: 100px;
    padding: 22px 16px;
    border-radius: var(--radius-lg);
}

.countdown-value {
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--space-2);
    opacity: 0.7;
}

.countdown-progress {
    width: min(100%, 360px);
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(128, 128, 128, 0.1);
    overflow: hidden;
    margin: var(--space-5) auto 0;
}

.countdown-progress-bar {
    height: 100%;
    width: 0%;
    min-width: 2px;
    background: currentColor;
    opacity: 0.9;
    border-radius: var(--radius-full);
    transition: width 1s linear;
}

.zero-hour-message {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 800;
    display: none;
}

/* Confetti burst — appended by countdown.js the moment a down-mode
   countdown hits zero. Higher specificity than the generic
   ".countdown-page > *" rule above so it keeps its own absolute layout. */
.countdown-page > .confetti-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.confetti-piece {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    opacity: 0.9;
    animation-name: confetti-fall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes confetti-fall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0.85; }
}

.timexora-footer {
    margin-top: var(--space-8);
    font-size: 0.8rem;
    opacity: 0.55;
    color: inherit;
}

.timexora-footer a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.event-actions {
    margin-top: var(--space-6);
    display: flex;
    gap: var(--space-3);
}

.event-actions a,
.event-actions button {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.85;
    text-decoration: none;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-main);
    cursor: pointer;
}

.event-actions a:hover,
.event-actions button:hover { opacity: 1; }

.countdown-about {
    max-width: 480px;
    margin: var(--space-5) 0 0;
    font-size: 0.85rem;
    opacity: 0.7;
    line-height: 1.6;
    color: inherit;
}

.share-buttons {
    margin-top: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.share-label {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-right: 2px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: rgba(128, 128, 128, 0.15);
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-main);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.share-btn:hover { background: rgba(128, 128, 128, 0.28); }

.qr-popup[hidden] { display: none; }

.qr-popup {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(128, 128, 128, 0.12);
}

.qr-popup img {
    border-radius: var(--radius-md);
    background: #fff;
    padding: 8px;
}

.qr-download-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.75;
    text-decoration: none;
}

.qr-download-link:hover { opacity: 1; }

.wishes-section {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    width: 100%;
    max-width: 480px;
    text-align: left;
}

.wishes-heading {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: var(--space-4);
}

.wish-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.wish-form input[type="text"],
.wish-form textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(128, 128, 128, 0.35);
    background: rgba(128, 128, 128, 0.1);
    color: inherit;
    font-family: var(--font-main);
    font-size: 0.9rem;
    resize: vertical;
}

.wish-form input[type="text"]::placeholder,
.wish-form textarea::placeholder { color: inherit; opacity: 0.55; }

.wish-form .btn { align-self: center; }

.wishes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.wish-item {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(128, 128, 128, 0.1);
}

.wish-name {
    font-size: 0.85rem;
    display: block;
    margin-bottom: 2px;
}

.wish-message {
    font-size: 0.9rem;
    opacity: 0.85;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

.wishes-empty {
    text-align: center;
    opacity: 0.6;
    font-size: 0.85rem;
}

/* ============================================
   Theme: Classic — dark, elegant, brand gradient
   ============================================ */

[data-theme="classic"] {
    background: radial-gradient(circle at top, #1a1f3d 0%, #0f1222 60%);
    color: #f4f5f7;
}

[data-theme="classic"] .event-type-tag {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

[data-theme="classic"] .event-title {
    background: linear-gradient(90deg, #818cf8, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="classic"] .countdown-unit {
    background: #171b31;
    border: 1px solid #2a2f4a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="classic"] .countdown-value { color: #a5b4fc; }

/* ============================================
   Theme: Minimal — light, airy, no boxes, thin type
   ============================================ */

[data-theme="minimal"] {
    background: #fafafa;
    color: #18181b;
}

[data-theme="minimal"] .event-type-tag {
    background: transparent;
    color: #71717a;
    border: 1px solid #d4d4d8;
}

[data-theme="minimal"] .event-title { color: #18181b; }

[data-theme="minimal"] .countdown-grid { gap: 0; }

[data-theme="minimal"] .countdown-unit {
    background: transparent;
    border-right: 1px solid #e4e4e7;
    border-radius: 0;
    padding: 0 28px;
}

[data-theme="minimal"] .countdown-unit:last-child { border-right: none; }

[data-theme="minimal"] .countdown-value {
    color: #18181b;
    font-weight: 300;
}

/* ============================================
   Theme: Bold — vibrant gradient, high contrast, chunky
   ============================================ */

[data-theme="bold"] {
    background: linear-gradient(135deg, #ff6a3d 0%, #ff3d81 50%, #9333ea 100%);
    color: #ffffff;
}

[data-theme="bold"] .event-type-tag {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

[data-theme="bold"] .event-title {
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="bold"] .countdown-unit {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="bold"] .countdown-value { color: #ffffff; }

/* ============================================
   Theme: Elegant — soft, warm, romantic (weddings, anniversaries)
   ============================================ */

[data-theme="elegant"] {
    background: linear-gradient(160deg, #fdf6f0 0%, #f3e0d2 100%);
    color: #78350f;
    font-family: Georgia, 'Times New Roman', serif;
}

[data-theme="elegant"] .event-type-tag {
    background: rgba(180, 83, 9, 0.08);
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.2);
    font-family: var(--font-main);
}

[data-theme="elegant"] .event-title {
    color: #78350f;
    font-weight: 700;
    font-style: italic;
}

[data-theme="elegant"] .countdown-unit {
    background: #fffdfb;
    border: 1px solid #e7d5c4;
    box-shadow: 0 10px 30px rgba(180, 83, 9, 0.08);
}

[data-theme="elegant"] .countdown-value {
    color: #b45309;
    font-family: var(--font-main);
}

/* ============================================
   Theme: Neon — dark, glowing, high-energy (launches, gaming, tech)
   ============================================ */

[data-theme="neon"] {
    background: radial-gradient(circle at top, #131320 0%, #05050a 65%);
    color: #f0f4ff;
}

[data-theme="neon"] .event-type-tag {
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
    border: 1px solid rgba(34, 211, 238, 0.4);
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}

[data-theme="neon"] .event-title {
    background: linear-gradient(90deg, #22d3ee, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(236, 72, 153, 0.45));
}

[data-theme="neon"] .countdown-unit {
    background: #0a0a12;
    border: 1px solid rgba(34, 211, 238, 0.45);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.2), inset 0 0 20px rgba(34, 211, 238, 0.05);
}

[data-theme="neon"] .countdown-value {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}

/* ============================================
   Theme: Custom — per-event accent color / background image / text mode,
   supplied via inline CSS custom properties (see ThemeStyleService). The
   var(...) fallbacks below only ever apply if that inline style is
   missing, e.g. while previewing before the accent color is chosen.
   ============================================ */

[data-theme="custom"] {
    background: var(--custom-bg, linear-gradient(135deg, #6366f1, #1e1b4b));
    color: var(--custom-text, #ffffff);
}

[data-theme="custom"] .event-type-tag {
    background: rgba(128, 128, 128, 0.25);
    color: var(--custom-text, #ffffff);
}

[data-theme="custom"] .event-title {
    color: var(--custom-text, #ffffff);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="custom"] .countdown-unit {
    background: rgba(128, 128, 128, 0.2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(128, 128, 128, 0.35);
}

[data-theme="custom"] .countdown-value { color: var(--custom-accent, #ffffff); }

/* ============================================
   Theme preview card — reused on the homepage "Themes" showcase.
   Same [data-theme] rules above paint the background/text; this just
   adds the compact card chrome (radius, shadow, no full-page height).
   ============================================ */

.theme-preview-card {
    position: relative;
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.theme-preview-card > *:not(.event-motif-layer):not(.event-motif) {
    position: relative;
    z-index: 1;
}

.theme-preview-card .event-motif {
    width: min(80%, 320px);
    height: min(80%, 320px);
    opacity: 0.12;
}

.theme-preview-card .countdown-grid { transform: scale(0.82); margin: 0 -6px; }
.theme-preview-card .countdown-unit { min-width: 76px; padding: 14px 10px; }
.theme-preview-card .event-title { font-size: 1.3rem; margin-bottom: var(--space-4); }