/* ============================================================
   Will Questionnaire & Preview Styles
   ============================================================ */

/* --- Progress Bar --- */
.will-progress {
    background: var(--color-off-white);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-light-grey);
    margin-bottom: var(--space-xl);
}

.progress-bar-track {
    background: var(--color-light-grey);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    border-radius: 4px;
    transition: width 0.4s ease;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.progress-step-name {
    font-weight: 600;
    color: var(--color-text);
}

/* --- Step Navigation --- */
.step-nav {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    background: var(--color-off-white);
    border-radius: var(--border-radius);
}

.step-nav a,
.step-nav span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
}

.step-nav a {
    background: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.step-nav a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

.step-nav .step-current {
    background: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
}

.step-nav .step-disabled {
    background: var(--color-light-grey);
    color: var(--color-mid-grey);
    border: 2px solid var(--color-light-grey);
    cursor: not-allowed;
}

.step-nav .step-completed {
    background: var(--color-success);
    color: var(--color-white);
    border: 2px solid var(--color-success);
}

/* --- Step Content --- */
.step-content {
    max-width: 700px;
    margin: 0 auto;
}

.step-content h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space-sm);
}

.step-intro {
    color: var(--color-text-light);
    font-size: 1.05rem;
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

/* --- Screening Questions --- */
.screening-questions {
    margin-bottom: var(--space-xl);
}

.screening-question {
    background: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.screening-question p {
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.screening-question .radio-group {
    margin-top: var(--space-sm);
}

/* --- Person Cards (for executors, beneficiaries, etc.) --- */
.person-cards {
    margin-bottom: var(--space-xl);
}

.person-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.person-card-info {
    flex: 1;
}

.person-card-info h4 {
    margin: 0 0 var(--space-xs);
    font-size: 1rem;
}

.person-card-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.person-card-actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.add-person-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border: 2px dashed var(--color-mid-grey);
    border-radius: var(--border-radius);
    background: var(--color-off-white);
    color: var(--color-dark-grey);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all var(--transition);
    width: 100%;
    justify-content: center;
}

.add-person-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-white);
}

/* --- Gift Cards --- */
.gift-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.gift-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.gift-card-header h4 {
    margin: 0;
    font-size: 1rem;
}

.gift-card-detail {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

/* --- Residuary Shares --- */
.share-input {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.share-input input[type="number"] {
    width: 80px;
    text-align: center;
}

.share-total {
    font-weight: 700;
    font-size: 1.1rem;
    padding: var(--space-md);
    background: var(--color-off-white);
    border-radius: var(--border-radius);
    text-align: center;
    margin-top: var(--space-md);
}

.share-total.valid { color: var(--color-success); }
.share-total.invalid { color: var(--color-danger); }

/* --- Form Actions (Next/Back buttons) --- */
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-light-grey);
    gap: var(--space-md);
}

.form-actions .btn {
    min-width: 140px;
}

/* --- Tooltip System --- */
.tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: help;
    margin-left: var(--space-xs);
    position: relative;
    vertical-align: middle;
}

.tooltip-content {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: var(--color-white);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    width: 280px;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text);
}

.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus .tooltip-content {
    display: block;
}

/* --- Help Panel --- */
.help-panel {
    background: #e8f4f8;
    border: 1px solid #b8daff;
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.help-panel h3 {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 1rem;
}

.help-panel p:last-child {
    margin-bottom: 0;
}

/* --- Will Preview --- */
.will-preview-wrapper {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.will-preview-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.will-document {
    background: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius);
    padding: var(--space-2xl) var(--space-3xl);
    box-shadow: var(--shadow-md);
    font-family: 'Times New Roman', Times, Georgia, serif;
    line-height: 1.7;
    color: #000;
}

.will-document .will-title {
    text-align: center;
    margin-bottom: var(--space-2xl);
    border-bottom: 2px solid #000;
    padding-bottom: var(--space-lg);
}

.will-document .will-title h1 {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: #000;
    margin-bottom: var(--space-xs);
}

.will-document .will-subtitle {
    font-size: 0.95rem;
    color: #333;
}

.will-document .will-clause {
    margin-bottom: var(--space-xl);
}

.will-document .will-clause h2 {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 1.1rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: var(--space-xs);
    margin-top: var(--space-xl);
    color: #000;
}

.will-document .will-clause p {
    text-align: justify;
    margin-bottom: var(--space-sm);
}

.will-document .will-clause ol {
    margin: var(--space-sm) 0 var(--space-sm) var(--space-xl);
}

.will-document .will-clause li {
    margin-bottom: var(--space-sm);
}

/* Force the full Testing Clause (with witness block) onto its own final page */
.will-document .will-testing {
    page-break-before: always;
    margin-top: var(--space-2xl);
}

/* Keep your existing signature fields exactly as they were */
.will-document .sig-field {
    margin: 12px 0;
    font-size: 11pt;
    line-height: 1.4;
    white-space: pre;
    width: 100%;
    display: block;
}

/* Make the address lines line up perfectly */
.will-document .sig-field.address-line {
    margin: 8px 0;
}

/* Keep the main testator signature a bit more spaced out */
.will-document .sig-main {
    margin-top: var(--space-2xl);
}

/* Witness block styling (unchanged but kept for clarity) */
.will-document .witness-block {
    margin-top: var(--space-2xl);
    border-top: 1px solid #000;
    padding-top: var(--space-xl);
}

/* --- Review Summary (Step 12) --- */
.review-sections {
    margin-bottom: var(--space-xl);
}
.review-section {
    background: var(--color-white);
    /* border removed → no more card lines */
    border: none;
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
    overflow: hidden;
    box-shadow: none; /* optional extra clean-up */
}
.review-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-off-white);
    /* header line removed too */
    border-bottom: none;
}
.review-section-header h3 {
    margin: 0;
    font-size: 1.05rem;
}
.review-section-body {
    padding: var(--space-lg);
}
.review-section-body .review-table td:first-child {
    width: 40%;
}

/* --- Instructions Page --- */
.instructions-page {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.instruction-section {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-light-grey);
}

.instruction-section:last-of-type {
    border-bottom: none;
}

.instruction-section h2 {
    color: var(--color-primary);
}

.important-section {
    background: #fff3cd;
    padding: var(--space-xl);
    border-radius: var(--border-radius);
    border: 1px solid #ffeeba;
}

.important-section h2 {
    margin-top: 0;
}

.checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 400;
}

.checklist-item input {
    margin-top: 0.2rem;
    accent-color: var(--color-success);
}

.instructions-for {
    background: var(--color-off-white);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-xl);
}

.instructions-for p { margin: 0; }

.instructions-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-2xl);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .will-document {
        padding: var(--space-lg);
    }

    .step-nav {
        justify-content: center;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    .person-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .person-card-actions {
        width: 100%;
    }

    .person-card-actions .btn {
        flex: 1;
        text-align: center;
    }

    .will-preview-actions {
        flex-direction: column;
    }

    .will-preview-actions .btn {
        text-align: center;
    }

    .instructions-actions {
        flex-direction: column;
    }

    .instructions-actions .btn {
        text-align: center;
    }
}