/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* ChoreoClaim: My Certificates grid (PHP-rendered markup, see includes/choreoclaim.php) */
.choreoclaim-certificates {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.choreoclaim-certificates article {
	display: grid;
	grid-template-columns: 3fr 1.2fr 1fr 1.6fr;
	align-items: center;
	gap: var(--space-xs);
}

/* Divider-separated rows (panel look comes from the outer card) */
.choreoclaim-certificates article + article {
	border-top: 1px solid var(--neutral-light);
	padding-top: var(--space-s);
}

.choreoclaim-certificates .cert-meta small,
.choreoclaim-certificates .cert-date small {
	font-size: var(--text-xs);
	color: var(--base-light);
}

.choreoclaim-certificates .cert-amount {
	font-size: var(--text-s);
}

.choreoclaim-certificates .cert-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-xs);
}

@media (max-width: 767px) {
	.choreoclaim-certificates article {
		grid-template-columns: 1fr 1fr;
	}
	.choreoclaim-certificates .cert-meta {
		grid-column: span 2;
	}
	.choreoclaim-certificates .cert-action {
		grid-column: span 2;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
}

/* Stat tile icons */
.choreoclaim-stats .stat-label {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.choreoclaim-stats .stat-icon {
	display: inline-flex;
	width: 1.5em;
	height: 1.5em;
}

.choreoclaim-stats .stat-icon svg {
	width: 100%;
	height: 100%;
}

/* ChoreoClaim: Account - Orders styled like the My Certificates list (no card chrome) */
.woocommerce-orders-table {
	border: none;
}

.woocommerce-orders-table thead {
	display: none;
}

.woocommerce-orders-table tbody {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.woocommerce-orders-table tbody tr {
	display: grid;
	grid-template-columns: 2fr 4fr 1fr;
	grid-template-areas:
		"number status actions"
		"date   total  actions";
	align-items: center;
	gap: var(--space-xs);
}

/* Subtle divider between orders */
.woocommerce-orders-table tbody tr + tr {
	border-top: 1px solid var(--neutral-light);
	padding-top: var(--space-s);
}

/* th covers the order-number cell, which Woo renders as <th scope="row"> */
.woocommerce-orders-table tbody td,
.woocommerce-orders-table tbody th {
	border: none;
	padding: 0;
	background: none;
}

.woocommerce-orders-table__cell-order-number  { grid-area: number; }
.woocommerce-orders-table__cell-order-date    { grid-area: date; font-size: var(--text-xs); }
.woocommerce-orders-table__cell-order-status  { grid-area: status; font-size: var(--text-xs); }
.woocommerce-orders-table__cell-order-total   { grid-area: total; font-size: var(--text-xs); }
.woocommerce-orders-table__cell-order-actions { grid-area: actions; }

/* Order action buttons (e.g. View) styled like ACSS .btn--primary.
   Uses ACSS button tokens; text color literal matches the measured
   .btn--primary text color (no root-level token exposes it). */
.woocommerce-orders-table .woocommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: oklch(0.2 0.036 270.533);
	border: var(--btn-border-width, 1.5px) solid var(--primary);
	border-radius: var(--btn-radius, 200px);
	padding: var(--btn-padding-block, 1em) var(--btn-padding-inline, 1.4em);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight, 700);
	line-height: var(--btn-line-height, 1);
	text-decoration: none;
}

.woocommerce-orders-table .woocommerce-button:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
}

/* ChoreoClaim: My Portal dashboard stats */
.choreoclaim-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-gap);
}

@media (max-width: 767px) {
	.choreoclaim-stats {
		grid-template-columns: 1fr;
	}
}

.choreoclaim-stats .stat-label {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--primary);
}

.choreoclaim-stats .stat-value {
	font-family: "DM Serif Display", serif;
	font-size: var(--h2);
	line-height: 1;
}

/* ChoreoClaim: Account - Edit account form */
.woocommerce-EditAccountForm fieldset {
	border: none;
	margin: var(--space-m) 0 0;
	padding: 0;
}

.woocommerce-EditAccountForm fieldset legend {
	font-family: "DM Serif Display", serif;
	font-size: var(--h3);
	color: var(--white);
	padding: 0;
	margin: 0 0 var(--space-xs);
}

.woocommerce-EditAccountForm .form-row {
	margin-bottom: var(--space-s);
}

/* Password visibility toggle: base-family coloring instead of primary */
.woocommerce form .show-password-input {
	background: var(--base) !important;
	color: var(--base-ultra-dark) !important;
	border: none !important;
	border-radius: var(--radius) !important;
}

.woocommerce form .show-password-input:hover {
	background: var(--base-light) !important;
}

/* ChoreoClaim: Account - View order details table (dark, borderless, dividers) */
.woocommerce table.woocommerce-table--order-details {
	border: none;
	width: 100%;
	border-collapse: collapse;
}

.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.woocommerce-table--order-details td {
	border: none;
	padding: var(--space-xs) 0;
	color: var(--white);
}

.woocommerce table.woocommerce-table--order-details tbody tr,
.woocommerce table.woocommerce-table--order-details tfoot tr {
	border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}

.woocommerce table.woocommerce-table--order-details tfoot th {
	text-align: left;
	color: var(--base-light);
	font-weight: 400;
}

/* Kill the theme's row striping / white blocks in the order table */
.woocommerce table.woocommerce-table--order-details tbody tr,
.woocommerce table.woocommerce-table--order-details tfoot tr,
.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.woocommerce-table--order-details td {
	background: transparent !important;
}

.woocommerce table.woocommerce-table--order-details tfoot td {
	color: var(--white);
}

/* "x 1" quantity chip */
.woocommerce-table--order-details .product-quantity {
	background: transparent !important;
	color: var(--base-light);
	font-weight: 400;
}

/* Order status line: "Order #263 was placed on ... and is currently ..." —
   Woo wraps the values in <mark> which defaults to a white highlight. */
.woocommerce-MyAccount-content mark {
	background: color-mix(in srgb, var(--white) 10%, transparent);
	color: var(--white);
	padding: 0.1em 0.5em;
	border-radius: var(--radius);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   ChoreoClaim: WS Form styling (checkout + certificate registration)
   ------------------------------------------------------------------- */

/* Section headings: "(n) Title" — WS Form hides legends by default
   (screen-reader clip); unhide and style them. */
.wsf-form {
	counter-reset: cc-wsf-section;
}

/* WS Form hides legends with `.wsf-form .wsf-hidden-element { ... !important }`,
   so the unhide needs matching specificity + !important. */
.wsf-form fieldset > legend.wsf-hidden-element,
.wsf-form fieldset > legend {
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	white-space: normal !important;
	float: left;
	width: 100% !important;
	height: auto !important;
	margin: 0 0 var(--space-xs) !important;
	padding: 0 !important;
	border: 0 !important;
	display: flex !important;
	align-items: center;
	gap: var(--space-xs);
	font-family: "DM Serif Display", serif !important;
	font-size: var(--h3) !important;
	font-weight: 400;
	line-height: 1.2;
	color: var(--white) !important;
}

.wsf-form fieldset > legend::before {
	counter-increment: cc-wsf-section;
	content: counter(cc-wsf-section);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.5em;
	block-size: 1.5em;
	border: 1px solid var(--primary);
	border-radius: var(--radius-circle);
	color: var(--primary);
	font-family: var(--wsf-form-font-family, inherit);
	font-size: 0.5em;
	font-weight: 600;
}

/* Dark-theme WS Form fields: override WS Form's own style variables so
   every field type (select, textarea, datepicker, ...) themes consistently
   with the text inputs ACSS already styles. */
.wsf-form {
	--wsf-field-color-background: var(--base-ultra-dark);
	--wsf-field-color: var(--white);
	--wsf-field-border-color: oklch(0.35 0.036 270.533); /* matches ACSS-styled text inputs */
}

/* Selects & textareas: same treatment as text inputs (matches the
   .cc-registration input rule: dark bg, 1.5px border, radius-xl, padding) */
.wsf-form select,
.wsf-form textarea {
	background-color: var(--base-ultra-dark) !important;
	color: var(--white) !important;
	border: 1.5px solid var(--base-semi-dark) !important;
	border-radius: var(--radius-xl) !important;
	padding: var(--space-xs) !important;
}

/* Baseline text color inside forms: WS Form defaults to black — unreadable
   on the dark theme. Covers <b>, table cells, list items in notices, etc.
   (!important: WS Form's base stylesheet loads later and re-sets it.) */
.wsf-form {
	color: var(--white) !important;
}

/* Field labels: white on the dark theme. Radio/checkbox group labels
   render as div.wsf-label, so cover both. */
.wsf-form .wsf-label,
.wsf-form div.wsf-label {
	color: var(--white) !important;
}

/* Detail / helper text under labels and section titles */
.wsf-form .wsf-help,
.wsf-form .wsf-help-pre,
.wsf-form .wsf-help-post {
	color: var(--white) !important;
}

/* Inline choice rows (radios/checkboxes): circle and label on one line,
   text to the right of its control, vertically centered. */
.wsf-form div.wsf-inline {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0.5em;
	position: relative;
	vertical-align: middle;
	max-width: 100%;
}

.wsf-form .wsf-inline label {
	margin: 0 !important;
	display: inline !important;
	white-space: normal;
	flex: 1 1 auto;
	min-width: 0;
}

/* WS Form absolutely positions radios/checkboxes over the label's left
   margin, which overlaps the text. Put them back in the flex flow
   (position: relative keeps the ::after checkmark anchored to the input)
   and let the flex gap handle spacing. */
.wsf-form .wsf-inline input[type="radio"],
.wsf-form .wsf-inline input[type="checkbox"] {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	flex: 0 0 auto;
}

.wsf-form .wsf-inline input[type="radio"] + label,
.wsf-form .wsf-inline input[type="checkbox"] + label {
	margin-left: 0 !important;
}

/* Video upload dropzone (registration form field 100): dashed drop area
   per reference. Native file input stays visible so the chosen filename
   shows; the browse control is styled as a gold outline pill. */
#wsf-1-field-wrapper-100 {
	border: 1.5px dashed var(--base-semi-dark);
	border-radius: var(--radius-xl);
	padding: var(--space-l) var(--space-m);
	text-align: center;
}

#wsf-1-field-wrapper-100::before {
	content: "\2191";
	display: block;
	font-size: var(--h2);
	line-height: 1;
	color: var(--primary);
	margin-bottom: var(--space-xs);
}

#wsf-1-field-wrapper-100 .wsf-label {
	display: block;
	font-size: var(--text-m) !important;
	color: var(--white) !important;
	margin-bottom: var(--space-xs) !important;
}

#wsf-1-field-wrapper-100 input[type="file"] {
	border: none !important;
	background: transparent !important;
	color: var(--base-light);
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 !important;
}

#wsf-1-field-wrapper-100 input[type="file"]::file-selector-button {
	background: transparent;
	border: 1px solid var(--primary);
	color: var(--primary);
	font-weight: 600;
	padding: 0.5em 1.2em;
	border-radius: var(--radius-circle);
	margin-right: 1em;
	cursor: pointer;
}

#wsf-1-field-wrapper-100 input[type="file"]::file-selector-button:hover {
	background: var(--primary);
	color: var(--base-ultra-dark);
}

#wsf-1-field-wrapper-100 .wsf-help {
	display: block;
	margin-top: var(--space-xs);
}

/* Focused fields: --primary border */
.wsf-form input:focus,
.wsf-form select:focus,
.wsf-form textarea:focus {
	border-color: var(--primary) !important;
	outline: none;
}

/* Video-upload guidelines notice (HTML field 99): panel + spec table
   per reference — labels white semibold left, values muted right. */
#wsf-1-field-wrapper-99 [data-text-editor] {
	background: var(--base-dark);
	border-radius: var(--radius-l);
	padding: var(--space-m);
}

#wsf-1-field-wrapper-99 p {
	margin: 0 0 var(--space-xs);
}

#wsf-1-field-wrapper-99 table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--space-s);
}

#wsf-1-field-wrapper-99 td {
	padding: var(--space-xs) 0;
	border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
	vertical-align: top;
}

#wsf-1-field-wrapper-99 td:first-child b {
	color: var(--white);
	font-weight: 600;
}

#wsf-1-field-wrapper-99 td:last-child {
	text-align: right;
}

#wsf-1-field-wrapper-99 td:last-child b {
	color: var(--base-light);
	font-weight: 400;
}

/* The "Resolution" line is a <p> with two <b>s — lay it out like a table row */
#wsf-1-field-wrapper-99 p:has(> b + b) {
	display: flex;
	justify-content: space-between;
	gap: var(--space-s);
	margin-top: var(--space-s);
}

#wsf-1-field-wrapper-99 p:has(> b + b) > b:first-child {
	color: var(--white);
	font-weight: 600;
}

#wsf-1-field-wrapper-99 p:has(> b + b) > b:last-child {
	color: var(--base-light);
	font-weight: 400;
	text-align: right;
}

/* Standalone checkbox rows (consent/terms — not inside .wsf-inline):
   center the absolutely-positioned box against the (wrapping) label and
   reserve enough left margin that text clears the box. */
.wsf-form div:not(.wsf-inline) > input[type="checkbox"].wsf-field {
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	transform: translateY(-50%) !important;
}

.wsf-form div:not(.wsf-inline) > input[type="checkbox"].wsf-field + label,
.wsf-form div:not(.wsf-inline) > input[type="checkbox"].wsf-field ~ label {
	display: inline-block;
	margin-left: calc(29px + 0.6em) !important;
	white-space: normal;
}

.wsf-form div:has(> input[type="checkbox"].wsf-field) {
	position: relative;
}

/* Field layout: 12-column grid (replaces WS Form's flex + width-% system).
   Field wrappers keep their wsf-{bp}-{n} classes; we map them to spans. */
.wsf-form .wsf-grid.wsf-fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-s);
	align-items: end;
}

.wsf-form .wsf-grid.wsf-fields > [class*="wsf-"] {
	width: auto !important; /* neutralize WS Form's percentage widths inside grid tracks */
	max-width: none !important;
	min-width: 0;
	grid-column: span 12;
}

.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-1  { grid-column: span 1; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-2  { grid-column: span 2; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-3  { grid-column: span 3; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-4  { grid-column: span 4; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-5  { grid-column: span 5; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-6  { grid-column: span 6; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-7  { grid-column: span 7; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-8  { grid-column: span 8; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-9  { grid-column: span 9; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-10 { grid-column: span 10; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-11 { grid-column: span 11; }
.wsf-form .wsf-grid.wsf-fields > .wsf-extra-small-12 { grid-column: span 12; }

@media (min-width: 992px) {
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-1  { grid-column: span 1; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-2  { grid-column: span 2; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-3  { grid-column: span 3; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-4  { grid-column: span 4; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-5  { grid-column: span 5; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-6  { grid-column: span 6; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-7  { grid-column: span 7; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-8  { grid-column: span 8; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-9  { grid-column: span 9; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-10 { grid-column: span 10; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-11 { grid-column: span 11; }
	.wsf-form .wsf-grid.wsf-fields > .wsf-large-12 { grid-column: span 12; }
}

/* Checked radios: fill --primary and show a checkmark */
.wsf-form input[type="radio"]:checked {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
}

.wsf-form input[type="radio"]:checked::after {
	content: "\2713" !important;
	position: absolute;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	color: var(--base-ultra-dark) !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

/* Section titles stay white — overrides the muted legend rule in the
   cc-registration class (which predates the DM Serif heading treatment). */
.cc-registration .wsf-form fieldset > legend {
	color: var(--white) !important;
}

/* Radios & checkboxes: center the control with its label text */
.wsf-form input[type="radio"],
.wsf-form input[type="checkbox"] {
	margin: 0;
	vertical-align: middle;
}

.wsf-form input[type="radio"] + label,
.wsf-form input[type="checkbox"] + label {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	vertical-align: middle;
}

/* ChoreoClaim: Account - Login form (portal login card) */
.woocommerce-form-login .form-row {
	margin-bottom: var(--space-s);
}

.woocommerce-form-login label {
	color: var(--white);
	font-size: var(--text-s);
}

.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"] {
	width: 100%;
	background-color: var(--base-ultra-dark);
	border: 1.5px solid var(--base-semi-dark);
	border-radius: var(--radius-xl);
	padding: var(--space-xs);
	color: var(--white);
}

.woocommerce-form-login input:focus {
	border-color: var(--primary);
	outline: none;
}

/* Remember me: checkbox + text on one line */
.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--base-light);
	font-size: var(--text-xs);
	margin-bottom: var(--space-xs);
}

/* Submit: gold primary, full width */
.woocommerce-form-login button[type="submit"] {
	width: 100%;
	background: var(--primary);
	color: var(--base-ultra-dark);
	border: none;
	border-radius: var(--btn-radius, 200px);
	padding: var(--btn-padding-block, 1em) var(--btn-padding-inline, 1.4em);
	font-weight: 700;
	cursor: pointer;
}

.woocommerce-form-login button[type="submit"]:hover {
	background: var(--primary-hover);
}

.woocommerce-LostPassword {
	text-align: center;
	margin: var(--space-xs) 0 0;
	font-size: var(--text-xs);
}

.woocommerce-LostPassword a {
	color: var(--primary);
}