/**
 * WooCommerce Base Styles - Techtronic Theme
 *
 * Shared wrappers, cards, buttons, tables, and generic WooCommerce form primitives.
 * Split from the former monolithic assets/css/woocommerce.css.
 *
 * @package Techtronic_Theme
 * @since 1.1.1
 */

/* ============================================
   WOOCOMMERCE PAGE WRAPPER
   Base wrapper for all WooCommerce pages
   ============================================ */

.woocommerce-page-wrapper {
	background: var(--surface-0);
	min-height: calc(100vh - var(--navbar-height));
}

/* ============================================
   SHARED PAGE HEADER STYLES
   Consistent with landing/about hero sections
   ============================================ */

.cart-page-header,
.checkout-page-header,
.myaccount-page-header {
	text-align: center;
	margin-block-end: var(--spacing-10);
	padding-block-start: var(--spacing-8);
}

.cart-page-title,
.checkout-page-title,
.myaccount-page-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: var(--weight-bold);
	color: var(--gray-50);
	margin-block-end: var(--spacing-3);
	text-shadow: 0 0 40px rgba(6, 182, 212, 0.15);
}

.cart-page-subtitle,
.checkout-page-subtitle,
.myaccount-page-subtitle {
	font-size: var(--text-lg);
	color: var(--gray-300);
	margin: 0;
	max-width: 600px;
	margin-inline: auto;
	text-align: center;
}

/* ============================================
   GLASSMORPHIC CARD COMPONENT
   Used for content sections on dark backgrounds
   ============================================ */

.card {
	background: rgba(30, 41, 59, 0.6);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(148, 163, 184, 0.15);
	border-radius: var(--radius-lg);
	box-shadow:
		var(--shadow-base),
		0 0 0 1px rgba(6, 182, 212, 0.05);
	transition: all var(--duration-slow) var(--ease-out);
}

.card:hover {
	border-color: rgba(6, 182, 212, 0.2);
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(6, 182, 212, 0.1);
}

/* ============================================
   CART PAGE LAYOUT
   ============================================ */

/* ============================================
   UI POLISH FIXES
   Comprehensive fixes for alignment, spacing,
   buttons, and responsiveness
   ============================================ */

/* ============================================
   BUTTON FIXES - Consistent Alignment & Padding
   ============================================ */

/* Base button reset for consistent vertical centering */
.woocommerce-MyAccount-content .btn-primary,
.woocommerce-MyAccount-content button.btn-primary,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .button,
.woocommerce-checkout .button,
.woocommerce-checkout button[type="submit"],
.woocommerce-cart-form .button,
.thankyou-actions .button,
.return-to-shop .button,
.orders-empty .button,
.empty-courses .button,
.dashboard-cta .btn-primary,
.btn-primary,
.btn-secondary,
.btn-primary-sm,
.btn-secondary-sm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
}

/* Primary Button - Consistent sizing */
.btn-primary,
.woocommerce-MyAccount-content .btn-primary,
.woocommerce-MyAccount-content button.btn-primary,
.woocommerce-MyAccount-content .woocommerce-Button.btn-primary,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content .button,
.woocommerce-checkout button[type="submit"],
.woocommerce-checkout .button,
.return-to-shop .button,
.orders-empty .button,
.empty-courses .button,
.dashboard-cta .btn-primary {
	padding: 0.875rem 1.5rem;
	min-height: 48px;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
	color: white;
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-primary:hover,
.woocommerce-MyAccount-content .btn-primary:hover,
.woocommerce-MyAccount-content button.btn-primary:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-checkout button[type="submit"]:hover,
.woocommerce-checkout .button:hover,
.return-to-shop .button:hover,
.orders-empty .button:hover,
.empty-courses .button:hover,
.dashboard-cta .btn-primary:hover {
	background: linear-gradient(135deg, var(--primary-700), var(--primary-600));
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4);
	color: white;
}

/* Secondary Button */
.btn-secondary,
.thankyou-actions .btn-secondary,
.orders-pagination .btn-secondary {
	padding: 0.875rem 1.5rem;
	min-height: 48px;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--gray-100);
	border: 1px solid var(--gray-700);
	text-decoration: none;
	cursor: pointer;
	transition: all var(--duration-base) var(--ease-out);
}

.btn-secondary:hover,
.thankyou-actions .btn-secondary:hover,
.orders-pagination .btn-secondary:hover {
	border-color: var(--primary-500);
	color: var(--primary-400);
	background: var(--surface-2);
}

/* Small Buttons */
.btn-primary-sm,
.btn-secondary-sm {
	padding: 0.5rem 0.875rem;
	min-height: 36px;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	border-radius: var(--radius-md);
}

.btn-primary-sm {
	background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
	color: white;
	border: none;
}

.btn-primary-sm:hover {
	background: linear-gradient(135deg, var(--primary-700), var(--primary-600));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.btn-secondary-sm {
	background: transparent;
	color: var(--gray-200);
	border: 1px solid var(--gray-700);
}

.btn-secondary-sm:hover {
	border-color: var(--primary-500);
	color: var(--primary-400);
}

/* Full-width buttons */
.form-submit .btn-primary,
.form-row-remember-submit .btn-primary,
.woocommerce-checkout #place_order,
.wc-proceed-to-checkout .checkout-button {
	width: 100%;
}

@media (max-width: 479px) {
	/* Extra small screens */
	.empty-cart-icon,
	.thankyou-icon {
		width: 80px;
		height: 80px;
	}

	.empty-cart-icon svg,
	.thankyou-icon svg {
		width: 32px;
		height: 32px;
	}

	/* Reduce button padding */
	.btn-primary,
	.btn-secondary {
		padding: 0.75rem 1rem;
		min-height: 44px;
		font-size: var(--text-sm);
	}
}
/* ============================================
   V1 CLASSIC SHORTCODE WOOCOMMERCE LAYOUT
   Active cart, checkout, and account pages render through WooCommerce classic
   shortcodes. These rules target WooCommerce's native shortcode markup rather
   than the disabled template-reference wrappers in _woocommerce-disabled/.
   ============================================ */

.woocommerce-page-wrapper > .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
	width: min(100% - var(--spacing-8), var(--container-wide));
	margin-inline: auto;
	padding-block: var(--spacing-12);
	color: var(--gray-100);
}

.woocommerce-page-wrapper .woocommerce h2,
.woocommerce-page-wrapper .woocommerce h3,
.woocommerce-cart .woocommerce h2,
.woocommerce-cart .woocommerce h3,
.woocommerce-checkout .woocommerce h2,
.woocommerce-checkout .woocommerce h3,
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce h3 {
	color: var(--gray-50);
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	letter-spacing: -0.02em;
}

.woocommerce-page-wrapper .woocommerce a,
.woocommerce-cart .woocommerce a,
.woocommerce-checkout .woocommerce a,
.woocommerce-account .woocommerce a {
	color: var(--primary-400);
}

.woocommerce-page-wrapper .woocommerce a:hover,
.woocommerce-cart .woocommerce a:hover,
.woocommerce-checkout .woocommerce a:hover,
.woocommerce-account .woocommerce a:hover {
	color: var(--primary-300);
}
.woocommerce-page-wrapper .button,
.woocommerce-page-wrapper button.button,
.woocommerce-page-wrapper input.button,
.woocommerce-page-wrapper #respond input#submit,
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-account .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--spacing-3) var(--spacing-5);
	background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
	border: 0;
	border-radius: var(--radius-md);
	box-shadow: 0 12px 28px rgba(6, 182, 212, 0.22);
	color: var(--surface-0) !important;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: 1.2;
	text-decoration: none;
	transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
	cursor: pointer;
}

.woocommerce-page-wrapper .button:hover,
.woocommerce-page-wrapper button.button:hover,
.woocommerce-page-wrapper input.button:hover,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.woocommerce-account .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 32px rgba(6, 182, 212, 0.28);
	color: var(--surface-0) !important;
}

.woocommerce-page-wrapper .button:disabled,
.woocommerce-page-wrapper .button.disabled,
.woocommerce-page-wrapper button.button:disabled,
.woocommerce-page-wrapper button.button:disabled[disabled] {
	opacity: 0.55;
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
}

.woocommerce-page-wrapper table.shop_table,
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table,
.woocommerce-account table.shop_table {
	width: 100%;
	margin: 0 0 var(--spacing-6);
	background: rgba(15, 23, 42, 0.72);
	border: 1px solid rgba(148, 163, 184, 0.16);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-base);
}

.woocommerce-page-wrapper table.shop_table th,
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th,
.woocommerce-account table.shop_table th {
	padding: var(--spacing-4);
	background: rgba(30, 41, 59, 0.78);
	border-bottom: 1px solid rgba(148, 163, 184, 0.16);
	color: var(--gray-300);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
}

.woocommerce-page-wrapper table.shop_table td,
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td,
.woocommerce-account table.shop_table td {
	padding: var(--spacing-4);
	border-top: 1px solid rgba(148, 163, 184, 0.1);
	color: var(--gray-100);
	vertical-align: middle;
}
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.woocommerce-form-login,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	background: rgba(30, 41, 59, 0.58);
	border: 1px solid rgba(148, 163, 184, 0.16);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-base);
}

.woocommerce-cart .woocommerce-cart-form,
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.woocommerce-form-login,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	padding: var(--spacing-6);
}
.woocommerce-page-wrapper .input-text,
.woocommerce-page-wrapper input[type="text"],
.woocommerce-page-wrapper input[type="email"],
.woocommerce-page-wrapper input[type="tel"],
.woocommerce-page-wrapper input[type="password"],
.woocommerce-page-wrapper textarea,
.woocommerce-page-wrapper select,
.woocommerce-cart .input-text,
.woocommerce-checkout .input-text,
.woocommerce-account .input-text {
	width: 100%;
	min-height: 44px;
	padding: var(--spacing-3) var(--spacing-4);
	background: rgba(15, 23, 42, 0.82);
	border: 1px solid rgba(148, 163, 184, 0.24);
	border-radius: var(--radius-md);
	color: var(--gray-50);
	transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.woocommerce-page-wrapper .input-text:focus,
.woocommerce-page-wrapper input:focus,
.woocommerce-page-wrapper textarea:focus,
.woocommerce-page-wrapper select:focus {
	border-color: var(--primary-500);
	box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
	outline: none;
}

.woocommerce-page-wrapper label,
.woocommerce-checkout label,
.woocommerce-account label {
	color: var(--gray-200);
	font-weight: var(--weight-medium);
}