/**
 * DBJ Pigeon Shop - the account area.
 *
 * Built on the same palette and the same button as the pigeon pages and the
 * checkout, so the account looks like the rest of the shop. The tokens are
 * repeated here with fallbacks: the account styling is owned by the plugin and
 * must not depend on the theme's stylesheet being loaded first.
 */

.dbj-account {
	--dbj-navy: #4054b2;
	--dbj-navy-dark: #16163f;
	--dbj-green: #23a455;
	--dbj-green-dark: #1c8a48;
	--dbj-text: #16181a;
	--dbj-grey: #7a7a7a;
	--dbj-border: #e4e6ee;
	--dbj-surface: #ffffff;
	--dbj-radius: 12px;

	color: var(--dbj-text);
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 0px 64px;
	box-sizing: border-box;
}

.dbj-account *,
.dbj-account *::before,
.dbj-account *::after {
	box-sizing: border-box;
}

/* A button fallback, in case the pigeon stylesheet is not loaded. */
.dbj-account .dbj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dbj-account .dbj-btn--buy {
	background: var(--dbj-green);
	color: #fff;
}

.dbj-account .dbj-btn--buy:hover,
.dbj-account .dbj-btn--buy:focus {
	background: var(--dbj-green-dark);
	color: #fff;
}

.dbj-account .dbj-btn--ghost {
	background: transparent;
	border-color: var(--dbj-navy);
	color: var(--dbj-navy);
}

.dbj-account .dbj-btn--ghost:hover,
.dbj-account .dbj-btn--ghost:focus {
	background: var(--dbj-navy);
	color: #fff;
}

/* ------------------------------------------------------------------- Head --- */

/* The theme prints the page title above the account area. Every account screen
   brings its own heading, so the duplicate and its wrapper are dropped. The body
   carries no classes on this site, so the account is matched by its own markup. */
main.site-main:has(.dbj-account) > .page-header,
main.site-main:has(.dbj-account) > .entry-title {
	display: none;
}

/* ---------------------------------------------------------------- Notices --- */

/* The same treatment as the checkout: a quiet card in the shop's colours, with
   no icon-font glyph and no shouty button. */
main.site-main:has(.dbj-account) .woocommerce-notices-wrapper {
	margin-bottom: 20px;
}

main.site-main:has(.dbj-account) .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ------------------------------------------------------------------ Links --- */

/* The theme underlines every link inside the page content. Inside the account the
   underline is opt-in, so it is dropped here and put back where it helps. */
.page-content .dbj-account a,
.page-content .dbj-account a:hover,
.page-content .dbj-account a:focus,
.page-content .dbj-account a:active {
	text-decoration: none;
}

.page-content .dbj-account .dbj-account__lost,
.page-content .dbj-account .dbj-order__back a {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ Layout --- */

/* The theme keeps its content in a narrow column. The shop owns the full width,
   so the account is allowed the same room as the pigeon and checkout pages. */
main.site-main:has(.dbj-account) .page-content,
main.site-main:has(.dbj-account) .woocommerce {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.dbj-account--guest {
	max-width: 720px;
}

.dbj-account--member {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.dbj-account__main {
	min-width: 0;
}

/* ------------------------------------------------------------------ Reset --- */

/* WooCommerce ships an account layout of its own: the menu floated left at 30%
   of its column, the content floated right at 68%, and menu links given vertical
   padding only. That sheet is loaded on the live site but not always on a dev
   site, which is exactly why the account looked right on one and squeezed on the
   other — the menu here sits in a 260px column, so 30% of it is 78px. Each of
   those rules is cancelled below, and the selectors carry three classes so they
   win wherever the two stylesheets end up in the page. */
.dbj-account .dbj-account__aside .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

.dbj-account .dbj-account__main .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.dbj-account .dbj-account__nav .dbj-account__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--dbj-border);
}

.dbj-account .dbj-account__nav .dbj-account__menu li {
	margin: 0;
	border-bottom: 0;
}

.dbj-account .dbj-account__nav .dbj-account__menu a {
	display: block;
	padding: 14px 18px;
}

.dbj-account .dbj-account__nav .dbj-account__menu .is-active a {
	background: var(--dbj-navy);
	color: #fff;
}

.dbj-account__content > *:first-child {
	margin-top: 0;
}

.dbj-account__section {
	display: block;
}

.dbj-account__title {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 1.2;
	color: var(--dbj-navy-dark);
}

.dbj-account__lead {
	margin: 0 0 24px;
	color: var(--dbj-grey);
}

.dbj-account__heading {
	margin: 0 0 16px;
	font-size: 18px;
	color: var(--dbj-navy-dark);
}

.dbj-account__card {
	background: var(--dbj-surface);
	border: 1px solid var(--dbj-border);
	border-radius: var(--dbj-radius);
	padding: 24px;
	margin-bottom: 24px;
}

.dbj-account__empty {
	text-align: center;
}

.dbj-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dbj-account__hint {
	display: block;
	margin-top: 6px;
	color: var(--dbj-grey);
	font-size: 14px;
}

.dbj-account__pagination {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

/* -------------------------------------------------------------------- Nav --- */

.dbj-account__nav-toggle {
	display: none;
	width: 100%;
	padding: 14px 16px;
	background: var(--dbj-navy-dark);
	color: #fff;
	border: 0;
	border-radius: var(--dbj-radius);
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.dbj-account__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dbj-border);
	border-radius: var(--dbj-radius);
	overflow: hidden;
	background: var(--dbj-surface);
}

.dbj-account__menu li {
	margin: 0;
}

.dbj-account__menu li + li {
	border-top: 1px solid var(--dbj-border);
}

.dbj-account__menu a {
	display: block;
	padding: 14px 18px;
	color: var(--dbj-text);
	text-decoration: none;
}

.dbj-account__menu a:hover,
.dbj-account__menu a:focus {
	background: #f6f7fb;
	color: var(--dbj-navy);
}

.dbj-account__menu .is-active a {
	background: var(--dbj-navy);
	color: #fff;
	font-weight: 600;
}

.dbj-account__menu .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--dbj-grey);
}

/* --------------------------------------------------------- Login / register --- */

.dbj-account__card--login {
	margin-bottom: 0;
}

/* The register panel is a footer of the login card, not a card of its own: one
   border, one width, and the two forms line up. */
.dbj-account__register {
	margin: 28px -24px -24px;
	border-top: 1px solid var(--dbj-border);
	border-radius: 0 0 calc(var(--dbj-radius) - 1px) calc(var(--dbj-radius) - 1px);
	background: #fafbfd;
}

.dbj-account__register-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	font-weight: 600;
	color: var(--dbj-navy);
	cursor: pointer;
	list-style: none;
}

.dbj-account__register-toggle::-webkit-details-marker {
	display: none;
}

.dbj-account__register-toggle::after {
	content: '+';
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.dbj-account__register[open] .dbj-account__register-toggle::after {
	content: '\2212';
}

.dbj-account__register-body {
	padding: 0 24px 24px;
}

.dbj-account__register-intro {
	margin: 0 0 18px;
	color: var(--dbj-grey);
}

.dbj-account__lost {
	margin-left: auto;
	align-self: center;
	color: var(--dbj-grey);
}

/* ------------------------------------------------------------------ Forms --- */

/* WooCommerce draws a box around the login and register forms. Inside the
   account the card is already the box, so that one is taken off. WooCommerce
   wraps the account in .woocommerce, so that ancestor provides the extra
   weight needed against its own rule. */
.dbj-account form.login,
.dbj-account form.register,
.woocommerce .dbj-account form.login,
.woocommerce .dbj-account form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.dbj-form .dbj-field {
	margin: 0 0 18px;
}

.dbj-form .dbj-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.dbj-input,
.dbj-form .woocommerce-Input,
.dbj-form input[type="text"],
.dbj-form input[type="email"],
.dbj-form input[type="password"],
.dbj-form input[type="tel"],
.dbj-form select,
.dbj-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--dbj-border);
	border-radius: 8px;
	background: #fff;
	color: var(--dbj-text);
	font-size: 16px;
	line-height: 1.4;
}

.dbj-input:focus,
.dbj-form input:focus,
.dbj-form select:focus,
.dbj-form textarea:focus {
	outline: 2px solid var(--dbj-navy);
	outline-offset: 1px;
}

.dbj-field--inline {
	display: flex;
	align-items: center;
}

.dbj-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

.dbj-fieldset {
	margin: 0 0 18px;
	padding: 18px;
	border: 1px solid var(--dbj-border);
	border-radius: var(--dbj-radius);
}

.dbj-fieldset legend {
	padding: 0 8px;
	font-weight: 600;
	color: var(--dbj-navy-dark);
}

.dbj-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
}

.dbj-form .required {
	color: #d63638;
}

.dbj-form .woocommerce-form-row,
.dbj-form .form-row {
	margin: 0 0 18px;
}

/* ----------------------------------------------------------------- Address --- */

.dbj-address {
	max-width: 640px;
	padding: 24px;
	border: 1px solid var(--dbj-border);
	border-radius: var(--dbj-radius);
	background: var(--dbj-surface);
}

.dbj-address address {
	font-style: normal;
	margin: 0 0 20px;
	line-height: 1.7;
}

.dbj-address .dbj-actions {
	margin: 0;
}

/* ------------------------------------------------------------------ Orders --- */

.dbj-account__orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.dbj-order-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 16px 18px;
	border: 1px solid var(--dbj-border);
	border-radius: var(--dbj-radius);
	background: var(--dbj-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dbj-order-row:hover {
	border-color: #ccd1e4;
	box-shadow: 0 2px 10px rgba(22, 22, 63, 0.06);
}

/* The whole row is a link, so nothing inside it is underlined: the order number
   carries the affordance instead. */
.dbj-order-row__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 20px;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--dbj-text);
	text-decoration: none;
}

.dbj-order-row__date,
.dbj-order-row__date time {
	font-style: normal;
}

.dbj-order-row__number {
	font-weight: 700;
	color: var(--dbj-navy-dark);
}

.dbj-order-row__link:hover .dbj-order-row__number,
.dbj-order-row__link:focus .dbj-order-row__number {
	color: var(--dbj-navy);
	text-decoration: underline;
}

.dbj-order-row__date,
.dbj-order-row__state {
	color: var(--dbj-grey);
	font-size: 0.92rem;
}

.dbj-order-row__total {
	margin-left: auto;
	font-weight: 600;
	white-space: nowrap;
}

.dbj-order-row__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 0 auto;
}

.dbj-order-row__actions .dbj-btn {
	padding: 8px 14px;
	font-size: 14px;
}

/* -------------------------------------------------------------- One order --- */

.dbj-order__back {
	margin: 0 0 12px;
}

.dbj-order__back a {
	color: var(--dbj-grey);
	text-decoration: none;
}

.dbj-order__back a:hover,
.dbj-order__back a:focus {
	color: var(--dbj-navy);
}

.dbj-order__facts,
.dbj-order__totals {
	display: grid;
	gap: 8px 24px;
	margin: 0 0 24px;
	padding: 18px;
	border: 1px solid var(--dbj-border);
	border-radius: var(--dbj-radius);
	background: var(--dbj-surface);
}

.dbj-order__facts {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dbj-order__facts div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dbj-order__totals div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.dbj-order__facts dt,
.dbj-order__totals dt {
	color: var(--dbj-grey);
}

.dbj-order__facts dt {
	font-size: 0.82rem;
}

.dbj-order__facts dd,
.dbj-order__totals dd {
	margin: 0;
	font-weight: 600;
}

.dbj-order__facts dd {
	overflow-wrap: anywhere;
}

.dbj-order__total dt,
.dbj-order__total dd {
	font-size: 18px;
	color: var(--dbj-navy-dark);
}

.dbj-order__heading {
	margin: 0 0 16px;
	font-size: 18px;
	color: var(--dbj-navy-dark);
}

.dbj-order__items {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 16px;
}

.dbj-order-pigeon {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--dbj-border);
	border-radius: var(--dbj-radius);
	background: var(--dbj-surface);
}

.dbj-order-pigeon__media {
	flex: 0 0 168px;
}

.dbj-order-pigeon__thumb {
	width: 168px;
	height: 168px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.dbj-order-pigeon__body {
	flex: 1 1 240px;
	min-width: 0;
}

.dbj-order-pigeon__name {
	display: block;
	font-size: 18px;
	color: var(--dbj-navy-dark);
}

.dbj-order-pigeon__tagline {
	display: block;
	margin-top: 6px;
	color: var(--dbj-grey);
}

.dbj-order-pigeon__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px 28px;
	margin: 20px 0 0;
}

.dbj-order-pigeon__specs div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dbj-order-pigeon__specs dt {
	color: var(--dbj-grey);
	font-size: 0.82rem;
}

.dbj-order-pigeon__specs dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.dbj-order-pigeon__docs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 20px;
}

.dbj-order-pigeon__docs-label {
	color: var(--dbj-grey);
	font-size: 0.82rem;
}

.dbj-order-pigeon__doc-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dbj-order-pigeon__doc {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--dbj-navy);
	border-radius: 8px;
	color: var(--dbj-navy);
	text-decoration: none;
	font-size: 14px;
}

.dbj-order-pigeon__doc:hover,
.dbj-order-pigeon__doc:focus {
	background: var(--dbj-navy);
	color: #fff;
}

.dbj-order-pigeon__price {
	margin-left: auto;
	align-self: flex-start;
	font-weight: 700;
	color: var(--dbj-navy-dark);
}

.dbj-order__notes {
	margin-top: 32px;
}

/* ------------------------------------------------------------- Dashboard --- */

.dbj-account__pigeons {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 14px;
}

.dbj-account__pigeon {
	display: flex;
	gap: 16px;
	align-items: center;
}

.dbj-account__thumb {
	width: 96px;
	height: auto;
	border-radius: 8px;
	display: block;
}

.dbj-account__pigeon-name strong {
	display: block;
	color: var(--dbj-navy-dark);
}

.dbj-account__ring {
	display: block;
	font-weight: 600;
}

.dbj-account__tagline {
	display: block;
	color: var(--dbj-grey);
}

.dbj-account__state {
	margin: 0 0 18px;
}

.dbj-account__state-label {
	display: block;
	color: var(--dbj-grey);
	font-size: 14px;
}

/* ----------------------------------------------------------------- Mobile --- */

@media (max-width: 860px) {
	.dbj-account--member {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.dbj-account__nav--js .dbj-account__nav-toggle {
		display: block;
	}

	.dbj-account__nav--js .dbj-account__menu {
		display: none;
		margin-top: 8px;
	}

	.dbj-account__nav--js.is-open .dbj-account__menu {
		display: block;
	}

	.dbj-order-pigeon__media {
		flex: 0 0 100%;
	}

	.dbj-order-pigeon__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.dbj-order-pigeon__price {
		margin-left: 0;
	}

	.dbj-order-row__total {
		margin-left: 0;
	}
}