/* ---------------------------------------------------------------------------
   Native WooCommerce checkout (inc/checkout-native.php, checkout-page.php).

   Loaded only on checkout, order-pay, order-received and cart. The pay button,
   the trust strip and the pay note are styled in main.css because they existed
   before this layout; this file is the layout around them.

   Desktop: the form on the left, the order on the right and sticky, so the
   total and the button never scroll away. Phone: one column, the short form
   first (name, email, phone), then the order, the bump and the pay button.
   ------------------------------------------------------------------------- */

body.ck-page { background: var(--kagoj); }

/* slim bar: brand + help line, no menu */
.ck-bar { background: var(--kagoj-card); border-bottom: 1px solid var(--line-light); }
.ck-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.ck-bar .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.ck-bar .brand b { color: var(--gada); font-weight: 700; }
.ck-help { font-family: var(--f-bn); font-size: var(--fs-xs); color: var(--dhoa-dark); text-decoration: none; white-space: nowrap; }
.ck-help b { color: var(--ink); font-family: var(--f-mono); font-weight: 700; font-size: var(--fs-xs); }
.ck-help:hover b { color: var(--gada); }
@media (max-width: 480px) { .ck-help { font-size: 0; } .ck-help b { font-size: var(--fs-xs); } }

.ck-main { padding: 32px 0 72px; }
.ck-wrap { max-width: 1080px; }

.ck-head { margin-bottom: 26px; }
.ck-step { display: inline-block; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--gada); margin-bottom: 8px; }
.ck-head h1 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.3; margin: 0; color: var(--ink); }

/* notices and the coupon line sit above the two columns */
.ck-main .woocommerce-notices-wrapper:empty { display: none; }
.ck-main .woocommerce-error,
.ck-main .woocommerce-info,
.ck-main .woocommerce-message { font-family: var(--f-bn); border-radius: var(--radius); }

/* --- two columns ------------------------------------------------------- */
.ck-main form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-areas: "form head" "form review";
  grid-template-rows: auto 1fr;
  column-gap: 32px;
  align-items: start;
}
.ck-main #customer_details { grid-area: form; }
.ck-main #order_review_heading { grid-area: head; margin: 0 0 12px; }
.ck-main #order_review { grid-area: review; position: sticky; top: 18px; }

/* WooCommerce floats these; the grid owns layout now */
.ck-main #customer_details.col2-set .col-1,
.ck-main #customer_details.col2-set .col-2 { float: none; width: 100%; }
.ck-main #customer_details .col-2:not(:has(.form-row)) { display: none; }

.ck-main #customer_details,
.ck-main #order_review {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: 10px;
  padding: 22px;
}
.ck-main #customer_details h3,
.ck-main #order_review_heading {
  font-family: var(--f-bn);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink);
}
.ck-main #customer_details h3 { margin: 0 0 14px; }

/* fields: generous tap targets, labels that never clip Bangla */
.ck-main .form-row { margin: 0 0 14px; padding: 0; }
.ck-main .form-row label { line-height: 1.5; margin-bottom: 6px; display: block; }
.ck-main .form-row-first,
.ck-main .form-row-last { width: calc(50% - 7px); }
.ck-main input.input-text,
.ck-main select,
.ck-main textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--f-bn);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.ck-main input.input-text:focus,
.ck-main select:focus,
.ck-main textarea:focus {
  outline: none;
  border-color: var(--gada);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gada) 18%, transparent);
}
.ck-main .woocommerce-invalid input.input-text { border-color: #D93C3C; }
.ck-main textarea { min-height: 84px; }

/* --- the order summary -------------------------------------------------- */
.ck-main table.woocommerce-checkout-review-order-table { border: 0; margin: 0 0 6px; font-family: var(--f-bn); }
.ck-main .woocommerce-checkout-review-order-table th,
.ck-main .woocommerce-checkout-review-order-table td { padding: 10px 0; border-top: 1px solid var(--line-light); background: transparent; }
.ck-main .woocommerce-checkout-review-order-table thead th { border-top: 0; font-size: var(--fs-xs); color: var(--dhoa-dark); font-weight: 700; }
.ck-main .woocommerce-checkout-review-order-table td.product-name { line-height: 1.5; padding-right: 12px; }
.ck-main .woocommerce-checkout-review-order-table .product-total,
.ck-main .woocommerce-checkout-review-order-table tfoot td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck-main .woocommerce-checkout-review-order-table .order-total th,
.ck-main .woocommerce-checkout-review-order-table .order-total td { font-size: var(--fs-md); font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 14px; }

/* --- the order bump ----------------------------------------------------- */
.aib-bump {
  margin: 16px 0;
  border: 2px dashed color-mix(in srgb, var(--gada) 55%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gada-soft) 45%, #fff);
  font-family: var(--f-bn);
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.aib-bump.on { border-style: solid; border-color: var(--shobuj); background: var(--shobuj-soft); }
.aib-bump-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--gada) 9%, transparent); cursor: pointer; margin: 0; }
.aib-bump.on .aib-bump-row { background: color-mix(in srgb, var(--shobuj) 14%, transparent); }
.aib-bump-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aib-bump-tick {
  flex: none; width: 24px; height: 24px; border-radius: 5px;
  border: 2px solid var(--gada); background: #fff;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.aib-bump-tick::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px) scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.aib-bump-row input:checked + .aib-bump-tick { background: var(--shobuj); border-color: var(--shobuj); }
.aib-bump-row input:checked + .aib-bump-tick::after { transform: rotate(45deg) translate(-1px, -1px) scale(1); }
.aib-bump-row input:focus-visible + .aib-bump-tick { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gada) 30%, transparent); }
.aib-bump-label { font-weight: 700; color: var(--ink); line-height: 1.4; }
.aib-bump-tag { margin-left: auto; flex: none; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--gada); border-radius: 99px; padding: 3px 9px; }
.aib-bump.on .aib-bump-tag { background: var(--shobuj); }
.aib-bump-body { display: flex; gap: 12px; padding: 12px 14px 14px; align-items: flex-start; }
.aib-bump-img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; border: 1px solid var(--line-light); }
.aib-bump-title { display: block; color: var(--ink); line-height: 1.45; margin-bottom: 4px; }
.aib-bump-body p { margin: 0 0 6px; font-size: var(--fs-xs); line-height: 1.6; color: var(--dhoa-dark); }
.aib-bump-price { font-weight: 700; color: var(--ink) !important; font-size: var(--fs-base) !important; }
.aib-bump-price del { font-weight: 400; opacity: .55; margin-right: 6px; }
.aib-bump-price ins { text-decoration: none; color: var(--shobuj); }

/* --- payment methods ---------------------------------------------------- */
.ck-main #payment { background: transparent; border-radius: 0; }
.ck-main #payment ul.payment_methods { padding: 0; border: 0; margin: 0 0 14px; }
.ck-main #payment ul.payment_methods li {
  list-style: none;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 8px;
  font-family: var(--f-bn);
  line-height: 1.5;
  background: #fff;
}
.ck-main #payment ul.payment_methods li:has(input:checked) { border-color: var(--gada); box-shadow: 0 0 0 1px var(--gada); }
.ck-main #payment ul.payment_methods li label { font-weight: 700; cursor: pointer; }
.ck-main #payment div.payment_box { background: var(--kagoj); color: var(--dhoa-dark); font-size: var(--fs-xs); margin: 10px 0 0; border-radius: var(--radius); }
.ck-main #payment div.payment_box::before { display: none; }
.ck-main #payment .place-order { padding: 0; margin: 0; }
.ck-main .woocommerce-terms-and-conditions-wrapper { font-family: var(--f-bn); font-size: var(--fs-xs); line-height: 1.6; color: var(--dhoa-dark); }

/* --- thank-you ---------------------------------------------------------- */
.woocommerce-order-received .ck-main .aib-thanks { padding: 8px 0 28px; max-width: 760px; margin: 0; }
.ck-main .woocommerce-order { font-family: var(--f-bn); }
.ck-main .woocommerce-order-overview { padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.ck-main .woocommerce-order-overview li { list-style: none; border: 1px solid var(--line-light); border-radius: var(--radius); background: #fff; padding: 10px 14px; margin: 0; font-size: var(--fs-xs); line-height: 1.6; }
.ck-main .woocommerce-order-overview li strong { display: block; font-size: var(--fs-sm); }
.ck-main .woocommerce-order-details,
.ck-main .woocommerce-customer-details { background: #fff; border: 1px solid var(--line-light); border-radius: 10px; padding: 20px; margin-bottom: 18px; }

/* --- slim footer -------------------------------------------------------- */
.ck-foot { border-top: 1px solid var(--line-light); padding: 22px 0 90px; font-family: var(--f-bn); font-size: var(--fs-xs); color: var(--dhoa-dark); }
.ck-foot .wrap { display: flex; gap: 18px; flex-wrap: wrap; }
.ck-foot a { color: inherit; }

/* --- phone -------------------------------------------------------------- */
@media (max-width: 860px) {
  .ck-main { padding-top: 20px; }
  .ck-main form.checkout {
    grid-template-columns: minmax(0, 1fr);
    /* The payment methods and the pay button live inside #order_review, so
       on one column it has to come after the fields the buyer fills in. */
    grid-template-areas: "form" "head" "review";
    grid-template-rows: auto;
  }
  .ck-main #customer_details { margin-bottom: 22px; }
  .ck-main #order_review { position: static; }
  .ck-main #customer_details,
  .ck-main #order_review { padding: 16px; }
}
@media (max-width: 480px) {
  .ck-main .form-row-first,
  .ck-main .form-row-last { width: 100%; float: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aib-bump, .aib-bump-tick, .aib-bump-tick::after { transition: none; }
}

/* the hidden country field (checkout-native.php) keeps no row of its own */
.ck-main .aib-hidden-field { display: none; }

/* UX 15b: order-pay table. The totals rows span the name and quantity
   columns (colspan 2), and main.css hides the quantity column (one course
   at a time), so the table kept three columns while the header row filled
   two and its border stopped short of the right edge. Here the quantity
   cells stay in the table, empty and zero wide, so every row spans it. */
body.woocommerce-order-pay .woocommerce table.shop_table:not(:has(td.product-quantity input.qty:not([type="hidden"]))) th.product-quantity,
body.woocommerce-order-pay .woocommerce table.shop_table:not(:has(td.product-quantity input.qty:not([type="hidden"]))) td.product-quantity {
  display: table-cell !important;
  width: 0 !important;
  min-width: 0 !important; /* WooCommerce sets 80px on this cell */
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

/* The discount tag on the add-on price, e.g. "১৭% ছাড়": Paper Dusk accent tint. */
.aib-bump-off { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--pd-accent-tint); color: var(--pd-accent-2); font-size: .85em; font-weight: 700; white-space: nowrap; }

/* ------------------------------------------- mobile audit 2026-10 */
/* WooCommerce's icon font is not loaded on this site, so the notice icon showed
   as an empty box; the notices read fine without it. */
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none !important; }
.woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-error { padding-left: 20px; }
@media (max-width: 640px) {
  /* The card logos (179px) ran 20px past the payment box on a 375px phone. */
  .wc_payment_method > label { flex-wrap: wrap; row-gap: 8px; }
  .wc_payment_method > label img { max-width: 100%; height: auto; margin-left: 0; }
  /* Trust strip under the header was 12px. */
  .aib-checkout-bar .wrap, .aib-checkout-bar .wrap span, .aib-checkout-bar .wrap b { font-size: 13.5px; }
}

/* Audit 2026-10-15 D1: the 480px stack rule lost to .woocommerce form .form-row-first (0,2,1). */
@media (max-width: 480px) {
  .ck-main form .form-row-first, .ck-main form .form-row-last { width: 100%; float: none; }
}
/* Audit 2026-10-15 D2: the card label (text and logos) sits beside its radio, not under it. */
@media (max-width: 640px) {
  .ck-main #payment .wc_payment_method > label { max-width: calc(100% - 44px); vertical-align: middle; }
}