/* Follows DESIGN.md · tokens in main.css */
/* Ekspert na godziny: estimator UI (rendered by assets/js/estimator.js into [data-en-estimator]).
   Shared by the front page (#cennik) and the service pages. Expects to sit on an .en-surface-loden section.
   Style handle: "en-estimator". */

.en-est { position: relative; }
.en-est__noscript { border: 1px solid var(--loden-line); border-radius: var(--r-2); padding: var(--s-5); }
.en-est__grid { display: grid; gap: var(--s-6); align-items: start; }
.en-est__left { min-width: 0; }
.en-est__cat + .en-est__cat { margin-top: var(--s-7); }
.en-est__cat[role="tabpanel"] { margin-top: 0; }
.en-est__cat[role="tabpanel"]:focus { outline: none; }
.en-est__cat[role="tabpanel"]:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; }
.en-est__receipt .en-sheet__list > li { font-size: 1rem; }
.en-est__receipt .en-sheet__meta { font-size: 1rem; }

/* Category tabs (only when the estimator shows more than one trade): one trade at a time keeps the list short. */
.en-est__tabs { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); border-bottom: 2px solid var(--loden-line); }
.en-est__tab {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: .5rem 1rem; margin-bottom: -2px;
	background: none; border: 0; box-shadow: inset 0 -4px 0 transparent;
	color: var(--loden-ink-2); font: inherit; font-weight: 700; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .en-est__tab:hover { color: var(--loden-ink); background: var(--loden-deep); } }
.en-est__tab:active { transform: scale(.97); }
.en-est__tab[aria-selected="true"] { color: var(--loden-ink); box-shadow: inset 0 -4px 0 var(--brass); }
.en-est__tab:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }
.en-est__tabn { font-family: var(--font-display);
	display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding-inline: .35rem; border-radius: 999px;
	background: var(--brass); color: var(--brass-ink); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.en-est__tabn[hidden] { display: none; }
.en-est__cath { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); margin-bottom: var(--s-3); }
.en-est__list { list-style: none; margin: 0; padding: 0; }
.en-est__cat[role="tabpanel"] .en-est__list > li:first-child { border-top: 0; }
.en-est__row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center;
	padding: .5rem .75rem; margin-inline: -.75rem; border-top: 1px solid var(--loden-line); border-radius: var(--r-1);
	transition: background-color var(--dur-state) var(--ease);
}
.en-est__row.is-on { background: var(--loden-deep); }
.en-est__info { display: grid; gap: .1rem; }
.en-est__name { font-weight: 600; color: var(--loden-ink); line-height: 1.35; }
.en-est__meta { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--loden-ink-2); font-variant-numeric: tabular-nums; }
.en-est__stepper { display: inline-flex; align-items: center; border: 1px solid var(--loden-line); border-radius: var(--r-1); background: var(--loden); }
.en-est__btn {
	display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
	background: none; border: 0; border-radius: 3px; color: var(--loden-ink); cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .en-est__btn:hover:not(:disabled) { background: var(--brass); color: var(--brass-ink); } }
.en-est__btn:active:not(:disabled) { transform: scale(.94); }
.en-est__btn:disabled { color: var(--loden-line); cursor: not-allowed; }
.en-est__qty { font-family: var(--font-display); min-width: 2ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.15rem; color: var(--loden-ink-2); }
.en-est__row.is-on .en-est__qty { color: var(--brass); }

/* Mini total, mobile only (the receipt sits below the long task list there). Shown after the list and sticky to the
   bottom edge, right above the fixed call bar (and the cookie notice while it is open), so it never stacks on the header. */
.en-est__left { display: flex; flex-direction: column; }
.en-est__mini {
	order: 1; position: sticky; bottom: calc(var(--callbar-h) + var(--cookies-h) + env(safe-area-inset-bottom) + .5rem); z-index: var(--z-sticky);
	display: flex; align-items: center; gap: var(--s-3); min-height: 52px;
	padding: .55rem .9rem; margin-top: var(--s-4);
	background: var(--paper); color: var(--ink); text-decoration: none;
	border-radius: var(--r-2); box-shadow: 0 -10px 26px -16px var(--shadow-deep-85);
	transition: transform var(--dur-press) var(--ease);
}
.en-est__mini:active { transform: scale(.97); }
.en-est__mini > span:first-child { flex: 1; font-size: 1rem; color: var(--ink-2); }
.en-est__minisum { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.en-est__minigo { display: grid; color: var(--loden); transition: transform var(--dur-open) var(--ease); }
@media (hover: hover) and (pointer: fine) { .en-est__mini:hover .en-est__minigo { transform: translateX(3px); } }
.en-surface-loden .en-est__mini:focus-visible { outline-color: var(--brass); }

.en-est__receipt { background: var(--paper); color: var(--ink); border-color: transparent; padding: clamp(1.25rem, 1rem + 1vw, 2rem); scroll-margin-top: calc(var(--header-h) + 5rem); }
.en-est__receipt:focus { outline: none; }
.en-est__receipt :focus-visible { outline-color: var(--ink); }
.en-est__receipt p { color: var(--ink-2); }
.en-est__rhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); border-bottom: 2px solid var(--ink); padding-bottom: var(--s-3); }
.en-est__receipt .en-est__rtitle { margin: 0; color: var(--ink); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.en-est__rtag { font-size: 1rem; color: var(--ink-2); }
.en-est__items:empty { display: none; }
.en-est__items > li { padding-block: .55rem; line-height: 1.35; }
.en-est__x { font-weight: 700; white-space: nowrap; }
.en-est__receipt .en-est__empty { margin: 0; padding-block: var(--s-4); font-size: 1rem; border-bottom: 1px solid var(--line); }
.en-est__zone { border: 0; padding: 0; margin: var(--s-5) 0 var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
.en-est__zone legend { padding: 0; margin-bottom: var(--s-2); font-weight: 700; }
.en-est__zopt { position: relative; display: flex; }
.en-est__zopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.en-est__zopt span {
	position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
	min-height: 56px; padding: .45rem .7rem .45rem 2.3rem;
	border: 1px solid var(--ink-2); border-radius: var(--r-1); font-size: 1rem; line-height: 1.3;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .en-est__zopt input:not(:checked):hover + span { border-color: var(--ink); background: var(--paper-2); } }
.en-est__zopt span::before {
	content: ""; position: absolute; left: .75rem; top: 50%; width: 1rem; height: 1rem; translate: 0 -50%;
	border: 2px solid currentColor; border-radius: 50%;
}
.en-est__zopt b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.en-est__zopt input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.en-est__zopt input:checked + span::before { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 8px var(--brass); border-color: var(--brass); }
.en-est__zopt input:focus-visible + span { outline: 3px solid var(--loden); outline-offset: 2px; }
.en-est__sum { margin: 0; }
.en-est__sumrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: .45rem; border-bottom: 1px dashed var(--line); }
.en-est__sumrow dt { color: var(--ink-2); font-size: 1rem; }
.en-est__sumrow dd { font-family: var(--font-display); margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.en-est__total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: var(--s-2); padding-top: var(--s-3); }
.en-est__total dt { color: var(--ink); font-size: 1.0625rem; font-weight: 700; }
.en-est__total dd { display: grid; justify-items: end; gap: .3rem; text-align: right; white-space: normal; }
.en-est__tnum { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); font-weight: 800; line-height: 1; white-space: nowrap; }
.en-est__tplus { font-size: 1rem; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.en-est__totalv.is-quote .en-est__tplus { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 800; color: var(--ink); }

/* Mixed list (2026-10-21): quote jobs show "wycena indywidualna" instead of a time and go to the "Do wyceny" list. */
/* Every estimator mount (home .en-est, service pages .svc-calc__mount): rows hidden by the script stay hidden. */
[data-en-estimator] [hidden] { display: none !important; }
.en-est__meta--q { color: var(--brass); font-weight: 600; }
.en-est__receipt .en-est__grp { margin: var(--s-4) 0 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.en-est__quote { margin-bottom: var(--s-2); }
.en-est__qlist { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.en-est__qlist > li { position: relative; padding: .45rem 0 .45rem 1.1rem; font-size: 1rem; line-height: 1.35; border-bottom: 1px solid var(--line); }
.en-est__qlist > li::before { content: ""; position: absolute; left: .1rem; top: 1.05em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--brass-deep); }
.en-est__receipt .en-est__note { font-size: 1rem; line-height: 1.5; margin: var(--s-4) 0; }
.en-est__send { width: 100%; }
/* Nothing chosen yet: no 0 zł sums or zone picker, just the hint and the (disabled) send button. */
.en-est__receipt.is-empty .en-est__zone, .en-est__receipt.is-empty .en-est__sum, .en-est__receipt.is-empty .en-est__note { display: none; }
.en-est__receipt.is-empty .en-est__empty { margin-bottom: var(--s-5); }
.en-est__send[aria-disabled="true"] { opacity: .7; cursor: not-allowed; }

@media (min-width: 941px) {
	.en-est__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
	.en-est__receipt { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
	.en-est__mini { display: none; }
}