/**
 * TCF En Ligne — Custom Checkout Styles
 *
 * Mobile-first responsive checkout for tcfenligne.com
 * No external frameworks — pure flexbox.
 */

/* ==========================================================================
   0. CSS VARIABLES
   ========================================================================== */

:root {
	--tcf-primary: #1a73e8;
	--tcf-primary-dark: #1557b0;
	--tcf-primary-light: #e8f0fe;
	--tcf-secondary: #ffffff;
	--tcf-accent-green: #34a853;
	--tcf-accent-green-light: #e6f4ea;
	--tcf-text: #202124;
	--tcf-text-secondary: #5f6368;
	--tcf-text-muted: #80868b;
	--tcf-border: #dadce0;
	--tcf-border-focus: #1a73e8;
	--tcf-bg: #f8f9fa;
	--tcf-bg-white: #ffffff;
	--tcf-danger: #d93025;
	--tcf-danger-light: #fce8e6;
	--tcf-radius: 8px;
	--tcf-radius-lg: 12px;
	--tcf-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
	--tcf-shadow-lg: 0 4px 12px rgba(60, 64, 67, 0.15);
	--tcf-transition: 0.2s ease;
	--tcf-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}


/* ==========================================================================
   1. CHECKOUT PAGE — GLOBAL RESETS
   ========================================================================== */

body.tcf-checkout-page {
	background: var(--tcf-bg) !important;
}

/* Hide ALL default theme chrome on checkout:
   headers, footers, sidebars, mobile panels, page titles, logos */
body.tcf-checkout-page #masthead,
body.tcf-checkout-page .site-header,
body.tcf-checkout-page .site-header--bb,
body.tcf-checkout-page .site-footer,
body.tcf-checkout-page #footer,
body.tcf-checkout-page footer,
body.tcf-checkout-page .bb-mobile-panel-wrapper,
body.tcf-checkout-page .bb-mobile-header,
body.tcf-checkout-page .bb-mobile-header-wrapper,
body.tcf-checkout-page .buddypanel,
body.tcf-checkout-page .bb-buddypanel,
body.tcf-checkout-page .bb-grid > .bb-sm-grid,
body.tcf-checkout-page .widget-area,
body.tcf-checkout-page .bb-content-area-cell + .bb-grid-cell,
body.tcf-checkout-page .header-aside,
body.tcf-checkout-page .header-search-wrap,
body.tcf-checkout-page .bb-mobile-panel-inner,
body.tcf-checkout-page #theme-header,
body.tcf-checkout-page .below-header-area,
body.tcf-checkout-page .site-branding,
body.tcf-checkout-page .custom-logo-link,
body.tcf-checkout-page .footer-widget-area,
body.tcf-checkout-page .bb-footer,
body.tcf-checkout-page .bb-footer-inner,
body.tcf-checkout-page #colophon,
body.tcf-checkout-page .below-footer-area,
body.tcf-checkout-page .footer-bottom {
	display: none !important;
}

/* Hide page title, entry header ("ABONNEZ-VOUS", etc.) */
body.tcf-checkout-page .entry-header,
body.tcf-checkout-page .entry-title,
body.tcf-checkout-page .page-header,
body.tcf-checkout-page .page-title,
body.tcf-checkout-page .woocommerce-products-header,
body.tcf-checkout-page .woocommerce-products-header__title {
	display: none !important;
}

/* Hide everything after the checkout wrapper (support text, footers, etc.) */
body.tcf-checkout-page .site-content ~ *,
body.tcf-checkout-page #content ~ * {
	display: none !important;
}

body.tcf-checkout-page .site-content,
body.tcf-checkout-page .bb-grid,
body.tcf-checkout-page .site-content-grid,
body.tcf-checkout-page .container {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.tcf-checkout-page .bb-content-area-cell {
	width: 100% !important;
	max-width: 100% !important;
}

body.tcf-checkout-page .entry-content {
	padding: 0 !important;
	margin: 0 !important;
}

/* Kill any leftover theme top spacing / admin bar gap */
body.tcf-checkout-page #page,
body.tcf-checkout-page .site {
	padding-top: 0 !important;
	margin-top: 0 !important;
}


/* ==========================================================================
   2. CUSTOM CHECKOUT HEADER
   ========================================================================== */

.tcf-checkout-header {
	background: var(--tcf-bg-white);
	border-bottom: 1px solid var(--tcf-border);
	padding: 16px 24px;
	position: sticky;
	top: 0;
	z-index: 100;
}

.tcf-checkout-header__inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tcf-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--tcf-text);
}

.tcf-logo__icon {
	width: 36px;
	height: 36px;
	background: var(--tcf-primary);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tcf-logo__icon svg {
	width: 22px;
	height: 22px;
	fill: #fff;
}

.tcf-logo__text {
	font-family: var(--tcf-font);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--tcf-primary);
}

/* Progress indicator */
.tcf-progress {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--tcf-font);
	font-size: 13px;
	color: var(--tcf-text-muted);
}

.tcf-progress__step {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.tcf-progress__step--active {
	color: var(--tcf-primary);
	font-weight: 600;
}

.tcf-progress__step--done {
	color: var(--tcf-accent-green);
}

.tcf-progress__arrow {
	color: var(--tcf-border);
	font-size: 11px;
}


/* ==========================================================================
   3. MAIN CHECKOUT LAYOUT
   ========================================================================== */

.tcf-checkout-wrapper {
	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 24px 100px;
	font-family: var(--tcf-font);
}

.tcf-checkout-layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.tcf-checkout-left {
	flex: 0 0 58%;
	min-width: 0;
}

.tcf-checkout-right {
	flex: 0 0 38%;
	min-width: 0;
	position: sticky;
	top: 90px;
}


/* ==========================================================================
   4. FORM CARD STYLING
   ========================================================================== */

.tcf-card {
	background: var(--tcf-bg-white);
	border-radius: var(--tcf-radius-lg);
	box-shadow: var(--tcf-shadow);
	padding: 32px;
	margin-bottom: 24px;
}

.tcf-card__title {
	font-family: var(--tcf-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--tcf-text);
	margin: 0 0 8px;
	line-height: 1.3;
}

.tcf-card__subtitle {
	font-size: 14px;
	color: var(--tcf-text-secondary);
	margin: 0 0 24px;
	line-height: 1.5;
}

/* Login prompt */
.tcf-login-prompt {
	font-size: 13px;
	color: var(--tcf-text-muted);
	margin-bottom: 24px;
}

.tcf-login-prompt a {
	color: var(--tcf-primary);
	text-decoration: none;
	font-weight: 500;
}

.tcf-login-prompt a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   5. FORM FIELDS
   ========================================================================== */

/* Override WooCommerce defaults */
body.tcf-checkout-page .woocommerce-checkout .form-row {
	margin-bottom: 20px;
	padding: 0;
	position: relative;
}

body.tcf-checkout-page .woocommerce-checkout .form-row label {
	font-family: var(--tcf-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--tcf-text);
	margin-bottom: 6px;
	display: block;
}

body.tcf-checkout-page .woocommerce-checkout .form-row label .required {
	color: var(--tcf-danger);
	font-weight: 400;
}

body.tcf-checkout-page .woocommerce-checkout .form-row input.input-text,
body.tcf-checkout-page .woocommerce-checkout .form-row select,
body.tcf-checkout-page .woocommerce-checkout .form-row textarea {
	font-family: var(--tcf-font);
	font-size: 16px;
	line-height: 1.4;
	padding: 12px 16px;
	border: 1.5px solid var(--tcf-border);
	border-radius: var(--tcf-radius);
	background: var(--tcf-bg-white);
	color: var(--tcf-text);
	width: 100%;
	box-sizing: border-box;
	transition: border-color var(--tcf-transition), box-shadow var(--tcf-transition);
	min-height: 48px;
	-webkit-appearance: none;
	appearance: none;
}

body.tcf-checkout-page .woocommerce-checkout .form-row input.input-text:focus,
body.tcf-checkout-page .woocommerce-checkout .form-row select:focus {
	border-color: var(--tcf-border-focus);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
	outline: none;
}

body.tcf-checkout-page .woocommerce-checkout .form-row 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='%235f6368' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

/* Name fields side by side */
body.tcf-checkout-page .form-row-first {
	width: 48% !important;
	float: left;
}

body.tcf-checkout-page .form-row-last {
	width: 48% !important;
	float: right;
}

body.tcf-checkout-page .form-row-wide {
	width: 100% !important;
	clear: both;
}

/* Validation states */
body.tcf-checkout-page .form-row.woocommerce-validated input.input-text,
body.tcf-checkout-page .form-row.tcf-valid input.input-text {
	border-color: var(--tcf-accent-green);
}

body.tcf-checkout-page .form-row.woocommerce-invalid input.input-text {
	border-color: var(--tcf-danger);
	background-color: var(--tcf-danger-light);
}

/* Green checkmark for validated fields */
body.tcf-checkout-page .form-row.woocommerce-validated::after,
body.tcf-checkout-page .form-row.tcf-valid::after {
	content: '✓';
	position: absolute;
	right: 14px;
	top: 42px;
	font-size: 16px;
	color: var(--tcf-accent-green);
	font-weight: 700;
	pointer-events: none;
}

body.tcf-checkout-page .form-row-first.woocommerce-validated::after,
body.tcf-checkout-page .form-row-first.tcf-valid::after {
	right: 14px;
}

/* Password field wrapper */
.tcf-password-wrapper {
	position: relative;
}

.tcf-password-toggle {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--tcf-text-muted);
	cursor: pointer;
	font-size: 13px;
	font-family: var(--tcf-font);
	padding: 4px 8px;
	font-weight: 500;
}

.tcf-password-toggle:hover {
	color: var(--tcf-primary);
}

/* Almost done message */
.tcf-almost-done {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--tcf-accent-green-light);
	border-radius: var(--tcf-radius);
	color: var(--tcf-accent-green);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 20px;
	animation: tcf-slideDown 0.3s ease;
}

.tcf-almost-done.visible {
	display: flex;
}

@keyframes tcf-slideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ==========================================================================
   6. ORDER SUMMARY (RIGHT COLUMN)
   ========================================================================== */

.tcf-order-summary {
	background: var(--tcf-bg-white);
	border-radius: var(--tcf-radius-lg);
	box-shadow: var(--tcf-shadow);
	padding: 28px;
}

.tcf-order-summary__title {
	font-family: var(--tcf-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--tcf-text);
	margin: 0 0 20px;
}

/* Product card in summary */
.tcf-product-card {
	display: flex;
	gap: 14px;
	padding: 16px;
	background: var(--tcf-bg);
	border-radius: var(--tcf-radius);
	margin-bottom: 20px;
	align-items: center;
}

.tcf-product-card__image {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--tcf-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tcf-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback plan badge when no image */
.tcf-plan-badge {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 800;
	color: #fff;
}

.tcf-plan-badge--bronze { background: linear-gradient(135deg, #cd7f32, #a0522d); }
.tcf-plan-badge--silver { background: linear-gradient(135deg, #c0c0c0, #808080); }
.tcf-plan-badge--gold   { background: linear-gradient(135deg, #ffd700, #daa520); }

.tcf-product-card__info {
	flex: 1;
	min-width: 0;
}

.tcf-product-card__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--tcf-text);
	margin: 0 0 8px;
	line-height: 1.3;
}

/* Quantity controls */
.tcf-product-card__qty-controls {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1.5px solid var(--tcf-border);
	border-radius: 6px;
	overflow: hidden;
}

.tcf-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--tcf-bg-white);
	border: none;
	cursor: pointer;
	color: var(--tcf-text-secondary);
	padding: 0;
	transition: background var(--tcf-transition);
}

.tcf-qty-btn:hover {
	background: var(--tcf-bg);
	color: var(--tcf-primary);
}

.tcf-qty-btn:active {
	background: var(--tcf-primary-light);
}

.tcf-qty-btn svg {
	pointer-events: none;
}

.tcf-qty-value {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 32px;
	font-family: var(--tcf-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--tcf-text);
	border-left: 1.5px solid var(--tcf-border);
	border-right: 1.5px solid var(--tcf-border);
	user-select: none;
}

/* Price + remove column */
.tcf-product-card__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

.tcf-product-card__price {
	font-size: 16px;
	font-weight: 700;
	color: var(--tcf-primary);
	white-space: nowrap;
}

/* Remove button */
.tcf-remove-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: var(--tcf-text-muted);
	font-family: var(--tcf-font);
	font-size: 12px;
	cursor: pointer;
	padding: 4px 0;
	transition: color var(--tcf-transition);
}

.tcf-remove-item:hover {
	color: var(--tcf-danger);
}

.tcf-remove-item svg {
	pointer-events: none;
	fill: currentColor;
}

/* Order totals */
.tcf-order-totals {
	border-top: 1px solid var(--tcf-border);
	padding-top: 16px;
	margin-bottom: 20px;
}

/* Override WooCommerce table in review-order */
body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table {
	border: none;
	margin: 0;
	width: 100%;
}

body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table thead {
	display: none;
}

body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tbody {
	display: none;
}

body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tfoot tr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
}

body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tfoot tr th,
body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tfoot tr td {
	padding: 0;
	border: none;
	font-family: var(--tcf-font);
}

body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tfoot tr th {
	font-size: 14px;
	font-weight: 500;
	color: var(--tcf-text-secondary);
	text-align: left;
}

body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tfoot tr td {
	font-size: 14px;
	font-weight: 600;
	color: var(--tcf-text);
	text-align: right;
}

body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tfoot tr.order-total th {
	font-size: 17px;
	font-weight: 700;
	color: var(--tcf-text);
}

body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-size: 22px;
	font-weight: 800;
	color: var(--tcf-primary);
}

/* Coupon toggle */
.tcf-coupon-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--tcf-primary);
	font-size: 13px;
	font-weight: 500;
	font-family: var(--tcf-font);
	cursor: pointer;
	padding: 0;
	margin-bottom: 12px;
}

.tcf-coupon-toggle:hover {
	text-decoration: underline;
}

.tcf-coupon-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform var(--tcf-transition);
}

.tcf-coupon-toggle.open svg {
	transform: rotate(180deg);
}

.tcf-coupon-form {
	display: none;
	gap: 8px;
	margin-bottom: 16px;
	animation: tcf-slideDown 0.3s ease;
}

.tcf-coupon-form.visible {
	display: flex;
}

.tcf-coupon-form input {
	flex: 1;
	font-family: var(--tcf-font);
	font-size: 14px;
	padding: 10px 14px;
	border: 1.5px solid var(--tcf-border);
	border-radius: var(--tcf-radius);
	min-height: 44px;
	box-sizing: border-box;
}

.tcf-coupon-form input:focus {
	border-color: var(--tcf-border-focus);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
	outline: none;
}

.tcf-coupon-form button {
	font-family: var(--tcf-font);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	background: var(--tcf-bg);
	border: 1.5px solid var(--tcf-border);
	border-radius: var(--tcf-radius);
	color: var(--tcf-text);
	cursor: pointer;
	white-space: nowrap;
	transition: all var(--tcf-transition);
	min-height: 44px;
}

.tcf-coupon-form button:hover {
	background: var(--tcf-primary-light);
	border-color: var(--tcf-primary);
	color: var(--tcf-primary);
}


/* ==========================================================================
   7. PAYMENT SECTION
   ========================================================================== */

/*
 * CRITICAL: woocommerce_checkout_order_review outputs TWO things:
 *   1. review-order.php table (products + totals) — priority 10
 *   2. #payment div (gateways + button)           — priority 20
 *
 * We already render our own order summary in the right column,
 * so hide the duplicate table WooCommerce injects in the left.
 */
body.tcf-checkout-page .tcf-card--payment .woocommerce-checkout-review-order-table {
	display: none !important;
}

body.tcf-checkout-page #payment {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

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

body.tcf-checkout-page #payment .payment_methods li {
	border: 1.5px solid var(--tcf-border);
	border-radius: var(--tcf-radius);
	padding: 16px;
	margin-bottom: 10px;
	transition: border-color var(--tcf-transition);
}

body.tcf-checkout-page #payment .payment_methods li:hover,
body.tcf-checkout-page #payment .payment_methods li.active {
	border-color: var(--tcf-primary);
}

body.tcf-checkout-page #payment .payment_methods li label {
	font-family: var(--tcf-font);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

body.tcf-checkout-page #payment .payment_box {
	background: var(--tcf-bg) !important;
	border-radius: var(--tcf-radius);
	padding: 16px !important;
	margin-top: 12px;
}

body.tcf-checkout-page #payment .payment_box::before {
	display: none;
}

/* Stripe Elements */
body.tcf-checkout-page .wc-stripe-elements-field,
body.tcf-checkout-page .StripeElement {
	padding: 14px 16px !important;
	border: 1.5px solid var(--tcf-border) !important;
	border-radius: var(--tcf-radius) !important;
	background: var(--tcf-bg-white) !important;
	min-height: 48px !important;
	transition: border-color var(--tcf-transition) !important;
}

body.tcf-checkout-page .StripeElement--focus {
	border-color: var(--tcf-border-focus) !important;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15) !important;
}

/*
 * .place-order wrapper: reset all WooCommerce spacing.
 * This wrapper contains the terms text + the #place_order button.
 * It must stay INSIDE the card with zero extra space.
 */
body.tcf-checkout-page #payment .place-order {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
}

body.tcf-checkout-page #payment .place-order::before,
body.tcf-checkout-page #payment .place-order::after {
	display: none !important;
}

/* Hide ALL WooCommerce terms/conditions/privacy text that appear above the button */
body.tcf-checkout-page .woocommerce-terms-and-conditions-wrapper,
body.tcf-checkout-page .woocommerce-terms-and-conditions,
body.tcf-checkout-page .woocommerce-privacy-policy-text,
body.tcf-checkout-page #payment .place-order .woocommerce-terms-and-conditions-wrapper,
body.tcf-checkout-page #payment .place-order p.form-row {
	display: none !important;
}

/* Hide "You are not allowed to do this" or any stray text in .place-order */
body.tcf-checkout-page #payment .place-order > *:not(#place_order):not(input[type="hidden"]):not(noscript) {
	display: none !important;
}

/* Commander button — the REAL #place_order from WooCommerce.
   Stays INSIDE the payment card, directly below the Stripe fields. */
body.tcf-checkout-page #payment #place_order {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 58px !important;
	padding: 0 32px !important;
	margin: 16px 0 0 0 !important;
	font-family: var(--tcf-font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	background: var(--tcf-accent-green) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--tcf-radius) !important;
	cursor: pointer !important;
	transition: all var(--tcf-transition);
	text-align: center !important;
	letter-spacing: 0.2px;
	box-shadow: 0 2px 8px rgba(52, 168, 83, 0.3) !important;
	box-sizing: border-box !important;
	float: none !important;
}

body.tcf-checkout-page #payment #place_order:hover {
	background: #2d9249 !important;
	box-shadow: 0 4px 16px rgba(52, 168, 83, 0.4) !important;
	transform: translateY(-1px);
}

body.tcf-checkout-page #payment #place_order:active {
	transform: translateY(0);
}

/* Payment card — contains all of #order_review including the button */
body.tcf-checkout-page .tcf-card--payment {
	padding-bottom: 28px;
	overflow: hidden; /* contain floated children */
}

body.tcf-checkout-page .tcf-card--payment #payment,
body.tcf-checkout-page .tcf-card--payment .woocommerce-checkout-review-order {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* GDPR / privacy link — outside the card, below the button */
.tcf-privacy-note {
	font-size: 12px;
	color: var(--tcf-text-muted);
	text-align: center;
	margin-top: 12px;
	margin-bottom: 0;
	line-height: 1.5;
	padding: 0 32px;
}

.tcf-privacy-note a {
	color: var(--tcf-primary);
	text-decoration: none;
}

.tcf-privacy-note a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   8. TRUST SIGNALS
   ========================================================================== */

.tcf-trust-signals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--tcf-border);
}

.tcf-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tcf-text-secondary);
}

.tcf-trust-item__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tcf-accent-green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tcf-trust-item__icon svg {
	width: 16px;
	height: 16px;
	fill: var(--tcf-accent-green);
}


/* ==========================================================================
   9. SOCIAL PROOF
   ========================================================================== */

.tcf-social-proof {
	margin-top: 20px;
	padding: 20px;
	background: var(--tcf-bg);
	border-radius: var(--tcf-radius);
}

.tcf-social-proof__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.tcf-social-proof__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--tcf-text);
}

.tcf-social-proof__rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tcf-text);
}

.tcf-stars {
	color: #fbbc04;
	font-size: 14px;
	letter-spacing: 1px;
}

.tcf-testimonial {
	font-size: 13px;
	color: var(--tcf-text-secondary);
	line-height: 1.5;
	font-style: italic;
	position: relative;
	padding-left: 16px;
	border-left: 3px solid var(--tcf-primary-light);
}

.tcf-testimonial__author {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	color: var(--tcf-text);
}


/* ==========================================================================
   10. WOOCOMMERCE NOTICES OVERRIDE
   ========================================================================== */

body.tcf-checkout-page .woocommerce-error,
body.tcf-checkout-page .woocommerce-message,
body.tcf-checkout-page .woocommerce-info {
	max-width: 1120px;
	margin: 16px auto !important;
	border-radius: var(--tcf-radius);
	font-family: var(--tcf-font);
	font-size: 14px;
}

body.tcf-checkout-page .woocommerce-NoticeGroup {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Hide default WC coupon form (we use our own) */
body.tcf-checkout-page .woocommerce-form-coupon-toggle,
body.tcf-checkout-page .checkout_coupon.woocommerce-form-coupon {
	display: none !important;
}

/* Hide WC login on checkout (we show our own link) */
body.tcf-checkout-page .woocommerce-form-login-toggle {
	display: none !important;
}

/* Hide additional fields section */
body.tcf-checkout-page .woocommerce-additional-fields {
	display: none !important;
}

/* Hide WooCommerce info notices on checkout (e.g., "Tarification") */
body.tcf-checkout-page .woocommerce-info:not(.tcf-keep) {
	display: none !important;
}

/* Hide col2-set shipping column */
body.tcf-checkout-page .col2-set .col-2 {
	display: none !important;
}

body.tcf-checkout-page .col2-set .col-1 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

body.tcf-checkout-page .col2-set {
	display: block !important;
}

/* WooCommerce select2 dropdown fix */
body.tcf-checkout-page .select2-container .select2-selection--single {
	min-height: 48px !important;
	border: 1.5px solid var(--tcf-border) !important;
	border-radius: var(--tcf-radius) !important;
	padding: 8px 14px;
}

body.tcf-checkout-page .select2-container--focus .select2-selection--single {
	border-color: var(--tcf-border-focus) !important;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15) !important;
}

body.tcf-checkout-page .select2-container .select2-selection__rendered {
	line-height: 30px !important;
	font-size: 16px !important;
	color: var(--tcf-text) !important;
	padding: 0 !important;
}


/* ==========================================================================
   11. MOBILE ORDER SUMMARY TOGGLE
   ========================================================================== */

.tcf-mobile-summary-toggle {
	display: none;
	width: 100%;
	padding: 14px 16px;
	background: var(--tcf-bg-white);
	border: 1.5px solid var(--tcf-border);
	border-radius: var(--tcf-radius);
	font-family: var(--tcf-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--tcf-text);
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.tcf-mobile-summary-toggle__price {
	color: var(--tcf-primary);
	font-weight: 700;
}

.tcf-mobile-summary-toggle svg {
	width: 16px;
	height: 16px;
	transition: transform var(--tcf-transition);
}

.tcf-mobile-summary-toggle.open svg {
	transform: rotate(180deg);
}


/* ==========================================================================
   12. RESPONSIVE — MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {

	/* ---- Header ---- */
	.tcf-checkout-header {
		padding: 10px 16px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 150;
	}

	.tcf-progress {
		display: none;
	}

	.tcf-logo__icon {
		width: 32px;
		height: 32px;
		border-radius: 6px;
	}

	.tcf-logo__icon svg {
		width: 18px;
		height: 18px;
	}

	.tcf-logo__text {
		font-size: 15px;
	}

	/* ---- Layout ---- */
	body.tcf-checkout-page {
		padding-top: 54px; /* offset for fixed header */
	}

	.tcf-checkout-wrapper {
		padding: 12px 14px 90px;
	}

	/* Form first, summary below — natural reading order */
	.tcf-checkout-layout {
		flex-direction: column;
		gap: 12px;
	}

	.tcf-checkout-left,
	.tcf-checkout-right {
		flex: 0 0 100%;
		width: 100%;
		position: static;
	}

	/* ---- Cards — tighter on mobile ---- */
	.tcf-card {
		padding: 18px 16px;
		margin-bottom: 12px;
		border-radius: var(--tcf-radius);
		box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
	}

	.tcf-card__title {
		font-size: 18px;
	}

	.tcf-card__subtitle {
		font-size: 13px;
		margin-bottom: 16px;
	}

	.tcf-card--payment {
		padding-bottom: 20px;
	}

	.tcf-order-summary {
		padding: 16px;
		box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
	}

	/* ---- Mobile summary collapse ---- */
	/* Hide the toggle button — summary is always visible on mobile */
	.tcf-mobile-summary-toggle {
		display: none !important;
	}

	/* Summary content always visible */
	.tcf-mobile-summary-content {
		display: block !important;
	}

	/* ---- Form fields — bigger touch targets ---- */
	body.tcf-checkout-page .form-row-first,
	body.tcf-checkout-page .form-row-last {
		width: 100% !important;
		float: none !important;
	}

	body.tcf-checkout-page .woocommerce-checkout .form-row {
		margin-bottom: 14px;
	}

	body.tcf-checkout-page .woocommerce-checkout .form-row input.input-text,
	body.tcf-checkout-page .woocommerce-checkout .form-row select {
		min-height: 52px;
		padding: 14px 16px;
		font-size: 16px; /* prevents iOS zoom */
		border-radius: 10px;
	}

	body.tcf-checkout-page .woocommerce-checkout .form-row label {
		font-size: 13px;
		margin-bottom: 5px;
	}

	/* select2 bigger on mobile */
	body.tcf-checkout-page .select2-container .select2-selection--single {
		min-height: 52px !important;
		border-radius: 10px !important;
		padding: 10px 14px;
	}

	body.tcf-checkout-page .select2-container .select2-selection__rendered {
		line-height: 32px !important;
	}

	/* ---- Payment methods ---- */
	body.tcf-checkout-page #payment .payment_methods li {
		padding: 14px;
		border-radius: 10px;
	}

	body.tcf-checkout-page #payment .payment_box {
		padding: 14px !important;
		border-radius: 10px;
	}

	/* ---- Stripe elements on mobile ---- */
	body.tcf-checkout-page .wc-stripe-elements-field,
	body.tcf-checkout-page .StripeElement {
		min-height: 52px !important;
		padding: 16px !important;
		border-radius: 10px !important;
	}

	/*
	 * MOBILE: Make the real WooCommerce #place_order button
	 * a fixed sticky bar at the bottom of the screen.
	 * This is the actual button WooCommerce JS listens to,
	 * so checkout submission works natively.
	 */
	body.tcf-checkout-page #payment .place-order {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 200 !important;
		background: var(--tcf-bg-white) !important;
		padding: 10px 14px !important;
		padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
		border-top: 1px solid var(--tcf-border) !important;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1) !important;
		margin: 0 !important;
	}

	body.tcf-checkout-page #payment #place_order {
		display: block !important;
		width: 100% !important;
		padding: 16px !important;
		margin: 0 !important;
		font-family: var(--tcf-font) !important;
		font-size: 17px !important;
		font-weight: 700 !important;
		background: var(--tcf-accent-green) !important;
		color: #fff !important;
		border: none !important;
		border-radius: 10px !important;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(52, 168, 83, 0.3) !important;
		-webkit-tap-highlight-color: transparent;
	}

	body.tcf-checkout-page #payment #place_order:active {
		background: #2d9249 !important;
		transform: scale(0.98);
	}

	/* ---- Trust signals: 2x2 grid, all visible ---- */
	.tcf-trust-signals {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		overflow: visible;
		padding: 16px 0 8px;
		margin-top: 16px;
		border-top: 1px solid var(--tcf-border);
	}

	.tcf-trust-item {
		flex-direction: row;
		text-align: left;
		gap: 8px;
		font-size: 11px;
		padding: 0;
		min-width: unset;
	}

	.tcf-trust-item__icon {
		width: 30px;
		height: 30px;
		flex-shrink: 0;
	}

	.tcf-trust-item__icon svg {
		width: 16px;
		height: 16px;
	}

	/* ---- Social proof compact ---- */
	.tcf-social-proof {
		padding: 14px;
		margin-top: 14px;
	}

	.tcf-social-proof__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin-bottom: 10px;
	}

	.tcf-social-proof__count {
		font-size: 12px;
	}

	.tcf-social-proof__rating {
		font-size: 12px;
	}

	.tcf-testimonial {
		font-size: 12px;
		padding-left: 12px;
	}

	/* ---- Product card compact ---- */
	.tcf-product-card {
		padding: 12px;
		gap: 10px;
		align-items: flex-start;
	}

	.tcf-product-card__image {
		width: 48px;
		height: 48px;
	}

	.tcf-plan-badge {
		width: 48px;
		height: 48px;
		font-size: 18px;
	}

	.tcf-product-card__name {
		font-size: 13px;
		margin-bottom: 6px;
	}

	.tcf-product-card__price {
		font-size: 14px;
	}

	.tcf-qty-btn {
		width: 28px;
		height: 28px;
	}

	.tcf-qty-value {
		width: 32px;
		height: 28px;
		font-size: 13px;
	}

	.tcf-remove-item {
		font-size: 11px;
	}

	/* ---- Coupon tighter ---- */
	.tcf-coupon-toggle {
		font-size: 12px;
	}

	.tcf-coupon-form input {
		font-size: 16px; /* prevent iOS zoom */
		min-height: 48px;
		border-radius: 10px;
	}

	.tcf-coupon-form button {
		min-height: 48px;
		border-radius: 10px;
		font-size: 13px;
		padding: 10px 16px;
	}

	/* ---- Order totals ---- */
	body.tcf-checkout-page .tcf-order-summary .woocommerce-checkout-review-order-table tfoot tr.order-total td {
		font-size: 20px;
	}

	/* ---- Privacy note ---- */
	.tcf-privacy-note {
		padding: 0 16px;
		font-size: 11px;
		margin-bottom: 8px;
	}

	/* ---- Almost done message ---- */
	.tcf-almost-done {
		padding: 10px 14px;
		font-size: 13px;
		border-radius: 10px;
	}

	/* ---- Login prompt ---- */
	.tcf-login-prompt {
		font-size: 12px;
		margin-bottom: 16px;
	}

	/* ---- WooCommerce notices ---- */
	body.tcf-checkout-page .woocommerce-error,
	body.tcf-checkout-page .woocommerce-message,
	body.tcf-checkout-page .woocommerce-info {
		margin: 8px 14px !important;
		font-size: 13px;
		padding: 12px 14px;
	}
}

/* ---- Extra small screens ---- */
@media (max-width: 380px) {
	.tcf-checkout-wrapper {
		padding: 10px 10px 90px;
	}

	.tcf-card {
		padding: 14px 12px;
	}

	.tcf-order-summary {
		padding: 14px 12px;
	}

}

/* Desktop: ensure summary content is always visible */
@media (min-width: 769px) {
	.tcf-mobile-summary-content {
		display: block !important;
	}
}


/* ==========================================================================
   13. SKELETON / LOADING STATE
   ========================================================================== */

body.tcf-checkout-page .blockUI.blockOverlay {
	background: rgba(255, 255, 255, 0.7) !important;
}

body.tcf-checkout-page .woocommerce .blockUI.blockOverlay::before {
	border-color: var(--tcf-primary) transparent transparent !important;
}


/* ==========================================================================
   14. PRINT STYLES
   ========================================================================== */

@media print {
	.tcf-checkout-header,
	.tcf-trust-signals,
	.tcf-social-proof {
		display: none;
	}
}