/* ============================================================
   QUBYX COMMERCE — fresh compact templates (theme-aware)
   .qco = checkout, .qca = cart. Loaded AFTER woocommerce.css so it
   wins. New wrapper classes deliberately escape the old .qcheckout /
   .qcart rules. Light + dark via --q-* tokens. Compact, ~one screen.
   ============================================================ */

.qco, .qca { color: var(--q-text); }
.qco *, .qca * { box-sizing: border-box; }
.qco__wrap, .qca__wrap { width: 100%; max-width: var(--q-nav-content-max, 1300px); margin: 0 auto; padding: calc(var(--q-header-height, 56px) + 14px) 2rem clamp(36px,4vw,56px); }

.qco__topbar, .qca__topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 12px; }
.qco__title, .qca__title { margin:0; font-size: clamp(1.2rem,1.7vw,1.55rem); font-weight:600; letter-spacing:-.02em; }
.qco__back, .qca__back { color: var(--q-text-muted); font-size:.85rem; font-weight:650; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.qco__back:hover, .qca__back:hover { color: var(--q-accent); }

/* ---------------- CHECKOUT ---------------- */
.qco__grid { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(16px,2vw,26px); align-items:start; }
.qco__main { min-width:0; }
.qco__card { background: var(--q-surface); border:1px solid var(--q-border-mid); border-radius:16px; padding: clamp(16px,1.8vw,22px); margin-bottom:14px; }
.qco-form.qco--stepped .qco__step { display:none; }
.qco-form.qco--stepped .qco__step.is-active { display:block; }
.qco__cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; border:0; border-radius:12px; cursor:pointer; background: linear-gradient(180deg,#41b4ff,var(--q-accent) 55%,#1488d9); color:#fff; font-weight:750; font-size:.95rem; box-shadow:0 12px 26px -12px rgba(0,159,252,.6); transition: filter .15s ease, transform .15s ease; }
.qco__cta:hover { filter:brightness(1.05); transform:translateY(-1px); }
.qco__cta iconify-icon { font-size:1.05rem; }
.qco__backstep { display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; padding:4px 0; border:0; background:none; color: var(--q-text-muted); font-size:.85rem; font-weight:650; cursor:pointer; }
.qco__backstep:hover { color: var(--q-accent); }
.qco__aside { position:sticky; top: calc(var(--q-header-height, 64px) + 18px); display:flex; flex-direction:column; gap:12px; }
.qco__summary { background: var(--q-surface); border:1px solid var(--q-border-mid); border-radius:16px; }
.qco__summary { padding: clamp(16px,2vw,22px); }
.qco__trust { padding:15px 2px 0; background:transparent; border:0; border-radius:0; }
/* CTA buttons relocated into the summary card (JS-moved). Step 1 shows
   "Select payment", step 2 (.qco--pay) shows "Place order". */
.qco__summary-place { margin-top:16px; padding-top:16px; border-top:1px solid var(--q-border-mid); }
.qco__summary-place #place_order, .qco__summary-place .qco__cta { width:100% !important; margin:0 !important; float:none !important; }
.qco__summary-place #place_order { display:none; }
.qco--pay .qco__summary-place #place_order { display:block; }
.qco--pay .qco__summary-place .qco__cta { display:none; }
.qco__h { margin:0 0 12px; font-size:.66rem; font-weight:750; letter-spacing:.15em; text-transform:uppercase; color: var(--q-text-muted); }
.qco__sec { margin-top:18px; }

/* compact fields */
.qco .form-row { margin:0 0 9px !important; padding:0 !important; }
.qco .form-row-first { width:calc(50% - 6px) !important; float:left; margin-right:12px !important; }
.qco .form-row-last  { width:calc(50% - 6px) !important; float:left; }
.qco .form-row-wide  { width:100% !important; clear:both; }
.qco #customer_details::after { content:""; display:block; clear:both; }
.qco .woocommerce-billing-fields h3, .qco .woocommerce-additional-fields h3, .qco #customer_details h3 { display:none; }
.qco label { display:block; margin:0 0 4px; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--q-text-muted); }
.qco abbr.required { color: var(--q-accent); text-decoration:none; border:0; }
.qco input.input-text, .qco select, .qco textarea,
.qco .select2-container--default .select2-selection--single {
  width:100%; min-height:40px; padding:0 14px; border:1px solid var(--q-border-mid) !important; border-radius:12px !important;
  background: var(--q-bg) !important; color: var(--q-text) !important; font-size:.9rem !important; box-shadow:none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qco textarea { min-height:80px; padding:10px 12px; }
.qco input.input-text:focus, .qco select:focus, .qco textarea:focus,
.qco .select2-container--open .select2-selection--single { outline:0; border-color: var(--q-accent) !important; box-shadow:0 0 0 3px var(--q-accent-alt) !important; }

/* Modern fields — #customer_details specificity beats WooCommerce's generic input rule.
   WC Stripe samples #billing_first_name to theme its Payment Element, so these clean
   billing fields also re-skin the card / expiry / CVC fields (white, subtle radius). */
.qco #customer_details input.input-text,
.qco #customer_details textarea,
.qco #customer_details select,
.qco #customer_details .select2-container--default .select2-selection--single {
  background: var(--q-surface) !important;
  border: 1px solid var(--q-border-mid) !important;
  border-radius: 9px !important;
  color: var(--q-text) !important;
  min-height: 40px !important;
  font-size: 15px !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  box-shadow: none !important;
}
/* vertical padding on the sampled input -> Stripe renders card fields at matching height */
.qco #customer_details input.input-text { padding: 10px 14px !important; }
.qco #customer_details textarea { padding: 10px 14px !important; }
.qco #customer_details select { padding: 0 14px !important; }
.qco #customer_details .select2-container .select2-selection--single { height: 40px !important; }
.qco #customer_details .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px !important; padding-left: 14px !important; }
.qco #customer_details .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.qco #customer_details input.input-text:focus,
.qco #customer_details select:focus,
.qco #customer_details textarea:focus {
  border-color: var(--q-accent) !important;
  box-shadow: 0 0 0 3px var(--q-accent-alt) !important;
}
.qco #customer_details ::placeholder { color: var(--q-text-faint) !important; }
.qco .select2-container .select2-selection--single { height:42px !important; }
.qco .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:40px !important; padding-left:12px; color:var(--q-text) !important; }
.qco .select2-container--default .select2-selection--single .select2-selection__arrow { height:40px !important; }
.qco input::placeholder, .qco textarea::placeholder { color: var(--q-text-faint); }

/* section divider label */
.qco__paylabel { display:block; margin:16px 0 8px; font-size:.66rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color: var(--q-text-muted); }

/* payment methods — NAV TABS (tabs on top, selected method's fields below) */
.qco #payment { background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; }
.qco #payment ul.payment_methods { list-style:none !important; margin:0 !important; padding:0 !important; border:0 !important; display:flex; flex-wrap:wrap; gap:8px; }
.qco #payment ul.payment_methods > li:not(.qco-pp-ph) { display:contents; }
.qco #payment ul.payment_methods > li > input[type=radio] { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.qco #payment ul.payment_methods > li > label { order:0; display:inline-flex; align-items:center; gap:8px; margin:0 !important; padding:10px 15px; border:1px solid var(--q-border-mid); border-radius:10px; cursor:pointer; font-size:.86rem; font-weight:650; text-transform:none !important; color: var(--q-text) !important; transition: border-color .15s ease, background .15s ease; }
.qco #payment ul.payment_methods > li:has(input:checked) > label { border-color: var(--q-accent); background: var(--q-accent-alt); color: var(--q-accent) !important; }
.qco #payment ul.payment_methods > li > label img { max-height:20px; margin-left:6px; }
.qco #payment ul.payment_methods > li > .payment_box { order:10; flex-basis:100%; width:100%; margin:0 !important; padding:14px 0 0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color: var(--q-text-muted) !important; font-size:.84rem; }
.qco #payment ul.payment_methods > li:not(:has(input:checked)) > .payment_box { display:none; }
.qco #payment .place-order { margin:16px 0 0 !important; padding:0 !important; }

/* PayPal placeholder tab — shown until PPCP is configured, then auto-removed by JS */
.qco #payment ul.payment_methods > li.qco-pp-ph { order:0; display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border:1px dashed var(--q-border-mid); border-radius:10px; cursor:pointer; }
.qco #payment ul.payment_methods > li.qco-pp-ph:hover { border-color: var(--q-accent); }
.qco-pp-ph__label { display:inline-flex; align-items:center; gap:8px; font-weight:650; font-size:.86rem; color: var(--q-text); }
.qco-pp-ph__label iconify-icon { font-size:1.35rem; }
.qco-pp-ph__soon { font-size:.55rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color: var(--q-text-faint); border:1px solid var(--q-border-mid); border-radius:999px; padding:2px 7px; }
.qco-pp-ph__note { margin:12px 0 0; padding:10px 12px; border:1px solid var(--q-border-mid); border-radius:10px; background: var(--q-accent-alt); color: var(--q-text-muted); font-size:.8rem; line-height:1.45; }
.qco #payment div.payment_box::before { display:none !important; }
.qco #payment .wc-stripe-elements-field, .qco #payment .wc-stripe-iban-element-field { min-height:38px; padding:9px 12px; border:1px solid var(--q-border-mid); border-radius:10px; background: var(--q-bg); }
.qco .woocommerce-privacy-policy-text, .qco .woocommerce-terms-and-conditions-wrapper { color: var(--q-text-muted); font-size:.76rem; line-height:1.5; }
.qco .woocommerce-privacy-policy-text a, .qco #payment a { color: var(--q-accent); }

.qco #place_order, .qco button#place_order {
  float:none !important; width:100% !important; min-height:50px; margin:4px 0 0 !important; padding:0 18px !important;
  border:0 !important; border-radius:12px !important; cursor:pointer;
  background: linear-gradient(180deg,#41b4ff,var(--q-accent) 55%,#1488d9) !important; color:#fff !important;
  font-size:.95rem !important; font-weight:750 !important; letter-spacing:.01em;
  box-shadow:0 12px 26px -12px rgba(0,159,252,.6) !important; transition: filter .15s ease, transform .15s ease;
}
.qco #place_order:hover { filter:brightness(1.06); transform:translateY(-1px); }
.qco #place_order:active { transform:translateY(0); }

.qco__secure { margin:12px 0 0; display:flex; align-items:center; justify-content:center; gap:6px; color: var(--q-text-muted); font-size:.8rem; }
.qco__secure iconify-icon { color:#34d399; }

/* validation */
.qco .woocommerce-invalid input.input-text, .qco .woocommerce-invalid select, .qco .woocommerce-invalid .select2-selection { border-color:#e5484d !important; }

/* summary table */
.qco .woocommerce-checkout-review-order-table { width:100%; border-collapse:collapse; font-size:.86rem; color: var(--q-text); }
.qco .woocommerce-checkout-review-order-table thead th { padding:0 0 8px; border:0; color: var(--q-text-muted); font-size:.62rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; text-align:left; }
.qco .woocommerce-checkout-review-order-table tbody td, .qco .woocommerce-checkout-review-order-table tbody th { padding:9px 0; border:0; border-top:1px solid var(--q-border); vertical-align:top; }
.qco .woocommerce-checkout-review-order-table .product-name { padding-right:10px; font-weight:600; }
.qco .woocommerce-checkout-review-order-table .product-total, .qco .woocommerce-checkout-review-order-table td:last-child, .qco .woocommerce-checkout-review-order-table th:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.qco .woocommerce-checkout-review-order-table tfoot th, .qco .woocommerce-checkout-review-order-table tfoot td { padding:8px 0; border:0; border-top:1px solid var(--q-border); color: var(--q-text-muted); font-weight:600; text-align:left; }
.qco .woocommerce-checkout-review-order-table tfoot td { text-align:right; }
.qco .woocommerce-checkout-review-order-table tfoot .order-total th, .qco .woocommerce-checkout-review-order-table tfoot .order-total td { color: var(--q-text); font-size:1.1rem; font-weight:800; border-top:1px solid var(--q-border-mid); }
.qco .woocommerce-checkout-review-order-table .product-quantity { color: var(--q-text-muted); }

/* trust card */
.qco__brands { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.qco__brands span { height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.qco__brands iconify-icon { font-size:1.25rem; display:block; }
.qco__trust p { margin:0; color: var(--q-text-muted); font-size:.78rem; line-height:1.5; }
.qco__trust strong { color: var(--q-text); }

/* checkout notices */
.qco .woocommerce-error, .qco .woocommerce-info, .qco .woocommerce-message { margin:0 0 14px; padding:12px 14px; border:1px solid var(--q-border-mid); border-radius:10px; background: var(--q-bg); color: var(--q-text); font-size:.85rem; list-style:none; }
.qco .woocommerce-error { border-color:#e5484d; }

@media (max-width: 860px) {
  .qco__grid { grid-template-columns: 1fr; }
  .qco__aside { position:static; }
}

/* Stripe Payment Element — hide test-mode notice; fields auto-theme from .qco inputs */
.qco #payment .testmode-info { display:none !important; }
.qco #payment .wc-stripe-upe-element { margin:2px 0 0; }
.qco #payment #wc-stripe-upe-errors { margin:8px 0 0; color:#e5484d; font-size:.8rem; }
.qco #payment #wc-stripe-upe-errors:empty { margin:0; }

/* breathing room: privacy text -> terms checkbox */
.qco #payment .woocommerce-terms-and-conditions-wrapper { margin-top:18px !important; }
.qco #payment .woocommerce-privacy-policy-text { margin:0 0 16px !important; line-height:1.55; color: var(--q-text-muted); }
.qco #payment p.form-row.terms, .qco #payment .woocommerce-terms-and-conditions-wrapper .terms { margin:0 !important; }
.qco #payment .woocommerce-form__label-for-checkbox { display:flex; align-items:flex-start; gap:9px; font-size:.84rem; line-height:1.5; }
.qco #payment .woocommerce-form__input-checkbox { margin-top:3px; }

/* before_checkout_form: hide login toggle, keep a compact coupon toggle (no empty band) */
.qco .woocommerce-notices-wrapper:empty { display:none; }
.qco .woocommerce-form-login-toggle { display:none; }
.qco .woocommerce-form-coupon-toggle { margin:0 0 14px; }
.qco .woocommerce-form-coupon-toggle .woocommerce-info { margin:0; padding:11px 14px; min-height:0; border:1px solid var(--q-border-mid); border-radius:10px; background:var(--q-bg); color:var(--q-text-muted); font-size:.82rem; display:flex; align-items:center; }
.qco .woocommerce-form-coupon-toggle .woocommerce-info::before, .qco .woocommerce-form-coupon-toggle .woocommerce-info::after { display:none !important; content:none !important; }
.qco .woocommerce-form-coupon-toggle a.showcoupon { color:var(--q-accent); font-weight:650; text-decoration:none; }
.qco form.checkout_coupon { margin:0 0 14px; padding:12px; border:1px solid var(--q-border-mid); border-radius:12px; background:var(--q-surface); }
.qco form.checkout_coupon .form-row { float:none; width:auto !important; }
.qco form.checkout_coupon .button { background:var(--q-accent) !important; color:#fff !important; border:0 !important; border-radius:10px !important; min-height:42px; }
.qco .woocommerce-form-login { margin:0 0 14px; padding:14px; border:1px solid var(--q-border-mid); border-radius:12px; }

/* ---------------- CART ---------------- */
.qca__grid { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(16px,2.4vw,30px); align-items:start; }
.qca__items { background: var(--q-surface); border:1px solid var(--q-border-mid); border-radius:16px; padding: clamp(14px,2vw,22px); }
.qca__summary { position:sticky; top: calc(var(--q-header-height, 64px) + 18px); background: var(--q-surface); border:1px solid var(--q-border-mid); border-radius:16px; padding: clamp(16px,2vw,22px); }
.qca__row { display:grid; grid-template-columns: 56px 1fr auto; gap:14px; align-items:center; padding:13px 0; border-top:1px solid var(--q-border); }
.qca__row:first-child { border-top:0; }
.qca__thumb img { width:56px; height:56px; object-fit:contain; padding:8px; background: var(--q-bg); border:1px solid var(--q-border); border-radius:12px; }
.qca__name { font-size:.95rem; font-weight:650; color: var(--q-text); text-decoration:none; }
.qca__name:hover { color: var(--q-accent); }
.qca__price { margin-top:3px; font-size:.8rem; color: var(--q-text-muted); }
.qca__end { display:flex; align-items:center; gap:12px; }
.qca .quantity { display:inline-flex; }
.qca .quantity input.qty { width:58px; min-height:38px; text-align:center; border:1px solid var(--q-border-mid); border-radius:9px; background: var(--q-bg); color: var(--q-text); font-weight:650; }
.qca__sub { min-width:72px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color: var(--q-text); }
.qca__remove { color: var(--q-text-faint); font-size:1.1rem; line-height:1; text-decoration:none; }
.qca__remove:hover { color:#e5484d; }
.qca__coupon { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.qca__coupon input { flex:0 1 300px; min-width:0; max-width:100%; min-height:42px; padding:0 12px; border:1px solid var(--q-border-mid); border-radius:10px; background: var(--q-bg); color: var(--q-text); font-size:.85rem; }
.qca__coupon button { min-height:42px; padding:0 16px; border:1px solid var(--q-border-mid); border-radius:10px; background:transparent; color: var(--q-text); font-weight:650; cursor:pointer; }
.qca__line { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--q-border); color: var(--q-text-muted); font-size:.9rem; }
.qca__line:first-child { border-top:0; }
.qca__line strong { color: var(--q-text); font-variant-numeric:tabular-nums; }
.qca__total { padding:14px 0 4px; color: var(--q-text); }
.qca__total span { font-size:.8rem; color: var(--q-text-muted); }
.qca__total strong { display:block; margin-top:2px; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.qca__checkout { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; margin-top:14px; border-radius:12px;
  background: linear-gradient(180deg,#41b4ff,var(--q-accent) 55%,#1488d9); color:#fff !important; text-decoration:none; font-weight:750; font-size:.95rem;
  box-shadow:0 12px 26px -12px rgba(0,159,252,.6); transition: filter .15s ease, transform .15s ease; }
.qca__checkout:hover { filter:brightness(1.06); transform:translateY(-1px); }
.qca__note { margin:12px 0 0; text-align:center; color: var(--q-text-muted); font-size:.78rem; }
.qca__empty { background: var(--q-surface); border:1px solid var(--q-border-mid); border-radius:16px; padding: clamp(24px,4vw,44px); text-align:center; }
.qca__empty h2 { margin:0 0 8px; font-size:1.4rem; font-weight:650; }
.qca__empty p { margin:0 0 18px; color: var(--q-text-muted); }
.qca__empty a { display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 22px; border-radius:12px; background: var(--q-accent); color:#fff; text-decoration:none; font-weight:700; }

@media (max-width: 760px) {
  .qca__grid { grid-template-columns: 1fr; }
  .qca__summary { position:static; }
}