/* Kiiwis — reward and promotion wizards: one color rule (desktop and phones).
   Green  = what the owner chose and the main action (Kiiwis' color)
   Dark   = text only
   Gray   = support (hints, counters, borders)
   Each screen has one strong element (the green button); a choice is
   recognisable at a glance without shouting. Loaded after the page CSS.
   Renderers use var(--wz-sel-line) / var(--wz-sel-bg) for chosen rows. */

:root {
  --wz-accent: var(--k-green, #23812e);        /* "Siguiente": white text on it = 5.0:1 (AA) */
  --wz-accent-hover: var(--k-green-hover, #1e6a27);
  --wz-final: var(--k-green-hover, #1e6a27);         /* "Activar" / "Publicar": the closing step */
  --wz-final-hover: #14541c;
  --wz-sel-bg: #ecfbe9;        /* chosen row */
  --wz-sel-line: var(--k-green, #23812e);      /* chosen row outline, radio */
  --wz-chip-bg: #e4fadf;       /* chosen chip / tone / duration / validity */
  --wz-chip-line: var(--k-green, #23812e);
  --wz-chip-text: var(--k-green-hover, #1e6a27);     /* 6.5:1 on --wz-chip-bg */
  --wz-link: var(--k-green, #23812e);          /* "Cambiar" and other green text: 5.0:1 */
  --wz-count: #64748b;         /* character counters: 4.8:1 (was 2.6:1) */
}
:root[data-theme="dark"] {
  --wz-accent: var(--k-green, #23812e);
  --wz-accent-hover: var(--k-green, #23812e);
  --wz-final: var(--k-green, #23812e);
  --wz-final-hover: var(--k-green, #23812e);
  --wz-sel-bg: rgba(124, 187, 16, .10);
  --wz-sel-line: #7cbb10;
  --wz-chip-bg: rgba(124, 187, 16, .16);
  --wz-chip-line: #7cbb10;
  --wz-chip-text: #b2e976;
  --wz-link: #7ed321;
  --wz-count: #94a3b8;
}

/* ── The main action ───────────────────────────────────────── */
.wiz-btn-primary { background: var(--wz-accent) !important; border-color: var(--wz-accent) !important; color: #fff !important; }
.wiz-btn-primary:hover:not(:disabled) { background: var(--wz-accent-hover) !important; border-color: var(--wz-accent-hover) !important; }
.wiz-btn-primary.wiz-btn-activate { background: var(--wz-final) !important; border-color: var(--wz-final) !important; }
.wiz-btn-primary.wiz-btn-activate:hover:not(:disabled) { background: var(--wz-final-hover) !important; border-color: var(--wz-final-hover) !important; }

/* ── What was chosen: soft green, never solid black ────────── */
.rproduct-ex.active,
.wiz-overlay .tone-pill.active,
.sched-dur-pill.selected {
  background: var(--wz-chip-bg) !important; border-color: var(--wz-chip-line) !important;
  color: var(--wz-chip-text) !important; font-weight: 700 !important;
}
.rexpiry-pill.selected { background: var(--wz-chip-bg) !important; border-color: var(--wz-chip-line) !important; color: var(--wz-chip-text) !important; box-shadow: 0 0 0 1px var(--wz-chip-line) !important; }
.rexpiry-pill.selected .ep-val,
.rexpiry-pill.selected .ep-lbl { color: var(--wz-chip-text) !important; }

/* ── Step bar (desktop): current step outlined in green, done steps filled ── */
.wiz-bread-item.active .wiz-bread-dot { background: var(--panel, #fff) !important; border-color: var(--wz-accent) !important; color: var(--wz-accent) !important; box-shadow: 0 0 0 4px var(--wz-chip-bg) !important; }
.wiz-bread-item.done .wiz-bread-dot { background: var(--wz-final) !important; border-color: var(--wz-final) !important; color: #fff !important; }
.wiz-bread-item.active .wiz-bread-label { color: var(--wz-accent) !important; }

/* ── Support text ──────────────────────────────────────────── */
#charCount, #offerCharCount, #productChar, #rewardNameCount, .copy-char-count, .rproduct-char { color: var(--wz-count) !important; }

/* ── Dark mode ─────────────────────────────────────────────── */
/* Text boxes keep the same green as in light mode (were plain gray) */
:root[data-theme="dark"] .cf-bubble { background: var(--wz-sel-bg) !important; border: 1.5px solid rgba(124, 187, 16, .55) !important; color: var(--text) !important; }
:root[data-theme="dark"] .cf-bubble:focus { border-color: var(--wz-sel-line) !important; box-shadow: 0 0 0 3px rgba(124, 187, 16, .18) !important; }
/* Icons drawn with a fixed dark stroke (topbar, review summary, schedule) vanished */
:root[data-theme="dark"] .wiz-overlay svg[stroke="#0f172a"],
:root[data-theme="dark"] .wiz-overlay svg[stroke="#1e293b"] { stroke: var(--text) !important; }
/* "★ Popular": a calm amber instead of a bright yellow block */
:root[data-theme="dark"] .wz-pop { background: rgba(251, 191, 36, .16) !important; color: #fcd34d !important; }
/* Validity step: the header already separates it; the fixed light rule glared in dark mode */
.wiz-overlay .rexpiry-section { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }

/* ── Tips: link under the subtitle + sheet ─────────────────── */
.wz-tips-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 0; min-height: 32px; background: none; border: none; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; color: var(--wz-link); }
.wz-tips-link:hover .wz-tips-l { text-decoration: underline; }
.wz-sheet-ov { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0); display: flex; align-items: flex-end; justify-content: center; transition: background-color .2s ease; }
.wz-sheet-ov.open { background: rgba(0, 0, 0, .4); }
.wz-sheet { width: 100%; max-width: 560px; background: var(--panel, #fff); color: var(--text, #1a1a1a); border-radius: 20px 20px 0 0; padding: 10px 24px calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .15); transform: translateY(100%); transition: transform .22s cubic-bezier(.32, .72, 0, 1); max-height: 80vh; overflow-y: auto; }
.wz-sheet-ov.open .wz-sheet { transform: translateY(0); }
.wz-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong, #d4d4d4); margin: 0 auto 16px; }
.wz-sheet h3 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text, #1a1a1a); }
.wz-sheet ul { margin: 0; padding: 0; list-style: none; }
.wz-sheet li { position: relative; padding: 10px 0 10px 22px; font-size: 15px; line-height: 1.5; color: var(--text-2, #404040); border-top: 1px solid var(--line, #e8e8e8); }
.wz-sheet li:first-child { border-top: none; }
.wz-sheet li::before { content: ''; position: absolute; left: 4px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--wz-sel-line); }
.wz-sheet-ok { display: block; width: 100%; height: 50px; margin-top: 16px; border: none; border-radius: 14px; background: var(--wz-accent); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.wz-sheet-ok:hover { background: var(--wz-accent-hover); }
.wz-sheet-ok:focus { outline: none; }
.wz-sheet-ok:focus-visible { outline: 2px solid var(--wz-sel-line); outline-offset: 3px; }
@media (min-width: 769px) {
  .wz-sheet-ov { align-items: center; }
  .wz-sheet { max-width: 440px; border-radius: 20px; padding: 24px 28px 24px; transform: translateY(16px); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
  .wz-sheet-ov.open .wz-sheet { opacity: 1; }
  .wz-sheet-grab { display: none; }
}

/* ── "Recommended": shown on the option itself, not as a tip ── */
.wz-rec { display: inline-block; font-size: .6rem; font-weight: 700; color: var(--wz-chip-text); background: var(--wz-chip-bg); border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.sched-dur-pills, #rexpiryPills { padding-top: 10px; }
.sched-dur-pill.wz-has-rec, .rexpiry-pill.wz-has-rec { position: relative; overflow: visible; }
.wz-rec-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: .02em; color: var(--wz-chip-text); background: var(--wz-chip-bg); border: 1px solid var(--panel, #fff); border-radius: 999px; padding: 2px 6px; white-space: nowrap; pointer-events: none; }

/* ── Option lists as separate cards (2026-10-12, both wizards, every size) ──────────
   Each option is its own rounded card, 8px apart. The old single rounded box clipped
   the chosen row's inset outline at its corners. No radio circle: the chosen card has
   a green border, a light green fill and a check on the right. Renderers mark the list
   with .wz-list and the chosen option with aria-checked="true"; their inline styles
   are overridden here. The first child of a row is the old radio (hidden). */
.wz-list { background: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; display: flex; flex-direction: column; gap: 8px; }
.wz-list > .wz-sep { display: none !important; }
.wz-list > .wz-opt { position: relative; border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--panel) !important; box-shadow: none !important; padding: 12px 44px 12px 14px !important; gap: 10px !important; }
.wz-list > .wz-opt > div:first-child { display: none !important; }
.wz-list > .wz-opt[aria-checked="true"] { border: 1.5px solid var(--wz-sel-line) !important; background: var(--wz-sel-bg) !important; }
.wz-list > .wz-opt[aria-checked="true"]::after { content: ""; position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--wz-sel-line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wz-list > .wz-opt:focus-visible { outline: 2px solid var(--wz-sel-line); outline-offset: 2px; }

/* ── Tips: a yellow bulb (help and ideas), so the wizard isn't all green ──
   Yellow fill for presence, dark amber outline for contrast on white (a plain yellow
   stroke would be too faint). Top-bar button, desktop "Tips" link, sheet title and
   the "not seen yet" dot. */
:root { --wz-bulb-fill: #fcd34d; --wz-bulb-line: #b45309; --wz-bulb-dot: #f59e0b; }
:root[data-theme="dark"] { --wz-bulb-fill: rgba(251, 191, 36, .28); --wz-bulb-line: #fbbf24; --wz-bulb-dot: #fbbf24; }
.wiz-v2-tips svg, .wz-tips-link svg, .wz-sheet-bulb { color: var(--wz-bulb-line); }
.wiz-v2-tips svg path:last-child, .wz-tips-link svg path:last-child, .wz-sheet-bulb path:last-child { fill: var(--wz-bulb-fill); }
.wiz-overlay.wiz-v2 .wiz-v2-dot { background: var(--wz-bulb-dot); }
.wz-sheet h3 { display: flex; align-items: center; gap: 8px; }
.wz-sheet-bulb { flex-shrink: 0; }
.wz-sheet li::before { background: var(--wz-bulb-dot); }