/* Lens Configuration summary block — used on cart, mini-cart, checkout review,
 * admin order edit screen, and customer account order details. Email rendering
 * uses inline styles (see templates/lens-summary-email.php).
 *
 * NOTE: every inner selector is scoped under `.olc-lens-summary` to bump
 * specificity above WC admin (`.wc-order-item-meta`) and theme styles that
 * otherwise override the table cells. */

.olc-lens-summary {
  margin: 12px 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  font-family: inherit;
  font-size: 13px;
  color: #1e293b;
  background: #fff;
  box-sizing: border-box;
}

.olc-lens-summary .olc-lens-summary__title {
  background: #f1f5f9;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}

.olc-lens-summary .olc-lens-summary__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
  table-layout: auto;
}

.olc-lens-summary .olc-lens-summary__table th,
.olc-lens-summary .olc-lens-summary__table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
  vertical-align: top;
  text-align: left;
  background: transparent;
  line-height: 1.5;
}

.olc-lens-summary .olc-lens-summary__table th {
  font-weight: 600;
  color: #475569;
  width: 40%;
  white-space: nowrap;
}

.olc-lens-summary .olc-lens-summary__table td {
  color: #1e293b;
}

.olc-lens-summary .olc-lens-summary__table tr:last-child th,
.olc-lens-summary .olc-lens-summary__table tr:last-child td {
  border-bottom: 0;
}

.olc-lens-summary .olc-lens-summary__sub th {
  background: #f8fafc;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  font-weight: 700;
  padding: 8px 14px !important;
  width: auto;
}

.olc-lens-summary .olc-lens-summary__total th {
  color: #dc2626;
}
.olc-lens-summary .olc-lens-summary__total td {
  color: #dc2626;
  font-weight: 700;
}

.olc-lens-summary a {
  color: #0f766e;
  text-decoration: underline;
}
.olc-lens-summary a:hover { color: #0d5e58; }

/* Mini-cart: compact layout for narrow widget popovers (Woohoo/Phox/default). */
.olc-lens-summary--mini-cart {
  margin: 6px 0;
  font-size: 12px;
}
.olc-lens-summary--mini-cart .olc-lens-summary__title { padding: 6px 10px; font-size: 11px; }
.olc-lens-summary--mini-cart .olc-lens-summary__table th,
.olc-lens-summary--mini-cart .olc-lens-summary__table td { padding: 6px 10px !important; font-size: 12px; }
.olc-lens-summary--mini-cart .olc-lens-summary__table th { width: 45%; }

/* Admin order screen: inherit dashboard sans-serif. */
.olc-lens-summary--admin {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Compact text layout — used ONLY on cart, mini-cart, and checkout review.
 * Other surfaces (my-account, order-received, admin) use .olc-lens-summary above.
 * --------------------------------------------------------------------------- */
.olc-cart-summary {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  color: #1e293b;
  background: #fff;
  box-sizing: border-box;
}
.olc-cart-summary .olc-cart-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.olc-cart-summary .olc-cart-summary__title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.olc-cart-summary .olc-cart-summary__sub-title {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 2px;
}
.olc-cart-summary .olc-cart-summary__addon {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  text-align: right;
}
.olc-cart-summary .olc-cart-summary__addon .amount,
.olc-cart-summary .olc-cart-summary__addon bdi { color: inherit; font-weight: inherit; }
.olc-cart-summary .olc-cart-summary__lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #475569;
}
.olc-cart-summary .olc-cart-summary__lines > div { color: inherit; }
.olc-cart-summary .olc-cart-summary__rx {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.olc-cart-summary .olc-cart-summary__rx-line {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}
.olc-cart-summary a {
  color: #0f766e;
  text-decoration: underline;
}
.olc-cart-summary a:hover { color: #0d5e58; }

/* Mini-cart popover: strip framing so the summary flows in the modal cell,
 * same treatment as cart + checkout below. Typography is set centrally in the
 * unified typography block further down. */
.olc-cart-summary--mini-cart {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Cart + Checkout review: strip the card framing so the summary blends into
 * the host cell. Inner head divider + spacing stay intact for hierarchy. */
.olc-cart-summary--cart,
.olc-cart-summary--checkout {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Cart + Checkout + Mini-cart — typography-led layout.
 * Theme variation styles (Breakdance 10px / tight line-height / per-token
 * padding) otherwise bleed through and squash the summary. Lock typography
 * explicitly so the summary reads as deliberate content, not theme noise.
 *
 * Visual hierarchy is carried by color + spacing + hairline rules — no card
 * framing, no left-accent strips. Brand teal (matches trigger button) is the
 * single accent, used on three anchors: the leading dot, the lens title, and
 * the "Dioptrija" eyebrow above the Rx block.
 *
 * Email surface unaffected — templates/lens-summary-email.php uses its own
 * inline-styled table and is rendered independently. */
.olc-cart-summary--cart,
.olc-cart-summary--checkout,
.olc-cart-summary--mini-cart {
  font-size: 11px;
  line-height: 1.6;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.olc-cart-summary--cart .olc-cart-summary__head,
.olc-cart-summary--checkout .olc-cart-summary__head,
.olc-cart-summary--mini-cart .olc-cart-summary__head {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #ececec;
}

.olc-cart-summary--cart .olc-cart-summary__title,
.olc-cart-summary--checkout .olc-cart-summary__title,
.olc-cart-summary--mini-cart .olc-cart-summary__title {
  font-size: 12px;
  font-weight: 500;
  color: #003E3D;
  letter-spacing: 0.04em;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 7px;
}
.olc-cart-summary--cart .olc-cart-summary__title::before,
.olc-cart-summary--checkout .olc-cart-summary__title::before,
.olc-cart-summary--mini-cart .olc-cart-summary__title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8ADAD8;
  flex-shrink: 0;
}

.olc-cart-summary--cart .olc-cart-summary__sub-title,
.olc-cart-summary--checkout .olc-cart-summary__sub-title,
.olc-cart-summary--mini-cart .olc-cart-summary__sub-title {
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  margin-left: 13px;
  line-height: 1.3;
}

.olc-cart-summary--cart .olc-cart-summary__addon,
.olc-cart-summary--checkout .olc-cart-summary__addon,
.olc-cart-summary--mini-cart .olc-cart-summary__addon {
  font-size: 12px;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.olc-cart-summary--cart .olc-cart-summary__addon .amount,
.olc-cart-summary--cart .olc-cart-summary__addon bdi,
.olc-cart-summary--checkout .olc-cart-summary__addon .amount,
.olc-cart-summary--checkout .olc-cart-summary__addon bdi,
.olc-cart-summary--mini-cart .olc-cart-summary__addon .amount,
.olc-cart-summary--mini-cart .olc-cart-summary__addon bdi {
  color: inherit;
  font-weight: inherit;
}

.olc-cart-summary--cart .olc-cart-summary__lines,
.olc-cart-summary--checkout .olc-cart-summary__lines,
.olc-cart-summary--mini-cart .olc-cart-summary__lines {
  gap: 2px;
}
.olc-cart-summary--cart .olc-cart-summary__lines > div,
.olc-cart-summary--checkout .olc-cart-summary__lines > div,
.olc-cart-summary--mini-cart .olc-cart-summary__lines > div {
  font-size: 11px;
  line-height: 1.6;
  color: #6b7280;
  padding: 0;
  margin: 0;
}

.olc-cart-summary--cart .olc-cart-summary__rx,
.olc-cart-summary--checkout .olc-cart-summary__rx,
.olc-cart-summary--mini-cart .olc-cart-summary__rx {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #ececec;
  gap: 3px;
}
/* "Dioptrija" eyebrow — hardcoded Croatian label (site is HR-only). If the
 * plugin ever needs i18n on this string, this pseudo content has to be
 * replaced with a template-rendered heading and the rule removed. */
.olc-cart-summary--cart .olc-cart-summary__rx::before,
.olc-cart-summary--checkout .olc-cart-summary__rx::before,
.olc-cart-summary--mini-cart .olc-cart-summary__rx::before {
  content: "Dioptrija";
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #003E3D;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1;
}
.olc-cart-summary--cart .olc-cart-summary__rx-line,
.olc-cart-summary--checkout .olc-cart-summary__rx-line,
.olc-cart-summary--mini-cart .olc-cart-summary__rx-line {
  font-size: 11px;
  line-height: 1.55;
  color: #1f2937;
  padding: 0;
  margin: 0;
}

/* WC injects an empty-key <dt class="variation-">:</dt> ahead of every
 * variation entry. Our summary supplies its own title, so the bare colon is
 * noise — hide it across all surfaces where the summary appears. */
dl.variation dt.variation- {
  display: none !important;
}

/* Cart + Checkout review row cells: top-align so the summary (taller content)
 * doesn't push price/qty/subtotal to vertical center. */
.woocommerce-cart-form table.cart tr.cart_item td,
.woocommerce-checkout-review-order-table tr.cart_item td {
  vertical-align: top;
}

/* Override Breakdance theme: it sets `word-break: break-all` on variation
 * lists which splits words mid-letter. Restore normal wrapping. */
.breakdance-woocommerce dl.variation,
.breakdance-woocommerce dl.variation dt,
.breakdance-woocommerce dl.variation dd,
.bde-mini-cart .variation,
.bde-mini-cart .variation dt,
.bde-mini-cart .variation dd {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Admin order screen — Rx file action affordances.
 * Delete link uses WP core .submitdelete styling (red text). The (deleted)
 * paper-trail indicator stays muted/grey: it's an informational status, not
 * a destructive action — should not visually compete with the View link. */
.olc-rx-delete.submitdelete {
  color: #b32d2e;
}
.olc-rx-delete.submitdelete:hover {
  color: #8c0000;
}
.olc-rx-status--deleted {
  color: #757575;
  font-style: italic;
  font-size: 0.92em;
}