/**
 * Gabriel XV Custom CSS
 */

/* Emotional Mirror Page Styles */
.emotional-mirror-page .emotion-form {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 40px;
}

.emotion-check-in h2 {
    margin-bottom: 30px;
    text-align: center;
}

.emotion-scale {
    margin-bottom: 30px;
}

.emotion-range {
    position: relative;
}

.emotion-range label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}

.emotion-range input[type="range"] {
    width: 100%;
    margin: 10px 0;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.9rem;
    color: #7f8c8d;
}

.emotion-tags h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.emotion-tag {
    display: inline-block;
    padding: 8px 15px;
    background-color: #f0f4f8;
    border-radius: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.emotion-tag input {
    display: none;
}

.emotion-tag:hover {
    background-color: #e1e8ed;
}

.emotion-tag input:checked + span {
    background-color: #3498db;
    color: #fff;
    padding: 8px 15px;
    border-radius: 30px;
    display: inline-block;
}

.emotion-notes {
    margin-bottom: 30px;
}

.emotion-notes label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}

.emotion-notes textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    resize: vertical;
}

.form-actions {
    text-align: center;
}

.reflection-results {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 40px;
}

.reflection-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .reflection-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .spiritual-guidance {
        grid-column: 1 / -1;
    }
}

.insight-content {
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 20px;
    border-left: 4px solid #3498db;
}

.practice-suggestion .insight-content {
    border-left-color: #27ae60;
}

.practice-suggestion h4 {
    color: #27ae60;
    margin-bottom: 15px;
}

.reflection-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    padding: 30px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
}

.modal h2 {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

.journal-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-checkbox {
    display: flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 10px;
    cursor: pointer;
}

.category-checkbox input {
    margin-right: 5px;
}

/* Symbolic Companion Page Styles */
.symbolic-companion-page .symbol-form {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 40px;
}

.symbol-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px;
}

.form-section {
    margin-bottom: 30px;
}

.form-section h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.radio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.radio-option {
    flex: 1 0 45%;
    background-color: #f0f4f8;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .radio-option {
        flex: 1 0 100%;
    }
}

.radio-option input {
    margin-right: 10px;
}

.radio-option:hover {
    background-color: #e1e8ed;
}

.radio-option input:checked + .option-text {
    font-weight: 500;
    color: #3498db;
}

.elements .radio-option {
    flex-direction: column;
    text-align: center;
    padding: 20px 15px;
}

.element-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
}

.earth-icon {
    background-color: #8b5e3c;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
}

.air-icon {
    background-color: #90caf9;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M14.5 17c0 1.65-1.35 3-3 3s-3-1.35-3-3h2c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1H2v-2h9.5c1.65 0 3 1.35 3 3zM19 6.5C19 4.57 17.43 3 15.5 3S12 4.57 12 6.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5S16.33 8 15.5 8H2v2h13.5c1.93 0 3.5-1.57 3.5-3.5zM18.5 11c-.83 0-1.5.67-1.5 1.5v.5H2v2h15.5c1.93 0 3.5-1.57 3.5-3.5S20.43 9 18.5 9H2v2h16.5z"/></svg>');
}

.fire-icon {
    background-color: #ff7043;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>');
}

.water-icon {
    background-color: #4fc3f7;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8zm0 18c-3.35 0-6-2.57-6-6.2 0-2.34 1.95-5.44 6-9.14 4.05 3.7 6 6.79 6 9.14 0 3.63-2.65 6.2-6 6.2zm-4-8c0 2.2 1.79 4 4 4 .5 0 .97-.09 1.41-.24-.64-.91-1.02-2.01-1.02-3.21 0-1.2.38-2.3 1.02-3.21-.44-.15-.91-.24-1.41-.24-2.21 0-4 1.8-4 4z"/></svg>');
}

.spirit-icon {
    background-color: #9c27b0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>');
}

.elements .radio-option input:checked + .element-icon + .option-text {
    font-weight: 500;
    color: #3498db;
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    appearance: none;
    background-color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.select-wrapper:after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #7f8c8d;
    pointer-events: none;
}

.symbol-results {
    margin-bottom: 60px;
}

.symbol-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .symbol-card {
        flex-direction: row;
    }
}

.symbol-image {
    flex: 0 0 300px;
    background-color: #f0f4f8;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.symbol-image img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
}

.symbol-details {
    flex: 1;
    padding: 30px;
}

.symbol-details h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #3498db;
}

.symbol-meaning, .symbol-guidance, .symbol-practice {
    margin-bottom: 25px;
}

.symbol-meaning h3, .symbol-guidance h3, .symbol-practice h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: #2c3e50;
}

.symbol-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.symbols-library {
    margin-top: 60px;
}

.symbols-library h2 {
    text-align: center;
    margin-bottom: 10px;
}

.symbols-library > p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
    color: #7f8c8d;
}

.symbols-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.category-btn {
    padding: 8px 16px;
    background-color: #f0f4f8;
    border: none;
    border-radius: 5px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-btn:hover, .category-btn.active {
    background-color: #3498db;
    color: #fff;
}

.symbols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.symbol-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.symbol-item:hover {
    transform: translateY(-5px);
}

.symbol-thumb {
    height: 150px;
    background-color: #f0f4f8;
}

.symbol-item h3 {
    padding: 15px;
    text-align: center;
    font-size: 1.1rem;
}

.library-more {
    text-align: center;
    margin-top: 20px;
}

/* Journal Archive Page Styles */
.journal-archive-page .journal-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 992px) {
    .journal-archive-page .journal-content {
        grid-template-columns: 300px 1fr;
    }
}

.journal-sidebar {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.journal-filters h3 {
    margin: 20px 0 15px;
    font-size: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.journal-filters h3:first-child {
    margin-top: 0;
}

.filter-option {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
}

.date-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.date-field {
    flex: 1;
}

.date-field label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.date-field input {
    width: 100%;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.btn-small {
    padding: 5px 10px;
    font-size: 0.9rem;
}

.journal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.stat-item {
    background-color: #f0f4f8;
    border-radius: 5px;
    padding: 15px 10px;
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: #7f8c8d;
}

.journal-actions {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.entries-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.journal-entry-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
}

.entry-date {
    flex: 0 0 80px;
    background-color: #3498db;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.entry-date .day {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.entry-date .month {
    font-size: 1rem;
    text-transform: uppercase;
}

.entry-date .year {
    font-size: 0.9rem;
}

.entry-content {
    flex: 1;
    padding: 20px;
}

.entry-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.entry-categories {
    margin-bottom: 15px;
}

.category-tag {
    display: inline-block;
    padding: 3px 10px;
    background-color: #f0f4f8;
    border-radius: 15px;
    font-size: 0.8rem;
    margin-right: 5px;
    margin-bottom: 5px;
}

.entry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap;
}

.emotional-state {
    font-size: 0.9rem;
    color: #7f8c8d;
}

.no-entries {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: center;
}

.no-entries h2 {
    margin-bottom: 15px;
}

.no-entries p {
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #7f8c8d;
}

/* Ritual Insight Page Styles */
.ritual-insight-page .ritual-form {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 40px;
}

.ritual-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px;
}

.time-options .radio-option, .location-options .radio-option {
    flex-basis: calc(33.333% - 10px);
}

.checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-option {
    flex: 0 0 calc(50% - 5px);
    background-color: #f0f4f8;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .checkbox-option {
        flex: 0 0 100%;
    }
    
    .time-options .radio-option, .location-options .radio-option {
        flex-basis: 100%;
    }
}

.checkbox-option input {
    margin-right: 10px;
}

.checkbox-option:hover {
    background-color: #e1e8ed;
}

.checkbox-option input:checked + .option-text {
    font-weight: 500;
    color: #3498db;
}

.ritual-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ritual-header {
    background-color: #3498db;
    color: #fff;
    padding: 25px;
}

.ritual-header h2 {
    margin-bottom: 15px;
    color: #fff;
}

.ritual-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.meta-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.meta-item i {
    margin-right: 5px;
}

.ritual-details {
    padding: 30px;
}

.ritual-description, .ritual-items-needed, .ritual-steps, .ritual-variations {
    margin-bottom: 30px;
}

.ritual-description {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.ritual-description h3, .ritual-items-needed h3, .ritual-steps h3, .ritual-variations h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.ritual-items-list, .ritual-steps-list {
    padding-left: 20px;
}

.ritual-items-list li, .ritual-steps-list li {
    margin-bottom: 10px;
}

.ritual-steps-list li {
    padding-left: 5px;
}

.ritual-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 60px;
}

.rituals-library {
    margin-top: 60px;
}

.rituals-library h2 {
    text-align: center;
    margin-bottom: 10px;
}

.rituals-library > p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
    color: #7f8c8d;
}

.rituals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.ritual-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
}

.ritual-item:hover {
    transform: translateY(-5px);
}

.ritual-thumb {
    height: 180px;
    background-color: #f0f4f8;
}

.ritual-item h3 {
    padding: 15px 15px 35px;
    text-align: center;
    font-size: 1.1rem;
}

.ritual-duration {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.8rem;
    color: #7f8c8d;
}