/*
 * Krugio C1: search panel and mobile menu look. Loads right after Base panel.css, on pages with panels.
 * Tokens only. Behaviour (open, Esc, focus return, scroll lock) is Base panel.js.
 */

/* On phones both panels leave a strip of the overlay visible, so a tap beside the panel closes it. */
.krugio-search-panel .krugio-panel__body,
.krugio-mobile-menu .krugio-panel__body {
	width: min(var(--krugio-drawer-width), 100% - var(--krugio-space-6));
}

/* ==========================================================================
   Search panel (right) and filter panel search group: field and joined submit button; close button top right
   ========================================================================== */

.krugio-search-panel .krugio-panel__body {
	padding: 1.5rem 1.25rem;
	background: var(--krugio-color-bg);
}

.krugio-search-panel .krugio-panel__close {
	position: absolute;
	inset-block-start: var(--krugio-space-2);
	inset-inline-end: var(--krugio-space-2);
	color: var(--krugio-color-primary);
}

/* Base sizes the inline header search by order and basis; inside the panel it is a plain row. */
.krugio-search-panel .krugio-search {
	order: 0;
	flex: none;
	margin-block-start: 2.75rem;
}

/* Field and submit button: one rule set for the header search panel and the filter panel search group, so the two cannot drift */
.krugio-search-panel .krugio-search__field,
.krugio-filters .krugio-search__field {
	height: 3rem;
	border-color: var(--krugio-color-border);
	background: var(--krugio-color-field-bg);
}

.krugio-search-panel .krugio-search__submit,
.krugio-filters .krugio-search__submit {
	min-width: 3rem;
	height: 3rem;
	padding: 0;
	background: var(--krugio-color-primary);
	color: var(--krugio-color-on-primary);
}

.krugio-search-panel .krugio-search__submit:hover,
.krugio-filters .krugio-search__submit:hover {
	background: var(--krugio-color-accent);
	color: var(--krugio-color-on-primary);
}

/* ==========================================================================
   Mobile menu (right): surface colour, "Meni" row, uppercase items without hairlines
   ========================================================================== */

.krugio-mobile-menu .krugio-panel__body {
	background: var(--krugio-color-surface);
}

.krugio-mobile-menu .krugio-panel__header {
	border-bottom-color: color-mix(in srgb, var(--krugio-color-primary) 20%, var(--krugio-color-surface));
}

.krugio-mobile-menu .krugio-panel__title {
	color: var(--krugio-color-primary);
	font-size: var(--krugio-font-size-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.krugio-mobile-menu .krugio-panel__close {
	color: var(--krugio-color-primary);
}

.krugio-mobile-menu .krugio-nav a {
	padding-block: 1rem;
	color: var(--krugio-color-primary);
	font-size: var(--krugio-font-size-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.krugio-mobile-menu .krugio-nav a:hover {
	color: var(--krugio-color-accent);
	text-decoration: underline;
}

/* Sub-levels: folded behind the toggle (Base). When open they are indented, normal case, smaller than level one. */
.krugio-mobile-menu .krugio-nav .sub-menu {
	padding-inline-start: var(--krugio-space-4);
}

.krugio-mobile-menu .krugio-nav .sub-menu a {
	padding-block: var(--krugio-space-3);
	font-size: var(--krugio-mobile-menu-sub-size);
	letter-spacing: normal;
	text-transform: none;
}

/* Toggle button (Base markup, 44 px target, at the end of the row): primary colour chevron, turns when open */
.krugio-mobile-menu .krugio-submenu-toggle {
	color: var(--krugio-color-primary);
}

.krugio-mobile-menu .krugio-submenu-toggle:hover {
	color: var(--krugio-color-accent);
}

/* ==========================================================================
   Mini-cart drawer (right): header, scrolling item list, pinned subtotal and buttons.
   Markup is Base's (template-parts/drawer/mini-cart.php, woocommerce_mini_cart()). Quantity and remove are AJAX
   (SPEC 5, 27 Oct 2026, Base KRG-81): the +/- group and the line total are styled in the "AJAX states" block below;
   without JavaScript Woo's "N x price" text and the plain remove link stay.
   ========================================================================== */

/* The panel body no longer scrolls as a whole: only the item list does */
.krugio-drawer .krugio-panel__body {
	overflow: hidden;
}

.krugio-drawer .krugio-panel__header {
	padding-block: var(--krugio-space-2);
	padding-inline: var(--krugio-space-4) var(--krugio-space-2);
}

.krugio-drawer .krugio-panel__title {
	color: var(--krugio-color-primary);
	font-size: var(--krugio-font-size-lg);
	font-weight: var(--krugio-weight-heading);
}

.krugio-drawer .krugio-panel__close {
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: var(--krugio-color-primary);
}

.krugio-drawer .krugio-panel__close:hover {
	color: var(--krugio-color-accent);
}

.krugio-drawer .krugio-drawer__content {
	min-height: 0;
	gap: 0;
	padding: 0 var(--krugio-space-4);
}

/* Item list: the only scrolling part */
.krugio-drawer .woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.krugio-drawer .woocommerce-mini-cart-item {
	padding-block: 0.875rem;
	padding-inline-end: 2.75rem;
}

.krugio-drawer .woocommerce-mini-cart-item a:not(.remove) {
	color: var(--krugio-color-primary);
	font-size: var(--krugio-font-size-base);
	font-weight: var(--krugio-weight-heading);
	line-height: 1.4;
}

.krugio-drawer .woocommerce-mini-cart-item a:not(.remove):hover {
	color: var(--krugio-color-accent);
	text-decoration: underline;
}

.krugio-drawer .woocommerce-mini-cart-item img {
	border-radius: var(--krugio-radius-card);
}

.krugio-drawer .woocommerce-mini-cart-item .variation,
.krugio-drawer .woocommerce-mini-cart-item .quantity {
	color: var(--krugio-color-text-muted);
	font-size: var(--krugio-font-size-sm);
}

.krugio-drawer .woocommerce-mini-cart-item .variation dt {
	font-weight: var(--krugio-weight-body);
}

/* Remove: a 2 rem bordered control (round with pill controls); the invisible ::before widens the hit area to 44 px */
.krugio-drawer .woocommerce-mini-cart-item a.remove {
	inset-block-start: 0.875rem;
	inset-inline-end: 0.375rem; /* keeps the 44 px hit area inside the scrolling list */
	width: 2rem;
	height: 2rem;
	border: var(--krugio-border-width) solid var(--krugio-color-border);
	border-radius: var(--krugio-radius-control);
	font-size: 1.25rem;
}

.krugio-drawer .woocommerce-mini-cart-item a.remove::before {
	content: "";
	position: absolute;
	inset: -0.375rem;
}

.krugio-drawer .woocommerce-mini-cart-item a.remove:hover {
	border-color: var(--krugio-color-error);
	color: var(--krugio-color-error);
	text-decoration: none;
}

/* Pinned bottom: subtotal row, then two stacked buttons */
.krugio-drawer .woocommerce-mini-cart__total {
	flex: none;
	align-items: baseline;
	padding-block: var(--krugio-space-4);
	border-top: var(--krugio-border-width) solid var(--krugio-color-border-subtle);
	font-size: var(--krugio-font-size-base);
}

.krugio-drawer .woocommerce-mini-cart__total strong {
	color: var(--krugio-color-primary);
	font-weight: var(--krugio-weight-heading);
}

.krugio-drawer .woocommerce-mini-cart__buttons {
	flex: none;
	gap: 0.75rem;
	padding-block-end: var(--krugio-space-4);
}

.krugio-drawer .woocommerce-mini-cart__buttons .krugio-button {
	width: 100%;
	min-height: 3rem;
}

/* Empty: centred muted message, the continue button below it */
.krugio-drawer .krugio-drawer__content:has(.woocommerce-mini-cart__empty-message) {
	align-items: center;
	justify-content: center;
	padding-block: var(--krugio-space-6);
	text-align: center;
}

.krugio-drawer .woocommerce-mini-cart__empty-message {
	margin-block-end: var(--krugio-space-4);
}

/* ==========================================================================
   AJAX states of the drawer (KRG-82). Base ships the markup and the behaviour (hidden until html.krugio-cart-ajax):
   line = thumbnail, name + variation, then a row with the +/- group (start) and the price of the whole line (end);
   the remove X stays at the top right. The +/- unit is the shared Base component styled once in quantity.css (KRG-91).
   ========================================================================== */

.krugio-drawer .woocommerce-mini-cart-item .krugio-drawer-qty-row {
	margin-block-start: var(--krugio-space-3);
}

.krugio-drawer .krugio-drawer-line-total {
	margin-inline-start: auto;
}

/* One price look for the line totals and the drawer total amount (KRG-93), so they cannot drift apart */
.krugio-drawer .krugio-drawer-line-total,
.krugio-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount {
	color: var(--krugio-color-text);
	font-size: var(--krugio-font-size-base);
	font-variant-numeric: tabular-nums;
	font-weight: var(--krugio-weight-heading);
}

/* A request is running: the list is dimmed (opacity only, so nothing moves) and every control shows the progress cursor */
.krugio-drawer__lines > * {
	transition: opacity var(--krugio-transition);
}

.krugio-drawer__lines[aria-busy="true"] > * {
	opacity: var(--krugio-busy-opacity);
}

.krugio-drawer .krugio-drawer__lines[aria-busy="true"] :is(button, a) {
	cursor: progress;
}

/* Error line at the top of the drawer content: the C1 error notice (surface bar, error start line), full width */
.krugio-drawer .krugio-cart-error {
	margin: var(--krugio-space-3) 0;
	padding: 0.875rem 1.25rem;
	border: 0;
	border-inline-start: 4px solid var(--krugio-color-error);
	border-radius: var(--krugio-radius-box);
	background: var(--krugio-color-surface);
	color: var(--krugio-color-text);
	font-size: var(--krugio-font-size-base);
	overflow-wrap: anywhere;
}