/**
 * Customer-facing option cards.
 *
 * The child theme already styles .prismat-po-card and its radio rows, and the
 * plugin reuses those class names so its questions sit with the rest of the
 * product options rather than looking bolted on. Only what the theme has no
 * rule for is defined here, so a theme restyle carries the plugin with it.
 */

.prismat-po__addon-help {
	margin: -4px 0 10px;
	font-size: 13px;
	line-height: 1.4;
	opacity: 0.75;
}

/* The asterisk marking a question that has to be answered. */
.prismat-po__req {
	margin-left: 2px;
	border: 0;
	color: #b3261e;
	text-decoration: none;
	cursor: help;
}

/* Checkbox answers wrap the same way the radio ones do. */
.prismat-po-card--addon input[type="checkbox"] {
	margin: 0;
	flex: 0 0 auto;
}

/*
 * Fallback for a theme that does not style the option cards. Scoped to cards
 * the plugin renders, and only where the theme has left them unstyled, so it
 * never fights a theme that does.
 */
.prismat-po-card--addon:not([class*="prismat-po-card "]) {
	padding: 16px 18px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background-color: #fafafa;
}

.prismat-po-card--addon [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Picture swatches.

   The control itself is taken out of the layout rather than hidden with
   display:none, so it stays focusable and reachable by keyboard; the visible
   selected state is drawn on the label instead.
   --------------------------------------------------------------------------- */
.prismat-po__addon-options--swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prismat-po__swatch {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}

.prismat-po__swatch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.prismat-po__swatch-img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}

.prismat-po__swatch:hover {
  border-color: #bdbdbd;
}

.prismat-po__swatch:has(input:checked) {
  border-color: #222;
  box-shadow: inset 0 0 0 1px #222;
}

/* Keyboard focus has to remain visible with the control clipped away. */
.prismat-po__swatch:focus-within {
  outline: 2px solid #2f6fed;
  outline-offset: 2px;
}

.prismat-po__select {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   The lines shown under whichever answer is chosen.

   Deliberately the same shape as the theme's own same-day conditions, so a
   delivery option configured here looks like the one it replaces rather than
   announcing that it came from somewhere else.
   --------------------------------------------------------------------------- */
.prismat-po__notes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ececec;
}

.prismat-po__note-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.prismat-po__note-list li {
  margin: 0 0 4px;
}

.prismat-po__note-list li:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   A question ruled out by what else has been chosen.

   It stays on the page, greyed, with the reason underneath: a control that
   simply stopped working would leave the customer wondering what they did.
   --------------------------------------------------------------------------- */
.prismat-po-card--addon.is-blocked .prismat-po__addon-label,
.prismat-po-card--addon.is-blocked .prismat-po__addon-options,
.prismat-po-card--addon.is-blocked .prismat-po__addon-help {
  opacity: 0.45;
}

.prismat-po-card--addon.is-blocked .prismat-po__radio {
  cursor: not-allowed;
}

.prismat-po__addon-blocked {
  margin: 8px 0 0;
  font-size: 13px;
  color: #8a6d3b;
}

/* ---------------------------------------------------------------------------
   The price ladder: what a unit costs as the quantity climbs.

   Quiet until the customer reaches a band, then that row is marked - so the
   table reads as a promise being kept rather than a price list.
   --------------------------------------------------------------------------- */
.prismat-po-ladder {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fafafa;
}

.prismat-po-ladder__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 14px;
}

.prismat-po-ladder__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.prismat-po-ladder__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.prismat-po-ladder__row span { color: #666; }

.prismat-po-ladder__row.is-active {
  background: #e8f5ee;
  color: #1d6f42;
}

.prismat-po-ladder__row.is-active span,
.prismat-po-ladder__row.is-active strong { color: #1d6f42; }

.prismat-po-ladder__moq {
  margin: 8px 0 0;
  font-size: 13px;
  color: #8a6438;
}

/* What the quantity just saved, beside the total it applies to. */
.prismat-po-total__saved {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: #1d6f42;
}

.prismat-po-total__saved[hidden] { display: none; }