/* Pricing Table Block - Minimal Styling with CSS Variables */

.pricing-table-block {
    --pricing-gap: var(--space-m, 1.5rem);
    --pricing-border-radius: var(--radius-m, 0.5rem);
    --pricing-transition: var(--transition-base, 0.2s ease);
}

/* Mobile Cards View (default) */
.pricing-table-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pricing-card-min-width, 280px)), 1fr));
    gap: var(--pricing-gap);
}

.pricing-plan-card {
    --card-padding: var(--space-m-l, 2rem);
    --card-bg: var(--color-surface, #fff);
    --card-border: var(--border-width, 1px) solid var(--color-border, #e0e0e0);
    --card-shadow: var(--shadow-card, 0 2px 4px rgba(0, 0, 0, 0.1));
    
    position: relative;
    padding: var(--card-padding);
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--pricing-border-radius);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
}

/* Featured plan */
.pricing-plan-card.is-featured {
    --card-border: var(--border-width-thick, 2px) solid var(--color-primary, #007cba);
    --card-shadow: var(--shadow-card-hover, 0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Badge */
.pricing-plan-badge {
    --badge-bg: var(--color-primary, #007cba);
    --badge-color: var(--color-primary-contrast, #fff);
    --badge-padding: var(--space-xs, 0.5rem) var(--space-s, 1rem);
    --badge-font-size: var(--step--1, 0.875rem);
    
    position: absolute;
    top: 0;
    right: var(--card-padding);
    transform: translateY(-50%);
    background: var(--badge-bg);
    color: var(--badge-color);
    padding: var(--badge-padding);
    border-radius: var(--pricing-border-radius);
    font-size: var(--badge-font-size);
    font-weight: var(--font-weight-bold, 700);
}

/* Header */
.pricing-plan-header {
    --header-margin: 0 0 var(--space-m, 1.5rem) 0;
    margin: var(--header-margin);
}

.pricing-plan-name {
    --name-size: var(--step-2, 1.5rem);
    --name-color: var(--color-heading, inherit);
    --name-margin: 0 0 var(--space-xs, 0.5rem) 0;
    
    font-size: var(--name-size);
    color: var(--name-color);
    margin: var(--name-margin);
}

.pricing-plan-description {
    --desc-size: var(--step--1, 0.875rem);
    --desc-color: var(--color-text-muted, #666);
    --desc-margin: 0 0 var(--space-s, 1rem) 0;
    
    font-size: var(--desc-size);
    color: var(--desc-color);
    margin: var(--desc-margin);
}

/* Price */
.pricing-plan-price {
    --price-align: var(--text-align, left);
    --price-margin: var(--space-s, 1rem) 0 0 0;
    
    display: flex;
    align-items: baseline;
    gap: var(--space-xs, 0.25rem);
    text-align: var(--price-align);
    margin: var(--price-margin);
}

.pricing-currency {
    --currency-size: var(--step-0, 1rem);
    --currency-color: var(--color-text-muted, #666);
    
    font-size: var(--currency-size);
    color: var(--currency-color);
}

.pricing-amount {
    --amount-size: var(--step-3, 2rem);
    --amount-color: var(--color-heading, inherit);
    --amount-weight: var(--font-weight-bold, 700);
    
    font-size: var(--amount-size);
    color: var(--amount-color);
    font-weight: var(--amount-weight);
}

.pricing-period {
    --period-size: var(--step--1, 0.875rem);
    --period-color: var(--color-text-muted, #666);
    
    font-size: var(--period-size);
    color: var(--period-color);
}

/* Features */
.pricing-plan-features {
    --features-margin: var(--space-m, 1.5rem) 0;
    --features-padding: var(--space-m, 1.5rem) 0;
    --features-border-top: var(--border-width, 1px) solid var(--color-border-light, #f0f0f0);
    
    flex: 1;
    margin: var(--features-margin);
    padding: var(--features-padding);
    border-top: var(--features-border-top);
}

.pricing-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-feature {
    --feature-padding: var(--space-xs, 0.5rem) 0;
    --feature-gap: var(--space-xs, 0.5rem);
    
    display: flex;
    align-items: flex-start;
    gap: var(--feature-gap);
    padding: var(--feature-padding);
}

.pricing-feature.is-excluded {
    --feature-opacity: 0.5;
    opacity: var(--feature-opacity);
}

.pricing-feature-icon {
    --icon-size: var(--size-s, 1.25rem);
    --icon-included-color: var(--color-success, #22c55e);
    --icon-excluded-color: var(--color-error, #ef4444);
    
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--icon-included-color);
}

.pricing-feature.is-excluded .pricing-feature-icon {
    color: var(--icon-excluded-color);
}

.pricing-feature-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.pricing-feature-text {
    --text-size: var(--step--1, 0.875rem);
    --text-color: var(--color-text, inherit);
    
    font-size: var(--text-size);
    color: var(--text-color);
    flex: 1;
}

/* Tooltip */
.pricing-feature-tooltip {
    --tooltip-size: var(--size-xs, 1rem);
    --tooltip-bg: var(--color-surface-alt, #f5f5f5);
    --tooltip-color: var(--color-text, inherit);
    --tooltip-border: var(--border-width, 1px) solid var(--color-border, #e0e0e0);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tooltip-size);
    height: var(--tooltip-size);
    margin-left: var(--space-2xs, 0.25rem);
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    border: var(--tooltip-border);
    border-radius: 50%;
    font-size: calc(var(--tooltip-size) * 0.7);
    cursor: help;
    position: relative;
}

/* Tooltip popup */
.pricing-tooltip-popup {
    --popup-bg: var(--color-surface-dark, #333);
    --popup-color: var(--color-surface-dark-contrast, #fff);
    --popup-padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
    --popup-font-size: var(--step--2, 0.75rem);
    --popup-max-width: 200px;
    
    position: absolute;
    bottom: calc(100% + var(--space-xs, 0.5rem));
    left: 50%;
    transform: translateX(-50%);
    background: var(--popup-bg);
    color: var(--popup-color);
    padding: var(--popup-padding);
    border-radius: var(--radius-s, 0.25rem);
    font-size: var(--popup-font-size);
    max-width: var(--popup-max-width);
    white-space: normal;
    text-align: left;
    z-index: 10;
    box-shadow: var(--shadow-tooltip, 0 2px 8px rgba(0, 0, 0, 0.2));
}

.pricing-tooltip-popup[aria-hidden="true"] {
    display: none;
}

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

/* CTA */
.pricing-plan-footer {
    --footer-margin: var(--space-m, 1.5rem) 0 0 0;
    margin: var(--footer-margin);
}

.pricing-plan-cta {
    --cta-padding: var(--space-s, 0.75rem) var(--space-m, 1.5rem);
    --cta-bg: var(--color-surface-alt, #f5f5f5);
    --cta-color: var(--color-text, inherit);
    --cta-border: var(--border-width, 1px) solid var(--color-border, #e0e0e0);
    --cta-hover-bg: var(--color-primary, #007cba);
    --cta-hover-color: var(--color-primary-contrast, #fff);
    --cta-hover-border-color: var(--color-primary, #007cba);
    
    display: inline-block;
    width: 100%;
    padding: var(--cta-padding);
    background: var(--cta-bg);
    color: var(--cta-color);
    border: var(--cta-border);
    border-radius: var(--pricing-border-radius);
    text-align: center;
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    transition: all var(--pricing-transition);
}

.pricing-plan-cta:hover,
.pricing-plan-cta:focus {
    background: var(--cta-hover-bg);
    color: var(--cta-hover-color);
    border-color: var(--cta-hover-border-color);
}

.pricing-plan-cta.is-primary {
    --cta-bg: var(--color-primary, #007cba);
    --cta-color: var(--color-primary-contrast, #fff);
    --cta-border: var(--border-width, 1px) solid var(--color-primary, #007cba);
    --cta-hover-bg: var(--color-primary-dark, #005a8c);
    --cta-hover-border-color: var(--color-primary-dark, #005a8c);
}

/* Desktop Table View */
.pricing-table-desktop {
    --table-display: none;
    display: var(--table-display);
}

@media (min-width: 768px) {
    .pricing-table-desktop {
        --table-display: block;
    }
    
    .pricing-table-cards {
        display: none;
    }
}

.pricing-table-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) repeat(var(--plan-count, 3), 1fr);
    align-items: center;
}

.pricing-table-cell {
    --cell-padding: var(--space-s-m, 1rem);
    --cell-border: var(--border-width, 1px) solid var(--color-border-light, #f0f0f0);
    
    padding: var(--cell-padding);
    border-right: var(--cell-border);
    border-bottom: var(--cell-border);
}

.pricing-table-cell:first-child {
    border-left: var(--cell-border);
}

.pricing-table-cell.is-header {
    --header-bg: var(--color-surface-alt, #f9f9f9);
    --header-padding: var(--space-m, 1.5rem) var(--space-s-m, 1rem);
    
    background: var(--header-bg);
    padding: var(--header-padding);
    border-top: var(--cell-border);
    position: relative;
}

.pricing-table-cell.is-feature {
    --feature-font-size: var(--step--1, 0.875rem);
    --feature-font-weight: var(--font-weight-medium, 500);
    
    font-size: var(--feature-font-size);
    font-weight: var(--feature-font-weight);
}

.pricing-table-cell.is-featured {
    --featured-bg: var(--color-primary-light, #f0f8ff);
    background: var(--featured-bg);
}

/* Table indicators */
.pricing-feature-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pricing-feature-indicator.is-included {
    color: var(--color-success, #22c55e);
}

.pricing-feature-indicator.is-excluded {
    color: var(--color-error, #ef4444);
}

.pricing-feature-indicator svg {
    width: var(--size-s, 1.25rem);
    height: var(--size-s, 1.25rem);
    fill: currentColor;
}

/* Responsive adjustments */
@media (min-width: 1024px) {
    .pricing-table-block[data-plan-count="4"] .pricing-table-row,
    .pricing-table-block[data-plan-count="5"] .pricing-table-row {
        grid-template-columns: minmax(150px, 0.75fr) repeat(var(--plan-count), 1fr);
    }
}

/* Alignment variations */
.alignwide {
    max-width: var(--align-wide-width, 1400px);
    margin-inline: auto;
}

.alignfull {
    max-width: none;
}

/* Utility classes */
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}