/* =========================================================================
   Regenesis Biotech — Order Received (Thank You) UI polish
   CSS-ONLY. No template changes. Scoped to .woocommerce-order so nothing
   else on the site is affected. Targets standard WooCommerce markup:
   .woocommerce-order-overview, table.order_details, .wc-item-meta,
   .woocommerce-customer-details.
   Rebrand via the --ro-* vars below.
   ========================================================================= */

.woocommerce-order{
  --ro-ink:#16202B;
  --ro-muted:#5C6B7A;
  --ro-line:#E4E9EE;
  --ro-bg:#F4F7FA;
  --ro-surface:#FFFFFF;
  --ro-navy:#0F3B5F;          /* Regenesis navy */
  --ro-accent:#E97B22;        /* Regenesis orange */
  --ro-accent-soft:#FDF0E4;
  --ro-ok:#12603C;
  --ro-ok-bg:#EAF7EF;
  --ro-ok-line:#CDEBD9;
  --ro-radius:14px;
  --ro-shadow:0 1px 2px rgba(16,32,43,.04), 0 6px 22px rgba(16,32,43,.06);

  max-width:1040px;
  margin:0 auto;
  color:var(--ro-ink);
  font-size:14.5px;
  line-height:1.55;
}
.woocommerce-order *{box-sizing:border-box;}

/* ---------- 1. "Your order has been received" success strip ---------- */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order p.woocommerce-notice--success{
  display:flex;align-items:center;gap:10px;
  background:var(--ro-ok-bg);border:1px solid var(--ro-ok-line);
  color:var(--ro-ok);font-size:15px;
  padding:14px 18px;border-radius:var(--ro-radius);margin:0 0 22px;
}
.woocommerce-order .woocommerce-thankyou-order-received::before{
  content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--ro-ok);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/13px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/13px no-repeat;
}

/* ---------- 2. Order overview → stat card ---------- */
.woocommerce-order ul.woocommerce-order-overview{
  list-style:none;
  margin:0 0 30px;
  padding:20px 24px;
  display:grid;
  /* grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); */
  gap:14px 24px;
  background:var(--ro-surface);
  border:1px solid var(--ro-line);
  border-left:4px solid var(--ro-accent);
  border-radius:var(--ro-radius);
  box-shadow:var(--ro-shadow);
}
.woocommerce-order ul.woocommerce-order-overview li{
  border:0 !important;margin:0 !important;padding:0 !important;
  display:flex;flex-direction:column;gap:3px;
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ro-muted);
}
.woocommerce-order ul.woocommerce-order-overview li strong{
  font-size:16px;letter-spacing:0;text-transform:none;color:var(--ro-ink);
}

/* ---------- 3. Section titles ---------- */
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title,
.woocommerce-order h2{
  font-size:20px;font-weight:700;color:var(--ro-navy);
  margin:0 0 14px;letter-spacing:-.01em;
}

/* ---------- 4. Order details table shell ---------- */
.woocommerce-order table.order_details{
  width:100%;
  border-collapse:separate;
  border-spacing: 30px;
  margin:0 0 30px;
  background:var(--ro-surface);
  border: 1px solid var(--ro-line) !important;
  border-radius:var(--ro-radius);
  overflow:hidden;
  box-shadow:var(--ro-shadow);
}
.woocommerce-order table.order_details thead th{
  background:var(--ro-bg);text-align:left;padding:13px 22px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ro-muted);border-bottom:1px solid var(--ro-line);
}
.woocommerce-order table.order_details thead th.product-total{text-align:right;}
.woocommerce-order table.order_details tbody td{padding: 0px 0px;vertical-align:top;border: 0 !important;width: 100%;}
.woocommerce-order table.order_details tbody .product-name > a{
  font-size:16.5px;color:var(--ro-navy);text-decoration:none;
}
.woocommerce-order table.order_details .product-quantity,
.woocommerce-order table.order_details .product-name strong.product-quantity{
  color:var(--ro-muted);font-weight:600;
}
.woocommerce-order table.order_details td.product-total{
  text-align:right;
  white-space:nowrap;
  font-weight:700;
  color: #000;
}

/* ---------- 5. THE FIX: form fields ---------- */

/* 5a. Fallback for the no-JS case: keep the raw list readable in 2 columns. */
.woocommerce-order .wc-item-meta{
  list-style:none;margin:18px 0 0;padding:18px 0 0;
  border-top:1px solid var(--ro-line);columns:2;column-gap:40px;
}
.woocommerce-order .wc-item-meta > li{
  break-inside:avoid;margin:0 0 12px;padding:0 0 12px;
  border-bottom:1px solid var(--ro-line);font-size:14px;line-height:1.45;
}
.woocommerce-order .wc-item-meta > li strong{font-weight:600;color:var(--ro-muted);}

/* 5b. Enhanced (JS builds .ro-form): grouped sections as a clean data sheet. */
.woocommerce-order .ro-form{
  margin: 20px 0 30px;
}
.woocommerce-order .ro-sec-block{margin:0 0 30px;}
.woocommerce-order .ro-sec-block:last-child{margin-bottom:0;}
.woocommerce-order .ro-sec-title{
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ro-navy);margin:0 0 16px;padding:0 0 9px;
  border-bottom:2px solid var(--ro-navy);
}

/* Info sections → responsive data grid, label above value */
.woocommerce-order .ro-sec-block--info .ro-fields{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px 30px;
}
.woocommerce-order .ro-sec-block--info .ro-field{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  padding-bottom:12px;border-bottom:1px solid var(--ro-line);
}
.woocommerce-order .ro-sec-block--info .ro-key{
  font-size:11.5px;font-weight:600;line-height:1.35;color:var(--ro-muted);
}
.woocommerce-order .ro-sec-block--info .ro-val{
  font-size:14.5px;line-height:1.4;color:var(--ro-ink);
  overflow-wrap:anywhere;
}

/* Medical section → 2 columns, question left, YES/NO pill hard-right */
.woocommerce-order .ro-sec-block--medical .ro-fields{columns:2;column-gap:44px;}
.woocommerce-order .ro-sec-block--medical .ro-field{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--ro-line);
}
.woocommerce-order .ro-sec-block--medical .ro-key{
  flex:1;font-size:13.5px;line-height:1.45;color:var(--ro-muted);
}
.woocommerce-order .ro-sec-block--medical .ro-val{flex:0 0 auto;font-weight:700;color:var(--ro-ink);}

/* Signature images (override the plugin's inline styles) */
.woocommerce-order .ro-form img,
.woocommerce-order .wc-item-meta img{
  display:block !important;max-width:190px !important;height:auto !important;
  margin-top:6px !important;padding:8px !important;background:#fff !important;
  border:1px solid var(--ro-line) !important;border-radius:10px !important;
}

/* ---------- 6. Totals (tfoot) ---------- */
.woocommerce-order table.order_details tfoot th,
.woocommerce-order table.order_details tfoot td{
  padding:12px 22px;text-align:right;border-top:1px solid var(--ro-line);
}
.woocommerce-order table.order_details tfoot th{font-weight:500;color:var(--ro-muted);}
.woocommerce-order table.order_details tfoot td{font-weight:600;color:var(--ro-ink);}
/* Emphasise the "Total:" row (4th of 5 rows: Subtotal, Signup Fee, HST, Total, Payment) */
.woocommerce-order table.order_details tfoot tr:nth-last-child(2) th,
.woocommerce-order table.order_details tfoot tr:nth-last-child(2) td{
  font-size:18px;font-weight:800;color:var(--ro-navy);
  background:var(--ro-bg);
}

/* ---------- 7. Billing / customer details ---------- */
.woocommerce-order .woocommerce-customer-details{margin-top:6px;}
.woocommerce-order .woocommerce-customer-details address{
  font-style:normal;line-height:1.75;color:var(--ro-ink);height:auto !important;
  background:var(--ro-surface);border:1px solid var(--ro-line);
  border-radius:var(--ro-radius);padding:18px 22px;box-shadow:var(--ro-shadow);
}
.woocommerce-order .woocommerce-customer-details address p{margin:6px 0 0;color:var(--ro-muted);}

/* ---------- 8. YES/NO pills (applied to .ro-val by the JS) ---------- */
.woocommerce-order .ro-val.ro-ans{
  display:inline-block;padding:3px 13px;border-radius:999px;margin:0;
  font-size:12.5px;font-weight:800;letter-spacing:.03em;line-height:1.5;white-space:nowrap;
}
.woocommerce-order .ro-val.ro-ans--yes{background:var(--ro-accent-soft);color:var(--ro-accent);}
.woocommerce-order .ro-val.ro-ans--no{background:#EEF2F5;color:var(--ro-muted);}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .woocommerce-order .wc-item-meta,
  .woocommerce-order .ro-sec-block--medical .ro-fields{columns:1;}
  .woocommerce-order ul.woocommerce-order-overview{grid-template-columns:1fr 1fr;}
  .woocommerce-order .ro-form{padding:18px 16px;}
}