/* kalk-host.css - host styles for the roof-configurator bundle on the
   bestor.ee pages served by the bestor-kalkulaator mu-plugin
   (leedu-src/server/bestor-kalkulaator.php). Deployed to
   wp-content/uploads/let/kalk-host.css, versioned by filemtime.

   SECOND HOME: the first two blocks are copied from deploy-leedu-page.php
   (~line 473: theme button revert + A6-d density). Change both files
   together (LESSONS dual-source-markup-edit-both-homes-before-deploy). */

/* Theme reset. The bestor theme's global button{color:#fff;background:
   rgba(162,53,52,.5);padding:25px 45px} blanked the bundle's shape buttons;
   :where() keeps this at 0-0-1 so the bundle's own button styles win. */
:where(#roof-configurator) button {
	background-color: revert;
	color: revert;
	padding: revert;
	font-size: revert;
	font-weight: revert;
	text-transform: revert;
	border: revert;
	border-radius: revert;
	text-align: revert;
	letter-spacing: revert;
	transition: revert;
	outline: revert;
	user-select: revert;
}
:where(#roof-configurator) button:hover {
	background-color: revert;
}

/* A6-d summary-step density (owner: narrower read, less scrolling).
   The theme's style.css ships th,td{padding:15px!important} and
   table,td,th{border:1px solid #ccc} on every page (pqf adds 6px 15px!important
   on products), so the cell rules need !important too - there is no
   specificity path past a theme !important (review 2026-10-02). */
#roof-configurator .kalk-table {
	font-size: 0.85rem;
}
#roof-configurator .kalk-table th,
#roof-configurator .kalk-table td {
	padding: 0.28rem 0.25rem !important;
	border: 0 !important;
	border-bottom: 1px solid #e4e9ef !important;
}
#roof-configurator .kalk-table tr.kalk-cat-head td {
	padding-top: 0.5rem !important;
}
#roof-configurator table {
	border: 0 !important;
}
#roof-configurator .kalk-cutplan {
	padding: 0.35rem 0.7rem;
}
#roof-configurator .kalk-summary-actions {
	margin-top: 0.5rem;
	gap: 0.4rem;
}
#roof-configurator .kalk-secondary {
	padding: 0.38rem 0.6rem;
	font-size: 0.8rem;
}
#roof-configurator .kalk-cta-lead {
	margin-bottom: 0.6rem;
	padding: 0.6rem 0.8rem;
}
#roof-configurator .kalk-panel {
	gap: 0.75rem;
}

/* Theme form-control bleed (style.css lines 66-71, hardcoded link on every
   page): input:focus{outline:none!important} removes every keyboard focus
   ring; input[type=checkbox]{width:30px;margin-left:-20px;margin-right:-10px}
   drags the gate consent checkbox 20px out of its label; input{padding:17px;
   border:1px solid #ccc} reaches the add-on quantity field, the one input the
   bundle leaves unstyled. WCAG AA needs the ring, so !important is the tool. */
#roof-configurator
	:is(input, select, textarea, button, a, [tabindex]):focus-visible {
	outline: 2px solid #a23534 !important;
	outline-offset: 2px;
}
#roof-configurator input[type="checkbox"],
#roof-configurator input[type="radio"] {
	width: auto;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: 0;
}
/* .kalk-addon-count covers all three step-5 count inputs; the bundle's own
   .kalk-addon-sub rule misses "Ventilatsiooni läbiviike" (review a2). */
#roof-configurator .kalk-addon-count input[type="number"] {
	width: 6.5rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid #e6ddc9;
	border-radius: 0.375rem;
}

/* Embed frame (shortcode output). */
.bkk-embed {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	color: #3d3d3d;
	line-height: 1.5;
	margin: 24px 0;
	clear: both;
}
.bkk-embed *,
.bkk-embed *::before,
.bkk-embed *::after {
	box-sizing: border-box;
}
.bkk-embed .bkk-calc {
	scroll-margin-top: 96px;
}
.bkk-embed #roof-configurator {
	min-height: 320px;
}
.bkk-embed .bkk-noscript {
	background: #f6f5ea;
	border-left: 3px solid #a23534;
	padding: 14px 18px;
	font-size: 15px;
	margin: 0;
}
.bkk-embed .bkk-noscript a {
	color: #a23534;
	text-decoration: none;
	font-weight: 700;
}

/* Product pages: the accordion panel is a scroll container
   (pqf-product-quote-fix.css: .panel-inside{overflow-x:auto}); give the
   calculator room so its grid never triggers a horizontal scrollbar. */
body.single-product .bkk-embed {
	max-width: 100%;
	overflow-x: clip;
}

/* Mobile summary bar. The bundle fixes .kalk-mobile-bar to the viewport
   bottom (<= 56rem) whenever a bill of quantities exists, which the default
   inputs already give - on product and article pages it would cover the
   page from load. Show it only while the calculator is on screen
   (.bkk-inview toggled by the mu-plugin helper via IntersectionObserver). */
.bkk-embed .kalk-mobile-bar {
	visibility: hidden;
	pointer-events: none;
}
.bkk-embed.bkk-inview .kalk-mobile-bar {
	visibility: visible;
	pointer-events: auto;
}