/*
 * Twentyfivedegrees - Size Matrix Order Form
 * Author: studio66.amsterdam for Twentyfivedegrees
 */

:root{
  --tfd-smof-border: rgba(0,0,0,.14);
  --tfd-smof-radius: 14px;
  --tfd-smof-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* ========== Quick order search input ========== */
.tfd-smof__searchwrap{max-width:720px;margin:22px 0 18px;}
.tfd-smof__searchwrap .tfd-smof__search{
  width:100% !important;
  max-width:520px !important;
  min-width:320px !important;
  display:block !important;
  box-sizing:border-box !important;
  font-size:22px !important;
  line-height:1.2 !important;
  height:47px !important;
  padding:8px 25px !important;
  border:2px solid rgba(0,0,0,.15) !important;
  border-radius:999px !important;
  background:#fff !important;
  outline:none;
}
.tfd-smof__searchwrap .tfd-smof__search:focus{
  border-color:rgba(0,0,0,.35) !important;
  box-shadow:0 0 0 3px rgba(0,0,0,.06) !important;
}


/* ========== Single product sizing matrix ========== */
.tfd-smof-single{margin-top:28px;}

.tfd-smof-single .tfd-smof-matrix{
  width:100%;
  border:1px solid var(--tfd-smof-border);
  border-radius:var(--tfd-smof-radius);
  box-shadow:var(--tfd-smof-shadow);
  overflow:hidden;
  background:#fff;
}

/* Table */
.tfd-smof-table{width:100% !important;border-collapse:separate;border-spacing:0;table-layout:fixed !important;}
.tfd-smof-table th,
.tfd-smof-table td{
  padding:10px 8px;
  border-bottom:1px solid rgba(0,0,0,.06);
  vertical-align:middle;
}

/* Grand total row (in <tfoot>) so it lines up under the Total column. */
.tfd-smof__grandrow td{
  border-bottom:0;
  border-top:1px solid rgba(0,0,0,.15);
  padding-top:14px;
}
.tfd-smof__grandlabel{
  text-align:right;
  font-weight:800;
}
.tfd-smof__grandtotal-cell{
  text-align:right;
  font-weight:800;
}
.tfd-smof-table thead th{
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-align:center;
}

/* Size columns should be compact (80px). First column (color) is fluid. */
.tfd-smof-table thead th:not(:first-child){
  width:80px !important;
  max-width:80px !important;
}
.tfd-smof-table tbody th{
  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
  white-space:nowrap;
}
.tfd-smof-table td{text-align:right;font-size:18px;}

/*
 * The matrix is rendered by JS with the class `.tfd-smof__matrix-table`.
 * Earlier CSS targeted `.tfd-smof-table`, which isn't present in the final markup.
 * Duplicate the key rules here so widths/alignment are actually applied.
 */
.tfd-smof__matrix-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.tfd-smof__matrix-table th{font-size:18px;font-weight:600;padding:6px 8px;text-align:center;}
.tfd-smof__matrix-table td{padding:6px 8px;vertical-align:middle;}
.tfd-smof__matrix-table td:first-child{font-size:18px;font-weight:500;text-align:left;}
.tfd-smof__matrix-table .tfd-smof__total-cell,
.tfd-smof__matrix-table td:last-child{width:80px;text-align:right;font-size:18px;font-weight:500;}

.tfd-smof__matrix-table .tfd-smof__qty{
  width:80px !important;
  min-width:80px !important;
  max-width:80px !important;
  font-size:18px !important;
  line-height:1.2 !important;
  text-align:right !important;
  padding:4px 8px 4px 8px !important;
  box-sizing:border-box !important;
}

.tfd-smof__matrix-table input[type=number].tfd-smof__qty{
  -moz-appearance:textfield;
}
.tfd-smof__matrix-table input[type=number].tfd-smof__qty::-webkit-outer-spin-button,
.tfd-smof__matrix-table input[type=number].tfd-smof__qty::-webkit-inner-spin-button{
  -webkit-appearance:auto;
}

/* Qty input */
.tfd-smof-table input[type=number]{
  width:80px !important;
  max-width:80px !important;
  height:42px;
  font-size:18px;
  line-height:42px;
  border:1px solid rgba(0,0,0,.22);
  border-radius:12px;
  padding:0 10px;
  text-align:right !important;
  box-sizing:border-box;
}

/* Theme/plugin overrides sometimes set fixed widths (e.g. 145px) or left alignment.
   Force the matrix inputs to compact, right-aligned values. */
.tfd-smof-table td input[type=number].tfd-smof__qty,
.tfd-smof-table td input[type=number].tfd-co-qty{
  width:80px !important;
  max-width:80px !important;
  min-width:80px !important;
  text-align:right !important;
  padding-right:10px !important;
}

/* Extra specificity: some themes/plugins override width/text-align on number inputs */
.tfd-smof-table td input[type=number].tfd-smof__qty{
  width:80px !important;
  max-width:80px !important;
  text-align:right !important;
}

/* Total col */
.tfd-smof-table .tfd-smof-rowtotal,
.tfd-smof-table .tfd-smof-grandtotal{
  font-weight:800;
  font-size:18px;
}

/* Footer */
.tfd-smof-footer{
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 16px;
}

.tfd-smof-footer .tfd-smof-grandlabel{font-size:22px;font-weight:800;}
.tfd-smof-footer .tfd-smof-grandtotal{font-size:22px;font-weight:800;}

/* Add to cart button (match Woo black button) */
.tfd-smof-add-to-cart{
  appearance:none;
  border:1px solid #000;
  background:#000;
  color:#fff;
  border-radius:0;
  padding:12px 22px;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
}
.tfd-smof-add-to-cart:hover{filter:brightness(.92);}
.tfd-smof-add-to-cart:disabled{opacity:.55;cursor:not-allowed;}

/* Hide the B2BKing variations/bulk-order table when our size matrix is active */
body.tfd-smof-active .b2bking_bulkorder_form_container,
body.tfd-smof-active .b2bking_bulkorder_form_container_top,
body.tfd-smof-active .b2bking_bulkorder_form_container_content_header,
body.tfd-smof-active .b2bking_bulkorder_form_container_content,
body.tfd-smof-active .b2bking_bulkorder_form_container_bottom,
body.tfd-smof-active .b2bking_pagination_buttons{
  display:none !important;
}

/* Responsive */
@media (max-width: 900px){
  .tfd-smof-table thead th{font-size:16px;}
  .tfd-smof-table tbody th{font-size:16px;}
  .tfd-smof-table td{font-size:16px;}
  .tfd-smof-table input[type=number]{width:64px;height:40px;font-size:16px;border-radius:10px;}
  .tfd-smof__grandlabel,.tfd-smof__grandtotal-cell{font-size:18px;}
}

/* Safety: don't inherit theme button weirdness */
.tfd-smof-single button{font-family:inherit;}

/* Quick order (search box + button) */
.tfd-smof__quickorder-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tfd-smof__quickorder-form .tfd-smof__label{flex:0 0 100%;margin:0 0 4px}
.tfd-smof__quickorder-form .tfd-smof__search{width:100%;max-width:680px;min-width:320px;padding:8px 25px;font-size:inherit;line-height:1.2;border-radius:999px;}
.tfd-smof__quickorder-form .tfd-smof__submit{padding:12px 22px;}
@media (max-width: 520px){
  .tfd-smof__quickorder-form .tfd-smof__search{min-width:0;max-width:100%;}
}

/* ========== Quick order search input (match site search pill) ========== */
.tfd-smof__searchwrap{max-width:720px;margin:22px 0 18px;}
.tfd-smof__searchwrap .tfd-smof__search,
.woocommerce-account .tfd-smof__searchwrap .tfd-smof__search{
  width:100% !important;
  max-width:520px !important;
  min-width:320px !important;
  display:block !important;
  box-sizing:border-box !important;
  font-size:22px !important;
  line-height:1.2 !important;
  padding:8px 25px !important;
  height:47px !important;
  border:2px solid rgba(0,0,0,.15) !important;
  border-radius:999px !important;
  background:#fff !important;
  outline:none !important;
}
.tfd-smof__searchwrap .tfd-smof__search:focus{
  border-color:rgba(0,0,0,.35) !important;
  box-shadow:none !important;
}

/* ========== Quick order search input (match site search pill) ========== */
.tfd-smof__searchwrap{max-width:720px;margin:22px 0 18px;}
.tfd-smof__searchwrap .tfd-smof__search,
.woocommerce-account .tfd-smof__searchwrap .tfd-smof__search{
  width:100% !important;
  max-width:520px !important;
  min-width:320px !important;
  display:block !important;
  box-sizing:border-box !important;
  font-size:22px !important;
  line-height:1.2 !important;
  padding:8px 25px !important;
  height:47px !important;
  border:2px solid rgba(0,0,0,.15) !important;
  border-radius:999px !important;
  background:#fff !important;
  outline:0 !important;
}
.tfd-smof__searchwrap .tfd-smof__search:focus,
.woocommerce-account .tfd-smof__searchwrap .tfd-smof__search:focus{
  border-color:rgba(0,0,0,.35) !important;
  box-shadow:0 0 0 3px rgba(0,0,0,.08) !important;
}