/* Talius Awning Series Selector — Scoped styles (tas- prefix) */
#talius-tas-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-tas-app *){margin:0;padding:0;box-sizing:border-box}

/* Header */
.tas-hdr{background:#fff;padding:0 2rem;height:60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e0dc}
.tas-logo{height:22px;display:block}
.tas-hdr-r{display:flex;align-items:center;gap:1rem}
.tas-hdr-b{font-size:.72rem;color:#888;font-weight:500;letter-spacing:.03em}
.tas-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}
.tas-bq:hover{background:#E8491B;transform:translateY(-1px)}
.tas-bq svg{width:12px;height:12px}

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

/* Live conflict / info banner */
.tas-bnr-wrap{max-width:700px;margin:0 auto;padding:0 1.5rem}
.tas-bnr{margin-top:1rem;padding:.7rem 1rem;border-radius:10px;font-size:.78rem;font-weight:500;line-height:1.5;animation:tasFadeUp .3s ease}
.tas-bnr.tas-bnr-warn{background:rgba(180,83,9,.07);color:#b45309;border-left:3px solid #b45309}
.tas-bnr.tas-bnr-info{background:rgba(37,99,235,.06);color:#1d4ed8;border-left:3px solid #2563eb}

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

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

/* Progressively-filtered options: greyed out when the combination of this
   option with the answers to earlier questions leaves no series available */
.tas-oc.tas-dis{opacity:.4;filter:grayscale(1);cursor:not-allowed;box-shadow:none}
.tas-oc.tas-dis:hover{border-color:#ebebeb;box-shadow:none}
.tas-oc.tas-dis::after{content:"Not available with your earlier answers";display:block;margin-top:.35rem;font-size:.6rem;font-weight:700;color:#b45309;text-transform:uppercase;letter-spacing:.05em}

/* Unit converter */
.tas-conv{margin-top:1.5rem;background:#fff;border:1px solid #e2e0dc;border-radius:14px;padding:.9rem 1.1rem}
.tas-conv summary{font-size:.78rem;font-weight:600;color:#555;cursor:pointer}
.tas-conv-b{margin-top:.75rem;display:grid;gap:.5rem}
.tas-conv-row{display:flex;align-items:center;gap:.6rem}
.tas-conv-row label{font-size:.72rem;font-weight:600;color:#888;width:52px}
.tas-conv-row input{width:110px;padding:.4rem .6rem;border:1px solid #e2e0dc;border-radius:8px;font-size:.8rem;font-family:inherit;background:#fff;color:#1a1a1a}
.tas-conv-row input:focus{outline:2px solid #E8491B;outline-offset:1px;border-color:#E8491B}
.tas-conv-out{font-size:.78rem;font-weight:600;color:#1a1a1a}

/* 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 */
.tas-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}
.tas-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}
.tas-prev{background:#f0efed;color:#555;border:1px solid #e2e0dc}
.tas-prev:hover{background:#e5e4e2}
.tas-next{background:#E8491B;color:#fff}
.tas-next:hover{background:#d13e14;transform:translateY(-1px)}
.tas-nb:disabled{opacity:.35;cursor:not-allowed;transform:none!important}

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

.tas-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}
.tas-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}

.tas-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)}
.tas-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}
.tas-rec-banner svg{width:14px;height:14px;flex-shrink:0}
.tas-rec-body{padding:1.5rem}
.tas-rec-top{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.15rem}
.tas-rec-model{font-size:1.5rem;font-weight:800;color:#1a1a1a}
.tas-rec-desc{font-size:.85rem;color:#555;margin-bottom:1rem}
.tas-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}
.tas-why strong{color:#1a1a1a}

/* Contact-Talius variant (below minimum / no matching series) */
.tas-rec-card.tas-contact{border-color:#1a1a1a}
.tas-rec-card.tas-contact .tas-rec-banner{background:#1a1a1a}

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

/* Secondary recommendation cards */
.tas-sec-title{font-size:.75rem;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.06em;margin:1.5rem 0 .75rem}
.tas-sec-card{background:#fff;border:1px solid #e2e0dc;border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:.75rem;transition:all .2s}
.tas-sec-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.tas-sec-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.35rem}
.tas-sec-name{font-weight:800;font-size:1.05rem;color:#1a1a1a}
.tas-sec-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tas-tag{font-size:.62rem;font-weight:600;padding:.25rem .6rem;border-radius:50px;letter-spacing:.02em}
.tas-tag-mfr{background:rgba(37,99,235,.07);color:#2563eb}
.tas-tag-tier{background:rgba(26,26,26,.06);color:#555}
.tas-tag-series{background:rgba(232,73,27,.09);color:#E8491B}
.tas-sec-desc{font-size:.78rem;color:#555;line-height:1.55;margin-bottom:.9rem}
.tas-sec-desc:last-child{margin-bottom:0}
.tas-sec-card .tas-spec-grid{margin-top:.25rem}
.tas-sec-sub{font-size:.72rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;margin:1rem 0 .3rem}
.tas-link{color:#E8491B;font-weight:600;text-decoration:none}
.tas-link:hover{text-decoration:underline}

/* Bulleted lists inside cards (additional recommendations, sizing) */
.tas-list{list-style:none;display:grid;gap:.5rem}
.tas-list li{position:relative;padding-left:1.2rem;font-size:.78rem;color:#555;line-height:1.55}
.tas-list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:#E8491B}

/* Product fact chips */
.tas-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.tas-fact{background:#f0efed;border-radius:10px;padding:.5rem .8rem;font-size:.7rem;font-weight:600;color:#555;line-height:1.4}

/* CTA */
.tas-cta{background:#1a1a1a;border-radius:14px;padding:2rem;text-align:center;margin-top:2rem;color:#fff}
.tas-cta h3{font-size:1.3rem;font-weight:700;margin-bottom:.3rem}
.tas-cta p{opacity:.6;font-size:.8rem;margin-bottom:1.25rem}
.tas-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}
.tas-cta-btn:hover{background:#d13e14;transform:translateY(-2px);box-shadow:0 4px 16px rgba(232,73,27,.3)}
.tas-cta-btn svg{width:16px;height:16px}
.tas-mailto{display:inline-block;margin-top:.9rem;color:#fff;opacity:.65;font-size:.75rem;font-weight:600;text-decoration:underline;transition:opacity .2s}
.tas-mailto:hover{opacity:1}

/* 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-tas-app .tas-bq,#talius-tas-app .tas-bq:link,#talius-tas-app .tas-bq:visited,#talius-tas-app .tas-bq:hover,#talius-tas-app .tas-bq:active,#talius-tas-app .tas-bq:focus,
#talius-tas-app .tas-cta-btn,#talius-tas-app .tas-cta-btn:link,#talius-tas-app .tas-cta-btn:visited,#talius-tas-app .tas-cta-btn:hover,#talius-tas-app .tas-cta-btn:active,#talius-tas-app .tas-cta-btn:focus{color:#fff!important;text-decoration:none!important}
#talius-tas-app .tas-mailto,#talius-tas-app .tas-mailto:link,#talius-tas-app .tas-mailto:visited,#talius-tas-app .tas-mailto:hover,#talius-tas-app .tas-mailto:active,#talius-tas-app .tas-mailto:focus{color:#fff!important;text-decoration:underline!important}
#talius-tas-app .tas-link,#talius-tas-app .tas-link:link,#talius-tas-app .tas-link:visited,#talius-tas-app .tas-link:hover,#talius-tas-app .tas-link:active,#talius-tas-app .tas-link:focus{color:#E8491B!important}
#talius-tas-app .tas-next{background:#E8491B!important;color:#fff!important}
#talius-tas-app .tas-next:hover{background:#d13e14!important}
#talius-tas-app .tas-prev{background:#f0efed!important;color:#555!important}

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

/* Disclaimer */
.tas-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){
  .tas-hdr{padding:0 1rem;height:52px}
  .tas-logo{height:18px}
  .tas-bq{padding:.35rem .7rem;font-size:.62rem}
  .tas-hdr-b{display:none}
  .tas-prg{padding:.5rem 1rem .6rem}
  .tas-sl{font-size:.52rem}
  .tas-bnr-wrap{padding:0 1rem}
  .tas-sb,.tas-res{padding:1.5rem 1rem 5rem}
  .tas-sh{font-size:1.3rem}
  .tas-o2,.tas-o3{grid-template-columns:1fr}
  .tas-spec-grid{grid-template-columns:1fr}
  .tas-rec-model{font-size:1.25rem}
}