/* =============================================================================
   SubbieHub — WooCommerce My Account theme
   Classes here are pulled directly from WooCommerce's actual template source
   (myaccount/*.php, order/*.php, notices/*.php) — not guessed. The
   my-account.php + navigation.php overrides handle the shell/sidebar;
   everything else (orders, downloads, addresses, forms, payment methods)
   stays on WooCommerce's default templates and is reskinned here instead,
   so it doesn't need re-forking every time WooCommerce ships a template
   update.
============================================================================= */

/* --------------------------------------------------------------------------
   Base typography inside the account content panel
-------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.woocommerce-MyAccount-content {
	font-family: 'DM Sans', sans-serif;
	color: var(--text-mid);
	font-size: 14px;
	line-height: 1.6;
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-MyAccount-content a:hover {
	color: var(--yellow-dark);
}

.woocommerce-MyAccount-content h2 {
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
	margin: 24px 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}

.woocommerce-MyAccount-content h2:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Notices (order placed / saved / error messages)
-------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-message {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--sh-green-bg);
	border: 1px solid var(--sh-green-border);
	border-left: 5px solid var(--sh-green);
	border-radius: 8px;
	color: #166534;
	font-size: 14px;
	font-weight: 600;
	list-style: none;
}

.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-error {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--sh-red-bg);
	border: 1px solid var(--sh-red-border);
	border-left: 5px solid var(--sh-red);
	border-radius: 8px;
	color: #991b1b;
	font-size: 14px;
	font-weight: 600;
	list-style: none;
}

.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--sh-amber-bg);
	border: 1px solid var(--sh-amber-border);
	border-left: 5px solid var(--sh-amber);
	border-radius: 8px;
	color: #78350f;
	font-size: 14px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Buttons — every Woo/YITH button variant funnels through .button somewhere
-------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content a.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--navy);
	color: var(--white) !important;
	border: none;
	padding: 9px 18px;
	border-radius: var(--sh-input-radius, 8px);
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none !important;
	transition: background 0.18s;
	line-height: 1.4;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content a.button:hover {
	background: var(--navy-dark);
	color: var(--white) !important;
}

/* Destructive actions (cancel order, cancel subscription, delete payment method) */
.woocommerce-MyAccount-content .button.cancel,
.woocommerce-MyAccount-content .button.cancel-subscription,
.woocommerce-MyAccount-content .button.delete {
	background: var(--sh-red-bg);
	color: var(--sh-red) !important;
	border: 1px solid var(--sh-red-border);
}

.woocommerce-MyAccount-content .button.cancel:hover,
.woocommerce-MyAccount-content .button.cancel-subscription:hover,
.woocommerce-MyAccount-content .button.delete:hover {
	background: var(--sh-red);
	color: var(--white) !important;
}

/* --------------------------------------------------------------------------
   Shared table look — orders, downloads, payment methods, and (best effort)
   any other extension table (e.g. YITH Subscriptions) that follows the same
   shop_table convention WooCommerce's own dev docs recommend extensions use.
-------------------------------------------------------------------------- */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-bottom: 20px;
}

.woocommerce-MyAccount-content table.shop_table thead tr,
.woocommerce-MyAccount-content table thead tr {
	border-bottom: 2px solid var(--border);
}

.woocommerce-MyAccount-content table.shop_table thead th,
.woocommerce-MyAccount-content table thead th {
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--text-muted);
	padding: 0 14px 12px;
	text-align: left;
	white-space: nowrap;
}

.woocommerce-MyAccount-content table.shop_table tbody tr,
.woocommerce-MyAccount-content table tbody tr {
	border-bottom: 1px solid #f3f4f9;
}

.woocommerce-MyAccount-content table.shop_table tbody tr:last-child,
.woocommerce-MyAccount-content table tbody tr:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-content table.shop_table tbody tr:hover,
.woocommerce-MyAccount-content table tbody tr:hover {
	background: #fafbff;
}

.woocommerce-MyAccount-content table.shop_table tbody td,
.woocommerce-MyAccount-content table.shop_table tbody th,
.woocommerce-MyAccount-content table tbody td,
.woocommerce-MyAccount-content table tbody th {
	padding: 13px 14px;
	color: var(--text-mid);
	vertical-align: middle;
	font-weight: 400;
	text-align: left;
}

.woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-MyAccount-content table.shop_table tfoot td,
.woocommerce-MyAccount-content table tfoot th,
.woocommerce-MyAccount-content table tfoot td {
	padding: 14px;
	font-weight: 700;
	color: var(--navy);
	border-top: 2px solid var(--border);
}

/* --------------------------------------------------------------------------
   Orders table
-------------------------------------------------------------------------- */
.woocommerce-orders-table__cell-order-number a {
	color: var(--navy);
	font-weight: 700;
}

.woocommerce-orders-table__cell-order-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* Pagination (orders list) */
.woocommerce-pagination {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   View Order page
-------------------------------------------------------------------------- */
.woocommerce-order-details,
.woocommerce-order-downloads,
.woocommerce-customer-details {
	margin-bottom: 24px;
}

.woocommerce-order-details__title,
.woocommerce-order-downloads__title {
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}

table.woocommerce-table--order-details,
table.woocommerce-table--order-downloads {
	border: 1px solid var(--border);
	border-radius: var(--sh-input-radius, 8px);
	overflow: hidden;
}

.woocommerce-MyAccount-downloads-file {
	background: var(--navy) !important;
}

mark.order-number,
mark.order-date,
mark.order-status {
	background: none;
	color: var(--navy);
	font-weight: 700;
}

/* Billing / shipping address columns */
.woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0 0 24px;
}

.woocommerce-column__title {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 10px;
}

.woocommerce-customer-details address {
	font-style: normal;
	background: var(--off-white);
	border: 1px solid var(--border);
	border-radius: var(--sh-input-radius, 8px);
	padding: 14px 16px;
	line-height: 1.7;
}

/* Order updates / notes timeline */
.woocommerce-OrderUpdates {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.woocommerce-OrderUpdate {
	border-left: 3px solid var(--border);
	padding: 4px 0 4px 16px;
	margin-bottom: 14px;
}

.woocommerce-OrderUpdate-meta {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 4px;
}

/* --------------------------------------------------------------------------
   My Addresses
-------------------------------------------------------------------------- */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.woocommerce-Address {
	background: var(--off-white);
	border: 1px solid var(--border);
	border-radius: var(--sh-panel-radius, 16px);
	padding: 20px;
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.woocommerce-Address-title h2 {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 15px;
}

.woocommerce-Address-title .edit {
	font-size: 12px;
	font-weight: 700;
	color: var(--navy);
	background: var(--white);
	border: 1px solid var(--border);
	padding: 5px 12px;
	border-radius: 6px;
	text-decoration: none;
}

.woocommerce-Address-title .edit:hover {
	border-color: var(--navy);
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Edit address / edit account forms
-------------------------------------------------------------------------- */

.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

/* WooCommerce form rows */
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields__field-wrapper .form-row {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* First and last name remain side by side */
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-address-fields__field-wrapper .form-row-last {
	width: 100%;
}

/* Wide fields span both columns */
.woocommerce-EditAccountForm .form-row-wide,
.woocommerce-address-fields__field-wrapper .form-row-wide,
.woocommerce-EditAccountForm fieldset,
.woocommerce-EditAccountForm > p:last-child {
	grid-column: 1 / -1;
}

/* Labels */
.woocommerce-EditAccountForm label,
.woocommerce-address-fields__field-wrapper label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
}

.woocommerce-EditAccountForm label .required,
.woocommerce-address-fields__field-wrapper label .required {
	color: var(--sh-red);
	text-decoration: none;
}

/* Inputs — specificity raised to beat WooCommerce core */
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm .form-row .input-text,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm .form-row select,
.woocommerce-account .woocommerce .woocommerce-address-fields__field-wrapper .form-row .input-text,
.woocommerce-account .woocommerce .woocommerce-address-fields__field-wrapper .form-row select {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 10px 13px;
	background-color: var(--white);
	border: 1.5px solid var(--border);
	border-radius: var(--sh-input-radius, 8px);
	color: var(--text);
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	height: auto;
	outline: none;
	box-shadow: none;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm .form-row .input-text:focus,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm .form-row select:focus,
.woocommerce-account .woocommerce .woocommerce-address-fields__field-wrapper .form-row .input-text:focus,
.woocommerce-account .woocommerce .woocommerce-address-fields__field-wrapper .form-row select:focus {
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(6, 4, 67, 0.07);
}

/* Display-name help text */
.woocommerce-EditAccountForm #account_display_name_description {
	display: block;
	margin-top: 5px;
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1.5;
}

/* Password section */
.woocommerce-EditAccountForm fieldset {
	margin: 10px 0 0;
	padding: 22px 0 0;
	border: 0;
	border-top: 1px solid var(--border);
}

.woocommerce-EditAccountForm fieldset legend {
	margin: 0 0 18px;
	padding: 0;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}

.woocommerce-EditAccountForm fieldset .form-row {
	margin-bottom: 16px;
}

.woocommerce-EditAccountForm fieldset .form-row:last-child {
	margin-bottom: 0;
}

/* WooCommerce's legacy clear elements aren't needed in the grid */
.woocommerce-EditAccountForm .clear,
.woocommerce-address-fields__field-wrapper .clear {
	display: none;
}

/* --------------------------------------------------------------------------
   Payment methods
-------------------------------------------------------------------------- */
.woocommerce-MyAccount-paymentMethods .default-payment-method {
	background: var(--off-white);
}

.woocommerce-PaymentMethod--actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Responsive
-------------------------------------------------------------------------- */
@media (max-width: 700px) {

	.woocommerce-columns--addresses,
	.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.woocommerce-address-fields__field-wrapper,
	.woocommerce-EditAccountForm {
		grid-template-columns: 1fr;
	}

	.woocommerce-EditAccountForm .form-row-wide,
	.woocommerce-address-fields__field-wrapper .form-row-wide,
	.woocommerce-EditAccountForm fieldset,
	.woocommerce-EditAccountForm > p:last-child {
		grid-column: auto;
	}

	.sh-login-columns.has-register {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Login / Register (myaccount/form-login.php override)

   Deliberately self-contained — NOT scoped under .sh-dashboard-panel or any
   shell wrapper, because this form renders in two different contexts:
     - bare on /my-account/ when logged out
     - nested inside .account-login-card on the custom /login/ page, which
       already provides its own heading/card styling
   so every rule here targets the form elements directly.
-------------------------------------------------------------------------- */
.sh-login-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sh-gap, 24px);
}

.sh-login-columns.has-register {
	grid-template-columns: 1fr 1fr;
}

.sh-login-panel {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--sh-panel-radius, 16px);
	padding: 24px;
}

.sh-login-panel-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}

.sh-login-panel-title .material-symbols-outlined {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--navy);
	color: var(--yellow);
	border-radius: 8px;
	font-size: 18px;
}

.sh-login-panel .sh-form-group {
	margin-bottom: 16px;
}

.sh-login-panel label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
	margin-bottom: 5px;
}

.sh-login-panel .required {
	color: var(--sh-red);
	text-decoration: none;
}

.sh-login-panel input.input-text {
	width: 100%;
	max-width: 420px;
	padding: 10px 13px;
	border: 1.5px solid var(--border);
	border-radius: var(--sh-input-radius, 8px);
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: var(--text);
	background: var(--white);
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.sh-login-panel input.input-text:focus {
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(6, 4, 67, 0.07);
}

.sh-login-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin: 18px 0 16px;
}

.sh-login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-mid);
	margin: 0;
	cursor: pointer;
}

.sh-login-remember input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--navy);
	cursor: pointer;
}

.sh-login-panel .woocommerce-LostPassword {
	margin: 0;
}

.sh-login-panel .woocommerce-LostPassword a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sh-login-panel .woocommerce-LostPassword a:hover {
	color: var(--yellow-dark);
}