/* ==========================================================================
   Bulk Orders — page-specific styles (tokens only, no hard-coded colors)
   Loaded AFTER app.css on bulk.html only.
   Adds the 3-up "benefit" cards under the request form.
   ========================================================================== */

.bulk-benefits{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-4);
  margin-top:var(--sp-6);
}
@media (max-width:640px){
  .bulk-benefits{ grid-template-columns:1fr; }
}

.bulk-benefit{
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-5);
  box-shadow:var(--glass-sheen), var(--sh-1);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.bulk-benefit:hover{
  transform:translateY(-3px);
  box-shadow:var(--glass-sheen), var(--sh-2);
}

.bulk-benefit .ic{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:var(--r-md);
  color:var(--blue-500);
  background:var(--blue-50);
  margin-bottom:var(--sp-3);
}
.bulk-benefit .ic svg{ width:24px; height:24px; }

.bulk-benefit h3{
  font-size:1.02rem;
  margin-bottom:6px;
}
.bulk-benefit p{
  color:var(--muted);
  font-size:.92rem;
  margin:0;
}

/* Success confirmation state */
.bulk-success{ text-align:center; }
.bulk-success h2{ margin:var(--sp-2) 0 var(--sp-3); }
.bulk-success .lead{ margin-inline:auto; }
.bulk-success .btn{ margin-top:var(--sp-5); }