/* Tracker Navigation */
        .tracker-nav { background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
        .tracker-nav-content { max-width: 1400px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
        .tracker-nav-btn { display: inline-block; padding: 8px 16px; background: white; color: #004559; text-decoration: none; border-radius: 6px; font-size: 13px; font-weight: 500; border: 1px solid #e5e7eb; transition: all 150ms ease; font-family: 'Inter', -apple-system, sans-serif; }
        .tracker-nav-btn:hover { background: #f0f9ff; border-color: #004559; }
        .tracker-nav-btn.active { background: #c8eb5b; color: black; border-color: #004559; }
        .tracker-nav-switch { background: linear-gradient(135deg, #00a0d2 0%, #0087b5 100%); color: white; border: none; }
        .tracker-nav-switch:hover { background: linear-gradient(135deg, #0087b5 0%, #006d93 100%); color: white; }
        .tracker-nav-divider { color: #d1d5db; font-size: 18px; margin: 0 4px; }
        @media (max-width: 768px) {
            .tracker-nav-content { gap: 6px; padding: 10px 15px; }
            .tracker-nav-btn { padding: 5px 8px; font-size: 0.7rem; }
            .tracker-nav-divider { display: none; }
            .tracker-nav-switch { width: 100%; text-align: center; margin-top: 4px; }
        }
        
        .calculator-page {
            max-width: 1180px;
            margin: 0 auto;
        }
        
        .intro-text {
            background: #f0f9ff;
            border-left: 4px solid #004559;
            padding: 16px 20px;
            margin-bottom: 24px;
            border-radius: 8px;
        }
        
        .intro-text h2 {
            color: #004559;
            font-size: 18px;
            margin: 0 0 8px 0;
        }
        
        .intro-text p {
            margin: 0;
            color: #374151;
            font-size: 14px;
            line-height: 1.6;
        }
        
        .disclaimer-text {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 12px 16px;
            margin-bottom: 24px;
            border-radius: 8px;
            font-size: 13px;
            color: #92400e;
            line-height: 1.5;
        }
        
        /* Steps Guide */
        .steps-guide {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .step-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border: 2px solid #e5e7eb;
            position: relative;
        }
        
        .step-number {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #a0f0ff, #e5b4ff);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 16px;
            color: #004559;
            margin: 0 auto 12px;
        }
        
        .step-title {
            font-weight: 600;
            font-size: 15px;
            color: #004559;
            margin-bottom: 8px;
        }
        
        .step-desc {
            font-size: 13px;
            color: #6b7280;
            line-height: 1.5;
        }
        
        .step-arrow {
            position: absolute;
            right: -24px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #d1d5db;
            z-index: 1;
        }
        
        .step-card:last-child .step-arrow {
            display: none;
        }
        
        @media (max-width: 768px) {
            .steps-guide {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            
            .step-card {
                padding: 16px;
                display: flex;
                align-items: center;
                text-align: left;
                gap: 12px;
            }
            
            .step-number {
                margin: 0;
                flex-shrink: 0;
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
            
            .step-content {
                flex: 1;
            }
            
            .step-title {
                font-size: 14px;
                margin-bottom: 4px;
            }
            
            .step-desc {
                font-size: 12px;
            }
            
            .step-arrow {
                display: none;
            }
        }
        
        .journey-builder {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .preset-buttons {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
            flex-wrap: nowrap;
        }
        
        .preset-btn {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            background: white;
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 150ms;
            text-align: center;
        }
        
        .preset-btn:hover {
            border-color: #004559;
            background: #f9fafb;
        }
        
        .preset-btn.active {
            background: #004559;
            color: white;
            border-color: #004559;
        }
        
        .preset-btn .btn-full {
            display: inline;
        }
        
        .preset-btn .btn-short {
            display: none;
        }
        
        .month-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .month-item {
            background: #f9fafb;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            position: relative;
        }
        
        .month-label {
            font-size: 12px;
            font-weight: 600;
            color: #6b7280;
            margin-bottom: 8px;
        }
        
        .month-select {
            width: 100%;
            padding: 8px;
            border: 2px solid #e5e7eb;
            border-radius: 6px;
            font-family: inherit;
            font-size: 13px;
        }
        
        .remove-month-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 18px;
            height: 18px;
            border: none;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
        
        .remove-month-btn:hover {
            background: #dc2626;
        }
        
        .add-month-container {
            display: flex;
            justify-content: center;
            margin-bottom: 24px;
        }
        
        .add-month-btn {
            padding: 12px 32px;
            border: 2px dashed #10b981;
            background: #f0fdf4;
            color: #10b981;
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 150ms;
        }
        
        .add-month-btn:hover {
            background: #dcfce7;
            border-color: #059669;
            color: #059669;
        }
        
        .results-section {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .comparison-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            border-bottom: 2px solid #e5e7eb;
            overflow-x: auto;
        }
        
        .tab-btn {
            padding: 12px 20px;
            border: none;
            background: transparent;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            color: #6b7280;
            border-bottom: 3px solid transparent;
            transition: all 150ms;
            white-space: nowrap;
        }
        
        .tab-btn.active {
            color: #004559;
            border-bottom-color: #004559;
        }
        
        .ranking-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }
        
        .ranking-table th,
        .ranking-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .ranking-table th {
            background: #f9fafb;
            font-weight: 600;
            font-size: 13px;
        }
        
        .ranking-table tr:hover {
            background: #f9fafb;
        }
        
        /* Row background colors for top 3 */
        .ranking-table tr.rank-1-row {
            background: #fef3c7;
        }
        
        .ranking-table tr.rank-1-row:hover {
            background: #fde68a;
        }
        
        .ranking-table tr.rank-2-row {
            background: #f3f4f6;
        }
        
        .ranking-table tr.rank-2-row:hover {
            background: #e5e7eb;
        }
        
        .ranking-table tr.rank-3-row {
            background: #fed7aa;
        }
        
        .ranking-table tr.rank-3-row:hover {
            background: #fdba74;
        }
        
        .ranking-table tr.compare-row {
            background: #fef3c7;
            border-top: 2px solid #f59e0b;
        }
        
        .ranking-table tr.compare-row:hover {
            background: #fde68a;
        }
        
        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-weight: 700;
            font-size: 14px;
        }
        
        .rank-1 { background: #fbbf24; color: white; }
        .rank-2 { background: #d1d5db; color: #1f2937; }
        .rank-3 { background: #fb923c; color: white; }
        .rank-other { background: #e5e7eb; color: #6b7280; }
        .rank-compare { background: #f59e0b; color: white; }
        
        .savings-highlight {
            background: #f0fdf4;
            border: 2px solid #10b981;
            border-radius: 8px;
            padding: 12px;
            margin-top: 12px;
            text-align: center;
        }
        
        .savings-value {
            font-size: 32px;
            font-weight: 700;
            color: #10b981;
        }
        
        .journey-summary {
            background: linear-gradient(135deg, #a0f0ff, #e5b4ff);
            border-radius: 8px;
            padding: 18px;
            margin-bottom: 24px;
        }
        
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        
        .summary-item {
            text-align: center;
        }
        
        .summary-label {
            font-size: 12px;
            color: #1f2937;
            margin-bottom: 4px;
        }
        
        .summary-value {
            font-size: 24px;
            font-weight: 700;
            color: #004559;
        }
        
        .compare-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .compare-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: #004559;
        }
        
        .compare-selector {
            background: #f0f9ff;
            border: 2px solid #bfdbfe;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .compare-selector label {
            font-weight: 600;
            color: #004559;
            font-size: 14px;
        }
        
        .compare-selector select {
            padding: 8px 12px;
            border: 2px solid #bfdbfe;
            border-radius: 6px;
            font-family: inherit;
            font-size: 14px;
            background: white;
            cursor: pointer;
            flex: 1;
            min-width: 200px;
        }
        
        .compare-selector button {
            padding: 8px 20px;
            background: #004559;
            color: white;
            border: none;
            border-radius: 6px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 150ms;
        }
        
        .compare-selector button:hover {
            background: #003344;
        }
        
        .compare-clear-btn {
            background: #ef4444 !important;
            padding: 8px 16px !important;
        }
        
        .compare-clear-btn:hover {
            background: #dc2626 !important;
        }
        
        .side-by-side-card {
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            background: white;
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }
        
        .side-by-side-card.cheapest {
            border-color: #10b981;
            background: #f0fdf4;
        }
        
        .side-by-side-badge {
            background: #10b981;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            display: inline-block;
            vertical-align: middle;
        }
        
        .side-by-side-breakdown {
            font-size: 12px;
            margin-bottom: 8px;
            padding: 8px;
            background: #f9fafb;
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .side-by-side-breakdown-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
        }
        
        #provider-selection {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px 12px;
            margin-bottom: 24px;
        }
        
        #provider-selection label {
            font-size: 13px;
        }
        
        /* Loading state */
        .loading-state {
            text-align: center;
            padding: 60px 20px;
            color: #6b7280;
        }
        
        .loading-spinner {
            font-size: 32px;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-bottom: 12px;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @media (max-width: 768px) {
            .preset-buttons {
                gap: 8px;
            }
            
            .preset-btn {
                padding: 10px 8px;
                font-size: 12px;
            }
            
            .preset-btn .btn-full {
                display: none;
            }
            
            .preset-btn .btn-short {
                display: inline;
            }
            
            .compare-selector {
                flex-direction: column;
                align-items: stretch;
            }
            
            .compare-selector select {
                min-width: 100%;
            }
            
            #provider-selection {
                grid-template-columns: repeat(2, 1fr);
                gap: 4px 8px;
            }
            
            #provider-selection label {
                font-size: 11px;
            }
            
            .compare-toggle {
                gap: 6px;
            }
            
            .compare-checkbox {
                width: 14px;
                height: 14px;
            }
            
            .summary-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .summary-value {
                font-size: 20px;
            }
            
            .tab-btn {
                padding: 10px 12px;
                font-size: 12px;
            }
            
            .ranking-table th,
            .ranking-table td {
                padding: 8px 6px;
                font-size: 12px;
            }
            
            .rank-badge {
                width: 26px;
                height: 26px;
                font-size: 12px;
            }
            
            .month-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
            
            .month-item {
                padding: 8px;
            }
            
            .month-label {
                font-size: 10px;
                margin-bottom: 4px;
            }
            
            .month-select {
                padding: 6px;
                font-size: 12px;
            }
            
            .journey-builder {
                padding: 16px;
            }
            
            .results-section {
                padding: 16px;
            }
        }

        @media (max-width: 480px) {
            .month-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    

/* Pharmacy name links in calculator */
.leaderboard-pharmacy-link {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}
.leaderboard-pharmacy-link:hover {
    color: #00a0d2;
    text-decoration: underline;
}