/* ==========================================================================
   Vedic vs Western Astrology page styles
   Page: /vedic-vs-western-astrology
   ========================================================================== */

/* Mobile floating CTA bar */
.mobile-floating-cta {
    z-index: 1000;
    border-top: 2px solid var(--color-primary-medium, #6a4bc4);
}

/* Hero image constraint */
.vvw-hero-img {
    max-height: 400px;
    object-fit: cover;
}

/* 7 key differences ordered list */
.differences-list {
    font-size: 1.1em;
    line-height: 1.8;
}

/* Comparison table column widths */
.vvw-table-feature { width: 30%; }
.vvw-table-vedic   { width: 35%; }
.vvw-table-western { width: 35%; }

/* Progress bars — timing precision section */
.vvw-progress {
    height: 25px;
}

/* Final CTA section gradient card */
.vvw-cta-gradient-card {
    background: linear-gradient(135deg, #6a4bc4 0%, #8e44ad 100%);
}

/* Mobile spacer (above floating CTA) */
.vvw-mobile-spacer {
    height: 80px;
}

/* ==========================================================================
   Sign comparison widget
   ========================================================================== */

.sign-widget-inputs {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.sign-widget-field {
    flex: 1;
}

.sign-widget-day-field {
    flex: 0 0 80px;
    width: 80px;
}

.sign-widget-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.sign-widget-select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Result cards */
.sign-result-western,
.sign-result-vedic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.sign-result-western {
    background: #e8f4fd;
    border: 1px solid #bdd7f0;
}

.sign-result-vedic {
    background: #f0eeff;
    border: 1px solid #c4b5fd;
    margin-bottom: 1rem;
}

.sign-result-system-label {
    font-size: 0.875rem;
    color: var(--text-muted, #6c757d);
    font-weight: 600;
}

.sign-result-name {
    font-weight: 700;
}

.sign-result-emoji {
    font-size: 1.5rem;
}

.sign-result-divider {
    text-align: center;
    color: var(--text-muted, #6c757d);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

#sign-difference-note {
    font-size: 0.875rem;
    color: var(--text-muted, #6c757d);
    margin-bottom: 1rem;
}

/* ==========================================================================
   FAQ section (bottom of page, outside accordion)
   ========================================================================== */

.vvw-faq-section {
    padding: 48px 0;
}

.vvw-faq-heading {
    color: var(--color-indigo-600, #4F46E5);
    font-weight: 600;
}

.vvw-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vvw-faq-item {
    background: #f8f7ff;
    border-radius: 8px;
    padding: 18px 20px;
    border: 1px solid var(--gray-200, #e5e7eb);
}

.vvw-faq-item summary {
    font-weight: 600;
    color: #1e1b4b;
    cursor: pointer;
}

.vvw-faq-item p {
    margin-top: 10px;
    color: var(--gray-600, #4b5563);
    line-height: 1.7;
}