/* BACKGROUND */

body {

margin:0;
font-family:Arial, Helvetica, sans-serif;

background-color:#0b0f1a;

background-image:
radial-gradient(white 1px, transparent 1px),
radial-gradient(white 1px, transparent 1px);

background-size:40px 40px, 80px 80px;
background-position:0 0, 20px 20px;

color:#e8ecff;

}

/* CENTER CONTAINER */

.container {

max-width:700px;
margin:60px auto;
padding:40px;

background:#12182b;

border-radius:20px;

box-shadow:
0 20px 60px rgba(0,0,0,0.6),
0 0 40px rgba(20,30,60,0.3);

backdrop-filter:blur(6px);

}

/* TITLE */

h1 {

text-align:center;

font-family:'Cinzel', serif;

font-size:40px;

letter-spacing:4px;

margin-bottom:10px;

color:#f6c453;

text-shadow:
0 0 10px rgba(246,196,83,0.4),
0 0 25px rgba(246,196,83,0.15);

font-weight:500;

}

/* SUBTITLE */

.subtitle {

text-align:center;
opacity:0.7;

margin-bottom:35px;

font-size:15px;

letter-spacing:0.5px;

}

/* FORM */

form {

display:flex;
flex-direction:column;
gap:15px;

}

/* INPUTS */

input {

padding:12px;

border-radius:10px;

border:1px solid #2a3150;

background:#0f1425;

color:white;

font-size:16px;

transition:0.2s;

}

input:focus{

outline:none;

border-color:#f6c453;

box-shadow:0 0 0 2px rgba(246,196,83,0.2);

}

/* BUTTON */

button {

margin-top:10px;

padding:14px;

font-size:16px;

border:none;

border-radius:12px;

cursor:pointer;

font-weight:bold;

background:linear-gradient(135deg,#f6c453,#e8a317);

color:#111;

transition:0.2s;

}

button:hover {

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,0.35);

}

/* RESULT */

.result {

margin-top:30px;

padding-top:10px;

border-top:1px solid rgba(255,255,255,0.05);

animation:fadeIn 0.6s ease;

}

/* STARS */

.stars {

font-size:42px;

color:#f6c453;

margin-bottom:20px;

text-shadow:
0 0 10px rgba(246,196,83,0.5),
0 0 20px rgba(246,196,83,0.25);

opacity:0;
transform:scale(0.8);

animation:starsReveal 0.8s ease forwards;

}

/* SECTION TITLES */

.section-title {

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

opacity:0.7;

margin-top:20px;

margin-bottom:6px;

}

/* TEXT BLOCKS */

.block{

line-height:1.6;

font-size:15px;

margin-bottom:10px;

}

/* ANIMATIONS */

@keyframes starsReveal {

0%{

opacity:0;
transform:scale(0.8);

}

100%{

opacity:1;
transform:scale(1);

}

}

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(10px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* SHARE BUTTONS */

.share-buttons{

display:flex;

gap:12px;

margin-top:20px;

}

/* SHARE ICON BUTTON */

.share-btn{

width:44px;
height:44px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

transition:0.25s;

}

/* ICON SIZE */

.share-btn svg{

width:22px;
height:22px;

}

/* FACEBOOK */

.facebook{

background:#1877f2;

}

/* WHATSAPP */

.whatsapp{

background:#25D366;

}

/* SHARE HOVER */

.share-btn:hover{

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

box-shadow:0 8px 18px rgba(0,0,0,0.35);

}

/* COPY BUTTON */

.copy-btn{

margin-top:10px;

padding:10px 14px;

border:none;

border-radius:8px;

background:#2a3150;

color:white;

font-size:14px;

cursor:pointer;

transition:0.2s;

}

.copy-btn:hover{

background:#3b4370;

transform:translateY(-1px);

}

/* COPY MESSAGE */

.copy-message{

margin-top:10px;

font-size:14px;

opacity:0;

transition:opacity 0.3s;

color:#9fe29f;

}

.copy-message.show{

opacity:1;

}

.related{

margin-top:30px;

}

.related-links{

display:flex;
flex-wrap:wrap;
gap:10px;

margin-top:10px;

}

.related-links a{

font-size:13px;

padding:6px 10px;

background:#0f1425;

border:1px solid #2a3150;

border-radius:6px;

color:#e8ecff;

text-decoration:none;

transition:0.2s;

}

.related-links a:hover{

background:#1a213a;

}

.zodiac-grid{

margin-top:40px;

}

.grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:8px;

margin-top:15px;

}

.grid a{

font-size:13px;

padding:8px;

background:#0f1425;

border:1px solid #2a3150;

border-radius:6px;

color:#e8ecff;

text-decoration:none;

text-align:center;

transition:0.2s;

}

.grid a:hover{

background:#1a213a;

}

/* PREMIUM REPORT TEASER */

.premium-teaser{

margin-top:35px;

padding:25px;

border-radius:14px;

background:linear-gradient(145deg,#1a213a,#12182b);

border:1px solid #2a3150;

text-align:center;

}

.premium-title{

font-size:18px;

font-weight:600;

color:#f6c453;

margin-bottom:15px;

}

.premium-text{

font-size:14px;

opacity:0.9;

line-height:1.6;

}

.premium-text ul{

list-style:none;

padding:0;

margin:15px 0;

}

.premium-text li{

margin:6px 0;

}

.premium-button{

display:inline-block;

margin-top:15px;

padding:12px 20px;

border-radius:10px;

background:linear-gradient(135deg,#f6c453,#e8a317);

color:#111;

font-weight:bold;

text-decoration:none;

transition:0.2s;

}

.premium-button:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,0.3);

}

/* PREMIUM PAGE */

.premium-page{

margin-top:20px;

}

.premium-hero{

text-align:center;

margin-bottom:35px;

}

.premium-hero h2{

font-size:26px;

margin-bottom:10px;

color:#f6c453;

}

.premium-hero p{

opacity:0.85;

}

.premium-sections{

display:grid;

grid-template-columns:1fr;

gap:18px;

margin-bottom:30px;

}

.premium-block{

padding:18px;

background:#0f1425;

border:1px solid #2a3150;

border-radius:10px;

}

.premium-block h3{

margin-bottom:8px;

color:#f6c453;

font-size:16px;

}

.premium-price{

text-align:center;

padding:25px;

background:#12182b;

border-radius:14px;

border:1px solid #2a3150;

}

.price-title{

font-size:18px;

margin-bottom:5px;

}

.price-value{

font-size:36px;

color:#f6c453;

margin:10px 0;

}

.premium-score{

margin:10px 0;

font-size:15px;

opacity:0.9;

}

.premium-score strong{

font-size:22px;

color:#f6c453;

}

/* LOCKED PREMIUM CONTENT */

.locked{

position:relative;

filter:blur(2px);

opacity:0.6;

}

.blur-overlay{

position:absolute;

top:0;
left:0;
right:0;
bottom:0;

display:flex;

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

text-align:center;

font-size:13px;

background:rgba(10,12,20,0.75);

border-radius:10px;

padding:15px;

}

.locked-text{

opacity:0.5;

}

/* SOULMATE RANKING */

.soulmate-row{

display:flex;

justify-content:space-between;

padding:8px 0;

border-bottom:1px solid #2a3150;

font-size:14px;

}

.soulmate-row span:last-child{

color:#f6c453;

font-weight:bold;

}

form label{

font-size:13px;

opacity:0.8;

margin-top:5px;

}

.soulmate{

color:#ffd700;

font-weight:700;

}

.soulmate-label{

margin-left:10px;

color:#ffd700;

font-weight:700;

}

/* MATCH ROW */

.soulmate-row{

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

padding:6px 0;

font-size:16px;

}

/* NORMAL STARS */

.match-stars{

color:#ffffff;

}

/* SOULMATE LABEL */

.soulmate-label{

margin-left:10px;

color:#f6c453;

font-weight:600;

}

/* SOULMATE ROW HIGHLIGHT */

.soulmate-row:has(.soulmate-label) .match-stars{

color:#f6c453;

text-shadow:0 0 6px rgba(246,196,83,0.6);

}

/* NORMAL MATCH STARS */

.match-stars{

color:#ffffff;

}

/* SOULMATE STARS */

.soulmate-stars{

color:#f6c453;

text-shadow:0 0 8px rgba(246,196,83,0.7);

font-weight:600;

}

/* SOULMATE LABEL */

.soulmate-label{

margin-left:10px;
color:#f6c453;
font-weight:600;

}

/* SOULMATE STARS */

.match-stars.soulmate-stars{

color:#f6c453 !important;

text-shadow:0 0 8px rgba(246,196,83,0.8);

font-weight:700;

}

/* CONVERSION POINTS */

.conversion-points{

margin-top:15px;

font-size:14px;

line-height:1.7;

opacity:0.9;

}

.conversion-points div{

margin:4px 0;

}

.report-tools{
background:#111;
border:1px solid #333;
padding:20px;
margin-bottom:30px;
border-radius:8px;
font-size:15px;
}

.report-tools ul{
margin-top:10px;
line-height:1.7;
}