/* =========================================================================
   Mahatosoft brand skin for WooCommerce — Cart, Checkout, My Account.
   Tokens ported verbatim from the React app's globals.css so these pages
   read as part of the same site instead of a bare WooCommerce/OceanWP page.
   Only loads on is_cart() / is_checkout() / is_account_page() — see the
   enqueue in mahatosoft-headless-cms.php.
   ========================================================================= */

:root {
	--ms-blue: #19639A; --ms-blue-700: #124b76; --ms-blue-50: #eef5fb;
	--ms-orange: #ED804B; --ms-orange-hover: #E0703A; --ms-orange-50: #fdf2ec;
	--ms-ink: #111827; --ms-text: #1F2937; --ms-muted: #4B5563; --ms-soft: #6B7280;
	--ms-line: #E5E7EB; --ms-gray-50: #F9FAFB; --ms-page: #ffffff;
	--ms-r-sm: 8px; --ms-r: 12px; --ms-r-lg: 18px;
	--ms-sh: 0 1px 2px rgba(17,24,39,.05);
	--ms-sh-md: 0 12px 30px -14px rgba(17,24,39,.18);
	--ms-h: 'Plus Jakarta Sans', system-ui, sans-serif;
	--ms-b: 'DM Sans', system-ui, sans-serif;
}

/* ------------------------------------------------------------- page shell */
body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account {
	background: var(--ms-page) !important;
	font-family: var(--ms-b) !important;
	color: var(--ms-text) !important;
}
body.woocommerce-cart #content, body.woocommerce-checkout #content, body.woocommerce-account #content,
body.woocommerce-cart .content-area, body.woocommerce-checkout .content-area, body.woocommerce-account .content-area {
	max-width: 1080px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) 20px 80px;
}

/* ------------------------------------------------------------------- type */
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-cart h1, .woocommerce-checkout h1, .woocommerce-account h1,
.entry-title {
	font-family: var(--ms-h) !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	color: var(--ms-ink) !important;
}
.woocommerce a { color: var(--ms-blue); text-decoration: none; }
.woocommerce a:hover { color: var(--ms-blue-700); }

/* ----------------------------------------------------------------- links & buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #place_order, .woocommerce .checkout-button,
.woocommerce a.checkout-button {
	background: var(--ms-orange) !important;
	color: #fff !important;
	font-family: var(--ms-h) !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: var(--ms-r-sm) !important;
	padding: 13px 22px !important;
	font-size: 15px !important;
	letter-spacing: 0;
	box-shadow: none !important;
	transition: background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #place_order:hover {
	background: var(--ms-orange-hover) !important;
	color: #fff !important;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background: var(--ms-orange) !important;
}
/* Secondary / outline buttons (e.g. "Update cart", "Continue shopping") */
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce button[name="update_cart"] {
	background: transparent !important;
	color: var(--ms-ink) !important;
	border: 1px solid var(--ms-line) !important;
}
.woocommerce button[name="update_cart"]:hover {
	border-color: var(--ms-ink) !important;
	background: var(--ms-gray-50) !important;
}
.woocommerce .wc-proceed-to-checkout .checkout-button {
	background: var(--ms-orange) !important;
	color: #fff !important;
	border: none !important;
}

/* ------------------------------------------------------------- cart table */
.woocommerce table.shop_table {
	border: 1px solid var(--ms-line) !important;
	border-radius: var(--ms-r) !important;
	overflow: hidden;
	border-collapse: separate !important;
	box-shadow: var(--ms-sh);
}
.woocommerce table.shop_table th {
	background: var(--ms-gray-50) !important;
	font-family: var(--ms-h) !important;
	font-weight: 700 !important;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ms-soft) !important;
	border-bottom: 1px solid var(--ms-line) !important;
}
.woocommerce table.shop_table td {
	border-top: 1px solid var(--ms-line) !important;
	vertical-align: middle;
}
.woocommerce table.shop_table td.product-name a {
	font-family: var(--ms-h);
	font-weight: 600;
	color: var(--ms-ink);
}
.woocommerce .product-remove a.remove {
	color: var(--ms-soft) !important;
	background: transparent !important;
	border-radius: 50% !important;
}
.woocommerce .product-remove a.remove:hover {
	color: #fff !important;
	background: #DC2626 !important;
}

/* ----------------------------------------------------------- cart totals */
.woocommerce-cart-form, .cart-collaterals { margin-top: 24px; }
.woocommerce-cart .cart_totals, .woocommerce-checkout-review-order,
#order_review, .order_review {
	background: var(--ms-gray-50) !important;
	border: 1px solid var(--ms-line) !important;
	border-radius: var(--ms-r-lg) !important;
	padding: 24px !important;
}
.woocommerce-cart .cart_totals h2, .woocommerce-checkout-review-order-table caption {
	font-family: var(--ms-h) !important;
	font-weight: 800 !important;
	font-size: 19px !important;
}
.woocommerce-cart .cart_totals table, .woocommerce-checkout-review-order-table {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td,
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td {
	border-top: 1px solid var(--ms-line) !important;
	background: transparent !important;
}
.woocommerce .order-total .woocommerce-Price-amount {
	font-family: var(--ms-h) !important;
	font-weight: 800 !important;
	color: var(--ms-ink) !important;
	font-size: 18px;
}

/* -------------------------------------------------------------- coupon box */
.woocommerce-cart-form .coupon {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.woocommerce-cart-form .coupon .input-text {
	max-width: 220px;
}

/* ------------------------------------------------------------ form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce table.shop_table input.input-text,
.select2-container .select2-selection {
	border: 1px solid var(--ms-line) !important;
	border-radius: var(--ms-r-sm) !important;
	padding: 11px 13px !important;
	font-family: var(--ms-b) !important;
	background: #fff !important;
	box-shadow: none !important;
	height: auto !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--ms-orange) !important;
	outline: 2px solid var(--ms-orange) !important;
	outline-offset: 1px;
}
.woocommerce form .form-row label {
	font-family: var(--ms-h);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--ms-text);
}
.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields {
	margin-bottom: 28px;
}
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3,
#order_review_heading {
	font-family: var(--ms-h) !important;
	font-weight: 800 !important;
	font-size: 19px !important;
	margin-bottom: 16px !important;
}

/* ------------------------------------------------------------- payment box */
.woocommerce-checkout #payment { background: var(--ms-gray-50) !important; border-radius: var(--ms-r) !important; border: 1px solid var(--ms-line) !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--ms-line) !important; }
.woocommerce-checkout #payment div.payment_box { background: var(--ms-blue-50) !important; border-radius: var(--ms-r-sm) !important; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ms-blue-50) !important; }

/* -------------------------------------------------------------- notices */
.woocommerce-message, .woocommerce-info {
	border-top-color: var(--ms-blue) !important;
	background: var(--ms-blue-50) !important;
	border-radius: var(--ms-r-sm) !important;
	font-family: var(--ms-b) !important;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--ms-blue) !important; }
.woocommerce-error {
	border-top-color: #DC2626 !important;
	background: #FEF2F2 !important;
	border-radius: var(--ms-r-sm) !important;
}
.woocommerce-message .button, .woocommerce-info .button {
	background: var(--ms-orange) !important;
	color: #fff !important;
}

/* ----------------------------------------------------------- My Account */
.woocommerce-MyAccount-navigation {
	background: var(--ms-gray-50);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r-lg);
	padding: 10px;
}
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation-link a {
	display: block;
	font-family: var(--ms-h);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ms-text);
	padding: 11px 14px;
	border-radius: var(--ms-r-sm);
}
.woocommerce-MyAccount-navigation-link a:hover { background: #fff; color: var(--ms-ink); }
.woocommerce-MyAccount-navigation-link--dashboard.is-active a,
.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--ms-orange) !important;
	color: #fff !important;
}
.woocommerce-MyAccount-content { padding-top: 4px; }
.woocommerce-MyAccount-content h3 {
	font-family: var(--ms-h) !important;
	font-weight: 800 !important;
}
.woocommerce-orders-table, table.my_account_orders {
	border: 1px solid var(--ms-line) !important;
	border-radius: var(--ms-r) !important;
	overflow: hidden;
}
.woocommerce-orders-table th { background: var(--ms-gray-50) !important; font-family: var(--ms-h) !important; }
mark.order-status {
	background: var(--ms-orange-50) !important;
	color: var(--ms-orange-hover) !important;
	border-radius: 999px !important;
	padding: 3px 12px !important;
	font-family: var(--ms-h);
	font-weight: 700;
	font-size: 12.5px;
}
.woocommerce-MyAccount-content .button { margin-top: 8px; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 700px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 20px; }
	.woocommerce-cart .cart_totals, .woocommerce-checkout-review-order, #order_review { padding: 18px !important; }
}