@layer components {
  /* ============================================================
   * Price Badge — inline expandable price widget
   * ============================================================ */

  .crtoday-price-badge {
    display: block;
    font-family: inherit;
    line-height: 1.4;
    position: relative;
  }

  /* ── Details / Summary reset ── */

  .crtoday-price-badge__details {
    display: inline;
  }

  /* Badge pill reuses .crtoday-card from shared/style.css for glass,
     shadow, accent, seamless, and theme — only layout overrides here. */

  .crtoday-price-badge__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--crtoday-space-8, 0.5rem);
    cursor: pointer;
    list-style: none;
    padding: var(--crtoday-space-10, 0.625rem) var(--crtoday-space-14, 0.875rem);
    user-select: none;
    -webkit-user-select: none;
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__summary {
    gap: var(--crtoday-space-6, 0.375rem);
    padding: var(--crtoday-space-8, 0.5rem) var(--crtoday-space-10, 0.625rem);
  }

  .crtoday-price-badge__summary::-webkit-details-marker {
    display: none;
  }

  .crtoday-price-badge__summary::marker {
    content: '';
  }

  /* Inline accent stripe inside the pill */
  .crtoday-price-badge__summary > .crtoday-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  /* ── Primary display ── */

  .crtoday-price-badge__primary {
    display: inline-flex;
    align-items: center;
    gap: var(--crtoday-space-4, 0.25rem);
  }

  .crtoday-price-badge__code {
    font-weight: 600;
    font-size: 1em;
    color: var(--crtoday-text-2, #475569);
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__code {
    font-size: 0.8125em;
  }

  .crtoday-price-badge__value {
    font-weight: 700;
    font-size: 1.1875em;
    color: var(--crtoday-text-1, #0f172a);
    font-variant-numeric: tabular-nums;
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__value {
    font-size: 0.9375em;
  }

  /* ── Flag images ── */

  .crtoday-price-badge__flag {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 0.0938rem solid var(--crtoday-flag-border, rgba(255, 255, 255, 0.55));
    box-shadow: var(--crtoday-flag-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
    flex-shrink: 0;
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__flag {
    width: var(--crtoday-space-20, 1.25rem);
    height: var(--crtoday-space-20, 1.25rem);
  }

  /* ── Chevron indicator ── */

  .crtoday-price-badge__chevron {
    display: inline-block;
    width: 0.625em;
    height: 0.625em;
    border-right: 2px solid var(--crtoday-text-3, #94a3b8);
    border-bottom: 2px solid var(--crtoday-text-3, #94a3b8);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-left: var(--crtoday-space-2, 0.125rem);
    flex-shrink: 0;
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__chevron {
    width: 0.5em;
    height: 0.5em;
  }

  .crtoday-price-badge__details[open] > .crtoday-price-badge__summary .crtoday-price-badge__chevron {
    transform: rotate(-135deg);
  }

  /* Hide chevron when always expanded */
  .crtoday-price-badge__toggle--always .crtoday-price-badge__chevron {
    display: none;
  }

  /* ── Expanded panel (positioning wrapper) ── */

  .crtoday-price-badge__panel {
    display: block;
    position: absolute;
    z-index: 10;
    top: calc(100% + var(--crtoday-space-4, 0.25rem));
    left: 0;
    min-width: 240px;
    animation: crtoday-price-badge-fadein 0.15s ease-out;
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__panel {
    min-width: 200px;
  }

  /* The .crtoday-card inside the panel inherits shared glass / shadow / radius
     from the base layer (src/blocks/shared/style.css).
     Override card-radius to match the badge's compact proportions. */

  .crtoday-price-badge__panel .crtoday-card {
    border-radius: var(--crtoday-card-radius, var(--crtoday-radius, 12px));
  }

  /* ── Rows area (padded content inside the card) ── */

  .crtoday-price-badge__rows {
    padding: var(--crtoday-space-10, 0.625rem) var(--crtoday-space-20, 1.25rem) 0;
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__rows {
    padding: var(--crtoday-space-8, 0.5rem) var(--crtoday-space-14, 0.875rem) 0;
  }

  @keyframes crtoday-price-badge-fadein {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── Converted currency rows ── */

  .crtoday-price-badge__row {
    display: flex;
    align-items: center;
    gap: var(--crtoday-space-8, 0.5rem);
    padding: var(--crtoday-space-6, 0.375rem) 0;
    border-bottom: 1px solid var(--crtoday-separator, rgba(148, 163, 184, 0.08));
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__row {
    gap: var(--crtoday-space-6, 0.375rem);
    padding: var(--crtoday-space-4, 0.25rem) 0;
  }

  .crtoday-price-badge__row:last-child {
    border-bottom: none;
  }

  .crtoday-price-badge__row .crtoday-price-badge__code {
    min-width: 2.5em;
  }

  .crtoday-price-badge__row .crtoday-price-badge__value {
    margin-left: auto;
  }

  /* ── Footer inside panel — uses shared .crtoday-footer
       with full-width border-top (edge-to-edge, no rows padding). ── */

  .crtoday-price-badge__panel .crtoday-footer {
    padding: var(--crtoday-space-8, 0.5rem) var(--crtoday-space-20, 1.25rem) var(--crtoday-space-8, 0.5rem);
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__panel .crtoday-footer {
    padding: var(--crtoday-space-6, 0.375rem) var(--crtoday-space-14, 0.875rem) var(--crtoday-space-6, 0.375rem);
  }

  .crtoday-price-badge__panel .crtoday-source-label {
    font-size: 0.6875rem;
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__panel .crtoday-source-label {
    font-size: 0.5625rem;
  }

  .crtoday-price-badge__panel .crtoday-verified-badge {
    width: var(--crtoday-space-16);
    height: var(--crtoday-space-16);
  }

  .crtoday-price-badge.crtoday-compact .crtoday-price-badge__panel .crtoday-verified-badge {
    width: var(--crtoday-space-14);
    height: var(--crtoday-space-14);
  }

  /* ── Always-expanded: static layout (no absolute) ── */

  .crtoday-price-badge--expanded .crtoday-price-badge__panel {
    position: static;
    margin-top: var(--crtoday-space-4, 0.25rem);
    animation: none;
  }

  .crtoday-price-badge--expanded .crtoday-price-badge__summary {
    cursor: default;
    pointer-events: none;
  }

  /* ── Full-width mode ── */

  .crtoday-price-badge:not(.crtoday-fit-width) {
    display: block;
    width: 100%;
  }

  .crtoday-price-badge:not(.crtoday-fit-width) .crtoday-price-badge__summary {
    display: flex;
    width: 100%;
  }

  .crtoday-price-badge:not(.crtoday-fit-width) .crtoday-price-badge__value {
    margin-left: auto;
  }

  .crtoday-price-badge:not(.crtoday-fit-width) .crtoday-price-badge__chevron {
    margin-left: auto;
  }

  .crtoday-price-badge:not(.crtoday-fit-width) .crtoday-price-badge__panel {
    width: 100%;
  }

  /* ── Dark / Auto theme — text & chevron tokens ──
     The pill's card-level styling (bg, border, shadow) comes from
     shared CSS vars overridden by .crtoday-theme-dark / .crtoday-theme-auto.
     Only text colors that aren't covered by the shared token set
     need per-component rules here. ── */

  .crtoday-price-badge.crtoday-theme-dark .crtoday-price-badge__chevron {
    border-color: #64748b;
  }

  @media (prefers-color-scheme: dark) {
    .crtoday-price-badge.crtoday-theme-auto .crtoday-price-badge__chevron {
      border-color: #64748b;
    }
  }

  /* ── Error / Empty states ── */

  .crtoday-price-badge.crtoday-state-error .crtoday-price-badge__value,
  .crtoday-price-badge.crtoday-state-empty .crtoday-price-badge__value {
    color: var(--crtoday-text-3, #94a3b8);
  }
}
