/*
 * Tuning Client Portal (my-account endpoints, Woo login/register header, captcha widget).
 * Uses the design tokens from c4tuning-design.css. Cards 16px, buttons inherit .c4-btn (6px).
 */

body.c4-design .c4p { color: var(--c4-text-muted); }
body.c4-design .c4p-lede { margin: 0 0 var(--c4-s-5); }
body.c4-design .c4p-empty { margin: 0 0 var(--c4-s-4); color: var(--c4-text-subtle); }
body.c4-design .c4p-section-title { margin: var(--c4-s-6) 0 var(--c4-s-4); color: var(--c4-text); font-family: var(--c4-font-display); font-size: var(--c4-fs-lg); letter-spacing: var(--c4-track-display); }

/* Panels + cards */
body.c4-design .c4p-panel {
	margin: 0 0 var(--c4-s-5);
	padding: var(--c4-s-5);
	background: var(--c4-surface);
	border: 1px solid var(--c4-line);
	border-radius: 16px;
}
body.c4-design .c4p-panel__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--c4-s-3);
	margin: 0 0 var(--c4-s-4);
	color: var(--c4-text);
	font-family: var(--c4-font-display);
	font-size: var(--c4-fs-md);
	font-weight: 600;
	letter-spacing: var(--c4-track-display);
}
body.c4-design .c4p-panel__link { font-family: var(--c4-font-text); font-size: var(--c4-fs-sm); font-weight: 500; }

body.c4-design .c4p-cards { display: grid; gap: var(--c4-s-4); margin: 0 0 var(--c4-s-5); padding: 0; list-style: none; }
@media (min-width: 768px) { body.c4-design .c4p-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.c4-design .c4p-card {
	margin: 0;
	padding: var(--c4-s-4) var(--c4-s-5);
	background: var(--c4-surface);
	border: 1px solid var(--c4-line);
	border-left: 3px solid var(--c4-accent);
	border-radius: 16px;
}
body.c4-design .c4p-card__title { margin: 0 0 var(--c4-s-1); color: var(--c4-text); font-family: var(--c4-font-display); font-size: var(--c4-fs-md); }
body.c4-design .c4p-card__meta { margin: 0; font-size: var(--c4-fs-sm); }
body.c4-design .c4p-card__body { margin: var(--c4-s-2) 0 0; font-size: var(--c4-fs-sm); color: var(--c4-text-subtle); }
body.c4-design .c4p-card__actions { display: flex; align-items: center; gap: var(--c4-s-3); margin-top: var(--c4-s-3); }

/* Forms */
body.c4-design .c4p-grid { display: grid; gap: 0 var(--c4-s-4); }
@media (min-width: 768px) {
	body.c4-design .c4p-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.c4-design .c4p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.c4-design .c4p-field { margin: 0 0 var(--c4-s-4); }
body.c4-design .c4p-field label { display: block; margin: 0 0 var(--c4-s-2); color: var(--c4-text); font-size: var(--c4-fs-sm); font-weight: 500; }
body.c4-design .c4p-field input[type="text"],
body.c4-design .c4p-field input[type="number"],
body.c4-design .c4p-field select,
body.c4-design .c4p-field textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--c4-s-2) var(--c4-s-3);
	background: var(--c4-surface-2);
	border: 1px solid var(--c4-line-strong);
	border-radius: 6px;
	color: var(--c4-text);
	font: inherit;
}
body.c4-design .c4p-field textarea { min-height: 96px; resize: vertical; }
body.c4-design .c4p-field input:focus,
body.c4-design .c4p-field select:focus,
body.c4-design .c4p-field textarea:focus { outline: 2px solid var(--c4-accent); outline-offset: 1px; border-color: var(--c4-accent); }
body.c4-design .c4p-field input[type="file"] { display: block; width: 100%; padding: var(--c4-s-3); background: var(--c4-surface-2); border: 1px dashed var(--c4-line-strong); border-radius: 6px; color: var(--c4-text-muted); }
body.c4-design .c4p-hint { display: block; margin-top: var(--c4-s-1); color: var(--c4-text-subtle); font-size: var(--c4-fs-xs); }
body.c4-design .c4p-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c4-s-3); }
body.c4-design .c4p-inline-form { display: inline; margin: 0; padding: 0; background: none; border: 0; }
body.c4-design .c4p-link-danger { padding: 0; background: none; border: 0; color: var(--c4-danger); font-size: var(--c4-fs-sm); cursor: pointer; }
body.c4-design .c4p-link-danger:hover { text-decoration: underline; }
body.c4-design .c4p-btn-sm { min-height: 36px; padding: var(--c4-s-1) var(--c4-s-3); font-size: var(--c4-fs-sm); }

/* Tables + badges */
body.c4-design .c4p-table { width: 100%; margin: 0 0 var(--c4-s-5); border-collapse: collapse; font-size: var(--c4-fs-sm); }
body.c4-design .c4p-table th { padding: var(--c4-s-2) var(--c4-s-3); border-bottom: 1px solid var(--c4-line-strong); color: var(--c4-text-subtle); font-size: var(--c4-fs-xs); font-weight: 600; letter-spacing: var(--c4-track-caps); text-align: left; text-transform: uppercase; }
body.c4-design .c4p-table td { padding: var(--c4-s-3); border-bottom: 1px solid var(--c4-line); vertical-align: middle; }
@media (max-width: 640px) { body.c4-design .c4p-hide-sm { display: none; } }
body.c4-design .c4p-badge {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--c4-line-strong);
	border-radius: 6px;
	color: var(--c4-text-muted);
	font-size: var(--c4-fs-xs);
	font-weight: 600;
	white-space: nowrap;
}
body.c4-design .c4p-badge--open,
body.c4-design .c4p-badge--awaiting-tuner { border-color: var(--c4-accent-line); background: var(--c4-accent-soft); color: var(--c4-accent); }
body.c4-design .c4p-badge--awaiting-customer { border-color: var(--c4-text-muted); color: var(--c4-text); }
body.c4-design .c4p-badge--resolved,
body.c4-design .c4p-badge--current { border-color: rgba(61, 220, 132, 0.45); color: var(--c4-success); }
body.c4-design .c4p-badge--retired { color: var(--c4-text-subtle); }
body.c4-design .c4p-rev { margin-left: var(--c4-s-2); padding: 1px 6px; background: var(--c4-surface-3); border-radius: 6px; color: var(--c4-text); font-size: var(--c4-fs-xs); font-weight: 600; }

/* Dashboard */
body.c4-design .c4p-dash__hello { margin: 0 0 var(--c4-s-5); }
body.c4-design .c4p-dash__title { margin: 0 0 var(--c4-s-4); color: var(--c4-text); font-family: var(--c4-font-display); font-size: var(--c4-fs-xl); letter-spacing: var(--c4-track-display); }
body.c4-design .c4p-dash__grid { display: grid; gap: 0 var(--c4-s-4); }
@media (min-width: 992px) { body.c4-design .c4p-dash__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.c4-design .c4p-list { margin: 0; padding: 0; list-style: none; }
body.c4-design .c4p-list li { padding: var(--c4-s-2) 0; border-bottom: 1px solid var(--c4-line); color: var(--c4-text); }
body.c4-design .c4p-list li:last-child { border-bottom: 0; }
body.c4-design .c4p-list__meta { display: block; color: var(--c4-text-subtle); font-size: var(--c4-fs-xs); }

/* Ticket thread */
body.c4-design .c4p-back { display: inline-block; margin: 0 0 var(--c4-s-4); font-size: var(--c4-fs-sm); }
body.c4-design .c4p-ticket__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c4-s-3); margin: 0 0 var(--c4-s-4); }
body.c4-design .c4p-ticket__subject { margin: 0; color: var(--c4-text); font-family: var(--c4-font-display); font-size: var(--c4-fs-lg); letter-spacing: var(--c4-track-display); }
body.c4-design .c4p-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--c4-s-3); margin: 0 0 var(--c4-s-5); padding: var(--c4-s-4); background: var(--c4-surface); border: 1px solid var(--c4-line); border-radius: 16px; }
body.c4-design .c4p-facts dt { color: var(--c4-text-subtle); font-size: var(--c4-fs-xs); font-weight: 600; letter-spacing: var(--c4-track-caps); text-transform: uppercase; }
body.c4-design .c4p-facts dd { margin: 0; color: var(--c4-text); font-size: var(--c4-fs-sm); }
body.c4-design .c4p-thread { margin: 0 0 var(--c4-s-5); padding: 0; list-style: none; }
body.c4-design .c4p-msg { margin: 0 0 var(--c4-s-3); padding: var(--c4-s-4); background: var(--c4-surface); border: 1px solid var(--c4-line); border-radius: 16px; }
body.c4-design .c4p-msg--staff { border-left: 3px solid var(--c4-accent); background: var(--c4-surface-2); }
body.c4-design .c4p-msg__who { margin: 0 0 var(--c4-s-2); color: var(--c4-text); font-size: var(--c4-fs-sm); font-weight: 600; }
body.c4-design .c4p-msg__who span { color: var(--c4-text-subtle); font-weight: 400; }
body.c4-design .c4p-msg__body { color: var(--c4-text-muted); overflow-wrap: anywhere; }

/* Files + log history */
body.c4-design .c4p-files { margin: var(--c4-s-3) 0 0; padding: 0; list-style: none; }
body.c4-design .c4p-file { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--c4-s-3); padding: var(--c4-s-2) 0; border-top: 1px solid var(--c4-line); }
body.c4-design .c4p-file__name { font-weight: 600; overflow-wrap: anywhere; }
body.c4-design .c4p-file__name::before { content: "\2193"; margin-right: var(--c4-s-1); color: var(--c4-accent); }
body.c4-design .c4p-file__meta { color: var(--c4-text-subtle); font-size: var(--c4-fs-xs); }
body.c4-design .c4p-file__notes { flex-basis: 100%; color: var(--c4-text-muted); font-size: var(--c4-fs-sm); }
body.c4-design .c4p-group { margin: 0 0 var(--c4-s-5); padding: var(--c4-s-4) var(--c4-s-5); background: var(--c4-surface); border: 1px solid var(--c4-line); border-radius: 16px; }
body.c4-design .c4p-group__title { margin: 0 0 var(--c4-s-2); color: var(--c4-text); font-family: var(--c4-font-display); font-size: var(--c4-fs-md); }
body.c4-design .c4p-group__sub { margin: var(--c4-s-3) 0 0; color: var(--c4-text); font-size: var(--c4-fs-sm); font-weight: 600; }

/* Woo login/register header + captcha on account forms */
body.c4-design .c4p-auth-head { margin: 0 0 var(--c4-s-5); }
body.c4-design .c4p-auth-head__title { margin: 0 0 var(--c4-s-2); color: var(--c4-text); font-family: var(--c4-font-display); font-size: var(--c4-fs-2xl); letter-spacing: var(--c4-track-display); }
body.c4-design .c4p-auth-head__lede { margin: 0; color: var(--c4-text-muted); }
body.c4-design .c4-captcha--auth { margin: 0 0 var(--c4-s-4); }
body.c4-design .c4-captcha--auth .c4-captcha__img { display: block; margin: var(--c4-s-2) 0; border-radius: 6px; }

/* =========================================================================
 * Layout fix (2026-10-10). Parent theme style.css forces width:450px on
 * form.login and border-radius:20px !important on Woo buttons; the design CSS
 * only switches the login/register pair to a grid at 768px. See DESIGN-NOTES.
 * ====================================================================== */

/* Account pages: no 540px Bootstrap step between 576 and 767px */
@media (min-width: 576px) and (max-width: 767.98px) {
	body.c4-design.woocommerce-account #maincontent > .container { max-width: none; }
}

/* Logged-out landing: lede under the page H1, then login | register cards */
body.c4-design .c4p-auth-head { margin: 0 0 var(--c4-s-6); }
body.c4-design .c4p-auth-head__lede { max-width: 60ch; color: var(--c4-text-muted); font-size: var(--c4-fs-md); line-height: 1.5; }
body.c4-design .woocommerce #customer_login.u-columns.col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--c4-s-5);
	align-items: stretch;
	margin: 0;
}
@media (min-width: 900px) {
	body.c4-design .woocommerce #customer_login.u-columns.col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--c4-s-6); }
}
body.c4-design .woocommerce #customer_login.u-columns.col2-set::before,
body.c4-design .woocommerce #customer_login.u-columns.col2-set::after { display: none; content: none; }
body.c4-design .woocommerce #customer_login .u-column1,
body.c4-design .woocommerce #customer_login .u-column2 {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: var(--c4-s-5);
	background: var(--c4-surface);
	border: 1px solid var(--c4-line);
	border-top: 3px solid var(--c4-accent);
	border-radius: 16px;
}
@media (min-width: 576px) {
	body.c4-design .woocommerce #customer_login .u-column1,
	body.c4-design .woocommerce #customer_login .u-column2 { padding: var(--c4-s-6); }
}
body.c4-design .woocommerce #customer_login .u-column1 > h2,
body.c4-design .woocommerce #customer_login .u-column2 > h2 {
	margin: 0 0 var(--c4-s-5);
	color: var(--c4-text);
	font-family: var(--c4-font-display);
	font-size: var(--c4-fs-lg);
	letter-spacing: var(--c4-track-display);
}
body.c4-design .woocommerce #customer_login form.login,
body.c4-design .woocommerce #customer_login form.register {
	flex: 1 1 auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
body.c4-design .woocommerce #customer_login form .form-row:last-child { margin-bottom: 0; }
body.c4-design .woocommerce #customer_login .woocommerce-form-login__submit,
body.c4-design .woocommerce #customer_login .woocommerce-form-register__submit { width: 100%; margin-top: var(--c4-s-2); }
body.c4-design .woocommerce #customer_login .woocommerce-form-login__rememberme { display: flex; margin: 0 0 var(--c4-s-3); }
body.c4-design .woocommerce #customer_login .lost_password { margin: var(--c4-s-4) 0 0; font-size: var(--c4-fs-sm); }

/* Captcha inside auth cards (only rendered when Turnstile keys are set) */
body.c4-design .c4-captcha--auth { padding: var(--c4-s-4); background: var(--c4-surface-2); border: 1px solid var(--c4-line); border-radius: 10px; }
body.c4-design .c4-captcha--auth .c4-captcha__fallback { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--c4-s-2) var(--c4-s-3); margin: 0; }
body.c4-design .c4-captcha--auth .c4-captcha__fallback[hidden] { display: none; }
body.c4-design .c4-captcha--auth .c4-captcha__fallback label { grid-column: 1 / -1; margin: 0; color: var(--c4-text); font-size: var(--c4-fs-sm); font-weight: 500; }
body.c4-design .c4-captcha--auth .c4-captcha__img { margin: 0; }
body.c4-design .c4-captcha--auth input[name="c4_cap_answer"] {
	width: 100%;
	min-height: 52px;
	padding: 0.7rem 0.875rem;
	background: var(--c4-bg);
	border: 1px solid var(--c4-line-strong);
	border-radius: 6px;
	color: var(--c4-text);
	font-size: var(--c4-fs-md);
	letter-spacing: 0.08em;
}
body.c4-design .c4-captcha--auth input[name="c4_cap_answer"]:focus { border-color: var(--c4-accent); outline: 0; box-shadow: 0 0 0 3px var(--c4-accent-soft); }

/* Woo buttons on account pages: beat the parent's 20px !important pills */
body.c4-design.woocommerce-account .woocommerce .button {
	border-radius: var(--c4-r-sm) !important;
	padding: 0.7rem 1.4rem !important;
}
body.c4-design.woocommerce-account .woocommerce table.shop_table .button { padding: 0.4rem 0.9rem !important; }

/* Portal buttons that are links: the content link colour made primary text orange-on-orange */
body.c4-design.woocommerce-account #content-vw a.c4-btn,
body.c4-design.woocommerce-account #content-vw .woocommerce a.button { text-decoration: none; }
body.c4-design.woocommerce-account .woocommerce-MyAccount-content a.c4-btn:not(.c4-btn--ghost),
body.c4-design.woocommerce-account .woocommerce-MyAccount-content a.c4-btn:not(.c4-btn--ghost):hover { color: var(--c4-on-accent); }
body.c4-design.woocommerce-account .woocommerce-MyAccount-content a.c4-btn--ghost,
body.c4-design.woocommerce-account .woocommerce-MyAccount-content a.c4-btn--ghost:hover { color: var(--c4-text); }

/* File inputs: dark selector button instead of the OS default */
body.c4-design .c4p-field input[type="file"]::file-selector-button {
	margin-right: var(--c4-s-3);
	padding: var(--c4-s-2) var(--c4-s-4);
	background: var(--c4-surface-3);
	border: 1px solid var(--c4-line-strong);
	border-radius: 6px;
	color: var(--c4-text);
	font: inherit;
	font-size: var(--c4-fs-sm);
	cursor: pointer;
}
body.c4-design .c4p-field input[type="file"]::file-selector-button:hover { border-color: var(--c4-accent); }

/* Below the 992px sidebar breakpoint: compact nav grid, so content starts sooner */
@media (max-width: 991.98px) {
	body.c4-design .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-bottom: var(--c4-s-5); }
	body.c4-design nav.woocommerce-MyAccount-navigation ul li { margin: 0; }
	body.c4-design .woocommerce-MyAccount-navigation ul li a { padding: 0.55rem 0.75rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
	body.c4-design .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones: cards nest inside the content card, so trim padding at both levels */
@media (max-width: 575.98px) {
	body.c4-design .woocommerce-MyAccount-content { padding: var(--c4-s-4); }
	body.c4-design .c4p-panel,
	body.c4-design .c4p-group { padding: var(--c4-s-4); }
	body.c4-design .c4p-card { padding: var(--c4-s-3) var(--c4-s-4); }
	body.c4-design .c4p-facts { padding: var(--c4-s-3); }
	body.c4-design .c4p-msg { padding: var(--c4-s-3); }
}
body.c4-design .c4p-rev { display: inline-block; margin: 0 0 0 var(--c4-s-1); }
/* Parent style.css paints .woocommerce input#password light grey (ID specificity) */
body.c4-design .woocommerce input#password { border-color: var(--c4-line-strong); }
body.c4-design .woocommerce input#password:focus { border-color: var(--c4-accent); box-shadow: 0 0 0 3px var(--c4-accent-soft); }