/* signupstyle - KL polish for the New Customer Application form
   (customersignup / joinregister, mapped via page-level xtrastyle records).
   Change log + rollback: destwin-portal/DESTWIN.md (2026-07-07). */

/* Tank Information selects: match the Bootstrap form-control look */
#tank_product_name,
.product-table select {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
#tank_product_name { margin-top: 0.25rem; }

/* Product tables: align label/select pairs and give them air */
.product-table { width: 100%; margin: 0.5rem 0 1rem; }
.product-table td.signup-left { padding: 0.4rem 0.75rem 0.4rem 0; vertical-align: middle; }
.product-table td.signup-right { padding: 0.4rem 0; min-width: 9rem; }

/* Caption the two tank columns like group headings */
div.col-lg-3:has(#tank-entry),
div.col-lg-3:has(#tank_product_name) {
  font-weight: 600;
  margin-bottom: 1rem;
}
div.col-lg-3:has(#tank-entry) table,
div.col-lg-3:has(#tank_product_name) table,
div.col-lg-3:has(#tank_product_name) select {
  font-weight: 400;
}

/* Hide the stray "-" prefix before "Tank Fill Location" */
span.v12white { display: none; }

/* Space the tank fill graphic */
#tank-entry { margin: 0.5rem auto 0.75rem; }

/* Tank block required-stars: match Bootstrap's danger red */
span.v12red strong { color: #dc3545; }

/* --- Field reordering (2026-07-09) ---------------------------------------
   Visual order only; DOM/tab order is unchanged (template-level fix remains
   on the Destwin ticket). The form's stray <tr>/<td> tags are dropped by the
   HTML parser, so each field survives as its own .form-group flex item:
   flatten the mispaired .form-row wrappers with display:contents, make the
   enclosing col-lg-12 a wrapping flex container, and order every group
   explicitly. Guarded with body:has(#tank-entry) so it is inert elsewhere. */

body:has(#tank-entry) div.col-lg-12:has(#bill_first_name) {
  display: flex;
  flex-wrap: wrap;
}
body:has(#tank-entry) div.col-lg-12:has(#bill_first_name) > .row.form-row {
  display: contents;
}

/* Every field group needs an explicit order (unordered items default to 0). */
body:has(#tank-entry) .form-group:has(#bill_first_name)      { order: 1; }
body:has(#tank-entry) .form-group:has(#bill_middle_name)     { order: 2; }
body:has(#tank-entry) .form-group:has(#bill_last_name)       { order: 3; }
body:has(#tank-entry) .form-group:has(#bill_address_1)       { order: 4; }
body:has(#tank-entry) .form-group:has(#bill_address_2)       { order: 5; }
body:has(#tank-entry) .form-group:has(#bill_city)            { order: 6; }
body:has(#tank-entry) .form-group:has(#bill_state)           { order: 7; }
body:has(#tank-entry) .form-group:has(#bill_zipcode)         { order: 8; }
body:has(#tank-entry) .form-group:has(#bill_home_phone)      { order: 9; }
body:has(#tank-entry) .form-group:has(#bill_work_phone)      { order: 10; }
body:has(#tank-entry) .form-group:has(#bill_email)           { order: 11; }
body:has(#tank-entry) .form-group:has(#CustomCustomerField)  { order: 12; }
body:has(#tank-entry) div.col-lg-3:has(#tank_product_name)   { order: 13; }
body:has(#tank-entry) div.col-lg-3:has(#tank-entry)          { order: 14; }

/* Semantic row widths at Bootstrap's md breakpoint:
   First/MI/Last | Addr1/Addr2 | City/State/Zip | phones | Email/Birthdate,
   then the two tank blocks widened from quarter- to half-width. */
@media (min-width: 768px) {
  body:has(#tank-entry) .form-group:has(#bill_first_name),
  body:has(#tank-entry) .form-group:has(#bill_last_name)   { flex: 0 0 41.666%; max-width: 41.666%; }
  body:has(#tank-entry) .form-group:has(#bill_middle_name) { flex: 0 0 16.666%; max-width: 16.666%; }
  body:has(#tank-entry) .form-group:has(#bill_city)        { flex: 0 0 41.666%; max-width: 41.666%; }
  body:has(#tank-entry) .form-group:has(#bill_state)       { flex: 0 0 33.333%; max-width: 33.333%; }
  body:has(#tank-entry) .form-group:has(#bill_zipcode)     { flex: 0 0 25%;     max-width: 25%; }
  body:has(#tank-entry) div.col-md-3:has(#tank-entry),
  body:has(#tank-entry) div.col-md-3:has(#tank_product_name) { flex: 0 0 50%; max-width: 50%; }
}

/* --- Tank Information heading rework (2026-07-09) -------------------------
   Render "Tank Information * Select Product" as
   "Tank Information (middot) Select Product*" with a .required_star-style
   asterisk. The heading and label are bare text nodes ("Tank Information",
   the v12red star span, "Select Product") left behind by dropped <td> tags,
   so no selector reaches them directly: zero the column's font-size to hide
   the raw text, resupply the combined heading via ::before, and let the
   surviving star span render right after it. */
body:has(#tank-entry) div.col-lg-3:has(#tank_product_name) { font-size: 0; }
body:has(#tank-entry) div.col-lg-3:has(#tank_product_name) > * { font-size: 1rem; }
body:has(#tank-entry) div.col-lg-3:has(#tank_product_name)::before {
  content: "Tank Information \00B7\0020Select Product"; /* \00B7 = middle dot */
  font-size: 1rem;
}
/* Direct child only: the product tables hold their own v12red stars. */
body:has(#tank-entry) div.col-lg-3:has(#tank_product_name) > span.v12red {
  margin-left: 0.25rem;
  font-size: 0.8rem; /* .required_star is 80%; absolute here (parent is 0) */
}
body:has(#tank-entry) div.col-lg-3:has(#tank_product_name) > span.v12red strong {
  font-weight: 400; /* match the plain .required_star asterisks */
}