/*
 * Product Finder — structural CSS only.
 *
 * Intentionally contains NO visual design (no colors, typography, spacing system,
 * or animation). Only what is structurally required for the app to function:
 * - Hide inactive screens (x-cloak / [x-cloak])
 * - Progress bar fill mechanism
 *
 * All visual styling is deferred and will be done by hand separately.
 */

[x-cloak] {
    display: none !important;
}

/* Progress bar: outer is the track, inner is the fill driven by Alpine :style binding */
.pf-progress-bar {
    width: 100%;
    overflow: hidden;
}

.pf-progress-bar__fill {
    height: 100%;
    /* width is set inline by Alpine: style="width: X%" */
}


:root {

}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */

@keyframes pf-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}

.pf-skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 1600px 100%;
    animation: pf-shimmer 1.6s linear infinite;
    display: block;
}

/* ── Static preloader (visible before Alpine initialises) ────────────────── */

#pf-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.2s ease-out;
}

/* ── Loading overlay animations ─────────────────────────────────────────── */

@keyframes pf-logo-breathe {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.6; transform: scale(0.96); }
}

.pf-loading-logo {
    animation: pf-logo-breathe 2s ease-in-out infinite;
}

@keyframes pf-dot-bounce {
    0%, 80%, 100% { transform: translateY(0);    opacity: 0.35; }
    40%           { transform: translateY(-8px); opacity: 1;    }
}

.pf-loading-dot                  { animation: pf-dot-bounce 1.4s ease-in-out infinite; }
.pf-loading-dot:nth-child(2)     { animation-delay: 0.16s; }
.pf-loading-dot:nth-child(3)     { animation-delay: 0.32s; }

/* ── Rich content (guide / WYSIWYG output) ──────────────────────────────── */
/*
 * Scoped to .pf-content so these resets only affect editor-generated HTML
 * inside guide and similar views — never the app UI itself.
 */

.pf-content > * + * {
    margin-top: 1em;
}

.pf-content p {
    line-height: 1.75;
}

.pf-content h2 {
    font-family: "Manrope", serif;
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.3;
    margin-top: 1.75em;
}

.pf-content h3 {
    font-family: "Manrope", serif;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.35;
    margin-top: 1.5em;
}

.pf-content h4 {
    font-family: "Manrope", serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 1.25em;
}

.pf-content ul,
.pf-content ol {
    padding-left: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.pf-content ul {
    list-style-type: disc;
}

.pf-content ol {
    list-style-type: decimal;
}

.pf-content li {
    line-height: 1.7;
    padding-left: 0.25em;
}

.pf-content li::marker {
    color: var(--brand-cyan, #4BBDCF);
    font-weight: 700;
}

.pf-content a {
    color: var(--brand-indigo, #2B255C);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-content a:hover {
    opacity: 0.75;
}

.pf-content strong {
    font-weight: 700;
}

.pf-content em {
    font-style: italic;
}