:root{
  /* This sheet intentionally stays token-driven.
     All values are tuned to the user's "subscription uiux.html" inspiration. */
}

/* ------------------------------------------------------------
 * DreamySubs26 — WCS ATT purchase options (PDP)
 * ---------------------------------------------------------- */

.dreamysubs26{
  margin-top:18px;
}

.dreamysubs26-head{
  margin:0 0 10px;
}

.dreamysubs26-headTitle{
  margin:0 0 4px;
  /* Display typography: Playfair (theme preset). */
  font-family:var(--font-edit, var(--dreamy26-font-edit, 'Playfair Display', Georgia, serif));
  font-size:18px;
  letter-spacing:.2px;
  color:var(--dreamy26-ink,#050505);
}

.dreamysubs26-headNote{
  margin:0;
  font-family:var(--dreamy26-font-ui);
  font-size:12px;
  color:var(--dreamy26-ink-muted,#757575);
  line-height:1.4;
  max-width:360px;
}

.dreamysubs26-fieldset{
  border:0;
  padding:0;
  margin:0;
}

.dreamysubs26-options{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dreamysubs26-options li{
  position:relative;
}

.dreamysubs26-options input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.dreamysubs26-options label{
  display:block;
  position:relative;
  padding:16px 56px 16px 20px;
  border-radius:8px;
  border:1px solid #e1e1e1;
  background:#fff;
  transition:all .2s ease;
}

.dreamysubs26-options label:hover{
  border-color:#888;
}

.dreamysubs26-options input:focus + label{
  outline:none;
  box-shadow:0 0 0 3px rgba(5,5,5,.12);
}

.dreamysubs26-options input:checked + label{
  border-color:#000;
  background:#fcfcfc;
  box-shadow:0 10px 26px rgba(0,0,0,.07);
}

.dreamysubs26-option-title{
  font-family:var(--font-edit, var(--dreamy26-font-edit, 'Playfair Display', Georgia, serif));
  font-weight:600;
  font-size:16px;
  color:var(--dreamy26-ink,#050505);
  display:block;
  margin-bottom:6px;
  letter-spacing:.2px;
}

.dreamysubs26-discount{
  display:inline-block;
  background-color:var(--dreamy26-ink,#050505);
  color:#fff;
  font-family:var(--dreamy26-font-ui);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  padding:3px 6px;
  border-radius:2px;
  margin-left:8px;
  vertical-align:middle;
  letter-spacing:.5px;
}

.dreamysubs26-option-price{
  display:block;
  margin-top:2px;
  font-family:var(--dreamy26-font-ui);
  font-size:14px;
  color:#555;
}

.dreamysubs26-option-subline{
  margin-top:6px;
  font-family:var(--dreamy26-font-ui);
  font-size:12px;
  color:#888;
  line-height:1.35;
}

.dreamysubs26-check{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid #ddd;
  background:#fff;
  transition:all .2s ease;
  pointer-events:none;
}

.dreamysubs26-options input:checked + label .dreamysubs26-check{
  background:#000;
  border-color:#000;
}

.dreamysubs26-options input:checked + label .dreamysubs26-check:after{
  content:'';
  position:absolute;
  left:7px;
  top:4px;
  width:6px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ------------------------------------------------------------
 * Plan selector (only when multiple subscription schemes exist)
 * ---------------------------------------------------------- */

.dreamysubs26-subtitle{
  margin:14px 0 10px;
  font-family:var(--dreamy26-font-ui);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dreamy26-ink-muted,#757575);
}

.dreamysubs26-hidden{
  display:none !important;
}

/* Hide plugin dropdown visually, keep it for JS state. */
.dreamysubs26 .wcsatt-options-product-dropdown{
  display:none !important;
}

.dreamysubs26-plans{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.dreamysubs26-planLabel{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.88);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  cursor:pointer;
}

.dreamysubs26-planLabel:hover{
  border-color:rgba(0,0,0,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  transform:translateY(-1px);
  background:#fff;
}

.dreamysubs26-planLabel > input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.dreamysubs26-planDot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.22);
  background:#fff;
}

.dreamysubs26-planLabel > input:checked ~ .dreamysubs26-planDot{
  background:#000;
  border-color:#000;
}

.dreamysubs26-planText{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.dreamysubs26-planName{
  font-family:var(--dreamy26-font-ui);
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dreamy26-ink-muted,#757575);
}

.dreamysubs26-planPrice{
  font-family:var(--font-edit, var(--dreamy26-font-edit, 'Playfair Display', Georgia, serif));
  font-size:1.0rem;
  line-height:1.1;
  color:var(--dreamy26-ink,#050505);
}

.dreamysubs26-planBadge{
  margin-left:auto;
  font-family:var(--dreamy26-font-ui);
  font-size:.76rem;
  padding:2px 8px;
  border-radius:999px;
  background:#000;
  color:#fff;
  letter-spacing:.02em;
  line-height:1.6;
}

.dreamysubs26-planLabel > input:checked ~ .dreamysubs26-planBadge{
  background:#000;
}

/* ------------------------------------------------------------
 * Price hygiene: hide raw variation price amounts, but NEVER hide
 * WCS ATT injected option wrappers (these live in variation price_html).
 * ---------------------------------------------------------- */

.dreamysubs26-has-subs .woocommerce-variation-price > .price,
.dreamysubs26-has-subs .woocommerce-variation-price > p.price{
  display:none !important;
}

/*
 * Variable products: when we disable WCS ATT's price_html injection, the plugin
 * outputs an empty placeholder wrapper (`.wcsatt-options-wrapper--variation`)
 * that gets replaced on variation selection. Hide the placeholder to avoid
 * layout jumps.
 */
.dreamysubs26-on .wcsatt-options-wrapper--variation:not(.dreamysubs26){
  display:none !important;
}

/* Overflow safety (mobile side-scroll protection). */
.dreamysubs26,
.dreamysubs26 *{
  max-width:100%;
}

@media (max-width:420px){
  .dreamysubs26-options label{
    padding:15px 54px 15px 16px;
  }
  .dreamysubs26-check{
    right:16px;
  }
}