/* ============================================================
   ASTROZON — checkout
   depends on cart.css for .summary, .freeship, .trust, .helpstrip
   ============================================================ */

.ckpage__head{ margin-bottom:16px; }
.ckpage__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.35rem, 2.6vw, 1.8rem);
  letter-spacing:-.015em;
  color:var(--ink);
}
.ckpage__sub{
  margin:5px 0 0;
  font-size:13px;
  color:var(--muted);
}


/* ============================================================
   LAYOUT
   ============================================================ */

.ckpage__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:24px;
  align-items:start;
}
.ckpage__side{
  position:sticky;
  top:98px;
}

.ckcard{
  padding:22px 24px 24px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.ckcard__title{
  margin:0 0 18px;
  font-size:15px;
  font-weight:800;
  color:var(--ink);
}

/* card header with a right-aligned action, e.g. "Deliver to another address" */
.ckcard__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.ckcard__bar .ckcard__title{ margin:0; }
.ckcard__alt{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  color:var(--brand);
  cursor:pointer;
  transition:opacity .18s ease;
}
.ckcard__alt svg{ width:15px; height:15px; }
.ckcard__alt:hover{ opacity:.75; }
.ckcard--alt[hidden]{ display:none; }


/* ============================================================
   FORM FIELDS
   ============================================================ */

.ckfields{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:0 22px;
}
.ckcard .form-row{
  display:flex;
  flex-direction:column;
  margin:0 0 18px;
  padding:0;
}

/* the field array assigns these; see inc/checkout-fields.php */
.ckfields .az-col-4{ grid-column:span 4; }
.ckfields .az-col-6{ grid-column:span 6; }
.ckfields .az-col-12,
.ckfields .az-check,
.ckfields .form-row-wide,
.ckfields .notes{ grid-column:1 / -1; }

/* WooCommerce's own width classes, for anything the theme did not relabel */
.ckfields .form-row-first,
.ckfields .form-row-last{ grid-column:span 6; }

/*
 * Phone row: dial code, then the number.
 *
 * The dial field has no label, so in a grid of label-over-input rows its select
 * floated up level with the neighbouring labels. Pushing it to the bottom of its
 * cell lines it up with the inputs instead. The two were also butted together
 * with a negative margin, which only worked while the phone field had no label
 * of its own — they read better as two plain boxes.
 */
.ckfields .az-dial{
  grid-column:span 3;
  justify-content:flex-end;
}
.ckfields .az-phone{ grid-column:span 3; }

.az-check{ margin-top:2px; }
.az-check label{ margin:0; }

/* the dial select carries no label, so nothing sits above it */
.ckfields .az-dial label{ display:none; }

/*
 * Checkbox rows. WooCommerce gives its checkboxes their own margins and floats,
 * which fought the flex gap and left the box either glued to the text or riding
 * above it.
 */
.woocommerce .ckcard .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce .ckcard label.woocommerce-form__label-for-checkbox,
.ckcard .woocommerce-form__label-for-checkbox{
  display:flex !important;
  align-items:center;
  gap:10px;
  margin:0;
  line-height:1.4;
  cursor:pointer;
}
.ckcard .woocommerce-form__label-for-checkbox input[type=checkbox]{
  margin:0 !important;
  float:none;
  flex:0 0 auto;
}
.ckcard .woocommerce-form__label-for-checkbox span{ display:inline; }

/*
 * A store selling to one country only gets a read-only country row from
 * WooCommerce — bare bold text where every neighbour is a boxed field.
 */
.ckfields .form-row strong{
  display:flex;
  align-items:center;
  height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#F7F8FA;
  font-size:13px;
  font-weight:500;
  color:var(--ink-2);
}

.ckcard--notes .form-row{ margin:0; }

.ckcard label{
  margin-bottom:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-2);
}
.ckcard label .required{
  margin-left:2px;
  color:var(--brand);
  text-decoration:none;
  border:0;
}
.ckcard .optional{ color:var(--muted); font-weight:500; }

/* One border for every control. WooCommerce's own `.woocommerce form .form-row
   select` is more specific than a plain `.ckcard select`, so the selects kept
   the browser's default border while the inputs took the theme's. */
.woocommerce .ckcard .form-row input[type=text],
.woocommerce .ckcard .form-row input[type=email],
.woocommerce .ckcard .form-row input[type=tel],
.woocommerce .ckcard .form-row input[type=password],
.woocommerce .ckcard .form-row input[type=number],
.woocommerce .ckcard .form-row select,
.woocommerce .ckcard .form-row textarea,
.ckcard input[type=text],
.ckcard input[type=email],
.ckcard input[type=tel],
.ckcard input[type=password],
.ckcard input[type=number],
.ckcard select,
.ckcard textarea,
.ckcard .select2-selection--single{
  width:100%;
  height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font:inherit;
  font-size:13px;
  line-height:normal;
  color:var(--ink);
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

/* native select chevron differs per browser — draw our own so the two match */
.woocommerce .ckcard .form-row select,
.ckcard select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%233A4150' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:16px;
  cursor:pointer;
}
.ckcard textarea{
  height:auto;
  min-height:96px;
  padding:12px 14px;
  line-height:1.6;
  resize:vertical;
}
.ckcard input::placeholder,
.ckcard textarea::placeholder{ color:#A9AEBA; }
.ckcard input:focus,
.ckcard select:focus,
.ckcard textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.14);
}
/* ---------- validation states ---------- */

/*
 * WooCommerce paints every field it has accepted with a green border. On a form
 * this dense that reads as a warning rather than an all-clear — and it sat on
 * the postcode field at the same time as a red "not a valid postcode" message.
 * Accepted fields go back to looking like ordinary fields; only problems show.
 */
.woocommerce .ckcard .form-row.woocommerce-validated input,
.woocommerce .ckcard .form-row.woocommerce-validated select,
.woocommerce .ckcard .form-row.woocommerce-validated textarea,
.woocommerce .ckcard .form-row.woocommerce-validated .select2-selection--single{
  border-color:var(--line);
}

.woocommerce .ckcard .form-row.woocommerce-invalid input,
.woocommerce .ckcard .form-row.woocommerce-invalid select,
.woocommerce .ckcard .form-row.woocommerce-invalid textarea,
.woocommerce .ckcard .form-row.woocommerce-invalid .select2-selection--single,
.ckcard input:user-invalid,
.ckcard select:user-invalid{
  border-color:#DC2626;
  background-color:#FFF7F7;
}
.woocommerce .ckcard .form-row.woocommerce-invalid input:focus,
.woocommerce .ckcard .form-row.woocommerce-invalid select:focus,
.woocommerce .ckcard .form-row.woocommerce-invalid textarea:focus{
  border-color:#DC2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.14);
}

/* what is actually wrong, next to the field it is wrong about */
.ckerr{
  display:flex;
  align-items:flex-start;
  gap:5px;
  margin-top:6px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.45;
  color:#DC2626;
}
.ckerr::before{
  content:"";
  flex:0 0 13px;
  height:13px;
  margin-top:1px;
  background:#DC2626;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v8h-2V7Zm0 10h2v2h-2v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v8h-2V7Zm0 10h2v2h-2v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* WooCommerce's own inline message, when a server round-trip does happen */
.woocommerce .ckcard .form-row .woocommerce-error{
  margin:6px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:11.5px;
  font-weight:600;
  color:#DC2626;
}

/* Select2, which WooCommerce uses for country and state */
.ckcard .select2-container .select2-selection--single{
  display:flex;
  align-items:center;
}
.ckcard .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;
  line-height:inherit;
  color:var(--ink);
}
.ckcard .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:42px;
  right:8px;
}

/* "ship to a different address" toggle */
.ckcard .woocommerce-shipping-fields h3,
.ckcard .woocommerce-additional-fields h3{
  margin:6px 0 16px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
}
.ckcard #ship-to-different-address label,
.ckcard .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
}
.ckcard input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:18px; height:18px;
  margin:0;
  border:1.6px solid #CFD4DD;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.ckcard input[type=checkbox]:checked{
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.4 3 3 6-6.6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  border-color:var(--brand);
}


/* ============================================================
   SHIPPING METHOD
   ============================================================ */

.ckship__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ckship__opt{ position:relative; }
.ckship__opt input{
  position:absolute;
  opacity:0;
  width:0; height:0;
}
.ckship__opt label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:15px 17px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.ckship__opt label:hover{ border-color:#CFD4DD; }
.ckship__opt input:checked + label{
  border-color:var(--brand);
  background:var(--brand-tint);
  color:var(--ink);
}
.ckship__opt input:focus-visible + label{ outline:2px solid var(--brand); outline-offset:2px; }
.ckship__cost{ font-weight:800; color:var(--ink); white-space:nowrap; }
.ckship__none{
  margin:0;
  font-size:13px;
  color:var(--muted);
}


/* ============================================================
   PAYMENT
   ============================================================ */

/* WooCommerce wraps this in a grey rounded box of its own; the card around it
   is the theme's frame, so that one is cleared away. */
#payment.woocommerce-checkout-payment{
  padding:0;
  border-radius:0;
  background:transparent;
}

/* One column. The mock's two-up grid worked for bare labels, but live gateways
   bring card forms and logo rows that simply do not fit half a sidebar. */
#payment .wc_payment_methods{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* the "no payment methods" notice is a bare <li> — as a grid item it was
   squeezed into one narrow column and wrapped a word per line */
#payment .wc_payment_methods > li:not(.wc_payment_method){ min-width:0; }
#payment .woocommerce-info,
#payment .woocommerce-error,
#payment .woocommerce-message{
  margin:0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:9px;
  background:#FCFCFD;
  font-size:12.5px;
  line-height:1.65;
  color:var(--ink-2);
}
#payment .woocommerce-info::before,
#payment .woocommerce-error::before,
#payment .woocommerce-message::before{ display:none; }
/*
 * The tile chrome lives on the <li>, not the <label>.
 *
 * With the border on the label, gateways that restyle their own label — most
 * hosted ones do — left the box hugging the text while the radio dot, which is
 * positioned against the <li>, floated outside it along with the card logos.
 * Anchoring both to the same element makes the tile immune to whatever the
 * gateway does inside it.
 */
#payment .wc_payment_method{
  position:relative;
  min-width:0;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  transition:border-color .18s ease, background .18s ease;
}
#payment .wc_payment_method:hover{ border-color:#CFD4DD; }
#payment .wc_payment_method:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.12);
}

#payment .wc_payment_method > input[type=radio]{
  position:absolute;
  opacity:0;
  width:0; height:0;
}

#payment .wc_payment_method > label{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  width:100%;
  min-height:52px;
  margin:0;
  padding:12px 46px 12px 42px;
  float:none;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  cursor:pointer;
}

/* radio dot on the left, drawn against the tile itself */
#payment .wc_payment_method::before{
  content:'';
  position:absolute;
  left:15px; top:26px;
  width:16px; height:16px;
  margin-top:-8px;
  border:1.6px solid #CFD4DD;
  border-radius:50%;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
  pointer-events:none;
  z-index:1;
}
#payment .wc_payment_method:has(> input:checked),
#payment .wc_payment_method.is-selected{
  border-color:var(--brand);
  background:var(--brand-tint);
}
#payment .wc_payment_method:has(> input:checked)::before,
#payment .wc_payment_method.is-selected::before{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 3.5px var(--brand);
}

/* gateway logos: capped, kept inside the tile, wrapping rather than escaping */
#payment .wc_payment_method > label img,
#payment .wc_payment_method > label svg{
  max-height:22px;
  max-width:100%;
  width:auto;
  margin:0;
  display:inline-block;
  vertical-align:middle;
}
#payment .wc_payment_method > label > *:not(img):not(svg){ min-width:0; }
/* whatever the gateway uses to group its icons is pushed to the right */
#payment .wc_payment_method > label .wc-payment-gateway-method-logos,
#payment .wc_payment_method > label .payment-methods--logos,
#payment .wc_payment_method > label > span:last-child:has(img){
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/*
 * The card form the gateway injects. WooCommerce gives this a grey block and a
 * little pointer arrow; inside our tile it reads better as a plain section
 * divided off by a rule.
 */
#payment .payment_box{
  position:relative;
  margin:0;
  padding:16px 16px 18px;
  border-top:1px solid var(--line);
  border-radius:0;
  background:#fff;
  font-size:12.5px;
  line-height:1.65;
  color:var(--ink-2);
}
#payment .payment_box::before,
#payment .payment_box::after{ display:none !important; }
#payment .payment_box p{ margin:0 0 10px; }
#payment .payment_box p:last-child{ margin:0; }

/* keep embedded card fields inside the column */
#payment .payment_box iframe,
#payment .payment_box img,
#payment .payment_box > div{ max-width:100%; }
#payment .payment_box input[type=text],
#payment .payment_box input[type=tel],
#payment .payment_box input[type=number]{
  width:100%;
  height:42px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:13px;
}

#payment .place-order{
  margin:18px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--line);
}
#payment .place-order noscript{
  display:block;
  margin-bottom:14px;
  font-size:12px;
  color:var(--muted);
}
#payment .woocommerce-terms-and-conditions-wrapper{ margin-bottom:16px; }
#payment .woocommerce-privacy-policy-text p{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
}

/* Place Order — out-specify WooCommerce's own .button.alt */
.woocommerce #payment #place_order,
#payment button#place_order.button.alt,
#payment #place_order{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  height:54px;
  margin:0;
  padding:0 20px;
  border:0;
  border-radius:9px;
  background:var(--brand);
  background-image:none;
  color:#fff;
  font-size:14.5px;
  font-weight:800;
  text-shadow:none;
  box-shadow:0 12px 24px -14px rgba(224,30,38,.85);
  transition:background .18s ease, transform .18s ease;
}
.woocommerce #payment #place_order:hover,
#payment #place_order:hover{
  background:var(--brand-dark);
  color:#fff;
  transform:translateY(-1px);
}


/* ============================================================
   SUMMARY LINE ITEMS
   ============================================================ */

.summary__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.summary__head .summary__title{ margin:0; }
.summary__edit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--brand);
}
.summary__edit svg{ width:14px; height:14px; }
.summary__edit:hover{ opacity:.75; }

.cklines{
  list-style:none;
  margin:0 0 18px;
  padding:0 0 6px;
  border-bottom:1px solid var(--line);
}
.ckline{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding:0 0 14px;
}
.ckline__thumb{
  border-radius:7px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#F4F5F7;
}
.ckline__thumb img{ width:100%; height:auto; display:block; }
.ckline__info h3{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}
.ckline__info p{
  margin:3px 0 0;
  font-size:11px;
  color:var(--muted);
}
.ckline__money{ text-align:right; white-space:nowrap; }
.ckline__money strong{
  display:block;
  font-size:12.5px;
  font-weight:800;
  color:var(--ink);
}
.ckline__money small{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--muted);
}

/* the promises close the page, full width under both columns */
.ckpage > .trust{
  margin-top:26px;
  border:0;
  border-radius:0;
  background:none;
}
.ckpage > .trust li{ border-left:0; padding:18px 14px; }
.ckpage > .trust{ grid-template-columns:repeat(4, 1fr); }

/* WooCommerce notices inside the checkout column */
.ckpage .woocommerce-NoticeGroup{ margin-bottom:18px; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1180px){
  .ckpage__grid{ grid-template-columns:minmax(0,1fr) 340px; }
}

@media (max-width:980px){
  .ckpage__grid{ grid-template-columns:1fr; }
  /*
   * No order swap here. The sidebar led on mobile back when it held only the
   * order summary; it now carries the payment methods and Place Order, so
   * hoisting it put the button above the address form.
   */
  .ckpage__side{ position:static; }
  .ckreview__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   CHECKOUT REASSURANCE  —  the facts about the order, beside the form
   ============================================================ */

/* One panel, two zones: the quick promises, then the detail worth reading
   twice. Loose blocks floating under the summary read as leftovers. */
.ckassure{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.ckassure__list{
  list-style:none;
  margin:0;
  padding:16px 18px;
  display:grid;
  gap:12px;
  background:#FBFBFC;
  border-bottom:1px solid var(--line);
}
.ckassure__list li{
  display:flex;
  align-items:center;
  gap:11px;
}
.ckassure__list p{
  margin:0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}
.ckassure__list strong{
  font-weight:700;
  color:var(--ink);
}

/* the theme's icon tile, at the size a sidebar can spare */
.ckassure__ico,
.ckassure__mark{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--brand-tint);
  color:var(--brand);
}
.ckassure__ico svg,
.ckassure__mark svg{ width:17px; height:17px; }

/* green for what is already settled, grey for plain fact */
.ckassure__ico--go,
.ckassure__mark--go{ background:#E8F6EE; color:#16A34A; }
.ckassure__mark{ background:#F2F3F6; color:var(--ink-2); }
.ckassure__mark--go{ background:#E8F6EE; color:#16A34A; }
.ckassure__mark--call{ background:var(--brand-tint); color:var(--brand); }

.ckassure__card{ padding:0 18px; }
.ckassure__row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 0;
  border-top:1px solid var(--line);
}
.ckassure__row:first-child{ border-top:0; }
.ckassure__row h3{
  margin:0;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}
.ckassure__row p{
  margin:5px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--muted);
}
.ckassure__row a{
  font-weight:700;
  color:var(--brand);
  white-space:nowrap;
}
.ckassure__row a:hover{ text-decoration:underline; text-underline-offset:2px; }


@media (max-width:720px){
  .ckcard{ padding:18px 16px 20px; }
  .ckfields .az-col-4,
  .ckfields .az-col-6,
  .ckfields .az-dial,
  .ckfields .az-phone,
  .ckfields .form-row-first,
  .ckfields .form-row-last{ grid-column:1 / -1; }
  .ckfields .az-dial{ justify-content:flex-start; }

  .ckpage > .trust{ grid-template-columns:repeat(2, 1fr); }

}