/* =============================================================================
 * ACCB — Compact Flex UI (token-first)
 * Extends your base tokens + compacts all new layout pieces we added:
 * - rows: search / cart / notes
 * - 3-col checkout grid
 * - inline controls
 * - "hide cart lines in order_review" but keep totals/payment
 * ============================================================================= */

/* ===== Base (your provided) ===== */
.accb-portal{
  --accb-accent:  var(--awcai-accent, var(--ctl-c1, #fe841b));
  --accb-accent2: var(--awcai-accent-alt, var(--ctl-c2, #ff9900));

  --accb-text:  var(--text-high, rgba(255,255,255,.92));
  --accb-muted: var(--text-med,  rgba(255,255,255,.68));
  --accb-dim:   var(--text-low,  rgba(255,255,255,.50));

  --accb-bg:      var(--surface-0, #0f1115);
  --accb-surface: var(--surface-1, rgba(255,255,255,.035));
  --accb-surface2:var(--surface-2, rgba(255,255,255,.055));
  --accb-border:  var(--border-1, rgba(255,255,255,.10));

  --accb-radius: 14px;
  --accb-radius-sm: 10px;
  --accb-gap: 10px;
  --accb-gap-lg: 12px;
  --accb-shadow: 0 8px 20px rgba(0,0,0,.28);

  --accb-accent-ink: #111;
  --accb-ring: color-mix(in srgb, var(--accb-accent) 28%, transparent);

  color: var(--accb-text);
}
.accb-portal *{ box-sizing: border-box; }

.accb-portal .accb-panel{
  background: linear-gradient(180deg, var(--accb-surface2), var(--accb-surface));
  border: 1px solid var(--accb-border);
  border-radius: var(--accb-radius);
  box-shadow: var(--accb-shadow);
  overflow: hidden;
  position: relative;
}
.accb-portal .accb-panel::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 2px;
  background: linear-gradient(90deg, var(--accb-accent), var(--accb-accent2));
  opacity: .9;
}
.accb-portal .accb-panel__header{
  padding: 12px 14px;
  border-bottom: 1px solid var(--accb-border);
  background: color-mix(in srgb, var(--accb-surface) 72%, transparent);
}
.accb-portal .accb-panel__title{
  margin: 0;
  font-size: 13px;
  letter-spacing: .2px;
  line-height: 1.25;
}
.accb-portal .accb-panel__subtitle{
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--accb-muted);
}

.accb-portal .accb-input,
.accb-portal input.accb-input,
.accb-portal textarea.accb-input{
  width: 100%;
  border-radius: var(--accb-radius-sm);
  border: 1px solid color-mix(in srgb, var(--accb-border) 85%, transparent);
  background: color-mix(in srgb, var(--accb-bg) 68%, #000 32%);
  color: var(--accb-text);
  padding: 8px 10px;
  outline: none;
  line-height: 1.3;
}
.accb-portal .accb-input::placeholder{ color: var(--accb-dim); }
.accb-portal .accb-input:focus{
  border-color: color-mix(in srgb, var(--accb-accent) 40%, var(--accb-border));
  box-shadow: 0 0 0 3px var(--accb-ring);
}

.accb-portal .accb-button{
  border: 1px solid color-mix(in srgb, var(--accb-border) 90%, transparent);
  background: color-mix(in srgb, var(--accb-surface2) 80%, transparent);
  color: var(--accb-text);
  border-radius: var(--accb-radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}
.accb-portal .accb-button:hover{
  background: color-mix(in srgb, var(--accb-surface2) 92%, transparent);
  border-color: color-mix(in srgb, var(--accb-border) 110%, transparent);
}
.accb-portal .accb-button:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--accb-ring);
}
.accb-portal .accb-button--primary{
  background: color-mix(in srgb, var(--accb-accent) 86%, #000 14%);
  border-color: color-mix(in srgb, var(--accb-accent) 70%, transparent);
  color: var(--accb-accent-ink);
  font-weight: 700;
}
.accb-portal .accb-button--primary:hover{
  background: color-mix(in srgb, var(--accb-accent) 92%, #000 8%);
}
.accb-portal .accb-button--small{
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 12px;
}

/* =============================================================================
 * Global spacing helpers
 * ============================================================================= */
.accb-portal{
  display: flex;
  flex-direction: column;
  gap: var(--accb-gap-lg);
}
.accb-portal .accb-row{ margin: 0; }

.accb-portal .accb-help{
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--accb-muted);
}
.accb-portal .accb-muted{ color: var(--accb-muted); }
.accb-portal .accb-dim{ color: var(--accb-dim); }

/* =============================================================================
 * CUSTOMER STRIP (3 cards) — tighten and make it wrap nicely
 * ============================================================================= */
.accb-customer-strip{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: var(--accb-gap);
  padding: 12px 14px;
}
@media (max-width: 1100px){
  .accb-customer-strip{ grid-template-columns: 1fr; }
}

.accb-customer-card{
  border: 1px solid color-mix(in srgb, var(--accb-border) 90%, transparent);
  border-radius: var(--accb-radius);
  background: color-mix(in srgb, var(--accb-surface2) 78%, transparent);
  overflow: hidden;
}
.accb-customer-card__header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--accb-border);
  background: color-mix(in srgb, var(--accb-surface) 72%, transparent);
}
.accb-customer-card__title{
  margin:0;
  font-size: 12.5px;
  letter-spacing: .2px;
}
.accb-customer-card__badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--accb-muted);
}

.accb-card-body--view,
.accb-card-body--edit{
  padding: 10px 12px;
}
.accb-card-body--view p{
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--accb-muted);
}
.accb-card-body--view .accb-card-line-strong{
  color: var(--accb-text);
  font-weight: 650;
  margin-bottom: 6px;
}

.accb-field{ margin: 0 0 10px; }
.accb-label{
  display:block;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--accb-muted);
}
.accb-field--split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--accb-gap);
}
@media (max-width: 520px){
  .accb-field--split{ grid-template-columns: 1fr; }
}

.accb-customer-form__actions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--accb-gap);
  padding: 12px 14px;
  border-top: 1px solid var(--accb-border);
}
.accb-customer-form__status{
  min-height: 18px;
  font-size: 12px;
  color: var(--accb-muted);
}

/* =============================================================================
 * SEARCH ROW (single row)
 * ============================================================================= */
.accb-search--row{
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--accb-gap);
  align-items: start;
}
@media (max-width: 900px){
  .accb-search--row{ grid-template-columns: 1fr; }
}

.accb-search__meta{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: wrap;
}

.accb-search__results{
  grid-column: 1 / -1;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: var(--accb-gap);
}
@media (max-width: 1100px){
  .accb-search__results{ grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 680px){
  .accb-search__results{ grid-template-columns: 1fr; }
}

/* If your JS injects .accb-product-card, give it a compact card style */
.accb-product-card{
  border: 1px solid color-mix(in srgb, var(--accb-border) 90%, transparent);
  border-radius: var(--accb-radius);
  background: color-mix(in srgb, var(--accb-surface2) 75%, transparent);
  padding: 10px 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.accb-product-card__title{
  font-size: 12.5px;
  margin: 0;
  color: var(--accb-text);
}
.accb-product-card__meta{
  font-size: 12px;
  color: var(--accb-muted);
}
.accb-product-card__actions{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}

/* =============================================================================
 * CART ROW (single row) — expects your JS cart rows under #accb-cart-items
 * ============================================================================= */
.accb-cart--row{
  padding: 12px 14px;
}

#accb-cart-items{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.accb-cart-row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accb-border) 90%, transparent);
  border-radius: var(--accb-radius-sm);
  background: color-mix(in srgb, var(--accb-surface2) 70%, transparent);
}
@media (max-width: 720px){
  .accb-cart-row{
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.accb-cart-row__name{
  font-size: 12.5px;
  color: var(--accb-text);
  line-height: 1.25;
}
.accb-cart-row__sub{
  font-size: 12px;
  color: var(--accb-muted);
  margin-top: 2px;
}
.accb-cart-row__qty{
  display:flex;
  gap: 6px;
  align-items:center;
  justify-content:flex-end;
}
.accb-cart-row__price{
  font-size: 12px;
  color: var(--accb-muted);
  justify-self: end;
}
@media (max-width: 720px){
  .accb-cart-row__qty,
  .accb-cart-row__price{ justify-content:flex-start; justify-self: start; }
}

.accb-cart__notice{
  margin-top: 10px;
  font-size: 12px;
  color: var(--accb-muted);
  min-height: 16px;
}

/* =============================================================================
 * NOTES ROW
 * ============================================================================= */
.accb-notes{
  padding: 12px 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

/* =============================================================================
 * CHECKOUT GRID (3 columns desktop, stacked mobile)
 * ============================================================================= */
.accb-checkout{
  padding: 12px 14px;
}

.accb-checkout__grid{
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.05fr) minmax(300px, 1.15fr);
  gap: var(--accb-gap-lg);
  align-items: start;
}

@media (max-width: 1100px){
  .accb-checkout__grid{
    grid-template-columns: 1fr;
  }
}

.accb-box{
  border: 1px solid color-mix(in srgb, var(--accb-border) 90%, transparent);
  border-radius: var(--accb-radius);
  background: color-mix(in srgb, var(--accb-surface2) 78%, transparent);
  overflow: hidden;
}

.accb-box__header{
  padding: 10px 12px;
  border-bottom: 1px solid var(--accb-border);
  background: color-mix(in srgb, var(--accb-surface) 72%, transparent);
}
.accb-box__title{
  margin:0;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: var(--accb-text);
}
.accb-box__body{
  padding: 10px 12px;
}

/* Inline input + button */
.accb-inline{
  display:flex;
  gap: 8px;
  align-items:center;
}
.accb-inline > .accb-input{ flex: 1 1 auto; }
.accb-inline > .accb-button{ white-space: nowrap; }

/* =============================================================================
 * Hide Woo cart line-items in order review, keep totals + payment + button
 * (This is the “compact checkout” look you asked for.)
 * ============================================================================= */
.accb-checkout__order .woocommerce-checkout-review-order-table tbody{
  display: none !important;
}

/* Keep footer totals tight */
.accb-checkout__order .woocommerce-checkout-review-order-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.accb-checkout__order .woocommerce-checkout-review-order-table th,
.accb-checkout__order .woocommerce-checkout-review-order-table td{
  padding: 8px 0;
  border: 0;
}
.accb-checkout__order .woocommerce-checkout-review-order-table tfoot tr + tr th,
.accb-checkout__order .woocommerce-checkout-review-order-table tfoot tr + tr td{
  border-top: 1px solid color-mix(in srgb, var(--accb-border) 75%, transparent);
}

/* Order total emphasis */
.accb-checkout__order .woocommerce-checkout-review-order-table .order-total th,
.accb-checkout__order .woocommerce-checkout-review-order-table .order-total td{
  padding-top: 10px;
  font-size: 13px;
  color: var(--accb-text);
}
.accb-checkout__order .woocommerce-checkout-review-order-table .order-total td strong{
  font-weight: 800;
}

/* Shipping methods compact */
.accb-box--shipping ul#shipping_method{
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.accb-box--shipping ul#shipping_method li{
  padding: 10px 10px;
  border: 1px solid color-mix(in srgb, var(--accb-border) 85%, transparent);
  border-radius: var(--accb-radius-sm);
  background: color-mix(in srgb, var(--accb-surface2) 72%, transparent);
}
.accb-box--shipping ul#shipping_method label{
  font-size: 12px;
  color: var(--accb-text);
}
.accb-box--shipping ul#shipping_method small{
  color: var(--accb-muted);
}

/* Payment methods compact */
.accb-checkout__order #payment{
  background: transparent;
  border: 0;
}
.accb-checkout__order #payment ul.payment_methods{
  list-style:none;
  margin: 10px 0 0;
  padding: 0;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.accb-checkout__order #payment ul.payment_methods > li{
  padding: 10px 10px;
  border: 1px solid color-mix(in srgb, var(--accb-border) 85%, transparent);
  border-radius: var(--accb-radius-sm);
  background: color-mix(in srgb, var(--accb-surface2) 72%, transparent);
}
.accb-checkout__order #payment .payment_box{
  margin: 8px 0 0;
  padding: 10px;
  border-radius: var(--accb-radius-sm);
  background: color-mix(in srgb, var(--accb-bg) 55%, #000 45%);
  color: var(--accb-muted);
}

/* Place order button – force token styling even if theme overrides */
.accb-checkout__order #place_order,
.accb-checkout__order button#place_order,
.accb-checkout__order .place-order .button{
  width: 100%;
  border-radius: var(--accb-radius-sm) !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--accb-accent) 70%, transparent) !important;
  background: color-mix(in srgb, var(--accb-accent) 86%, #000 14%) !important;
  color: var(--accb-accent-ink) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: .2px;
}
.accb-checkout__order #place_order:hover{
  background: color-mix(in srgb, var(--accb-accent) 92%, #000 8%) !important;
}

/* Notices in checkout */
.accb-portal .woocommerce-error,
.accb-portal .woocommerce-message,
.accb-portal .woocommerce-info{
  margin: 10px 0 0;
  border-radius: var(--accb-radius);
  border: 1px solid color-mix(in srgb, var(--accb-border) 85%, transparent);
  background: color-mix(in srgb, var(--accb-surface2) 78%, transparent);
  color: var(--accb-text);
  padding: 10px 12px;
  font-size: 12px;
}

/* =============================================================================
 * Hidden Woo fields: keep them out of layout but present in DOM
 * ============================================================================= */
.accb-checkout__hidden-fields{
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =============================================================================
 * Sticky right column for big screens (optional)
 * ============================================================================= */
@media (min-width: 1101px){
  .accb-checkout__col--right{
    position: sticky;
    top: 16px;
  }
}