/*
Theme Name: JossPRO
WooCommerce styles override — Tailwind-matching design system
*/

/* ========================================================================
   0. GENERAL RESETS & PAGE LAYOUT
   ======================================================================== */

/* Hide default sidebar on Cart & Checkout pages */
.woocommerce-cart .widget-area,
.woocommerce-checkout .widget-area,
.woocommerce-cart #secondary,
.woocommerce-checkout #secondary {
	display: none !important;
}

/* Hide the default "Cart" / "Checkout" page title from content-page.php */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
	display: none;
}

/* Hide the default entry-content wrapper padding on cart */
.woocommerce-cart .entry-content::before {
	display: none;
}

/* Full-width main on cart/checkout */
.woocommerce-cart .site-main {
	max-width: 100%;
	margin: 0;
	padding: 6.75rem 0 0;
}

.woocommerce-checkout .site-main {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding: 7rem 1rem 3rem;
}

@media (min-width: 1024px) {
	.woocommerce-cart .site-main {
		padding: 6.75rem 0 0;
	}
	.woocommerce-checkout .site-main {
		padding: 8.5rem 2rem 4rem;
	}
}

/* WooCommerce Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	clear: both;
}

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
}

.woocommerce-message {
	background-color: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	background-color: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.woocommerce-error {
	background-color: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	font-weight: 700;
	text-decoration: underline;
}


/* ========================================================================
   1. CARD-BASED CART PAGE
   ======================================================================== */

/* --- Quantity selector (custom +/- buttons) --- */
.josspro-qty-input {
	-moz-appearance: textfield;
}

.josspro-qty-input::-webkit-inner-spin-button,
.josspro-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Cart totals / order summary sidebar --- */
.cart_totals .wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.875rem 1.5rem;
	background: #ef4444;
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s;
	box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2);
	white-space: nowrap;
}

.cart_totals .wc-proceed-to-checkout .checkout-button:hover {
	background: #dc2626;
}

/* Hide default WC cross-sells (we use our own section) */
.woocommerce-cart .cross-sells {
	display: none;
}

/* --- Block-based cart backwards compat (if block cart kicks in) --- */
.wc-block-cart {
	font-family: "Outfit", sans-serif;
}

.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
	display: block;
	width: 100%;
	background: #ef4444 !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9rem 1.5rem;
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s;
	margin-top: 1.25rem;
}

.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
	background: #dc2626 !important;
}


/* ========================================================================
   2. CUSTOM CHECKOUT FORM (#custom-checkout-form)
   ======================================================================== */

/* --- Page title --- */
.woocommerce-checkout .entry-content > h1:first-of-type,
.woocommerce-checkout .entry-content::before {
	font-size: 1.875rem;
	font-weight: 800;
	color: #111827;
	margin-bottom: 2rem;
}

/* Hide the WP-generated title inside entry-content if custom form provides its own */
.woocommerce-checkout .entry-content > .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle {
	margin-bottom: 1.5rem;
}

/* Main form container */
#custom-checkout-form {
	font-family: "Outfit", sans-serif;
}

/* Section headings */
#custom-checkout-form h3,
#custom-checkout-form h4,
.woocommerce-checkout h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f3f4f6;
}

/* Form layout cards */
#custom-checkout-form > div,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background: #fff;
	border-radius: 1rem;
	border: 1px solid #f3f4f6;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
	#custom-checkout-form > div,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields {
		padding: 2rem;
	}
}

/* Labels */
#custom-checkout-form label,
.woocommerce-checkout label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.375rem;
}

/* Required asterisk */
#custom-checkout-form .required,
.woocommerce-checkout .required {
	color: #e11d48;
}

/* Text inputs */
#custom-checkout-form input[type="text"],
#custom-checkout-form input[type="email"],
#custom-checkout-form input[type="tel"],
#custom-checkout-form input[type="number"],
#custom-checkout-form input[type="password"],
#custom-checkout-form textarea,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea {
	display: block;
	width: 100%;
	padding: 0.625rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	color: #111827;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	font-family: "Outfit", sans-serif;
}

#custom-checkout-form input[type="text"]:focus,
#custom-checkout-form input[type="email"]:focus,
#custom-checkout-form input[type="tel"]:focus,
#custom-checkout-form input[type="number"]:focus,
#custom-checkout-form input[type="password"]:focus,
#custom-checkout-form textarea:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: #fda4af;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

#custom-checkout-form input::placeholder,
.woocommerce-checkout input::placeholder,
#custom-checkout-form textarea::placeholder,
.woocommerce-checkout textarea::placeholder {
	color: #9ca3af;
}

/* Select dropdowns */
#custom-checkout-form select,
.woocommerce-checkout select {
	display: block;
	width: 100%;
	padding: 0.625rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	color: #111827;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	font-family: "Outfit", sans-serif;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.5rem;
}

#custom-checkout-form select:focus,
.woocommerce-checkout select:focus {
	outline: none;
	border-color: #fda4af;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

/* Form rows spacing */
#custom-checkout-form p,
#custom-checkout-form .form-row,
.woocommerce-checkout .form-row {
	margin-bottom: 1rem;
}

/* Checkboxes */
#custom-checkout-form input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: #e11d48;
	border-radius: 0.25rem;
	cursor: pointer;
	vertical-align: middle;
	margin-right: 0.5rem;
}

/* Coupon section */
#custom-checkout-form #coupon_code,
.woocommerce-checkout .woocommerce-form-coupon input {
	display: inline-block;
	width: auto;
	min-width: 200px;
	margin-right: 0.5rem;
}

#custom-checkout-form #apply_coupon,
.woocommerce-checkout .woocommerce-form-coupon button {
	display: inline-block;
	background: #111827;
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: background-color 0.15s;
}

#custom-checkout-form #apply_coupon:hover,
.woocommerce-checkout .woocommerce-form-coupon button:hover {
	background: #e11d48;
}

/* Order summary / review section inside checkout */
#custom-checkout-form .order-review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: #fff;
	border-radius: 1rem;
	border: 1px solid #f3f4f6;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	padding: 1.5rem;
}

@media (min-width: 1024px) {
	#custom-checkout-form .order-review,
	.woocommerce-checkout .woocommerce-checkout-review-order {
		padding: 2rem;
	}
}

/* Order review table */
.woocommerce-checkout-review-order-table,
#custom-checkout-form table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.woocommerce-checkout-review-order-table th,
#custom-checkout-form table th {
	text-align: left;
	font-weight: 600;
	color: #6b7280;
	padding: 0.75rem 0;
	border-bottom: 1px solid #f3f4f6;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.woocommerce-checkout-review-order-table td,
#custom-checkout-form table td {
	padding: 0.75rem 0;
	border-bottom: 1px solid #f3f4f6;
	color: #374151;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td,
#custom-checkout-form table .order-total th,
#custom-checkout-form table .order-total td {
	font-size: 1.0625rem;
	font-weight: 800;
	padding-top: 1rem;
	border-bottom: none;
	border-top: 2px solid #f3f4f6;
}

.woocommerce-checkout-review-order-table .order-total td,
#custom-checkout-form table .order-total td {
	color: #e11d48;
}

/* Submit / Place Order button */
#custom-checkout-form #complete-order,
#custom-checkout-form button[type="submit"],
.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	background: #e11d48;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9rem 1.5rem;
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s;
	margin-top: 1.25rem;
	font-family: "Outfit", sans-serif;
}

#custom-checkout-form #complete-order:hover,
#custom-checkout-form button[type="submit"]:hover,
.woocommerce-checkout #place_order:hover {
	background: #be123c;
}

/* Payment methods */
.wc_payment_methods,
#custom-checkout-form .payment-methods {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}

.wc_payment_methods li,
#custom-checkout-form .payment-methods li {
	padding: 0.75rem 1rem;
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 0.75rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.wc_payment_methods li.wc_payment_method label {
	cursor: pointer;
	font-weight: 600;
}

/* Validation states */
.form-row.woocommerce-validated input.input-text {
	border-color: #86efac;
	box-shadow: inset 2px 0 0 #22c55e;
}

.form-row.woocommerce-invalid input.input-text {
	border-color: #fca5a5;
	box-shadow: inset 2px 0 0 #ef4444;
}


/* ========================================================================
   3. SHARED / UTILITY STYLES
   ======================================================================== */

/* Star rating */
.star-rating {
	overflow: hidden;
	position: relative;
	height: 1.618em;
	line-height: 1.618;
	width: 5.3em;
	font-family: star;
	font-weight: 400;
}

.star-rating::before {
	content: "\53\53\53\53\53";
	opacity: 0.25;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}

.star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "\53\53\53\53\53";
	top: 0;
	position: absolute;
	left: 0;
	color: #f59e0b;
}

/* Stock */
.stock:empty::before {
	display: none;
}

.stock.in-stock {
	color: #16a34a;
}

.stock.out-of-stock {
	color: #dc2626;
}


/* ========================================================================
   4. RESPONSIVE TABLE (mobile stacking for classic templates)
   ======================================================================== */

table.shop_table_responsive thead {
	display: none;
}

table.shop_table_responsive tbody th {
	display: none;
}

table.shop_table_responsive tr td {
	display: block;
	text-align: right;
	clear: both;
}

table.shop_table_responsive tr td::before {
	content: attr(data-title) ": ";
	float: left;
	font-weight: 600;
	color: #6b7280;
}

table.shop_table_responsive tr td.product-remove::before,
table.shop_table_responsive tr td.actions::before,
table.shop_table_responsive tr td.download-actions::before {
	display: none;
}

@media screen and (min-width: 48em) {
	table.shop_table_responsive thead {
		display: table-header-group;
	}

	table.shop_table_responsive tbody th {
		display: table-cell;
	}

	table.shop_table_responsive tr th,
	table.shop_table_responsive tr td {
		text-align: left;
	}

	table.shop_table_responsive tr td {
		display: table-cell;
	}

	table.shop_table_responsive tr td::before {
		display: none;
	}
}

/* General button-like elements */
.woocommerce .button,
.woocommerce button.button {
	background: #111827;
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: background-color 0.15s;
	font-family: "Outfit", sans-serif;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
	background: #e11d48;
	color: #fff;
}

/* Remove all "a" link underline defaults in WooCommerce blocks */
.wc-block-cart a,
#custom-checkout-form a {
	text-decoration: none;
}

/* Demo store bar */
.demo_store {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 1em;
	background-color: #111827;
	color: #fff;
	z-index: 9999;
	font-size: 0.875rem;
	text-align: center;
}

/* Header cart widget */
.site-header-cart {
	position: relative;
	margin: 0;
	padding: 0;
}

.site-header-cart .cart-contents {
	text-decoration: none;
}

.site-header-cart .widget_shopping_cart {
	display: none;
}

.site-header-cart .product_list_widget {
	margin: 0;
	padding: 0;
}

@media screen and (min-width: 48em) {
	.site-header-cart .widget_shopping_cart {
		position: absolute;
		top: 100%;
		width: 100%;
		z-index: 999999;
		left: -999em;
		display: block;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	}

	.site-header-cart:hover .widget_shopping_cart,
	.site-header-cart.focus .widget_shopping_cart {
		left: 0;
		display: block;
	}
}

/* Password strength meter */
.woocommerce-password-strength {
	text-align: right;
	font-size: 0.8125rem;
	margin-top: 0.25rem;
}

.woocommerce-password-strength.strong {
	color: #16a34a;
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
	color: #dc2626;
}

.woocommerce-password-strength.good {
	color: #2563eb;
}

/* WooCommerce tabs */
.woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li {
	display: inline-block;
	margin-right: 0.25rem;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #6b7280;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: all 0.15s;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: #e11d48;
	border-bottom-color: #e11d48;
}

.woocommerce-tabs .panel h2:first-of-type {
	margin-bottom: 1em;
}

/* Products list (for legacy shortcode usage) */
ul.products {
	margin: 0;
	padding: 0;
}

ul.products li.product {
	list-style: none;
	position: relative;
	margin-bottom: 2em;
}

ul.products li.product img {
	display: block;
}

/* Single product */
.single-product div.product {
	position: relative;
}

.single-product div.product .woocommerce-product-gallery {
	position: relative;
	float: left;
}


/* ========================================================================
   5. AGGRESSIVE CHECKOUT OVERRIDES (for plugin-injected elements)
   ======================================================================== */

/* Force-style ALL inputs/selects on checkout page */
.woocommerce-checkout .entry-content input[type="text"],
.woocommerce-checkout .entry-content input[type="email"],
.woocommerce-checkout .entry-content input[type="tel"],
.woocommerce-checkout .entry-content input[type="number"],
.woocommerce-checkout .entry-content input[type="password"],
.woocommerce-checkout .entry-content textarea {
	display: block !important;
	width: 100% !important;
	padding: 0.7rem 1rem !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 0.75rem !important;
	font-size: 0.875rem !important;
	color: #111827 !important;
	background: #fff !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	box-sizing: border-box !important;
	font-family: "Outfit", sans-serif !important;
	margin-bottom: 0.5rem !important;
}

.woocommerce-checkout .entry-content input[type="text"]:focus,
.woocommerce-checkout .entry-content input[type="email"]:focus,
.woocommerce-checkout .entry-content input[type="tel"]:focus,
.woocommerce-checkout .entry-content textarea:focus {
	outline: none !important;
	border-color: #fda4af !important;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1) !important;
}

.woocommerce-checkout .entry-content select {
	display: block !important;
	width: 100% !important;
	padding: 0.7rem 1rem !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 0.75rem !important;
	font-size: 0.875rem !important;
	color: #111827 !important;
	background: #fff !important;
	cursor: pointer !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	box-sizing: border-box !important;
	font-family: "Outfit", sans-serif !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	padding-right: 2.5rem !important;
	margin-bottom: 0.5rem !important;
}

.woocommerce-checkout .entry-content select:focus {
	outline: none !important;
	border-color: #fda4af !important;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1) !important;
}

/* Force labels on checkout */
.woocommerce-checkout .entry-content label {
	display: block !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #374151 !important;
	margin-bottom: 0.375rem !important;
	margin-top: 0.75rem !important;
}

/* Checkout page title styling */
.woocommerce-checkout .entry-content > h1,
.woocommerce-checkout .entry-title {
	font-size: 1.875rem !important;
	font-weight: 800 !important;
	color: #111827 !important;
	margin-bottom: 1.5rem !important;
}

/* "Your order" heading */
.woocommerce-checkout .entry-content h3,
.woocommerce-checkout .entry-content h4 {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: #111827 !important;
	margin-top: 2rem !important;
	margin-bottom: 1rem !important;
	padding-bottom: 0.75rem !important;
	border-bottom: 1px solid #f3f4f6 !important;
}

/* Complete Order / Place Order button — force style */
.woocommerce-checkout .entry-content button,
.woocommerce-checkout .entry-content input[type="submit"],
.woocommerce-checkout #complete-order,
.woocommerce-checkout #place_order {
	display: block !important;
	width: 100% !important;
	background: #e11d48 !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	padding: 0.9rem 1.5rem !important;
	border: none !important;
	border-radius: 0.75rem !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: background-color 0.2s !important;
	margin-top: 1.25rem !important;
	font-family: "Outfit", sans-serif !important;
}

.woocommerce-checkout .entry-content button:hover,
.woocommerce-checkout #complete-order:hover,
.woocommerce-checkout #place_order:hover {
	background: #be123c !important;
}

/* Apply coupon button — slightly different style */
.woocommerce-checkout #apply_coupon {
	display: inline-block !important;
	width: auto !important;
	background: #111827 !important;
	padding: 0.7rem 1.5rem !important;
	margin-top: 0 !important;
}

.woocommerce-checkout #apply_coupon:hover {
	background: #e11d48 !important;
}

/* Coupon input — inline */
.woocommerce-checkout #coupon_code {
	display: inline-block !important;
	width: auto !important;
	min-width: 200px !important;
	margin-right: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

/* Payment section styling */
.woocommerce-checkout .entry-content input[type="radio"] {
	width: 1.125rem !important;
	height: 1.125rem !important;
	accent-color: #e11d48 !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	margin-right: 0.5rem !important;
}

/* Privacy / terms text */
.woocommerce-checkout .entry-content .woocommerce-privacy-policy-text,
.woocommerce-checkout .entry-content p:has(> .woocommerce-privacy-policy-link) {
	font-size: 0.75rem;
	color: #9ca3af;
	margin-top: 1rem;
}

/* Amount information / order summary on checkout */
.woocommerce-checkout .entry-content strong {
	font-weight: 700;
	color: #111827;
}

/* Responsive: two-column layout for checkout on desktop */
@media (min-width: 1024px) {
	.woocommerce-checkout .entry-content {
		display: block;
	}
}


/* ========================================================================
   6. MY ACCOUNT — Edit Account & Address Forms
   ======================================================================== */

/* Hide the default page title wrapper (we have our own header in my-account.php) */
.woocommerce-account .entry-header {
	display: none;
}

/* Full-width main on account pages */
.woocommerce-account .site-main {
	max-width: 100%;
}

/* ── Form inputs ────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content textarea {
	display: block;
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	color: #111827;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	font-family: "Outfit", sans-serif;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	outline: none;
	border-color: #fda4af;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

.woocommerce-account .woocommerce-MyAccount-content input::placeholder,
.woocommerce-account .woocommerce-MyAccount-content textarea::placeholder {
	color: #9ca3af;
}

/* ── Select dropdowns ───────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content select {
	display: block;
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	color: #111827;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	font-family: "Outfit", sans-serif;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.5rem;
}

.woocommerce-account .woocommerce-MyAccount-content select:focus {
	outline: none;
	border-color: #fda4af;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

/* ── Labels ─────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.375rem;
}

.woocommerce-account .woocommerce-MyAccount-content .required {
	color: #e11d48;
}

/* ── Form row spacing ───────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .form-row {
	margin-bottom: 1.25rem;
}

/* ── Name fields side by side ───────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
	width: 100%;
}

@media (min-width: 640px) {
	.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
	.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
		display: inline-block;
		width: 48.5%;
	}
	.woocommerce-account .woocommerce-MyAccount-content .form-row-first {
		margin-right: 2%;
	}
}

/* ── Fieldsets (Password change) ────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: none;
	padding: 0;
	margin: 2rem 0 0;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	font-size: 1.125rem;
	font-weight: 700;
	color: #111827;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f3f4f6;
	width: 100%;
	display: block;
}

/* ── Display name description ───────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content #account_display_name_description em {
	display: block;
	font-size: 0.75rem;
	color: #9ca3af;
	margin-top: 0.375rem;
	font-style: normal;
}

/* ── Submit buttons ─────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: #e11d48;
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 0.75rem 2rem;
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: background-color 0.2s;
	font-family: "Outfit", sans-serif;
	margin-top: 0.5rem;
}

.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
	background: #be123c;
	color: #fff;
}

/* ── Address page cards ─────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 0.75rem;
	padding: 1.25rem;
	margin-top: 1rem;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title h2 {
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title a.edit {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #e11d48;
	text-decoration: none;
	transition: color 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title a.edit:hover {
	color: #be123c;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
	font-style: normal;
	font-size: 0.875rem;
	color: #4b5563;
	line-height: 1.7;
}

/* Address description text */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	font-size: 0.875rem;
	color: #6b7280;
	margin-bottom: 1.5rem;
}

/* ── Edit Address form styling ──────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f3f4f6;
}

/* ── Clear floats ───────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .clear {
	clear: both;
}

/* ── WooCommerce notices on My Account ──────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
	margin-bottom: 1.5rem;
}


/* ========================================================================
   7. VIEW ORDER — Order Detail Page
   ======================================================================== */

/* ── Order status mark tags ─────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content mark {
	background: none;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-number {
	color: #e11d48;
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-date {
	color: #111827;
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-status {
	display: inline-block;
	padding: 0.125rem 0.625rem;
	background: #dcfce7;
	color: #166534;
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ── Order details section heading ──────────────────────────────── */
.woocommerce-account .woocommerce-order-details__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f3f4f6;
}

/* ── Order details table ────────────────────────────────────────── */
.woocommerce-account .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.woocommerce-account .woocommerce-table--order-details thead tr {
	border-bottom: 2px solid #f3f4f6;
}

.woocommerce-account .woocommerce-table--order-details thead th {
	text-align: left;
	font-weight: 600;
	color: #6b7280;
	padding: 0.75rem 0.5rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.woocommerce-account .woocommerce-table--order-details tbody td {
	padding: 1rem 0.5rem;
	border-bottom: 1px solid #f3f4f6;
	color: #374151;
	vertical-align: top;
}

.woocommerce-account .woocommerce-table--order-details tbody .product-name {
	font-weight: 600;
	color: #111827;
}

.woocommerce-account .woocommerce-table--order-details tbody .product-name a {
	color: #111827;
	text-decoration: none;
	transition: color 0.15s;
}

.woocommerce-account .woocommerce-table--order-details tbody .product-name a:hover {
	color: #e11d48;
}

.woocommerce-account .woocommerce-table--order-details tbody .product-name .wc-item-meta {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 400;
	color: #6b7280;
}

.woocommerce-account .woocommerce-table--order-details tbody .product-name .wc-item-meta li {
	margin-bottom: 0.25rem;
}

.woocommerce-account .woocommerce-table--order-details tbody .product-name .wc-item-meta strong {
	font-weight: 600;
	color: #374151;
}

.woocommerce-account .woocommerce-table--order-details tbody .product-quantity {
	color: #6b7280;
	font-weight: 400;
}

.woocommerce-account .woocommerce-table--order-details tbody .product-total {
	text-align: right;
	font-weight: 700;
	color: #111827;
}

/* ── Table footer (totals) ──────────────────────────────────────── */
.woocommerce-account .woocommerce-table--order-details tfoot th {
	text-align: left;
	padding: 0.625rem 0.5rem;
	font-weight: 600;
	color: #6b7280;
	font-size: 0.875rem;
}

.woocommerce-account .woocommerce-table--order-details tfoot td {
	text-align: right;
	padding: 0.625rem 0.5rem;
	color: #374151;
	font-size: 0.875rem;
}

.woocommerce-account .woocommerce-table--order-details tfoot tr {
	border-bottom: 1px solid #f3f4f6;
}

.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child {
	border-bottom: none;
	border-top: 2px solid #f3f4f6;
}

.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child th {
	font-weight: 700;
	color: #111827;
	font-size: 1rem;
	padding-top: 1rem;
}

.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td {
	font-weight: 800;
	color: #e11d48;
	font-size: 1.0625rem;
	padding-top: 1rem;
}

/* ── Action buttons (Order Again, Pay, Cancel) ──────────────────── */
.woocommerce-account .order-actions-button {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 0.5rem;
	text-decoration: none;
	transition: background-color 0.15s;
	margin-right: 0.5rem;
	margin-top: 0.5rem;
}

.woocommerce-account .order-actions-button.order-again {
	background: #e11d48;
	color: #fff;
}

.woocommerce-account .order-actions-button.order-again:hover {
	background: #be123c;
}

.woocommerce-account .order-actions-button.pay {
	background: #059669;
	color: #fff;
}

.woocommerce-account .order-actions-button.pay:hover {
	background: #047857;
}

.woocommerce-account .order-actions-button.cancel {
	background: #f3f4f6;
	color: #dc2626;
}

.woocommerce-account .order-actions-button.cancel:hover {
	background: #fef2f2;
}

/* ── Order Notes timeline ───────────────────────────────────────── */
.woocommerce-account .woocommerce-OrderUpdates {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content h2:not(.woocommerce-order-details__title) {
	font-size: 1.125rem;
	font-weight: 700;
	color: #111827;
	margin: 2rem 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f3f4f6;
}

.woocommerce-account .woocommerce-OrderUpdate {
	padding: 0.875rem 1rem;
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 0.75rem;
	margin-bottom: 0.75rem;
}

.woocommerce-account .woocommerce-OrderUpdate-meta {
	font-size: 0.75rem;
	color: #9ca3af;
	font-weight: 500;
	margin-bottom: 0.375rem;
}

.woocommerce-account .woocommerce-OrderUpdate-description p {
	font-size: 0.875rem;
	color: #374151;
	margin: 0;
}

/* ── Customer details (billing/shipping address) ────────────────── */
.woocommerce-account .woocommerce-customer-details {
	margin-top: 2rem;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.woocommerce-account .woocommerce-customer-details .woocommerce-columns {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account .woocommerce-customer-details .woocommerce-column {
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-column__title {
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
}

.woocommerce-account .woocommerce-customer-details address {
	font-style: normal;
	font-size: 0.875rem;
	color: #4b5563;
	line-height: 1.7;
}

.woocommerce-account .woocommerce-customer-details address p {
	margin: 0 0 0.25rem;
}

/* ── Order actions heading in tfoot ─────────────────────────────── */
.woocommerce-account .woocommerce-table--order-details tfoot .order-actions--heading {
	font-weight: 600;
	color: #6b7280;
	font-size: 0.875rem;
}


/* ========================================================================
   8. LOST PASSWORD / RESET PASSWORD — Premium Card UI
   ======================================================================== */

/* ── Page-level overrides ───────────────────────────────────────── */
.woocommerce-account.woocommerce-lost-password .site-main,
.woocommerce-account.woocommerce-reset-password .site-main {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

.woocommerce-account.woocommerce-lost-password .entry-header,
.woocommerce-account.woocommerce-reset-password .entry-header {
	display: none;
}

.woocommerce-account.woocommerce-lost-password #primary,
.woocommerce-account.woocommerce-reset-password #primary {
	padding: 0;
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.josspro-lost-pw {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 6rem 1rem 3rem;
	background: linear-gradient(135deg, #fdf2f8 0%, #fff1f2 30%, #f9fafb 100%);
	font-family: "Outfit", sans-serif;
}

/* ── Card ────────────────────────────────────────────────────────── */
.josspro-lost-pw__card {
	width: 100%;
	max-width: 28rem;
	background: #fff;
	border-radius: 1.25rem;
	box-shadow:
		0 20px 60px -12px rgba(225, 29, 72, 0.12),
		0 8px 24px -4px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	animation: jlpFadeIn 0.4s ease;
}

@keyframes jlpFadeIn {
	from { opacity: 0; transform: translateY(20px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Gradient Header ────────────────────────────────────────────── */
.josspro-lost-pw__header {
	background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
	padding: 2rem 2rem 2.5rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.josspro-lost-pw__header::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 200px;
	height: 200px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 50%;
}

.josspro-lost-pw__header::after {
	content: "";
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 160px;
	height: 160px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 50%;
}

.josspro-lost-pw__brand {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	position: relative;
	z-index: 1;
}

.josspro-lost-pw__brand-j {
	color: #fff;
}

.josspro-lost-pw__brand-p {
	color: rgba(255, 255, 255, 0.6);
}

.josspro-lost-pw__subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	margin: 0.25rem 0 0;
	position: relative;
	z-index: 1;
}

/* ── Icon circle ────────────────────────────────────────────────── */
.josspro-lost-pw__icon-area {
	display: flex;
	justify-content: center;
	margin-top: -1.75rem;
	position: relative;
	z-index: 2;
}

.josspro-lost-pw__icon-circle {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #fda4af, #fb7185);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
	animation: jlpPulse 2.5s ease-in-out infinite;
}

.josspro-lost-pw__icon-circle i {
	font-size: 1.5rem;
	color: #fff;
}

.josspro-lost-pw__icon-circle--success {
	background: linear-gradient(135deg, #86efac, #4ade80);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
	animation-name: jlpPulseGreen;
}

@keyframes jlpPulse {
	0%, 100% { box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25); }
	50%      { box-shadow: 0 4px 24px rgba(225, 29, 72, 0.4); }
}

@keyframes jlpPulseGreen {
	0%, 100% { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25); }
	50%      { box-shadow: 0 4px 24px rgba(34, 197, 94, 0.4); }
}

/* ── Body ────────────────────────────────────────────────────────── */
.josspro-lost-pw__body {
	padding: 1.5rem 2rem 2rem;
}

.josspro-lost-pw__desc {
	font-size: 0.8125rem;
	color: #6b7280;
	text-align: center;
	margin: 0 0 1.5rem;
	line-height: 1.6;
}

/* ── Form ────────────────────────────────────────────────────────── */
.josspro-lost-pw__form {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.josspro-lost-pw__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.josspro-lost-pw__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #4b5563;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.josspro-lost-pw__req {
	color: #e11d48;
}

/* ── Input wrapper ──────────────────────────────────────────────── */
.josspro-lost-pw__input-wrap {
	position: relative;
}

.josspro-lost-pw__input-icon {
	position: absolute;
	left: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	pointer-events: none;
	transition: color 0.15s;
}

.josspro-lost-pw__input-icon i {
	font-size: 1.125rem;
}

.josspro-lost-pw__input {
	width: 100%;
	padding: 0.7rem 1rem 0.7rem 2.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	color: #111827;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	font-family: "Outfit", sans-serif;
}

.josspro-lost-pw__input:focus {
	outline: none;
	border-color: #fda4af;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

.josspro-lost-pw__input-wrap:focus-within .josspro-lost-pw__input-icon {
	color: #e11d48;
}

.josspro-lost-pw__input::placeholder {
	color: #9ca3af;
}

/* Password inputs — extra right padding for eye toggle */
.josspro-lost-pw__input--pw {
	padding-right: 2.75rem;
}

/* ── Eye toggle ─────────────────────────────────────────────────── */
.josspro-lost-pw__eye {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: #9ca3af;
	cursor: pointer;
	transition: color 0.15s;
}

.josspro-lost-pw__eye:hover {
	color: #6b7280;
}

.josspro-lost-pw__eye i {
	font-size: 1.125rem;
}

/* ── Submit button ──────────────────────────────────────────────── */
.josspro-lost-pw__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.8rem 1.5rem;
	background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
	font-family: "Outfit", sans-serif;
	box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3);
	margin-top: 0.25rem;
}

.josspro-lost-pw__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(225, 29, 72, 0.4);
}

.josspro-lost-pw__btn:active {
	transform: translateY(0);
}

.josspro-lost-pw__btn i {
	font-size: 1.125rem;
}

/* ── Footer / Back link ─────────────────────────────────────────── */
.josspro-lost-pw__footer {
	text-align: center;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid #f3f4f6;
}

.josspro-lost-pw__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #e11d48;
	text-decoration: none;
	transition: color 0.15s, gap 0.15s;
}

.josspro-lost-pw__back:hover {
	color: #be123c;
	gap: 0.5rem;
}

.josspro-lost-pw__back i {
	font-size: 1rem;
	transition: transform 0.15s;
}

.josspro-lost-pw__back:hover i {
	transform: translateX(-2px);
}

/* ── Help text below card ───────────────────────────────────────── */
.josspro-lost-pw__help {
	text-align: center;
	font-size: 0.8125rem;
	color: #9ca3af;
	margin-top: 1.5rem;
}

.josspro-lost-pw__help a {
	color: #e11d48;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s;
}

.josspro-lost-pw__help a:hover {
	color: #be123c;
}

/* ── WooCommerce notices inside the card ─────────────────────────── */
.josspro-lost-pw .woocommerce-message,
.josspro-lost-pw .woocommerce-info,
.josspro-lost-pw .woocommerce-error {
	margin-bottom: 1rem;
	border-radius: 0.625rem;
	font-size: 0.8125rem;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.josspro-lost-pw {
		padding: 5rem 0.75rem 2rem;
	}

	.josspro-lost-pw__card {
		border-radius: 1rem;
	}

	.josspro-lost-pw__header {
		padding: 1.5rem 1.5rem 1.25rem;
	}

	.josspro-lost-pw__body {
		padding: 1.25rem 1.5rem 1.5rem;
	}

	.josspro-lost-pw__brand {
		font-size: 1.5rem;
	}
}

/* ── Hide default WC wrapper chrome on lost-pw page ─────────────── */
.woocommerce-account.woocommerce-lost-password .entry-header,
.woocommerce-account.woocommerce-reset-password .entry-header {
	display: none !important;
}


/* ========================================================================
   9. LOGIN PAGE — Extra styles (reuses .josspro-lost-pw card system)
   ======================================================================== */

/* ── Remember me ────────────────────────────────────────────────── */
.josspro-login__remember {
	display: flex;
	align-items: center;
}

.josspro-login__remember-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: #6b7280;
	cursor: pointer;
	font-weight: 500;
}

.josspro-login__remember-label input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	accent-color: #e11d48;
	border-radius: 0.25rem;
	cursor: pointer;
}

/* ── Forgot password link ───────────────────────────────────────── */
.josspro-login__links {
	text-align: center;
	margin-top: 0.25rem;
}

.josspro-login__forgot {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #e11d48;
	text-decoration: none;
	transition: color 0.15s;
}

.josspro-login__forgot:hover {
	color: #be123c;
}

/* ── Divider ────────────────────────────────────────────────────── */
.josspro-login__divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.25rem 0;
}

.josspro-login__divider::before,
.josspro-login__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

.josspro-login__divider span {
	font-size: 0.75rem;
	font-weight: 500;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.075em;
}

/* ── Register CTA ───────────────────────────────────────────────── */
.josspro-login__register-cta {
	text-align: center;
}

.josspro-login__register-cta p {
	font-size: 0.8125rem;
	color: #6b7280;
	margin: 0 0 0.625rem;
}

.josspro-login__register-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.7rem 1.5rem;
	background: #fff;
	color: #e11d48;
	font-weight: 600;
	font-size: 0.875rem;
	border: 2px solid #fecdd3;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: all 0.15s;
	font-family: "Outfit", sans-serif;
}

.josspro-login__register-btn:hover {
	background: #fff1f2;
	border-color: #fda4af;
}

.josspro-login__register-btn i {
	font-size: 1.125rem;
}