/* Styles for the visualizer pages on functionalfloors.com.
   Served from the Hub rather than pasted into the WordPress page, for the same reason the script
   is: anything inside post content goes through wpautop, which rewrites it. A stylesheet link has
   no inner text for WordPress to mangle. It also means these pages can be restyled without
   touching WordPress at all. */
.ffv { --maroon:#7D1816; --ink:#2B3138; --line:#d9cfc0; --cream:#faf6ef; --stone:#6E635B; --rust:#B5551F;
       font-family: inherit; color: var(--ink); max-width: 1080px; margin: 0 auto }
.ffv h2 { margin: 2rem 0 .3rem; font-size: 1.5rem }
.ffv .sub { color: var(--stone); margin: 0 0 1rem }
.ffv .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.ffv .pick { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.ffv .card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff;
             text-decoration: none; color: inherit; display: block; transition: transform .12s, box-shadow .12s }
.ffv .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.09) }
.ffv .card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--cream) }
.ffv .card .n { padding: .55rem .65rem; font-weight: 600; font-size: .92rem; line-height: 1.25 }
.ffv .card .p { padding: 0 .65rem .6rem; color: var(--maroon); font-weight: 700; font-size: .86rem }
.ffv .step { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: #fff;
             cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100% }
.ffv .step.on { border-color: var(--maroon); box-shadow: 0 0 0 2px rgba(125,24,22,.13) }
.ffv .step b { display: block; font-size: 1.05rem; margin-bottom: .15rem }
.ffv .step span { color: var(--stone); font-size: .9rem }
.ffv .cta { display: inline-block; background: var(--maroon); color: #fff; text-decoration: none;
            font-weight: 700; border-radius: 10px; padding: .8rem 1.4rem; margin: .4rem .4rem .4rem 0;
            border: 0; cursor: pointer; font-size: 1rem }
.ffv .cta.alt { background: var(--rust) }
.ffv .note { background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
             padding: .8rem 1rem; color: var(--stone); font-size: .92rem; margin: 1rem 0 }
.ffv .doors { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1.2rem 0 }
.ffv .door { border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem; background: #fff;
             text-decoration: none; color: inherit; display: block }
.ffv .door:hover { border-color: var(--maroon) }
.ffv .door b { display: block; font-size: 1.15rem; margin-bottom: .35rem; color: var(--maroon) }
.ffv details { border-bottom: 1px solid var(--line); padding: .75rem 0 }
.ffv details summary { cursor: pointer; font-weight: 600 }
.ffv details p { color: var(--stone); margin: .5rem 0 0 }
.ffv .center { text-align: center; margin: 1rem 0 }

/* The model pages (/stains, /vinyl-plank-visualizer) are built in Elementor, whose containers
   supply the page gutter. Raw post content on the same full-width template has no container, so
   text runs to the browser edge. This is that gutter, and nothing more. */
.ffwrap { max-width: 1140px; margin: 0 auto; padding: 28px 20px 8px }
.ffwrap h2 { margin-top: 1.8rem }
.ffwrap iframe { display: block }
.ffwrap details { border-bottom: 1px solid #d9cfc0; padding: .75rem 0 }
.ffwrap details summary { cursor: pointer; font-weight: 600 }
.ffwrap a[role=button] { display: inline-block; background: #7D1816; color: #fff; text-decoration: none;
                         font-weight: 700; border-radius: 10px; padding: .8rem 1.4rem; margin: 1rem 0 }

/* Flori's questions on the New Floors page. Deliberately quiet: she is helping somebody choose,
   not running a quiz, so the panel sits in the page rather than shouting from a colored box. */
.ffq { border:1px solid #d9cfc0; border-radius:14px; background:#fff; padding:1.1rem 1.2rem; margin:1.4rem 0 }
.ffq-ask { font-size:1.12rem; font-weight:600; margin:0 0 .8rem; display:flex; align-items:center; gap:.6rem }
.ffq-flori { width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:#faf6ef center/78% no-repeat
             url('https://app.functionalfloors.com/flori-avatar.png'); border:1px solid #e4dfd6 }
.ffq-chips { display:flex; flex-wrap:wrap; gap:.5rem }
.ffq-chip { font:inherit; font-size:.95rem; background:#faf6ef; border:1px solid #d9cfc0; color:#2B3138;
            border-radius:999px; padding:.5rem 1rem; cursor:pointer }
.ffq-chip:hover { border-color:#7D1816; background:#fff }
.ffq-step { color:#6E635B; font-size:.85rem; margin:.9rem 0 0 }
.ffq-skip { background:none; border:0; padding:0; font:inherit; font-size:.85rem; color:#6E635B;
            text-decoration:underline; cursor:pointer }
.ffq-done { margin:0; font-size:1.02rem; line-height:1.5 }
.ffq-count { color:#6E635B; font-size:.92rem; margin:.4rem 0 1rem }
.ffq-bar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:.2rem 0 1rem }
.ffq-reset { background:none; border:0; padding:0; font:inherit; font-size:.9rem; color:#7D1816;
             text-decoration:underline; cursor:pointer }
.ffq-why { color:#6E635B; font-size:.88rem; margin:0 0 1rem }
.ffq-widen { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; background:#faf6ef;
             border:1px solid #d9cfc0; border-radius:12px; padding:.7rem .9rem; margin:0 0 1rem;
             font-size:.94rem; color:#2B3138 }
.ffq-widen .ffq-flori { width:28px; height:28px }
.ffq-series { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem }
.ffq-serieslab { color:#6E635B; font-size:.9rem; margin-right:.2rem }
.ffq-series .ffq-chip { font-size:.88rem; padding:.35rem .8rem }
.ffq-series .ffq-chip.on { background:#7D1816; border-color:#7D1816; color:#fff }
.ffq-back { background:none; border:0; padding:0 .55rem 0 0; margin-right:.55rem; font:inherit;
            font-size:.85rem; color:#7D1816; cursor:pointer; border-right:1px solid #d9cfc0 }
.ffq-back:hover { text-decoration:underline }
.ffq-restart { background:none; border:0; padding:0; font:inherit; font-size:.85rem; color:#6E635B;
               text-decoration:underline; cursor:pointer }