/* interactive-icons.css */

.category-items {
    display: flex;
    flex-direction: column;  
    align-items: center;  
    gap: 30px;
    margin-top: 30px;
}

.category-row { 
    display: flex;
    justify-content: center; 
    gap: 50px; /* Increased gap for better spacing */
    width: 100%;
    margin-bottom: 30px; /* Added more margin for balance */
}

.category-item {
    text-align: center;
    width: 150px; /* Increased width for larger icons */
    cursor: pointer;
}

.category-item i {
    display: block;
    margin-bottom: 10px;
    font-size: 70px; /* Increased icon size significantly */
    transition: color 0.6s ease, transform 0.6s ease;
    width: fit-content; 
    margin-left: auto;
    margin-right: auto;
}

.category-item p {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.5rem; /* Increased font size for labels */
    transition: color 0.3s ease, font-weight 0.3s ease; 
}

.category-item:hover p {
    color: #2d3c2f; /* Dark color for category name on hover in light theme */
    font-weight: bold;
}

.dark-theme .category-item:hover p {
    color: #f7f7f7; /* Off-white color for category name on hover in dark theme */
}

/* Health category */
#physical i {
    color: #FF6347; 
}

#physical:hover i {
    color: #c0392b;
}

#physical.scored i {
    color: #bdc3c7;
}

#physical.scored p {
    color: #c0392b;
    font-weight: bold;
}

/* Emotional category */
#emotional i {
    color: #FF1493; 
}

#emotional:hover i {
    color: #f1c40f;
}

#emotional.scored i {
    color: #bdc3c7;
}

#emotional.scored p {
    color: #f1c40f;
    font-weight: bold;
}

/* Spiritual category */
#spiritual i {
    color: #8A2BE2; 
}

#spiritual:hover i {
    color: #8e44ad;
}

#spiritual.scored i {
    color: #bdc3c7;
}

#spiritual.scored p {
    color: #8e44ad;
    font-weight: bold;
}

/* Social category */
#social i {
    color: #FFD700; 
}

#social:hover i {
    color: #3498db;
}

#social.scored i {
    color: #bdc3c7;
}

#social.scored p {
    color: #3498db;
    font-weight: bold;
}

/* Vocational category */
#vocational i {
    color: #4682B4; 
}

#vocational:hover i {
    color: #f39c12;
}

#vocational.scored i {
    color: #bdc3c7;
}

#vocational.scored p {
    color: #f39c12;
    font-weight: bold;
}

/* Financial category */
#financial i {
    color: #32CD32; 
}

#financial:hover i {
    color: #27ae60;
}

#financial.scored i {
    color: #bdc3c7;
}

#financial.scored p {
    color: #036704;
    font-weight: bold;
}

/* Environmental category */
#environmental i {
    color: #2E8B57; 
}

#environmental:hover i {
    color: #16a085;
}

#environmental.scored i {
    color: #bdc3c7;
}

#environmental.scored p {
    color: #16a085;
    font-weight: bold;
}

/* Intellectual category */
#intellectual i {
    color: #8A2BE2; 
}

#intellectual:hover i {
    color: #e67e22;
}

#intellectual.scored i {
    color: #bdc3c7;
}

#intellectual.scored p {
    color: #e67e22;
    font-weight: bold;
}

/* Hover effect */
.category-item:hover i {
    transform: scale(1.3); 
}

/* Remove number input arrows */
input[type="number"] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    font-size: 2rem; /* Larger font size for digits */
    font-family: 'Playfair Display', serif;
    color: #2d3c2f; /* Dark greenish-gray for light backgrounds */
    text-align: center; /* Center the digits */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    -moz-appearance: textfield; /* Firefox-specific */
    -webkit-appearance: none; /* WebKit-specific */
    appearance: none; /* Modern browsers */
    padding: 0; /* Ensure no extra padding around digits */
    line-height: 1; /* Prevent shifting due to line height differences */
}

/* Remove spin buttons for WebKit browsers */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Prevent shifting */
}

/* Focus styling */
input[type="number"]:focus {
    outline: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    background: rgba(251, 243, 210, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4); /* Keep border consistent */
}

/* Placeholder styling */
input[type="number"]::placeholder {
    color: rgba(45, 60, 47, 0.6);
    font-style: italic;
}


.category-interactive {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Adjust spacing between elements */
}

/* Dark Theme */
.dark-theme input[type="number"] {
    color: #fbf3d2; /* Warm beige for dark backgrounds */
}