/* =========================================================
   WorshipChords Lite Guided Help / Product Tour
   ========================================================= */
.wclTourRoot{
  position:fixed;
  inset:0;
  z-index:2147482000;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  font-family:inherit;
}

.wclTourRoot.isVisible{
  opacity:1;
  visibility:visible;
}

.wclTourShade{
  position:fixed;
  background:rgba(2, 6, 23, .72);
  pointer-events:none;
  backdrop-filter:blur(1.5px);
}

.wclTourSpotlight{
  position:fixed;
  border:2px solid #22c55e;
  border-radius:18px;
  box-shadow:0 0 0 4px rgba(34,197,94,.18), 0 18px 50px rgba(0,0,0,.35);
  pointer-events:none;
  transition:left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}

.wclTourCard{
  position:fixed;
  width:min(370px, calc(100vw - 28px));
  border:1px solid rgba(148,163,184,.35);
  border-radius:22px;
  background:linear-gradient(145deg, rgba(15,23,42,.98), rgba(7,12,25,.98));
  color:#f8fafc;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  padding:18px;
  pointer-events:auto;
  transition:left .18s ease, top .18s ease;
}

.wclTourCard::before{
  content:"";
  position:absolute;
  left:var(--wcl-tour-arrow-left, 50%);
  width:16px;
  height:16px;
  background:rgba(15,23,42,.98);
  border-left:1px solid rgba(148,163,184,.35);
  border-top:1px solid rgba(148,163,184,.35);
  transform:translateX(-50%) rotate(45deg);
}

.wclTourCard.isBelow::before{
  top:-8px;
}

.wclTourCard.isAbove::before{
  bottom:-8px;
  transform:translateX(-50%) rotate(225deg);
}

.wclTourClose,
.wclGuideHubClose{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border:0;
  border-radius:999px;
  background:rgba(148,163,184,.16);
  color:inherit;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

.wclTourKicker,
.wclGuideHubEyebrow{
  margin:0 36px 8px 0;
  color:#86efac;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wclTourTitle,
.wclGuideHubCard h2{
  margin:0 34px 8px 0;
  font-size:20px;
  line-height:1.15;
  color:#fff;
}

.wclTourBody,
.wclGuideHubIntro{
  margin:0;
  color:#dbeafe;
  font-size:14px;
  line-height:1.5;
}

.wclTourProgress{
  height:7px;
  margin:16px 0 14px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(148,163,184,.22);
}

.wclTourProgress span{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, #22c55e, #84cc16);
  transition:width .2s ease;
}

.wclTourFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.wclTourNavBtns{
  display:flex;
  align-items:center;
  gap:8px;
}

.wclTourGhost,
.wclTourPrimary,
.wclGuideOption,
.wclGuideTextBtn,
.wclTourNudge button{
  border:1px solid rgba(148,163,184,.28);
  border-radius:999px;
  font:inherit;
  cursor:pointer;
}

.wclTourGhost{
  padding:9px 13px;
  background:rgba(148,163,184,.12);
  color:#e2e8f0;
}

.wclTourGhost:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.wclTourPrimary{
  padding:10px 16px;
  background:#22c55e;
  border-color:#22c55e;
  color:#052e16;
  font-weight:800;
}

.wclGuideHub{
  position:fixed;
  inset:0;
  z-index:2147482100;
  display:grid;
  place-items:center;
  padding:18px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}

.wclGuideHub.isVisible{
  opacity:1;
  visibility:visible;
}

.wclGuideHubBackdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.74);
  backdrop-filter:blur(4px);
}

.wclGuideHubCard{
  position:relative;
  width:min(720px, 100%);
  border:1px solid rgba(148,163,184,.32);
  border-radius:26px;
  background:linear-gradient(145deg, rgba(15,23,42,.98), rgba(7,12,25,.98));
  color:#f8fafc;
  box-shadow:0 28px 90px rgba(0,0,0,.5);
  padding:24px;
}

.wclGuideOptions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}

.wclGuideOption{
  display:grid;
  gap:7px;
  text-align:left;
  padding:18px;
  border-radius:20px;
  background:rgba(15,23,42,.72);
  color:#f8fafc;
}

.wclGuideOptionFull{
  border-color:rgba(34,197,94,.55);
  background:linear-gradient(145deg, rgba(22,101,52,.42), rgba(15,23,42,.78));
}

.wclGuideOption span{
  color:#86efac;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wclGuideOption strong{
  font-size:18px;
}

.wclGuideOption small{
  color:#cbd5e1;
  line-height:1.45;
}

.wclGuideHubFooter{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.wclGuideTextBtn{
  padding:8px 12px;
  background:transparent;
  color:#cbd5e1;
}

.wclTourNudge{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147481500;
  width:min(310px, calc(100vw - 28px));
  border:1px solid rgba(34,197,94,.32);
  border-radius:20px;
  background:linear-gradient(145deg, rgba(15,23,42,.96), rgba(7,12,25,.96));
  color:#f8fafc;
  box-shadow:0 22px 70px rgba(0,0,0,.36);
  padding:15px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .18s ease, transform .18s ease;
}

.wclTourNudge.isVisible{
  opacity:1;
  transform:translateY(0);
}

.wclTourNudge strong,
.wclTourNudge span{
  display:block;
  padding-right:34px;
}

.wclTourNudge span{
  margin-top:3px;
  color:#cbd5e1;
  font-size:13px;
}

.wclTourNudge div{
  display:flex;
  gap:8px;
  margin-top:12px;
}

.wclTourNudge button{
  padding:8px 12px;
  background:rgba(148,163,184,.12);
  color:#e2e8f0;
}

.wclTourNudge button[data-tour-mode="full"]{
  background:#22c55e;
  color:#052e16;
  border-color:#22c55e;
  font-weight:800;
}

.wclTourNudgeClose{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:999px;
}

html[data-theme="light"] .wclTourCard,
html[data-theme="light"] .wclGuideHubCard,
html[data-theme="light"] .wclTourNudge{
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,245,249,.98));
  color:#0f172a;
  border-color:rgba(15,23,42,.14);
}

html[data-theme="light"] .wclTourCard::before{
  background:rgba(255,255,255,.98);
}

html[data-theme="light"] .wclTourTitle,
html[data-theme="light"] .wclGuideHubCard h2,
html[data-theme="light"] .wclGuideOption,
html[data-theme="light"] .wclTourNudge{
  color:#0f172a;
}

html[data-theme="light"] .wclTourBody,
html[data-theme="light"] .wclGuideHubIntro,
html[data-theme="light"] .wclGuideOption small,
html[data-theme="light"] .wclTourNudge span{
  color:#334155;
}

html[data-theme="light"] .wclTourGhost,
html[data-theme="light"] .wclGuideTextBtn{
  color:#334155;
  background:rgba(15,23,42,.06);
}

html[data-theme="light"] .wclGuideOption{
  background:rgba(255,255,255,.78);
}

html[data-theme="light"] .wclGuideOptionFull{
  background:linear-gradient(145deg, rgba(220,252,231,.9), rgba(255,255,255,.9));
}

@media (max-width: 760px){
  .wclTourCard{
    width:calc(100vw - 24px);
    border-radius:20px;
    padding:16px;
  }

  .wclTourTitle,
  .wclGuideHubCard h2{
    font-size:18px;
  }

  .wclGuideHubCard{
    padding:20px;
    border-radius:22px;
  }

  .wclGuideOptions{
    grid-template-columns:1fr;
  }

  .wclTourNudge{
    left:14px;
    right:14px;
    bottom:14px;
    width:auto;
  }
}


/* Tour hub hardening: keep WCL's global .primary/button styles from leaking in. */
.wclGuideHub{
  overflow:auto;
  overscroll-behavior:contain;
}

.wclGuideOption{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:0;
  min-height:132px;
  height:auto;
  align-items:start;
  justify-content:start;
  grid-template-rows:auto auto 1fr;
  line-height:1.25;
  box-shadow:none;
}

.wclGuideOptionFull{
  border-color:rgba(34,197,94,.55) !important;
  background:linear-gradient(145deg, rgba(22,101,52,.42), rgba(15,23,42,.78)) !important;
  color:#f8fafc !important;
}

.wclGuideOption strong,
.wclGuideOption span,
.wclGuideOption small{
  position:static;
  transform:none;
  display:block;
  margin:0;
  padding:0;
  white-space:normal;
}

@media (max-width: 760px){
  .wclGuideHub{
    place-items:start center;
    padding:12px;
  }

  .wclGuideHubCard{
    width:100%;
    max-height:calc(100svh - 24px);
    overflow:auto;
    padding:18px;
  }

  .wclGuideOptions{
    gap:11px;
    margin-top:14px;
  }

  .wclGuideOption{
    min-height:0;
    padding:14px 16px;
    border-radius:18px;
    gap:6px;
  }

  .wclGuideHubFooter{
    justify-content:center;
  }
}