/**
 * TnB App Development Cost Estimator — component styles (QA-approved values).
 *
 * Every selector is scoped under the component root ID (#tbEst). A single ID
 * raises specificity above the theme's content selectors (e.g. blog-detail.css
 * `body.single-post .sec-post.det-post .det p`), so blog/post paragraph, heading,
 * link and list styles CANNOT bleed into the widget when it is placed inside post
 * content. The scoping is selector-only — declared values are byte-identical to
 * the delivered/QA-approved component, so the design is unchanged. Because every
 * rule is under #tbEst, these styles also never leak OUT onto the surrounding page.
 *
 * @package technbrains-child
 */

#tbEst{
	--ink:#141118; --muted:#6b6570; --surface:#ffffff; --surface-2:#faf7f7;
	--line:#eae4e4; --brand:#e11b22; --brand-ink:#b3141a; --brand-soft:#fdece9;
	--violet:#7a0f14; --ok:#0b7a4b;
	--radius:14px; --radius-sm:10px;
	font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	color:var(--ink); background:var(--surface); border:1px solid var(--line);
	border-radius:var(--radius); overflow:hidden; max-width:940px; margin:0 auto;
	box-shadow:0 1px 2px rgba(23,19,31,.04),0 12px 40px -24px rgba(23,19,31,.28);
	-webkit-font-smoothing:antialiased;
}
#tbEst *{box-sizing:border-box}
#tbEst .tb-est__grid{display:grid; grid-template-columns:1.15fr .85fr}

/* ---- inputs side ---- */
#tbEst .tb-in{padding:26px 26px 22px}
#tbEst .tb-eyebrow{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:0 0 6px}
#tbEst .tb-title{font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 2px; line-height:1.15}
#tbEst .tb-sub{font-size:13.5px; color:var(--muted); margin:0 0 20px; line-height:1.5}

#tbEst .tb-step{margin-bottom:20px}
#tbEst .tb-step__q{display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:700; margin:0 0 10px}
#tbEst .tb-step__n{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
	background:var(--brand-soft); color:var(--brand-ink); font-size:11px; font-weight:700; flex:none}

#tbEst .tb-opts{display:grid; gap:8px}
#tbEst .tb-opts--row{grid-template-columns:repeat(3,1fr)}

#tbEst .tb-opt{position:relative; display:flex; cursor:pointer}
#tbEst .tb-opt input{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
#tbEst .tb-opt__box{flex:1; border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 12px; transition:border-color .15s,background .15s,box-shadow .15s; background:var(--surface)}
#tbEst .tb-opt__t{font-size:13.5px; font-weight:600; display:block}
#tbEst .tb-opt__d{font-size:11.5px; color:var(--muted); display:block; margin-top:2px; line-height:1.35}
#tbEst .tb-opt input:checked + .tb-opt__box{border-color:var(--brand); background:var(--brand-soft); box-shadow:inset 0 0 0 1px var(--brand)}
#tbEst .tb-opt input:focus-visible + .tb-opt__box{outline:2px solid var(--violet); outline-offset:2px}
#tbEst .tb-opt:hover .tb-opt__box{border-color:#cfc7db}

#tbEst .tb-feats{display:grid; grid-template-columns:1fr 1fr; gap:8px}
#tbEst .tb-feat{display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 11px; cursor:pointer; transition:border-color .15s,background .15s}
#tbEst .tb-feat:hover{border-color:#cfc7db}
#tbEst .tb-feat input{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
#tbEst .tb-feat__tick{width:17px; height:17px; border-radius:5px; border:1.5px solid #c9c1d6; flex:none; display:grid; place-items:center; transition:all .15s}
#tbEst .tb-feat__tick svg{width:11px; height:11px; opacity:0; transform:scale(.6); transition:all .15s}
#tbEst .tb-feat input:checked ~ .tb-feat__tick{background:var(--brand); border-color:var(--brand)}
#tbEst .tb-feat input:checked ~ .tb-feat__tick svg{opacity:1; transform:scale(1)}
#tbEst .tb-feat input:focus-visible ~ .tb-feat__tick{outline:2px solid var(--violet); outline-offset:2px}
#tbEst .tb-feat__txt{display:flex; flex-direction:column; min-width:0}
#tbEst .tb-feat__n{font-size:13px; font-weight:600}
#tbEst .tb-feat__p{font-size:11px; color:var(--muted)}
#tbEst .tb-feat input:checked ~ .tb-feat__txt .tb-feat__n{color:var(--brand-ink)}

/* ---- result side ---- */
#tbEst .tb-out{background:var(--surface-2); border-left:1px solid var(--line); padding:26px 24px; display:flex; flex-direction:column}
#tbEst .tb-out__label{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
#tbEst .tb-range{font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; margin:0}
#tbEst .tb-range .dash{color:var(--muted); font-weight:600; margin:0 4px}
#tbEst .tb-bar{height:6px; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--violet)); margin:14px 0 4px; opacity:.9}
#tbEst .tb-bar__wrap{background:#ece7f3; border-radius:999px; overflow:hidden}

#tbEst .tb-facts{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden}
#tbEst .tb-facts .tb-fact{background:var(--surface); display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 12px}
#tbEst .tb-facts .k{font-size:12.5px; color:var(--muted)}
#tbEst .tb-facts .v{font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}

#tbEst .tb-scoped{display:none; margin:12px 0 0; font-size:12px; line-height:1.45; color:var(--brand-ink); background:var(--brand-soft); border-radius:var(--radius-sm); padding:9px 11px}
#tbEst .tb-scoped.on{display:block}

#tbEst .tb-summary{font-size:12.5px; line-height:1.5; color:var(--muted); margin:14px 0 0}
#tbEst .tb-summary b{color:var(--ink); font-weight:700}

#tbEst .tb-cta{margin-top:auto; padding-top:18px; display:grid; gap:8px}
#tbEst .tb-btn{display:block; width:100%; text-align:center; text-decoration:none; font-weight:700; font-size:14px; padding:13px 16px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid transparent; font-family:inherit; transition:background .15s,border-color .15s,transform .05s}
#tbEst .tb-btn--primary{background:var(--brand); color:#fff}
#tbEst .tb-btn--primary:hover{background:var(--brand-ink)}
#tbEst .tb-btn--primary:active{transform:translateY(1px)}
#tbEst .tb-btn--ghost{background:transparent; color:var(--brand-ink); border-color:var(--line)}
#tbEst .tb-btn--ghost:hover{border-color:var(--brand); background:var(--brand-soft)}
#tbEst .tb-btn:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
#tbEst .tb-note{font-size:10.5px; color:var(--muted); line-height:1.45; margin:10px 0 0; text-align:center}

/* Mobile step-wizard nav — hidden by default; JS + the ≤767 rules turn it on. */
#tbEst .tb-wiz-nav{display:none}

/* modal */
#tbEst .tb-modal{position:fixed; inset:0; z-index:2147483000; display:none; place-items:center; padding:20px; background:rgba(23,19,31,.55)}
#tbEst .tb-modal.on{display:grid}
#tbEst .tb-dialog{background:var(--surface); border-radius:16px; width:100%; max-width:440px; max-height:92vh; overflow:auto; padding:26px 24px; position:relative; box-shadow:0 30px 80px -20px rgba(23,19,31,.5)}
#tbEst .tb-dialog__close{position:absolute; top:12px; right:12px; width:34px; height:34px; padding:0; border:none; background:var(--surface-2); color:var(--muted); border-radius:9px; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center}
#tbEst .tb-dialog__close svg{width:16px; height:16px; display:block}
#tbEst .tb-dialog__close:hover{background:var(--brand-soft); color:var(--brand-ink)}
#tbEst .tb-dialog__close:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
#tbEst .tb-dialog__title{font-size:20px; font-weight:800; letter-spacing:-.02em; margin:2px 0 4px}
#tbEst .tb-dialog__sub{font-size:13px; color:var(--muted); margin:0 0 16px; line-height:1.5}
#tbEst .tb-field{margin-bottom:12px}
#tbEst .tb-field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px}
#tbEst .tb-opt-tag{font-weight:500; color:var(--muted)}
#tbEst .tb-field input,#tbEst .tb-field textarea{width:100%; font-family:inherit; font-size:14px; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; background:var(--surface); resize:vertical}
#tbEst .tb-field input:focus,#tbEst .tb-field textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
#tbEst .tb-err{color:#c0143c; font-size:12.5px; margin:0 0 10px}
#tbEst .tb-err:empty{margin:0}
#tbEst .tb-success{text-align:center; padding:8px 4px}
#tbEst .tb-success__ico{width:46px; height:46px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-size:22px; font-weight:700; margin:0 auto 12px}

/* =========================================================================
 * Responsive — ONE design, uniformly scaled.
 *
 * The QA-approved component is authored in fixed px at its natural (>=1440px)
 * size; every value above is unchanged. To keep the SAME design on smaller
 * screens instead of a redesign, the whole component is scaled with CSS `zoom`
 * (a layout zoom: it recomputes box sizes, so `margin:0 auto` still centres the
 * card and the fixed modal's `inset:0` still pins to the viewport). Frame, grid,
 * type and gaps all shrink together -> pixel-identical design, just smaller.
 * Phones reset zoom to 1 so the stacked card stays full-size and readable.
 * ====================================================================== */

/* >=1440px unchanged. Below that, scale the whole component uniformly. */
@media (max-width:1439px){ #tbEst{ zoom:.90 } }   /* 1400-1439 easing band */
@media (max-width:1399px){ #tbEst{ zoom:.80 } }   /* laptops incl. 1280 — strong */
@media (max-width:1199px){ #tbEst{ zoom:.80 } }   /* small laptops / tablet-landscape */
@media (max-width:991px){  #tbEst{ zoom:.82 } }   /* tablet, still 2-col */

/* Laptops 1200–1599: the three questions collapse into FAQ-style accordions
 * (first one open). Only active when JS adds .tb-acc-on — no JS = all open. */
@media (min-width:1200px) and (max-width:1599px){
	#tbEst .tb-in.tb-acc-on .tb-step{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:10px }
	#tbEst .tb-in.tb-acc-on .tb-step__q{ cursor:pointer; user-select:none; margin-bottom:0 }
	#tbEst .tb-in.tb-acc-on .tb-step.is-open > .tb-step__q{ margin-bottom:12px }
	#tbEst .tb-in.tb-acc-on .tb-step:not(.is-open) > *:not(.tb-step__q){ display:none }
	#tbEst .tb-in.tb-acc-on .tb-step__q::after{
		content:""; width:8px; height:8px; margin-left:auto; flex:none; align-self:center;
		border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
		transform:rotate(45deg); transition:transform .2s;
	}
	#tbEst .tb-in.tb-acc-on .tb-step.is-open > .tb-step__q::after{ transform:rotate(-135deg) }
}

/* Phones: native size + stack (reset zoom so the card is full-size & readable). */
@media (max-width:767px){
	#tbEst{ zoom:1 }
	#tbEst .tb-est__grid{ grid-template-columns:1fr }
	#tbEst .tb-out{ border-left:none; border-top:1px solid var(--line) }

	/* Step wizard: when JS engages it (.tb-wiz-on), show one step at a time + nav. */
	#tbEst .tb-in.tb-wiz-on .tb-step{ display:none; margin-bottom:0 }
	#tbEst .tb-in.tb-wiz-on .tb-step.is-active{ display:block }
	#tbEst .tb-in.tb-wiz-on .tb-wiz-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px }
	#tbEst .tb-wiz-status{ font-size:12.5px; font-weight:600; color:var(--muted) }
	#tbEst .tb-wiz-btn{ font-family:inherit; font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid var(--brand); background:var(--brand); color:#fff; transition:background .15s,border-color .15s }
	#tbEst .tb-wiz-btn:hover{ background:var(--brand-ink); border-color:var(--brand-ink) }
	#tbEst .tb-wiz-btn.tb-wiz-prev{ background:transparent; color:var(--brand-ink); border-color:var(--line) }
	#tbEst .tb-wiz-btn.tb-wiz-prev:hover{ background:var(--brand-soft); border-color:var(--brand) }
	#tbEst .tb-wiz-btn[hidden]{ display:none }
	#tbEst .tb-wiz-btn:focus-visible{ outline:2px solid var(--violet); outline-offset:2px }
}

/* Small phones: option row 3-up -> single column. */
@media (max-width:575px){ #tbEst .tb-opts--row{ grid-template-columns:1fr } }

/* Feature grid -> single column; tighten padding; keep the price from overflowing. */
@media (max-width:480px){
	#tbEst .tb-feats{ grid-template-columns:1fr }
	#tbEst .tb-in{ padding:20px 18px 18px }
	#tbEst .tb-out{ padding:20px 18px }
	#tbEst .tb-range{ font-size:26px }
}

@media (max-width:375px){
	#tbEst .tb-range{ font-size:23px }
	#tbEst .tb-title{ font-size:20px }
}

@media (prefers-reduced-motion:reduce){ #tbEst *{transition:none !important} }