/**
 * Styles for markup this plugin renders itself -- the [yh_my_requests] and
 * [yh_next_session] output, the identity card, and the mobile nav drawer --
 * plus the account shell that Bricks Account v2 cannot express on its own.
 *
 * Account v2 lays .woocommerce out as a flex row. The identity card and
 * <nav> are wrapped as .yh-nav-drawer (Woo's before/after-navigation hooks)
 * so desktop can treat them as one grid track and mobile can slide that
 * track in. Without the wrap, who | nav | content become three columns.
 */
/*
 * Two-column shell: identity + nav share the first track, content spans
 * both rows. :has() keeps the login / lost-password screens (no nav) as a
 * single column. !important beats Bricks' #brxe-* flex rules on .woocommerce.
 */
body.woocommerce-account .woocommerce:not(#brx-content):has(.woocommerce-MyAccount-navigation) {
	display: grid !important;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 0 36px !important;
	align-items: start !important;
}

body.woocommerce-account .yh-nav-toggle,
body.woocommerce-account .yh-nav-close {
	display: none;
}

body.woocommerce-account .yh-nav-overlay {
	display: none;
}

body.woocommerce-account .yh-nav-drawer {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100%;
	border-top: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-width: 0;
}

body.woocommerce-account .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	body.woocommerce-account .woocommerce:not(#brx-content):has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
		gap: 16px !important;
	}

	body.woocommerce-account .yh-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px 18px;
		border: 2px solid #dd5519;
		background: #fff;
		color: #dd5519;
		font-family: Oswald, "Arial Narrow", Arial, sans-serif;
		font-weight: 600;
		font-size: 13px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
	}

	body.woocommerce-account .yh-nav-drawer {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 100001;
		width: min(320px, 88vw);
		overflow: auto;
		background: #fff;
		transform: translateX(-110%);
		transition: transform 0.22s ease;
		grid-column: auto;
		grid-row: auto;
	}

	body.yh-nav-open .yh-nav-drawer {
		transform: none;
		box-shadow: 8px 0 24px rgba(23, 25, 30, 0.18);
	}

	body.woocommerce-account .yh-nav-close {
		display: block;
		width: 100%;
		padding: 12px 18px;
		border: 0;
		border-bottom: 1.5px solid #ded9d3;
		background: #fff;
		color: #7a7a7a;
		font-family: Oswald, "Arial Narrow", Arial, sans-serif;
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
	}

	body.yh-nav-open .yh-nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(23, 25, 30, 0.55);
	}

	body.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: auto;
	}

	body.yh-nav-open {
		overflow: hidden;
	}
}

/* Identity card. WooCommerce fires woocommerce_before_account_navigation
   outside and above the <nav>, so this is the nav's SIBLING, never its
   child. Carrying every border but the bottom lets it butt against the
   nav box's own top border and read as a single box. */
.yh-who {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 18px;
	background: #fff8f4;
	border: 1.5px solid #ded9d3;
	border-bottom: 0;
}

.yh-who__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: #17191e;
	color: #fff;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.05em;
}

.yh-who__id {
	min-width: 0;
}

.yh-who__id b {
	display: block;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #17191e;
}

.yh-who__id small {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #7a7a7a;
	/* Long addresses must wrap rather than widen the sidebar. */
	overflow-wrap: anywhere;
}

.yh-next {
	display: grid;
	gap: 9px;
	padding: 18px 20px;
	border: 1.5px solid #ded9d3;
	background: #fff;
}

.yh-next--empty {
	display: block;
	font-size: 14px;
	color: #7a7a7a;
}

.yh-next__row {
	display: grid;
	grid-template-columns: 66px 1fr;
	gap: 10px;
	font-size: 15px;
}

.yh-next__row span {
	padding-top: 2px;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #7a7a7a;
}

.yh-next__row b {
	color: #17191e;
}

.yh-next__soon {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 9px;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 11px;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #3fb87e;
	border: 1.5px solid #3fb87e;
}

.yh-requests {
	border: 1.5px solid #ded9d3;
	background: #fff;
}

.yh-requests--empty {
	padding: 18px 20px;
	font-size: 14px;
	color: #7a7a7a;
}

.yh-request {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	border-bottom: 1.5px solid #efece8;
}

.yh-request:last-child {
	border-bottom: 0;
}

.yh-request__type {
	flex: none;
	width: 76px;
	padding: 4px 0;
	text-align: center;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	background: #dd5519;
}

.yh-request__type--trial {
	background: #1096c2;
}

.yh-request__body {
	min-width: 0;
}

.yh-request__body b {
	display: block;
	font-size: 13.5px;
	color: #17191e;
}

.yh-request__body small {
	display: block;
	font-size: 12.5px;
	color: #7a7a7a;
}

.yh-request__status {
	flex: none;
	margin-left: auto;
	padding: 4px 10px;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1.5px solid;
}

.yh-request__status--pending {
	color: #f38c0c;
	border-color: #f38c0c;
}

.yh-request__status--ok {
	color: #3fb87e;
	border-color: #3fb87e;
}

.yh-request__status--off {
	color: #7a7a7a;
	border-color: #ded9d3;
}

@media (max-width: 600px) {
	.yh-request {
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.yh-request__status {
		margin-left: 0;
	}
}

/*
 * Edit Account + Orders (Account v2).
 *
 * The states stay Bricks': form-field / form-submit on edit-account, and
 * the wooAccountOrders query loop on orders. This only restyles them to
 * the site language -- Oswald labels outside the box, 1.5px frames, sharp
 * corners, orange actions. Floating labels are a v2 option; they fight
 * that language, so they are pinned back to a static label above the input.
 */
body.woocommerce-account .brxe-woocommerce-account-edit-account-form {
	max-width: 640px;
}

body.woocommerce-account .brxe-woocommerce-account-v2-state-edit-account.bricks-floating-label .brxe-woocommerce-form-field,
body.woocommerce-account .brxe-woocommerce-account-page-v2.bricks-floating-label .brxe-woocommerce-form-field {
	--brx-field-height: auto;
	position: static;
	margin-bottom: 0;
}

body.woocommerce-account .brxe-woocommerce-form-field {
	width: 100%;
	margin: 0;
}

body.woocommerce-account .brxe-woocommerce-form-field .form-row {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

body.woocommerce-account .brxe-woocommerce-form-field label {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 7px !important;
	padding: 0 !important;
	background: transparent !important;
	pointer-events: auto !important;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #17191e;
}

body.woocommerce-account .brxe-woocommerce-form-field label .required,
body.woocommerce-account .brxe-woocommerce-form-field label abbr.required {
	text-decoration: none;
	border: 0;
	color: #dd5519;
}

body.woocommerce-account .brxe-woocommerce-form-field .woocommerce-input-wrapper,
body.woocommerce-account .brxe-woocommerce-form-field .password-input {
	display: block;
	position: relative;
	width: 100%;
}

body.woocommerce-account .brxe-woocommerce-form-field input.input-text,
body.woocommerce-account .brxe-woocommerce-form-field input[type="text"],
body.woocommerce-account .brxe-woocommerce-form-field input[type="email"],
body.woocommerce-account .brxe-woocommerce-form-field input[type="password"],
body.woocommerce-account .brxe-woocommerce-form-field input[type="tel"],
body.woocommerce-account .brxe-woocommerce-form-field select,
body.woocommerce-account .brxe-woocommerce-form-field textarea {
	width: 100%;
	height: auto;
	min-height: 48px;
	padding: 14px;
	border: 1.5px solid #ded9d3;
	border-radius: 0;
	background: #fff;
	font-family: Lato, system-ui, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #333;
	box-shadow: none;
}

body.woocommerce-account .brxe-woocommerce-form-field input:focus,
body.woocommerce-account .brxe-woocommerce-form-field select:focus,
body.woocommerce-account .brxe-woocommerce-form-field textarea:focus {
	outline: 0;
	border-color: #dd5519;
}

/* First + last name share a row; display name and email take the full width. */
body.woocommerce-account #brxe-36ee7d {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
	width: 100%;
}

body.woocommerce-account #brxe-36ee7d > :nth-child(n + 3) {
	grid-column: 1 / -1;
}

body.woocommerce-account .brxe-woocommerce-account-edit-account-form fieldset,
body.woocommerce-account #brxe-549686 {
	margin: 24px 0 8px;
	padding: 18px 20px 8px;
	border: 1.5px solid #ded9d3;
	background: #fff;
	display: grid;
	gap: 16px;
}

body.woocommerce-account .brxe-woocommerce-account-edit-account-form legend,
body.woocommerce-account #brxe-7f87df {
	padding: 0 8px;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #17191e;
}

body.woocommerce-account .brxe-woocommerce-form-submit {
	margin-top: 20px;
}

body.woocommerce-account .brxe-woocommerce-form-submit button[type="submit"],
body.woocommerce-account .brxe-woocommerce-account-v2-state-edit-account button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border: 0;
	border-radius: 0;
	background: #dd5519;
	color: #fff;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

body.woocommerce-account .brxe-woocommerce-form-submit button[type="submit"]:hover,
body.woocommerce-account .brxe-woocommerce-account-v2-state-edit-account button[type="submit"]:hover {
	background: #c24714;
}

/* Orders: v2 query-loop cards, not the Woo table. */
body.woocommerce-account #brxe-d7d87c {
	gap: 16px !important;
}

body.woocommerce-account #brxe-3789f8 {
	background: #fff !important;
	border: 1.5px solid #ded9d3;
	border-radius: 0 !important;
	padding: 18px 20px !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.woocommerce-account #brxe-540aa4,
body.woocommerce-account #brxe-dd7412,
body.woocommerce-account #brxe-1a038a,
body.woocommerce-account #brxe-60aed3 {
	font-size: 15px;
	line-height: 1.5;
	color: #17191e;
}

body.woocommerce-account #brxe-540aa4 b,
body.woocommerce-account #brxe-dd7412 b,
body.woocommerce-account #brxe-1a038a b,
body.woocommerce-account #brxe-60aed3 b {
	font-weight: 700;
}

body.woocommerce-account #brxe-cc3beb {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 10px !important;
	border: 1.5px solid #f38c0c !important;
	border-radius: 0 !important;
	background: #fff !important;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #f38c0c !important;
	line-height: 1.5;
}

body.woocommerce-account .brxe-woocommerce-account-v2-state-orders .brxe-button,
body.woocommerce-account #brxe-899ab2,
body.woocommerce-account #brxe-899ab2 a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 18px;
	border: 0;
	border-radius: 0;
	background: #dd5519 !important;
	color: #fff !important;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-account .brxe-woocommerce-account-v2-state-orders .brxe-button:hover,
body.woocommerce-account #brxe-899ab2:hover,
body.woocommerce-account #brxe-899ab2 a:hover {
	background: #c24714 !important;
	color: #fff !important;
}

body.woocommerce-account #brxe-ebe4b0 {
	border: 1.5px solid #ded9d3;
	background: #fff;
	color: #7a7a7a;
}

/* View order: same cards and sharp corners. The v2 tree uses 6px
   radius and grey fills on the summary / address blocks. */
body.woocommerce-account .brxe-woocommerce-account-v2-state-view-order .brxe-div,
body.woocommerce-account .brxe-woocommerce-account-v2-state-view-order .brxe-block,
body.woocommerce-account .brxe-woocommerce-account-v2-state-view-order .brxe-heading {
	border-radius: 0 !important;
}

body.woocommerce-account #brxe-e43516,
body.woocommerce-account #brxe-a3b4a3,
body.woocommerce-account #brxe-ca6c76,
body.woocommerce-account #brxe-8d6696 {
	background: #fff !important;
	border: 1.5px solid #ded9d3;
}

body.woocommerce-account .brxe-woocommerce-account-v2-state-view-order .brxe-heading {
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #17191e;
}

body.woocommerce-account .brxe-woocommerce-account-v2-state-view-order .brxe-button,
body.woocommerce-account #brxe-26efeb,
body.woocommerce-account #brxe-26efeb a,
body.woocommerce-account #brxe-6310f1,
body.woocommerce-account #brxe-6310f1 a,
body.woocommerce-account #brxe-46ed1e,
body.woocommerce-account #brxe-46ed1e a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 18px;
	border-radius: 0;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-account #brxe-26efeb,
body.woocommerce-account #brxe-26efeb a {
	background: transparent !important;
	border: 2px solid #dd5519;
	color: #dd5519 !important;
}

body.woocommerce-account #brxe-6310f1,
body.woocommerce-account #brxe-6310f1 a,
body.woocommerce-account #brxe-46ed1e,
body.woocommerce-account #brxe-46ed1e a {
	background: #dd5519 !important;
	border: 0;
	color: #fff !important;
}

@media (max-width: 900px) {
	body.woocommerce-account .brxe-woocommerce-form-submit button[type="submit"],
	body.woocommerce-account .brxe-woocommerce-account-v2-state-edit-account button[type="submit"],
	body.woocommerce-account .brxe-woocommerce-account-v2-state-orders .brxe-button,
	body.woocommerce-account #brxe-899ab2 {
		width: 100%;
	}
}

@media (max-width: 600px) {
	body.woocommerce-account #brxe-36ee7d {
		grid-template-columns: 1fr;
	}

	body.woocommerce-account #brxe-36ee7d > :nth-child(n + 3) {
		grid-column: auto;
	}

	body.woocommerce-account #brxe-d7d87c {
		grid-template-columns: 1fr !important;
	}
}

/*
 * Dashboard panels (template 1129). Bricks lays the two top cards as a
 * wrapping flex row with flex-start, so NEXT SESSION stays short and MY
 * KIDS drops onto its own row as soon as the row is under ~660px. Grid
 * keeps them a pair of equal-height tracks until the phone breakpoint.
 */
body.woocommerce-account #brxe-lwphkl {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
}

body.woocommerce-account #brxe-gcdqgx,
body.woocommerce-account #brxe-maujwx {
	display: flex !important;
	flex-direction: column;
	flex-basis: auto !important;
	min-width: 0;
	height: 100%;
}

body.woocommerce-account #brxe-jrkbsp,
body.woocommerce-account #brxe-fozife {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
}

body.woocommerce-account #brxe-duxkwm,
body.woocommerce-account #brxe-ksotqh,
body.woocommerce-account #brxe-jrkbsp .yh-next,
body.woocommerce-account #brxe-jrkbsp .yh-next--empty {
	flex: 1 1 auto;
}

/*
 * Makeup (template 1119). Same wrap trap: the 340px How-it-works column
 * falls under the form once the row is under ~780px. Keep it a sidebar
 * until the account shell itself stacks.
 */
body.woocommerce-account #brxe-xenjgb {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start !important;
	flex-wrap: nowrap !important;
}

body.woocommerce-account #brxe-fbzzqg,
body.woocommerce-account #brxe-xpouir {
	flex-basis: auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
}

body.woocommerce-account #brxe-xpouir {
	position: sticky;
	top: 24px;
}

/*
 * Add New Kid popup (template 267). Pro Forms ships its own chrome;
 * this pins the fields to the same Oswald / 1.5px / sharp language as
 * Edit Account. The orange title is already a Bricks heading; we stop
 * it stretching into a full-width slab.
 */
.brx-popup[data-popup-id="267"] .brx-popup-content,
#brx-popup-267 .brx-popup-content {
	padding: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
}

.brx-popup[data-popup-id="267"] .brx-popup-close,
#brx-popup-267 .brx-popup-close {
	border-radius: 0 !important;
}

#brxe-uteuzp {
	padding: 36px 40px !important;
	background: #fff !important;
	align-items: flex-start !important;
}

#brxe-yoaocw {
	display: inline-block !important;
	width: auto !important;
	margin: 0 0 8px !important;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	color: #fff !important;
	background: #dd5519 !important;
}

#brxe-hzvqgm {
	width: 100%;
}

#brxe-zrqjaw,
#brxe-hyxxez {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 16px !important;
	width: 100% !important;
	flex-wrap: nowrap !important;
}

#brxe-uteuzp label,
#brxe-hzvqgm label {
	display: block;
	margin: 0 0 7px;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #17191e;
}

#brxe-uteuzp input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]),
#brxe-uteuzp select,
#brxe-uteuzp textarea,
#brxe-hzvqgm input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]),
#brxe-hzvqgm select,
#brxe-hzvqgm textarea {
	width: 100%;
	min-height: 48px;
	padding: 13px 14px;
	border: 1.5px solid #ded9d3;
	border-radius: 0;
	background: #fff;
	font-family: Lato, system-ui, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #333;
	box-shadow: none;
}

#brxe-uteuzp textarea,
#brxe-hzvqgm textarea {
	min-height: 96px;
}

#brxe-uteuzp input:focus,
#brxe-uteuzp select:focus,
#brxe-uteuzp textarea:focus,
#brxe-hzvqgm input:focus,
#brxe-hzvqgm select:focus,
#brxe-hzvqgm textarea:focus {
	outline: 0;
	border-color: #dd5519;
}

#brxe-vapgdt {
	margin-top: 8px;
}

#brxe-hxaqog,
#brxe-hxaqog button,
#brxe-hzvqgm button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border: 0;
	border-radius: 0;
	background: #dd5519 !important;
	color: #fff !important;
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

#brxe-hxaqog:hover,
#brxe-hxaqog button:hover,
#brxe-hzvqgm button[type="submit"]:hover {
	background: #c24714 !important;
}

@media (max-width: 900px) {
	body.woocommerce-account #brxe-lwphkl,
	body.woocommerce-account #brxe-xenjgb {
		grid-template-columns: 1fr;
	}

	body.woocommerce-account #brxe-xpouir {
		position: static;
		width: 100% !important;
	}
}

@media (max-width: 600px) {
	#brxe-uteuzp {
		padding: 24px 18px !important;
	}

	#brxe-zrqjaw,
	#brxe-hyxxez {
		grid-template-columns: 1fr !important;
	}

	#brxe-hxaqog,
	#brxe-hxaqog button,
	#brxe-hzvqgm button[type="submit"] {
		width: 100%;
	}
}