/* Talius Habitat Screen Selector — Scoped styles (ths- prefix) */
#talius-ths-app{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#1a1a1a;background:#f0efed;line-height:1.5}
/* :where() keeps the reset scoped to the widget but at zero specificity,
   so the class rules below can win (a bare #id * reset would beat them) */
:where(#talius-ths-app *){margin:0;padding:0;box-sizing:border-box}

/* Header */
.ths-hdr{background:#fff;padding:0 2rem;height:60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e0dc}
.ths-logo{height:22px;display:block}
.ths-hdr-r{display:flex;align-items:center;gap:1rem}
.ths-hdr-b{font-size:.72rem;color:#888;font-weight:500;letter-spacing:.03em}
.ths-bq{display:inline-flex;align-items:center;gap:.4rem;background:#1a1a1a;color:#fff;font-size:.7rem;font-weight:600;padding:.4rem .9rem;border-radius:50px;text-decoration:none;transition:all .2s;letter-spacing:.02em}
.ths-bq:hover{background:#E8491B;transform:translateY(-1px)}
.ths-bq svg{width:12px;height:12px}

/* Progress */
.ths-prg{background:#fff;padding:.6rem 2rem .8rem;border-bottom:1px solid #e2e0dc}
.ths-prg-i{max-width:700px;margin:0 auto}
.ths-prg-t{height:3px;background:#ebebeb;border-radius:3px;overflow:hidden}
.ths-prg-f{height:100%;background:#E8491B;border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.ths-sls{display:flex;justify-content:space-between;margin-top:.45rem}
.ths-sl{font-size:.6rem;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:.06em;transition:color .2s}
.ths-sl.ths-a{color:#E8491B}
.ths-sl.ths-done{color:#555}

/* Steps */
.ths-stp{display:none;animation:thsFadeUp .4s ease}
.ths-stp.ths-a{display:block}
@keyframes thsFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ths-sb{max-width:700px;margin:0 auto;padding:2rem 1.5rem 5rem}
.ths-st{font-size:.65rem;font-weight:700;color:#E8491B;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}
.ths-sh{font-size:1.65rem;font-weight:800;color:#1a1a1a;line-height:1.2;margin-bottom:.4rem}
.ths-ss{font-size:.88rem;color:#555;line-height:1.5;margin-bottom:1.5rem}
.ths-sub{margin-top:1.75rem}
.ths-sh2{font-size:1.1rem;font-weight:800;color:#1a1a1a;line-height:1.2;margin-bottom:.3rem}
.ths-ss2{font-size:.85rem;color:#555;line-height:1.5;margin-bottom:.75rem}

/* Option cards */
.ths-og{display:grid;gap:.6rem}
.ths-o2{grid-template-columns:1fr 1fr}
.ths-o3{grid-template-columns:1fr 1fr 1fr}
.ths-oc{position:relative;background:#fff;border:2px solid #ebebeb;border-radius:14px;padding:1.1rem;cursor:pointer;transition:all .2s}
.ths-oc:focus-visible{outline:2px solid #E8491B;outline-offset:2px}
.ths-oc:hover{border-color:#ccc;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.ths-oc.ths-sel{border-color:#E8491B;background:rgba(232,73,27,.07);box-shadow:0 0 0 1px #E8491B}
.ths-oi{font-size:1.6rem;margin-bottom:.4rem}
.ths-on{font-weight:700;font-size:.88rem;color:#1a1a1a;margin-bottom:.2rem}
.ths-od{font-size:.72rem;color:#888;line-height:1.4}
.ths-badge{position:absolute;top:.7rem;right:.7rem;background:#E8491B;color:#fff;font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .55rem;border-radius:50px}

/* Nav — sticky inside the widget (not fixed to the viewport), so it stays
   visible while the wizard is on screen but never floats over the rest of
   the page when the shortcode is embedded mid-page */
.ths-nav{position:sticky;bottom:0;background:#fff;border-top:1px solid #e2e0dc;padding:.75rem 2rem;display:flex;justify-content:center;gap:.75rem;z-index:10}
.ths-nb{padding:.6rem 2rem;border-radius:50px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;font-family:'Inter',system-ui,sans-serif}
.ths-prev{background:#f0efed;color:#555;border:1px solid #e2e0dc}
.ths-prev:hover{background:#e5e4e2}
.ths-next{background:#E8491B;color:#fff}
.ths-next:hover{background:#d13e14;transform:translateY(-1px)}
.ths-nb:disabled{opacity:.35;cursor:not-allowed;transform:none!important}

/* Results */
.ths-res{max-width:800px;margin:0 auto;padding:2rem 1.5rem 5rem}
.ths-res-hdr{margin-bottom:2rem}
.ths-res-hdr h1{font-size:1.8rem;font-weight:800;color:#1a1a1a;margin-bottom:.3rem}
.ths-res-hdr p{font-size:.88rem;color:#555}

.ths-note{background:rgba(180,83,9,.07);color:#b45309;padding:.7rem 1rem;border-radius:10px;font-size:.78rem;font-weight:500;margin-bottom:.75rem;line-height:1.5;border-left:3px solid #b45309}
.ths-info{background:rgba(37,99,235,.06);color:#1d4ed8;padding:.7rem 1rem;border-radius:10px;font-size:.78rem;font-weight:500;margin-bottom:.75rem;line-height:1.5;border-left:3px solid #2563eb}

.ths-rec-card{background:#fff;border-radius:14px;border:2px solid #E8491B;overflow:hidden;margin-bottom:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.ths-rec-banner{background:#E8491B;color:#fff;padding:.5rem 1.25rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:.4rem}
.ths-rec-banner svg{width:14px;height:14px;flex-shrink:0}
.ths-rec-body{padding:1.5rem}
.ths-rec-model{font-size:1.5rem;font-weight:800;color:#1a1a1a;margin-bottom:.15rem}
.ths-rec-desc{font-size:.85rem;color:#555;margin-bottom:1rem}
.ths-why{background:rgba(232,73,27,.05);border-left:3px solid #E8491B;border-radius:0 10px 10px 0;padding:.8rem 1rem;font-size:.8rem;color:#555;line-height:1.55;margin-bottom:1.25rem}
.ths-why strong{color:#1a1a1a}

/* Contact-Talius variant (opening exceeds standard maximums) */
.ths-rec-card.ths-contact{border-color:#1a1a1a}
.ths-rec-card.ths-contact .ths-rec-banner{background:#1a1a1a}

.ths-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ths-spec{background:#f0efed;border-radius:10px;padding:.85rem 1rem}
.ths-spec-label{font-size:.6rem;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem}
.ths-spec-value{font-size:.85rem;font-weight:700;color:#1a1a1a}
.ths-spec-note{font-size:.72rem;color:#888;line-height:1.45;margin-top:.9rem}

/* Secondary recommendation cards (fabric & color, automation) */
.ths-sec-title{font-size:.75rem;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.06em;margin:1.5rem 0 .75rem}
.ths-sec-card{background:#fff;border:1px solid #e2e0dc;border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:.75rem;transition:all .2s}
.ths-sec-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.ths-sec-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.35rem}
.ths-sec-name{font-weight:800;font-size:1.05rem;color:#1a1a1a}
.ths-tag{font-size:.62rem;font-weight:600;padding:.25rem .6rem;border-radius:50px;letter-spacing:.02em}
.ths-tag-mfr{background:rgba(37,99,235,.07);color:#2563eb}
.ths-sec-desc{font-size:.78rem;color:#555;line-height:1.55;margin-bottom:.9rem}
.ths-sec-card .ths-spec-grid{margin-top:.25rem}

/* CTA */
.ths-cta{background:#1a1a1a;border-radius:14px;padding:2rem;text-align:center;margin-top:2rem;color:#fff}
.ths-cta h3{font-size:1.3rem;font-weight:700;margin-bottom:.3rem}
.ths-cta p{opacity:.6;font-size:.8rem;margin-bottom:1.25rem}
.ths-cta-btn{display:inline-flex;align-items:center;gap:.5rem;background:#E8491B;color:#fff;padding:.65rem 2rem;border-radius:50px;font-weight:700;font-size:.85rem;text-decoration:none;transition:all .2s}
.ths-cta-btn:hover{background:#d13e14;transform:translateY(-2px);box-shadow:0 4px 16px rgba(232,73,27,.3)}
.ths-cta-btn svg{width:16px;height:16px}

/* Color hardening — WP themes (and some HTML viewers) style a/button
   aggressively (e.g. .entry-content a {color:…}), which outranks a bare
   class and dims the white text on the orange/black pills. Scoped
   !important rules make the widget's colors win in every state. */
#talius-ths-app .ths-bq,#talius-ths-app .ths-bq:link,#talius-ths-app .ths-bq:visited,#talius-ths-app .ths-bq:hover,#talius-ths-app .ths-bq:active,#talius-ths-app .ths-bq:focus,
#talius-ths-app .ths-cta-btn,#talius-ths-app .ths-cta-btn:link,#talius-ths-app .ths-cta-btn:visited,#talius-ths-app .ths-cta-btn:hover,#talius-ths-app .ths-cta-btn:active,#talius-ths-app .ths-cta-btn:focus{color:#fff!important;text-decoration:none!important}
#talius-ths-app .ths-next{background:#E8491B!important;color:#fff!important}
#talius-ths-app .ths-next:hover{background:#d13e14!important}
#talius-ths-app .ths-prev{background:#f0efed!important;color:#555!important}

/* Loading */
.ths-loading{text-align:center;padding:3rem}
.ths-spinner{width:32px;height:32px;border:3px solid #ebebeb;border-top-color:#E8491B;border-radius:50%;animation:thsSpin .8s linear infinite;margin:0 auto 1rem}
@keyframes thsSpin{to{transform:rotate(360deg)}}

/* Disclaimer */
.ths-fn{color:#aaa;font-size:.62rem;line-height:1.6;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #e2e0dc}

/* Responsive */
@media(max-width:600px){
  .ths-hdr{padding:0 1rem;height:52px}
  .ths-logo{height:18px}
  .ths-bq{padding:.35rem .7rem;font-size:.62rem}
  .ths-hdr-b{display:none}
  .ths-prg{padding:.5rem 1rem .6rem}
  .ths-sl{font-size:.52rem}
  .ths-sb,.ths-res{padding:1.5rem 1rem 5rem}
  .ths-sh{font-size:1.3rem}
  .ths-o2,.ths-o3{grid-template-columns:1fr}
  .ths-spec-grid{grid-template-columns:1fr}
  .ths-rec-model{font-size:1.25rem}
}