/**
 * Frontend CSS for Pricing Tables Plugin
 *
 * This file contains custom styles that you can modify without touching plugin code.
 * For theme-specific overrides, copy these styles to your theme's style.css
 */

/* ====================================
   PRICING TABLES WRAPPER
   ==================================== */

.pricing-tables-wrapper {
    /* Add custom wrapper styles here */
}

/* ====================================
   PRICING CARDS
   ==================================== */

.pricing-tables-wrapper .pricing-card {
    /* Custom card styles */
    /* Example: Add a custom hover effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-tables-wrapper .pricing-card:hover {
    /* Example: Lift card on hover */
    /* transform: translateY(-5px); */
    /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
}

/* ====================================
   TARGET SPECIFIC CARDS BY NAME
   ==================================== */

/* Target by card slug (based on title) */
.pricing-card-community {
    /* Styles for COMMUNITY card */
    /* Example: Add a green accent */
    /* border-left: 4px solid #10B981 !important; */
}

.pricing-card-pay-as-you-go {
    /* Styles for PAY-AS-YOU-GO card */
    /* Example: Add a blue accent */
    /* border-left: 4px solid #3B82F6 !important; */
}

.pricing-card-reserved {
    /* Styles for RESERVED card */
    /* Example: Add a purple accent */
    /* border-left: 4px solid #8B5CF6 !important; */
}

.pricing-card-licensed {
    /* Styles for LICENSED card */
    /* Example: Add a gold accent */
    /* border-left: 4px solid #F59E0B !important; */
}

/* Popular card styling */
.pricing-card-popular {
    /* Styles for any card marked as popular */
    /* This class is automatically added to popular cards */
}

/* ====================================
   TARGET SPECIFIC CARDS BY ID
   ==================================== */

/* Target by unique post ID (replace XXX with actual post ID) */
/*
#pricing-card-123 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}
*/

/* Custom spacing for Community and Enterprise cards */
#pricingcard-community .my-4.text-center div,
#pricingcard-enterprise .my-4.text-center div {
    padding-top: 40px;
}

/* Custom spacing for Professional card */
#pricingcard-professional {
    padding-top: 42px !important;
}

#pricingcard-professional .my-4.text-center {
    margin-bottom: 12px;
}

/* Adjust spacing for "Starting at" text */
.pricing-tables-wrapper .pricing-card p.text-sm.text-gray-500.mt-6 {
    margin-bottom: 10px !important;
}

/* Example: Change specific card's button color */
/*
.pricing-card-community .pricing-button-primary-solid {
    background-color: #10B981 !important;
}
*/

/* Example: Hide specific feature on a card */
/*
.pricing-card-community ul li:nth-child(5) {
    display: none !important;
}
*/

/* ====================================
   PRICE DISPLAY
   ==================================== */

.pricing-tables-wrapper .pricing-card .text-3xl,
.pricing-tables-wrapper .pricing-card .text-4xl,
.pricing-tables-wrapper .pricing-card .text-5xl,
.pricing-tables-wrapper .pricing-card .text-6xl,
.pricing-tables-wrapper .pricing-card .text-7xl,
.pricing-tables-wrapper .pricing-card .text-8xl {
    /* Custom price number styles */
    /* Example: Add text shadow */
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); */
}

/* ====================================
   BUTTONS
   ==================================== */

.pricing-tables-wrapper a[class*="pricing-button-"] {
    /* Custom button styles */
    /* Example: Change button font weight */
    /* font-weight: 700; */
    /* letter-spacing: 0.05em; */
}

.pricing-tables-wrapper a[class*="pricing-button-"]:hover {
    /* Custom button hover styles */
    /* Example: Add scale effect */
    /* transform: scale(1.02); */
}

/* CRITICAL: Hide toggle buttons with .hidden class */
.pricing-tables-wrapper a.pricing-button-yearly.hidden,
.pricing-tables-wrapper a.pricing-button-monthly.hidden,
.pricing-tables-wrapper a[class*="pricing-button-"].hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* ====================================
   BADGES
   ==================================== */

.pricing-tables-wrapper .pricing-card [class*="bg-"][class*="-50"] {
    /* Custom badge styles */
    /* Example: Add border radius */
    /* border-radius: 9999px; */
}

/* ====================================
   FEATURES LIST
   ==================================== */

.pricing-tables-wrapper .pricing-card ul {
    /* Custom features list styles */
}

.pricing-tables-wrapper .pricing-card ul li {
    /* Custom feature item styles */
    /* Example: Increase spacing */
    /* padding: 8px 0; */
}

.pricing-tables-wrapper .pricing-card ul li svg {
    /* Custom checkmark icon styles */
    /* Example: Change icon size */
    /* width: 20px; */
    /* height: 20px; */
}

/* ====================================
   DIVIDER LINES
   ==================================== */

.pricing-tables-wrapper .pricing-divider,
.pricing-tables-wrapper .pricing-divider-lg {
    /* Custom divider styles */
    /* Example: Change divider color */
    /* background-color: #D1D5DB !important; */
}

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

.pricing-tables-wrapper .pricing-tooltip {
    /* Custom tooltip styles */
    /* Example: Change tooltip background */
    /* background-color: #1F2937 !important; */
}

/* ====================================
   BILLING TOGGLE
   ==================================== */

.pricing-tables-wrapper #pricing-toggle-bg {
    /* Custom toggle background styles */
}

.pricing-tables-wrapper #pricing-toggle-knob {
    /* Custom toggle knob styles */
}

/* ====================================
   POPULAR BADGE
   ==================================== */

.pricing-tables-wrapper .pricing-card[class*="scale-"] {
    /* Custom styles for popular cards */
}

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

/* Mobile devices - max 640px */
@media (max-width: 640px) {
    /* NOTE: Base responsive styles are handled by the plugin.
       Add additional mobile customizations here. */

    .pricing-tables-wrapper .pricing-card {
        /* Mobile-specific card styles */
        /* Example: Adjust shadows on mobile */
        /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; */
    }

    /* Adjust text sizes if needed */
    .pricing-tables-wrapper .pricing-card h3 {
        /* Custom title size on mobile */
    }

    /* Custom mobile button styles */
    .pricing-tables-wrapper a[class*="pricing-button-"] {
        /* Example: Make buttons slightly larger on mobile for easier tapping */
        /* min-height: 48px !important; */
    }
}

/* Tablets - 641px to 1024px */
@media (min-width: 641px) and (max-width: 1024px) {
    /* NOTE: Base tablet styles are handled by the plugin.
       Add additional tablet customizations here. */

    .pricing-tables-wrapper .pricing-card {
        /* Tablet-specific card styles */
    }

    /* Example: Adjust grid spacing on tablets */
    .pricing-tables-wrapper .grid {
        /* gap: 2rem !important; */
    }
}

/* Desktop - 1025px and up */
@media (min-width: 1025px) {
    .pricing-tables-wrapper .pricing-card {
        /* Desktop-specific card styles */
    }

    /* Example: Add hover effects only on desktop */
    .pricing-tables-wrapper .pricing-card:hover {
        /* transform: translateY(-5px); */
        /* transition: transform 0.3s ease; */
    }
}

/* ====================================
   CUSTOM UTILITIES
   ==================================== */

/* Add your own custom classes here */

/* Example: Custom spacing class */
.pricing-custom-spacing {
    /* margin: 2rem 0; */
}

/* Example: Custom background for specific cards */
.pricing-card-highlighted {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
}

/* ====================================
   THEME OVERRIDES
   ==================================== */

/* Override Elementor styles */
.elementor-widget-container .pricing-tables-wrapper {
    /* Elementor-specific overrides */
}

/* Force grid layout to work properly */
.pricing-tables-wrapper .grid {
    display: grid !important;
}

.pricing-tables-wrapper .grid.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
    .pricing-tables-wrapper .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .pricing-tables-wrapper .grid.lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .pricing-tables-wrapper .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .pricing-tables-wrapper .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Override other page builders */
.vc_column-inner .pricing-tables-wrapper {
    /* Visual Composer overrides */
}

.fl-module-content .pricing-tables-wrapper {
    /* Beaver Builder overrides */
}