/* VERSION E12 — MINI CHECK VISUAL POLISH + MOBILE REVIEW CONTROL REFINEMENT */

@media (max-width: 767px) {
  /* Keep the 44px touch width while making the visible capsule 28 × 78px. */
  .concept-e12 .review-carousel-controls button {
    width: 44px;
    height: 84px;
    flex-basis: 44px;
  }

  .concept-e12 .review-carousel-controls button::before {
    inset: 3px 8px;
    border-color: rgba(183, 146, 79, .3);
  }
}

@media (min-width: 1024px) {
  /* A slightly larger warm-ivory teaser, still secondary to the Hero CTA. */
  .concept-e12 .hero-mini-teaser {
    width: clamp(296px, 24vw, 358px);
    padding: 1.38rem 1.46rem 1.44rem;
    border-color: rgba(169, 133, 69, .5);
    background: rgba(239, 231, 214, .97);
    color: #1d332a;
    box-shadow: 0 14px 34px rgba(4, 16, 10, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }

  .concept-e12 .hero-mini-teaser .eyebrow {
    color: #916c32;
  }

  .concept-e12 .hero-mini-teaser-title {
    max-width: 275px;
    color: #1d332a;
  }

  .concept-e12 .hero-mini-teaser-button {
    border-color: rgba(29, 51, 42, .58);
    background: rgba(29, 51, 42, .035);
    color: #1d332a;
  }

  .concept-e12 .hero-mini-teaser-button:hover,
  .concept-e12 .hero-mini-teaser-button:focus-visible {
    border-color: #1d332a;
    background: #1d332a;
    color: #f0e7d6;
  }

  .concept-e12 .hero-mini-teaser-button:focus-visible {
    outline-color: #c5a263;
  }

  /* Strong green-black separation keeps the Hero from competing with the dialog. */
  .concept-e12 .mini-bridge[data-mini-check-dialog] {
    background: rgba(5, 20, 13, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check {
    border: 1px solid rgba(169, 133, 69, .48);
    background: #efe7d7;
    color: #1d332a;
    box-shadow: 0 28px 76px rgba(2, 12, 7, .38);
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check::before {
    background: #b7924f;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check h2,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check h3,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-question,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-panel-header > span {
    color: #1d332a;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] [data-mini-check-focus]:focus {
    outline: none;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check p,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-result-intro,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-result-note {
    color: #59635d;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-progress {
    color: #916c32;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-panel-header {
    border-bottom-color: rgba(137, 112, 68, .28);
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-steps span {
    background: #d7cdbc;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-steps span.is-complete {
    background: #b7924f;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-steps span.is-current {
    background: #1d332a;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-option {
    border-color: rgba(29, 51, 42, .2);
    background: rgba(248, 242, 230, .92);
    color: #22382f;
    box-shadow: none;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-option::before {
    border-color: rgba(29, 51, 42, .54);
    background: #f5eddf;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-option:hover {
    border-color: rgba(145, 108, 50, .72);
    background: #f8f1e4;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-option:focus-visible {
    border-color: #916c32;
    background: #f8f1e4;
    outline: 2px solid #a98545;
    outline-offset: 2px;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-option.is-selected {
    border-color: #80612f;
    background: rgba(183, 146, 79, .16);
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-option.is-selected::before {
    border-color: #1d332a;
    background: #1d332a;
    box-shadow: inset 0 0 0 3px #efe7d7;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-textarea {
    border-color: rgba(29, 51, 42, .24);
    background: #f8f1e4;
    color: #1d332a;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-textarea:focus {
    border-color: #916c32;
    outline: 2px solid rgba(169, 133, 69, .7);
    outline-offset: 2px;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-actions .button:not(.button-cookie-secondary) {
    border-color: #b7924f;
    background: #b7924f;
    color: #173027;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-actions .button:not(.button-cookie-secondary):hover,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-actions .button:not(.button-cookie-secondary):focus-visible {
    border-color: #a47c3c;
    background: #c4a15e;
    color: #13271f;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-actions .button-cookie-secondary {
    border-color: rgba(29, 51, 42, .44);
    background: transparent;
    color: #1d332a;
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-actions .button-cookie-secondary:hover,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-actions .button-cookie-secondary:focus-visible {
    border-color: #1d332a;
    background: rgba(29, 51, 42, .07);
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-goal,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-user-goal {
    border-color: rgba(169, 133, 69, .42);
    border-left-color: #b7924f;
    background: rgba(183, 146, 79, .12);
  }

  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-goal span,
  .concept-e12 .mini-bridge[data-mini-check-dialog] .mini-check-user-goal span {
    color: #1d332a;
  }

  .concept-e12 .mini-check-dialog-close {
    border-color: rgba(29, 51, 42, .24);
    background: #f5eddf;
    color: #1d332a;
  }

  .concept-e12 .mini-check-dialog-close:hover,
  .concept-e12 .mini-check-dialog-close:focus-visible {
    border-color: #916c32;
    background: #e8dcc7;
  }
}