/* Services Features Shared Styles */
/* Shared styling for E-Guarantee, Hire Rep, Legal Partners, Insurance, Office Movers */
/* Uses common styles from styles.css as base */

/* Card Body Styling */
.card-body {
    padding: var(--spacing-6);
}

/* Card Header Spacing */
.card-header {
    padding-bottom: var(--spacing-3);
}

@media (max-width: 768px) {
    .card-body {
        padding: var(--spacing-4);
    }
}

/* E-Guarantee Specific Styles - Mockup Design */
.eguarantee-calculator {
    --eguarantee-primary: #FF6B4A; /* Orange/coral color from mockup */
}

.eguarantee-brand {
    color: var(--eguarantee-primary);
    font-weight: var(--font-weight-normal);
}



/* Grid Layouts for E-Guarantee */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5);
}

/* Calculator Section - Equal Height Columns */
.calculator-section {
    margin-bottom: var(--spacing-8);
}

.calculator-section .form-column,
.calculator-section .info-column {
    display: flex;
    flex-direction: column;
}

.calculator-section .benefits-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calculator-section .benefits-card .card-content {
    flex: 1;
}

/* Form Actions Inside Card */
.calculator-section .form-card .form-actions {
    margin-bottom: var(--spacing-6);
    padding-top: 0;
    border-top: none;
}

/* Section Spacing */
.section-spacing {
    margin-bottom: var(--spacing-8);
}

/* Summary Cards (Top 3 cards in results) */
.summary-cards {
    margin-bottom: var(--spacing-8);
}

.summary-card {
    padding: var(--spacing-6);
    text-align: center;
}

.summary-card-label {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--spacing-3);
}

.summary-card-value {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--eguarantee-primary);
    margin-bottom: var(--spacing-2);
}

.summary-card-detail {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

.summary-card.highlight {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.05), hsl(var(--primary) / 0.02));
}

.summary-card.highlight .summary-card-value {
    color: hsl(142 71% 35%);
}

/* Breakdown List Styling */
.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-4);
    border-bottom: 1px solid hsl(var(--border));
}

.breakdown-item:last-child {
    border-bottom: none;
}

.breakdown-item.total {
    border-top: 2px solid hsl(var(--border));
    padding-top: var(--spacing-5);
    font-weight: var(--font-weight-bold);
}

.breakdown-label {
    flex: 1;
}

.breakdown-title {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-1);
}

.breakdown-description {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

.breakdown-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

/* Comparison Grid (2-column layout) */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

.comparison-column {
    padding: var(--spacing-5);
    background: hsl(var(--muted) / 0.2);
    border-radius: 8px;
}

.comparison-column.highlight {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.08), hsl(var(--primary) / 0.03));
    border: 1px solid hsl(var(--primary) / 0.2);
}

.comparison-header {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-4);
}

.comparison-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.comparison-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comparison-item-label {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

.comparison-item-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.comparison-item-note {
    font-size: var(--font-size-xs);
    color: hsl(var(--muted-foreground));
    font-style: italic;
}

.comparison-item.total {
    border-top: 2px solid hsl(var(--border));
    padding-top: var(--spacing-3);
    margin-top: var(--spacing-2);
}

.comparison-item.total .comparison-item-label {
    font-weight: var(--font-weight-bold);
    color: hsl(var(--foreground));
}

.comparison-item.total .comparison-item-value {
    font-size: var(--font-size-2xl);
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    margin-top: var(--spacing-6);
}

.calculator-section .form-actions {
    margin-top: 0;
}

/* Text Color Utilities */
.text-success {
    color: hsl(142 71% 35%) !important;
}

/* Responsive Adjustments for E-Guarantee */
@media (max-width: 1024px) {
    .grid-2col,
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .grid-3col {
        grid-template-columns: 1fr;
    }

    .summary-card-value {
        font-size: 2rem;
    }

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

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

    /* All form rows stack on mobile */
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* All inline flex button containers stack on mobile */
    div[style*="display: flex"][style*="justify-content: center"] .btn,
    div[style*="display: flex"][style*="gap"] .btn {
        width: 100%;
    }

    div[style*="display: flex"][style*="justify-content: center"],
    div[style*="display: flex"][style*="align-items: center"] {
        flex-direction: column !important;
    }
}

/* Radio Option Styling */
.radio-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    background: hsl(var(--card));
    border: 2px solid hsl(var(--border));
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 60px;
}

.radio-option:hover {
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--primary) / 0.03);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.radio-option.active {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.08);
    box-shadow: 0 2px 12px hsl(var(--primary) / 0.15);
}

.radio-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: hsl(var(--primary));
}

.radio-option label {
    flex: 1;
    margin: 0;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: hsl(var(--foreground));
    padding: 0;
}

/* Results Summary Card */
.results-summary {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.05), hsl(var(--primary) / 0.02));
    border: 2px solid hsl(var(--primary) / 0.2);
}

.results-summary .summary-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: hsl(var(--primary));
    margin-bottom: var(--spacing-2);
}

.results-summary .summary-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: hsl(var(--primary));
}

.results-summary .summary-label {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Result Items Grid */
.result-items {
    display: grid;
    gap: var(--spacing-4);
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: hsl(var(--muted) / 0.3);
    border-radius: 8px;
}

.result-item-label {
    font-size: var(--font-size-base);
    color: hsl(var(--foreground));
    font-weight: var(--font-weight-medium);
}

.result-item-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: hsl(var(--primary));
}

/* Breakdown Table */
.breakdown-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-4);
}

.breakdown-table thead {
    background: hsl(var(--muted) / 0.5);
}

.breakdown-table th {
    padding: var(--spacing-3);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: hsl(var(--foreground));
    border-bottom: 2px solid hsl(var(--border));
}

.breakdown-table td {
    padding: var(--spacing-3);
    border-bottom: 1px solid hsl(var(--border));
    font-size: var(--font-size-sm);
}

.breakdown-table tbody tr:hover {
    background: hsl(var(--muted) / 0.2);
}

.breakdown-table .text-right {
    text-align: right;
}

.breakdown-table .font-semibold {
    font-weight: var(--font-weight-semibold);
}

/* Info Banners */
.info-banner {
    padding: var(--spacing-4);
    background: hsl(var(--primary) / 0.05);
    border-left: 4px solid hsl(var(--primary));
    border-radius: 6px;
    margin-bottom: var(--spacing-5);
}

.info-banner-title {
    font-weight: var(--font-weight-semibold);
    color: hsl(var(--foreground));
    margin-bottom: var(--spacing-2);
}

.info-banner-content {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
}

.warning-banner {
    background: hsl(48 100% 96%);
    border-left-color: hsl(48 96% 53%);
}

/* Badge Styles for Services */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}

.badge-urgent {
    background: hsl(0 84% 60% / 0.15);
    color: hsl(0 84% 40%);
}

.badge-priority {
    background: hsl(48 96% 53% / 0.15);
    color: hsl(48 96% 30%);
}

.badge-standard {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.badge-risk-low {
    background: hsl(142 71% 45% / 0.15);
    color: hsl(142 71% 25%);
}

.badge-risk-medium {
    background: hsl(48 96% 53% / 0.15);
    color: hsl(48 96% 30%);
}

.badge-risk-high {
    background: hsl(0 84% 60% / 0.15);
    color: hsl(0 84% 40%);
}

/* Service Add-ons */
.service-addons {
    display: grid;
    gap: var(--spacing-3);
}

.service-addon {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
    transition: all 0.2s;
}

.service-addon:hover {
    border-color: hsl(var(--primary) / 0.3);
    background: hsl(var(--primary) / 0.02);
}

.service-addon input[type="checkbox"] {
    margin-top: 2px;
}

.service-addon-content {
    flex: 1;
}

.service-addon-title {
    font-weight: var(--font-weight-medium);
    color: hsl(var(--foreground));
    margin-bottom: var(--spacing-1);
}

.service-addon-cost {
    font-weight: var(--font-weight-semibold);
    color: hsl(var(--primary));
    margin-left: var(--spacing-2);
}

.service-addon-description {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

/* Marketing Content (for Legal Partners) */
.marketing-section {
    margin-bottom: var(--spacing-8);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-5);
    margin-top: var(--spacing-6);
}

.benefit-card {
    padding: var(--spacing-5);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    text-align: center;
}

.benefit-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-3);
}

.benefit-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.benefit-description {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
}

.service-item {
    padding: var(--spacing-4);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
    text-align: center;
}

.service-item:hover {
    border-color: hsl(var(--primary));
}

.service-item-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
}

.service-item-title {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.testimonials {
    display: grid;
    gap: var(--spacing-5);
    margin-top: var(--spacing-6);
}

.testimonial-card {
    padding: var(--spacing-5);
    background: hsl(var(--card));
    border-left: 3px solid hsl(var(--primary));
    border-radius: 8px;
}

.testimonial-quote {
    font-size: var(--font-size-base);
    font-style: italic;
    color: hsl(var(--foreground));
    margin-bottom: var(--spacing-3);
}

.testimonial-author {
    font-weight: var(--font-weight-semibold);
    color: hsl(var(--foreground));
}

.testimonial-company {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

/* Slider Inputs */
.slider-container {
    margin-top: var(--spacing-2);
}

.slider-input {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: hsl(var(--muted));
    outline: none;
    -webkit-appearance: none;
}

.eguarantee-calculator .slider-input {
    background: linear-gradient(to right, var(--eguarantee-primary) 0%, var(--eguarantee-primary) var(--slider-progress, 50%), hsl(var(--muted)) var(--slider-progress, 50%), hsl(var(--muted)) 100%);
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--eguarantee-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--eguarantee-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slider-value {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

.slider-current {
    font-weight: var(--font-weight-semibold);
    color: var(--eguarantee-primary);
}

/* File Upload */
.file-upload-wrapper {
    position: relative;
}

.file-upload-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: hsl(var(--card));
    border: 2px dashed hsl(var(--border));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.file-upload-label:hover {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.02);
}

.file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.file-upload-text {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

.file-name {
    font-weight: var(--font-weight-medium);
    color: hsl(var(--foreground));
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .service-form-container,
    .results-container {
        padding: 0 var(--spacing-4);
    }

    .benefits-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .result-item {
        flex-direction: column;
        gap: var(--spacing-2);
        align-items: flex-start;
    }
}

/* ============================================================================
   E-GUARANTEE CALCULATOR - UPDATED STYLES
   ============================================================================ */

/* Benefits List Styling */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.benefits-list li > span:last-child {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.benefit-icon {
    color: hsl(142 71% 35%);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

/* Pricing Tiers Grid */
.pricing-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.pricing-tier {
    text-align: center;
    padding: var(--spacing-4);
    background: hsl(var(--muted) / 0.3);
    border-radius: 8px;
}

.tier-range {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--spacing-2);
}

.tier-price {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--eguarantee-primary);
}

.pricing-note {
    text-align: center;
    padding-top: var(--spacing-4);
    border-top: 1px solid hsl(var(--border));
}

.pricing-note p {
    margin: var(--spacing-2) 0;
}

/* Requirements Grid */
.requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.requirement-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--eguarantee-primary);
    color: white;
    border-radius: 50%;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.requirement-item p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.partner-info {
    text-align: center;
    padding-top: var(--spacing-4);
    border-top: 1px solid hsl(var(--border));
}

.partner-info p {
    margin: 0;
}

.partner-info a {
    color: var(--eguarantee-primary);
    text-decoration: none;
}

.partner-info a:hover {
    text-decoration: underline;
}

/* Alert Card for Custom Quote */
.alert-card {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.08), hsl(var(--primary) / 0.03));
    border: 2px solid var(--eguarantee-primary);
    margin-bottom: var(--spacing-6);
}

.alert-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
    color: var(--eguarantee-primary);
}

.alert-description {
    font-size: var(--font-size-base);
    margin: 0;
    color: hsl(var(--foreground));
}

/* Detail Cards (3-column layout for results) */
.details-cards {
    margin-bottom: var(--spacing-6);
}

.detail-card .card-content {
    text-align: center;
}

.detail-value {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--eguarantee-primary);
    margin-bottom: var(--spacing-2);
}

.detail-description {
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--spacing-1);
}

.detail-calculation {
    font-size: var(--font-size-xs);
    color: hsl(var(--muted-foreground));
    font-style: italic;
}

.detail-card.highlight {
    background: linear-gradient(135deg, hsl(142 71% 95%), hsl(142 71% 98%));
}

.detail-card.highlight .detail-value {
    color: hsl(142 71% 35%);
}

/* Disclaimer Card */
.disclaimer-card {
    background: hsl(var(--muted) / 0.3);
    border: none;
    margin-bottom: var(--spacing-6);
}

.disclaimer-card .card-content {
    padding: var(--spacing-4);
    text-align: center;
}

/* Breakdown Table Styling */
.breakdown-table {
    width: 100%;
    border-collapse: collapse;
}

.breakdown-table th {
    text-align: left;
    padding: var(--spacing-3);
    border-bottom: 2px solid hsl(var(--border));
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: hsl(var(--muted-foreground));
}

.breakdown-table td {
    padding: var(--spacing-3);
    border-bottom: 1px solid hsl(var(--border));
}

.breakdown-table tbody tr:last-child td {
    border-bottom: none;
}

.breakdown-table .text-right {
    text-align: right;
}

.breakdown-table .font-semibold {
    font-weight: var(--font-weight-semibold);
}

/* Responsive Adjustments for New Layout */
@media (max-width: 1024px) {
    .pricing-tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Add padding to form card on mobile */
    .calculator-section .form-card .card-content {
        padding: var(--spacing-4);
    }

    .calculator-section .form-card .form-actions {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .pricing-tiers,
    .requirements-grid {
        grid-template-columns: 1fr;
    }

    /* Reset requirements grid to flow down instead of across columns */
    .requirements-grid {
        grid-auto-flow: row;
        grid-template-rows: auto;
    }

    .tier-price {
        font-size: var(--font-size-xl);
    }

    .detail-value {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   OFFICE MOVERS - STYLES
   ============================================================================ */

/* Office Movers Grid Layout */

.movers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

/* Checkbox Group Styling */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* Checkbox Grid for multi-column layouts */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: hsl(var(--primary));
}

.checkbox-label span {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Special Requirements Field Spacing */
.special-requirements-field {
    margin-top: var(--spacing-6);
}

/* Responsive Adjustments for Office Movers */
@media (max-width: 1024px) {
    .movers-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   LEGAL PARTNERS - KEY FACTS SECTION
   ============================================================================ */

/* Key Facts Grid Layout */
.key-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-5);
    margin-top: var(--spacing-6);
}

.key-fact-card {
    padding: var(--spacing-5);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    transition: all 0.2s;
}

.key-fact-card:hover {
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 4px 12px hsl(var(--primary) / 0.1);
}

.key-fact-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-4);
    color: hsl(var(--foreground));
}

.key-fact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.key-fact-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
}

.key-fact-list .checkmark {
    color: hsl(var(--primary));
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Responsive Adjustments for Key Facts */
@media (max-width: 768px) {
    .key-facts-grid {
        grid-template-columns: 1fr;
    }
}

/* Addon List Styles */
.addon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.addon-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid hsl(var(--border));
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.addon-item:last-child {
    border-bottom: none;
}

.addon-check {
    color: hsl(var(--success));
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}