/* Plattenexperte Atelier: the cost calculators.
   First the approved design's calculator rules (preview base.css and style.css, round 11), then the few rules for
   what the QL Cost Calculator itself leaves in the form (its raw total, its tooltips). Loaded only on pages with a
   calculator; the plugin's own stylesheets are not loaded on Atelier pages. */
/* full calculator: the four QL Cost Calculator forms (tabs on the homepage) */
.calc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 24px; }
@media (min-width: 900px) { .calc-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* round 3: over the full width */
.calc-tab { min-height: 48px; padding: 6px 16px; border: 1px solid var(--line); background: transparent; border-radius: var(--btn-radius); font-weight: 600; font-size: 16px; line-height: 1.2; }
.calc-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.calc-panel[hidden] { display: none; }
.calc-body { display: flex; flex-direction: column; gap: 22px; }
.calc-fields { display: grid; gap: 20px; }
.cf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cf-label { font-weight: 600; font-size: 16px; line-height: 1.3; }
.cf-hint { font-size: 14px; color: var(--muted); }
.cf-num { display: inline-flex; align-items: center; flex: none; background: var(--field-bg, #fff); border: 1px solid var(--field-border, #9aa3a5); border-radius: var(--field-radius); }
.cf-num:focus-within { outline: 3px solid var(--focus, #2a6fdb); outline-offset: 2px; }
.cf-num input { width: 4.2em; min-height: 42px; padding: 0 4px 0 10px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.cf-num input:focus { outline: none; }
.cf-num input::-webkit-outer-spin-button, .cf-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cf-unit { padding-right: 10px; color: var(--muted); font-size: 15px; }
.cf-slider { --fill: 0%; width: 100%; height: 40px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cf-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--range-on, var(--ink)) var(--fill), var(--range-off, var(--line)) var(--fill)); }
.cf-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--range-off, var(--line)); }
.cf-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--range-on, var(--ink)); }
.cf-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--thumb, var(--ink)); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.cf-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--thumb, var(--ink)); border: 3px solid #fff; }
.cf-input { width: 100%; min-height: 48px; padding: 0 42px 0 14px; font: inherit; font-size: 16px; color: var(--ink); background-color: var(--field-bg, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7.4 9.3 12 13.9l4.6-4.6L18 10.7l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
  border: 1px solid var(--field-border, #9aa3a5); border-radius: var(--field-radius); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.cf-input.is-empty { color: var(--muted); }
.calc-result { display: flex; flex-direction: column; gap: 2px; }
.calc-kicker { font-size: 14px; }
.calc-sum { font-size: clamp(30px, 6vw, 42px); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-wait { font-size: clamp(22px, 4vw, 26px); line-height: 1.2; margin: 4px 0 2px; }
.calc-result.is-wait .calc-sum { display: none; }
.calc-result:not(.is-wait) .calc-wait { display: none; }
.calc-desc { font-size: 14px; margin-top: 6px; }
.calc-open { font-size: 15px; font-weight: 600; }
.calc-open:empty { display: none; }
.calc-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
/* round 3: choices on the left, the total beside them (it stays in view); round 4: the enquiry under the choices */
.calc-contact { border: 0; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.calc-form .calc-contact legend { float: left; width: 100%; font-family: var(--font-head); font-size: 21px; font-weight: 600; padding: 0; margin-bottom: 14px; }
.calc-form .calc-contact legend + * { clear: both; }
.cc-grid { display: grid; gap: 0 16px; }
.cc-grid textarea { min-height: 96px; }
@media (min-width: 640px) { .cc-grid { grid-template-columns: 1fr 1fr; } .cc-msg { grid-column: 1 / -1; } }
@media (min-width: 640px) { .cc-grid > .field:first-child { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 899.98px) { .calc-fields { grid-template-columns: 1fr 1fr; gap: 20px 24px; } .calc-fields .cf-range { grid-column: 1 / -1; } }
@media (max-width: 899.98px) {
  /* phones and tablets: the total first and in view while the choices are made */
  .calc-side { display: contents; }
  .calc-result { order: -1; position: sticky; top: calc(var(--head-h) + 8px); z-index: 5; box-shadow: 0 10px 24px rgba(29,49,57,.22); padding: 12px 16px 14px; }
  .calc-result .calc-sum { font-size: 30px; }
  .calc-side .calc-note { order: 5; margin-top: 0; }
}
@media (min-width: 900px) {
  /* round 4: the choices and the enquiry on the left, the total, its breakdown and the next steps beside both,
     so neither column is left with an empty space (Daniel: "empty space. Could be used better") */
  .calc-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  .calc-body { display: contents; }
  .calc-fields { grid-column: 1; grid-row: 1; }
  .calc-contact { grid-column: 1; grid-row: 2; }
  .calc-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--head-h) + 20px); }
}
/* calculator */
.calc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: clamp(16px, 3vw, 36px); box-shadow: var(--shadow); }
.calc-tab { background: var(--surface); }
.calc-tab:not([aria-selected="true"]):hover { border-color: var(--ink); }
.calc-result { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 18px 22px 20px; }
.calc-kicker, .calc-desc { color: #d3dbdb; }
.calc-sum, .calc-wait { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); color: #fff; }
.calc-open { color: var(--sand); }
.calc-contact legend { letter-spacing: var(--head-track); }
.calc-head > div { max-width: 640px; }
.calc-head h2 { margin-bottom: .4em; }
.calc-head .section-lead { margin-bottom: 0; }
@media (max-width: 699.98px) { .calc-tab { font-size: 15px; padding: 4px 8px; } }
@media (max-width: 899.98px) { .calc-tab { min-height: 54px; } }
/* round 4: breakdown of the amount and the next steps beside the calculator fields */
/* only beside the choices: below 900 px the side stays display: contents (base.css), so the total keeps its sticky place above the choices */
@media (min-width: 900px) { .calc-side { display: flex; flex-direction: column; gap: 14px; } }
.calc-break, .calc-next { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.calc-break { background: var(--surface); }
.calc-next { background: var(--tint); border-color: transparent; }
.calc-break[hidden] { display: none; }
.cb-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cb-list { list-style: none; margin: 0; padding: 0; }
/* label and amount on one line, the chosen values under them over the full width, so they do not wrap early on phones */
.cb-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.cb-list li:first-child { border-top: 0; }
.cb-what { display: contents; }
.cb-label { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.cb-detail { grid-column: 1 / -1; grid-row: 2; font-size: 14px; color: var(--muted); line-height: 1.4; }
.cb-amount { grid-column: 2; grid-row: 1; font-weight: 600; font-size: 15.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-list li.is-open .cb-amount { color: var(--muted); font-weight: 500; }
.calc-next ol { list-style: none; counter-reset: n; margin: 0; padding: 0; display: grid; gap: 8px; }
.calc-next li { counter-increment: n; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline; font-size: 15.5px; line-height: 1.45; }
.calc-next li::before { content: counter(n); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 13.5px; transform: translateY(-1px); }
@media (max-width: 899.98px) { .calc-side .calc-break { order: 4; } .calc-side .calc-next { order: 5; } }
/* the bath calculator says where the rest of the bath is priced */
.calc-scope { display: block; font-size: 14px; margin-top: 6px; color: #d3dbdb; }

/* ---------------------------------------------------------------- the plugin's own elements */
/* its total in the plugin's writing stays in the page for its scripts; the design shows it in .calc-sum */
.pe-cc-raw { display: none !important; }
/* the plugin's tooltips: the answer is shown in the form's status line instead */
.qtip, .cost-calculator-tooltip { display: none !important; }
.calc-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.calc-form .cost-calculator-submit-form[aria-disabled="true"], .calc-form.is-sending .cost-calculator-submit-form { opacity: .6; pointer-events: none; }
.calc-form .form-status.is-busy { color: var(--muted); }
.calc-form [aria-invalid="true"] { border-color: var(--error, #b3261e); }
.calc-missing { margin: 0; font-size: 17px; }