/* ─── Mottu Promo — Custom CSS ──────────────────────────────────── */
/* Complementa Tailwind CDN com estilos que não podem ser feitos inline */

/* ─── Scrollbar ──────────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Glassmorphism ──────────────────────────────────────────────── */
.glass {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
}

/* ─── Coupon Copy Feedback ───────────────────────────────────────── */
.copy-flash {
    animation: flashGreen .5s ease-out;
}
@keyframes flashGreen {
    0%   { background-color: #22C55E; color: #111; transform: scale(1); }
    50%  { background-color: #fff; color: #22C55E; transform: scale(1.05); }
    100% { background-color: #22C55E; color: #111; transform: scale(1); }
}

/* ─── FAQ Accordion ──────────────────────────────────────────────── */
details summary { cursor: pointer; user-select: none; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .faq-chevron { transform: rotate(180deg); }
details .faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 1.5rem; }
details[open] .faq-answer { max-height: 500px; padding: 1rem 1.5rem 1.5rem; }

/* ─── Floating animation ────────────────────────────────────────── */
@keyframes mp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.animate-mp-float { animation: mp-float 3s ease-in-out infinite; }

/* ─── Pulse glow ─────────────────────────────────────────────────── */
@keyframes mp-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { box-shadow: 0 0 20px 8px rgba(34,197,94,0.15); }
}
.animate-mp-glow { animation: mp-glow 2s ease-in-out infinite; }

/* ─── Bento Grid ─────────────────────────────────────────────────── */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.bento-grid .bento-large { grid-column: span 2; }
.bento-grid .bento-small { grid-column: span 1; }

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
    .bento-grid .bento-large { grid-column: span 2; }
    .bento-grid .bento-small { grid-column: span 1; }
}

/* ─── Bottom Nav Safe Area ───────────────────────────────────────── */
.pb-nav { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* ─── Touch Targets ──────────────────────────────────────────────── */
a, button { touch-action: manipulation; }
button, [role="button"] { min-height: 44px; }

/* ─── Text Selection ─────────────────────────────────────────────── */
body { -webkit-user-select: none; user-select: none; }
.select-text, footer, p, .faq-answer, details { -webkit-user-select: text !important; user-select: text !important; }

/* ─── Print ──────────────────────────────────────────────────────── */
@media print {
    nav, .fixed, .sticky, footer, .bottom-nav { display: none !important; }
    body { padding: 0 !important; }
}

/* ─── Reduced Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}