/**
 * MINOMO SSR offer detail — palette dark coerente con PWA app.minomo.io.
 * Wave M-OFFER-DETAIL-PWA-V1 (Vito 2026-05-07).
 * Servito via Cloudflare CDN, cached browser → secondo hit istantaneo.
 * Manutenzione: cambi qui SOLO; PWA ha il proprio file
 * /assets/css/pages/offer-detail.css con palette identica.
 */

:root {
    --od-bg: #000000;
    --od-card: #141416;
    --od-card-elev: #1c1c1e;
    --od-bg-elev: #0a0a0a;
    --od-text: #F5F5F7;
    --od-text-2: #C7C7CC;
    --od-text-3: #86868B;
    --od-hairline: rgba(255, 255, 255, 0.07);
    --od-hairline-strong: rgba(255, 255, 255, 0.12);
    --od-orange: #F58220;
    --od-orange-hot: #FF7B1F;
    --od-orange-tint: rgba(245, 130, 32, 0.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--od-bg);
    color: var(--od-text);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

.od-page { max-width: 720px; margin: 0 auto; padding: 0 0 80px; }

.od-back-row { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0; }
.od-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--od-text-2); font-size: 14px; font-weight: 500;
    padding: 8px 12px; border-radius: 8px;
    background: var(--od-card-elev); border: 1px solid var(--od-hairline);
    transition: background .15s ease, color .15s ease;
}
.od-back:hover { background: var(--od-card); color: var(--od-text); }

.od-hero {
    margin: 12px 16px 0; border-radius: 16px; overflow: hidden;
    background: var(--od-bg-elev); aspect-ratio: 16 / 9;
    border: 1px solid var(--od-hairline);
}
.od-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-hero-fallback {
    margin: 12px 16px 0; height: 96px; border-radius: 16px;
    border: 1px solid var(--od-hairline);
}

.od-content {
    background: var(--od-card); margin: 16px; border-radius: 16px;
    padding: 24px; border: 1px solid var(--od-hairline);
    box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.2);
}

.od-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }

.od-template-badge, .od-expired-badge, .od-discount-badge, .od-community-badge {
    display: inline-block; padding: 5px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.od-template-badge { background: var(--od-orange-tint); color: var(--od-orange); }
.od-expired-badge { background: rgba(225,29,72,.16); color: #f87171; }
.od-community-badge { background: rgba(13, 148, 136, .16); color: #2dd4bf; }
.od-discount-badge { background: var(--od-orange); color: #000; font-size: 14px; padding: 6px 12px; font-weight: 700; }

.od-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px; line-height: 1.2; font-weight: 700;
    margin: 0 0 18px; letter-spacing: -.01em; color: var(--od-text);
}

.od-merchant {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border: 1px solid var(--od-hairline); border-radius: 12px;
    margin-bottom: 18px; background: var(--od-bg-elev);
    transition: background .15s ease, border-color .15s ease;
}
.od-merchant:hover { background: var(--od-card-elev); border-color: var(--od-hairline-strong); }
.od-merchant-logo {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    background: var(--od-bg-elev); flex-shrink: 0;
}
.od-merchant-logo--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--od-orange-tint); color: var(--od-orange);
    font-weight: 700; font-size: 20px; font-family: 'Space Grotesk', sans-serif;
}
.od-merchant-meta { flex: 1; min-width: 0; }
.od-merchant-name { font-weight: 600; font-size: 15px; color: var(--od-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-merchant-city { font-size: 13px; color: var(--od-text-3); margin-top: 2px; }
.od-merchant-arrow { color: var(--od-text-3); font-size: 18px; }

.od-event-block {
    background: var(--od-orange-tint); border: 1px solid rgba(245,130,32,.20);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.od-event-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--od-text); font-weight: 500; }
.od-event-row--rsvp { color: #34d399; font-weight: 600; }
.od-event-row--online-link .od-online-link { color: #60a5fa; text-decoration: underline; text-decoration-color: rgba(96,165,250,0.4); font-weight: 600; word-break: break-all; }
.od-event-row--online-link .od-online-link:hover { color: #93c5fd; }
.od-event-row--calendar { margin-top: 4px; }
.od-calendar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px;
    background: rgba(245, 130, 32, 0.12);
    color: #F89D43;
    border: 1px solid rgba(245, 130, 32, 0.30);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.od-calendar-btn:hover { background: rgba(245, 130, 32, 0.20); color: #F89D43; }
.od-event-icon { font-size: 16px; flex-shrink: 0; }

.od-validity {
    display: flex; align-items: center; gap: 8px; font-size: 14px;
    color: var(--od-text-2); margin-bottom: 18px;
    padding: 12px 14px; background: var(--od-bg-elev);
    border: 1px solid var(--od-hairline); border-radius: 10px;
}

.od-description {
    font-size: 15px; line-height: 1.65; color: var(--od-text);
    margin-bottom: 22px; white-space: pre-line;
}

.od-discount-code {
    background: var(--od-orange-tint); border: 1.5px dashed var(--od-orange);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
}
.od-discount-code-label {
    font-size: 11px; font-weight: 700; color: var(--od-orange);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.od-discount-code-row { display: flex; align-items: center; gap: 10px; }
.od-discount-code-value {
    flex: 1; font-family: 'JetBrains Mono', monospace;
    font-size: 18px; font-weight: 700;
    background: rgba(0,0,0,.4); color: var(--od-text);
    padding: 10px 14px; border-radius: 8px; letter-spacing: .05em;
    border: 1px solid var(--od-hairline-strong);
}
.od-discount-code-copy {
    background: var(--od-orange); color: #000; border: 0;
    padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 13px;
    cursor: pointer; font-family: inherit; letter-spacing: .02em;
    transition: background .15s ease;
}
.od-discount-code-copy:hover { background: var(--od-orange-hot); }

/* CTA primary: gradient verde (Vito 2026-05-08) — distinto dal gradient
   arancione/rosso del countdown lastminute. */
.od-cta {
    display: block; text-align: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff; padding: 14px 24px; border-radius: 12px;
    font-weight: 700; font-size: 15px; margin-top: 8px;
    letter-spacing: .01em;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.od-cta:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.od-cta:active { transform: translateY(1px); }

.od-cta-secondary {
    display: block; text-align: center; background: transparent;
    color: var(--od-text); padding: 12px 24px; border-radius: 12px;
    font-weight: 600; font-size: 14px; margin-top: 10px;
    border: 1px solid var(--od-hairline-strong);
    transition: background .15s ease, border-color .15s ease;
}
.od-cta-secondary:hover { background: var(--od-card-elev); border-color: var(--od-text-3); }

/* Countdown lastminute — Vito 2026-05-08 */
.od-countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}
.od-countdown-label { display: inline-flex; align-items: center; gap: 6px; }
.od-countdown-time {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.22);
    padding: 4px 10px;
    border-radius: 8px;
}
.od-countdown.is-expired { opacity: 0.7; background: linear-gradient(135deg, #6b7280, #4b5563); box-shadow: none; }

/* Description: preserva newline merchant + spacing */
.od-description { line-height: 1.6; }

footer { padding: 24px 16px; text-align: center; }
footer a { color: var(--od-text-3); font-size: 13px; }
footer a:hover { color: var(--od-text-2); }
footer strong { color: var(--od-text-2); }

@media (max-width: 480px) {
    .od-content { margin: 12px; padding: 18px; }
    .od-title { font-size: 22px; }
    .od-discount-code-value { font-size: 16px; padding: 8px 12px; }
}