/* Aesthetics BioCare test pages: panel page, programme picker, tests listing */

/* tests listing */

/* ==================================================================
 * Option one / Option two: stronger highlight (Oct 2026)
 * Side panel "Choose how to start" and the bottom "Step 2" choices
 * light up on hover and stay clearly lit once chosen.
 * ================================================================== */

/* Side panel options */
.abc-tx-opt{position:relative;padding:16px 52px 16px 18px;border:2px solid #E2CFC4;background:#FBF7F3;
  box-shadow:0 2px 8px rgba(42,21,32,.06);text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.abc-tx-opt::after{content:"\2192";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;
  background:#F1E3D9;color:var(--terra);transition:background-color .18s ease,color .18s ease,transform .18s ease}
.abc-tx-opt:hover,.abc-tx-opt:focus-visible,.abc-tx-opt.is-active{border-color:var(--terra);background:#fff;
  transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(177,122,99,.28),0 14px 28px rgba(42,21,32,.18)}
.abc-tx-opt:focus-visible{outline:none}
.abc-tx-opt:hover::after,.abc-tx-opt:focus-visible::after,.abc-tx-opt.is-active::after{background:var(--terra);color:#fff;transform:translateY(-50%) translateX(2px)}
.abc-tx-opt:hover .abc-tx-opt-k,.abc-tx-opt.is-active .abc-tx-opt-k{color:var(--terra-d)}
.abc-tx-opt-n{color:var(--ink)}

/* Bottom section choices, on the dark band */
.abc-s2-choice{position:relative;border:2px solid rgba(233,201,168,.35);background:#F1E9E1;padding:26px 64px 26px 28px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease,opacity .2s ease}
.abc-s2-choice::after{content:"";position:absolute;right:24px;top:26px;width:24px;height:24px;border-radius:50%;
  border:2px solid #C9A88F;background:#fff;box-sizing:border-box;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.abc-s2-choice:hover,.abc-s2-choice:focus-visible{border-color:#E9C9A8;background:#fff;transform:translateY(-3px);
  box-shadow:0 0 0 4px rgba(233,201,168,.35),0 16px 36px rgba(0,0,0,.35);outline:none}
.abc-s2-choice:hover::after,.abc-s2-choice:focus-visible::after{border-color:var(--terra)}
.abc-s2-choice[aria-pressed="true"]{background:#fff;border-color:#E9C9A8;transform:translateY(-3px);
  box-shadow:0 0 0 5px rgba(233,201,168,.55),0 0 34px rgba(233,201,168,.45),0 18px 40px rgba(0,0,0,.4)}
.abc-s2-choice[aria-pressed="true"]::after{border-color:var(--terra);
  background:var(--terra) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10"><path d="M1 5l3.5 3.5L11 1" fill="none" stroke="%23fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/12px 10px no-repeat;
  box-shadow:0 0 0 4px rgba(177,122,99,.25)}
.abc-s2-choice[aria-pressed="true"] .abc-s2-tag{color:var(--terra-d)}
.abc-s2-choice[aria-pressed="true"] .abc-s2-tag::after{content:" \00B7  Selected";color:var(--terra)}
/* once one option is chosen, the other steps back so the choice reads at a glance */
.abc-s2-grid:has(.abc-s2-choice[aria-pressed="true"]) .abc-s2-choice[aria-pressed="false"]{opacity:.62;transform:none;box-shadow:none}
.abc-s2-grid:has(.abc-s2-choice[aria-pressed="true"]) .abc-s2-choice[aria-pressed="false"]:hover{opacity:1}
/* the panel that opens underneath carries the same light */
.abc-s2-panel.is-open .abc-s2-home{border:2px solid #E9C9A8;box-shadow:0 0 0 4px rgba(233,201,168,.3),0 16px 36px rgba(0,0,0,.3)}

@media (prefers-reduced-motion:reduce){
  .abc-tx-opt,.abc-s2-choice,.abc-tx-opt::after{transition:none}
  .abc-tx-opt:hover,.abc-tx-opt.is-active,.abc-s2-choice:hover,.abc-s2-choice[aria-pressed="true"]{transform:none}
}

/* ==================================================================
 * Programme price cards: hover turns the card dark with white text
 * ================================================================== */
.abc-pkg-card{border-width:2px;transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.abc-pkg-card:hover,.abc-pkg-card:focus-visible{background:#4A2433;border-color:#E9C9A8;transform:translateY(-3px);
  box-shadow:0 0 0 4px rgba(233,201,168,.35),0 18px 38px rgba(0,0,0,.45);outline:none}
.abc-pkg-card:hover .abc-pkg-n,.abc-pkg-card:hover .abc-pkg-p,
.abc-pkg-card:focus-visible .abc-pkg-n,.abc-pkg-card:focus-visible .abc-pkg-p{color:#fff}
.abc-pkg-card:hover .abc-pkg-d,.abc-pkg-card:focus-visible .abc-pkg-d{color:rgba(255,255,255,.82)}
.abc-pkg-card:hover .abc-pkg-save,.abc-pkg-card:focus-visible .abc-pkg-save{background:#E9C9A8;color:#2A1520}
.abc-pkg-card .abc-pkg-n,.abc-pkg-card .abc-pkg-p,.abc-pkg-card .abc-pkg-d,.abc-pkg-card .abc-pkg-save{transition:color .2s ease,background-color .2s ease}
@media (prefers-reduced-motion:reduce){.abc-pkg-card,.abc-pkg-card:hover{transition:none;transform:none}}

/* ------------------------------------------------------------------
 * The panel page carries its own <style> in the body, which loads after
 * this file and wins on equal specificity. These repeat the two effects
 * above with the section as a scope so they apply.
 * ------------------------------------------------------------------ */
.abc-start .abc-pkg-card{border-width:2px}
.abc-start .abc-pkg-card:hover,.abc-start .abc-pkg-card:focus-visible{
  background:#4A2433;border-color:#E9C9A8;transform:translateY(-3px);
  box-shadow:0 0 0 4px rgba(233,201,168,.18)}
.abc-start .abc-pkg-card:hover .abc-pkg-n,.abc-start .abc-pkg-card:hover .abc-pkg-p{color:#fff}
.abc-start .abc-pkg-card:hover .abc-pkg-d{color:rgba(255,255,255,.82)}
.abc-start .abc-pkg-card:hover .abc-pkg-save{background:#E9C9A8;color:#2A1520}
.abc-s2 .abc-s2-grid .abc-s2-choice{border-width:2px}