/* ── Zodiac Wheel PRO v3 ── */

/* FIX: WPBakery parent wrappers clicks intercept karte hain — force pointer-events through */
.wpb-content-wrapper,
.vc_column-inner,
.wpb_column,
.vc_row,
.vc_row-fluid,
.vc_column_container {
  pointer-events: auto !important;
}

/* FIX: ::before pseudo overlays click block kar sakte hain */
.vc_row::before,
.vc_row::after,
.vc_column-inner::before,
.vc_column-inner::after {
  pointer-events: none !important;
}

.zs-wrap{
  --bg:#b8c9c0;
  --accent:#c9b84c;
  --name-color:#1a2e28;
  --desc-color:#2c3e35;
  --badge-bg:#4a5e55;
  --badge-text:#fff;
  --name-size:48px;
  --desc-size:16px;
  --spin:40s;
  background:var(--bg);
  /*min-height:100vh;*/
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:5px;
  position:relative;
  overflow:hidden;
  z-index: 1;
  pointer-events: auto !important;
}

/* subtle star-field bg */
.zs-wrap::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.2) 1px,transparent 1px);
  background-size:50px 50px,80px 80px;
  background-position:0 0,25px 25px;
  pointer-events:none;
  opacity:.4;
}

.zs-subtitle {
    text-align: center;
    margin-bottom: 40px;
    opacity: 1;
    position: relative;
    max-width: 100%;
}
.zs-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1362px;
    width: 100%;
    align-items: center;
    position: relative;
}

/* ── Wheel ── */
.zs-wheel-wrap {
    position: relative;
    max-width: 644px;
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
}

/* Static dark ring — NO CSS rotation animation */
.zs-ring{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#2d5047,#0d1e1a);
  /*box-shadow:0 0 60px rgba(0,0,0,.35);*/
  pointer-events: auto !important;
  z-index: 2;
}

/* sign buttons — positioned absolutely by JS, no CSS animation */
.zs-sign-btn {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    cursor: pointer;
    color: rgba(255, 255, 255, .75);
    border: 1px solid transparent;
    background: rgb(23 33 34 / 0%);
    /* transition: background .25s, color .25s, box-shadow .25s; */
    /* user-select: none; */
    /* line-height: 1; */
    padding: 0;
    /* will-change: transform; */
    z-index: 10;
    pointer-events: auto !important;
    margin: -30px 0 0 -30px ! IMPORTANT;
}
.zs-sign-btn:hover img, 
.zs-sign-btn.active img {
    filter: brightness(0) saturate(100%) invert(44%) sepia(99%) saturate(1256%) hue-rotate(340deg) brightness(102%) contrast(103%);
}

/* center circle */
.zs-center {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #2a4840, #0a1612);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.zs-figure{
  width:70px;height:70px;
  position:relative;
}
.zs-figure::before{
  content:'🧘';
  font-size:44px;
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  filter:brightness(0) invert(1) opacity(.85);
}

/* Custom center image */
.zs-center-img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
    z-index: 99;
}

/* ── Panel ── */
.zs-panel{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.zs-sign-name {
    font-weight: 700;
    line-height: 1;
    margin: 0;
    letter-spacing: -.01em;
    transition: opacity .3s;
    font-size: 100px;
    color: #222020;
    font-family: 'Bricolage Grotesque SemiBold';
    margin-bottom: 31px;
}

.zs-badges-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.zs-today-label {
    font-weight: 700;
    font-size: 50px;
    color: #222020;
    margin-right: 4px;
    font-family: 'Bricolage Grotesque SemiBold';
}
.zs-badge {
    display: flex;
    flex-direction: column;
    background: #4A4A4A;
    color: var(--badge-text);
    border-radius: 8px;
    padding: 6px;
    font-size: 18px;
    min-width: 115px;
    align-items: baseline;
    transition: background .3s;
    font-family: 'Bricolage Grotesque SemiBold';
    min-height: 69px !important;
}
.zs-badge-title {
    font-size: 18px;
    opacity: 1;
    text-transform: uppercase;
    margin-bottom: 2px;
}
#zsLove, #zsCareer, #zsMoney {
    color: #ABBE48;
    letter-spacing: 2px;
    font-size: 18px;
}
.zs-desc {
    font-size: 18px;
    line-height: normal;
    max-width: 100%;
    margin: 0;
    color: #0D0B0B;
    padding: 20px 0 0;
}
.zs-dates{
  font-size:13px;
  color:var(--name-color);
  opacity:.6;
  letter-spacing:.04em;
}

.zs-fade{opacity:0!important;}

/* ── Responsive ── */
@media(max-width:768px){
  .zs-main{grid-template-columns:1fr;gap:30px;}
  .zs-wheel-wrap{max-width:300px;}
  .zs-sign-name{font-size:calc(var(--name-size) * .7);}
}
.zs-sign-btn img {
    width: 75px !important;
    height: 75px ! IMPORTANT;
}