/* ============================================================
   ConductScience Premium Checkout
   Inspired by Shopify / Apple / Stripe checkout experiences
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS Custom Properties
   ---------------------------------------------------------- */
:root {
	--cs-co-primary: #0880EB;
	--cs-co-primary-dark: #1B49B0;
	--cs-co-primary-light: #E8F4FD;
	--cs-co-gradient: linear-gradient(135deg, #0880EB 0%, #1B49B0 100%);

	--cs-co-bg: #F5F7FA;
	--cs-co-white: #FFFFFF;
	--cs-co-text: #1A1D26;
	--cs-co-text-secondary: #6B7280;
	--cs-co-text-muted: #9CA3AF;
	--cs-co-border: #E5E7EB;
	--cs-co-border-light: #F0F1F3;
	--cs-co-success: #10B981;
	--cs-co-error: #EF4444;
	--cs-co-warning: #F59E0B;

	--cs-co-radius: 12px;
	--cs-co-radius-sm: 8px;
	--cs-co-radius-lg: 16px;
	--cs-co-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--cs-co-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
	--cs-co-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

	--cs-co-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
	--cs-co-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------
   2. Page-Level: Hide Site Chrome for Focused Checkout
   ---------------------------------------------------------- */
body.cs-checkout-page {
	background: var(--cs-co-bg) !important;
	font-family: var(--cs-co-font) !important;
}

body.cs-checkout-page [role="banner"],
body.cs-checkout-page header.site-header,
body.cs-checkout-page .elementor-location-header,
body.cs-checkout-page > header,
body.cs-checkout-page [role="contentinfo"],
body.cs-checkout-page footer.site-footer,
body.cs-checkout-page .elementor-location-footer,
body.cs-checkout-page > footer,
body.cs-checkout-page nav[aria-label="Menu"],
body.cs-checkout-page .site-navigation {
	display: none !important;
}

body.cs-checkout-page .site-main,
body.cs-checkout-page main,
body.cs-checkout-page .page-content,
body.cs-checkout-page .entry-content,
body.cs-checkout-page .elementor-widget-container,
body.cs-checkout-page .elementor,
body.cs-checkout-page .elementor-element,
body.cs-checkout-page .elementor-widget-wrap,
body.cs-checkout-page .e-con,
body.cs-checkout-page .e-con-inner {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

/* Remove Elementor page title */
body.cs-checkout-page .page-header,
body.cs-checkout-page .entry-header {
	display: none !important;
}

/* ----------------------------------------------------------
   3. WooCommerce Messages (Coupon, Login, Errors)
   ---------------------------------------------------------- */
body.cs-checkout-page .woocommerce-notices-wrapper,
body.cs-checkout-page .woocommerce-info,
body.cs-checkout-page .woocommerce-message,
body.cs-checkout-page .woocommerce-error {
	max-width: 1200px;
	margin: 0 auto 16px !important;
	padding: 16px 24px !important;
	border-radius: var(--cs-co-radius-sm) !important;
	font-family: var(--cs-co-font) !important;
	font-size: 14px !important;
	border: none !important;
	box-shadow: var(--cs-co-shadow) !important;
}

body.cs-checkout-page .woocommerce-info {
	background: var(--cs-co-primary-light) !important;
	color: var(--cs-co-primary-dark) !important;
}

body.cs-checkout-page .woocommerce-info::before {
	color: var(--cs-co-primary) !important;
}

body.cs-checkout-page .woocommerce-error {
	background: #FEF2F2 !important;
	color: #991B1B !important;
}

body.cs-checkout-page .woocommerce-error li {
	margin: 4px 0 !important;
}

body.cs-checkout-page .woocommerce-message {
	background: #F0FDF4 !important;
	color: #166534 !important;
}

/* Coupon toggle link */
body.cs-checkout-page .woocommerce-info a.showcoupon {
	color: var(--cs-co-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

body.cs-checkout-page .woocommerce-info a.showcoupon:hover {
	text-decoration: underline !important;
}

/* Coupon form */
body.cs-checkout-page .checkout_coupon {
	max-width: 1200px;
	margin: 0 auto 24px !important;
	padding: 20px 24px !important;
	background: var(--cs-co-white) !important;
	border: 1px solid var(--cs-co-border) !important;
	border-radius: var(--cs-co-radius) !important;
	box-shadow: var(--cs-co-shadow) !important;
	display: flex !important;
	gap: 12px !important;
	align-items: flex-end !important;
}

body.cs-checkout-page .checkout_coupon p {
	margin: 0 !important;
}

body.cs-checkout-page .checkout_coupon .form-row-first {
	flex: 1 !important;
	width: auto !important;
	float: none !important;
}

body.cs-checkout-page .checkout_coupon .form-row-last {
	flex: 0 0 auto !important;
	width: auto !important;
	float: none !important;
}

body.cs-checkout-page .checkout_coupon input[type="text"] {
	width: 100% !important;
	height: 48px !important;
	padding: 0 16px !important;
	border: 1px solid var(--cs-co-border) !important;
	border-radius: var(--cs-co-radius-sm) !important;
	font-size: 14px !important;
	font-family: var(--cs-co-font) !important;
	transition: border-color var(--cs-co-transition), box-shadow var(--cs-co-transition) !important;
}

body.cs-checkout-page .checkout_coupon input[type="text"]:focus {
	border-color: var(--cs-co-primary) !important;
	box-shadow: 0 0 0 3px rgba(8, 128, 235, 0.12) !important;
	outline: none !important;
}

body.cs-checkout-page .checkout_coupon button[type="submit"] {
	height: 48px !important;
	padding: 0 28px !important;
	background: var(--cs-co-gradient) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--cs-co-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: opacity var(--cs-co-transition), transform var(--cs-co-transition) !important;
}

body.cs-checkout-page .checkout_coupon button[type="submit"]:hover {
	opacity: 0.92 !important;
	transform: translateY(-1px) !important;
}

/* ----------------------------------------------------------
   4. Checkout Wrapper
   ---------------------------------------------------------- */
.cs-co {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cs-co-bg);
	min-height: 100vh;
	padding-bottom: 80px;
}

/* ----------------------------------------------------------
   5. Checkout Header
   ---------------------------------------------------------- */
.cs-co__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px;
}

.cs-co__logo {
	text-decoration: none !important;
	display: flex;
	align-items: center;
}

.cs-co__logo img,
.cs-co__logo-img {
	max-height: 44px !important;
	width: auto !important;
	height: auto !important;
	max-width: 200px !important;
	object-fit: contain !important;
}

.cs-co__logo-text {
	font-size: 22px;
	color: var(--cs-co-text);
	font-weight: 300;
	letter-spacing: -0.02em;
}

.cs-co__logo-text strong {
	font-weight: 700;
	color: var(--cs-co-primary);
}

.cs-co__secure-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--cs-co-success);
	background: #F0FDF4;
	padding: 8px 16px;
	border-radius: 100px;
}

.cs-co__secure-badge svg {
	stroke: var(--cs-co-success);
}

/* ----------------------------------------------------------
   6. Breadcrumb
   ---------------------------------------------------------- */
.cs-co__crumb {
	max-width: 1200px;
	margin: 0 auto 32px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.cs-co__crumb a {
	color: var(--cs-co-text-secondary) !important;
	text-decoration: none !important;
	transition: color var(--cs-co-transition) !important;
}

.cs-co__crumb a:hover {
	color: var(--cs-co-primary) !important;
}

.cs-co__crumb svg {
	stroke: var(--cs-co-text-muted);
	flex-shrink: 0;
}

.cs-co__crumb span[aria-current] {
	color: var(--cs-co-text);
	font-weight: 600;
}

/* ----------------------------------------------------------
   7. Grid Layout
   ---------------------------------------------------------- */
.cs-co__grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 32px;
	align-items: start;
}

.cs-co__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ----------------------------------------------------------
   8. Cards (Section Containers)
   ---------------------------------------------------------- */
.cs-co__card {
	background: var(--cs-co-white);
	border: 1px solid var(--cs-co-border);
	border-radius: var(--cs-co-radius-lg);
	overflow: hidden;
	box-shadow: var(--cs-co-shadow);
	transition: box-shadow var(--cs-co-transition);
}

.cs-co__card:hover {
	box-shadow: var(--cs-co-shadow-md);
}

.cs-co__card-hd {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 28px 0;
}

.cs-co__card-hd h2 {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--cs-co-text) !important;
	margin: 0 0 2px !important;
	line-height: 1.3 !important;
	font-family: var(--cs-co-font) !important;
	padding: 0 !important;
}

.cs-co__card-sub {
	font-size: 13px;
	color: var(--cs-co-text-muted);
	margin: 0 !important;
	font-weight: 400;
}

.cs-co__card-bd {
	padding: 20px 28px 28px;
}

/* Step Number Circle */
.cs-co__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	background: var(--cs-co-gradient);
	color: #fff;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	margin-top: 2px;
}

/* ----------------------------------------------------------
   9. Form Fields - The Beautiful Part
   ---------------------------------------------------------- */

/* Reset WooCommerce defaults */
body.cs-checkout-page .woocommerce-checkout .form-row {
	padding: 0 !important;
	margin: 0 0 16px !important;
	width: 100% !important;
	float: none !important;
}

body.cs-checkout-page .woocommerce-checkout .form-row-first,
body.cs-checkout-page .woocommerce-checkout .form-row-last {
	width: 48.5% !important;
	display: inline-block !important;
	vertical-align: top !important;
}

body.cs-checkout-page .woocommerce-checkout .form-row-first {
	margin-right: 3% !important;
}

body.cs-checkout-page .woocommerce-checkout .form-row label,
body.cs-checkout-page .woocommerce-checkout .woocommerce-billing-fields label,
body.cs-checkout-page .woocommerce-checkout .woocommerce-shipping-fields label {
	display: block !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--cs-co-text-secondary) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	margin-bottom: 6px !important;
	font-family: var(--cs-co-font) !important;
}

body.cs-checkout-page .woocommerce-checkout .form-row label .optional {
	font-weight: 400 !important;
	text-transform: none !important;
	color: var(--cs-co-text-muted) !important;
	font-size: 11px !important;
}

body.cs-checkout-page .woocommerce-checkout .form-row label .required {
	color: var(--cs-co-error) !important;
	font-weight: 400 !important;
}

/* Text inputs, selects, textareas */
body.cs-checkout-page .woocommerce-checkout input[type="text"],
body.cs-checkout-page .woocommerce-checkout input[type="email"],
body.cs-checkout-page .woocommerce-checkout input[type="tel"],
body.cs-checkout-page .woocommerce-checkout input[type="number"],
body.cs-checkout-page .woocommerce-checkout input[type="password"],
body.cs-checkout-page .woocommerce-checkout select,
body.cs-checkout-page .woocommerce-checkout textarea {
	width: 100% !important;
	height: 48px !important;
	padding: 0 16px !important;
	border: 1.5px solid var(--cs-co-border) !important;
	border-radius: var(--cs-co-radius-sm) !important;
	font-size: 15px !important;
	font-family: var(--cs-co-font) !important;
	color: var(--cs-co-text) !important;
	background: var(--cs-co-white) !important;
	transition: border-color var(--cs-co-transition), box-shadow var(--cs-co-transition) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	box-sizing: border-box !important;
}

body.cs-checkout-page .woocommerce-checkout textarea {
	height: auto !important;
	padding: 12px 16px !important;
	min-height: 100px;
	resize: vertical;
}

body.cs-checkout-page .woocommerce-checkout select {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	padding-right: 44px !important;
}

body.cs-checkout-page .woocommerce-checkout input:focus,
body.cs-checkout-page .woocommerce-checkout select:focus,
body.cs-checkout-page .woocommerce-checkout textarea:focus {
	border-color: var(--cs-co-primary) !important;
	box-shadow: 0 0 0 3px rgba(8, 128, 235, 0.12) !important;
}

body.cs-checkout-page .woocommerce-checkout input::placeholder {
	color: var(--cs-co-text-muted) !important;
	font-weight: 400 !important;
}

/* Validation states */
body.cs-checkout-page .woocommerce-checkout .form-row.woocommerce-validated input {
	border-color: var(--cs-co-success) !important;
}

body.cs-checkout-page .woocommerce-checkout .form-row.woocommerce-invalid input {
	border-color: var(--cs-co-error) !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Select2 dropdown override (country/state) */
body.cs-checkout-page .select2-container--default .select2-selection--single {
	height: 48px !important;
	border: 1.5px solid var(--cs-co-border) !important;
	border-radius: var(--cs-co-radius-sm) !important;
	padding: 0 16px !important;
	display: flex !important;
	align-items: center !important;
	background: var(--cs-co-white) !important;
	transition: border-color var(--cs-co-transition), box-shadow var(--cs-co-transition) !important;
}

body.cs-checkout-page .select2-container--default .select2-selection--single:focus,
body.cs-checkout-page .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--cs-co-primary) !important;
	box-shadow: 0 0 0 3px rgba(8, 128, 235, 0.12) !important;
}

body.cs-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 48px !important;
	padding: 0 !important;
	color: var(--cs-co-text) !important;
	font-size: 15px !important;
	font-family: var(--cs-co-font) !important;
}

body.cs-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 48px !important;
	right: 12px !important;
}

body.cs-checkout-page .select2-dropdown {
	border: 1.5px solid var(--cs-co-border) !important;
	border-radius: var(--cs-co-radius-sm) !important;
	box-shadow: var(--cs-co-shadow-lg) !important;
	margin-top: 4px !important;
}

body.cs-checkout-page .select2-results__option {
	padding: 10px 16px !important;
	font-size: 14px !important;
	font-family: var(--cs-co-font) !important;
}

body.cs-checkout-page .select2-results__option--highlighted {
	background: var(--cs-co-primary-light) !important;
	color: var(--cs-co-primary-dark) !important;
}

/* Billing/Shipping section headings */
body.cs-checkout-page .woocommerce-billing-fields h3,
body.cs-checkout-page .woocommerce-shipping-fields h3,
body.cs-checkout-page .woocommerce-additional-fields h3 {
	display: none !important;
}

/* "Ship to different address" checkbox */
body.cs-checkout-page #ship-to-different-address {
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--cs-co-text) !important;
	margin-bottom: 20px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
}

body.cs-checkout-page #ship-to-different-address input[type="checkbox"] {
	width: 20px !important;
	height: 20px !important;
	border: 2px solid var(--cs-co-border) !important;
	border-radius: 6px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	transition: all var(--cs-co-transition) !important;
	position: relative !important;
}

body.cs-checkout-page #ship-to-different-address input[type="checkbox"]:checked {
	background: var(--cs-co-primary) !important;
	border-color: var(--cs-co-primary) !important;
}

body.cs-checkout-page #ship-to-different-address input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Order notes textarea */
body.cs-checkout-page .woocommerce-additional-fields__field-wrapper {
	margin-top: 0;
}

body.cs-checkout-page .woocommerce-checkout #order_comments_field {
	margin-top: 12px !important;
}

/* ----------------------------------------------------------
   10. Order Review Table (Inside #order_review)
   ---------------------------------------------------------- */

/* Hide the order table in main column (shown in sidebar) */
body.cs-checkout-page #order_review .woocommerce-checkout-review-order-table {
	display: none !important;
}

/* ----------------------------------------------------------
   11. Payment Methods
   ---------------------------------------------------------- */
body.cs-checkout-page #payment {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 20px 28px 28px !important;
	margin: 0 !important;
}

body.cs-checkout-page #payment .payment_methods {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 24px !important;
	border: none !important;
}

body.cs-checkout-page #payment .wc_payment_method {
	list-style: none !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 1.5px solid var(--cs-co-border) !important;
	border-radius: var(--cs-co-radius) !important;
	background: var(--cs-co-white) !important;
	transition: all var(--cs-co-transition) !important;
	overflow: hidden !important;
}

body.cs-checkout-page #payment .wc_payment_method:last-child {
	margin-bottom: 0 !important;
}

body.cs-checkout-page #payment .wc_payment_method:hover {
	border-color: #D1D5DB !important;
}

/* body.cs-checkout-page #payment .wc_payment_method.active - removed: Stripe adds .active to CC even when not selected */
body.cs-checkout-page #payment .wc_payment_method input[type="radio"]:checked + label {
	border-color: var(--cs-co-primary) !important;
}

body.cs-checkout-page #payment .wc_payment_method input[type="radio"]:checked ~ * {
	border-color: var(--cs-co-primary) !important;
}

/* Style the parent when radio is checked */
body.cs-checkout-page #payment .wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--cs-co-primary) !important;
	background: var(--cs-co-primary-light) !important;
}

body.cs-checkout-page #payment .wc_payment_method label {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 16px 20px !important;
	cursor: pointer !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--cs-co-text) !important;
	font-family: var(--cs-co-font) !important;
	margin: 0 !important;
}

body.cs-checkout-page #payment .wc_payment_method label img {
	max-height: 28px !important;
	width: auto !important;
}

/* Custom radio button */
body.cs-checkout-page #payment .wc_payment_method input[type="radio"] {
	width: 20px !important;
	height: 20px !important;
	border: 2px solid var(--cs-co-border) !important;
	border-radius: 50% !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	transition: all var(--cs-co-transition) !important;
	position: relative !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

body.cs-checkout-page #payment .wc_payment_method input[type="radio"]:checked {
	border-color: var(--cs-co-primary) !important;
}

body.cs-checkout-page #payment .wc_payment_method input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background: var(--cs-co-primary);
	border-radius: 50%;
}

/* Payment method description box */
body.cs-checkout-page #payment .payment_box {
	background: #F9FAFB !important;
	border-top: 1px solid var(--cs-co-border-light) !important;
	padding: 20px !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--cs-co-text-secondary) !important;
	line-height: 1.6 !important;
	font-family: var(--cs-co-font) !important;
}

body.cs-checkout-page #payment .payment_box::before {
	display: none !important;
}

body.cs-checkout-page #payment .payment_box p {
	margin: 0 !important;
}

/* Stripe / payment gateway inputs inside payment box */
body.cs-checkout-page #payment .payment_box fieldset {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.cs-checkout-page #payment .payment_box .form-row {
	margin: 0 0 12px !important;
}

/* ----------------------------------------------------------
   12. Place Order Button
   ---------------------------------------------------------- */
body.cs-checkout-page #payment .place-order {
	padding: 0 !important;
	margin-top: 8px !important;
}

body.cs-checkout-page #place_order {
	width: 100% !important;
	height: 56px !important;
	background: var(--cs-co-gradient) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--cs-co-radius) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	font-family: var(--cs-co-font) !important;
	cursor: pointer !important;
	letter-spacing: 0.01em !important;
	transition: all var(--cs-co-transition) !important;
	box-shadow: 0 4px 14px rgba(8, 128, 235, 0.3) !important;
	text-transform: none !important;
}

body.cs-checkout-page #place_order:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(8, 128, 235, 0.4) !important;
}

body.cs-checkout-page #place_order:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 10px rgba(8, 128, 235, 0.3) !important;
}

/* Terms and conditions */
body.cs-checkout-page .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 16px !important;
}

body.cs-checkout-page .woocommerce-terms-and-conditions-wrapper p {
	font-size: 13px !important;
	color: var(--cs-co-text-secondary) !important;
	line-height: 1.6 !important;
}

body.cs-checkout-page .woocommerce-terms-and-conditions-wrapper a {
	color: var(--cs-co-primary) !important;
}

body.cs-checkout-page .woocommerce-privacy-policy-text p {
	font-size: 13px !important;
	color: var(--cs-co-text-muted) !important;
	line-height: 1.6 !important;
}

/* ----------------------------------------------------------
   13. Trust Bar
   ---------------------------------------------------------- */
.cs-co__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 24px;
	flex-wrap: wrap;
}

.cs-co__trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--cs-co-text-secondary);
}

.cs-co__trust-item svg {
	stroke: var(--cs-co-text-muted);
	flex-shrink: 0;
}

/* ----------------------------------------------------------
   14. Sidebar - Order Summary
   ---------------------------------------------------------- */
.cs-co__side {
	position: sticky;
	top: 24px;
}

.cs-co__side-inner {
	background: var(--cs-co-white);
	border: 1px solid var(--cs-co-border);
	border-radius: var(--cs-co-radius-lg);
	box-shadow: var(--cs-co-shadow);
	overflow: hidden;
}

.cs-co__side-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cs-co-text);
	padding: 24px 24px 16px;
	margin: 0;
	font-family: var(--cs-co-font);
	border-bottom: 1px solid var(--cs-co-border-light);
}

.cs-co__side-title svg {
	stroke: var(--cs-co-primary);
}

.cs-co__side-count {
	font-size: 12px;
	font-weight: 600;
	background: var(--cs-co-primary-light);
	color: var(--cs-co-primary);
	padding: 2px 8px;
	border-radius: 100px;
	margin-left: auto;
}

/* Cart Items */
.cs-co__items {
	padding: 16px 24px;
	max-height: 320px;
	overflow-y: auto;
}

.cs-co__items::-webkit-scrollbar {
	width: 4px;
}

.cs-co__items::-webkit-scrollbar-track {
	background: transparent;
}

.cs-co__items::-webkit-scrollbar-thumb {
	background: var(--cs-co-border);
	border-radius: 4px;
}

.cs-co__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cs-co-border-light);
}

.cs-co__item:last-child {
	border-bottom: none;
}

.cs-co__item-img {
	position: relative;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--cs-co-radius-sm);
	overflow: hidden;
	border: 1px solid var(--cs-co-border-light);
	background: #F9FAFB;
}

.cs-co__item-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cs-co__item-qty {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
	background: var(--cs-co-primary);
	color: #fff;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--cs-co-white);
}

.cs-co__item-info {
	flex: 1;
	min-width: 0;
}

.cs-co__item-name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--cs-co-text);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.cs-co__item-meta {
	display: block;
	font-size: 12px;
	color: var(--cs-co-text-muted);
	margin-top: 2px;
}

.cs-co__item-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--cs-co-text);
	white-space: nowrap;
}

/* Sidebar Totals */
.cs-co__totals {
	padding: 16px 24px;
	border-top: 1px solid var(--cs-co-border);
}

.cs-co__totals-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	font-size: 14px;
	color: var(--cs-co-text-secondary);
}

.cs-co__totals-row--discount {
	color: var(--cs-co-success);
}

.cs-co__totals-row--total {
	border-top: 2px solid var(--cs-co-text);
	margin-top: 8px;
	padding-top: 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--cs-co-text);
}

/* Accepted Payments */
.cs-co__payments-accepted {
	padding: 16px 24px;
	border-top: 1px solid var(--cs-co-border-light);
	display: flex;
	align-items: center;
	gap: 12px;
}

.cs-co__payments-accepted span {
	font-size: 12px;
	color: var(--cs-co-text-muted);
	white-space: nowrap;
}

.cs-co__payment-icons {
	display: flex;
	gap: 6px;
}

.cs-co__payment-icons svg {
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Security Note */
.cs-co__side-secure {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	background: #F9FAFB;
	border-top: 1px solid var(--cs-co-border-light);
}

.cs-co__side-secure svg {
	stroke: var(--cs-co-success);
	flex-shrink: 0;
}

.cs-co__side-secure span {
	font-size: 12px;
	color: var(--cs-co-text-muted);
	line-height: 1.4;
}

/* ----------------------------------------------------------
   15. Loading State
   ---------------------------------------------------------- */
body.cs-checkout-page .blockUI.blockOverlay {
	background: rgba(255, 255, 255, 0.7) !important;
	opacity: 1 !important;
}

body.cs-checkout-page .woocommerce .blockUI.blockOverlay::before,
body.cs-checkout-page .woocommerce .loader::before {
	border: 3px solid var(--cs-co-border) !important;
	border-top-color: var(--cs-co-primary) !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	animation: cs-co-spin 0.8s linear infinite !important;
}

@keyframes cs-co-spin {
	to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------
   16. Responsive Design
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.cs-co__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.cs-co__side {
		position: static;
		order: -1;
	}

	.cs-co__items {
		max-height: none;
	}
}

@media (max-width: 768px) {
	.cs-co__header {
		padding: 16px 16px;
	}

	.cs-co__crumb {
		padding: 0 16px;
		margin-bottom: 20px;
	}

	.cs-co__grid {
		padding: 0 16px;
		gap: 16px;
	}

	.cs-co__card-hd {
		padding: 20px 20px 0;
	}

	.cs-co__card-bd {
		padding: 16px 20px 24px;
	}

	body.cs-checkout-page #payment {
		padding: 16px 20px 24px !important;
	}

	.cs-co__card-hd h2 {
		font-size: 16px !important;
	}

	body.cs-checkout-page .woocommerce-checkout .form-row-first,
	body.cs-checkout-page .woocommerce-checkout .form-row-last {
		width: 100% !important;
		display: block !important;
		float: none !important;
	}

	body.cs-checkout-page .woocommerce-checkout .form-row-first {
		margin-right: 0 !important;
	}

	.cs-co__trust {
		gap: 16px;
	}

	.cs-co__trust-item {
		font-size: 12px;
	}

	.cs-co__trust-item svg {
		width: 16px;
		height: 16px;
	}

	.cs-co__side-title {
		padding: 20px 20px 14px;
	}

	.cs-co__items {
		padding: 12px 20px;
	}

	.cs-co__totals {
		padding: 12px 20px;
	}

	.cs-co__payments-accepted {
		padding: 12px 20px;
	}

	.cs-co__side-secure {
		padding: 12px 20px;
	}

	body.cs-checkout-page #place_order {
		height: 52px !important;
		font-size: 15px !important;
	}
}

@media (max-width: 480px) {
	.cs-co__secure-badge {
		font-size: 0;
		padding: 8px;
	}

	.cs-co__secure-badge svg {
		margin: 0;
	}

	.cs-co__logo-text {
		font-size: 18px;
	}

	.cs-co__logo-img {
		height: 32px;
	}

	.cs-co__trust {
		gap: 12px;
		padding: 16px;
	}

	.cs-co__trust-item span {
		display: none;
	}
}

/* ----------------------------------------------------------
   17. Animations
   ---------------------------------------------------------- */
.cs-co__card {
	animation: cs-co-fadeIn 0.4s ease both;
}

.cs-co__card:nth-child(2) {
	animation-delay: 0.1s;
}

.cs-co__card:nth-child(3) {
	animation-delay: 0.2s;
}

@keyframes cs-co-fadeIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cs-co__side-inner {
	animation: cs-co-fadeIn 0.5s ease 0.15s both;
}

/* ----------------------------------------------------------
   18. Print Styles
   ---------------------------------------------------------- */
@media print {
	.cs-co__header,
	.cs-co__crumb,
	.cs-co__trust,
	.cs-co__side-secure,
	.cs-co__payments-accepted,
	#payment {
		display: none !important;
	}

	.cs-co__grid {
		grid-template-columns: 1fr !important;
	}
}