/*
Theme Name: Kiber Kontroll
Description: Kiber Kontroll child theme, built on Hello Elementor, following design_guide.md.
Author: Kiber Kontroll
Template: hello-elementor
Version: 1.0.0
Text Domain: cc-theme
*/

:root {
	--kk-blue: #1115e4;
	--kk-teal: #00cccc;
	--kk-green: #13eb60;
	--kk-red: #eb1b13;
	--kk-aqua: #00ffff;
	--kk-sky: #0d86ff;
	--kk-dark: #0a0a1a;
	--kk-text: #1a1a1a;
	--kk-font-head: 'Maven Pro', sans-serif;
	--kk-font-body: 'Fira Sans', sans-serif;

	/* design-system.md §12 - neutral scale, radius scale, component spacing, shadows, gradient.
	   Not in design_guide.md (brand-level doc) - these are UI-system-only extensions. */
	--kk-gray-50: #f7f8fa;
	--kk-gray-100: #eef0f4;
	--kk-gray-300: #d0d3dc;
	--kk-gray-500: #8a8f9c;
	--kk-gray-700: #4a4e5a;
	--kk-gray-900: #1a1a1a;
	--kk-amber: #ffb020;

	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;

	--shadow-card: 0 2px 8px rgba(10, 10, 26, 0.06);
	--shadow-focus: 0 0 0 3px rgba(13, 134, 255, 0.15);
	--kk-gradient: linear-gradient(135deg, #0a0a1a 0%, #1115e4 45%, #00cccc 80%, #00ffff 100%);
}

/* design-system.html's own foundational reset - a width:100% + padded element (e.g.
   .cc-services-cta) needs this or its padding pushes it past its container's edge. hello-
   elementor's own style.css carries no rules at all (Elementor's separately-enqueued frontend
   CSS may or may not cover this for non-Elementor-widget markup), so don't rely on inheriting
   it - cc-theme owns this explicitly. */
* {
	box-sizing: border-box;
}

/* Branded text selection - also fixes a real contrast bug: kk-blue link text (e.g. WooCommerce
   order-number links) selected with the browser's own default selection color could land close
   to kk-blue-on-kk-blue and become unreadable. Any element with a kk-blue background should
   pair it with white text - this is the one we don't control via our own markup. */
::selection {
	background: var(--kk-blue);
	color: #fff;
}

body {
	font-family: var(--kk-font-body);
	color: var(--kk-text);
	/* mobile Chrome's default tap-highlight is a translucent blue overlay - on kk-blue link
	   text specifically that can read as "text only visible while actively tapped" (blue-ish
	   overlay over blue text mid-tap). Not confirmed as the cause of the reported issue, but a
	   real, safe thing to rule out - couldn't reproduce it in desktop/mobile-width static
	   testing, so flagging this as a defensive fix rather than a confirmed root cause. */
	-webkit-tap-highlight-color: transparent;
}

/* Links: KK Blue, KK Sky on hover (design-system.md §1, design_guide.md §2). Overrides
   hello-elementor's reset.css "a { color: #c36 }" - without this, every link not styled by a more
   specific rule (e.g. the privacy link in the contact form) showed the parent theme's pink-red.

   Link colour comes from two inherited variables, never from per-component link rules:
   a dark/gradient surface sets --cc-link / --cc-link-hover once on its container and every
   plain link inside it (also inside WooCommerce content) follows - no specificity fights.
   Buttons (.btn) are excluded from every generic link rule: their colours come only from
   their variant class (design-system.md §5.4). */
:root {
	--cc-link: var(--kk-blue);
	--cc-link-hover: var(--kk-sky);
}

a:where(:not(.btn)) {
	color: var(--cc-link);
}

a:where(:not(.btn)):hover,
a:where(:not(.btn)):focus {
	color: var(--cc-link-hover);
}

/* Dark surfaces: light links. Add a new dark component's container class here. */
.cc-hs--dark,
.cc-hs--gradient,
.cc-hs--blue,
.cc-account-dash__support {
	--cc-link: #fff;
	--cc-link-hover: var(--kk-aqua);
}

/* White cards that can sit on a dark section: back to the light-surface link colours. */
.cc-hs__feature,
.cc-hs__faq,
.cc-hs__form-card,
.cc-hs__value,
.cc-hs__testimonial {
	--cc-link: var(--kk-blue);
	--cc-link-hover: var(--kk-sky);
}

/* In-text links inside forms (e.g. "I accept the Privacy Policy") must read as links. */
.wpcf7-form a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kk-font-head);
	font-weight: 700;
}

/* design-system.md §3 - eyebrow/kicker, sits above a heading or (§9) a card's title slot. */
.eyebrow {
	font-family: var(--kk-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kk-teal);
	margin-bottom: var(--space-2);
	display: block;
}

/* design-system.md §5 - button base + variants. .btn is the shared base (layout/sizing);
   variant classes (.btn-primary etc.) only add color/border, matching design-system.html's
   pattern exactly so this file and that living style guide never drift apart. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--kk-font-body);
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	border: none;
	height: 44px;
	padding: 0 24px;
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* hello-elementor's theme.css underlines every link in page content (".page-content a",
   specificity 0,1,1 - more than .btn): a button is never underlined, in any state. */
a.btn,
.page-content a.btn,
.page-content a.btn:hover,
.page-content a.btn:focus {
	text-decoration: none;
}

.btn:active {
	transform: scale(0.98);
}

.btn:focus-visible {
	outline: 2px solid var(--kk-sky);
	outline-offset: 2px;
}

.btn-sm {
	height: 36px;
	padding: 0 16px;
	font-size: 14px;
}

.btn-lg {
	height: 56px;
	padding: 0 32px;
	font-size: 18px;
}

.btn-primary {
	background: var(--kk-blue);
	color: #fff;
}

.btn-primary:hover {
	background: #0d0fbd;
}

/*
 * Same gradient look as the newsletter's .thm-btn--gradient (blue -> teal, 90deg) - not the
 * darker 4-stop --kk-gradient, which read as visually mismatched next to it. The hover effect
 * is a crossfade to the reverse-orientation gradient via an ::before layer, not an animated
 * background-position - gradient position/angle changes don't reliably transition smoothly
 * across browsers (it was visibly snapping instead of easing), opacity always does.
 */
.btn-cta {
	position: relative;
	z-index: 0;
	background: linear-gradient(90deg, var(--kk-blue) 0%, var(--kk-teal) 100%);
	color: #fff;
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.btn-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(270deg, var(--kk-blue) 0%, var(--kk-teal) 100%);
	opacity: 0;
	transition: opacity 0.6s ease;
}

.btn-cta:hover::before {
	opacity: 1;
}

.btn-secondary {
	background: transparent;
	color: var(--kk-blue);
	border: 2px solid var(--kk-blue);
	height: 40px;
}

.btn-success {
	background: var(--kk-green);
	color: var(--kk-blue);
}

.btn-danger {
	background: var(--kk-red);
	color: #fff;
}

.btn-ghost {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	height: 40px;
}

/*
 * Hover / focus keep each variant's own colours. Two rules from outside would otherwise win:
 * the global "a:hover { color: KK Sky }" above (recoloured the text of <a class="btn-cta">), and
 * hello-elementor's reset.css "button:hover, button:focus { background:#c36; color:#fff }"
 * (pink fill on every <button class="btn ...">). Every button - <a> or <button> - uses .btn +
 * a variant class; no per-component button colours (see design-system.md §5.4).
 */
.btn-primary:hover,
.btn-primary:focus {
	background: #0d0fbd;
	color: #fff;
}

.btn-cta:hover,
.btn-cta:focus {
	background: linear-gradient(90deg, var(--kk-blue) 0%, var(--kk-teal) 100%);
	color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
	background: transparent;
	color: var(--kk-sky);
	border-color: var(--kk-blue);
}

.btn-success:hover,
.btn-success:focus {
	background: var(--kk-green);
	color: var(--kk-blue);
}

.btn-danger:hover,
.btn-danger:focus {
	background: var(--kk-red);
	color: #fff;
}

.btn-ghost:hover,
.btn-ghost:focus {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: #fff;
}

.btn:disabled, .btn-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Header — logo, real WP nav menu ('main-menu' location), CTA */
.cc-header {
	/* Sticky: stays visible while scrolling; .is-scrolled (set by header.php's script) shrinks
	   the logo + padding. Offset by the admin bar's height when logged in (0 otherwise). */
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
	transition: box-shadow .3s ease;
}

.cc-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.cc-header__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	transition: padding .3s ease;
}

.cc-header.is-scrolled .cc-header__container {
	padding-top: 12px;
	padding-bottom: 12px;
}

.cc-header__logo {
	flex-shrink: 0;
}

.cc-header__logo img {
	/* kk_logo.svg's root <svg> has a viewBox but no width/height attributes of its own, so it
	   has no intrinsic size for the browser to derive from - plain width:auto/max-height
	   collapsed to 0x0. aspect-ratio (from that viewBox: 841.09x344.78) fixes that regardless of
	   the file's own missing intrinsic size. Explicit height (not max-height) + width:auto is
	   also what actually constrains the render width - the previous max-height-only rule let the
	   browser fall back to wp_get_attachment_image()'s native width="841" HTML attribute on some
	   viewports, which is what forced the whole page to overflow horizontally on mobile. */
	height: 84px;
	width: auto;
	aspect-ratio: 841.09 / 344.78;
	max-width: 100%;
	display: block;
	transition: height .3s ease;
}

.cc-header.is-scrolled .cc-header__logo img {
	height: 44px;
}

.cc-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.cc-header__menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin: 0;
	padding: 0;
}

.cc-header__menu a {
	color: var(--kk-text);
	text-decoration: none;
	font-family: var(--kk-font-body);
	font-weight: 500;
	font-size: 16px;
}

.cc-header__menu a:hover {
	color: var(--kk-blue);
}

.cc-header__cta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cc-header__cta .btn-cta {
	height: 40px;
	padding: 0 22px;
	font-size: 15px;
}

.cc-header__cta .btn-secondary {
	height: 40px;
	padding: 0 18px;
	font-size: 15px;
}

/* Hamburger (mobile only) */
.cc-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md, 8px);
	background: transparent;
	color: var(--kk-text);
	cursor: pointer;
}

.cc-header__toggle:hover,
.cc-header__toggle:focus {
	background: var(--kk-gray-50, #f7f8fa);
	color: var(--kk-text);
}

.cc-header__toggle-bars {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 18px;
	transform: translate(-50%, -50%);
}

.cc-header__toggle-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

.cc-header__toggle-bars span:nth-child(1) { top: 0; }
.cc-header__toggle-bars span:nth-child(2) { top: 8px; }
.cc-header__toggle-bars span:nth-child(3) { top: 16px; }

.cc-header.is-open .cc-header__toggle-bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.cc-header.is-open .cc-header__toggle-bars span:nth-child(2) { opacity: 0; }
.cc-header.is-open .cc-header__toggle-bars span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/*
 * Mobile: logo left, hamburger right; nav + CTA are hidden until the toggle opens them as a
 * full-width panel under the header row (no horizontal page overflow).
 */
@media (max-width: 900px) {
	.cc-header__container {
		flex-wrap: wrap;
		gap: 0;
		padding: 14px 20px;
	}

	.cc-header__logo img {
		height: 56px;
	}

	.cc-header.is-scrolled .cc-header__container {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.cc-header.is-scrolled .cc-header__logo img {
		height: 38px;
	}

	.cc-header__toggle {
		display: block;
		margin-left: auto;
	}

	.cc-header__nav,
	.cc-header__cta {
		display: none;
		flex: 1 1 100%;
	}

	.cc-header.is-open .cc-header__nav {
		display: block;
		margin-top: 12px;
		padding-top: 8px;
		border-top: 1px solid #f0f0f0;
	}

	.cc-header.is-open .cc-header__menu {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-end;
		gap: 0;
	}

	.cc-header.is-open .cc-header__menu a {
		display: block;
		padding: 12px 4px;
		font-size: 17px;
		text-align: right;
	}

	.cc-header.is-open .cc-header__cta {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 12px;
		padding: 12px 0 8px;
	}
}

/*
 * Footer — Kiber Kontroll > Footer admin content.
 *
 * Values below marked "original" are pulled directly from the removed helax theme's compiled
 * main.css (still kept locally in wordpress_website/themes/helax even though deleted from the
 * live server) - not estimated. The one exception is the newsletter gradient button color:
 * the original used CSS custom properties (--gradient-color-from/-to) that were overridden at
 * runtime by helax's own Customizer/theme-options PHP, now gone with the theme - so the exact
 * original hex values aren't recoverable from static files. Using the KK brand blue->teal
 * gradient instead (design_guide.md), which visually matches the reference screenshot closely.
 */
.cc-footer {
	background: #1f2123; /* original: --color-dark-2 */
	color: #fff;
	padding-top: 64px;
	font-family: var(--kk-font-body);
}

.cc-footer a {
	color: #fff;
}

.cc-footer__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

.cc-footer__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center; /* original: text block and form are vertically centered against each other, side by side - not stacked */
	gap: 32px;
	margin-bottom: 80px; /* original: .footer__cta-area margin-bottom */
	padding-bottom: 80px; /* original: .footer__cta-area padding-bottom */
	border-bottom: 1px solid #2a2c2f; /* original: .footer__cta-area border-bottom */
}

.cc-footer__newsletter {
	flex: 1 1 420px;
	max-width: 480px;
}

.cc-footer__newsletter-form {
	flex: 1 1 420px;
	display: flex;
	/* column: the form on top, the privacy/unsubscribe note (.cc-footer__consent) under it */
	flex-direction: column;
	align-items: flex-end;
}

/* "By subscribing you accept our Privacy Policy" line under the newsletter form */
.cc-footer__consent {
	margin: var(--space-3) 0 0;
	text-align: right;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

.cc-footer__consent a {
	color: #fff;
	text-decoration: underline;
}

.cc-footer__consent a:hover {
	color: var(--kk-aqua);
}

.cc-footer__eyebrow {
	display: block;
	color: #b3b9c2; /* original: .footer__cta .title */
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 15px;
}

.cc-footer__newsletter h4 {
	font-size: 16px; /* original: .footer__cta h4 */
	color: #fff;
	line-height: 30px;
	margin: 0;
}

/*
 * Contact Form 7's newsletter form — reusing its existing thm-btn/br-5 classes (still present
 * in form 810's content). One white rounded pill (input + button together), teal left accent
 * bar, button is its own inset rounded-full gradient pill.
 */
.cc-footer .wpcf7-form,
.cc-hero__form .wpcf7-form,
.cc-hs__cta-form .wpcf7-form {
	display: flex;
	/* explicit, not relying on the default - the generic .wpcf7-form base rule now sets
	   flex-direction:column (for the stacked contact-form layout's field/error/submit
	   ordering), which would otherwise leak into this single-line pill layout too. */
	flex-direction: row;
	align-items: stretch;
	background: #fff;
	border-radius: 999px;
	border-left: 4px solid var(--kk-teal);
	/* not overflow:hidden - the input's own background is transparent so nothing needs clipping
	   to preserve the pill shape, and overflow:hidden here would also clip .wpcf7-response-output
	   below (position:absolute doesn't escape an ancestor's overflow:hidden, regardless of which
	   further-up ancestor it's positioned relative to). */
	position: relative;
	max-width: 480px;
}

.cc-footer .wpcf7-form .wpcf7-form-control-wrap,
.cc-hero__form .wpcf7-form .wpcf7-form-control-wrap,
.cc-hs__cta-form .wpcf7-form .wpcf7-form-control-wrap {
	flex: 1;
	display: flex;
	/* the input has no vertical padding (see that rule) and sizes to its own natural height,
	   so this centers it within the wrap's full stretched height - matching how the pill
	   button next to it centers its own text, instead of approximating via input padding. */
	align-items: center;
	position: relative;
	/* explicit 0 - the generic .wpcf7-form-control-wrap rule (stacked contact-form spacing)
	   sets margin-bottom, which would otherwise leak into this flex row's cross-axis sizing. */
	margin-bottom: 0;
}

/*
 * CF7's validation tip is a plain flex child of .wpcf7-form-control-wrap by default, so it was
 * competing for space with the input (which has flex:1) - the input got flex-shrunk toward 0
 * and the error text visually replaced it. Taking the tip out of flow entirely and floating it
 * as its own bubble above the input, like a tooltip - above (not below, like
 * .wpcf7-response-output) so the two error bubbles never land in the same spot and overlap. */
.cc-footer .wpcf7-form .wpcf7-not-valid-tip,
.cc-hero__form .wpcf7-form .wpcf7-not-valid-tip,
.cc-hs__cta-form .wpcf7-form .wpcf7-not-valid-tip {
	position: absolute;
	/* explicit top/right:auto - the generic .wpcf7-not-valid-tip rule below (used by the
	   stacked contact-form) sets top:0/right:0/text-align:right; without overriding those here
	   too, having both top+bottom (or left+right) non-auto on an absolutely-positioned element
	   stretches it to satisfy both instead of sizing to content, distorting this bubble. */
	top: auto;
	right: auto;
	bottom: calc(100% + 10px);
	left: 0;
	text-align: left;
	background: #fff;
	color: var(--kk-red);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	padding: 8px 14px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	max-width: 260px;
	white-space: normal;
	z-index: 10;
}

.cc-footer .wpcf7-not-valid-tip::before,
.cc-hero__form .wpcf7-not-valid-tip::before,
.cc-hs__cta-form .wpcf7-not-valid-tip::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 20px;
	border: 6px solid transparent;
	border-top-color: #fff;
}

/*
 * The answer (CF7's .wpcf7-response-output) is an overlay covering the pill exactly - same
 * box, same rounding (border-radius: inherit, so the stacked phone card matches too).
 * assets/js/newsletter-pill.js drives it: when the answer arrives the button's spinner turns
 * into a solid white dot, and this white layer grows out of that dot as a circle
 * (clip-path, centre --cc-pill-x/y, final radius --cc-pill-r = farthest corner) - clipped to
 * the pill's own box/rounding, so it never spills over. The status icon appears on the dot
 * (offset --cc-pill-dx/dy from its own slot), slides left into its slot once the circle is
 * full, then the text fades in.
 * .cc-pill-msg = shown (10 s, or until clicked), .cc-pill-out = fading away.
 * !important where CF7's own stylesheet (loaded after ours) sets margin/border.
 */
.cc-footer .wpcf7-form .wpcf7-response-output,
.cc-hero__form .wpcf7-form .wpcf7-response-output,
.cc-hs__cta-form .wpcf7-form .wpcf7-response-output {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	border: none !important;
	border-radius: inherit !important; /* the generic .wpcf7-form rule sets --radius-md !important */
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 28px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: transparent;
	cursor: pointer;
	z-index: 10;
	visibility: hidden;
	clip-path: circle(var(--cc-pill-r0, 9px) at var(--cc-pill-x, 100%) var(--cc-pill-y, 50%));
}

.cc-footer .wpcf7-form.cc-pill-msg .wpcf7-response-output,
.cc-hero__form .wpcf7-form.cc-pill-msg .wpcf7-response-output,
.cc-hs__cta-form .wpcf7-form.cc-pill-msg .wpcf7-response-output {
	visibility: visible;
	clip-path: circle(var(--cc-pill-r, 150%) at var(--cc-pill-x, 100%) var(--cc-pill-y, 50%));
	color: var(--kk-red);
	transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s ease 0.95s;
}

.cc-footer .wpcf7-form.cc-pill-out .wpcf7-response-output,
.cc-hero__form .wpcf7-form.cc-pill-out .wpcf7-response-output,
.cc-hs__cta-form .wpcf7-form.cc-pill-out .wpcf7-response-output {
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* status icon (Font Awesome 5, enqueued in functions.php): exclamation by default. Starts on
   the white dot (scaled to the dot's size), slides into its slot after the circle has grown. */
.cc-footer .wpcf7-form .wpcf7-response-output::before,
.cc-hero__form .wpcf7-form .wpcf7-response-output::before,
.cc-hs__cta-form .wpcf7-form .wpcf7-response-output::before {
	content: "\f06a";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 22px;
	width: 22px;
	text-align: center;
	flex-shrink: 0;
	transform: translate(var(--cc-pill-dx, 0), var(--cc-pill-dy, 0)) scale(0.8);
}

.cc-footer .wpcf7-form.cc-pill-msg .wpcf7-response-output::before,
.cc-hero__form .wpcf7-form.cc-pill-msg .wpcf7-response-output::before,
.cc-hs__cta-form .wpcf7-form.cc-pill-msg .wpcf7-response-output::before {
	color: var(--kk-red);
	transform: none;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.55s;
}

/* success (design-system.md §6 toast): green check-circle, dark text - --kk-green as text
   on white is ~1.6:1, unreadable */
.cc-footer .wpcf7-form.sent.cc-pill-msg .wpcf7-response-output,
.cc-hero__form .wpcf7-form.sent.cc-pill-msg .wpcf7-response-output,
.cc-hs__cta-form .wpcf7-form.sent.cc-pill-msg .wpcf7-response-output {
	color: var(--kk-text);
}

.cc-footer .wpcf7-form.sent .wpcf7-response-output::before,
.cc-hero__form .wpcf7-form.sent .wpcf7-response-output::before,
.cc-hs__cta-form .wpcf7-form.sent .wpcf7-response-output::before {
	content: "\f058";
}

.cc-footer .wpcf7-form.sent.cc-pill-msg .wpcf7-response-output::before,
.cc-hero__form .wpcf7-form.sent.cc-pill-msg .wpcf7-response-output::before,
.cc-hs__cta-form .wpcf7-form.sent.cc-pill-msg .wpcf7-response-output::before {
	color: var(--kk-green);
}

@media (prefers-reduced-motion: reduce) {
	.cc-footer .wpcf7-form.cc-pill-msg .wpcf7-response-output,
	.cc-hero__form .wpcf7-form.cc-pill-msg .wpcf7-response-output,
	.cc-hs__cta-form .wpcf7-form.cc-pill-msg .wpcf7-response-output,
	.cc-footer .wpcf7-form.cc-pill-msg .wpcf7-response-output::before,
	.cc-hero__form .wpcf7-form.cc-pill-msg .wpcf7-response-output::before,
	.cc-hs__cta-form .wpcf7-form.cc-pill-msg .wpcf7-response-output::before {
		transition: none;
	}
}

/* sending: field greyed + read-only (JS), CF7's own spinner hidden, ours (a real element the
   JS puts in the button, so the overlay can grow out of its measured position) spins */
.cc-footer .wpcf7-form .wpcf7-spinner,
.cc-hero__form .wpcf7-form .wpcf7-spinner,
.cc-hs__cta-form .wpcf7-form .wpcf7-spinner {
	display: none;
}

.cc-footer .wpcf7-form.submitting input.wpcf7-text[type="email"],
.cc-hero__form .wpcf7-form.submitting input.wpcf7-text[type="email"],
.cc-hs__cta-form .wpcf7-form.submitting input.wpcf7-text[type="email"] {
	opacity: 0.45;
	cursor: progress;
}

.cc-footer .wpcf7-form.submitting .thm-btn,
.cc-hero__form .wpcf7-form.submitting .thm-btn,
.cc-hs__cta-form .wpcf7-form.submitting .thm-btn {
	cursor: progress;
}

.cc-pill-spinner {
	flex-shrink: 0;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin-left: 10px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cc-spin 0.8s linear infinite;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* answer arrived: the ring fills up into the white dot the overlay grows out of */
.cc-pill-spinner.is-full {
	background-color: #fff;
	border-color: #fff;
	animation: none;
}

@keyframes cc-spin {
	to {
		transform: rotate(360deg);
	}
}

.cc-footer input.wpcf7-text[type="email"],
.cc-hero__form input.wpcf7-text[type="email"],
.cc-hs__cta-form input.wpcf7-text[type="email"] {
	background: transparent;
	border: none;
	color: var(--kk-text);
	/* horizontal only - vertical centering comes from the wrap's align-items:center (above),
	   not padding math, so it stays correct regardless of the pill's actual stretched height. */
	padding: 0 20px;
	/* explicit auto - the generic .wpcf7-form input[type=email] rule (stacked contact-form)
	   sets height:48px, which nothing here was overriding (only padding was), so it was
	   winning uncontested and forcing this input - and the wrap stretching around it - to a
	   fixed 48px instead of the pill row's real (taller) height, breaking vertical centering. */
	height: auto;
	font-family: var(--kk-font-body);
	font-size: 15px;
	flex: 1;
	min-width: 0;
	outline: none;
}

.cc-footer input.wpcf7-text[type="email"]:focus,
.cc-hero__form input.wpcf7-text[type="email"]:focus,
.cc-hs__cta-form input.wpcf7-text[type="email"]:focus {
	/* the generic .wpcf7-form input:focus rule (stacked contact-form) sets a border+glow that
	   isn't scoped away from this pill context by anything else - explicit override here. */
	border-color: transparent;
	box-shadow: none;
}

.cc-footer input.wpcf7-text[type="email"]::placeholder,
.cc-hero__form input.wpcf7-text[type="email"]::placeholder,
.cc-hs__cta-form input.wpcf7-text[type="email"]::placeholder {
	color: #888;
}

.cc-footer .thm-btn,
.cc-hero__form .thm-btn,
.cc-hs__cta-form .thm-btn {
	display: inline-flex;
	align-items: center;
	border: none;
	cursor: pointer;
	/* same typography as .btn/.btn-cta (Fira Sans/500/16px) - this used to be Maven Pro/700/15px,
	   a visibly different font from the header CTA even after their gradients were unified. */
	font-family: var(--kk-font-body);
	font-weight: 500;
	font-size: 16px;
	padding: 14px 26px;
	color: #fff;
	margin: 4px;
	white-space: nowrap;
}

.cc-footer .thm-btn.br-5,
.cc-hero__form .thm-btn.br-5,
.cc-hs__cta-form .thm-btn.br-5 {
	border-radius: 999px;
}

/* same opacity-crossfade hover as .btn-cta (see that rule's comment) - this button had no
   hover effect of its own at all before. Text color is untouched throughout (stays white),
   only the background layer underneath it fades. */
.cc-footer .thm-btn--gradient,
.cc-hero__form .thm-btn--gradient,
.cc-hs__cta-form .thm-btn--gradient {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: linear-gradient(90deg, var(--kk-blue) 0%, var(--kk-teal) 100%);
}

.cc-footer .thm-btn--gradient::before,
.cc-hero__form .thm-btn--gradient::before,
.cc-hs__cta-form .thm-btn--gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(270deg, var(--kk-blue) 0%, var(--kk-teal) 100%);
	opacity: 0;
	transition: opacity 0.6s ease;
}

.cc-footer .thm-btn--gradient:hover::before,
.cc-hero__form .thm-btn--gradient:hover::before,
.cc-hs__cta-form .thm-btn--gradient:hover::before {
	opacity: 1;
}

/*
 * Newsletter pill on phones: the single-row pill squeezed the input to almost nothing (the
 * button text never wraps). Stacked instead - the white card holds a full-width input on top
 * and the button at the bottom, the white part extending above the button.
 */
@media (max-width: 600px) {
	.cc-footer .wpcf7-form,
	.cc-hero__form .wpcf7-form,
	.cc-hs__cta-form .wpcf7-form {
		flex-direction: column;
		border-radius: 20px;
		padding: 6px;
		max-width: none;
	}

	.cc-footer .wpcf7-form .wpcf7-form-control-wrap,
	.cc-hero__form .wpcf7-form .wpcf7-form-control-wrap,
	.cc-hs__cta-form .wpcf7-form .wpcf7-form-control-wrap {
		min-height: 52px;
	}

	.cc-footer input.wpcf7-text[type="email"],
	.cc-hero__form input.wpcf7-text[type="email"],
	.cc-hs__cta-form input.wpcf7-text[type="email"] {
		width: 100%;
		height: 52px;
		padding: 0 14px;
		font-size: 16px; /* 16px+: iOS does not zoom in on focus */
	}

	.cc-footer .thm-btn,
	.cc-hero__form .thm-btn,
	.cc-hs__cta-form .thm-btn {
		justify-content: center;
		width: 100%;
		margin: 0;
		white-space: normal;
		text-align: center;
	}

	.cc-footer__newsletter-form {
		flex-basis: 100%;
		align-items: stretch;
	}

	.cc-footer__consent {
		text-align: left;
	}
}

.cc-footer__columns {
	display: grid;
	/* single column by default - see the min-width:1140px block below for why this isn't
	   auto-fit(minmax(180px,1fr)) at every width. */
	grid-template-columns: 1fr;
	gap: 40px;
	padding-bottom: 48px;
}

/*
 * 1140px = 5*180px columns + 4*40px gaps (1060px) + the container's 64px horizontal padding,
 * with a little slack - the minimum width where all 5 footer columns genuinely fit in one row.
 * Below that, explicit repeat(5, ...) - not auto-fit - would just shrink all 5 columns below
 * their 180px min and force the row too wide/cramped; auto-fit(minmax(180,1fr)) is worse: at
 * these in-between widths it computes 2-4 tracks, and since there are exactly 5 items (odd,
 * doesn't divide evenly into 2, 3, or 4), the last row always left one or more cells empty -
 * that's what was showing up as a stray block of blank space next to the last (payment) column
 * on medium/tablet-width views. repeat(5, ...) - a fixed count, not auto-computed - guarantees
 * exactly 5 tracks for exactly 5 items, so there's no track count left to get wrong.
 */
@media (min-width: 1140px) {
	.cc-footer__columns {
		grid-template-columns: repeat(5, minmax(180px, 1fr));
	}
}

.cc-footer__column h3 {
	font-size: 16px; /* original: .footer__widget .widget-title */
	font-family: var(--kk-font-head);
	text-transform: uppercase;
	margin: 0 0 30px;
}

.cc-footer__column p {
	font-size: 16px;
	line-height: 1.7;
	color: #b3b9c2; /* original: .footer-style-one .footer__widget ul li a */
	margin: 0;
}

.cc-footer__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-footer__column li {
	margin-bottom: 9px; /* original */
}

.cc-footer__column li a {
	font-size: 16px;
	color: #b3b9c2; /* original: .footer-style-one .footer__widget ul li a */
	text-decoration: none;
}

.cc-footer__column li a:hover {
	color: #fff; /* original hover */
	text-decoration: underline;
}

.cc-footer__payment h3 {
	white-space: nowrap;
}

.cc-footer__payment {
	/* let this column grow to its content's real width (badges row) instead of being clamped to
	   the grid track's ~195px share - see .cc-footer__payment-badges' width comment. */
	min-width: max-content;
}

.cc-footer__revolut-logo {
	display: inline-block;
	margin-bottom: 12px;
}

.cc-footer__revolut-logo svg {
	/* original: the wordmark's width matches the payment-badges row's rendered (max-content)
	   width below it - not an arbitrary/smaller size. Measured directly (not calculated), since
	   the badges row's true width depends on the exact icon assets/gap/padding in use above. */
	width: 207px;
	height: auto;
	display: block;
}

.cc-footer__payment-badges {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border-radius: 10px;
	padding: 8px 12px;
	margin-top: 12px;
	/* max-content, not fit-content: fit-content clamps to the grid column's ~195px track width,
	   which is narrower than the 5 badges' natural content width (~207px) - that clamping was
	   silently shrinking/crowding the row regardless of gap/padding tuning. max-content sizes to
	   the row's real content width and lets it overflow the column, which is fine - it's the
	   last column, nothing sits to its right. */
	width: max-content;
}

.cc-footer__payment-badges img {
	height: 20px;
	width: auto;
	display: block;
}

.cc-footer__copyright {
	background: linear-gradient(135deg, var(--kk-dark) 0%, var(--kk-blue) 45%, var(--kk-teal) 80%, var(--kk-aqua) 100%);
	padding: 20px 0;
}

.cc-footer__copyright .cc-footer__container {
	color: #fff;
	text-transform: uppercase; /* original: .footer__copyright-text */
	font-size: 14px;
	font-weight: 500;
}

/*
 * Services bundle — [cc_services_bundle] shortcode, page 859. Uses the design-system.md §9.1 /
 * design-system.html #cards "price-card" pattern exactly (illu image → eyebrow → price →
 * feature list → CTA), with the real product featured images (WooCommerce, not a generic
 * illustration-pack scene - see design-system.md §9.1's note on this) and the real shared
 * 6-feature tick/cross list this site already tracks per tier.
 */
.cc-services-bundle {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* align-items:center, exactly matching design-system.html's price-card row (its own inline
	   style, not part of the shared .grid/.grid-3 classes) - each card sized to its own natural
	   content, centered against the row. No stretch, no manual per-card offset/scale hack. */
	align-items: center;
	gap: var(--space-6);
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 16px;
}

@media (max-width: 900px) {
	.cc-services-bundle {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.cc-services-bundle {
		grid-template-columns: 1fr;
	}
}

.cc-services-tier.price-card {
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.cc-services-tier.price-card.featured {
	/* matches design-system.html's .price-card.featured exactly - no extra transform/margin
	   hack. Its own natural extra height (top-bar + border, on top of the same 6-item feature
	   list every tier now shows) is what makes it pop under align-items:center above. */
	border: 2px solid var(--kk-blue);
	position: relative;
}

.cc-services-tier.price-card.featured .top-bar {
	height: 6px;
	background: var(--kk-gradient);
	border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}

.cc-services-tier.price-card.featured .badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--kk-gradient);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}

.cc-services-tier .illu {
	background: var(--kk-gray-50);
	padding: var(--space-6) var(--space-6) 0;
}

.cc-services-tier .illu img {
	height: 140px;
	margin: 0 auto;
	object-fit: contain;
}

.cc-services-tier .body {
	padding: var(--space-6);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.cc-services-tier .body > .eyebrow {
	color: var(--kk-blue);
}

.cc-services-price {
	font-family: var(--kk-font-head);
	font-weight: 800;
	font-size: 36px;
	color: var(--kk-blue);
	margin: var(--space-2) 0;
}

.cc-services-subheading {
	font-size: 14px;
	color: var(--kk-gray-700);
	margin: 0 0 var(--space-4);
}

.cc-services-features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
	flex: 1;
}

.cc-services-features li {
	padding: 6px 0;
	font-size: 14px;
	display: flex;
	gap: 8px;
	align-items: center;
}

.cc-feature-on i {
	color: var(--kk-green);
}

.cc-feature-off {
	opacity: 0.5;
}

.cc-feature-off i {
	color: var(--kk-red);
}

.cc-services-cta {
	width: 100%;
}

/* Package card: "per trained employee" under the price + headcount select above the button */
.cc-services-per {
	margin: -4px 0 var(--space-4);
	font-size: 14px;
	color: var(--kk-gray-500);
}

.cc-services-order {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: 100%;
}

.cc-services-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: 14px;
	font-weight: 500;
	color: var(--kk-gray-700);
}

.cc-services-qty select {
	width: 84px;
	height: 40px;
	padding: 0 var(--space-3);
	border: 1.5px solid var(--kk-gray-300);
	border-radius: var(--radius-md);
	background: #fff;
	font-family: var(--kk-font-body);
	font-size: 16px;
	color: var(--kk-gray-900);
}

.cc-services-qty select:focus {
	outline: none;
	border-color: var(--kk-sky);
	box-shadow: var(--shadow-focus);
}

/* design-system.md §8 - callouts/info boxes. Used above the services price-card row for
   tier-specific asides (e.g. a launch-fee waiver) that used to live inside the card itself. */
.callout {
	border-left: 4px solid;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--space-4) var(--space-6);
	margin-bottom: var(--space-4);
}

.callout h4 {
	font-size: 16px;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.callout p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--kk-gray-900);
}

.callout.tip {
	border-color: var(--kk-teal);
	background: rgba(0, 204, 204, 0.06);
}

.callout.tip h4 {
	color: #007a7a;
}

.callout.note {
	border-color: var(--kk-blue);
	background: rgba(17, 21, 228, 0.05);
}

.callout.note h4 {
	color: var(--kk-blue);
}

.callout.warning {
	border-color: var(--kk-amber);
	background: rgba(255, 176, 32, 0.08);
}

.callout.warning h4 {
	color: #a56400;
}

.callout.danger {
	border-color: var(--kk-red);
	background: rgba(235, 27, 19, 0.06);
}

.callout.danger h4 {
	color: var(--kk-red);
}

.cc-services-callouts {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Mobile footer refinements - column headings a bit larger, Revolut logo bigger, payment
   badges stretched full-width with the icons evenly spread instead of packed at content width. */
@media (max-width: 1139px) {
	.cc-footer__column h3 {
		font-size: 20px;
	}

	.cc-footer__revolut-logo svg {
		width: 247px; /* 290px - 15% */
	}

	.cc-footer__payment-badges {
		width: 100%;
		justify-content: space-between;
	}
}

/* ==========================================================================
   Page hero (design-system.html's #hero pattern) - used by page-my-account.php,
   available for reuse on other page templates.
   ========================================================================== */
.cc-hero {
	background: var(--kk-gradient);
	color: #fff;
	padding: 140px 0 96px;
	position: relative;
	overflow: hidden;
}

.cc-hero__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	position: relative;
	z-index: 2;
}

.cc-hero h1 {
	font-size: clamp(36px, 4.5vw, 56px);
	line-height: 1.15;
	color: #fff;
	margin: 0;
}

.cc-hero__lead {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 640px;
	margin: 16px 0 0;
}

.cc-hero .hero-wedge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	background: #fff;
	clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%);
	z-index: 1;
	pointer-events: none;
}

/* compact: dashboard/account pages with their own left-side nav - a full hero would push
   real content too far down. */
.cc-hero--compact {
	padding: 64px 0 40px;
}

.cc-hero--compact h1 {
	font-size: clamp(28px, 3.5vw, 40px);
}

.cc-hero--compact .hero-wedge {
	height: 32px;
	clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 640px) {
	.cc-hero {
		padding: 100px 0 64px;
	}

	.cc-hero--compact {
		padding: 48px 0 32px;
	}
}

/* ==========================================================================
   WooCommerce - brand override (design-system.md). WooCommerce's own stylesheet defines its
   palette as CSS custom properties at :root (--wc-primary, --wc-form-border-color, etc.) -
   redefining the same variable names here (this file loads after WooCommerce's own, enqueued
   at priority 20) recolors every WC-templated element that references them without needing to
   fight each individual selector.
   ========================================================================== */
:root {
	--woocommerce: var(--kk-blue);
	--wc-primary: var(--kk-blue);
	--wc-primary-text: #fff;
	--wc-secondary: var(--kk-gray-100);
	--wc-secondary-text: var(--kk-blue);
	--wc-highlight: var(--kk-teal);
	--wc-highligh-text: #fff;
	--wc-content-bg: #fff;
	--wc-subtext: var(--kk-gray-500);
	--wc-form-border-color: var(--kk-gray-300);
	--wc-form-border-radius: var(--radius-md);
	--wc-form-border-width: 1.5px;
	--wc-destructive: var(--kk-red);
	--wc-card-border-radius: var(--radius-lg);
	--wc-green: var(--kk-green);
	--wc-red: var(--kk-red);
	--wc-orange: var(--kk-amber);
	--wc-blue: var(--kk-sky);
}

/*
 * Plain text links (order numbers, "legutóbbi rendelések" etc.) inside WooCommerce-rendered
 * content aren't all driven by the --wc-* variables above - several are hardcoded colors in
 * WooCommerce's own stylesheet. Overriding directly rather than chasing every hardcoded
 * selector individually.
 */
.woocommerce {
	--cc-link-hover: #0d0fbd;
}

.woocommerce a:not(.button, .btn) {
	color: var(--cc-link);
}

.woocommerce a:not(.button, .btn):hover {
	color: var(--cc-link-hover);
}

/* ---------- Layout / content width ---------- */
/* My Account page hero (page-my-account.php): the shared cc-hs page hero, lower when logged in. */
.cc-account-hero--compact.cc-hs--page-hero { padding-top: 72px; }

.cc-myaccount-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 32px 96px;
}

.cc-myaccount-content .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	align-items: flex-start;
}

/* ---------- Account nav sidebar ---------- */
.woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
	background: var(--kk-gray-50);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce .woocommerce-MyAccount-navigation li a {
	/* ".woocommerce" prefix on all four: the generic ".woocommerce a:not(.button)" link colour
	   above outranks a plain ".woocommerce-MyAccount-navigation li a" (the :not() counts as a
	   class) - it made every item KK Blue and the active item's hover text dark blue on blue. */
	display: block;
	padding: 12px 16px;
	border-radius: var(--radius-md);
	color: var(--kk-gray-900);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce .woocommerce-MyAccount-navigation li a:hover,
.woocommerce .woocommerce-MyAccount-navigation li a:focus {
	background: #fff;
	color: var(--kk-blue);
}

.woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--kk-blue);
	color: #fff;
}

.woocommerce .woocommerce-MyAccount-navigation li.is-active a:hover,
.woocommerce .woocommerce-MyAccount-navigation li.is-active a:focus {
	background: #0d0fbd;
	color: #fff;
}

.woocommerce-MyAccount-content {
	flex: 1 1 480px;
	min-width: 0;
}

/* ---------- My Account dashboard: running trainings + support box (CC_ATP_Account_Dashboard) ---------- */
.cc-account-dash {
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.cc-account-dash__title {
	font-family: var(--kk-font-head);
	font-size: 20px;
	color: var(--kk-dark);
	margin: 0 0 var(--space-3);
}

.cc-account-dash__empty { margin: 0 0 var(--space-3); color: var(--kk-gray-700); }

.cc-account-dash__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}

.cc-account-dash__card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-6);
	background: #fff;
	border: 1px solid var(--kk-gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.cc-account-dash__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-md);
	background: rgba(17, 21, 228, 0.08);
	color: var(--kk-blue);
	font-size: 18px;
}

.cc-account-dash__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cc-account-dash__name { color: var(--kk-dark); font-size: 16px; }
.cc-account-dash__meta { font-size: 14px; color: var(--kk-gray-500); }
.cc-account-dash__status--active { color: #0b8a3a; }
.cc-account-dash__status--on-hold,
.cc-account-dash__status--pending-cancel { color: #a86a00; }

.cc-account-dash__card .btn { flex: 0 0 auto; }

.cc-account-dash__support {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	/* Dark end of the brand gradient only: white text/links stay readable everywhere on it. */
	background: linear-gradient(135deg, var(--kk-dark) 0%, var(--kk-blue) 100%);
	color: #fff;
}

.cc-account-dash__support-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	font-size: 22px;
}

.cc-account-dash__support-body h3 {
	font-family: var(--kk-font-head);
	font-size: 20px;
	color: #fff;
	margin: 0 0 var(--space-2);
}

.cc-account-dash__support-body p { margin: 0 0 var(--space-3); color: rgba(255, 255, 255, 0.9); }
.cc-account-dash__support-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.cc-account-dash__support-body li { display: flex; align-items: center; gap: var(--space-2); }
.cc-account-dash__support-body li i { color: var(--kk-aqua); width: 16px; text-align: center; }
.cc-account-dash__support-body a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
	.cc-account-dash__card { flex-wrap: wrap; padding: var(--space-4); }
	.cc-account-dash__card .btn { width: 100%; justify-content: center; }
	.cc-account-dash__support { flex-direction: column; padding: var(--space-4); }
	.cc-account-dash__support-body ul { flex-direction: column; }
}

/* ---------- Login / register cards ---------- */
.woocommerce .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 32px 96px;
}

.woocommerce .u-column1.col-1,
.woocommerce .u-column2.col-2 {
	flex: 1 1 360px;
	background: #fff;
	border: 1px solid var(--kk-gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--space-8);
}

.woocommerce .u-column1.col-1 h2,
.woocommerce .u-column2.col-2 h2 {
	font-size: 24px;
	color: var(--kk-blue);
	margin: 0 0 var(--space-6);
}

/* ---------- Form fields (design-system.md §6.1/§6.2) ---------- */
.woocommerce form .form-row label {
	display: block;
	font-weight: 500;
	font-size: 15px;
	color: var(--kk-gray-900);
	line-height: 1.4;
	margin-bottom: var(--space-2);
}

.woocommerce form .form-row label .required {
	color: var(--kk-red);
}

.woocommerce form .woocommerce-Input,
.woocommerce form input.input-text,
.woocommerce form select,
.woocommerce form textarea {
	width: 100%;
	height: 48px;
	padding: 0 var(--space-4);
	font-family: var(--kk-font-body);
	font-size: 16px;
	border: 1.5px solid var(--kk-gray-300);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--kk-gray-900);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce form textarea {
	height: auto;
	min-height: 120px;
	padding: var(--space-3) var(--space-4);
}

.woocommerce form .woocommerce-Input:hover,
.woocommerce form select:hover,
.woocommerce form textarea:hover {
	border-color: var(--kk-gray-500);
}

.woocommerce form .woocommerce-Input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	outline: none;
	border-color: var(--kk-sky);
	box-shadow: var(--shadow-focus);
}

.woocommerce form .input-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--kk-blue);
}

/* ---------- Buttons (design-system.md §5) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 24px;
	background: var(--kk-blue);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-family: var(--kk-font-body);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: #0d0fbd;
	color: #fff;
}

/* Several action buttons in one table cell (e.g. subscription "Actions": Cancel, Payment
   methods, Renew now, Edit training details) wrap onto a second row - give every button its own
   space so the rows do not touch/overlap. */
.woocommerce table.shop_table td a.button,
.woocommerce table.shop_table td button.button {
	margin: 0 8px 8px 0;
	vertical-align: middle;
}

.woocommerce table.shop_table td:has(> a.button) {
	padding-bottom: 8px;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--kk-gradient);
}

/*
 * design-system.md §7.3 palette. WooCommerce's own CSS sets `border-top: 3px solid <color>` on
 * these (confirmed in its stylesheet) - `border:none` first, then `border-left` only, otherwise
 * that top border's width/style survive untouched and just get recolored by the `border-color`
 * that variant rules below set (border-color applies to all 4 sides at once), producing a green
 * TOP edge instead of the intended left one.
 */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: 0 4px 16px rgba(10, 10, 26, 0.12);
	padding: var(--space-4);
	margin: 0 0 var(--space-6);
	list-style: none;
	border: none;
	border-left: 4px solid;
}

/* WooCommerce moves focus to a new notice (tabindex="-1") for screen readers; the browser's focus
   ring around it looked like a hover/active border. It is not keyboard-reachable, so no ring. */
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus,
.woocommerce-notices-wrapper:focus,
.wc-block-components-notice-banner:focus {
	outline: none;
}

.woocommerce-message {
	border-color: var(--kk-green);
}

.woocommerce-error {
	border-color: var(--kk-red);
}

.woocommerce-info {
	border-color: var(--kk-teal);
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	display: none;
}

.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
	margin-left: auto;
}

/* ---------- reCAPTCHA opt-in notice (iThemes Security) ---------- */
.itsec-recaptcha-opt-in {
	background: rgba(0, 204, 204, 0.06);
	border-left: 4px solid var(--kk-teal);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--space-4) var(--space-6);
	margin: var(--space-4) 0;
}

.itsec-recaptcha-opt-in p {
	margin: 0 0 var(--space-2);
	font-size: 14px;
	color: var(--kk-gray-700);
}

/* ---------- Tables (orders, addresses) ---------- */
.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

/*
 * thead th only - not a bare `th` selector. WooCommerce's orders table marks the order-number
 * COLUMN's cells as <th scope="row"> in the table BODY too (an accessibility pattern, not a
 * real header) - a bare `th` selector caught those as well, giving every order row's number
 * cell a solid kk-blue background with the kk-blue link text (from .woocommerce a:not(.button))
 * sitting right on top of it, unreadable. Confirmed against the real rendered markup.
 */
.woocommerce table.shop_table thead th,
.woocommerce table.woocommerce-orders-table thead th {
	background: var(--kk-blue);
	color: #fff;
	font-weight: 700;
	text-align: left;
	padding: 12px 16px;
	font-size: 14px;
}

.woocommerce table.shop_table td,
.woocommerce table.woocommerce-orders-table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.woocommerce-orders-table tbody th {
	padding: 12px 16px;
	border-bottom: 1px solid var(--kk-gray-100);
	font-size: 15px;
	font-weight: 400;
	text-align: left;
	background: transparent;
	color: var(--kk-gray-900);
}

.woocommerce table.shop_table tr:last-child td {
	border-bottom: none;
}

.woocommerce mark.order-status {
	display: inline-block;
	background: var(--kk-gray-100);
	color: var(--kk-gray-900);
	border-radius: var(--radius-pill);
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 500;
}

@media (max-width: 782px) {
	.cc-myaccount-content .woocommerce {
		flex-direction: column;
	}

	.woocommerce-MyAccount-navigation {
		flex-basis: auto;
		width: 100%;
	}

	.woocommerce .u-columns.col2-set {
		flex-direction: column;
	}
}

/* ==========================================================================
   Homepage hero — [cc_home_hero], replaces xpress-core's int-hero-one widget.
   ========================================================================== */
.cc-hero--home .cc-hero__wrap--split {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	flex-wrap: wrap;
}

.cc-hero--home .cc-hero__text {
	flex: 1 1 480px;
}

.cc-hero--home .cc-hero__form {
	margin-top: var(--space-6);
}

.cc-hero__checklist {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
}

.cc-hero__checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.9);
}

.cc-hero__checklist i {
	color: var(--kk-aqua);
}

.cc-hero--home .cc-hero__illustration {
	flex: 1 1 360px;
	max-width: 480px;
}

.cc-hero--home .cc-hero__illustration img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 900px) {
	.cc-hero--home .cc-hero__illustration {
		order: -1;
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ==========================================================================
   Contact section — [cc_contact_section], replaces xpress-core's int-contact widget
   (which hotlinked its icon assets from the vendor's own demo site - now Font Awesome).
   ========================================================================== */
.cc-contact {
	padding: 80px 0;
}

.cc-contact__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

.cc-contact__title {
	font-size: 32px;
	color: var(--kk-blue);
	margin: 0 0 var(--space-6);
}

.cc-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--space-8);
	align-items: start;
}

.cc-contact__methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cc-contact__methods li {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: var(--kk-gray-50);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
}

.cc-contact__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--kk-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.cc-contact__methods strong {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

.cc-contact__methods a {
	color: var(--kk-gray-700);
	text-decoration: none;
	font-size: 14px;
}

.cc-contact__methods a:hover {
	color: var(--kk-blue);
	text-decoration: underline;
}

@media (max-width: 900px) {
	.cc-contact__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * CF7 wraps its hidden nonce/meta inputs in <fieldset class="hidden-fields-container"> - CF7
 * relies on its own plugin stylesheet to hide this, which isn't always loaded (or loaded before
 * this file wins the cascade); without it, the empty fieldset renders as a visible bordered box
 * ahead of the first real field on every CF7 form site-wide. Global, not scoped to one form.
 */
.hidden-fields-container {
	display: none;
}

/* ==========================================================================
   Contact Form 7 — default stacked style (design-system.md §6.1/§6.2) for any CF7 form
   that ISN'T the footer/hero newsletter pill (those keep their own single-line pill
   pattern above; this is the fallback for real multi-field forms, e.g. the contact form).
   ========================================================================== */
/* flex/column (not block) so .wpcf7-response-output and the submit button can be reordered
   visually via `order` below without touching CF7's own DOM output - see those rules. */
.wpcf7-form {
	display: flex;
	flex-direction: column;
}

.wpcf7-form p {
	position: relative;
	margin: 0 0 var(--space-6);
}

.wpcf7-form label {
	display: block;
	font-weight: 500;
	font-size: 15px;
	color: var(--kk-gray-900);
	margin-bottom: var(--space-2);
}

/*
 * This form's own template doesn't wrap each field in a <p> (label and
 * .wpcf7-form-control-wrap are bare siblings directly under <form>, confirmed against the
 * real markup) - .wpcf7-form p's position:relative/margin above never applies here. The wrap
 * span is what CF7 actually nests the tip inside regardless of an outer <p>, so anchor to that
 * instead; margin-bottom recreates the inter-field spacing the (absent) <p> would have given.
 */
.wpcf7-form .wpcf7-form-control-wrap {
	position: relative;
	display: block;
	margin-bottom: var(--space-6);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	height: 48px;
	padding: 0 var(--space-4);
	font-family: var(--kk-font-body);
	font-size: 16px;
	border: 1.5px solid var(--kk-gray-300);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--kk-gray-900);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.wpcf7-form select {
	width: 100%;
	height: 48px;
	padding: 0 var(--space-4);
	font-family: var(--kk-font-body);
	font-size: 16px;
	border: 1.5px solid var(--kk-gray-300);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--kk-gray-900);
}

.wpcf7-form select:focus {
	outline: none;
	border-color: var(--kk-sky);
	box-shadow: var(--shadow-focus);
}

/* Contact form extras: "* required" legend, help text under a field, privacy acceptance row */
.wpcf7-form .cc-form-legend,
.wpcf7-form .cc-field-help {
	display: block;
	font-size: 14px;
	color: var(--kk-gray-500);
}

.wpcf7-form .cc-form-legend {
	margin-bottom: var(--space-6);
}

.wpcf7-form .cc-field-help {
	margin: calc(-1 * var(--space-4)) 0 var(--space-6);
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-weight: 400;
	font-size: 14px;
	color: var(--kk-gray-700);
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	flex: none;
	accent-color: var(--kk-blue);
}

.wpcf7-form textarea {
	height: auto;
	min-height: 140px;
	padding: var(--space-3) var(--space-4);
	resize: vertical;
}

.wpcf7-form input:hover,
.wpcf7-form textarea:hover {
	border-color: var(--kk-gray-500);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--kk-sky);
	box-shadow: var(--shadow-focus);
}

/*
 * display:flex (block-level, not inline-flex) + margin-left:auto - CF7's own template for this
 * form doesn't wrap the submit button in a <p> or any element of its own (it's a bare sibling
 * of the last field), so there's no unique parent to text-align:right. A block-level flex box
 * sized to its own content still respects margin:auto positioning within its parent regardless
 * of whether that parent is block or flex itself, so this works either way.
 */
.wpcf7-form input[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	/* pushed after .wpcf7-response-output (order:1 below) regardless of DOM order - CF7 puts
	   the response-output div after the submit button in its own markup. */
	order: 2;
	height: 44px;
	padding: 0 24px;
	background: var(--kk-blue);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-family: var(--kk-font-body);
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wpcf7-form input[type="submit"]:hover {
	background: #0d0fbd;
}

/*
 * Next to the field's label, not below the input. Anchored to .wpcf7-form-control-wrap (the
 * tip's actual DOM parent - see that rule's comment on why, not the label itself: the tip
 * isn't a descendant of the label, it's a later sibling inside the wrap span, so it can only
 * be positioned relative to an ancestor they share - the wrap span is the closest one CF7
 * consistently provides). top:-30px pulls it up from the wrap's own top edge to roughly the
 * label's line (15px label + 1.4 line-height + 8px margin-bottom ≈ 29px above the wrap).
 */
.wpcf7-form .wpcf7-not-valid-tip {
	position: absolute;
	top: -30px;
	right: 0;
	display: block;
	color: var(--kk-red);
	font-size: 13px;
	font-weight: 500;
	text-align: right;
}

/* above the submit button (order:2) - see .wpcf7-form's flex-column + this order:1. */
.wpcf7-form .wpcf7-response-output {
	order: 1;
	margin-bottom: var(--space-4) !important;
	border-radius: var(--radius-md) !important;
	border-color: var(--kk-red) !important;
	color: var(--kk-red);
	font-size: 14px;
}

.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
	border-color: var(--kk-green) !important;
	color: var(--kk-green);
}

/* LW Cookie consent banner/modal/floating button. Its buttons are <button type="button"> styled
   with single classes (.lw-cookie-btn-primary etc., specificity 0,1,0) - exactly as specific as
   hello-elementor's reset.css `[type=button]` rule, which loads later and so wins: transparent
   background, #c36 pink border/text, pink fill on :hover/:focus. The `body` prefix outranks it
   (and body+:hover outranks reset's `[type=button]:hover`). Colours stay on the plugin's own
   --lw-cookie-* variables, so LW Cookie's settings (primary = --kk-blue) remain the source. */
body .lw-cookie-btn {
	display: inline-flex; /* reset.css forces inline-block, losing the plugin's centring */
	align-items: center;
	justify-content: center;
	font-family: var(--kk-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 10px 20px;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	white-space: nowrap;
}

body .lw-cookie-btn-primary,
body .lw-cookie-btn-primary:hover,
body .lw-cookie-btn-primary:focus {
	background: var(--lw-cookie-primary);
	border-color: var(--lw-cookie-primary);
	color: #fff;
}

body .lw-cookie-btn-primary:hover {
	opacity: 0.9;
}

body .lw-cookie-btn-secondary,
body .lw-cookie-btn-secondary:hover,
body .lw-cookie-btn-secondary:focus {
	background: transparent;
	border-color: var(--kk-gray-300);
	color: var(--lw-cookie-text);
	opacity: 1;
}

body .lw-cookie-btn-secondary:hover {
	border-color: var(--kk-gray-500);
}

body .lw-cookie-btn-outline,
body .lw-cookie-btn-outline:focus {
	background: transparent;
	border-color: var(--lw-cookie-primary);
	color: var(--lw-cookie-primary);
}

body .lw-cookie-btn-outline:hover {
	background: var(--lw-cookie-primary);
	border-color: var(--lw-cookie-primary);
	color: #fff;
}

body .lw-cookie-modal-close,
body .lw-cookie-modal-close:hover,
body .lw-cookie-modal-close:focus {
	background: transparent;
	border: none;
	color: var(--lw-cookie-text);
	padding: 0;
}

body .lw-cookie-floating-btn,
body .lw-cookie-floating-btn:hover,
body .lw-cookie-floating-btn:focus {
	background: var(--lw-cookie-primary);
	border: none;
	border-radius: 50%;
	color: #fff;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px; /* reset.css's `[type=button] { width: auto }` otherwise collapses it to the icon */
	height: 48px;
}

body .lw-cookie-btn:focus-visible,
body .lw-cookie-modal-close:focus-visible,
body .lw-cookie-floating-btn:focus-visible {
	outline: 2px solid var(--kk-sky);
	outline-offset: 2px;
}

/* Homepage - full-width stack of cc-atp "Home: ..." blocks (see front-page.php). overflow-x
   guards against the diagonal-edge sections' clip-path/negative-margin math ever producing a
   horizontal scrollbar. */
.cc-front {
	overflow-x: hidden;
}

/* ==========================================================================
   Cart / Checkout (WooCommerce blocks) - template-parts/shop-page.php
   Brand colours instead of hello-elementor's #c36 buttons and WooCommerce's black accents.
   Visual only: no checkout markup or behaviour is changed.
   ========================================================================== */
.cc-shop-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 32px 96px;
	font-family: var(--kk-font-body);
	color: var(--kk-gray-900);
}

.cc-shop-content .wc-block-components-title,
.cc-shop-content .wc-block-components-checkout-step__title {
	font-family: var(--kk-font-head);
	font-weight: 700;
	color: var(--kk-gray-900);
}

/* Buttons (place order, apply coupon, proceed to checkout) */
.cc-shop-content .wc-block-components-button:not(.is-link) {
	background: var(--kk-blue);
	color: #fff;
	border: 0;
	border-radius: var(--radius-md);
	font-family: var(--kk-font-body);
	font-weight: 700;
	box-shadow: none;
	transition: background 0.15s ease;
}

.cc-shop-content .wc-block-components-button:not(.is-link):hover,
.cc-shop-content .wc-block-components-button:not(.is-link):focus {
	background: #0d0fbd;
	color: #fff;
}

.cc-shop-content .wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid var(--kk-sky);
	outline-offset: 2px;
}

/* Apply coupon: a secondary action next to the place-order button - design-system .btn-secondary
   look (blue outline, KK Sky text on hover; disabled = .btn:disabled's 0.4 opacity) */
.cc-shop-content .wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link) {
	background: transparent;
	color: var(--kk-blue);
	border: 2px solid var(--kk-blue);
	font-weight: 500;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.cc-shop-content .wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link):hover,
.cc-shop-content .wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link):focus {
	background: transparent;
	color: var(--kk-sky);
	border-color: var(--kk-blue);
}

.cc-shop-content .wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link):disabled {
	opacity: 0.4;
}

/* Text inputs, selects, textarea */
.cc-shop-content .wc-block-components-text-input input,
.cc-shop-content .wc-block-components-textarea,
.cc-shop-content .wc-blocks-components-select .wc-blocks-components-select__select,
.cc-shop-content .wc-block-components-combobox .components-combobox-control__input {
	border: 1.5px solid var(--kk-gray-300);
	border-radius: var(--radius-md);
	color: var(--kk-gray-900);
}

.cc-shop-content .wc-block-components-text-input input:focus,
.cc-shop-content .wc-block-components-textarea:focus,
.cc-shop-content .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--kk-sky);
	box-shadow: var(--shadow-focus);
	outline: none;
}

/* Radios and checkboxes */
.cc-shop-content .wc-block-components-radio-control__input:checked {
	border-color: var(--kk-blue);
}

.cc-shop-content .wc-block-components-radio-control__input:checked::before {
	background: var(--kk-blue);
}

.cc-shop-content .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--kk-blue);
	border-color: var(--kk-blue);
}

.cc-shop-content .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: #fff;
}

/* Selected payment method / option box: KK Blue outline instead of black */
.cc-shop-content .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.cc-shop-content .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 2px var(--kk-blue);
	border-radius: var(--radius-md);
}

/* Order summary: WooCommerce already draws it as a bordered card inside the totals column -
   style that card (rounded, brand border + shadow) instead of adding a second box around it. */
.cc-shop-content .wp-block-woocommerce-checkout-order-summary-block {
	border-color: var(--kk-gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	background: #fff;
}

/* The item's long product description (truncated marketing text) adds nothing in the summary */
.cc-shop-content .wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	display: none;
}

.cc-shop-content .wc-block-components-order-summary-item__quantity {
	background: var(--kk-blue);
	border-color: var(--kk-blue);
	color: #fff;
}

@media (max-width: 720px) {
	.cc-shop-content {
		padding: 32px 16px 64px;
	}
}

/* Order progress steps (cc-atp CC_ATP_Order_Steps) - Awareness Training hero, cart/checkout hero */
.cc-steps {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	font-family: var(--kk-font-body);
	font-size: 15px;
}

.cc-steps--center {
	justify-content: center;
	margin: 0 0 var(--space-8);
}

.cc-steps__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: rgba(255, 255, 255, 0.65);
}

.cc-steps__item + .cc-steps__item::before {
	content: "\203A\203A"; /* >> */
	margin-right: var(--space-1);
	color: rgba(255, 255, 255, 0.45);
	font-weight: 700;
}

.cc-steps__marker {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.cc-steps__item.is-done {
	color: #fff;
}

.cc-steps__item.is-done .cc-steps__marker {
	background: var(--kk-green);
	border-color: var(--kk-green);
	color: var(--kk-blue);
}

.cc-steps__item.is-current {
	color: #fff;
	font-weight: 700;
}

.cc-steps__item.is-current .cc-steps__marker {
	background: #fff;
	border-color: #fff;
	color: var(--kk-blue);
}

@media (max-width: 720px) {
	.cc-steps {
		flex-direction: column;
		align-items: flex-start;
	}

	.cc-steps__item + .cc-steps__item::before {
		display: none;
	}
}

/* Checkout for a pure mentee: message + actions instead of the order form (shop-page.php) */
.cc-mentee-checkout {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-8);
	border: 1px solid var(--kk-gray-100);
	border-left: 4px solid var(--kk-blue);
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: var(--shadow-card);
	font-size: 17px;
	line-height: 1.6;
}

.cc-mentee-checkout p {
	margin: 0 0 var(--space-3);
}

.cc-mentee-checkout__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

@media (max-width: 600px) {
	.cc-mentee-checkout {
		padding: var(--space-4) var(--space-4);
	}
}

/* Checkout headcount box (CC_ATP_Order_Steps::quantity_box, filled by checkout-quantity.js) */
.cc-qty-box {
	margin-bottom: var(--space-8);
	padding: var(--space-4) var(--space-6);
	border: 1px solid var(--kk-gray-100);
	border-left: 4px solid var(--kk-blue);
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: var(--shadow-card);
}

.cc-qty-box__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-6);
}

.cc-qty-box__row + .cc-qty-box__row {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--kk-gray-100);
}

.cc-qty-box__name span {
	display: block;
	font-size: 13px;
	color: var(--kk-gray-500);
}

.cc-qty-box__name strong {
	font-family: var(--kk-font-head);
	font-size: 18px;
	color: var(--kk-gray-900);
}

.cc-qty-box__field {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: 500;
	color: var(--kk-gray-700);
}

.cc-qty-box__field select {
	width: 84px;
	height: 40px;
	padding: 0 var(--space-3);
	border: 1.5px solid var(--kk-gray-300);
	border-radius: var(--radius-md);
	background: #fff;
	font-size: 16px;
	color: var(--kk-gray-900);
}

.cc-qty-box__field select:focus {
	outline: none;
	border-color: var(--kk-sky);
	box-shadow: var(--shadow-focus);
}

/* Newsletter status page (page-newsletter-status.php): page hero + a centred card with the
   state icon, the plugin's message and a way back to the site. */
.cc-nl-status__body {
	padding: 0 32px 96px;
	background: #fff;
}

.cc-nl-status__card {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 40px 40px;
	background: #fff;
	border: 1px solid var(--kk-gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	text-align: center;
}

.cc-nl-status__icon {
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto var(--space-6);
}

.cc-nl-status__message {
	font-size: 18px;
	line-height: 1.6;
	color: var(--kk-gray-700);
}

.cc-nl-status__message p {
	margin: 0 0 var(--space-4);
}

.cc-nl-status__message form {
	margin: var(--space-6) 0 0;
}

.cc-nl-status__actions {
	margin-top: var(--space-8);
}

@media (max-width: 640px) {
	.cc-nl-status__body {
		padding: 0 16px 64px;
	}

	.cc-nl-status__card {
		padding: 32px 20px 28px;
	}
}