/* =============================================
   ADVANCED PRICING TABLE - 16 PREMIUM SKINS
   ============================================= */

/* =============================================
   CSS VARIABLES - Inherits from bith-widgets-master.css
   ============================================= */
.bith-pricing-table-wrapper {
    /* Map global Master variables to local with fallbacks */
    --bith-pt-primary: var(--bith-widget-primary, #6366f1);
    --bith-pt-primary-hover: var(--bith-widget-primary-hover, #4f46e5);
    --bith-pt-primary-dark: var(--bith-widget-primary-dark, #4338ca);
    --bith-pt-primary-light: var(--bith-widget-primary-light, rgba(99, 102, 241, 0.12));
    --bith-pt-secondary: var(--bith-widget-secondary, #a855f7);
    --bith-pt-accent: var(--bith-widget-accent, #f6ad55);
    --bith-pt-surface: var(--bith-widget-surface, #ffffff);
    --bith-pt-surface-hover: var(--bith-widget-surface-hover, #fafafa);
    --bith-pt-bg-subtle: var(--bith-widget-bg-subtle, #f8fafc);
    --bith-pt-text-heading: var(--bith-widget-text-heading, #0f172a);
    --bith-pt-text-body: var(--bith-widget-text-body, #64748b);
    --bith-pt-text-muted: var(--bith-widget-text-muted, #94a3b8);
    --bith-pt-border: var(--bith-widget-border, #e2e8f0);
    --bith-pt-border-light: var(--bith-widget-border-light, #f1f5f9);

    /* Status Colors */
    --bith-pt-success: var(--bith-widget-success, #10b981);
    --bith-pt-success-light: var(--bith-widget-success-light, #d1fae5);
    --bith-pt-error: var(--bith-widget-error, #ef4444);
    --bith-pt-error-light: var(--bith-widget-error-light, #fee2e2);

    /* Radius - from Master */
    --bith-pt-radius-sm: var(--bith-widget-radius-sm, 6px);
    --bith-pt-radius-md: var(--bith-widget-radius-md, 10px);
    --bith-pt-radius-lg: var(--bith-widget-radius-lg, 15px);
    --bith-pt-radius-xl: var(--bith-widget-radius-xl, 20px);
    --bith-pt-radius-2xl: var(--bith-widget-radius-2xl, 24px);

    /* Shadows - from Master */
    --bith-pt-shadow-sm: var(--bith-widget-shadow-sm, 0 2px 5.5px 0 rgba(0, 0, 0, 0.06));
    --bith-pt-shadow-md: var(--bith-widget-shadow-md, 0 4px 7px -1px rgba(0, 0, 0, 0.08));
    --bith-pt-shadow-lg: var(--bith-widget-shadow-lg, 0 8px 16px -3px rgba(0, 0, 0, 0.08));
    --bith-pt-shadow-xl: var(--bith-widget-shadow-xl, 0 12px 24px -6px rgba(0, 0, 0, 0.1));
    --bith-pt-shadow-float: var(--bith-widget-shadow-float, 0 20px 40px -10px rgba(0, 0, 0, 0.12));
    --bith-pt-shadow-primary: var(--bith-widget-shadow-primary, 0 4px 14px 0 rgba(79, 209, 197, 0.39));

    /* Transitions - from Master */
    --bith-pt-ease-smooth: var(--bith-widget-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    --bith-pt-ease-bounce: var(--bith-widget-ease-bounce, cubic-bezier(0.175, 0.885, 0.32, 1.275));
    --bith-pt-ease-out: var(--bith-widget-ease-out, cubic-bezier(0, 0, 0.2, 1));
    --bith-pt-duration: var(--bith-widget-duration-normal, 250ms);
    --bith-pt-duration-slow: var(--bith-widget-duration-slow, 400ms);

    /* Typography - from Master */
    --bith-pt-font: var(--bith-widget-font-primary, 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);

    /* Gradients - from Master */
    --bith-pt-gradient-primary: var(--bith-widget-gradient-primary, linear-gradient(135deg, var(--bith-pt-primary) 0%, var(--bith-pt-primary-hover) 100%));
    --bith-pt-gradient-duo: var(--bith-widget-gradient-duo, linear-gradient(135deg, var(--bith-pt-primary) 0%, var(--bith-pt-secondary) 100%));

    width: 100%;
    position: relative;
    font-family: var(--bith-pt-font);
    box-sizing: border-box;
}

.bith-pricing-table-wrapper *,
.bith-pricing-table-wrapper *::before,
.bith-pricing-table-wrapper *::after {
    box-sizing: border-box;
}

/* =============================================
   BASE STRUCTURE & SHARED STYLES
   ============================================= */

.bith-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
    width: 100%;
}

.bith-pricing-card {
    display: flex;
    flex-direction: column;
    background: var(--bith-pt-surface);
    border-radius: var(--bith-pt-radius-lg);
    overflow: hidden;
    position: relative;
    width: 100%;
    transition: all var(--bith-pt-duration-slow) var(--bith-pt-ease-smooth);
}

.bith-card-header {
    padding: 32px 24px;
    text-align: center;
}

.bith-plan-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bith-pt-text-body);
    margin-bottom: 16px;
}

.bith-price-block {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.bith-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bith-pt-text-heading);
}

.bith-price {
    font-size: 4rem;
    font-weight: 800;
    color: var(--bith-pt-text-heading);
    line-height: 1;
    transition: all var(--bith-pt-duration) var(--bith-pt-ease-bounce);
}

.bith-period {
    font-size: 1rem;
    font-weight: 500;
    color: var(--bith-pt-text-body);
}

.bith-plan-tagline {
    font-size: 0.875rem;
    color: var(--bith-pt-text-muted);
    margin: 0;
}

.bith-card-body {
    flex: 1;
    padding: 0 24px;
}

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

.bith-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 0.9375rem;
    color: var(--bith-pt-text-body);
    border-bottom: 1px solid var(--bith-pt-border-light);
}

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

.bith-icon-check,
.bith-icon-cross {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--bith-pt-radius-full);
    flex-shrink: 0;
}

.bith-feature-item.included .bith-icon-check {
    background: var(--bith-pt-success-light);
    color: var(--bith-pt-success);
}

.bith-feature-item.excluded .bith-icon-cross {
    background: var(--bith-pt-error-light);
    color: var(--bith-pt-error);
}

.bith-feature-item.excluded {
    color: var(--bith-pt-text-muted);
}

.bith-card-footer {
    padding: 24px;
}

.bith-cta-btn {
    width: 100%;
    padding: 16px 24px;
    font-family: var(--bith-pt-font);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--bith-pt-radius-md);
    cursor: pointer;
    transition: all var(--bith-pt-duration) var(--bith-pt-ease-smooth);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

/* =============================================
   BADGE STYLES (Generic for all skins)
   ============================================= */
.bith-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bith-pt-gradient-duo);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: var(--bith-pt-radius-sm);
    box-shadow: var(--bith-pt-shadow-primary);
    z-index: 10;
}

/* =============================================
   SKIN 1: THE STANDARD CLEAN
   ============================================= */
.skin-1 .bith-pricing-card {
    border: 1px solid var(--bith-pt-border-light);
    box-shadow: var(--bith-pt-shadow-sm);
    transition: all var(--bith-pt-duration-slow) var(--bith-pt-ease-smooth);
}

.skin-1 .bith-pricing-card:hover {
    box-shadow: var(--bith-pt-shadow-lg);
    transform: translateY(-4px);
}

.skin-1 .bith-card-header {
    background: var(--bith-pt-bg-subtle);
}

.skin-1 .bith-cta-btn {
    background: var(--bith-pt-border-light);
    color: var(--bith-pt-text-heading);
}

.skin-1 .bith-cta-btn:hover {
    background: var(--bith-pt-primary);
    color: white;
}

/* =============================================
   SKIN 2: THE FEATURED SCALE
   ============================================= */
.skin-2 .bith-pricing-card {
    border: 1px solid var(--bith-pt-border-light);
    box-shadow: var(--bith-pt-shadow-md);
    transition: all var(--bith-pt-duration-slow) var(--bith-pt-ease-bounce);
}

.skin-2 .bith-pricing-card:hover {
    transform: translateY(-8px);
}

.skin-2 .bith-pricing-card.featured {
    transform: scale(1.1);
    border-color: var(--bith-pt-primary);
    box-shadow: var(--bith-pt-shadow-float), 0 0 0 4px var(--bith-pt-primary-light);
    z-index: 10;
}

.skin-2 .bith-pricing-card.featured:hover {
    transform: scale(1.12) translateY(-4px);
}

.skin-2 .bith-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bith-pt-gradient-duo);
    color: white;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 20px;
    border-radius: 0 0 var(--bith-pt-radius-lg) var(--bith-pt-radius-lg);
}

.skin-2 .bith-cta-btn {
    background: var(--bith-pt-border-light);
    color: var(--bith-pt-text-heading);
}

.skin-2 .bith-pricing-card.featured .bith-cta-btn {
    background: var(--bith-pt-gradient-duo);
    color: white;
}

.skin-2 .bith-cta-btn:hover {
    background: var(--bith-pt-primary);
    color: white;
    transform: scale(1.02);
}

/* =============================================
   SKIN 3: THE TOGGLE SWITCH UI
   ============================================= */
.skin-3 .bith-pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}

.skin-3 .bith-toggle-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bith-text-color, #64748b);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-3 .bith-toggle-label.active {
    color: var(--bith-heading-color, #0f172a);
    font-weight: 600;
}

.skin-3 .bith-discount-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    background: #d1fae5;
    color: #10b981;
    border-radius: 8px;
}

.skin-3 .bith-toggle-switch {
    position: relative;
    width: 56px;
    height: 28px;
}

.skin-3 .bith-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.skin-3 .bith-toggle-slider {
    position: absolute;
    inset: 0;
    background: #f1f5f9;
    border: 2px solid #94a3b8;
    border-radius: 28px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-3 .bith-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #94a3b8;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.skin-3 .bith-toggle-switch input:checked+.bith-toggle-slider {
    background: var(--bith-primary, #6366f1);
    border-color: var(--bith-primary, #6366f1);
}

.skin-3 .bith-toggle-switch input:checked+.bith-toggle-slider::before {
    transform: translateX(28px);
    background: white;
}

.skin-3 .bith-pricing-card {
    border: 1px solid #f1f5f9;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-3 .bith-pricing-card:hover {
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.18);
    transform: translateY(-6px);
}

.skin-3 .bith-cta-btn {
    background: var(--bith-primary, #6366f1);
    color: white;
}

.skin-3 .bith-cta-btn:hover {
    background: var(--bith-primary-dark, #4f46e5);
    transform: scale(1.02);
}

/* =============================================
   SKIN 4: GLASSMORPHISM PRICING
   ============================================= */
.skin-4.bith-special-bg {
    padding: 60px;
    border-radius: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    overflow: hidden;
    position: relative;
}

.skin-4.bith-special-bg::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -100px;
    left: -100px;
    animation: bith-float 8s ease-in-out infinite;
}

.skin-4.bith-special-bg::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    bottom: -80px;
    right: -80px;
    animation: bith-float 10s ease-in-out infinite reverse;
}

@keyframes bith-float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, 30px);
    }
}

.skin-4 .bith-pricing-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-4 .bith-pricing-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.skin-4 .bith-plan-name,
.skin-4 .bith-plan-tagline,
.skin-4 .bith-period {
    color: rgba(255, 255, 255, 0.8);
}

.skin-4 .bith-currency,
.skin-4 .bith-price {
    color: white;
}

.skin-4 .bith-feature-item {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.skin-4 .bith-feature-item.excluded {
    color: rgba(255, 255, 255, 0.5);
}

.skin-4 .bith-icon-check {
    background: rgba(16, 185, 129, 0.3);
    color: #4ade80;
}

.skin-4 .bith-icon-cross {
    background: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.skin-4 .bith-cta-btn {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.skin-4 .bith-cta-btn:hover {
    background: white;
    color: #4f46e5;
}

/* =============================================
   SKIN 5: THE GRADIENT HEADER
   ============================================= */
.skin-5 .bith-pricing-card {
    border: none;
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.18);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible;
}

.skin-5 .bith-pricing-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.skin-5 .bith-card-header {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    position: relative;
    padding-bottom: 48px;
}

.skin-5 .bith-card-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 40px;
    background: var(--bith-surface, #ffffff);
    border-radius: 40px 40px 0 0;
}

.skin-5 .bith-plan-name,
.skin-5 .bith-plan-tagline,
.skin-5 .bith-period {
    color: rgba(255, 255, 255, 0.85);
}

.skin-5 .bith-currency,
.skin-5 .bith-price {
    color: white;
}

.skin-5 .bith-pricing-card.featured .bith-card-header {
    background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
}

.skin-5 .bith-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #d4af37;
    color: #0f0f1a;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    z-index: 10;
}

.skin-5 .bith-cta-btn {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    color: white;
}

.skin-5 .bith-pricing-card.featured .bith-cta-btn {
    background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
}

.skin-5 .bith-cta-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* =============================================
   SKIN 6: NEUMORPHISM
   ============================================= */
.skin-6.bith-special-bg {
    background: #e0e5ec;
}

.skin-6 .bith-pricing-card {
    background: #e0e5ec;
    border: none;
    border-radius: 32px;
    box-shadow: 8px 8px 20px #a3b1c6, -8px -8px 20px #ffffff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-6 .bith-pricing-card:hover {
    box-shadow: 12px 12px 30px #a3b1c6, -12px -12px 30px #ffffff;
    transform: translateY(-4px);
}

.skin-6 .bith-card-header {
    background: transparent;
}

.skin-6 .bith-feature-item {
    border-color: transparent;
}

.skin-6 .bith-icon-check {
    box-shadow: inset 2px 2px 4px #c8cfd8, inset -2px -2px 4px #ffffff;
}

.skin-6 .bith-icon-cross {
    box-shadow: inset 2px 2px 4px #c8cfd8, inset -2px -2px 4px #ffffff;
}

.skin-6 .bith-cta-btn {
    background: #e0e5ec;
    color: var(--bith-primary, #6366f1);
    font-weight: 700;
    box-shadow: 4px 4px 10px #a3b1c6, -4px -4px 10px #ffffff;
}

.skin-6 .bith-cta-btn:hover {
    box-shadow: inset 4px 4px 10px #a3b1c6, inset -4px -4px 10px #ffffff;
}

/* =============================================
   SKIN 7: HOVER REVEAL
   ============================================= */
.skin-7 .bith-pricing-card {
    border: 1px solid #f1f5f9;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.skin-7 .bith-pricing-card:hover {
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.24);
}

.skin-7 .bith-card-body {
    max-height: 0;
    padding: 0 24px;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-7 .bith-pricing-card:hover .bith-card-body {
    max-height: 400px;
    padding: 16px 24px;
    opacity: 1;
}

.skin-7 .bith-card-header::after {
    content: 'Hover to see features';
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 12px;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-7 .bith-pricing-card:hover .bith-card-header::after {
    opacity: 0;
}

.skin-7 .bith-cta-btn {
    background: var(--bith-primary, #6366f1);
    color: white;
}

.skin-7 .bith-cta-btn:hover {
    background: var(--bith-primary-dark, #4f46e5);
}

/* Editor Mode: Auto-expand Skin 7 for better UX */
.elementor-editor-active .skin-7 .bith-card-body {
    max-height: none !important;
    padding: 16px 24px !important;
    opacity: 1 !important;
}

.elementor-editor-active .skin-7 .bith-card-header::after {
    display: none !important;
}

/* =============================================
   SKIN 8: DARK CONTRAST (Premium/Luxury)
   ============================================= */
.skin-8.bith-special-bg {
    background: #0f0f1a;
    padding: 80px 40px;
}

.skin-8 .bith-pricing-card {
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-8 .bith-pricing-card:hover {
    transform: translateY(-8px);
    border-color: #d4af37;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.skin-8 .bith-pricing-card.featured {
    border-color: #d4af37;
    box-shadow: 0 8px 40px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.skin-8 .bith-pricing-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d4af37 0%, #f5d77e 50%, #d4af37 100%);
}

.skin-8 .bith-plan-name {
    color: #d4af37;
    letter-spacing: 0.2em;
}

.skin-8 .bith-currency,
.skin-8 .bith-price {
    color: white;
}

.skin-8 .bith-period,
.skin-8 .bith-plan-tagline {
    color: #94a3b8;
}

.skin-8 .bith-feature-item {
    color: #cbd5e1;
    border-color: #2d2d44;
}

.skin-8 .bith-feature-item.excluded {
    color: #475569;
}

.skin-8 .bith-icon-check {
    background: rgba(16, 185, 129, 0.2);
    color: #4ade80;
}

.skin-8 .bith-icon-cross {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.skin-8 .bith-cta-btn {
    background: transparent;
    color: #d4af37;
    border: 2px solid #d4af37;
}

.skin-8 .bith-cta-btn:hover {
    background: #d4af37;
    color: #0f0f1a;
}

.skin-8 .bith-pricing-card.featured .bith-cta-btn {
    background: #d4af37;
    color: #0f0f1a;
}

.skin-8 .bith-pricing-card.featured .bith-cta-btn:hover {
    background: #f5d77e;
}

/* =============================================
   SKIN 9: AURORA GLOW
   ============================================= */
.skin-9 .bith-pricing-card {
    position: relative;
    padding: 3px;
    background: transparent;
    border-radius: 16px;
    overflow: visible;
}

.skin-9 .bith-pricing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 3px;
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: bith-aurora-shift 4s ease-in-out infinite;
    opacity: 0.5;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-9 .bith-pricing-card:hover::before {
    opacity: 1;
    animation-duration: 2s;
}

.skin-9 .bith-pricing-card.featured::before {
    opacity: 1;
    filter: brightness(1.2);
}

@keyframes bith-aurora-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.skin-9 .bith-card-inner {
    display: flex;
    flex-direction: column;
    background: var(--bith-surface, #ffffff);
    border-radius: 13px;
    overflow: hidden;
}

.skin-9 .bith-cta-btn {
    background: linear-gradient(135deg, var(--bith-primary, #6366f1) 0%, var(--bith-secondary, #a855f7) 100%);
    color: white;
}

.skin-9 .bith-cta-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

/* =============================================
   SKIN 10: 3D PERSPECTIVE TILT
   ============================================= */
.skin-10 .bith-pricing-card {
    border: none;
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.18);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.skin-10 .bith-pricing-card:hover {
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.24), 0 30px 60px -20px rgba(99, 102, 241, 0.25);
}

.skin-10 .bith-card-header {
    background: linear-gradient(135deg, #f8fafc 0%, var(--bith-surface, #ffffff) 100%);
}

.skin-10 .bith-cta-btn {
    background: var(--bith-primary, #6366f1);
    color: white;
}

.skin-10 .bith-cta-btn:hover {
    background: var(--bith-primary-dark, #4f46e5);
    transform: translateZ(20px);
}

/* =============================================
   SKIN 11: MINIMAL LINE ART
   ============================================= */
.skin-11 .bith-pricing-card {
    border: 1px solid #e2e8f0;
    background: transparent;
    box-shadow: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-11 .bith-pricing-card:hover {
    border-color: var(--bith-heading-color, #0f172a);
}

.skin-11 .bith-pricing-card.featured {
    border-width: 2px;
    border-color: var(--bith-heading-color, #0f172a);
}

.skin-11 .bith-card-header {
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
}

.skin-11 .bith-pricing-card.featured .bith-card-header {
    border-color: var(--bith-heading-color, #0f172a);
}

.skin-11 .bith-plan-name {
    color: var(--bith-heading-color, #0f172a);
    font-weight: 700;
}

.skin-11 .bith-feature-item {
    border-color: #f1f5f9;
}

.skin-11 .bith-icon-check {
    background: transparent;
    border: 1px solid #10b981;
}

.skin-11 .bith-icon-cross {
    background: transparent;
    border: 1px solid #94a3b8;
}

.skin-11 .bith-cta-btn {
    background: transparent;
    color: var(--bith-heading-color, #0f172a);
    border: 1px solid var(--bith-heading-color, #0f172a);
}

.skin-11 .bith-cta-btn:hover {
    background: var(--bith-heading-color, #0f172a);
    color: white;
}

.skin-11 .bith-pricing-card.featured .bith-cta-btn {
    background: var(--bith-heading-color, #0f172a);
    color: white;
}

/* =============================================
   SKIN 12: NEON CYBERPUNK
   ============================================= */
.skin-12.bith-special-bg {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%);
    padding: 80px 40px;
}

.skin-12 .bith-pricing-card {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(0, 245, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-12 .bith-pricing-card:hover {
    border-color: #00f5ff;
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.3), 0 0 60px rgba(0, 245, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-8px);
}

.skin-12 .bith-pricing-card.featured {
    border-color: #ff00ff;
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.3), 0 0 60px rgba(255, 0, 255, 0.1);
}

.skin-12 .bith-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #ff00ff, #00f5ff);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.skin-12 .bith-plan-name {
    color: #00f5ff;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
    letter-spacing: 0.2em;
}

.skin-12 .bith-pricing-card.featured .bith-plan-name {
    color: #ff00ff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.skin-12 .bith-currency,
.skin-12 .bith-price {
    color: white;
}

.skin-12 .bith-period,
.skin-12 .bith-plan-tagline {
    color: #64748b;
}

.skin-12 .bith-feature-item {
    color: #94a3b8;
    border-color: rgba(0, 245, 255, 0.1);
}

.skin-12 .bith-icon-check {
    background: rgba(0, 245, 255, 0.2);
    color: #00f5ff;
    text-shadow: 0 0 5px #00f5ff;
}

.skin-12 .bith-icon-cross {
    background: rgba(255, 0, 255, 0.2);
    color: #ef4444;
}

.skin-12 .bith-cta-btn {
    background: transparent;
    color: #00f5ff;
    border: 2px solid #00f5ff;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.skin-12 .bith-cta-btn:hover {
    background: #00f5ff;
    color: #0a0a1a;
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.5);
    text-shadow: none;
}

.skin-12 .bith-pricing-card.featured .bith-cta-btn {
    border-color: #ff00ff;
    color: #ff00ff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.skin-12 .bith-pricing-card.featured .bith-cta-btn:hover {
    background: #ff00ff;
    color: white;
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
}

/* =============================================
   SKIN 13: ORGANIC BLOB BACKGROUND
   ============================================= */
.skin-13 .bith-pricing-card {
    border: none;
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-13 .bith-pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.24);
}

.skin-13 .bith-blob-bg {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: bith-blob-morph 8s ease-in-out infinite;
    z-index: 0;
}

.skin-13 .bith-pricing-card:nth-child(2) .bith-blob-bg {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.15));
    animation-delay: -2s;
}

.skin-13 .bith-pricing-card:nth-child(3) .bith-blob-bg {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15));
    animation-delay: -4s;
}

@keyframes bith-blob-morph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(0deg);
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: rotate(180deg);
    }
}

.skin-13 .bith-card-header,
.skin-13 .bith-card-body,
.skin-13 .bith-card-footer {
    position: relative;
    z-index: 1;
}

.skin-13 .bith-cta-btn {
    background: linear-gradient(135deg, var(--bith-primary, #6366f1) 0%, var(--bith-secondary, #a855f7) 100%);
    color: white;
}

.skin-13 .bith-cta-btn:hover {
    transform: scale(1.02);
}

/* =============================================
   SKIN 14: STACKED LAYERS
   ============================================= */
.skin-14 .bith-pricing-card {
    position: relative;
    background: transparent;
    padding-top: 16px;
    padding-left: 16px;
}

.skin-14 .bith-layer {
    position: absolute;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.skin-14 .bith-layer-1 {
    inset: 8px -8px -8px 8px;
    background: #f1f5f9;
    z-index: 1;
}

.skin-14 .bith-layer-2 {
    inset: 16px -16px -16px 16px;
    background: #e2e8f0;
    z-index: 0;
}

.skin-14 .bith-pricing-card:hover .bith-layer-1 {
    transform: translate(-4px, -4px);
}

.skin-14 .bith-pricing-card:hover .bith-layer-2 {
    transform: translate(-8px, -8px);
}

.skin-14 .bith-card-content {
    position: relative;
    z-index: 2;
    background: var(--bith-surface, #ffffff);
    border-radius: 16px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.skin-14 .bith-cta-btn {
    background: var(--bith-primary, #6366f1);
    color: white;
}

.skin-14 .bith-cta-btn:hover {
    background: var(--bith-primary-dark, #4f46e5);
}

/* =============================================
   SKIN 15: RIBBON CORNER BADGE
   ============================================= */
.skin-15 .bith-pricing-card {
    border: 1px solid #f1f5f9;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-15 .bith-pricing-card:hover {
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.18);
    transform: translateY(-6px);
}

.skin-15 .bith-pricing-card.featured {
    border-color: var(--bith-primary, #6366f1);
}

.skin-15 .bith-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    z-index: 10;
}

.skin-15 .bith-ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 10px 0;
    background: linear-gradient(135deg, var(--bith-primary, #6366f1) 0%, var(--bith-secondary, #a855f7) 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transform: rotate(45deg);
    top: 30px;
    right: -55px;
}

.skin-15 .bith-cta-btn {
    background: #f1f5f9;
    color: var(--bith-heading-color, #0f172a);
}

.skin-15 .bith-pricing-card.featured .bith-cta-btn {
    background: linear-gradient(135deg, var(--bith-primary, #6366f1) 0%, var(--bith-secondary, #a855f7) 100%);
    color: white;
}

.skin-15 .bith-cta-btn:hover {
    background: var(--bith-primary, #6366f1);
    color: white;
}

/* =============================================
   SKIN 16: FROSTED MINIMALISM
   ============================================= */
.skin-16.bith-special-bg {
    background: linear-gradient(135deg, #e0e7ff 0%, #fce7f3 50%, #dbeafe 100%);
    padding: 80px 40px;
}

.skin-16 .bith-pricing-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-16 .bith-pricing-card:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}

.skin-16 .bith-pricing-card.featured {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--bith-primary, #6366f1);
}

.skin-16 .bith-feature-item {
    border-color: rgba(0, 0, 0, 0.05);
}

.skin-16 .bith-cta-btn {
    background: rgba(99, 102, 241, 0.1);
    color: var(--bith-primary, #6366f1);
    border: 1px solid var(--bith-primary, #6366f1);
}

.skin-16 .bith-cta-btn:hover {
    background: var(--bith-primary, #6366f1);
    color: white;
}

.skin-16 .bith-pricing-card.featured .bith-cta-btn {
    background: linear-gradient(135deg, var(--bith-primary, #6366f1) 0%, var(--bith-secondary, #a855f7) 100%);
    color: white;
    border: none;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */
@media (max-width: 1024px) {
    .bith-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skin-4.bith-special-bg,
    .skin-6.bith-special-bg,
    .skin-8.bith-special-bg,
    .skin-12.bith-special-bg,
    .skin-16.bith-special-bg {
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {
    .bith-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .skin-2 .bith-pricing-card.featured {
        transform: scale(1);
    }

    .skin-2 .bith-pricing-card.featured:hover {
        transform: scale(1.02) translateY(-4px);
    }
}