/* Inquiry drawer→form path (ko_inq) — spec §4/§6/§7. R3.
   Scope: EVERYTHING under body.ko-inq (css-conventions §1). Tokens from the
   product page palette (css-conventions §2). One sanctioned !important:
   the :focus-visible ring (AGENTS §6). */

body.ko-inq {
	--ko-inq-red: #e92727;
	--ko-inq-red-deep: #b81a1a;
	--ko-inq-tint: #fdecec;
	/* the xoo side-cart button red, set in the plugin's Style settings —
	   recorded here (AGENTS §5) because the CTA hover border must match it;
	   update together if the plugin setting ever changes */
	--ko-inq-drawer-red: #eb4847;
	/* the FreeScout chat launcher red (#fsw-btn computed background,
	   2026-09-09) — the floating basket is painted to match it (B2 polish) */
	--ko-inq-fsw-red: #e04141;
	--ko-inq-ink: #242424;
	--ko-inq-line: #d3d3d6;
	--ko-inq-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---- popup: cap to the viewport; on mobile the dialog is a flex column
   with a scrolling field region and a REAL pinned action bar (T2 moves the
   submit into .ko-inq__actions — sticky cannot escape the CF7 wrappers) */
body.ko-inq #woocommerce-catalog-mode-enquiry-cart-popup-container {
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 782px) {
	body.ko-inq #woocommerce-catalog-mode-enquiry-cart-popup-container {
		height: 100dvh;
		overflow: hidden;
	}
	/* R5.10: MUST stay scoped to the CART container — post-flip ko-inq is
	   sitewide and the single-product popup (form 2194, its own container
	   id) shares this inner class; the unscoped rule broke its layout on
	   every phone (live incident 2026-08-28). */
	body.ko-inq #woocommerce-catalog-mode-enquiry-cart-popup-container .woocommerce-catalog-mode-popup {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	/* R5.11: the missing flex link — CF7's own shell (div.wpcf7) sits
	   between the popup and the form; without flexing it the form never
	   shrinks, the pinned bar lands past 100dvh and the container's
	   overflow:hidden eats the submit (live incident 2026-08-28,
	   reproduced and fix verified in-browser at 390x844). */
	body.ko-inq #woocommerce-catalog-mode-enquiry-cart-popup-container .wpcf7 {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
	}
	body.ko-inq .woocommerce-catalog-mode-popup form.ko-inq-form {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
	}
	body.ko-inq form.ko-inq-form .form_body {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}
	body.ko-inq form.ko-inq-form .ko-inq__actions {
		flex: none;
		padding: 8px 0;
		background: #fff;
	}
}
body.ko-inq .ko-inq__actions input.wpcf7-form-control.wpcf7-submit {
	min-height: 44px;
	width: 100%;
}

/* ---- drawer CTA (T1 markup) ----
   R5.1: colours come from the xoo inline styles — the CTA carries
   .xoo-wsc-ft-btn-cart and inherits the stock filled red exactly;
   "Uredi seznam" occupies the stock CONTINUE slot (outlined) untouched.
   Layout (operator decision): ONE row, half/half — Uredi seznam left, CTA
   right. The CTA renders after the buttons grid (the hook is outside it),
   so the footer becomes the flex row; the other footer children keep full
   width, and empty ones collapse. */
body.ko-inq .xoo-wsc-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}
body.ko-inq .xoo-wsc-footer .xoo-wsc-ft-extras,
body.ko-inq .xoo-wsc-footer .xoo-wsc-ft-totals,
body.ko-inq .xoo-wsc-footer .xoo-wsc-payment-btns {
	flex: 1 1 100%;
}
body.ko-inq .xoo-wsc-ft-buttons-cont {
	flex: 1 1 0;
	min-width: 0;
	grid-template-columns: 1fr;
	margin: 0;
}
body.ko-inq a.xoo-wsc-ft-btn.ko-inq__cta {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-align: center;
	border: 1px solid transparent; /* reserved — no size jump on hover */
}
body.ko-inq a.xoo-wsc-ft-btn.ko-inq__cta:hover {
	border-color: var(--ko-inq-drawer-red);
}
/* the cart page keeps its own on-page button — hide the drawer copy there
   (fragments are page-agnostic, so this is the is_cart() guard) */
body.ko-inq.woocommerce-cart a.ko-inq__cta { display: none; }

/* "Uredi seznam" hover: none by design (operator decision R5.5 — a fill
   hover was tried via the xoo Custom CSS box and rejected; no rule here so
   nothing resurfaces if that box's !important base ever changes) */

/* relocated "Preglej katalog" — same outlined look, inline beside the cart
   page's POŠLJI POVPRAŠEVANJE (woocommerce_cart_actions, priority 9; R4.2) */
body.ko-inq a.btn.ko-inq__catalog-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--ko-inq-red);
	color: var(--ko-inq-red);
	text-decoration: none;
	border-radius: 4px;
	min-height: 40px;
	padding: 0 18px;
	margin-right: 8px;
}
body.ko-inq a.btn.ko-inq__catalog-link:hover {
	background: var(--ko-inq-tint);
	border-color: var(--ko-inq-red-deep);
	color: var(--ko-inq-red-deep);
}

/* ---- quantity/price fiction (decision A, spec §3) ----
   Drawer line internals are reshaped server-side in the product.php override
   (T4); these cover the fragment-rendered totals + the cart-page table. */
body.ko-inq .xoo-wsc-ft-totals { display: none; }
body.ko-inq .xoo-wsc-smr-ptotal { display: none; }
body.ko-inq.woocommerce-cart th.product-subtotal,
body.ko-inq.woocommerce-cart td.product-subtotal,
body.ko-inq.woocommerce-cart th.product-quantity,
body.ko-inq.woocommerce-cart td.product-quantity { display: none; }

/* ---- mobile cart page (R5.6): the stacked table reads as debris — card it.
   First pass; iterate on operator screenshots. ---- */
@media (max-width: 782px) {
	body.ko-inq.woocommerce-cart .woocommerce-cart-form__contents thead { display: none; }
	body.ko-inq.woocommerce-cart tr.woocommerce-cart-form__cart-item {
		position: relative;
		display: block;
		border: 1px solid var(--ko-inq-line);
		border-radius: 4px;
		margin-bottom: 12px;
		padding: 12px;
	}
	body.ko-inq.woocommerce-cart tr.woocommerce-cart-form__cart-item td {
		border: 0;
	}
	body.ko-inq.woocommerce-cart td.product-remove {
		position: absolute;
		top: 2px;
		right: 2px;
		width: auto;
		padding: 0;
	}
	body.ko-inq.woocommerce-cart td.product-remove a.remove {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* R5.9: the right-aligned name/šifra ran under the absolute × —
	   reserve its 44px corner (2px offset + 2px breathing room) */
	body.ko-inq.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-name {
		padding-right: 48px;
	}
	/* R5.9: un-stack the two actions into the drawer's half/half row —
	   "Preglej katalog" left, POŠLJI POVPRAŠEVANJE right, labels centered.
	   display:none children of td.actions (coupon/update) stay out of flow. */
	body.ko-inq.woocommerce-cart .woocommerce-cart-form td.actions {
		display: flex;
		align-items: stretch;
		gap: 8px;
	}
	body.ko-inq.woocommerce-cart td.actions a.btn.ko-inq__catalog-link,
	body.ko-inq.woocommerce-cart td.actions button#enquiryCartButton {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		min-height: 44px;
	}
}

/* ---- touch targets ≥44px (spec §6; plugin controls) ---- */
body.ko-inq .xoo-wsc-cart-trigger {
	position: relative;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* R5.8: widening the trigger to 44px moved the badge's anchor corner away
   from the ~25px icon — re-anchor the count to the icon's top-right instead
   of the box's. The site Custom CSS positions it absolute (top/right); only
   the horizontal anchor changes here. */
body.ko-inq .xoo-wsc-cart-trigger .xoo-wsc-sc-count {
	right: auto;
	left: calc(50% + 8px);
	top: 0;
}
body.ko-inq .xoo-wsch-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.ko-inq .woocommerce-catalog-mode-popup-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---- floating basket: clear of the FreeScout launcher (#fsw-btn,
   62px at bottom 20 / right 35 — spec §6). B2 polish (operator,
   2026-09-09): the same 62px disc, right edge, red and shadow as the
   launcher; white icon; count badge white / ink ring / deep-red digit
   (deep red: a 15px digit needs ≥4.5:1 on white, #e04141 only gives ~4.1).
   The plugin positions the basket with right:0 + margin:10px and slides it
   left of the open drawer via .xoo-wsc-cart-active (right:435px) — the
   alignment is done with margin so that rule stays the plugin's. The icon
   is the plugin's black SVG <img>, painted white with a filter. ---- */
body.ko-inq .xoo-wsc-basket {
	display: block;
	bottom: 96px;
	width: 62px;
	height: 62px;
	padding: 0;
	margin: 10px 20px 10px 10px;
	box-sizing: border-box;
	background-color: var(--ko-inq-fsw-red);
	color: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .24), 0 3px 8px rgba(0, 0, 0, .16);
}
@media (hover: hover) { /* touch devices keep :hover stuck after a tap */
	body.ko-inq .xoo-wsc-basket:hover {
		background-color: var(--ko-inq-red-deep);
	}
}
body.ko-inq .xoo-wsc-basket .xoo-wsc-bki {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
}
body.ko-inq .xoo-wsc-basket .xoo-wsc-bki img {
	width: 28px;
	height: 28px;
	filter: brightness(0) invert(1);
}
body.ko-inq .xoo-wsc-basket .xoo-wsc-items-count {
	position: absolute;
	top: -3px;
	right: -3px;
	left: auto;
	bottom: auto;
	transform: none;
	margin: 0;
	width: auto;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #fff;
	border: 1.5px solid var(--ko-inq-ink);
	color: var(--ko-inq-red-deep);
	font: 800 15px/1 inherit;
	font-family: inherit;
	letter-spacing: 0;
	text-align: center;
	-webkit-text-stroke: .35px var(--ko-inq-red-deep);
}
/* phone: the launcher's own breakpoint (ko-freescout-chat css: ≤767px →
   56px disc, right 16, bottom max(16px, safe-area), 26px icon). Same disc,
   same right edge, 16px gap above the launcher (24 on desktop). */
@media (max-width: 767px) {
	body.ko-inq .xoo-wsc-basket {
		width: 56px;
		height: 56px;
		margin: 10px 16px 10px 10px;
		bottom: calc(max(16px, env(safe-area-inset-bottom)) + 62px);
	}
	body.ko-inq .xoo-wsc-basket .xoo-wsc-bki img {
		width: 26px;
		height: 26px;
	}
}
/* drawer open (operator, phone pass 2026-09-09): the basket rides out with
   the panel — the plugin shifts it by `right: 435px` (its desktop width)
   under .xoo-wsc-cart-active — and fades; every close path brings it back
   the same way under the plugin's 0.5s transition. ≤767px the panel is 90%
   wide, not 435: cap the shift to the real width so the basket stays glued
   to the panel's edge. */
body.ko-inq.xoo-wsc-cart-active .xoo-wsc-basket {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media (max-width: 767px) {
	body.ko-inq.xoo-wsc-cart-active .xoo-wsc-basket {
		right: min(90%, 435px);
	}
}
/* swipe-to-dismiss in progress (inquiry-drawer.js R6.4/R6.5 sets
   body.ko-inq--swiping): visible at the panel's edge; position AND
   opacity are driven inline by the drag (opacity 0 → 1 across the commit
   threshold), so no transition here — the release hands both back to the
   plugin's 0.5s transition */
body.ko-inq.xoo-wsc-cart-active.ko-inq--swiping .xoo-wsc-basket {
	opacity: 1;
	visibility: visible;
}

/* ---- the one sanctioned !important: focus rings (AGENTS §6) ---- */
body.ko-inq .xoo-wsc-cart-trigger:focus-visible,
body.ko-inq .xoo-wsc-smr-del:focus-visible,
body.ko-inq .xoo-wsch-close:focus-visible,
body.ko-inq .xoo-wsc-basket:focus-visible,
body.ko-inq a.ko-inq__cta:focus-visible,
body.ko-inq .woocommerce-catalog-mode-popup-close:focus-visible {
	outline: 2px solid #242424 !important;
	outline-offset: 2px;
}

/* ---- §7 add feedback (state classes set by inquiry-drawer.js; the JS
   guards keyboard activation via aria-disabled — these rules are the
   visual layer only) ---- */
body.ko-inq .single_add_to_cart_button.ko-inq--working {
	opacity: .6;
	pointer-events: none;
}
body.ko-inq .single_add_to_cart_button.ko-inq--error {
	border: 1px solid var(--ko-inq-red-deep);
	color: var(--ko-inq-red-deep);
}
body.ko-inq a.ko-inq__cta[aria-disabled="true"],
body.ko-inq .xoo-wsc-loading a.ko-inq__cta {
	pointer-events: none;
	opacity: .5;
}

/* R5.8.2: the product line in the form header — more gap between the
   wrapped lines (operator; pairs with the JS "SKU - NAME  |  SKU - NAME"
   builder). #product_visual is the catalog-mode plugin's own element, so
   the id is targeted under our body scope like the xoo-* classes are. */
body.ko-inq #product_visual {
	line-height: 2;
}

/* readable add-failure message (role=alert, inserted by JS) */
body.ko-inq .ko-inq__notice {
	background: #fdecec;
	color: var(--ko-inq-red-deep);
	border: 1px solid var(--ko-inq-red-deep);
	padding: 10px 14px;
	margin: 8px;
	font-size: 14px;
}

/* the hidden payload proxy must never render (belt over the [hidden] attr;
   specificity, not !important — AGENTS §2) */
body.ko-inq button.ko-inq__proxy[hidden] { display: none; }

/* ---- override controls became <button>: neutralise UA button chrome so
   they render exactly like the spans/divs they replace (T4) ---- */
body.ko-inq button.xoo-wsc-cart-trigger,
body.ko-inq button.xoo-wsch-close,
body.ko-inq button.woocommerce-catalog-mode-popup-close {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	text-align: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* B2 polish 2 (operator, 2026-09-09): the 44px trigger box is ~20px wider
   than the icon it replaced, and between 1280 and 1399px viewport width
   (Bootstrap container-xl steps 1320 → 1140) that is exactly what overflows
   .header_middle_container (flex-wrap) — the icon wrapped onto a second
   header row (row 104 → 148px), and, because visitors get the stylesheet
   late, the header first laid out on one line and then jumped. Keep the
   44×44 hit area, give the box the icon's old layout footprint (margin
   compensation, as on the trash badge). Same selector as the reset above,
   later in the file, so it wins its margin:0. */
body.ko-inq button.xoo-wsc-cart-trigger {
	margin: 0 -10px;
}

/* the trash badge is DESIGNED in the xoo Custom CSS box
   (.xoo-wsc-smr-del.xoo-wsc-icon-trash — dark circle over the image); this
   tailored reset must not fight it: no background/padding/display of ours.
   The ≥44px target comes from a transparent border (hit area) with margin
   compensation, so the badge looks pixel-identical to the span it replaced. */
body.ko-inq button.xoo-wsc-smr-del {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	cursor: pointer;
	border: 11px solid transparent;
	background-clip: padding-box;
	margin: -11px;
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
	body.ko-inq .xoo-wsc-container,
	body.ko-inq .xoo-wsc-basket,
	body.ko-inq a.ko-inq__cta {
		transition: none;
	}
}