/**
 * My Account pages. Storefront's own grid.css gives the account nav a fixed
 * 17.6% column width (assuming a much wider page container than this
 * theme's narrower content-page-body wrapper actually provides) — at
 * ~123px real width, labels like "Dashboard"/"Downloads"/"Addresses" have
 * no room to wrap at a space and instead break mid-word. Same root cause
 * as the shop-grid image and mini-cart button-width bugs (Storefront's
 * baked-in percentages fighting this theme's layout) — same fix pattern:
 * override with something that actually fits, rather than patching the
 * percentage math. Stacking nav above content sidesteps the cramped
 * 2-column math entirely instead of trying to preserve it.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	margin-right: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: 2em;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: 0;
	border-top: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	border-bottom: none;
	/* Storefront resets the marker on its own vertical list; laid out as a
	   flex row the <li>s are still list-items, so a disc bullet rendered
	   between every pair of pills. */
	list-style: none;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--blue-600);
	color: var(--ice-100);
	white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--blue-600);
	color: #fff;
}

/* Payment-due block on My Account > View Order — see inc/shkeeper-crypto-order.php */
.altitude-account-crypto-due {
	margin: 1.5em 0;
	padding: 18px 20px;
	background: var(--navy-800);
	border: 1px solid var(--blue-600);
	border-radius: 8px;
	color: var(--ice-100);
}
.altitude-account-crypto-due h2 {
	margin: 0 0 10px;
	font-size: 1.1em;
}
.altitude-account-crypto-due__progress {
	color: var(--slate-500);
	font-size: 0.9em;
}
.altitude-account-crypto-due__address {
	font-family: var(--font-mono, monospace);
	word-break: break-all;
}
/* Stacked, not side-by-side: a QR-width text column wrapped the amount/
   currency line awkwardly mid-phrase (e.g. "...(Ethereum ·" / "ERC20)"
   split across lines). Full-width text reads better; QR sits below it. */
.altitude-account-crypto-due__row > div:first-child {
	width: 100%;
}
.altitude-account-crypto-due__qr {
	display: inline-block;
	margin-top: 14px;
	background: #fff;
	padding: 8px;
	border-radius: 6px;
	line-height: 0;
}

/**
 * Account/Address forms (edit-account, edit-address, add-payment-method,
 * etc.) — WooCommerce's native form markup never got dark-theme styling:
 * inputs, the password-change fieldset, and the submit button all
 * defaulted to light-gray/white, reading as jarring blank patches against
 * the rest of the dark theme. Scoped to .woocommerce-account forms broadly
 * rather than one page, since every My Account form shares this markup.
 */
.woocommerce-account form .form-row label {
	color: var(--slate-500);
}
.woocommerce-account form input.input-text,
.woocommerce-account form textarea,
.woocommerce-account form select {
	background: var(--navy-800);
	color: var(--ice-100);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
}
.woocommerce-account form input.input-text:focus,
.woocommerce-account form textarea:focus,
.woocommerce-account form select:focus {
	border-color: var(--blue-600);
	outline: none;
}
.woocommerce-account form fieldset {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 20px;
	margin: 1.5em 0;
}
.woocommerce-account form fieldset legend {
	background: transparent;
	color: var(--ice-100);
	font-family: var(--font-display);
	font-weight: 600;
	padding: 0 8px;
}
.woocommerce-account form .woocommerce-Button,
.woocommerce-account form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--cyan-400);
	color: var(--navy-950);
	border: none;
	font-family: var(--font-body);
	font-weight: 600;
}
.woocommerce-account form .woocommerce-Button:hover,
.woocommerce-account form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(79, 209, 255, .35);
}

/* ---------------------------------------------------------------------
   Buttons inside My Account content.

   WooCommerce ships these as light-grey boxes with square corners, which
   on a dark theme render as glaring white slabs -- most obvious in the
   Orders table's Actions column (View, and the Track button AST adds).
   Scoped to the whole MyAccount content area rather than just that cell,
   so Addresses, Pay, Cancel and anything a plugin adds later inherit the
   same treatment instead of each needing its own rule.
   --------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a {
	display: inline-block;
	padding: 8px 18px;
	margin: 0 6px 6px 0;
	border-radius: 999px;
	border: 1px solid var(--blue-600);
	background: transparent;
	color: var(--cyan-400);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a:hover {
	background: var(--blue-600);
	border-color: var(--blue-600);
	color: #fff;
}

/* The Orders table itself: WooCommerce's default borders are near-invisible
   on dark, leaving the rows looking like floating text. */
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	vertical-align: middle;
}
.woocommerce-account .woocommerce-orders-table thead th {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cyan-400);
}
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td {
	border-bottom: none;
}

/* Notifications tab — see inc/account-preferences.php */
.altitude-prefs__intro,
.altitude-prefs__note {
	max-width: 56ch;
	color: var(--slate-500);
	font-size: 14px;
	line-height: 1.6;
}
.altitude-prefs h3 {
	margin: 26px 0 10px;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cyan-400);
	font-family: var(--font-mono);
}
.altitude-prefs__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	margin: 0 0 10px;
	background: var(--navy-800);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 8px;
	cursor: pointer;
}
.altitude-prefs__row:hover {
	border-color: var(--blue-600);
}
.altitude-prefs__row input[type="checkbox"] {
	margin-top: 3px;
	flex: 0 0 auto;
	accent-color: var(--blue-600);
	width: 17px;
	height: 17px;
}
.altitude-prefs__row span {
	display: block;
}
.altitude-prefs__row strong {
	display: block;
	color: var(--ice-100);
	font-size: 15px;
	font-weight: 600;
}
.altitude-prefs__row small {
	display: block;
	margin-top: 3px;
	color: var(--slate-500);
	font-size: 13px;
	line-height: 1.5;
}
.altitude-sms-disclosure {
	max-width: 56ch;
	margin: -2px 0 20px;
	color: var(--slate-500);
	font-size: 13px;
	line-height: 1.5;
}
.altitude-sms-disclosure a {
	color: var(--cyan-400);
}