/**
 * ELV8 Protocol Builder styles.
 * Targets the dark/blue brand aesthetic from the existing site.
 * Scoped under .elv8-builder so it won't leak into the rest of the theme.
 */

.elv8-builder {
  --elv8-bg-dark:    #0a1628;
  --elv8-bg-card:    #0f1d33;
  --elv8-blue:       #2b5fb8;
  --elv8-blue-hi:    #3b7ae0;
  --elv8-text:       #e8eef7;
  --elv8-text-dim:   #94a3b8;
  --elv8-border:     #1e2f4d;
  --elv8-success:    #10b981;
  --elv8-error:      #f87171;

  max-width: 880px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: var(--elv8-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
}

.elv8-builder.elv8-loading {
  text-align: center;
  padding: 3rem;
  color: var(--elv8-text-dim);
}

/* ── Step container ─────────────────────────────────────────────────── */
.elv8-step {
  background: var(--elv8-bg-card);
  border: 1px solid var(--elv8-border);
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.elv8-step-num {
  position: absolute;
  top: -14px;
  left: 1.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--elv8-blue);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.elv8-step h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--elv8-text);
}

/* ── Option grid (GLP, durations) ───────────────────────────────────── */
.elv8-options {
  display: grid;
  gap: 0.75rem;
}
.elv8-options-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 600px) {
  .elv8-options-3 { grid-template-columns: 1fr; }
  /* Extra row-gap when stacked so the .elv8-tag floating at top: -10px
     doesn't overlap the option above it. */
  .elv8-options { gap: 1.5rem; }
}

.elv8-option {
  background: var(--elv8-bg-dark);
  border: 2px solid var(--elv8-border);
  border-radius: 10px;
  padding: 1rem 0.75rem;
  color: var(--elv8-text);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  text-align: center;
}

.elv8-option:hover { border-color: var(--elv8-blue); }
.elv8-option.is-selected {
  background: linear-gradient(180deg, rgba(43, 95, 184, 0.25), rgba(43, 95, 184, 0.1));
  border-color: var(--elv8-blue-hi);
}

.elv8-option-label {
  font-weight: 600;
  font-size: 1rem;
}

.elv8-option-price {
  font-size: 0.85rem;
  color: var(--elv8-text-dim);
}

.elv8-option.has-tag { padding-top: 1.5rem; }

.elv8-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--elv8-blue-hi);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Summary panel ──────────────────────────────────────────────────── */
.elv8-summary-blurb {
  color: var(--elv8-text-dim);
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
}

.elv8-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  border-top: 1px solid var(--elv8-border);
}

.elv8-includes li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--elv8-border);
  font-size: 0.95rem;
  line-height: 1.4;
}

.elv8-includes-label {
  color: var(--elv8-text);
  font-weight: 600;
  margin-right: 0.4rem;
}

.elv8-includes-value {
  color: var(--elv8-text-dim);
}

/* WC short description on includes rows. Pulled from the product's
   "Product short description" field via /product-variations endpoint.
   Multi-paragraph HTML so it needs tight paragraph spacing. */
.elv8-includes-shortdesc {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.85rem;
  color: var(--elv8-text-dim);
  line-height: 1.4;
}
.elv8-includes-shortdesc p {
  margin: 0 0 0.2rem 0;
}
.elv8-includes-shortdesc p:last-child {
  margin-bottom: 0;
}
.elv8-includes-shortdesc strong,
.elv8-includes-shortdesc b {
  color: var(--elv8-text);
  font-weight: 600;
}
.elv8-includes-shortdesc ul,
.elv8-includes-shortdesc ol {
  margin: 0.2rem 0;
  padding-left: 1.1rem;
}

/* ── Tesamorelin toggle ─────────────────────────────────────────────── */
.elv8-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  background: var(--elv8-bg-dark);
  border: 2px solid var(--elv8-border);
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.elv8-toggle:hover { border-color: var(--elv8-blue); }
.elv8-toggle.is-on {
  background: linear-gradient(180deg, rgba(43, 95, 184, 0.2), rgba(43, 95, 184, 0.05));
  border-color: var(--elv8-blue-hi);
}

.elv8-toggle input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  accent-color: var(--elv8-blue-hi);
  cursor: pointer;
  flex-shrink: 0;
}

.elv8-toggle-content {
  flex: 1;
  min-width: 0;
}

.elv8-toggle-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: 0.25rem;
}

.elv8-toggle-header strong {
  font-size: 0.95rem;
}

.elv8-toggle-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--elv8-text-dim);
  line-height: 1.4;
}

.elv8-toggle-price {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--elv8-blue-hi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Add-ons ────────────────────────────────────────────────────────── */
.elv8-addons-subtitle {
  color: var(--elv8-text-dim);
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
}

.elv8-addons {
  display: grid;
  gap: 0.625rem;
}

.elv8-addon {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  background: var(--elv8-bg-dark);
  border: 2px solid var(--elv8-border);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.elv8-addon:hover { border-color: var(--elv8-blue); }
.elv8-addon.is-selected {
  background: linear-gradient(180deg, rgba(43, 95, 184, 0.2), rgba(43, 95, 184, 0.05));
  border-color: var(--elv8-blue-hi);
}

.elv8-addon input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  accent-color: var(--elv8-blue-hi);
  cursor: pointer;
  flex-shrink: 0;
}

.elv8-addon-content {
  flex: 1;
  min-width: 0;
}

.elv8-addon-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: 0.25rem;
}

.elv8-addon-header strong {
  font-size: 0.95rem;
}

.elv8-addon-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--elv8-text-dim);
  line-height: 1.4;
}

/* HTML variant (rendered from WC short description, can contain multiple
   paragraphs, lists, bold). Tighten paragraph spacing and surface strong
   tags so dosage/usage lines read cleanly. */
.elv8-addon-desc-html p {
  margin: 0 0 0.25rem 0;
}
.elv8-addon-desc-html p:last-child {
  margin-bottom: 0;
}
.elv8-addon-desc-html strong,
.elv8-addon-desc-html b {
  color: var(--elv8-text);
  font-weight: 600;
}
.elv8-addon-desc-html ul,
.elv8-addon-desc-html ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

.elv8-addon-price {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--elv8-blue-hi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── CTA bar (sticky-ish total + add button) ────────────────────────── */
.elv8-cta-bar {
  background: var(--elv8-bg-card);
  border: 1px solid var(--elv8-border);
  border-radius: 12px;
  padding: 1.25rem 1.75rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.elv8-total {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.elv8-total-label {
  color: var(--elv8-text-dim);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.elv8-total-amount {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--elv8-text);
  font-variant-numeric: tabular-nums;
}

.elv8-add-btn {
  background: var(--elv8-blue-hi);
  color: white;
  border: 0;
  padding: 0.875rem 1.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}

.elv8-add-btn:hover:not(:disabled) {
  background: #4a8aef;
  transform: translateY(-1px);
}

.elv8-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.elv8-error {
  color: var(--elv8-error);
  font-size: 0.875rem;
  margin: 0.5rem 0 0 0;
  width: 100%;
}

/* Warning shown next to Finalize when incomplete selections exist —
   visually distinct from a fatal error (orange-ish, not red). */
.elv8-incomplete-warning {
  color: #f59e0b;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.5rem 0 0 0;
  width: 100%;
  text-align: center;
}

/* ── Mobile CTA bar ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .elv8-cta-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem;
    gap: 0.875rem;
  }

  .elv8-total {
    justify-content: space-between;
    width: 100%;
  }

  .elv8-add-btn {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
  }
}

/* ── Top-level tier toggle (above the numbered steps) ───────────────── */
.elv8-tier-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  padding: 0.5rem;
  background: var(--elv8-bg-card);
  border: 1px solid var(--elv8-border);
  border-radius: 999px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .elv8-tier-toggle {
    width: 100%;
    border-radius: 12px;
    flex-direction: column;
    gap: 0.375rem;
  }
}

.elv8-tier-toggle-btn {
  position: relative;
  background: transparent;
  border: 0;
  color: var(--elv8-text-dim);
  padding: 0.625rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .elv8-tier-toggle-btn { border-radius: 8px; padding: 0.75rem 1rem; }
}

.elv8-tier-toggle-btn:hover:not(:disabled) {
  color: var(--elv8-text);
}

.elv8-tier-toggle-btn.is-selected {
  background: var(--elv8-blue-hi);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 122, 224, 0.35);
}

.elv8-tier-toggle-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.elv8-tier-toggle-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
}

.elv8-tier-toggle-btn:not(.is-selected) .elv8-tier-toggle-tag {
  background: rgba(59, 122, 224, 0.18);
  color: var(--elv8-blue-hi);
}

.elv8-tier-toggle-soon {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--elv8-text-dim);
}

/* ── Tier comparison cards (LEGACY — kept for reference, no longer used) ── */
.elv8-tier-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 720px) {
  .elv8-tier-cards { grid-template-columns: 1fr; }
}

.elv8-tier-card {
  position: relative;
  background: var(--elv8-bg-dark);
  border: 2px solid var(--elv8-border);
  border-radius: 12px;
  padding: 1.5rem 1.25rem 1.25rem;
  color: var(--elv8-text);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.elv8-tier-card:hover:not(.is-disabled) {
  border-color: var(--elv8-blue);
  transform: translateY(-1px);
}

.elv8-tier-card.is-selected {
  background: linear-gradient(180deg, rgba(43, 95, 184, 0.25), rgba(43, 95, 184, 0.08));
  border-color: var(--elv8-blue-hi);
  box-shadow: 0 0 0 3px rgba(59, 122, 224, 0.15);
}

.elv8-tier-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.elv8-tier-card.has-tag { padding-top: 1.75rem; }

.elv8-tier-card-label {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--elv8-text);
}

.elv8-tier-card-includes {
  flex: 1;
}

.elv8-tier-card-includes-title {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--elv8-text-dim);
  margin-bottom: 0.5rem;
}

.elv8-tier-card-includes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.elv8-tier-card-includes li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-size: 0.9rem;
  color: var(--elv8-text);
}

.elv8-tier-card-includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--elv8-blue-hi);
  font-weight: 700;
}

.elv8-tier-card-soon {
  position: absolute;
  bottom: 0.875rem;
  right: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--elv8-text-dim);
  background: var(--elv8-bg-card);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--elv8-border);
}

/* ── Add-on groups (themed sub-sections in Stage 2) ─────────────────── */
.elv8-addon-group {
  margin-top: 1.5rem;
}

.elv8-addon-group:first-child { margin-top: 0; }

.elv8-addon-group-label {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--elv8-blue-hi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.elv8-addon-group-microcopy {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--elv8-text-dim);
}

.elv8-addon-group-global {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--elv8-border);
}

/* ── Notice / disclosure box (e.g., Epithalon disclosure) ───────────── */
.elv8-notice {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(43, 95, 184, 0.12);
  border: 1px solid var(--elv8-blue);
  border-left-width: 3px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--elv8-text);
  line-height: 1.5;
}

.elv8-notice strong {
  color: var(--elv8-blue-hi);
  font-weight: 700;
}

/* ── GLP cards (with select + expandable details) ───────────────────── */
.elv8-glp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}

@media (max-width: 720px) {
  .elv8-glp-cards { grid-template-columns: 1fr; }
}

.elv8-glp-card {
  background: var(--elv8-bg-dark);
  border: 2px solid var(--elv8-border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.15s ease;
}

.elv8-glp-card.is-selected {
  background: linear-gradient(180deg, rgba(43, 95, 184, 0.2), rgba(43, 95, 184, 0.05));
  border-color: var(--elv8-blue-hi);
  box-shadow: 0 0 0 3px rgba(59, 122, 224, 0.15);
}

.elv8-glp-card-select {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--elv8-text);
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  font-family: inherit;
  text-align: center;
}

.elv8-glp-card-label {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Variation/dose line — shows total mg for the currently-selected
   protocol duration. Updates live when the user changes duration. */
.elv8-glp-card-dose {
  display: block;
  font-size: 0.85rem;
  color: var(--elv8-blue-hi);
  margin-top: 0.125rem;
}
.elv8-glp-card-dose strong {
  font-weight: 700;
}
.elv8-glp-card-dose-dur {
  color: var(--elv8-text-dim);
  font-weight: 500;
  margin-left: 0.25rem;
}

.elv8-glp-card-check {
  font-size: 0.8rem;
  color: var(--elv8-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.elv8-glp-card.is-selected .elv8-glp-card-check {
  color: var(--elv8-blue-hi);
  font-weight: 700;
}

/* ── Expand toggle (used on GLP cards, addon cards) ─────────────────── */
.elv8-expand-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--elv8-border);
  color: var(--elv8-blue-hi);
  padding: 0.625rem 1rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.15s ease;
}

.elv8-expand-toggle:hover { background: rgba(255, 255, 255, 0.04); }

.elv8-expand-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 1.25rem;
  line-height: 1;
}

.elv8-expand-chevron.is-open { transform: rotate(180deg); }

/* ── Includes row (clickable when has medication detail) ────────────── */
.elv8-includes-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--elv8-border);
}

.elv8-includes-row.is-clickable {
  cursor: pointer;
  transition: color 0.15s ease;
}

.elv8-includes-row.is-clickable:hover .elv8-expand-chevron {
  color: var(--elv8-blue-hi);
}

.elv8-includes-row-text {
  flex: 1;
  min-width: 0;
}

/* Inline "Show details ▾" toggle on each Includes row — matches the
   style of the add-on card "Show details" button for visual consistency. */
.elv8-includes-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  color: var(--elv8-blue-hi);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5rem;
}

.elv8-includes-toggle .elv8-expand-chevron {
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 600px) {
  /* On narrow screens, drop the "Show details" text and just keep the chevron
     so the row doesn't wrap awkwardly. */
  .elv8-includes-toggle > span:first-child { display: none; }
  .elv8-includes-toggle .elv8-expand-chevron { font-size: 1.5rem; }
}

/* Old grid layout no longer needed — using new row layout above */
.elv8-includes li {
  padding: 0;
  border-bottom: 0;
}

/* ── Medication details (inline accordion content) ──────────────────── */
.elv8-medication-details {
  padding: 1rem 1.125rem 1.125rem;
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid var(--elv8-border);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--elv8-text);
}

.elv8-includes li .elv8-medication-details {
  margin-top: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--elv8-border);
}

.elv8-med-section + .elv8-med-section {
  margin-top: 0.875rem;
}

.elv8-med-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--elv8-blue-hi);
  margin-bottom: 0.25rem;
}

.elv8-med-section p {
  margin: 0;
  color: var(--elv8-text);
}

.elv8-med-section ul {
  margin: 0.25rem 0 0 1.125rem;
  padding: 0;
}

.elv8-med-section li {
  margin-bottom: 0.25rem;
  color: var(--elv8-text);
}

/* ── Per-addon duration selector ────────────────────────────────────── */
/* Desktop: buttons inline as a wrapped row.
   Mobile (see media query below): buttons stack as full-width rows. */
.elv8-addon-duration {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 0.625rem; /* breathe from the description above */
}

.elv8-addon-duration-btn {
  position: relative;
  background: var(--elv8-bg-dark);
  border: 1px solid var(--elv8-border);
  color: var(--elv8-text);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.elv8-addon-duration-btn:hover {
  border-color: var(--elv8-blue);
}

.elv8-addon-duration-btn.is-selected {
  background: var(--elv8-blue-hi);
  border-color: var(--elv8-blue-hi);
  color: #fff;
}

.elv8-addon-duration-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(59, 122, 224, 0.18);
  color: var(--elv8-blue-hi);
}

.elv8-addon-duration-btn.is-selected .elv8-addon-duration-tag {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ── Addon flat-price note ──────────────────────────────────────────── */
.elv8-addon-flat-note {
  margin: 0.625rem 0 0 0;
  font-size: 0.75rem;
  color: var(--elv8-text-dim);
  font-style: italic;
}

/* ── "Pick a duration" prompt (selected but no duration chosen) ─────── */
.elv8-addon-prompt {
  margin: 0.5rem 0 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--elv8-blue-hi);
}

.elv8-addon.needs-duration {
  border-color: var(--elv8-blue-hi);
  box-shadow: 0 0 0 2px rgba(59, 122, 224, 0.18);
}

/* ── Placeholder addon (productId is 0 — not yet wired in config) ───── */
.elv8-addon.is-placeholder {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  border-color: var(--elv8-border);
  background: var(--elv8-bg-card);
}

.elv8-addon-soon {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--elv8-text-dim);
  background: var(--elv8-bg-dark);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--elv8-border);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Stack hero image (above tier toggle) ───────────────────────────── */
/* Hero container has a fixed aspect ratio so the size stays consistent
   regardless of the source image's dimensions. Images are letterboxed
   with `contain` (preserves the full image, no cropping) — the dark
   background fills any leftover space. */
.elv8-hero {
  margin: 0 0 1.75rem 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--elv8-bg-dark);
  border: 1px solid var(--elv8-border);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.elv8-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── GLP card image (top of card) ───────────────────────────────────── */
.elv8-glp-card-image {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: var(--elv8-bg-dark);
}

/* ── Includes row image (left of label) ─────────────────────────────── */
.elv8-includes-image {
  flex-shrink: 0;
  width: 100px;
  height: auto;
  border-radius: 6px;
  background: var(--elv8-bg-dark);
}

/* Override row layout to accommodate image */
.elv8-includes-row {
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .elv8-includes-image { width: 80px; }
}

/* ── Add-on image (left side, after checkbox) ───────────────────────── */
.elv8-addon-image {
  flex-shrink: 0;
  width: 100px;
  height: auto;
  border-radius: 8px;
  background: var(--elv8-bg-dark);
}

@media (max-width: 600px) {
  /* Stack the main row: image on top, text content underneath */
  .elv8-addon-main {
    flex-direction: column;
    align-items: stretch;
  }
  .elv8-addon-image {
    width: 100%;        /* override the 100px default */
    max-height: 140px;  /* keep portrait bottles from running too tall */
    object-fit: contain;
  }
  /* Duration selector: stack buttons full-width on mobile */
  .elv8-addon-duration {
    flex-direction: column;
  }
  /* Each duration button: stack label on top, SAVE badge underneath */
  .elv8-addon-duration-btn {
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    width: 100%;
    text-align: center;
  }
}

/* ── Addons subtitle ────────────────────────────────────────────────── */
.elv8-addons-subtitle {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: var(--elv8-text-dim);
}

/* ── Addon card refinements for new layout ──────────────────────────── */
.elv8-addon {
  display: block; /* override flex from earlier — main+details stacked */
  padding: 0;
  overflow: hidden;
}

.elv8-addon-main {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
}

/* Checkbox + image group on the left of the main row. Vertically centered
   relative to each other so the checkbox sits at the image midpoint
   instead of pinned to the top of the (taller) text content. */
.elv8-addon-select {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
.elv8-addon-select input[type="checkbox"] {
  margin-top: 0; /* override the default that assumed flex-start alignment */
}

/* Add-to-Protocol commit button. Disabled until a duration is picked
   (or always-enabled for flat-priced one-time items). After commit
   becomes an outlined "Added — Remove" button. */
.elv8-addon-cta {
  display: block;
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.7rem 1rem;
  background: var(--elv8-blue-hi);
  color: #fff;
  border: 1px solid var(--elv8-blue-hi);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.elv8-addon-cta:hover:not(:disabled) {
  background: var(--elv8-blue);
  border-color: var(--elv8-blue);
}
.elv8-addon-cta:disabled {
  background: var(--elv8-bg-dark);
  border-color: var(--elv8-border);
  color: var(--elv8-text-dim);
  cursor: not-allowed;
}
.elv8-addon-cta.is-remove {
  background: transparent;
  color: var(--elv8-blue-hi);
}
.elv8-addon-cta.is-remove:hover {
  background: rgba(59, 122, 224, 0.12);
}
.elv8-addon-cta-check {
  display: inline-block;
  margin-right: 0.25rem;
  font-weight: 700;
}

.elv8-addon .elv8-expand-toggle {
  border-top: 0;
  padding: 0.4rem 0;
  margin-top: 0.375rem;
  justify-content: flex-start;
  width: auto;
  font-size: 0.8rem;
}

.elv8-addon-content { padding-top: 0.125rem; }