/* assets/css/love-compatibility.css */

/* --- MODULE: BÓI TÌNH YÊU --- */

.love-calculator-section { 
    padding: 80px 0; 
    background: #fffaf0; 
    text-align: center; 
}

.love-calculator-section .main-title {
    font-family: var(--title-font);
    font-size: 3.5rem;
    color: #d45d79;
    margin-bottom: 15px;
    font-weight: 700;
}

.love-calculator-section p {
    font-family: var(--reading-font);
    font-size: 1.15rem;
    color: #555;
    margin: 0 auto 40px;
    max-width: 700px;
    line-height: 1.6;
    font-style: italic;
}

.compatibility-box { 
    background: #fff; 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 50px 40px; 
    border-radius: 20px; 
    border: 1px solid #ffe0e6; 
    box-shadow: 0 15px 40px rgba(212, 93, 121, 0.1); 
    text-align: center; 
}

.selector-grid { display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: 40px; }
.select-item { flex: 1; }

.zodiac-select { 
    width: 100%; 
    padding: 15px; 
    border-radius: 12px; 
    border: 1px solid #ddd; 
    background: #fbfefd; 
    cursor: pointer; 
    font-family: var(--title-font); 
    font-size: 1.1rem; 
    font-weight: 600;
    color: #333;
    outline: none;
    transition: 0.3s;
}
.zodiac-select:focus { border-color: #d45d79; box-shadow: 0 0 10px rgba(212, 93, 121, 0.1); }

.heart-icon { font-size: 50px; animation: heartBeat 1.5s infinite; color: #d45d79; }

@keyframes heartBeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

.btn-check { 
    background: var(--bg-dark); 
    color: #fff; 
    border: none; 
    padding: 15px 50px; 
    font-weight: bold; 
    border-radius: 50px; 
    cursor: pointer; 
    transition: 0.3s; 
    font-family: var(--title-font);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-check:hover { background: #d45d79; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(212, 93, 121, 0.3); }

/* --- PHẦN KẾT QUẢ --- */
.result-box {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px dashed #eee;
    display: none; 
}

/* Vòng tròn số % */
.score-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 6px solid #d45d79;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    
    font-family: var(--title-font);
    font-size: 3.5rem;
    font-weight: 800;
    color: #d45d79;
    background: #fff;
    box-shadow: 0 10px 30px rgba(212, 93, 121, 0.15);
}

#result-title {
    font-family: var(--title-font);
    font-size: 2rem;
    color: #d45d79;
    margin-bottom: 10px;
    font-weight: 700;
}

#result-desc {
    font-family: var(--reading-font);
    font-size: 1.2rem;
    color: #555;
    font-style: italic;
}

/* Responsive Mobile */
@media (max-width: 600px) { 
    .selector-grid { flex-direction: column; gap: 20px; } 
    .heart-icon { margin: 10px 0; transform: rotate(90deg); }
    .love-calculator-section .main-title { font-size: 2.5rem; }
    .score-circle { width: 120px; height: 120px; font-size: 2.5rem; border-width: 4px; }
}