/* Portal — shared styles (non-themed, reused across 2+ templates) */

/* Base typography */
body { font-family: 'Inter', system-ui, sans-serif; }

/* Glass morphism */
.glass {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.35);
}

/* ── Shared keyframes ── */
@keyframes slideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes floatOrb { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-20px,25px) scale(1.08); } }
@keyframes floatOrb2 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(15px,-20px) scale(1.05); } }
@keyframes gridPulse { 0%,100% { opacity:0.4; } 50% { opacity:0.6; } }
@keyframes noiseShift { 0% { transform:translate(0,0); } 100% { transform:translate(-28px,-28px); } }
@keyframes confirmFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes confirmSlideUp { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes statusBreathe { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ── Animation utilities (error/login/payment pages) ── */
.animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.animate-delay-3 { animation-delay: 0.3s; opacity: 0; }

/* ── Animation utilities (hub/portal pages) ── */
.anim-slide-up { animation: slideUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }

/* ── Confirm modal ── */
.confirm-backdrop { animation: confirmFadeIn 0.2s ease-out both; }
.confirm-card { animation: confirmSlideUp 0.35s cubic-bezier(0.16,1,0.3,1) both; animation-delay:0.05s; }

/* ── Trial progress bar (setup card + billing modal) ── */
.trial-progress-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background-color: rgba(107, 114, 128, 0.12);
    box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.08);
    overflow: hidden;
}
.trial-progress-track[data-paused="1"] {
    background-color: rgba(245, 158, 11, 0.12);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.15);
}
.trial-progress-fill {
    position: relative;
    height: 100%;
    border-radius: 999px;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.08);
    z-index: 1;
}
.trial-progress-track[data-paused="1"] .trial-progress-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.trial-progress-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg,
        transparent 0 calc(25% - 1px),
        rgba(107, 114, 128, 0.22) calc(25% - 1px) 25%,
        transparent 25% calc(50% - 1px),
        rgba(107, 114, 128, 0.22) calc(50% - 1px) 50%,
        transparent 50% calc(75% - 1px),
        rgba(107, 114, 128, 0.22) calc(75% - 1px) 75%,
        transparent 75%);
    z-index: 0;
}
.trial-progress-track[data-paused="1"] .trial-progress-ticks {
    background-image: linear-gradient(90deg,
        transparent 0 calc(25% - 1px),
        rgba(245, 158, 11, 0.28) calc(25% - 1px) 25%,
        transparent 25% calc(50% - 1px),
        rgba(245, 158, 11, 0.28) calc(50% - 1px) 50%,
        transparent 50% calc(75% - 1px),
        rgba(245, 158, 11, 0.28) calc(75% - 1px) 75%,
        transparent 75%);
}

/* ── Nav scroll state (shared base — theme overrides stay inline) ── */
/* Solid grays — no transparency so text stays crisp on white header */
.nav-scrolled a, .nav-scrolled span, .nav-scrolled button { transition: color 0.3s; }
.nav-scrolled a { color: #6b7280 !important; }
.nav-scrolled a:hover { color: #1f2937 !important; }
.nav-scrolled button { color: #6b7280 !important; }
.nav-scrolled button:hover { color: #1f2937 !important; background: #f3f4f6 !important; }
.nav-scrolled span.font-semibold { color: #1f2937 !important; }