/**
 * Fire Shop — My Account styles.
 *
 * Premium minimalist account dashboard. Matches the design language
 * of the checkout and shop pages (Instrument Sans, dark accents,
 * compact section headings).
 *
 * @package FireShop
 * @since   1.0.0
 */

/* Override block theme body constraints — this stylesheet only loads on the my-account page */
body {
	max-width: none !important;
	margin: 0 !important;
}

/* ── Page wrapper ── */
.fire-my-account-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--fire-space-xl, 40px) var(--fire-space-md, 16px);
	font-family: var(--fire-font-body);
	min-height: calc(100vh - 200px);
}

.fire-my-account-wrap > h1 {
	font-family: var(--fire-font-body);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 var(--fire-space-lg, 24px) 0;
}

/* ── Grid layout ── */
.fire-my-account {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--fire-space-xl, 40px);
	font-family: var(--fire-font-body);
}

@media (max-width: 768px) {
	.fire-my-account {
		grid-template-columns: 1fr;
		gap: var(--fire-space-md, 16px);
	}
}

/* ── Navigation ── */
.fire-my-account__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fire-my-account__nav li {
	margin: 0;
}

.fire-my-account__nav a {
	display: block;
	padding: 8px 12px;
	font-family: var(--fire-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--fire-text-muted);
	text-decoration: none;
	border-radius: var(--fire-radius-sm, 4px);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.fire-my-account__nav a:hover {
	color: var(--fire-text);
	background-color: var(--fire-surface-alt);
}

.fire-my-account__nav li.is-active a {
	background-color: var(--fire-primary);
	color: #fff;
	font-weight: 600;
}

@media (max-width: 768px) {
	.fire-my-account__nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	.fire-my-account__nav a {
		padding: 6px 10px;
		font-size: 12px;
	}
}

/* ── Content area ── */
.fire-my-account__content {
	min-width: 0;
	font-family: var(--fire-font-body);
}

.fire-my-account__content h2 {
	font-family: var(--fire-font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fire-text-muted);
	margin: 0 0 var(--fire-space-sm, 8px) 0;
}

.fire-my-account__content p {
	font-family: var(--fire-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--fire-text);
	margin: 0 0 var(--fire-space-md, 16px) 0;
}

.fire-my-account__content a {
	color: var(--fire-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ── Dashboard widgets ── */
.fire-dashboard-widgets {
	display: grid;
	gap: var(--fire-space-md, 16px);
	margin-top: var(--fire-space-md, 16px);
}

.fire-dashboard-widget {
	padding: var(--fire-space-md, 16px);
	background-color: var(--fire-surface, #fff);
	border: 1px solid var(--fire-border);
	border-radius: var(--fire-radius-sm, 4px);
}

.fire-dashboard-widget h3 {
	font-family: var(--fire-font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fire-text-muted);
	margin: 0 0 var(--fire-space-sm, 8px) 0;
}

.fire-dashboard-widget p {
	font-size: 13px;
	color: var(--fire-text-muted);
	margin: 0;
}

/* ── Tables ── */
.fire-my-account .fire-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--fire-font-body);
	font-size: 13px;
}

.fire-my-account .fire-table th,
.fire-my-account .fire-table td {
	padding: 10px var(--fire-space-md, 16px);
	text-align: left;
	border-bottom: 1px solid var(--fire-border);
}

.fire-my-account .fire-table thead th {
	font-family: var(--fire-font-body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fire-text-muted);
	background-color: transparent;
	border-bottom: 2px solid var(--fire-border);
}

.fire-my-account .fire-table tbody tr:last-child td {
	border-bottom: none;
}

/* ── Form inputs (addresses, account details) ── */
.fire-my-account__content input[type="text"],
.fire-my-account__content input[type="email"],
.fire-my-account__content input[type="password"],
.fire-my-account__content select,
.fire-my-account__content textarea {
	width: 100%;
	max-width: 400px;
	padding: 10px var(--fire-space-md, 16px);
	font-family: var(--fire-font-body);
	font-size: 14px;
	border: 1px solid transparent;
	background-color: var(--fire-surface-alt);
	border-radius: var(--fire-radius-sm, 4px);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fire-my-account__content input:focus,
.fire-my-account__content select:focus,
.fire-my-account__content textarea:focus {
	outline: none;
	border-color: var(--fire-border);
	background-color: var(--fire-surface, #fff);
}

.fire-my-account__content label {
	display: block;
	font-family: var(--fire-font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--fire-text-muted);
	margin-bottom: 4px;
}

.fire-my-account__content fieldset {
	margin: var(--fire-space-md, 16px) 0;
	padding: var(--fire-space-md, 16px);
	border: 1px solid var(--fire-border);
	border-radius: var(--fire-radius-sm, 4px);
}

.fire-my-account__content fieldset legend {
	font-family: var(--fire-font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fire-text-muted);
	padding: 0 var(--fire-space-sm, 8px);
}

/* ── Buttons ── */
.fire-my-account .fire-btn,
.fire-my-account button[type="submit"] {
	font-family: var(--fire-font-body);
	font-size: 14px;
	font-weight: 600;
	padding: 10px var(--fire-space-md, 16px);
	border: none;
	border-radius: var(--fire-radius-sm, 4px);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fire-my-account .fire-btn,
.fire-my-account button[type="submit"] {
	background-color: var(--fire-primary);
	color: #fff;
}

.fire-my-account .fire-btn:hover,
.fire-my-account button[type="submit"]:hover {
	background-color: var(--fire-primary-hover);
}

/* ── Addresses ── */
.fire-addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fire-space-lg, 24px);
}

@media (max-width: 768px) {
	.fire-addresses {
		grid-template-columns: 1fr;
	}
}

.fire-address-form label {
	display: block;
	font-family: var(--fire-font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--fire-text-muted);
	margin-bottom: 4px;
}

.fire-address-form input[type="text"],
.fire-address-form input[type="email"] {
	width: 100%;
	padding: 10px var(--fire-space-md, 16px);
	font-family: var(--fire-font-body);
	font-size: 14px;
	border: 1px solid transparent;
	background-color: var(--fire-surface-alt);
	border-radius: var(--fire-radius-sm, 4px);
}

/* ── Order detail ── */
.fire-order-addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fire-space-lg, 24px);
	margin-top: var(--fire-space-lg, 24px);
}

@media (max-width: 768px) {
	.fire-order-addresses {
		grid-template-columns: 1fr;
	}
}

.fire-order-address h3 {
	font-family: var(--fire-font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fire-text-muted);
	margin: 0 0 var(--fire-space-sm, 8px) 0;
}

.fire-order-address address {
	font-family: var(--fire-font-body);
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fire-text);
}

/* ── Pagination ── */
.fire-pagination {
	margin-top: var(--fire-space-lg, 24px);
	display: flex;
	gap: 4px;
}

.fire-pagination a {
	display: inline-block;
	padding: 6px 10px;
	font-family: var(--fire-font-body);
	font-size: 13px;
	border: 1px solid var(--fire-border);
	border-radius: var(--fire-radius-sm, 4px);
	text-decoration: none;
	color: var(--fire-text-muted);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fire-pagination a:hover {
	background-color: var(--fire-surface-alt);
	color: var(--fire-text);
}

.fire-pagination a.is-active {
	background-color: var(--fire-primary);
	color: #fff;
	border-color: var(--fire-primary);
}

/* ── Login form ── */
.fire-my-account-login {
	max-width: 380px;
	margin: 0 auto;
	padding: var(--fire-space-xl, 40px) 0;
	font-family: var(--fire-font-body);
}

.fire-my-account-login h2 {
	font-family: var(--fire-font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fire-text-muted);
	margin: 0 0 var(--fire-space-lg, 24px) 0;
}

.fire-my-account-login .fire-form p {
	margin: 0 0 var(--fire-space-md, 16px) 0;
}

.fire-my-account-login .fire-form label {
	display: block;
	font-family: var(--fire-font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--fire-text-muted);
	margin-bottom: 6px;
}

.fire-my-account-login .fire-form input[type="text"],
.fire-my-account-login .fire-form input[type="password"] {
	width: 100%;
	padding: 12px var(--fire-space-md, 16px);
	font-family: var(--fire-font-body);
	font-size: 14px;
	border: 1px solid transparent;
	background-color: var(--fire-surface-alt, #f5f5f5);
	border-radius: var(--fire-radius-sm, 4px);
	box-sizing: border-box;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fire-my-account-login .fire-form input[type="text"]:focus,
.fire-my-account-login .fire-form input[type="password"]:focus {
	outline: none;
	border-color: var(--fire-border);
	background-color: var(--fire-surface, #fff);
}

/* Remember me checkbox */
.fire-my-account-login .fire-form input[type="checkbox"] {
	margin-right: 6px;
	vertical-align: middle;
}

.fire-my-account-login .fire-form label:has(input[type="checkbox"]) {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: var(--fire-text-muted);
	cursor: pointer;
}

/* Login button — override any global pink/red button */
.fire-my-account-login .fire-btn,
.fire-my-account-login .fire-form button[type="submit"] {
	display: block;
	width: 100%;
}

/* Lost password link */
.fire-my-account-login .fire-form a {
	font-family: var(--fire-font-body);
	font-size: 13px;
	color: var(--fire-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.fire-my-account-login .fire-form a:hover {
	color: var(--fire-text);
}

/* Register section */
.fire-my-account-register {
	margin-top: var(--fire-space-xl, 32px);
	padding-top: var(--fire-space-xl, 32px);
	border-top: 1px solid var(--fire-border);
}

.fire-my-account-register .fire-btn-secondary {
	display: inline-block;
}

/* ── Notices ── */
.fire-my-account .fire-notice {
	font-family: var(--fire-font-body);
	font-size: 13px;
	padding: 10px var(--fire-space-md, 16px);
	border-radius: var(--fire-radius-sm, 4px);
	margin-bottom: var(--fire-space-md, 16px);
}

/* ── Privacy consent ── */
.fire-privacy-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--fire-space-sm, 8px);
	font-family: var(--fire-font-body);
	font-size: 13px;
}

.fire-privacy-consent input[type="checkbox"] {
	margin-top: 3px;
}

/* ── Empty states ── */
.fire-my-account__content > p:last-child:only-of-type {
	color: var(--fire-text-muted);
}