/* Sun Moon Rising Calculator */

/*===================== Front-end page before calculate ===================== */

/* HEADINGS */
h1, h2, h3{
  font-family:"Poppins", sans-serif;
}

/* BODY TEXT */
p, li{
  font-family:"Inter", Arial, sans-serif;
  font-size:16px;
  line-height:1.75;
  color:#2b2b2b;
}


/* Header Container */
#header-calculator{
padding:60px 20px 50px;
}

/* Header container's column */
#header-calculator-column{
max-width:1000px;
margin:auto;
text-align:center;
}

/* H1 */
#zm-hero-title{

}

/* (Free & Accurate) */
#free-accurate{
display:block;
font-size:.45em;
font-weight:500;
opacity:.8;
margin-top:10px;
}

/* H2 */
#zm-hero-subtitle h2{
max-width:850px;
margin:0 auto 25px;
}

/* Text block */
#zm-hero-description p{
max-width:850px;
}

/* List */
#zm-hero-list{
  list-style:none;
  max-width:420px;
  margin:20px auto 0;
  padding:0;
  text-align:left;
}

#zm-hero-list li{
  margin:10px 0;
  padding-left:24px;
  position:relative;
}

#zm-hero-list li::before{
  /* content:"✓"; */
  content:"\2713";
  position:absolute;
  left:0;
  color:#6CB721; /* or your accent color */
}

/* Button */
#zm-hero-button{
padding:18px 42px;
}




/* === SEO TEXT === */

/* GLOBAL CONTAINER (MASTER RULE) */


#seo-section-3{
  max-width:100%;
  background:#fff;
  color:#222;
  /*font-family:"Poppins", sans-serif;*/
  line-height:1.75;
}


/* SEO BLOCK BASE SYSTEM (ALL SECTIONS) */
#seo-section-3 .seo-block{
  max-width:950px;
  margin:0 auto;
  padding:60px 25px;
}

/*  PARAGRAPHS (READABILITY CORE) */
#seo-section-3 .seo-block p{
  font-size:19px;
  line-height:1.85;
  color:#333;
  margin-bottom:18px;
}


/* HEADINGS (H2 SYSTEM) */
#seo-section-3 .seo-block h2{
  font-size:34px;
  line-height:1.2;
  margin-bottom:24px;
  letter-spacing:-0.8px;
  color:#111;
}


/* H3 SUBHEADINGS */
#seo-section-3 .seo-block h3{
 font-size:22px;
  margin-top:35px;
  margin-bottom:14px;
  color:#111;
}

/*  LISTS (IMPORTANT FOR SCANNING) */
#seo-section-3 .seo-block ul{
  margin:14px 0 18px;
  padding-left:0;
  list-style:none;
}

#seo-section-3 .seo-block li{
  position:relative;
  padding-left:28px;
  margin:14px 0;
  font-size:18px;
  line-height:1.8;
}


/* Checkmark bullet */
#seo-section-3 .seo-block li::before{
  content:"\2713";
  position:absolute;
  left:0;
  color:#6CB721;
  font-weight:700;
}


/* STRONG TEXT (SEO EMPHASIS) */
#seo-section-3 .seo-block strong{
  font-weight:600;
  color:#111;
}


/* SECTION SPACING SYSTEM */
#seo-section-3 .seo-block{
  padding-top:60px;
  padding-bottom:60px;
  scroll-margin-top:100px;
}

#seo-section-3 .seo-block + .seo-block{
  border-top:1px solid #ececec;
}



#seo-section-3 #section-intro p:first-of-type,
#seo-section-3 #section-definition p:first-of-type,
#seo-section-3 #section-how p:first-of-type,
#seo-section-3 #section-results p:first-of-type,
#seo-section-3 #section-big3 p:first-of-type,
#seo-section-3 #section-importance p:first-of-type,
#seo-section-3 #section-contradictions p:first-of-type,
#seo-section-3 #section-realworld p:first-of-type,
#seo-section-3 #section-semantic p:first-of-type
{
 font-size:21px;
  line-height:1.8;
  color:#222;
}


#section-faq h3{
  font-size:22px;
  margin-top:30px;
  margin-bottom:10px;
  color:#111;
    padding-left:16px;
  border-left:4px solid #6CB721;
}


#section-paa{
  background:#fafafa;
  border-radius:16px;
}


#section-semantic{
  background:#fcfcfc;
  border-left:4px solid #6CB721;
}


.seo-final-cta{
  text-align:center;
}

.seo-final-cta ul{
  display:inline-block;
  text-align:left;
}


/* Figure Wrapper */

.seo-figure{
  max-width:900px;
  margin:40px auto;
  text-align:center;
}

/* Images */

.seo-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}


.seo-image-wheel{
  max-width:500px;
  margin:auto;
}


/* Captions */

.seo-figure figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.5;
  color:#777;
  font-style:normal;
}

/* LINKS */

#section-faq a,
#section-semantic a,
#section-final-cta a{
  color:#6CB721;
  font-weight:600;
  text-decoration:underline !important;
  text-underline-offset:3px;
  transition:all .2s ease;
}

#section-faq a:hover,
#section-semantic a:hover,
#section-final-cta a:hover{
  color:#4f8f16;
  text-decoration-thickness:2px;
}



/* LINKS */
#seo-section-3 .seo-block a{
  color:#2f6fed;
  text-decoration:none;
  font-weight:500;
  transition:all .2s ease;
  border-bottom:1px solid rgba(47,111,237,.25);
}

#seo-section-3 .seo-block a:hover{
  color:#1f4fc7;
  border-bottom-color:#1f4fc7;
}

#seo-section-3 .seo-block a:visited{
  opacity:.9;
}

#seo-section-3 .seo-block a strong{
  font-weight:600;
  color:#2f6fed;
}



.seo-divider{
  width:80px;
  height:1px;
  background:#d9d9d9;
  margin:35px auto;
}



/* SEO EXPLORE MORE SECTION */
.seo-explore-more{
  max-width:720px;
  margin:80px auto 40px;
  padding:30px 25px;
  text-align:center;
  border-top:1px solid rgba(0,0,0,.08);
}

.seo-explore-more h2{
  font-size:22px;
  font-weight:600;
  margin-bottom:18px;
  letter-spacing:-0.3px;
  color:#1f1f1f;
}

.seo-explore-more ul{
  list-style:none;
  padding:0;
  margin:0;
}

.seo-explore-more li{
  margin:10px 0;
}

.seo-explore-more a{
  display:inline-block;
  font-size:16px;
  color:#2f6fed;
  text-decoration:none;
  font-weight:500;
  transition:all .2s ease;
}

.seo-explore-more a:hover{
  color:#1f4fc7;
  transform:translateY(-1px);
}






/*===================== End Front-end page before calculate ===================== */



/* Hide Read more about the ... In astrology below sun,moon,rising interpretations */
#form-sun-moon-rising-calculator p.readMoreSun,
#form-sun-moon-rising-calculator p.readMoreMoon,
#form-sun-moon-rising-calculator p.readMoreAscendant{
  display: none !important;
}

/* form style */
#form-sun-moon-rising-calculator #zp-birthreport-form{
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

#form-sun-moon-rising-calculator div#zp-report-content{
    width: 70%;
    max-width: 100%;
    margin: auto;
}

#form-sun-moon-rising-calculator label,#form-sun-moon-rising-calculator legend{
  font-family: 'Roboto';
  font-size:1em;
  color:#333;
  
}

#form-sun-moon-rising-calculator #zp-birthreport-form .zp-input-text-wrap input{
  font-family: 'Roboto';
  color:#333;
  font-size:0.9em;
  width:100%;
  height:36px;
  padding-left:10px;
  border: 1px solid #ccc;
}

#form-sun-moon-rising-calculator  #zp-birthreport-form .zp-birthdate select{
  font-family: 'Roboto';
  color:#333;
  font-size:0.9em;
  height:36px;
  padding-left:10px;
  border: 1px solid #ccc;
}

#form-sun-moon-rising-calculator  #zp-birthreport-form .zp-birthtime select{
  font-family: 'Roboto';
  color:#333;
  font-size:1em;
  height:36px;
  padding-left:10px;
  border: 1px solid #ccc;
}
#form-sun-moon-rising-calculator  p.zp-unknown-time-field{
  font-family: 'Roboto';
  margin-top:10px;
  margin-bottom:0px;
  margin-left:10px;
  color:#333;
}
#form-sun-moon-rising-calculator  #zp-offset-wrap{
  /*display:none;
  visibility:hidden;*/
}
p#zp-submit-wrap{
  margin-top:20px;
  margin-bottom: 30px;
}


#form-sun-moon-rising-calculator #zp-offset-wrap, #form-sun-moon-rising-calculator #zp_offset_geo {
    padding: 0 10px;
    height: 10px;
}

#form-sun-moon-rising-calculator #zp_offset_geo {
  pointer-events: none;      /* prevents clicks & selection */
  user-select: none;         /* prevents text selection */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */

  caret-color: transparent;  /* hides text cursor */
  outline: none;             /* removes focus outline */
}

/* End form style */


#form-sun-moon-rising-calculator  #zp-report-wrap p.zp-report-backlink{
  font-family: 'Roboto';
  text-transform:uppercase;
  font-weight:bold;
  display:inline-block;
  float:right;
  padding: 13px 29px;
  line-height: 17px;
  font-size: 14px;
  /*border:2px solid #333;*/
  
}
#form-sun-moon-rising-calculator  #zp-report-wrap p.zp-report-backlink a{
  color:white;
  background-color: #4679c5;
  padding: 8px 15px;
}

#form-sun-moon-rising-calculator  #zp-report-wrap p.zp-report-backlink a:hover{
  /*color:#65bc7b;*/
}

#form-sun-moon-rising-calculator  #zp-report-wrap p.zp-report-backlink a:focus{
  outline: 2px solid #4679c5;
  outline-offset: 2px;
}


#form-sun-moon-rising-calculator .ui-state-error{
color: #d32f2f;            /* clear red error text */
  background-color: #fdecea; /* subtle light red background */
  border: 1px solid #f5c2c7; /* soft border */
  
  padding: 2px 6px;          /* small padding */
  margin: 10px auto 0px auto;   /* margin */
  
  font-size: 0.9rem;         /* slightly smaller text */
  border-radius: 3px;        /* subtle rounding */

  display: block;
  text-align: center;
  line-height: 1.2;
}

/* text before calculator : "USE OUR CALCULATOR TO FIND OUT YOUR ZODIAC SIGNS...." */
#column-text-before-cal .fusion-column-wrapper{
    display: flex;
    align-items: center;
    padding: 40px 20px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #ccc;
}


/* Texts below the form */
#form-sun-moon-rising-calculator #zp-form-tip{
  font-size: 0.7em;
  margin-bottom: 0px;
  line-height: 1.6;
}

#form-sun-moon-rising-calculator .zp-birth-time-note{
font-size: 0.7em;
  margin-bottom: 0px;
  line-height: 1.6;
}


/*Pro tip (prevents flicker on first load) for header */
#header-calculator {
  will-change: transform, opacity;
}

/* Hide results containers*/
.cnt-cltr-rstls{
  display:none !important;
}

.cnt-cltr-rstls.is-active{
  display:flex !important;
}

/* chart image */
#form-sun-moon-rising-calculator .zp-chart-drawing{
  display: block;
  margin: 30px auto 20px auto;
  width: 500px;
  max-width: 100%;
}

#form-sun-moon-rising-calculator #zp-submit-wrap #zp-fetch-birthreport{
  font-size: large;
  border-radius: 4px;
  margin-bottom: 0px;
}

#form-sun-moon-rising-calculator table.zp-report-header{
  border-style:solid;
  border-color:#ccc;
  /*border-bottom-width:2px;
  border-left-width:2px;
  border-right-width:2px;*/
  color:#333;
  background-color:rgba(0,0,0,0);
}

#form-sun-moon-rising-calculator caption.zp-report-caption{
  /*border-color:#ccaf81;*/
  font-size:1em;
  color:#333;
  /*border-top-width:2px;
  border-left-width:2px;
  border-right-width:2px;
  background-color:rgba(0,0,0,0);*/
}

#form-sun-moon-rising-calculator .zp-report-section-title.zp-planets_in_signs-title{

  color:#333;
  font-size:1.6em;
  padding-top:20px;
  padding-bottom:26px;
  line-height:1.2;
}

#form-sun-moon-rising-calculator p.zp-subheading{
  margin-top: 50px;
  color:#333;
  font-size:1.5em;
  padding-left:10px;
  line-height: 1.2;
}

/* Hide everything inside report */
#form-sun-moon-rising-calculator #zp-report-content h3,
#form-sun-moon-rising-calculator #zp-report-content p {
  display: none;
}

/* Keep form visible */
#form-sun-moon-rising-calculator #zp-birthreport-form p {
  display: block;
}


#zodiac-insights #other_zodiac_signs_container{
  display:none;
}

#zodiac-insights #calcul_sun_sign,
#zodiac-insights #calcul_moon_sign,
#zodiac-insights #calcul_rising_sign,
#zodiac-insights #calcul_sun_sign,
#zodiac-insights #calcul_chinese_sign,
#zodiac-insights #calcul_native_am_sign{
  color:#333;
  text-transform:capitalize;
}

#zodiac-insights #calcul_sun_sign,
#zodiac-insights  #calcul_chinese_element,
#zodiac-insights  #calcul_native_am_sign{
  margin-left:10px;
}

#btn_chekout_my_tshirt{
  width:100%;
  font-weight:bold;
  font-size:1.5em;
}

#name-calculator{
  color:#333;
  font-weight:bold;
}

.titles-calculator{
  /*display:block;*/
  /*border: 1px solid #333;*/
  /*padding: 10px 10px 10px 20px;*/
}


#zp-report-content p{
  font-size: 0.8em;
  line-height: 1.7;
}

span.interpretations-titles{
font-weight: bold;
font-size: 1.1em;
}

#zp-report-content .birth_report_links{
  font-size: 1.1em;
  color: #4292c5;
  border-bottom: 2px solid #ddd;
} 

img.images-birth-chart-raport{
margin-bottom: 20px;
}


#form-sun-moon-rising-calculator .zp-report-backlink a::before {
    content: "↻"; /* or 🔄 */
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

#form-sun-moon-rising-calculator .zp-report-backlink a:hover::before {
    transform: rotate(180deg);
}




.astro-table {
  font-family: monospace;
  background: #fff;
  color: #000;
  padding: 16px;
  border-radius: 10px;
  max-width: 700px;
}

.astro-table table {
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
}

.astro-table th, .astro-table td {
  padding: 6px;
  border-bottom: 1px solid #333;
  text-align: left;
}

.astro-header {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
}

.astro-aspects, .astro-elements {
  margin-top: 12px;
  font-size: 13px;
}

/* =========================
   BASE CONTAINER (DESKTOP)
========================= */

#astro-export{
  background:#fff;
  color:#000;
  padding:20px;
  border-radius:16px;
  border:1px solid #ccc;

  width:740px;   /* desktop export fixed */
  max-width:100%;
  margin:0 auto;

  font-family:'Courier New', monospace;
}

#astro-export .astro-header {
  font-size: 16px;
  margin-bottom: 15px;
  text-align: center;
  letter-spacing: 1px;
}

#astro-export table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  font-weight: 600;
}

#astro-export th,
#astro-export td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #222;
}

#astro-export th {
  color: #aaa;
  font-weight: normal;
}


.astro-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

.astro-watermark {
  text-align: right;
  font-size: 11px;
  /*color: #555;*/
  /*color: #fff;*/
  color: #000;
  margin-top: 12px;
}

.astro-header {
  font-size: 20px;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 1px;
}



.astro-flex-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 15px;
}

.astro-aspects {
  width: 60%;
  font-size: 13px;
  line-height: 1.6;
}

.astro-elements {
  width: 40%;
  text-align: right;
  font-size: 13px;
  line-height: 1.6;
}



.astro-score-separator{
  width:100%;
  max-width:260px;
  margin:18px auto 14px;
  position:relative;
  text-align:center;
}

.astro-score-separator::before{
  content:"";
  display:block;
  height:1px;
  background:repeating-linear-gradient(
    90deg,
    rgba(0,0,0,.12),
    rgba(0,0,0,.12) 6px,
    transparent 6px,
    transparent 12px
  );
}

.astro-score-separator::after{
  content:"✦";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  font-size:12px;
  color:rgba(0,0,0,.35);
  background:#fff;
  padding:0 6px;
}


.astro-score{
  margin-top:14px;
  text-align:center;
}

.astro-score-label{
  display:block;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:.6;
  margin-bottom:4px;
}

.astro-score-main{
  font-size:14px;
  font-weight:400;
}

.astro-explanation {
  text-align: center;
  margin-top: 8px;
  font-size: 13px;
  /* black theme */
  /* color: #ccc; */
  /* white theme */
  color: #3d3d3d;
  line-height: 1.5;
}

.astro-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.astro-meta {
  font-size: 12px;
  opacity: 0.8;
}

.astro-meta table {
  border-collapse: collapse;
}

.astro-meta td {
  padding: 2px 6px;
}

.astro-bottom-row {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  gap: 20px;
}

.astro-ai {
  margin-top: 15px;
  font-size: 13px;
  opacity: 0.9;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 10px;
}

/* Buttons row */
.astro-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 15px;
}

/* Base button */
/* keep buttons visually consistent */
.astro-btn {
  border: none;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  display: inline-block;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Main button */
.astro-btn-primary {
  background: #f59e0b;
  color: #fff;
}

.astro-btn-primary:hover {
  color: #3d3d3d;
  background: #fbbf24;
  transform: translateY(-1px);
}



/* Highlight (Full Chart) */
.astro-btn-accent {
  background: linear-gradient(135deg, #ff7a18, #ffb347);
  color: #fff;
}

.astro-btn-accent:hover {
  transform: translateY(-1px) scale(1.03);
}

/* Subtle (Reddit) */
.astro-btn-muted {
  background: #ecf0f1;
  color: #2c3e50;
  width: 160px;
  max-width: 160px;
}

.astro-btn-muted:hover {
  background: #dcdfe1;
}


  #download-chart {
    /*background-color: #1f1f28;
    color: #fff;
    border: 2px solid #3498db;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;*/
  }
  #download-chart:hover {
   /* background-color: #3498db;
    color: #0f0f14;
    border-color: #fff;*/
  }

#logo-chart{
    border-style: none;
    vertical-align: top;
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    width: 110px;
}

.astro-wheel-download {
  margin-top: 12px;
  text-align: center;
}

#download-wheel {
  /*background: linear-gradient(135deg, #DACA2D, #D7651A);
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;*/
    background: linear-gradient(135deg, #ff7a18, #ffb347);
    color: #fff;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;

}

#download-wheel:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}


#download-full-chart {
  /*background: linear-gradient(135deg, #6C5CE7, #00CEC9);
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 8px;
  transition: all 0.25s ease;*/
}

#download-full-chart:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}



/* Center everything inside #output */
#output {
  display: flex;
  flex-direction: column; /* stack chart + buttons vertically */
  align-items: center;    /* horizontal centering */
  gap: 20px;              /* space between chart and buttons */
  margin-bottom: 50px;
}







/* =========================
   EXPORT CHART UI
========================= */

.astrox-export-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}


/* =========================
   EXPORT BUTTON
========================= */
.astrox-export-toggle{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:240px;
padding:14px 48px 14px 20px;
border:none;
border-radius:12px;
cursor:pointer;
font-size:15px;
font-weight:700;
color:#fff;
background:#0f172a;
box-shadow:0 10px 25px rgba(15,23,42,.35);
transition:transform .25s,background .25s,box-shadow .25s;
}

.astrox-export-toggle:hover{
transform:translateY(-2px);
background:#1e293b;
box-shadow:0 14px 35px rgba(15,23,42,.45);
}

.astrox-export-toggle:active{
transform:translateY(1px);
}



/* chevron */

.astrox-export-toggle::after{

  /*content:"⌄";*/
  content:"\2304";
  position:absolute;

  right:16px;

  top:50%;

  transform:
  translateY(-50%)
  rotate(0deg);

  font-size:18px;

  opacity:.8;

  transition:.3s;

}




.astrox-export-wrapper.is-open
.astrox-export-toggle::after{

  transform:
  translateY(-50%)
  rotate(180deg);

}


/* pressed effect */

.astrox-export-wrapper.is-open
.astrox-export-toggle{

  transform:translateY(1px);

  box-shadow:
  0 6px 18px rgba(0,0,0,.14);

}



/* =========================
   PANEL
========================= */

.astrox-export-panel{

  margin-top:14px;

  width:360px;
  max-width:360px;

  padding:0 16px;

  border-radius:14px;

  background:
  rgba(255,255,255,.72);

  backdrop-filter:blur(10px);

  box-shadow:
  0 12px 35px rgba(0,0,0,.08);

  overflow:hidden;

  height:0;
  opacity:0;

  pointer-events:none;

}


.astrox-export-panel.is-open{

  pointer-events:auto;

}


/* title */

.astrox-export-title{

  font-size:15px;
  font-weight:700;

  margin-bottom:14px;

  text-align:center;

  opacity:.9;

}



/* options */

.astrox-export-option{

  display:flex;
  align-items:center;

  gap:10px;

  padding:10px;

  margin-bottom:8px;

  border-radius:10px;

  font-size:15px;

  cursor:pointer;

  transition:
  background .25s;

}


.astrox-export-option:hover{

  background:
  rgba(0,0,0,.04);

}


.astrox-export-option input{

  transform:scale(1.15);

}



/* download button */

#astrox-run-export{

  margin-top:14px;

  width:100%;

  padding:12px;

  font-size:15px;

}


/* table chart optimization for mobile */
/* =========================
   BASE (DESKTOP)
========================= */

/* Desktop = NO scroll */
/* =========================
   TABLE SCROLL WRAPPER
========================= */

.astro-table-scroll{
  width:100%;
  overflow:hidden;
}



#astrox-quick-capture{
  position:fixed;
  left:0;
  top:0;
  opacity:0;
  pointer-events:none;
}





/* kill ALL previous constraints */
#astro-export-table {
  min-width: 0 !important;
  table-layout: auto !important;
}



/* cell control */
#astro-export-table th,
#astro-export-table td{
  font-size:12px;
  padding:3px 4px;
}

/* icons fixed */
#astro-export-table img.astro-icon{
  width:16px;
  height:16px;
}


.astro-elements-compact {
  margin-top: 5px;
}

/*  ================================  Big 3 Card Section */


#big3-card-section {
  margin: 0px 0 30px 0;
  text-align: center;

}


 #big3-card-section .astro-h2-title{
  font-size: 27px;
  margin-bottom: 15px;
  text-align: center;
}


#big3-card-section .astro-lead {

    font-size: 16px;
    max-width: 720px;
    margin: 0 auto 25px auto;
    text-align: center;
    line-height: 1.6;
    opacity: 0.8;
}



/*  Generate My Big 3 Card Button */
#generate-big3-card{
  position:relative;
  padding:14px 26px;
  border-radius:12px;

  border:1px solid rgba(255,215,120,0.25);

  background:
    radial-gradient(
      circle at top,
      rgba(255,215,120,0.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #111 0%,
      #0b0b0b 100%
    );

  color:#fff;
  font-weight:600;
  letter-spacing:.4px;

  cursor:pointer;
  overflow:hidden;

  transition:all .25s ease;

  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}




#generate-big3-card:hover{
  transform:translateY(-2px) scale(1.02);

  border-color:rgba(255,215,120,0.55);

  background:
    radial-gradient(
      circle at top,
      rgba(255,215,120,0.22),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #121212 0%,
      #0b0b0b 100%
    );

  box-shadow:
    0 0 25px rgba(255,215,120,0.18),
    0 0 60px rgba(255,215,120,0.08);
}


#generate-big3-card::after{
  content:"";
  position:absolute;
  inset:-40%;

  background:radial-gradient(
    circle,
    rgba(255,215,120,0.15),
    transparent 60%
  );

  opacity:0.6;
  pointer-events:none;
}



/* Active press (feels like “launching”) */
#generate-big3-card:active{
  transform:translateY(1px) scale(0.99);

  box-shadow:
    0 0 18px rgba(255,215,120,0.22),
    0 0 40px rgba(255,215,120,0.10);
}


/* Animated cosmic shimmer sweep - This is the part that makes it feel “alive”*/
#generate-big3-card::before{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,215,120,0.12) 50%,
    transparent 100%
  );

  transform:translateX(-120%);
  mix-blend-mode:screen;
  pointer-events:none;
}


#generate-big3-card:hover::before{
  animation:btnShimmer 1.2s ease;
}

@keyframes btnShimmer{
  from{ transform:translateX(-120%); }
  to{ transform:translateX(120%); }
}



#download-big3-card{
  position:relative;
  overflow:hidden; /* 🔥 IMPORTANT FIX */

  padding:12px 22px;
  border-radius:10px;

  border:1px solid rgba(255,255,255,0.12);

  background:rgba(255,255,255,0.04);
  color:#e5e7eb;

  cursor:pointer;
  font-weight:500;
  letter-spacing:.3px;

  transition:all .25s ease;

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

#download-big3-card:hover{
  transform:translateY(-2px);

  border-color:rgba(255,215,120,0.5);

  box-shadow:
    0 0 18px rgba(255,215,120,0.15),
    0 0 40px rgba(255,215,120,0.08);

  color:#fff;
}


#download-big3-card:active{
  transform:translateY(0px) scale(0.98);
  box-shadow:0 0 10px rgba(255,215,120,0.1);
}


#download-big3-card::before{
  content:"";
  position:absolute;
  inset:-40%; /* 🔥 prevents edge clipping artifacts */

  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,215,120,0.18) 50%,
    transparent 60%
  );

  transform:translateX(-120%) rotate(8deg);
  opacity:0.8;
}


#download-big3-card:hover::before{
  animation:cosmicDownloadSweep 1.1s ease-out;
}

@keyframes cosmicDownloadSweep{
  0%{
    transform:translateX(-120%) rotate(8deg);
  }
  100%{
    transform:translateX(120%) rotate(8deg);
  }
}




.big3-card-result {
  display: none;
  margin-top: 30px;
  /* Give the Big 3 Card section a subtle visual container like: */ 
  background: #f1f5f9;
  padding: 40px 30px;
  border-radius: 10px;
  /* This visually marks it as the main interactive moment of the page. */
}



#big3-card-result {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top, #0b0f1a 0%, #05070d 60%, #02030a 100%);
}


#canvas-card {
  position: relative;
  z-index: 5;
  border-radius: 14px;
  will-change: transform, filter, box-shadow;
}


.star-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: screen;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  will-change: transform, opacity;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}

.shooting-star{
  position:absolute;
  height:3px;
  border-radius:999px;

  background:linear-gradient(
    to right,
    rgba(255,255,255,1) 0%,
    rgba(255,245,190,.95) 15%,
    rgba(255,255,255,.4) 45%,
    transparent 100%
  );

  transform:rotate(-35deg);

  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.9))
    drop-shadow(0 0 12px rgba(255,215,120,.4));

  pointer-events:none;
}

.big3-card-preview{
     display: flex;
    justify-content: center;
    align-items: center;
}

.big3-card-preview img {
  max-width: 320px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.big3-card-actions {
  margin-top: 15px;
}

.big3-how-to {
  color: #fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width:420px;
  margin:30px auto 0px auto;

  padding:20px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(6px);
}

.big3-how-to h3{
  color: #fff !important;
  font-size: 20px !important;
}

.big3-how-to ul {
  /*padding-left: 18px;*/
  font-size: 16px;
  list-style:none;
  padding:0;
  margin:0;

  display:flex;
  flex-direction:column;
  gap:10px;
  align-items: flex-start;

}

.big3-how-to li{
   position:relative;
   margin:2px 0;
  line-height:1.5;
  opacity:.9;
  color: #ffffffe6;
  padding-left:22px;
  text-align: left;
}


/* Checkmark bullet */
.big3-how-to li::before{
  content:"\2713";
  position:absolute;
  left:0;
  color:#6CB721;
  font-weight:700;
}


.big3-hub-link {
  margin-top: 15px;
}

.big3-card-preview,
.big3-card-actions,
.big3-how-to,
.big3-hub-link {
  position: relative;
  z-index: 2;
}



.how-to-links {
  position: relative;
  display: inline-block;
  color: #dbeafe;
  text-decoration: none;
  padding-bottom: 4px; /* creates space under text */
  transition:
    color 0.25s ease,
    text-shadow 0.25s ease,
    transform 0.25s ease;
}

/* custom underline */
.how-to-links::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 220, 120, 0.9),
    transparent
  );

  transform: scaleX(0.35);
  transform-origin: center;
  opacity: 0.6;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.how-to-links:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 215, 100, 0.35);
  transform: translateY(-1px);
}

.how-to-links:hover::after {
  transform: scaleX(1);
  opacity: 1;
}



/* End Big 3 Card Section */




/*  ================================  Share Section */

#share-big3 {
  background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
  padding:60px 20px;
  border-radius:12px;
  margin-bottom: 30px;
}

#share-big3 .astro-lead{
  font-size: 16px;
    max-width: 720px;
  margin: 0 auto 25px auto;
  text-align: center;
  line-height: 1.6;
}



#share-big3 .astro-h2-title{
  font-size: 27px;
  margin-bottom: 15px;
  text-align: center;
}

.share-preview {
  max-width: 520px;
  margin: 20px auto 25px auto;
}


.share-preview-title {
  font-size: 14px;
  margin-bottom: 6px;
  text-align: center;
  opacity: 0.8;
}

.share-text-box {
  /* add a light container style to make it look like a social post preview
      This subtly tells users:
      “This is what your shared message will look like.”
      Which increases copy clicks.
  */
  /*background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
  */

  /*
  background: #f1f5f9;
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  */

  background:#f6f6f6;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:10px;
  padding:16px 18px;
  font-size:15px;
  line-height:1.7;
  white-space:pre-line;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
  position:relative;

}

/* Add subtle “copy-ready glow hint” */
.share-text-box::after{
  content:"Tap copy to share";
  position:absolute;
  bottom:8px;
  right:12px;
  font-size:11px;
  color:rgba(100,116,139,0.6);
  pointer-events:none;
}


.share-style-switch{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
  margin:14px 0 18px;
}

.share-style-switch button{
  position:relative;
  padding:7px 12px;
  font-size:13px;
  font-weight:500;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.7);
  color:#0f172a;
  cursor:pointer;
  transition:all .25s ease;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

.share-style-switch button:hover{
  transform:translateY(-1px);
  border-color:rgba(99,102,241,0.25);
  background:#fff;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.06);
}

.share-style-switch button.active{
  background:linear-gradient(
    135deg,
    rgba(99,102,241,0.12),
    rgba(236,72,153,0.08)
  );
  border-color:rgba(99,102,241,0.35);
  color:#0f172a;
  box-shadow:
    0 10px 25px rgba(99,102,241,0.12);
}





/*
🔥 4. VIRAL BUTTON STRATEGY (IMPORTANT UX INSIGHT)

Right now you have too many equal buttons:

👉 FB / X / Reddit / Copy all same weight

That reduces virality.

✅ BEST PRACTICE (used in viral apps)
You should visually emphasize:
🥇 PRIMARY ACTION:
Copy Result (most viral behavior)
🥈 SECONDARY:
X / Reddit
🥉 LOW PRIORITY:
Facebook / Tumblr / Pinterest
*/



#share-btn-big3-copy{
  flex:none;              /* ❌ remove flex behavior */


  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  margin:0 auto;          /* center it properly */
  display:block;          /* avoids flex weirdness */

  background:linear-gradient(
    135deg,
    #111827,
    #374151
  );
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  width:100%;          /* ❌ remove full width */
  min-width:140px;     /* keeps it dominant */

  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  font-weight:600;

}


#share-btn-big3-copy:hover{
  transform:translateY(-2px);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.2);
}

.primary-row .share-btn-big3,
.secondary-row .share-btn-big3{
  flex:1 1 120px;
  min-width:90px;
}


.share-buttons-big3{
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.share-btn-big3 i{
  font-size:20px;
  line-height:1;
  display:inline-block;
  color: #fff;
}


.share-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between; /* instead of center */
  gap:10px;
  width:100%;
}

#share-btn-big3-more{
   background: rgba(15, 23, 42, 0.06);
  border:1px solid rgba(15,23,42,0.12);

  color: #334155; /* slate-700 */
  font-weight: 600;
  transition: all .2s ease;

  cursor:pointer;
}

#share-btn-big3-more:hover {
  background: rgba(15, 23, 42, 0.10);
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a; /* deeper slate */
  transform: translateY(-1px);
}

.share-buttons-big3.open #share-btn-big3-more {
  background: rgba(15, 23, 42, 0.12);
  border-color: rgba(15, 23, 42, 0.22);
  color: #0f172a;
}

.secondary-row{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:all .3s ease;
}

.primary-row button,
.secondary-row button{
  flex:1;
}



.share-buttons-big3.open .secondary-row{
  max-height:200px;
  opacity:1;
}

.share-btn-big3 {
  flex:1 1 120px;   /* 👈 key upgrade */
  min-width:90px;
  padding:9px 12px;
  border-radius:8px;
  font-size:14px;
  background:#e5e7eb;
  color:#111;
  border:none;
  cursor:pointer;
  transition:all .2s ease;
}

.share-btn-big3:hover{
  background:#d1d5db;
  /*transform:translateY(-1px);*/
  color:#0f172a;
  transform:translateY(-2px) scale(1.05);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}


/* BRANDS COLORS */

.x-big3{
  background:#111;
}

.x-big3:hover{
  background:#2a2a2a;
}

.threads-big3{
  background:#000;
}

.threads-big3:hover{
  background:#1a1a1a;
}

.reddit-big3{
  background:#ff4500;
}

.reddit-big3:hover{
  background:#e03e00;
}

.whatsapp-big3{
  background:#25D366;
}

.whatsapp-big3:hover{
  background:#20b958;
}

.fb-big3{
  background:#1877F2;
}

.fb-big3:hover{
  background:#1669d1;
}

.pinterest-big3{
  background:#E60023;
}

.pinterest-big3:hover{
  background:#c4001d;
}

.tumblr-big3{
  background:#36465D;
}

.tumblr-big3:hover{
  background:#2c3a4d;
}



/* ================================ Engagement Section (Think You Understand Your Big 3)  */

#big3-engagement {
  position:relative;
  overflow:hidden;

  background: #0f172a;
  color: #ffffff;
  padding: 60px 20px;
  margin-bottom: 30px;
  border-radius: 10px;
  z-index:1;
}



#big3-engagement .astro-h2-title{
  font-size: 27px;
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
}


.engagement-spinner-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:14px 0 18px;
}

.engagement-spinner{
  width:26px;
  height:38px;

  border-radius:4px;

  background:
  linear-gradient(
  135deg,
  #F3C766,
  #FFD978
  );

  border:1px solid rgba(255,255,255,.25);

  transform-style:preserve-3d;
  backface-visibility:hidden;

  box-shadow:
  0 0 10px rgba(243,199,102,.45),
  0 0 25px rgba(243,199,102,.25);

  position:relative;
}

.engagement-spinner::before{
  content:"✦";

  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  color:rgba(255,255,255,.95);
}

#big3-engagement .astro-container .astro-lead {
  max-width: 700px;
  margin: 0 auto 20px auto;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.8;
  color: #fff;

}

.engagement-highlight {
  max-width: 600px;
  margin: 20px auto;
  background: rgba(255,255,255,0.08);
  padding: 15px 20px;
  border-radius: 6px;
  text-align: center;
  font-size: 15px;
}

div.engagement-highlight p{
  margin: 0px;
}

.astro-cta {
  text-align: center;
  margin-top: 25px;
}


.engagement-perks{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.perk-item{
    background:rgba(255,255,255,.06);
    padding:10px 14px;
    border-radius:999px;
    font-size:14px;
    border:1px solid rgba(255,255,255,.08);
    transition:.25s;
}

.perk-item:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.1);
}


.engagement-btn-primary{

  background: linear-gradient(135deg,#f59e0b,#fbbf24);
  color:#111;
  /*border-radius:999px;*/
  border-radius:12px;
  padding:14px 28px;
  box-shadow: 0 0 30px rgba(245,158,11,.25);
  transition:.3s;
  font-size:  16px;
}

.engagement-btn-primary:hover{
  transform:
  translateY(-2px)
  scale(1.03);
  box-shadow: 0 0 40px rgba(245,158,11,.45);
  color:#111;
}



div.astro-cta p.engagement-micro{
  margin-top:12px;
  opacity:.65;
  font-size:13px;
  text-align:center;
  color: #fff;
}



/* End Engagement Section */







/* -------------------------------- */
/* Your Full Personality Blueprint */
/* -------------------------------- */

#zodiac-insights {
  background: #f8fafc;
  padding: 60px 10px 10px 10px;
  margin-bottom: 30px;
  border-radius: 10px;
}


#zodiac-insights .astro-h2-title{
  font-size: 27px;
  margin-bottom: 15px;
  text-align: center;
}

/* Intro paragraph */

#zodiac-insights .astro-lead{
  max-width: 720px;
  margin: 0 auto 40px auto;
  text-align: center;
  line-height: 1.6;
  font-size: 16px;
}

/* Individual blocks */
/* Improve section spacing */
.insights-section {
  background: #ffffff;
  border-radius: 10px;
  padding: 22px 10px;
  margin-bottom: 28px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  text-align:center;
}

/* Labels */

.insights-label {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 6px;
  color: #444;
}

/* Values */

.insights-value {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Micro-previews */

.micro-preview{
  font-size: 15px;
  line-height: 1.6;
  color: #444;

  text-align:center;
  max-width:600px;
  margin:10px auto 0 auto;
  padding: 0 20px;
}


/* Description blocks */
.insights-description{
  display:none;
  max-width:650px;
  margin:10px auto 0;
  text-align:center;
  font-size:16px;
  line-height:1.6;
  letter-spacing: 0.1px;
  opacity:0;
  transform:translateY(6px);
  transition:0.25s ease;
}


/* Open state */
.insights-description.open{
  display:block;
  opacity:1;
  transform:translateY(0);
}


/* Toggle button */

.insights-toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:16px auto 14px auto;

  padding:10px 16px;
  /*border-radius:999px;*/
  border-radius:12px;

  font-size:14px;
  font-weight:600;

  background:rgba(17,24,39,0.92);
  color:#fff;

  border:1px solid rgba(255,255,255,0.08);

  box-shadow:0 6px 18px rgba(0,0,0,0.08);

  transition:all .25s ease;
  cursor:pointer;
}

.insights-toggle-btn:not(.insights-toggle-btn--primary):hover{
  transform:translateY(-2px);
  background:#111827;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.insights-toggle-btn::after{
  content:"↓";
  color: #fff;
  margin-left:8px;
  font-size:14px;
  opacity:.7;
  transition:.2s;
  display:inline-block;
}

.insights-toggle-btn:hover::after{
  transform:translateY(2px);
  opacity:1;
}

/* OPEN STATE */
.insights-toggle-btn.is-open::after{
  content:"↑";
  color: #fff;
  font-size:13px;
  opacity:.85;
}


/* hide the buttons to stop CTA fatigue + hierarchy dilution */
.chinese-section .insights-toggle-btn,
.native-section .insights-toggle-btn{
  display:none;
}



/* Reveal Your Full Personality button */
.insights-toggle-btn--primary{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  margin:20px auto 16px;
  padding:14px 22px;

  /*border-radius:999px;*/
  border-radius:12px;

  font-size:15px;
  /*font-weight:800;*/

  /* IMPORTANT: not pure black */
  background:#111827;   /* premium black */
  color:#ffffff;

  border:1px solid rgba(245,158,11,0.35);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.18);

  cursor:pointer;
  transition:all .2s ease;
}

/* hover = slightly lighter, not different color system */
.insights-toggle-btn--primary:hover{
  transform:translateY(-2px);

  background:#1f2937;

  border-color:rgba(245,158,11,0.55);

  box-shadow:
    0 14px 28px rgba(0,0,0,0.22);
}

/* arrow stays subtle */
.insights-toggle-btn--primary::after{
  content:"↓";
  margin-left:8px;
  font-size:14px;
  opacity:0.8;
  transition:transform .2s ease, opacity .2s ease;
}

.insights-toggle-btn--primary:hover::after{
  transform:translateX(3px);
  opacity:1;
}



.insights-section:not(.synthesis-section) .insights-toggle-btn{
  background:rgba(17,24,39,0.85);
  font-size:13px;
  padding:9px 14px;
  box-shadow:none;
  opacity:0.95;
}


/* Learn more links */

.insights-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  text-decoration: none;
  color: #2563eb;
  font-weight: 500;
}

.insights-link:hover {
  text-decoration: underline;
}

/* Zodiac images */

.insights-image {
  float: right;
  max-width: 85px;
  margin-left: 15px;
  border-radius: 8px;

  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Synthesis box */

.synthesis-box {
  background: #f1f5f9;
  padding: 15px;
  border-radius: 6px;
  /* overwrite max-width in .insights-description */
  max-width:100%;
  margin:10px auto 20px auto;
  text-align:center;
}


.insights-main .insights-subtext{
display: block;
max-width: 500px;
margin: auto;
font-size: 15px;
line-height: 1.6;
color: #444;
margin-top: 20px;
margin-bottom: 10px;
}



.insights-header {
  text-align:center;
}

/* Left text column */
.insights-main {
  flex: 1;
}


.insights-icon{
  margin:10px auto 12px auto;
  width:80px;
  height:80px;
}

.insights-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.08));
}



.synthesis-title{
    /*margin-top: 20px;*/
    font-size: 25px;
    font-family: 'Poppins';
    font-weight: 600;
}

div#synthesis-hook{
font-size: 0.9em;
line-height: 1.6;
color: #444;
margin-bottom: 15px;
}


.insights-personality-pattern{
    text-align: center;
    margin-bottom: 30px;
}

.insights-text{
    text-align: center;
    margin-bottom: 40px;
}

.insights-text::after{
    content: "";
    display: block;
    height: 1px;
    margin: 50px 0;
    background: linear-gradient(to right,transparent,rgba(15,23,42,0.15),transparent);
}

#personality-synthesis-puzzle{
   /*float: right;
    max-width: 85px;
    margin-left: 15px;
    border-radius: 8px;
    width: 80px;
    height: 80px;
    object-fit: contain;*/
    max-width: 85px;
    width: 80px;
    height: 80px;
}

/* for animation */
.synthesis-big3,
.synthesis-other,
.synthesis-text{
  
}


#full-synthesis-p{
  padding-top: 20px;
}


/* share section */
.insights-share-cta{
  display: inline-block;
  width: 100%;
  max-width: 500px;
  /*margin: 20 auto 0px auto;*/
  font-size: 16px;
  text-align: center;
  line-height: 1.6;
  color: #444;
}

.insights-share-cta p.cta-question{
margin-bottom: 0px;
}
.insights-share-cta p.cta-action{
margin-bottom: 20px;
}



.rarity-box{
  padding:16px;
  border-radius:14px;
  background:transparent;
  border:none;
  box-shadow:none;
  position:relative;
}




.rarity-highlight{

  max-width:420px;
  margin:0 auto 14px;
  padding:18px 16px;

  position:relative;
  overflow:hidden;

  text-align:center;

  border-radius:18px;

  background:
  linear-gradient(
    145deg,
    #fffaf0 0%,
    #fff 35%,
    #fef3c7 100%
  );

  border:1px solid rgba(245,158,11,.30);

  box-shadow:
    0 14px 35px rgba(245,158,11,.12),
    inset 0 1px 0 rgba(255,255,255,.85);

}


/* top spotlight */

.rarity-highlight::before{

  content:"";

  position:absolute;

  top:-80px;
  left:-10%;

  width:120%;
  height:160px;

  background:
  radial-gradient(
    ellipse at center,
    rgba(255,255,255,.85),
    transparent 70%
  );

  opacity:.9;

}


/* shimmer pass */

.rarity-highlight::after{

  content:"";

  position:absolute;

  top:0;
  left:-150%;

  width:60%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );

  transform:skewX(-20deg);

  animation:rarityShine 5s infinite;

}


@keyframes rarityShine{

  0%{
    left:-150%;
  }

  35%{
    left:160%;
  }

  100%{
    left:160%;
  }

}



.rarity-percent{

  margin-top:10px;
  font-size:18px;
  font-weight:800;
  line-height: 1.25;

  color: #3d3d3d;
  opacity: 0.8;

}

.rarity-percent strong{

  color:#d97706;
  font-size:22px;

}


.rarity-rank{

  margin-top:8px;

  font-size:14px;

  color:#475569;

}


/* BASE (keep yours) */
.rarity-title{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;

  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  color:#111827; /* stronger contrast than #1a1a1a */

  font-size:11px;
  font-weight:900;
  letter-spacing:1px;

  border:1px solid rgba(255,255,255,0.25);

  box-shadow:
    0 8px 18px rgba(245,158,11,.25),
    0 2px 6px rgba(0,0,0,.08);
}




/* only modify accents by rarity tier */
.badge-inner{
  display:inline-block;
  font-weight:900;
  letter-spacing:1px;
  color:inherit;
}


/* LEGENDARY */
.badge-legendary{
  box-shadow:
    0 8px 18px rgba(245,158,11,.25),
    0 0 18px rgba(255,215,0,.30),
    0 0 34px rgba(255,215,0,.12);
}

.badge-legendary .badge-inner{
  text-shadow:0 0 6px rgba(255,215,0,.35);
}


/* RARE */
.badge-rare{
  box-shadow:
    0 8px 18px rgba(245,158,11,.22),
    0 0 20px rgba(139,92,246,.25);
}

.badge-rare .badge-inner{
  text-shadow:0 0 6px rgba(139,92,246,.30);
}


/* UNCOMMON */
.badge-uncommon{
  box-shadow:
    0 8px 18px rgba(245,158,11,.20),
    0 0 10px rgba(148,163,184,.12);
}

.badge-uncommon .badge-inner{
  text-shadow:0 0 5px rgba(148,163,184,.25);
}


/* COMMON */
.badge-common{
  box-shadow:0 8px 18px rgba(245,158,11,.18);
  opacity:0.95;
}

.badge-common .badge-inner{
  text-shadow:0 0 5px rgba(59,130,246,.25);
}


/* UNIVERSAL */
.badge-universal{
  box-shadow:
    0 8px 18px rgba(245,158,11,.20),
    0 0 14px rgba(56,189,248,.12);
}

.badge-universal .badge-inner{
  text-shadow:0 0 5px rgba(34,197,94,.25);
}



.rarity-total{
  font-size:13px;
  margin-top:6px;
  opacity:0.7;
}

.rarity-box::after{
  content:"";
  display:block;
  height:1px;
  margin:14px 0;
  background:linear-gradient(to right,transparent,rgba(15,23,42,0.15),transparent);
}




.share-boost{
  max-width: 500px;
  font-size:14px;
  line-height:1.6;
  color:#1e293b;
  padding:10px;
  border-radius:10px;
  background:rgba(245,158,11,0.06);
  border:1px solid rgba(245,158,11,0.15);

  font-size: 0.85rem;
  opacity: 0.8 !important;
  margin: 8px auto 6px;
}

#share-result-btn:hover + .share-boost {
  opacity: 1;
  transition: opacity 0.2s;
}





/* Synthesis First Sharing */
/* dark premium CTA */
#share-result-btn{
  width:100%;
  max-width:260px;
  margin:12px auto 14px auto;
  display:block;
  padding:12px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  /*background:#111827;*/

   /* NEW: social indigo */
  background:#4f46e5;
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
  transition:0.2s ease;
}


#share-result-btn:hover{
  transform:translateY(-2px);

  /*background:#1f2937;*/

  background:#4338ca;
  box-shadow:0 14px 28px rgba(79,70,229,0.25);
}

#share-result-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
}

/* Share buttons layout */
#synthesis-rarity-share-buttons{
  display:none;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  opacity:0;
  transform:translateY(6px);
}

#synthesis-rarity-share-buttons.is-revealed{
  display:flex;
}

/* Base button */
.share-btn-rarity{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  background:#f1f5f9;
  color:#0f172a;
  border:1px solid rgba(15,23,42,0.08);
  cursor:pointer;
  transition:0.2s ease;
}

/* Hover state */
.share-btn-rarity:hover{
  transform:translateY(-2px);
  background:#e2e8f0;
}

/* Brand colors (subtle version) */
#share-fb-rarity-btn:hover{color:#1877f2;}
#share-x-rarity-btn:hover{color:#000000;}
#share-threads-rarity-btn:hover{color:#6b7280;}
#share-reddit-rarity-btn:hover{color:#ff4500;}
#share-whatsapp-rarity-btn:hover{color:#25d366;}

.share-preview-synthesis{
  max-width: 520px;
  margin: 0px auto 25px auto;
}

#share-synthesis-text-preview{
  text-align: left;

}




/* Synthesis Second Sharing  */

.share-buttons-synthesis{
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.share-row-synthesis{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  width:100%;
}

.primary-row-synthesis button,
.secondary-row-synthesis button{
  flex:1;
}

.secondary-row-synthesis{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:.3s ease;
}

.share-buttons-synthesis.open
.secondary-row-synthesis{
  max-height:200px;
  opacity:1;
}


/* copy button */

#shr-synth-btm-copy{

  flex:none;

  display:block;
  width:100%;
  min-width:140px;

  margin:0 auto;

  padding:12px 14px;

  border-radius:10px;

  font-size:14px;
  font-weight:700;

  background:
  linear-gradient(
    135deg,
    #f59e0b,
    #fbbf24
  );

  color:#111;

  border:none;

  box-shadow:
  0 10px 25px rgba(245,158,11,.25);

}


#shr-synth-btm-copy:hover{

  transform:
  translateY(-2px);

  box-shadow:
  0 14px 30px rgba(245,158,11,.35);

}


/* generic buttons */

.share-btn-synthesis{

  flex:1 1 120px;

  min-width:90px;

  padding:9px 12px;

  border-radius:8px;

  border:none;

  cursor:pointer;

  transition:.2s ease;

}


.share-btn-synthesis:hover{

  transform:
  translateY(-2px)
  scale(1.05);

}


.share-btn-synthesis i{

  font-size:20px;
  color:#fff;

}



/* brand colors */

.x-synth{
background:#111;
}

.x-synth:hover{
background:#2a2a2a;
}


.threads-synth{
background:#000;
}

.threads-synth:hover{
background:#1a1a1a;
}


.reddit-synth{
background:#ff4500;
}

.reddit-synth:hover{
background:#e03e00;
}


.whatsapp-synth{
background:#25D366;
}

.whatsapp-synth:hover{
background:#20b958;
}


.fb-synth{
background:#1877F2;
}

.fb-synth:hover{
background:#1669d1;
}


.pinterest-synth{
background:#E60023;
}

.pinterest-synth:hover{
background:#c4001d;
}


.tumblr-synth{
background:#36465D;
}

.tumblr-synth:hover{
background:#2c3a4d;
}


/* More */

#share-btn-synth-more{

background:
rgba(15,23,42,.06);

border:
1px solid rgba(15,23,42,.12);

color:#334155;

font-weight:600;

}

#share-btn-synth-more:hover{

background:
rgba(15,23,42,.1);

color:#0f172a;

}










/* hidden desktop renderer */
/* ========================================
   PRODUCTION MODE (hidden renderer)
======================================== */

#astrox-quick-capture{
  position:fixed;

  left:-99999px;
  top:-99999px;

  width:460px;

  background:#fff;
  color:#000;

  box-sizing:border-box;
  font-family:'Courier New', monospace;

  pointer-events:none;

  z-index:-1;

  overflow:hidden;
}



/* ========================================
   DEV MODE (visible centered renderer)
   Uncomment while designing export layout
======================================== */

/*
#astrox-quick-capture{
  position:fixed;

  left:50%;
  top:50%;

  transform:translate(-50%, -50%);

  width:460px;

  background:#fff;
  color:#000;

  box-sizing:border-box;
  font-family:'Courier New', monospace;

  z-index:99999;

  overflow:auto;

  border:1px solid rgba(0,0,0,.12);

  box-shadow:
  0 20px 60px rgba(0,0,0,.18);
}
*/



#astro-export-capture{
  width:460px;
  max-width:100%;
  box-sizing:border-box;

  margin:0 auto;
  background:#fff;
  color:#000;

  font-family:'Courier New', monospace;
}

#astro-export-capture table{
  font-weight: 800;
}


/* === Preloader === */
.astro-export-loader{
  position:fixed;
  inset:0;

  background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  z-index:99999;

  isolation:isolate;
}

.astro-export-loader.hidden{
  display:none;
}

.astro-loader-spinner{
  width:42px;
  height:42px;
  border:3px solid rgba(0,0,0,.1);
  border-top:3px solid #0f172a;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-bottom:12px;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.astro-loader-text{
  font-size:14px;
  color:#111;
  opacity:.7;
}


/* =========================
   EXPORT SNAPSHOT MODE
========================= */

.export-snapshot-mode{
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

.export-snapshot-mode .astro-table-scroll{
  overflow:visible !important;
}

/*.export-snapshot-mode #table-natal-chart{
  table-layout:auto !important;
  margin:0 auto !important;
}*/

.export-snapshot-mode *{
  transform:none !important;
}


/*  End Your Full Personality Blueprint */




/* Depth Section (Complete Astrology Report) */

#astro-depth {
  background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
  padding:60px 20px;
  border-radius:12px;
}

#astro-depth .astro-h2-title {
  font-size: 27px;
  margin-bottom: 15px;
  text-align: center;
  color: #3d3d3d;
}

#birth-chart-report-img{
  display:block;
  margin:0 auto 20px auto;
  width:220px;

  border-radius:20px;

  /*animation:reportGlow 4s ease-in-out infinite;*/
}


@keyframes reportGlow{

  0%,100%{
    transform:scale(1);

    box-shadow:
      0 0 10px rgba(238,224,253,0.25),
      0 0 25px rgba(238,224,253,0.15);
  }

  50%{
    transform:scale(1.015);

    box-shadow:
      0 0 20px rgba(238,224,253,0.60),
      0 0 50px rgba(238,224,253,0.35),
      0 0 80px rgba(238,224,253,0.15);
  }

}


#astro-depth .astro-lead {
  max-width: 720px;
  margin: 0 auto 25px auto;
  text-align: center;
  line-height: 1.6;
}

.depth-features {
  max-width: 520px;
  margin: 0 auto 20px auto;
  font-size: 15px;
}

.depth-item {
  padding: 6px 0;
}

.depth-note {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  opacity: 0.85;
}

.astro-btn-secondary {
  background: #111827;
  color: #fff;
}

.astro-btn-secondary:hover {
  color: #fff;
  background: #374151;
}

/* renderPopularity */

div.popularity-title{
    font-family: 'Poppins';
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}


div.popularity-sub{
  font-size: 16px;
  text-align: center;
  line-height: 1.6;
  color: #444;
  margin-bottom: 30px;
}



/* container centering */
#popular-patterns{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* row */
.pattern-row{
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  align-items: center;
  gap: 12px;

  width: 100%;
  max-width: 500px;
  margin-bottom: 12px;
}

/* title */
.pattern-title{
  text-align: left;
  min-width: 120px;
  font-size: 13px;
  font-weight: 500;

  margin-right: 8px; /* extra space before bar */
  white-space: nowrap;
}

/* bar */
.pattern-bar{
  margin-left: 40px;
  height: 6px; /* slightly thinner */
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
}


/* fill */
.pattern-fill{
  height: 100%;
  width: 0%;
  /*background:linear-gradient(90deg,#00d084,#7CFC00);*/
  background: linear-gradient(90deg, #6a5cff, #00c6ff);
  border-radius: 6px;
}


/* percent */
.pattern-percent{
  width: 40px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
}






/* ranking number */
.rank{
  font-size: 11px;
  opacity: 0.6;
  margin-right: 6px;
}

/* highlight YOU */
.pattern-row.is-you{
  background: rgba(106,92,255,0.08);
  border-radius: 8px;
  padding: 6px 8px;
}

.is-you .pattern-title{
  font-weight: 600;
}

/* top 3 emphasis */
.pattern-row.top-1 .pattern-fill{
  background: linear-gradient(90deg, #ffd700, #ffb700);
}

.pattern-row.top-2 .pattern-fill{
  background: linear-gradient(90deg, #c0c0c0, #a8a8a8);
}

.pattern-row.top-3 .pattern-fill{
  background: linear-gradient(90deg, #cd7f32, #b87333);
}



/* ========== */








/* Responsive */


@media(max-width:1024px){

#header-calculator{
padding:50px 20px 40px;
}

#zm-hero-title{
font-size:48px;
}

#zm-hero-subtitle{
font-size:28px;
max-width:750px;
}

#zm-hero-description{
font-size:18px;
max-width:750px;
}

#zm-hero-list{
font-size:17px;
}

#zm-hero-button{
font-size:18px;
padding:16px 36px;
}


#seo-section-3 .seo-block{
    padding:40px 20px;
  }

  #seo-section-3 .seo-block h2{
    font-size:24px;
  }

  #seo-section-3 .seo-block p{
    font-size:17px;
  }

  #seo-section-3 .seo-block li{
    font-size:16px;
  }

  .seo-figure{
    margin:35px auto;
  }

  .seo-figure figcaption{
    font-size:14px;
  }


}



@media (max-width: 768px) {

  #header-calculator{
    padding:30px 20px;
  }

  #header-calculator-column{
    max-width:100%;
  }

  /* HERO TITLE (no h1 selector, no !important needed) */
  #zm-hero-title{
    font-size:1.9em;
    line-height:1.1;
    letter-spacing:-0.5px;
    margin-bottom:12px;
  }

  #free-accurate{
    font-size:0.42em;
    margin-top:8px;
  }

  /* SUBTITLE */
  #zm-hero-subtitle{
    font-size:22px;
    line-height:1.35;
    margin-bottom:20px;
  }

  /* DESCRIPTION */
  #zm-hero-description{
    font-size:17px;
    line-height:1.7;
  }

  /* LIST */
  #zm-hero-list{
    font-size:16px;
  }

  #zm-hero-list li{
    margin:10px 0;
  }

  /* BUTTON */
  #zm-hero-button{
    width:100%;
    max-width:420px;
    font-size:18px;
    padding:16px 20px;
    margin-top:25px;
  }


    #seo-section-3 .seo-block{
    padding:30px 18px;
  }

  #seo-section-3 .seo-block h2{
    font-size:26px;
    line-height:1.3;
  }

  #seo-section-3 .seo-block h3{
    font-size:20px;
  }

  #seo-section-3 .seo-block p{
    font-size:17px;
    line-height:1.75;
  }

  #seo-section-3 .seo-block li{
    font-size:16px;
    line-height:1.7;
  }


    .seo-figure{
    margin:28px auto;
  }

  .seo-image{
    border-radius:14px;
  }

    .seo-image-wheel{
    max-width:320px;
  }

  .seo-figure figcaption{
    font-size:13px;
    line-height:1.5;
    padding:0 10px;
    margin-top:10px;
  }


  .seo-explore-more{
    padding:25px 15px;
    margin:60px auto 30px;
  }

  .seo-explore-more h2{
    font-size:18px;
  }

  .seo-explore-more a{
    font-size:15px;
  }


  #form-sun-moon-rising-calculator p.zp-subheading {
    font-size: 1.2em;
    line-height: 1.2;
  }

  #form-sun-moon-rising-calculator .zp-zodiacal-dms {
    font-size: 13px !important;
  }

  .astrox-export-panel {
    width: 330px;
  }

#big3-card-section .astro-h2-title,
#share-big3 .astro-h2-title,
#big3-engagement .astro-h2-title,
#zodiac-insights .astro-h2-title,
#astro-depth .astro-h2-title {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 16px;
    /*color: blue;*/
  }


#big3-card-section .astro-lead,
#share-big3 .astro-lead,
#big3-engagement .astro-lead,
#zodiac-insights .astro-lead,
#astro-depth .astro-lead
 {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
    /*color: blue;*/
  }


  #calcul_chinese_description, #calcul_native_description, #full-synthesis-p{
    font-size: 15px;
  }


  .rarity-percent{
    font-size: 16px;
  }

 /* #form-sun-moon-rising-calculator h3 {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  #form-sun-moon-rising-calculator p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
  }*/

  /* =========================
  Natal Chart - MOBILE SCROLL MODE
  ========================= */

  #astro-export {
    width: 100% !important;
    padding: 14px;
    font-weight: 800;
  }

  #astro-export table {
  font-weight: 800;
}

  .astro-table-scroll {
    position: relative;
    padding-bottom: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #f59e0b transparent;
  }

  .astro-table-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .astro-table-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .astro-table-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 10px;
  }

  .astro-table-scroll::after {
    content: "← swipe →";
    position: absolute;
    right: 12px;
    bottom: 14px;
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(4px);
    opacity: 0.5;
    pointer-events: none;
  }

  /* =========================
     MOBILE LAYOUT (NORMAL)
  ========================= */

  .astro-bottom-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }

  .astro-aspects,
  .astro-elements {
    width: 100%;
    text-align: left;
    font-size: 12px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* =========================
     EXPORT SNAPSHOT OVERRIDES
  ========================= */

  .export-snapshot-mode .astro-table-scroll::after {
    content: "";
  }

  .export-snapshot-mode .astro-bottom-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-top: 0 !important;
  }

  .export-snapshot-mode .astro-aspects {
    width: 60% !important;
    text-align: left !important;
  }

  /* 🔥 FIXED ELEMENTS BLOCK */
  .export-snapshot-mode .astro-elements {
    width: 40% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;

    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important; /* neutral baseline */
  }

  /* table formatting */
  #table-natal-chart th,
  #table-natal-chart td {
    font-size: 12px;
    padding: 6px 14px;
    white-space: nowrap;
  }

  .astro-icon {
    width: 16px;
    height: 16px;
  }

  #form-sun-moon-rising-calculator div#zp-report-content {
    width: 100%;
    max-width: 100%;
  }

  /* prevent media from interfering with capture container */
  #astrox-quick-capture {
    /* all:unset !important;*/
    width: 460px !important;
    /* display:block !important; */
  }

  #astro-export-capture {
    width: 460px !important;
  }

  #astro-export-capture table {
    font-weight: 800;
  }



  .pattern-bar{
    margin-left: 20px;
  }




}