/* Copyright © 2026 CampaignComply. All rights reserved. */

/* Form 460 Specific Styles */
/* Extends form410-styles.css */

/* ==========================================
   HERO TITLE
   ========================================== */

.form460-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
}

/* Collapsed hero for steps 2+ (toggled by JS) */
.hero.hero-collapsed {
    padding: 0.75rem 0;
}

.hero.hero-collapsed .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero.hero-collapsed .form460-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.hero.hero-collapsed p {
    display: none;
}

/* ==========================================
   RESPONSIVE GRID LAYOUTS
   ========================================== */

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

.grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

.grid-3col-address {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

.grid-address {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

.grid-gpc {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

/* ==========================================
   IMPORT BANNER
   ========================================== */

.import-banner {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: var(--info-light, var(--bg-selected));
    border-left: 4px solid var(--primary);
    border-radius: 8px;
}

.import-banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.import-banner-content {
    flex: 1;
}

.import-banner-content h3 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1.1rem;
}

.import-banner-content p {
    margin: 0 0 1rem 0;
    line-height: 1.6;
    color: var(--text-secondary);
}

.import-banner-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.import-banner-close {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Override global .form-part hidden default (used by Form 496/497 modals) */
/* Form 460 uses .form-part as visible layout containers, not step toggles */
#wizardMain .form-part {
    display: block;
}

/* Prevent grid children from overflowing (e.g. phone field) */
#wizardMain .form-row .form-group {
    min-width: 0;
}

/* Schedule tab styles removed — each schedule is now its own wizard step */

/* ==========================================
   TIGHTER VERTICAL SPACING (#7)
   ========================================== */

#wizardMain .wizard-progress-header {
    margin-bottom: 0.75rem;
}

#wizardMain .wizard-steps-compact {
    margin-bottom: 0.75rem;
}

/* ==========================================
   COMPACT STEP CIRCLES (12 steps with numbers)
   ========================================== */

/* Hide the connecting line above circles for Form 460 */
#wizardMain .wizard-steps-compact::before {
    display: none;
}

/* Desktop: Smaller circles to fit 12 steps */
.wizard-steps-compact .step-circle {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
    border-width: 3px;
    line-height: 1;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-steps-compact .wizard-step {
    min-width: 70px;
    max-width: 90px;
}

.wizard-steps-compact .wizard-step.active .step-circle {
    transform: scale(1.05);
}

.wizard-steps-compact .wizard-step.completed .step-circle::before {
    content: none; /* Keep the number visible, don't show checkmark */
}

/* Skipped step styling for circles */
.wizard-steps-compact .wizard-step.skipped .step-circle {
    background: var(--danger-light);
    border-color: #FCA5A5;
    color: var(--danger);
}

.wizard-steps-compact .wizard-step.skipped .step-label {
    color: var(--danger);
    font-weight: 500;
}

/* ==========================================
   ENTRY CARDS (Schedule A, E, etc.)
   ========================================== */

.entry-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
}

.entry-card:hover {
    border-color: var(--border-medium);
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.entry-header span {
    font-weight: 600;
    color: var(--primary);
    font-size: 1rem;
}

.entry-header .remove-entry {
    background: transparent;
    border: 1px solid #DC2626;
    color: #DC2626;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.entry-header .remove-entry:hover {
    background: var(--danger-light);
}

.entry-header .copy-entry {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.entry-header .copy-entry:hover {
    background: var(--bg-selected);
}

/* ==========================================
   CONTRIBUTOR AUTOCOMPLETE
   ========================================== */

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 2px;
}

.autocomplete-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s ease;
}

.autocomplete-option:last-child {
    border-bottom: none;
}

.autocomplete-option:hover,
.autocomplete-option:focus {
    background: var(--bg-selected);
    outline: none;
}

.autocomplete-option strong {
    color: #1F2937;
}

/* ==========================================
   FILING DEADLINE INFO
   ========================================== */

.filing-deadline-info {
    background: linear-gradient(135deg, var(--bg-selected) 0%, #DBEAFE 100%);
    border: 1px solid #93C5FD;
    border-left: 4px solid #2563EB;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1E40AF;
}

.entry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.entry-grid .full-width {
    grid-column: 1 / -1;
}

/* ==========================================
   CONTRIBUTOR CODE SELECTOR
   ========================================== */

.code-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.code-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-medium);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}

.code-btn:hover {
    border-color: var(--primary);
}

.code-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ==========================================
   PAYMENT CODE SELECT (Schedule E)
   ========================================== */

.payment-code-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    color: var(--text-secondary);
    cursor: pointer;
}

.payment-code-select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(43, 74, 111, 0.15);
}

/* ==========================================
   AMOUNT FIELD
   ========================================== */

.amount-input-wrapper {
    position: relative;
}

.amount-input-wrapper::before {
    content: '$';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
}

.form-group .amount-input-wrapper input {
    padding-left: 28px;
}

/* ==========================================
   RUNNING TOTAL BAR (#11 - more prominent)
   ========================================== */

/* ── Schedule Summary Lines (FPPC form aesthetic) ── */

/* Container for the numbered summary list */
.schedule-summary-list {
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0.75rem;
}

/* Each summary line item */
.summary-line {
    display: flex;
    align-items: baseline;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #E2E8F0;
    gap: 0.5rem;
}

.summary-line:last-child {
    border-bottom: none;
}

/* Line number */
.summary-line .line-num {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.85rem;
    min-width: 1.5rem;
    flex-shrink: 0;
}

/* Description text */
.summary-line .line-desc {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Dotted leader between text and amount */
.summary-line .line-dots {
    flex: 0 1 auto;
    min-width: 2rem;
    border-bottom: 1px dotted #94A3B8;
    margin: 0 0.25rem;
    align-self: flex-end;
    height: 0.75rem;
}

/* Dollar label + amount */
.summary-line .line-amount-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: flex-end;
}

.summary-line .line-dollar {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-line .line-amount {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* Editable input inside a summary line */
.summary-line .line-input {
    width: 110px;
    padding: 0.35rem 0.5rem;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.summary-line .line-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(43, 74, 111, 0.15);
}

/* Grand total line — heavier styling */
.summary-line.grand-total {
    background: #EFF6FF;
    border-bottom: none;
    padding: 0.75rem 1rem;
}

.summary-line.grand-total .line-desc {
    font-weight: 600;
    color: var(--primary);
}

.summary-line.grand-total .line-amount {
    font-size: 1.2rem;
    font-weight: 800;
}

/* Dimmed line (e.g., coming soon) */
.summary-line.dimmed {
    opacity: 0.55;
}

/* Legacy running-total support (used outside schedule summaries) */
.running-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    margin-top: 0.75rem;
}

.running-total .total-label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
    flex: 1;
    padding-right: 1rem;
}

.running-total .total-amount {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.15rem;
    white-space: nowrap;
}

/* ==========================================
   SUMMARY PAGE
   ========================================== */

/* Widen the wizard container for Form 460 (more columns than other forms) */
#wizardMain.wizard-container {
    max-width: 1000px;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
}

.summary-table th,
.summary-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.summary-table th {
    background: var(--border-light);
    font-weight: 600;
    color: var(--text-secondary);
}

.summary-table .line-number {
    width: 3rem;
    color: #6B7280;
    font-weight: 500;
}

.summary-table .line-description {
    color: var(--text-secondary);
}

.summary-table .col-a,
.summary-table .col-b {
    width: 9rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.summary-table .col-a input,
.summary-table .col-b input {
    width: 100%;
    text-align: right;
    padding: 0.375rem;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.summary-table .computed {
    background: #F0FDF4;
    font-weight: 600;
    color: #166534;
}

.summary-table .subtotal-row {
    background: var(--bg-selected);
    font-weight: 600;
}

.summary-table .total-row {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.summary-table .total-row td {
    border-bottom-color: var(--primary);
}

.summary-table .section-header td {
    background: var(--bg-subtle);
    font-weight: 700;
    color: var(--primary);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    padding-top: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
}

/* Soft validation: incomplete field highlight */
.incomplete-highlight {
    border-color: var(--danger, #DC2626) !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

/* ==========================================
   VERIFICATION SIGNATURES
   ========================================== */

.verification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.signature-block {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
}

.signature-block h4 {
    color: var(--primary);
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
}

/* ==========================================
   REVIEW SUMMARY (#8 - full width on desktop)
   ========================================== */

.review-summary {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

#reviewContent {
    display: block;
    width: 100%;
}

#reviewContent .review-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

#reviewContent .review-section {
    break-inside: avoid;
}

.review-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-left: 1rem;
    border-left: 3px solid var(--primary);
}

.review-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.review-section h4 {
    color: var(--primary);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}

.review-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.review-item .label {
    color: #6B7280;
}

.review-item .value {
    font-weight: 500;
    color: #1F2937;
}

/* ==========================================
   EMPTY SCHEDULE STATE (#12 - more helpful)
   ========================================== */

.empty-schedule {
    text-align: center;
    padding: 2.5rem 2rem;
    color: #6B7280;
    background: var(--bg-subtle);
    border: 2px dashed var(--border-medium);
    border-radius: 8px;
}

.empty-schedule p {
    margin: 0 0 0.5rem 0;
}

.empty-schedule .empty-hint {
    font-size: 0.85rem;
    color: var(--text-light);
    font-style: italic;
}

/* ==========================================
   GUARANTOR SUB-CARDS (Schedule B Part 2)
   ========================================== */

.guarantor-card {
    background: #F0F9FF;
    border: 1px solid #BFDBFE;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.guarantor-card .entry-grid {
    gap: 0.75rem;
}

.guarantor-card label {
    font-size: 0.85rem;
    color: #1E40AF;
}

/* ==========================================
   CONDITIONAL FIELDS (e.g. occupation/employer)
   ========================================== */

.conditional-field {
    display: none;
}

.conditional-field.show {
    display: block;
}

/* ==========================================
   PDF DOWNLOAD BUTTONS (#14 - more prominent)
   ========================================== */

.pdf-download-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #F0F9FF;
    border: 2px solid #BFDBFE;
    border-radius: 12px;
}

.pdf-download-group .btn {
    min-width: 280px;
    text-align: center;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

/* Mobile Step Dropdown - hidden on desktop, visible on mobile */
.mobile-step-dropdown {
    display: none;
    margin: 0 1rem 1rem 1rem;
}

.mobile-step-dropdown select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary);
    background: white;
    border: 2px solid var(--primary);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232B4A6F' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.mobile-step-dropdown select:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(217, 74, 67, 0.2);
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-message {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
}

.loading-subtext {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* (Radio circle-left layout moved to shared styles.css so all forms get it.) */

/* Discoverability hint for committee types that have hidden sub-options.
   Appears under the label until the parent is selected (at which point the
   sub-options become visible, so the hint is no longer needed). */
.radio-option .subtype-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--font-size-sm, 0.85rem);
    font-weight: var(--font-normal, 400);
    color: var(--text-secondary, #6B7280);
}

.radio-group label.radio-option:has(input[type="radio"]:checked) .subtype-hint {
    display: none;
}

/* Summary Lines 20-22 two-column input rows: side-by-side on desktop, stacked on
   mobile so date/number inputs don't overflow the narrow table cell. */
.sum-twocol { display: flex; gap: 6px; }
.sum-twocol > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 768px) {
    .sum-twocol { flex-direction: column; align-items: stretch; }
}

/* Wizard nav buttons: keep each button's label on one line and let the row wrap
   instead of squeezing/cutting off the "Previous" button when later steps have
   long Skip/Next labels (e.g., Schedule D). (review 11.16) */
#wizardMain .navigation-buttons {
    flex-wrap: wrap;
}
#wizardMain .navigation-buttons .btn,
#wizardMain .navigation-buttons .btn-secondary,
#wizardMain .navigation-buttons .btn-primary,
#wizardMain .navigation-buttons .skip-step-btn {
    white-space: nowrap;
}
#wizardMain .navigation-buttons > .btn-secondary {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* Show mobile dropdown, optionally hide desktop step circles */
    .mobile-step-dropdown {
        display: block;
    }
    .form460-hero-title {
        font-size: 2rem;
    }

    /* Collapsed hero on tablet */
    .hero.hero-collapsed .form460-hero-title {
        font-size: 1.1rem;
    }

    .entry-grid {
        grid-template-columns: 1fr;
    }

    .entry-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .entry-header span {
        flex: 1;
        min-width: 0;
    }

    .code-selector {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .code-btn {
        flex: 0 0 auto;
        min-width: 3rem;
        text-align: center;
    }

    .verification-grid {
        grid-template-columns: 1fr;
    }

    .review-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Review summary: single column on tablet */
    #reviewContent .review-summary {
        flex-direction: column;
    }

    .summary-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .summary-table {
        min-width: 480px;
    }

    .summary-table .col-a,
    .summary-table .col-b {
        width: 6rem;
    }

    .summary-table th,
    .summary-table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    /* #4: Fix section header word-breaking on mobile */
    .summary-table .section-header td {
        font-size: 0.75rem;
        white-space: nowrap;
        padding-top: 0.75rem;
    }

    /* Stack grids on tablet */
    .grid-3col,
    .grid-3col-address,
    .grid-address {
        grid-template-columns: 1fr 1fr;
    }

    .grid-gpc {
        grid-template-columns: 1fr 1fr;
    }

    .grid-gpc > *:last-child {
        grid-column: 1 / -1;
    }

    /* Running total bar wrap */
    .running-total {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Import banner stack buttons */
    .import-banner-actions {
        flex-direction: column;
    }

    .import-banner-actions .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .form460-hero-title {
        font-size: 1.5rem;
    }

    /* #3: Remove blank cream area above hero - keep clearance for fixed nav */
    .hero {
        margin-top: 70px;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* Collapsed hero on phone */
    .hero.hero-collapsed {
        padding: 0.5rem 0;
    }

    .hero.hero-collapsed .form460-hero-title {
        font-size: 1rem;
    }

    /* Landing page 2-col grid stacks on mobile */
    .interstitial-grid {
        grid-template-columns: 1fr !important;
    }

    /* PDF preview shorter on mobile */
    #pdfPreviewFrame {
        height: 350px !important;
    }

    /* Verification signature fields stack on mobile */
    .form-part [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .entry-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* Code buttons: increase touch targets on mobile */
    .code-btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.85rem;
        min-height: 44px;
        min-width: 44px;
    }

    /* Stack all grids to single column */
    .grid-2col,
    .grid-3col,
    .grid-3col-address,
    .grid-address {
        grid-template-columns: 1fr;
    }

    .grid-gpc {
        grid-template-columns: 1fr;
    }

    .grid-gpc > *:last-child {
        grid-column: 1;
    }

    /* Import banner */
    .import-banner-inner {
        flex-direction: column;
    }

    .import-banner-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
    }

    .import-banner {
        position: relative;
    }

    /* #1: Progress header - stack on mobile */
    .progress-text {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .progress-step {
        font-size: 0.85rem;
    }

    .progress-percentage {
        font-size: 0.95rem;
    }

    /* #2 + #13: Stack navigation buttons vertically on mobile */
    .navigation-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }

    .navigation-buttons .btn-secondary,
    .navigation-buttons .btn-primary,
    .navigation-buttons .skip-step-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .nav-right-group {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .nav-right-group .btn-primary,
    .nav-right-group .skip-step-btn {
        width: 100%;
    }

    /* Reorder: Next first, then Skip, via order */
    .nav-right-group .btn-primary {
        order: -1;
    }

    /* PDF download buttons stack */
    .pdf-download-group .btn {
        min-width: 0;
        width: 100%;
    }

    /* #9: Reduce radio button padding on mobile */
    .radio-option,
    .checkbox-option {
        padding: 0.75rem;
    }

    /* #16: Feedback button - don't overlap content */
    .feedback-widget {
        bottom: 0.5rem;
        right: 0.5rem;
    }

    .feedback-widget .feedback-trigger {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* ===== MOBILE COMPACT STEPPER (Form 460 only) ===== */
    /* Override display:none from form410-styles.css (#id beats .class specificity) */
    #wizardMain .wizard-steps-compact {
        display: flex;
        padding: 0.75rem 0.75rem 0.5rem 0.75rem; /* Extra top padding for box-shadow */
        gap: 0;
        margin-bottom: 0.5rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        overflow-x: auto;
        overflow-y: visible; /* Don't clip box-shadow vertically */
    }

    #wizardMain .wizard-steps-compact::-webkit-scrollbar {
        display: none;
    }

    #wizardMain .wizard-steps-compact::before {
        display: none;
    }

    #wizardMain .wizard-steps-compact .wizard-step {
        min-width: 32px;
        max-width: 32px;
        flex: 0 0 32px;
        padding: 8px 2px;
        scroll-snap-align: center;
    }

    #wizardMain .wizard-steps-compact .step-circle {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
        border-width: 2px;
        line-height: 1;
        overflow: visible;
    }

    #wizardMain .wizard-steps-compact .wizard-step.active .step-circle {
        width: 30px;
        height: 30px;
        transform: none;
        box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.25);
        line-height: 1;
    }

    #wizardMain .wizard-steps-compact .step-label {
        display: none;
    }

    #wizardMain .wizard-steps-compact .wizard-step:hover .step-circle {
        transform: none;
    }

    #wizardMain .wizard-steps-compact .wizard-step.skipped .step-circle {
        background: var(--danger-light);
        border-color: #FCA5A5;
        color: var(--danger);
    }
}

/* ==========================================
   SKIP NOTIFICATION
   ========================================== */

.skip-notification {
    color: #DC2626;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
    text-align: center;
}

.gpc-slot {
    margin-bottom: 0.25rem;
}

/* Skipped step styles are now defined in the compact step circles section above */

/* ==========================================
   PRINT STYLESHEET
   ========================================== */
@media print {
    body * {
        visibility: hidden;
    }

    .review-summary,
    .review-summary * {
        visibility: visible;
    }

    .review-summary {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        padding: 20px !important;
    }

    .wizard-progress-header,
    .wizard-steps,
    .validation-error-panel,
    .info-box,
    .no-print {
        display: none !important;
    }

    .summary-table {
        page-break-inside: avoid;
    }

    .summary-table th,
    .summary-table td {
        border: 1px solid #ccc !important;
        padding: 8px !important;
    }

    .review-section {
        page-break-inside: avoid;
    }

    .review-summary::after {
        content: "Printed from Campaign Comply - For reference only. Official filing must use generated PDF.";
        display: block;
        margin-top: 20px;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        font-size: 9pt;
        color: #666;
        text-align: center;
    }
}

/* ==========================================
   INFO TOOLTIPS
   ========================================== */

.info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.85rem;
    color: #6B7280;
    background: var(--border-light);
    border-radius: 50%;
    cursor: help;
    margin-left: 0.25rem;
    vertical-align: middle;
    position: relative;
}

.info-tooltip:hover {
    color: var(--primary);
    background: var(--border);
}

/* Native title attribute tooltip styling via CSS */
.info-tooltip[title] {
    position: relative;
}

.info-tooltip[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1F2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    line-height: 1.4;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.info-tooltip[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1F2937;
    z-index: 1000;
}

/* ==========================================
   FIELD WARNINGS (FPPC Compliance)
   ========================================== */

.field-warning {
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #92400E;
    line-height: 1.4;
}

.field-warning strong {
    color: #B45309;
}

.field-has-warning {
    border-color: var(--warning) !important;
    background-color: #FFFBEB !important;
}

.field-has-warning:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

/* ==========================================
   FIELD ERRORS (Blocking validation)
   ========================================== */

.field-error {
    background: var(--danger-light);
    border: 1px solid #DC2626;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #991B1B;
    line-height: 1.5;
}

.field-error strong {
    color: #7F1D1D;
}

.field-has-error {
    background-color: var(--danger-light) !important;
    color: #991B1B !important;
    font-weight: 700;
}

/* ==========================================
   INLINE VALIDATION ERRORS
   ========================================== */

.field-error-inline {
    color: #DC2626;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.field-error-inline::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #DC2626;
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.field-invalid {
    border-color: #DC2626 !important;
}

.field-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

/* ==========================================
   AUTO-SAVE INDICATOR
   ========================================== */

.auto-save-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #6B7280;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.auto-save-status.saving {
    color: #2563EB;
}

.auto-save-status.saved {
    color: var(--valid);
}

.auto-save-status.error {
    color: #DC2626;
    background: var(--danger-light);
    padding: 0.25rem 0.75rem;
}

.auto-save-status .save-icon {
    font-size: 0.9rem;
}

/* ==========================================
   COMPLETED STEP CHECKMARKS
   ========================================== */

/* Show checkmark badge on completed steps */
.wizard-steps-compact .wizard-step.completed .step-circle::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: var(--valid);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.wizard-steps-compact .step-circle {
    position: relative;
}

/* Mobile: smaller checkmark badge */
@media (max-width: 480px) {
    .wizard-steps-compact .wizard-step.completed .step-circle::after {
        width: 12px;
        height: 12px;
        bottom: -1px;
        right: -1px;
        background-size: 8px;
    }
}

/* ==========================================
   VALIDATION ERROR PANEL (Enhanced)
   ========================================== */

.validation-error-panel {
    display: none;
    background: linear-gradient(135deg, var(--warning-light) 0%, #FDE68A 100%);
    border-left: 4px solid var(--warning);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease;
}

.validation-error-panel.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.validation-error-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.validation-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--warning);
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.validation-error-title {
    color: #92400E;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

.validation-error-description {
    color: #78350F;
    font-size: 0.875rem;
    line-height: 1.5;
}

.validation-error-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.validation-error-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.5rem;
    background: white;
    border-radius: 8px;
    border-left: 3px solid #DC2626;
    transition: all 0.2s ease;
    cursor: pointer;
}

.validation-error-item:hover {
    background: #FEF2F2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateX(4px);
}

.validation-error-item-icon {
    color: #DC2626;
    font-weight: 700;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.validation-error-item-text {
    flex: 1;
}

.validation-error-item-label {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

.validation-error-item-message {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.4;
}

.validation-error-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-error-action {
    padding: 0.5rem 1rem;
    background: var(--warning);
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-error-action:hover {
    background: #D97706;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-error-dismiss {
    background: white;
    color: #6B7280;
    border: 2px solid var(--border-medium);
}

.btn-error-dismiss:hover {
    background: var(--bg-subtle);
    border-color: var(--warning);
    color: var(--warning);
    transform: translateY(-2px);
}

/* ==========================================
   ENTRY SEARCH/FILTER
   ========================================== */

.entry-search-wrapper {
    margin-bottom: 1rem;
}

.entry-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-left: 2.5rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.9375rem;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239CA3AF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1.25rem;
    transition: all 0.2s ease;
}

.entry-search-input:focus {
    outline: none;
    border-color: var(--primary, var(--primary));
    box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.entry-search-input::placeholder {
    color: var(--text-light);
}

.entry-search-no-results {
    display: none;
    text-align: center;
    padding: 1.5rem;
    color: #6B7280;
    font-size: 0.9375rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    border: 2px dashed var(--border);
    margin-top: 1rem;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .validation-error-panel {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .validation-error-header {
        gap: 0.75rem;
    }

    .validation-error-icon {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    .validation-error-title {
        font-size: 1rem;
    }

    .validation-error-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-error-action {
        width: 100%;
        justify-content: center;
    }

    .entry-search-input {
        padding: 0.625rem 0.75rem;
        padding-left: 2.25rem;
        font-size: 0.875rem;
    }
}