/* ==========================================================================
   CPP demo — global brand layer. Tokens from chinapaymentsplugin.com.
   ========================================================================== */
:root {
	--cpp-brand-50:#EEF0FF; --cpp-brand-100:#E0E4FF; --cpp-brand-200:#C7CDFF;
	--cpp-brand-300:#A8B0FE; --cpp-brand-400:#8C99FE; --cpp-brand-500:#6573E8;
	--cpp-brand-600:#4F5BCC; --cpp-brand-700:#3F47A0; --cpp-brand-800:#343A7E; --cpp-brand-900:#2C3160;
	--cpp-gold-50:#FFFBEB; --cpp-gold-400:#FBBF24; --cpp-gold-500:#F59E0B; --cpp-gold-600:#D97706;
	--cpp-surface-50:#F8FAFC; --cpp-surface-100:#F1F5F9; --cpp-surface-200:#E2E8F0;
	--cpp-gray-300:#d1d5db; --cpp-gray-400:#9ca3af; --cpp-gray-500:#6b7280; --cpp-gray-600:#4b5563;
	--cpp-gray-700:#374151; --cpp-gray-800:#1f2937; --cpp-gray-900:#111827; --cpp-gray-950:#030712;
}

/* Base typography — match the marketing site. */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ----- Reusable helpers (used by the demo content shortcodes) ----- */
.cpp-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.cpp-narrow { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; }
.cpp-gradient { background: linear-gradient(135deg,#1a1d40 0%,#343A7E 45%,#6573E8 100%); }
.cpp-section { padding: 5rem 0; }
.cpp-eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cpp-brand-500); }
.cpp-h2 { font-size: clamp(1.75rem,4vw,2.25rem); font-weight: 700; color: var(--cpp-gray-900); line-height: 1.15; margin: 0 0 1rem; }
.cpp-sub { font-size: 1.125rem; color: var(--cpp-gray-600); line-height: 1.6; margin: 0 auto; max-width: 42rem; }
.cpp-card { background: #fff; border: 1px solid #f1f2f4; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; }
.cpp-card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(101,115,232,.18); }
.cpp-pulse { display:inline-block; width:.5rem; height:.5rem; border-radius:9999px; background:#34d399; animation:cppPulse 2s ease-in-out infinite; }
@keyframes cppPulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* Buttons */
.cpp-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.875rem 1.5rem; font-weight:600; font-size:1rem; border-radius:.5rem; text-decoration:none; transition:background .15s,transform .15s,border-color .15s; cursor:pointer; border:0; line-height:1.2; }
.cpp-btn-fill { background:var(--cpp-brand-500); color:#fff !important; box-shadow:0 6px 20px rgba(101,115,232,.25); }
.cpp-btn-fill:hover { background:var(--cpp-brand-600); }
.cpp-btn-ghost { background:rgba(255,255,255,.10); color:#fff !important; border:1px solid rgba(140,153,254,.35); }
.cpp-btn-ghost:hover { background:rgba(255,255,255,.18); }
.cpp-btn-light { background:#fff; color:var(--cpp-brand-700) !important; box-shadow:0 6px 20px rgba(0,0,0,.15); }
.cpp-btn-light:hover { background:#f3f4f6; }
.cpp-btn-outline { background:transparent; color:var(--cpp-brand-700) !important; border:2px solid var(--cpp-brand-300); }
.cpp-btn-outline:hover { background:var(--cpp-brand-50); }
.cpp-btn-dark { background:var(--cpp-gray-800); color:#fff !important; border:1px solid var(--cpp-gray-700); }
.cpp-btn-dark:hover { background:var(--cpp-gray-700); }

/* ============================ HERO ============================ */
.cpp-hero { padding: 3.5rem 0 4rem; color:#fff; }
.cpp-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.cpp-hero-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.375rem .85rem; background:rgba(255,255,255,.10); border:1px solid rgba(140,153,254,.30); border-radius:9999px; font-size:.875rem; color:var(--cpp-brand-100); margin-bottom:1.25rem; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cpp-hero h1 { font-size:clamp(2.25rem,5vw,3.5rem); font-weight:800; line-height:1.07; margin:0 0 1.25rem; color:#fff; }
.cpp-hero h1 .hl { color:var(--cpp-brand-300); }
.cpp-hero p.lead { font-size:1.125rem; line-height:1.6; color:var(--cpp-brand-50); max-width:34rem; margin:0 0 1.75rem; }
.cpp-hero-ctas { display:flex; flex-wrap:wrap; gap:1rem; }
.cpp-hero-reassure { margin-top:1.25rem; font-size:.85rem; color:var(--cpp-brand-100); display:flex; align-items:center; gap:.5rem; }
.cpp-hero-card { background:#fff; border-radius:1rem; box-shadow:0 30px 60px rgba(0,0,0,.35); border:1px solid rgba(140,153,254,.20); overflow:hidden; }
.cpp-hero-card-head { background:var(--cpp-gray-900); color:#fff; padding:.9rem 1.25rem; font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:.6rem; }
.cpp-hero-methods { padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.6rem; }
.cpp-method { display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; border:1px solid #eef0f4; border-radius:.6rem; background:#fff; transition:border-color .15s, box-shadow .15s; }
.cpp-method.on { border-color:var(--cpp-brand-300); box-shadow:0 2px 10px rgba(101,115,232,.12); }
.cpp-method img { height:24px; width:auto; }
.cpp-method > span { font-size:.95rem; font-weight:600; color:var(--cpp-gray-800); flex-grow:1; }
.cpp-method .cpp-up { flex-grow:0; background:#E60012; color:#fff; font-weight:700; font-size:.8rem; border-radius:.3rem; padding:.15rem .4rem; height:24px; display:inline-flex; align-items:center; }
.cpp-radio { width:1.05rem; height:1.05rem; border-radius:9999px; border:2px solid #cbd2e0; flex-shrink:0; }
.cpp-radio.on { border-color:var(--cpp-brand-500); background:radial-gradient(circle at center, var(--cpp-brand-500) 0 42%, #fff 46%); }
.cpp-hero-shot { background:#fff; padding:.4rem; }
.cpp-hero-shot img { display:block; width:100%; height:auto; border-radius:.4rem; }
.cpp-hero-card-foot { padding:.85rem 1.25rem 1.1rem; font-size:.78rem; color:var(--cpp-gray-500); border-top:1px solid #f1f2f4; text-align:center; }
.cpp-hero-logos { margin-top:1.5rem; display:flex; align-items:center; gap:1.25rem; }
.cpp-hero-logos img { height:26px; width:auto; opacity:.92; }

/* ============================ INTEGRATION GRID ============================ */
.cpp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.cpp-demo-card { padding:1.6rem; display:flex; flex-direction:column; }
.cpp-demo-ico { width:3rem; height:3rem; border-radius:.75rem; background:var(--cpp-brand-50); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; color:var(--cpp-brand-600); }
.cpp-demo-ico svg { width:1.6rem; height:1.6rem; }
.cpp-demo-card h3 { font-size:1.0625rem; font-weight:700; color:var(--cpp-gray-900); margin:0 0 .4rem; }
.cpp-demo-card p { font-size:.875rem; color:var(--cpp-gray-600); line-height:1.5; margin:0 0 1.25rem; flex-grow:1; }
.cpp-demo-card .cpp-launch { display:block; text-align:center; padding:.7rem 1rem; background:var(--cpp-brand-500); color:#fff !important; font-weight:600; font-size:.9rem; border-radius:.5rem; text-decoration:none; transition:background .15s; }
.cpp-demo-card .cpp-launch:hover { background:var(--cpp-brand-600); }
.cpp-chip { display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start; margin-bottom:.85rem; font-size:.72rem; font-weight:600; color:#059669; background:#ecfdf5; border:1px solid #d1fae5; border-radius:9999px; padding:.2rem .55rem; }

/* ============================ HOW IT WORKS ============================ */
.cpp-how { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.cpp-step { text-align:center; }
.cpp-step-num { width:4rem; height:4rem; margin:0 auto 1.25rem; border-radius:1rem; background:var(--cpp-brand-50); border:1px solid var(--cpp-brand-100); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; color:var(--cpp-brand-500); }
.cpp-step h3 { font-size:1.2rem; font-weight:600; color:var(--cpp-gray-900); margin:0 0 .6rem; }
.cpp-step p { color:var(--cpp-gray-600); line-height:1.6; margin:0; font-size:.95rem; }

/* ============================ TRUST BAR ============================ */
.cpp-trust { background:var(--cpp-gray-900); padding:1.5rem 0; }
.cpp-trust-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.5rem 3rem; font-size:.9rem; color:var(--cpp-gray-400); }
.cpp-trust b { color:var(--cpp-brand-300); font-weight:600; }

/* ============================ CTA ============================ */
.cpp-cta { background:var(--cpp-gray-900); text-align:center; }
.cpp-cta h2 { color:#fff; font-size:clamp(1.75rem,4vw,2.25rem); font-weight:700; margin:0 0 1rem; }
.cpp-cta p { color:var(--cpp-gray-400); font-size:1.125rem; max-width:40rem; margin:0 auto 2rem; }
.cpp-cta-btns { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.cpp-cta-fine { margin-top:1.25rem; color:var(--cpp-gray-500); font-size:.85rem; }
.cpp-cta-fine a { color:var(--cpp-gold-400); text-decoration:none; }

/* ============================ DEMO INSTRUCTION BANNER ============================ */
.cpp-banner { background:var(--cpp-brand-50); border:1px solid var(--cpp-brand-100); border-radius:.85rem; padding:1rem 1.25rem; margin:1.25rem auto; max-width:80rem; }
.cpp-banner-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
.cpp-banner-back { font-size:.85rem; font-weight:600; color:var(--cpp-brand-700); text-decoration:none; }
.cpp-banner-back:hover { color:var(--cpp-brand-500); }
.cpp-banner-badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:#059669; }
.cpp-banner-head { font-weight:600; color:var(--cpp-gray-800); font-size:.95rem; }
.cpp-banner details { margin-top:.75rem; border-top:1px dashed var(--cpp-brand-200); padding-top:.75rem; }
.cpp-banner summary { cursor:pointer; font-weight:600; color:var(--cpp-brand-700); font-size:.9rem; }
.cpp-banner details[open] summary { margin-bottom:.6rem; }
.cpp-banner .cpp-test { font-size:.875rem; color:var(--cpp-gray-700); line-height:1.7; }
.cpp-banner .cpp-test code { background:#fff; border:1px solid var(--cpp-brand-100); border-radius:.35rem; padding:.05rem .4rem; font-size:.85em; color:var(--cpp-brand-700); }
.cpp-banner .cpp-test b { color:var(--cpp-gray-900); }

/* ============================ SUCCESS SCREEN ============================ */
.cpp-success { max-width:42rem; margin:2.5rem auto; background:#fff; border:1px solid #eef0f4; border-radius:1rem; box-shadow:0 12px 40px rgba(101,115,232,.12); overflow:hidden; }
.cpp-success-top { background:linear-gradient(135deg,#1a1d40 0%,#343A7E 45%,#6573E8 100%); padding:2.25rem 2rem; text-align:center; color:#fff; }
.cpp-success-check { width:3.5rem; height:3.5rem; margin:0 auto 1rem; border-radius:9999px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; }
.cpp-success-check svg { width:2rem; height:2rem; color:#34d399; }
.cpp-success-top h1 { font-size:1.6rem; font-weight:800; margin:0 0 .5rem; }
.cpp-success-top p { color:var(--cpp-brand-50); margin:0; font-size:.98rem; line-height:1.55; }
.cpp-success-body { padding:1.75rem 2rem 2rem; }
.cpp-success-body ul { list-style:none; margin:0 0 1.5rem; padding:0; }
.cpp-success-body li { display:flex; gap:.6rem; align-items:flex-start; padding:.4rem 0; color:var(--cpp-gray-700); font-size:.95rem; }
.cpp-success-body li svg { width:1.15rem; height:1.15rem; color:var(--cpp-brand-500); flex-shrink:0; margin-top:.15rem; }
.cpp-success-btns { display:flex; flex-direction:column; gap:.75rem; }
.cpp-success-trust { text-align:center; margin-top:1.25rem; font-size:.82rem; color:var(--cpp-gray-500); }
.cpp-success-loop { display:block; text-align:center; margin-top:1rem; font-size:.9rem; color:var(--cpp-brand-600); text-decoration:none; }

/* Responsive */
@media (max-width:980px){ .cpp-hero-grid{grid-template-columns:1fr; gap:2rem;} .cpp-grid{grid-template-columns:1fr 1fr;} .cpp-how{grid-template-columns:1fr; gap:1.75rem;} }
@media (max-width:560px){ .cpp-grid{grid-template-columns:1fr;} .cpp-section{padding:3.5rem 0;} }

/* ==========================================================================
   WooCommerce / LifterLMS / MemberPress / Simple Membership — brand the
   checkout & membership surfaces so the whole demo is cohesive.
   ========================================================================== */
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #place_order,
.llms-button-action, .llms-button-primary,
.mepr-checkout-button, .mp_wrapper input[type=submit], .mepr_signup_form input[type=submit],
.swpm-registration-submit, .swpm-login-form-submit, button.swpm-login-form-submit {
	background-color: var(--cpp-brand-500) !important;
	border-color: var(--cpp-brand-500) !important;
	color: #fff !important;
	border-radius: .5rem !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	transition: background-color .15s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #place_order:hover,
.llms-button-action:hover,
.mepr-checkout-button:hover,
.swpm-registration-submit:hover {
	background-color: var(--cpp-brand-600) !important;
	border-color: var(--cpp-brand-600) !important;
}
.woocommerce span.onsale,
.woocommerce-page span.onsale { background: var(--cpp-brand-500); }
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce ul.products li.product .price { color: var(--cpp-brand-700); font-weight:700; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--cpp-brand-500); }
.woocommerce-info::before { color: var(--cpp-brand-500); }
.woocommerce table.shop_table,
.woocommerce .cart_totals table,
.woocommerce-checkout #payment { background: var(--cpp-surface-50); border-radius:.75rem; border:1px solid #eef0f4; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom:1px solid var(--cpp-surface-200); }
.woocommerce form .form-row input.input-text, .woocommerce-page form .form-row input.input-text,
.woocommerce form .form-row textarea { border-radius:.5rem; border:1px solid var(--cpp-surface-200); }
/* Star ratings in brand gold */
.woocommerce .star-rating span, .woocommerce .star-rating::before { color: var(--cpp-gold-500); }

/* UnionPay (Stripe card) classic-checkout handler — brand the card field + Pay Now button */
.cpp-unionpay-handler { font-family: 'Inter', sans-serif; }
.cpp-unionpay-handler #china-payments-card-element { border:1px solid var(--cpp-surface-200) !important; border-radius:.6rem !important; padding:14px !important; }
#china-payments-card-submit { background: var(--cpp-brand-500) !important; border-radius:.55rem !important; font-family:'Inter',sans-serif !important; font-weight:600 !important; transition: background .15s; }
#china-payments-card-submit:hover { background: var(--cpp-brand-600) !important; }

/* ==========================================================================
   BRANDED FLOW HEADER — consistent logo + name + instruction on every demo
   surface (woo / lifterlms / memberpress / swpm), injected under the header.
   ========================================================================== */
.cpp-flowhead { padding:1.1rem 1.5rem 1.25rem; }
.cpp-flowhead-brand { display:flex; align-items:center; gap:1rem; margin:.9rem 0 0; }
.cpp-flowhead-logo { display:flex; align-items:center; justify-content:center; height:46px; min-width:46px; padding:0 .15rem; background:#fff; border:1px solid var(--cpp-brand-100); border-radius:.7rem; box-shadow:0 1px 2px rgba(0,0,0,.04); flex-shrink:0; }
.cpp-flowhead-logo svg, .cpp-flowhead-logo img { height:30px; width:auto; max-width:160px; display:block; }
.cpp-flowhead-meta { min-width:0; }
.cpp-flowhead-name { font-size:1.4rem; font-weight:800; color:var(--cpp-gray-900); margin:0; line-height:1.1; letter-spacing:-.015em; }
.cpp-flowhead-tagchip { display:inline-block; vertical-align:middle; margin-left:.45rem; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cpp-brand-700); background:var(--cpp-brand-100); border-radius:9999px; padding:.18rem .5rem; }
.cpp-flowhead-tag { margin:.25rem 0 0; font-size:.92rem; color:var(--cpp-gray-600); line-height:1.45; }
.cpp-flowhead-steps { list-style:none; margin:.95rem 0 0; padding:.85rem 0 0; border-top:1px dashed var(--cpp-brand-200); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.cpp-flowhead-steps li { display:flex; align-items:center; gap:.5rem; font-size:.92rem; font-weight:600; color:var(--cpp-gray-800); }
.cpp-stepn { flex:none; width:1.4rem; height:1.4rem; border-radius:9999px; background:var(--cpp-brand-500); color:#fff; font-size:.78rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.cpp-flowhead-note { margin:.7rem 0 0; font-size:.82rem; color:var(--cpp-gray-500); }
.cpp-flowhead-note code { background:#fff; border:1px solid var(--cpp-brand-100); border-radius:.35rem; padding:.05rem .4rem; font-size:.9em; color:var(--cpp-brand-700); font-weight:700; }
@media (max-width:680px){ .cpp-flowhead-steps { flex-direction:column; gap:.55rem; } }

/* ==========================================================================
   MEMBERSHIP / LMS SIGNUP FORMS — card each flow's form like the rest of the
   site (centered card, consistent inputs/labels), respecting each plugin.
   ========================================================================== */
/* Generic card wrapper used by the SWPM/MemberPress page restructures. */
.cpp-formcard { max-width:34rem; margin:1.5rem auto; background:#fff; border:1px solid #eef0f4; border-radius:1rem; box-shadow:0 12px 40px rgba(101,115,232,.10); padding:1.6rem 1.6rem 1.75rem; }
.cpp-formcard + .cpp-formcard { margin-top:1rem; }
.cpp-formcard-head { display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--cpp-gray-900); font-size:1rem; margin:0 0 1rem; }
.cpp-formcard-price { margin-left:auto; font-weight:800; color:var(--cpp-brand-700); }
.cpp-formcard-note { max-width:34rem; margin:1rem auto 0; font-size:.82rem; color:var(--cpp-gray-500); line-height:1.6; }
.cpp-formcard-note li { margin:.15rem 0; }

/* Consistent inputs + labels across LMS / MemberPress / SWPM. */
.llms-checkout .llms-form-field input:not([type=checkbox]):not([type=radio]),
.mp_wrapper input[type=text], .mp_wrapper input[type=email], .mp_wrapper input[type=password],
.swpm-payment-button-form input[type=email], .swpm-payment-form input[type=email],
.cpp-formcard input[type=text], .cpp-formcard input[type=email], .cpp-formcard input[type=password] {
	width:100% !important; border:1px solid var(--cpp-surface-200) !important; border-radius:.55rem !important;
	padding:.72rem .85rem !important; font-size:.95rem !important; font-family:'Inter',sans-serif !important;
	background:#fff !important; box-shadow:none !important;
}
.llms-checkout .llms-form-field input:focus,
.mp_wrapper input:focus, .cpp-formcard input:focus { border-color:var(--cpp-brand-400) !important; outline:none !important; box-shadow:0 0 0 3px var(--cpp-brand-100) !important; }
.mp_wrapper label, .llms-checkout .llms-label, .cpp-formcard label { font-weight:600; color:var(--cpp-gray-800); font-size:.88rem; }

/* LifterLMS purchase — card each section (Billing / Order Summary / Payment),
   flatten the inner field groups so cards don't nest. */
.llms-checkout-wrapper { max-width:56rem; margin:1.5rem auto; }
.llms-checkout-wrapper .llms-checkout-section {
	background:#fff; border:1px solid #eef0f4; border-radius:1rem; box-shadow:0 8px 30px rgba(101,115,232,.08); padding:1.5rem 1.5rem 1.65rem; margin-bottom:1.25rem; }
.llms-checkout-wrapper .llms-form-fields { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.llms-checkout-wrapper h3, .llms-checkout-wrapper h4 { color:var(--cpp-gray-900); font-weight:700; margin-top:0; }

/* MemberPress registration — card the single form. */
.mp_wrapper { max-width:34rem; margin:1.5rem auto; background:#fff; border:1px solid #eef0f4; border-radius:1rem; box-shadow:0 12px 40px rgba(101,115,232,.10); padding:1.75rem; }
.mp_wrapper .mepr_price_cell, .mp_wrapper .mepr-payment-methods-wrapper { background:var(--cpp-surface-50); border-radius:.6rem; }
.mp_wrapper .mepr-payment-method label { font-weight:600; }

/* Simple Membership — each pay button is its own card (set in the page markup).
   Make the price/payment-method icons consistent inside cards. */
.cpp-formcard .swpm-payment-button-form, .cpp-formcard form { margin:0; }
.cpp-formcard .swpm-payment-button { margin:0; }
.cpp-formcard input[type=submit], .cpp-formcard button[type=submit],
.cpp-formcard .swpm-payment-button button,
.cpp-formcard .china-payments-simple-membership-form button {
	background:var(--cpp-brand-500) !important; color:#fff !important; border:1px solid var(--cpp-brand-500) !important;
	border-radius:.55rem !important; font-weight:600 !important; font-family:'Inter',sans-serif !important; font-size:.95rem !important;
	width:100% !important; margin-top:.85rem !important; padding:.8rem 1rem !important; cursor:pointer !important; transition:background .15s; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.cpp-formcard input[type=submit]:hover, .cpp-formcard button[type=submit]:hover,
.cpp-formcard .swpm-payment-button button:hover,
.cpp-formcard .china-payments-simple-membership-form button:hover { background:var(--cpp-brand-600) !important; border-color:var(--cpp-brand-600) !important; }

/* ==========================================================================
   Payment-method icons — consistent height + alignment (mirrors the 3.5.7
   plugin fix; size by height so wide WeChat/Alipay logos and the squarer
   UnionPay logo line up evenly). Covers classic checkout + every integration's
   gateway list, and the WooCommerce Checkout block.
   ========================================================================== */
.wc_payment_methods .wc_payment_method[class*="china_payments_stripe"] > label {
	display: inline-flex; align-items: center; gap: 10px; vertical-align: middle;
}
.wc_payment_methods .wc_payment_method[class*="china_payments_stripe"] > label > img {
	height: 26px !important; width: auto !important; max-width: 120px !important; flex-shrink: 0; margin: 0;
}
.wc-block-components-payment-method-label img[src*="payment-method-"] {
	height: 24px; width: auto; max-width: 120px; margin-left: auto; vertical-align: middle;
}

/* ==========================================================================
   WooCommerce Checkout / Cart BLOCK — brand to match the classic demo styling.
   ========================================================================== */
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart { font-family: 'Inter', sans-serif; }
/* Primary buttons: Place order, Proceed to checkout */
.wc-block-components-button.wp-element-button.contained,
.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button.contained {
	background-color: var(--cpp-brand-500) !important;
	border-color: var(--cpp-brand-500) !important;
	color: #fff !important;
	border-radius: .55rem !important;
	font-weight: 600 !important;
}
.wc-block-components-button.wp-element-button.contained:hover { background-color: var(--cpp-brand-600) !important; }
.wc-block-components-button.contained .wc-block-components-button__text { color: #fff !important; }
/* Order summary panel */
.wp-block-woocommerce-checkout-totals-block, .wp-block-woocommerce-cart-totals-block {
	background: var(--cpp-surface-50); border: 1px solid #eef0f4; border-radius: .75rem; padding: 1.25rem;
}
/* Payment option rows + selected accent */
.wc-block-components-radio-control__option { border-radius: .5rem; }
.wc-block-components-radio-control-accordion-option--checked,
.wc-block-components-radio-control__option--checked-option-highlighted { border-color: var(--cpp-brand-300); }
/* Inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input .input-text,
.wc-blocks-components-select .wc-blocks-components-select__container { border-radius: .5rem !important; }
/* Step titles + links */
.wc-block-components-checkout-step__title, .wc-block-components-title { color: var(--cpp-gray-900); }
.wc-block-components-checkout-step__description a, .wc-block-components-totals-coupon-link { color: var(--cpp-brand-600); }

/* --- Block checkout polish: centre + constrain, fix washed-out summary --- */
/* Centre the checkout/cart so inputs don't stretch full-bleed across the page. */
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-cart .wp-block-woocommerce-cart {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
/* Two columns: keep the form readable and let the summary breathe. */
.wc-block-checkout__main { max-width: 620px; }
/* Section headings (Contact information / Billing address / Payment options). */
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-title,
.wp-block-woocommerce-checkout-billing-address-block .wc-block-components-title {
	color: var(--cpp-gray-900) !important;
	font-weight: 700 !important;
}
/* Order-summary text was rendering at ~#b8b8b8 (illegible). Restore contrast. */
.wc-block-components-checkout-order-summary__title,
.wc-block-components-checkout-order-summary__title .wc-block-components-title,
.wc-block-checkout__sidebar .wc-block-components-title,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	color: var(--cpp-gray-900) !important;
	font-weight: 700 !important;
}
.wc-block-components-order-summary-item__name,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--cpp-gray-800) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-formatted-money-amount {
	color: var(--cpp-gray-900) !important;
	font-weight: 700 !important;
}
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
	color: var(--cpp-gray-600) !important;
}
/* Tidy the UnionPay inline card box inside the block payment accordion. */
#china-payments-unionpay-card-element,
.wc-block-components-radio-control-accordion-content #china-payments-card-element {
	border: 1px solid var(--cpp-surface-200) !important;
	border-radius: .5rem !important;
	background: #fff !important;
	min-height: 44px;
}

/* Demo = one virtual sample product → hide the street-address fields (kept
   optional in woo-brand.php) so checkout is just email + country + name. */
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__city,
.wc-block-components-address-form__state,
.wc-block-components-address-form__postcode,
.wc-block-components-address-form__company,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #billing_company_field { display: none !important; }