/**
 * My Account — refs 09 (desktop sidebar layout) / 10 (mobile stacked
 * cards; shared global header + bottom nav, no special account chrome).
 */

/* The account screen is centred in the standard site container at its
 * intended maximum width — it must never hug the far edge, which is what
 * the previous wrapper-dependent markup allowed. Sidebar on the physical
 * right (inline-start), content on the physical left, per ref 09. */
.nbf-account__layout {
	display: grid;
	grid-template-columns: 17rem minmax(0, 1fr);
	gap: var(--nbf-space-6);
	align-items: start;
	margin-block: var(--nbf-space-6) var(--nbf-section-gap);
}

.nbf-account__layout > * {
	min-inline-size: 0;
}

/* Sidebar */
.nbf-account__nav {
	display: grid;
	gap: var(--nbf-space-3);
	position: sticky;
	inset-block-start: calc(4.5rem + var(--nbf-space-4));
}

.nbf-account__profile {
	padding: var(--nbf-space-5);
	text-align: center;
}

.nbf-account__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 4rem;
	block-size: 4rem;
	border-radius: 50%;
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-600);
	margin-block-end: var(--nbf-space-2);
}

.nbf-account__name {
	font-weight: var(--nbf-fw-black);
	margin: 0;
}

.nbf-account__email {
	margin: var(--nbf-space-1) 0 0;
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-3);
	overflow-wrap: anywhere;
}

.nbf-account__menu {
	list-style: none;
	margin: 0;
	padding: var(--nbf-space-2);
	display: grid;
	gap: 0.125rem;
}

.nbf-account__menu a {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-3);
	padding: var(--nbf-space-3);
	border-radius: var(--nbf-radius-md);
	color: var(--nbf-color-text-2);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-medium);
}

.nbf-account__menu a:hover {
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-700);
	text-decoration: none;
}

.nbf-account__menu .is-active a {
	background: var(--nbf-color-primary-600);
	color: var(--nbf-color-text-inverse);
}

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

.nbf-account__menu .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: var(--nbf-color-error-bg);
}

/* Dashboard */
.nbf-account-dashboard {
	display: grid;
	gap: var(--nbf-space-5);
}

.nbf-account-dashboard__welcome {
	padding: var(--nbf-space-6);
}

.nbf-account-dashboard__welcome h2 {
	margin-block-end: var(--nbf-space-1);
}

.nbf-account-dashboard__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--nbf-space-3);
}

.nbf-account-dashboard__stat {
	display: grid;
	justify-items: center;
	gap: var(--nbf-space-1);
	padding: var(--nbf-space-4);
	text-align: center;
	color: var(--nbf-color-text);
}

.nbf-account-dashboard__stat:hover {
	text-decoration: none;
	border-color: var(--nbf-color-primary-300);
}

.nbf-account-dashboard__stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-600);
}

.nbf-account-dashboard__stat-value {
	font-size: var(--nbf-fs-2xl);
	font-weight: var(--nbf-fw-black);
	color: var(--nbf-color-primary-700);
}

.nbf-account-dashboard__stat-label {
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

/* Reservations */
.nbf-account__section-title {
	font-size: var(--nbf-fs-lg);
	margin-block-end: var(--nbf-space-3);
}

.nbf-account-reservations {
	display: grid;
	gap: var(--nbf-space-6);
}

.nbf-account-reservations__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--nbf-space-3);
}

.nbf-res-card {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	overflow: hidden;
}

.nbf-res-card__media {
	background: var(--nbf-color-surface-sunken);
}

.nbf-res-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.nbf-res-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 100%;
	min-block-size: 7rem;
	color: var(--nbf-color-primary-300);
	background: linear-gradient(215deg, #d6ebfb 0%, #9ccaee 100%);
}

.nbf-res-card__body {
	padding: var(--nbf-space-3) var(--nbf-space-4);
	display: grid;
	gap: var(--nbf-space-1);
	align-content: start;
}

.nbf-res-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nbf-space-2);
}

.nbf-res-card__title {
	font-size: var(--nbf-fs-md);
	margin: 0;
}

.nbf-res-card__row {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-1);
	margin: 0;
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

.nbf-res-card__row .nbf-icon {
	color: var(--nbf-color-primary-600);
	flex-shrink: 0;
}

.nbf-res-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nbf-space-2);
	margin-block-start: var(--nbf-space-2);
}

.nbf-res-card__code {
	font-size: var(--nbf-fs-xs);
	font-weight: var(--nbf-fw-bold);
	color: var(--nbf-color-primary-700);
	background: var(--nbf-color-primary-50);
	border-radius: var(--nbf-radius-sm);
	padding: 0.125rem var(--nbf-space-2);
}

/* Detail */
.nbf-res-detail {
	display: grid;
	gap: var(--nbf-space-4);
}

.nbf-res-detail__card {
	padding: var(--nbf-space-5);
}

.nbf-res-detail__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--nbf-space-3);
	margin-block-end: var(--nbf-space-4);
}

.nbf-res-detail__title {
	margin-block-end: var(--nbf-space-2);
	font-size: var(--nbf-fs-xl);
}

.nbf-res-detail__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--nbf-space-3);
	margin: 0 0 var(--nbf-space-5);
}

.nbf-res-detail__facts > div {
	background: var(--nbf-color-surface-alt);
	border-radius: var(--nbf-radius-md);
	padding: var(--nbf-space-3);
}

.nbf-res-detail__facts dt {
	font-size: var(--nbf-fs-2xs);
	color: var(--nbf-color-text-3);
	margin-block-end: 0.125rem;
}

.nbf-res-detail__facts dd {
	margin: 0;
	font-weight: var(--nbf-fw-bold);
	font-size: var(--nbf-fs-sm);
}

.nbf-res-detail__code {
	color: var(--nbf-color-primary-700);
	letter-spacing: 0.05em;
}

.nbf-res-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nbf-space-3);
}

/* Empty state */
.nbf-account__empty {
	padding: var(--nbf-space-8);
	text-align: center;
	display: grid;
	justify-items: center;
	gap: var(--nbf-space-2);
	color: var(--nbf-color-primary-300);
}

.nbf-account__empty h2 {
	color: var(--nbf-color-text);
	margin: 0;
}

/* Woo native content (orders table, forms) inside our shell */
.nbf-account__content .woocommerce-orders-table {
	inline-size: 100%;
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg);
	overflow: hidden;
	font-size: var(--nbf-fs-sm);
}

.nbf-account__content .woocommerce-orders-table th,
.nbf-account__content .woocommerce-orders-table td {
	padding: var(--nbf-space-3) var(--nbf-space-4);
	text-align: start;
	border-block-end: 1px solid var(--nbf-color-border);
}

/* Mobile: stacked, no tiny tables */
@media (max-width: 1023px) {
	.nbf-account__layout {
		grid-template-columns: 1fr;
	}

	.nbf-account__nav {
		position: static;
	}

	.nbf-account-reservations__grid {
		grid-template-columns: 1fr;
	}

	.nbf-account-dashboard__stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.nbf-account__content .woocommerce-orders-table,
	.nbf-account__content .woocommerce-orders-table thead {
		display: block;
	}

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

	.nbf-account__content .woocommerce-orders-table tbody,
	.nbf-account__content .woocommerce-orders-table tr,
	.nbf-account__content .woocommerce-orders-table td {
		display: block;
	}

	.nbf-account__content .woocommerce-orders-table tr {
		padding: var(--nbf-space-2) 0;
	}

	.nbf-account__content .woocommerce-orders-table td::before {
		content: attr(data-title);
		display: block;
		font-size: var(--nbf-fs-2xs);
		color: var(--nbf-color-text-3);
	}
}

@media (max-width: 479px) {
	.nbf-account-dashboard__stats {
		grid-template-columns: 1fr;
	}

	.nbf-res-card {
		grid-template-columns: 1fr;
	}

	.nbf-res-card__media img,
	.nbf-res-card__placeholder {
		block-size: 8rem;
	}
}

/* ------------------------------------------------------------------
 * Account forms (Account details, password change)
 *
 * The inputs themselves come from the shared checkout/account rules in
 * checkout.css, so both screens render identical fields. What follows is
 * only what the account form adds: the card, field descriptions, the
 * password-visibility control and the submit row.
 * ---------------------------------------------------------------- */
.nbf-account .woocommerce-EditAccountForm,
.nbf-account .woocommerce-form-login,
.nbf-account .woocommerce-address-fields {
	padding: var(--nbf-space-6);
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg);
	box-shadow: var(--nbf-shadow-sm);
}

.nbf-account fieldset {
	margin-block: var(--nbf-space-5) 0;
	padding: var(--nbf-space-5) 0 0;
	border: 0;
	border-block-start: 1px solid var(--nbf-color-border);
}

.nbf-account legend {
	padding: 0;
	font-size: var(--nbf-fs-lg);
	font-weight: var(--nbf-fw-black);
	margin-block-end: var(--nbf-space-4);
}

.nbf-account .form-row span em,
.nbf-account .woocommerce-form-row .description {
	display: block;
	margin-block-start: var(--nbf-space-1);
	font-size: var(--nbf-fs-xs);
	font-style: normal;
	color: var(--nbf-color-text-3);
}

/* Password field + its visibility toggle share one bordered control. */
.nbf-account .woocommerce-password-hint {
	display: block;
	margin-block-start: var(--nbf-space-1);
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-3);
}

:is(.nbf-account, .nbf-auth) .password-input {
	position: relative;
	display: block;
}

:is(.nbf-account, .nbf-auth) .show-password-input {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--nbf-space-3);
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 0;
	border-radius: var(--nbf-radius-sm);
	background: none;
	color: var(--nbf-color-text-3);
	cursor: pointer;
}

:is(.nbf-account, .nbf-auth) .show-password-input:hover {
	color: var(--nbf-color-primary-700);
}

:is(.nbf-account, .nbf-auth) .show-password-input:focus-visible {
	outline: 2px solid var(--nbf-color-focus-ring);
	outline-offset: 2px;
}

:is(.nbf-account, .nbf-auth) .password-input .input-text {
	padding-inline-end: var(--nbf-space-10);
}

/* Two-up name row on desktop, matching checkout. */
@media (min-width: 768px) {
	.nbf-account .woocommerce-EditAccountForm > .form-row-first,
	.nbf-account .woocommerce-EditAccountForm > .form-row-last {
		display: inline-block;
		inline-size: calc(50% - var(--nbf-space-2));
		vertical-align: top;
	}

	.nbf-account .woocommerce-EditAccountForm > .form-row-first {
		margin-inline-end: var(--nbf-space-4);
	}
}

.nbf-account .woocommerce-Button,
.nbf-account button[type="submit"] {
	min-block-size: var(--nbf-control-h);
	padding-inline: var(--nbf-space-6);
	border: 0;
	border-radius: var(--nbf-radius-md);
	background: var(--nbf-color-primary-600);
	color: #fff;
	font: inherit;
	font-weight: var(--nbf-fw-bold);
	cursor: pointer;
}

.nbf-account .woocommerce-Button:hover,
.nbf-account button[type="submit"]:hover {
	background: var(--nbf-color-primary-700);
}

.nbf-account .woocommerce-Button:focus-visible,
.nbf-account button[type="submit"]:focus-visible {
	outline: 2px solid var(--nbf-color-focus-ring);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Auth screens: login / register / lost password / reset
 *
 * Centered cards on the container grid. Fields here are deliberately
 * softer than the rest of the site: a very light blue fill with no
 * visible border, gaining a ring and a white fill on focus.
 * ---------------------------------------------------------------- */
.nbf-auth {
	margin-block-end: var(--nbf-section-gap);
}

.nbf-auth__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nbf-space-6);
	max-inline-size: 28rem;
	margin-inline: auto;
}

.nbf-auth__grid--two {
	max-inline-size: 60rem;
}

@media (min-width: 900px) {
	.nbf-auth__grid--two {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.nbf-auth__card {
	padding: var(--nbf-space-8) var(--nbf-space-6);
	text-align: center;
}

.nbf-auth__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: var(--nbf-radius-full);
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-600);
	margin-block-end: var(--nbf-space-3);
}

.nbf-auth__icon--success {
	background: #e9f7f0;
	color: var(--nbf-color-success);
}

.nbf-auth__title {
	font-size: var(--nbf-fs-xl);
	margin: 0 0 var(--nbf-space-2);
}

.nbf-auth__subtitle {
	font-size: var(--nbf-fs-sm);
	color: var(--nbf-color-text-2);
	margin: 0 0 var(--nbf-space-5);
}

/* Forms inside the card are start-aligned; only the intro is centered. */
.nbf-auth form {
	text-align: start;
}

/* WooCommerce core CSS interop: woocommerce-general.css draws its own
 * bordered box around form.login/.register (border + 20px padding + 2em
 * margin) and pads every .form-row. Those selectors carry `.woocommerce
 * form.x` specificity, so they are neutralized here at matching-or-higher
 * specificity — the auth card itself is the only box on these screens. */
.nbf-auth form.login,
.nbf-auth form.register,
.nbf-auth form.lost_reset_password,
.nbf-auth form.woocommerce-ResetPassword {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	background: none;
	box-shadow: none;
}

.nbf-auth .form-row,
.nbf-auth form .form-row {
	margin: 0 0 var(--nbf-space-4);
	padding: 0;
}

.nbf-auth .form-row label,
.nbf-auth form .form-row label {
	display: block;
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-bold);
	line-height: var(--nbf-lh-heading);
	margin-block-end: var(--nbf-space-2);
}

.nbf-auth .form-row .required {
	color: var(--nbf-color-error);
	text-decoration: none;
}

/* The requested field look: soft, very light blue, no border. The border
 * is transparent rather than removed so the focus ring never shifts
 * layout, and :focus (not just :focus-visible) restyles because these are
 * text fields — pointer focus counts here too.
 *
 * The `.nbf-auth form .form-row .input-text` twin is not redundant: it
 * out-ranks WooCommerce core's `.woocommerce form .form-row .input-text`
 * (white fill + gray border + .5em padding), which otherwise wins over a
 * two-class theme selector. */
.nbf-auth .input-text,
.nbf-auth form .form-row .input-text {
	inline-size: 100%;
	min-block-size: var(--nbf-control-h);
	padding-block: var(--nbf-space-2);
	padding-inline: var(--nbf-space-4);
	border: 1px solid transparent;
	border-radius: var(--nbf-radius-md);
	background: var(--nbf-color-primary-50);
	font-size: var(--nbf-fs-md);
	transition:
		background-color var(--nbf-duration) var(--nbf-ease),
		border-color var(--nbf-duration) var(--nbf-ease),
		box-shadow var(--nbf-duration) var(--nbf-ease);
}

.nbf-auth .input-text:hover,
.nbf-auth form .form-row .input-text:hover {
	background: var(--nbf-color-primary-100, #e3effc);
}

.nbf-auth .input-text:focus,
.nbf-auth form .form-row .input-text:focus {
	outline: none;
	background: var(--nbf-color-surface);
	border-color: var(--nbf-color-primary-500);
	box-shadow: 0 0 0 3px var(--nbf-color-primary-100);
}

/* Remember-me + forgot-password share one row. The remember label repeats
 * WooCommerce's own `.woocommerce .woocommerce-form-login .rememberme`
 * specificity, which otherwise flattens it back to inline-block. */
.nbf-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nbf-space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--nbf-space-4);
	font-size: var(--nbf-fs-sm);
}

.nbf-auth__remember,
.nbf-auth .nbf-auth__row .nbf-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-2);
	cursor: pointer;
}

.nbf-auth__remember input {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	accent-color: var(--nbf-color-primary-600);
}

.nbf-auth__forgot {
	color: var(--nbf-color-primary-700);
}

.nbf-auth__submit-row {
	margin: 0;
}

.nbf-auth__hint {
	margin: 0 0 var(--nbf-space-4);
	padding: var(--nbf-space-3) var(--nbf-space-4);
	background: var(--nbf-color-surface-tint);
	border-radius: var(--nbf-radius-md);
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

.nbf-auth__meta {
	margin: var(--nbf-space-4) 0 0;
	font-size: var(--nbf-fs-sm);
}

.nbf-auth__meta a {
	color: var(--nbf-color-primary-700);
}

/* WooCommerce prints the privacy-policy paragraph inside the register
 * form via its hooks. */
.nbf-auth .woocommerce-privacy-policy-text p {
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-3);
	margin: 0 0 var(--nbf-space-4);
}

/* ------------------------------------------------------------------
 * Auth buttons vs WooCommerce core CSS
 *
 * woocommerce-general paints every `.woocommerce button.button` gray and
 * floats the login submit; both outrank a single-class .nbf-btn. Every
 * .button inside an auth card — the theme's own submits AND buttons a
 * plugin (Digits) injects without theme classes — is asserted back to the
 * design system's primary button here at higher specificity.
 * ---------------------------------------------------------------- */
.nbf-auth form :is(button, input[type="submit"], a).button,
.nbf-auth .woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	display: block;
	inline-size: 100%;
	min-block-size: 3.25rem;
	margin: 0;
	padding: var(--nbf-space-2) var(--nbf-space-6);
	border: 1px solid transparent;
	border-radius: var(--nbf-radius-md);
	background: var(--nbf-color-primary-600);
	color: var(--nbf-color-text-inverse);
	font: inherit;
	font-size: var(--nbf-fs-md);
	font-weight: var(--nbf-fw-bold);
	line-height: var(--nbf-lh-tight);
	text-align: center;
	cursor: pointer;
	box-shadow: var(--nbf-shadow-sm);
	transition:
		background-color var(--nbf-duration) var(--nbf-ease),
		border-color var(--nbf-duration) var(--nbf-ease),
		color var(--nbf-duration) var(--nbf-ease);
}

.nbf-auth form :is(button, input[type="submit"], a).button:hover {
	background: var(--nbf-color-primary-700);
	color: var(--nbf-color-text-inverse);
}

.nbf-auth form :is(button, input[type="submit"], a).button:focus-visible {
	outline: 2px solid var(--nbf-color-focus-ring);
	outline-offset: 2px;
}

/* Secondary actions keep the outline look: the theme's own secondary
 * submits plus Digits' password-register alternative. */
.nbf-auth form :is(button, input[type="submit"], a).button:is(.nbf-btn--secondary, .wc_reg_pass_btn) {
	background: var(--nbf-color-surface);
	color: var(--nbf-color-primary-600);
	border-color: var(--nbf-color-primary-300);
	box-shadow: none;
}

.nbf-auth form :is(button, input[type="submit"], a).button:is(.nbf-btn--secondary, .wc_reg_pass_btn):hover {
	background: var(--nbf-color-primary-50);
	border-color: var(--nbf-color-primary-500);
	color: var(--nbf-color-primary-700);
}

/* Consecutive stacked actions (e.g. Digits renders "register with OTP"
 * right after "register with password", with hidden inputs between). */
.nbf-auth form .button + .button,
.nbf-auth form input.button.otp_reg_dig_wc {
	margin-block-start: var(--nbf-space-3);
}

/* ------------------------------------------------------------------
 * Digits (mobile/email OTP) interop
 *
 * When the Digits plugin is active it injects its own fields into the
 * standard WooCommerce login/register forms: a .digcon wrapper (input +
 * absolutely-positioned country code), tab wrappers, OTP row and a resend
 * control. Digits owns their layout/JS; these rules only pull its
 * elements onto the theme's field design.
 * ---------------------------------------------------------------- */
.nbf-auth .digits-form_tab_wrapper,
.nbf-auth .digits-form_tab_container {
	margin: 0;
	padding: 0;
}

/* The country-code box (when shown) must read as part of the field: same
 * height as the input it overlays, quiet separator, centered digits. */
.nbf-auth .digcon .input-text {
	inline-size: 100%;
}

.nbf-auth .dig_wc_countrycodecontainer input.countrycode {
	min-block-size: var(--nbf-control-h);
	max-inline-size: 4.5rem;
	border: 1px solid transparent;
	border-radius: var(--nbf-radius-md);
	background: transparent;
	text-align: center;
	color: var(--nbf-color-text-2);
	font-size: var(--nbf-fs-sm);
}

/* Digits toggles this via JS; keep it a quiet text action, centered under
 * the submit like the rest of the auth meta links. */
.nbf-auth .dig_resendotp {
	margin-block-start: var(--nbf-space-3);
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

.nbf-auth .dig_resendotp:not(.dig_resendotp_disabled) {
	color: var(--nbf-color-primary-700);
}

/* Digits' optional extra fields (name, second contact) reuse the theme
 * field rhythm. */
.nbf-auth .dig-custom-field,
.nbf-auth .dig_wc_mailsecond .form-row {
	margin-block-end: var(--nbf-space-4);
}

@media (max-width: 767px) {
	.nbf-auth__card {
		padding: var(--nbf-space-6) var(--nbf-space-4);
	}
}