/* --- Custom Price Table V2 Styles --- */
.cptv2-price-table-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Space between gigs */
    justify-content: center;
    margin: 30px 0;
    font-family: Arial, sans-serif; /* Or your theme's font */
}

.cptv2-price-gig {
    flex: 1 1 300px; /* Grow, shrink, base width */
    max-width: 360px;
    min-width: 280px;
    border-radius: 12px; /* Overall rounding for shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Important for child border-radius */
    background-color: #fff; /* Fallback, but content bg will usually cover */
}

.cptv2-price-gig:hover {
    transform: translateY(-5px) scale(1.02); /* Lift and slightly zoom */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Highlighted Gig Style */
.cptv2-gig-highlighted {
    transform: scale(1.05); /* Make it slightly larger by default */
    /* border-color set by inline style from settings */
}
.cptv2-gig-highlighted:hover {
    transform: translateY(-5px) scale(1.07);
}


.cptv2-gig-top-image {
    width: 100%;
    height: 180px; /* Adjust as needed */
    overflow: hidden;
    background-color: #f0f0f0; /* Placeholder bg if image is transparent or missing */
}

.cptv2-gig-top-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cptv2-gig-tab-header {
    padding: 15px 20px;
    font-size: 0.9em; /* Smaller than price */
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* background-color and color are set inline via PHP */
    border-top-left-radius: 12px; /* Match overall if no top image */
    border-top-right-radius: 12px; /* Match overall if no top image */
}
/* If there's a top image, tab header corners are not rounded at the top */
.cptv2-gig-top-image + .cptv2-gig-tab-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.cptv2-gig-body {
    padding: 25px 20px;
    flex-grow: 1; /* Makes body take remaining space */
    display: flex;
    flex-direction: column;
    text-align: center;
    /* background-color and color are set inline via PHP from global settings */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.cptv2-gig-price-area {
    margin-bottom: 25px;
}

.cptv2-gig-price {
    font-size: 2.8em; /* Prominent price */
    font-weight: bold;
    display: block;
    line-height: 1.1;
    /* Color from accent or a specific price color setting if added */
}

.cptv2-gig-price-suffix {
    font-size: 0.9em;
    color: #777; /* Subdued color for suffix */
    display: block;
    margin-top: 2px;
}

.cptv2-gig-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
    flex-grow: 1; /* Pushes buttons down */
}

.cptv2-gig-bullets li {
    padding: 8px 0;
    display: flex;
    align-items: center;
    font-size: 0.95em;
    line-height: 1.4;
    border-bottom: 1px solid #eee; /* Subtle separator for list items */
}
.cptv2-gig-bullets li:last-child {
    border-bottom: none;
}

.cptv2-bullet-icon {
    margin-right: 10px;
    font-size: 1.1em;
    width: 20px; /* Ensure alignment */
    text-align: center;
}

.cptv2-bullet-included .cptv2-bullet-icon {
    color: #28a745; /* Green for check */
}
.cptv2-bullet-excluded .cptv2-bullet-icon {
    color: #dc3545; /* Red for cross */
}
.cptv2-bullet-neutral .cptv2-bullet-icon {
    color: #6c757d; /* Grey for neutral */
}

.cptv2-gig-buttons {
    margin-top: auto; /* Pushes buttons to the bottom of the card body */
    display: flex;
    flex-direction: column; /* Stack buttons */
    gap: 10px; /* Space between buttons */
}

.cptv2-gig-button {
    display: block; /* Full width buttons */
    padding: 12px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    font-size: 1em;
    /* background-color and color are set inline via PHP from global settings */
    border: none; /* Remove default browser border */
}

.cptv2-gig-button:hover {
    opacity: 0.85;
}

/* Responsive adjustments */
@media (max-width: 991px) { /* Adjust breakpoint as needed for 2 columns */
    .cptv2-price-gig {
        flex-basis: calc(50% - 15px); /* (100% / 2) - (gap / 2) */
        max-width: calc(50% - 15px);
    }
}

@media (max-width: 600px) { /* Adjust breakpoint for 1 column */
    .cptv2-price-table-container {
        gap: 20px;
    }
    .cptv2-price-gig {
        flex-basis: 100%;
        max-width: 400px; /* Or 100% if you want full width */
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Custom Price Table V2 Styles (Version for 2.0.4) --- */
.cptv2-price-table-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
    justify-content: center;
    margin: 30px 0;
    font-family: Arial, sans-serif; 
}

.cptv2-price-gig {
    flex: 1 1 300px; 
    max-width: 360px;
    min-width: 280px;
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    background-color: #fff; /* Fallback for the whole card before specific areas get their BGs */
}

.cptv2-price-gig:hover {
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.cptv2-gig-highlighted {
    transform: scale(1.05); 
}
.cptv2-gig-highlighted:hover {
    transform: translateY(-5px) scale(1.07);
}


.cptv2-gig-top-image {
    width: 100%;
    height: 180px; 
    overflow: hidden;
    background-color: #f0f0f0; 
}

.cptv2-gig-top-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cptv2-gig-tab-header {
    padding: 15px 20px;
    font-size: 0.9em; 
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* background-color and color are set inline via PHP */
    border-top-left-radius: 12px; 
    border-top-right-radius: 12px;
}
.cptv2-gig-top-image + .cptv2-gig-tab-header { /* If image exists, remove top radius from tab */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* If NO top image AND NO tab header (e.g. if tab header is empty) then price area gets top radius */
.cptv2-price-gig > .cptv2-gig-price-area:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
/* If tab header is present, price area does not have top radius */
.cptv2-gig-tab-header + .cptv2-gig-price-area {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* NEW STYLES FOR PRICE AREA BLOCK */
.cptv2-gig-price-area {
    padding: 20px 20px; /* Adjust padding as needed for the price block */
    text-align: center;
    line-height: 1.2; /* Ensure main price and suffix align well */
    /* background-color is set inline via PHP */
}

.cptv2-gig-price-main {
    font-size: 2.8em; /* Large price text */
    font-weight: bold;
    /* color is set inline via PHP */
    /* display: inline-block; /* Might not be needed if suffix is also inline-block */
}

.cptv2-gig-price-suffix {
    font-size: 1em; /* Smaller suffix text */
    font-weight: normal; /* Or lighter if preferred */
    margin-left: 2px; /* Small space between price and suffix */
    /* color is set inline via PHP */
    /* display: inline-block; */ /* or just inline if it works with main price alignment */
    vertical-align: baseline; /* Helps align with the main price if font sizes differ significantly */
}


/* Styles for the content area BELOW the price block (bullets, buttons) */
.cptv2-gig-body-content {
    padding: 25px 20px;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    text-align: center; /* Default text-align, bullets will override to left */
    /* background-color and color are set inline via PHP from global settings */
    border-bottom-left-radius: 12px; /* Overall card rounding at bottom */
    border-bottom-right-radius: 12px;
}

.cptv2-gig-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
    flex-grow: 1; 
}

.cptv2-gig-bullets li {
    padding: 8px 0;
    display: flex;
    align-items: center;
    font-size: 0.95em;
    line-height: 1.4;
    border-bottom: 1px solid #eee; 
}
.cptv2-gig-bullets li:last-child {
    border-bottom: none;
}

.cptv2-bullet-icon {
    margin-right: 10px;
    font-size: 1.1em;
    width: 20px; 
    text-align: center;
}

.cptv2-bullet-included .cptv2-bullet-icon { color: #28a745; }
.cptv2-bullet-excluded .cptv2-bullet-icon { color: #dc3545; }
.cptv2-bullet-neutral .cptv2-bullet-icon { color: #6c757d; }

.cptv2-gig-buttons {
    margin-top: auto; 
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}

.cptv2-gig-button {
    display: block; 
    padding: 12px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    font-size: 1em;
    border: none; 
}

.cptv2-gig-button:hover {
    opacity: 0.85;
}

/* Responsive adjustments */
@media (max-width: 991px) { 
    .cptv2-price-gig {
        flex-basis: calc(50% - 15px); 
        max-width: calc(50% - 15px);
    }
}

@media (max-width: 600px) { 
    .cptv2-price-table-container {
        gap: 20px;
    }
    .cptv2-price-gig {
        flex-basis: 100%;
        max-width: 400px; 
        margin-left: auto;
        margin-right: auto;
    }
}
/* ==========================================================================
   STYLES FOR LOAD MORE FUNCTIONALITY - ADD THESE TO YOUR EXISTING CSS FILE
   ========================================================================== */

/* Optional: Wrapper for the table and button, if you need to style them as a group */
/* .cptv2-table-and-button-wrapper { */
    /* Add styles if needed */
/* } */

.cptv2-load-more-container {
    text-align: center; /* Centers the button */
    margin-top: 25px;   /* Space above the button */
    margin-bottom: 20px;/* Space below the button */
    clear: both;        /* Important if your .cptv2-price-gig items use floats */
    width: 100%;
}

.cptv2-load-more-button {
    padding: 10px 20px;
    font-size: 1em; /* Adjust as needed */
    font-weight: bold;
    color: #ffffff;
    background-color: #0073aa; /* Example: WordPress blue, change to your theme's color */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.cptv2-load-more-button:hover {
    background-color: #005a87; /* Darker shade for hover */
}

.cptv2-load-more-button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ... YOUR EXISTING CSS RULES ... */


/* ==========================================================================
   NEW STYLES FOR DYNAMIC COLUMNS - ADD THESE
   ========================================================================== */

/* Base styles for the container (you should already have something like this) */
.cptv2-price-table-container {
    display: flex; /* Or display: grid; */
    flex-wrap: wrap;
    /* Adjust gap to your preference, and ensure it's accounted for in calc() below */
    gap: 20px; 
    /* Example: if your gap is 15px, use 15px in calc() */
}

/* Individual gig item - you likely have styles for this already (padding, border etc.) */
/* .cptv2-price-gig { ... } */


/* --- Column Width Definitions --- */
/* These rules will be applied when the container has a .cptv2-cols-X class */

.cptv2-price-table-container.cptv2-cols-1 .cptv2-price-gig {
    flex-basis: 100%;
    width: 100%;
}

.cptv2-price-table-container.cptv2-cols-2 .cptv2-price-gig {
    flex-basis: calc(50% - 10px); /* (100% / 2) - (gap / 2 if gap is evenly distributed) */
    width: calc(50% - 10px);      /* Adjust 10px: if gap is 20px, (20px * (2-1))/2 = 10px */
}

.cptv2-price-table-container.cptv2-cols-3 .cptv2-price-gig {
    flex-basis: calc(33.333% - 13.33px); /* (100% / 3) - (gap * (3-1))/3 */
    width: calc(33.333% - 13.33px);       /* If gap is 20px, (20px * 2)/3 = 13.33px */
}

.cptv2-price-table-container.cptv2-cols-4 .cptv2-price-gig {
    flex-basis: calc(25% - 15px); /* (100% / 4) - (gap * (4-1))/4 */
    width: calc(25% - 15px);      /* If gap is 20px, (20px * 3)/4 = 15px */
}

.cptv2-price-table-container.cptv2-cols-5 .cptv2-price-gig {
    flex-basis: calc(20% - 16px); /* (100% / 5) - (gap * (5-1))/5 */
    width: calc(20% - 16px);      /* If gap is 20px, (20px * 4)/5 = 16px */
}

.cptv2-price-table-container.cptv2-cols-6 .cptv2-price-gig {
    flex-basis: calc(16.666% - 16.67px); /* (100% / 6) - (gap * (6-1))/6 */
    width: calc(16.666% - 16.67px);      /* If gap is 20px, (20px * 5)/6 = 16.67px */
}

/* --- Responsiveness for Columns (Example) --- */
/* You might want fewer columns on smaller screens. */
/* This is a basic example, adjust breakpoints and column counts as needed. */

@media (max-width: 991px) { /* Tablets */
    .cptv2-price-table-container.cptv2-cols-4 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-5 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-6 .cptv2-price-gig {
        flex-basis: calc(33.333% - 13.33px); /* Show 3 columns */
        width: calc(33.333% - 13.33px);
    }
    .cptv2-price-table-container.cptv2-cols-3 .cptv2-price-gig {
         /* Keep 3 columns or change to 2 */
        flex-basis: calc(50% - 10px); /* Example: change to 2 cols */
        width: calc(50% - 10px);
    }
     .cptv2-price-table-container.cptv2-cols-2 .cptv2-price-gig {
        /* Keep 2 columns or change to 1 */
         flex-basis: calc(50% - 10px);
        width: calc(50% - 10px);
    }
}

@media (max-width: 767px) { /* Mobile */
    .cptv2-price-table-container.cptv2-cols-3 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-4 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-5 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-6 .cptv2-price-gig {
        flex-basis: calc(50% - 10px); /* Show 2 columns */
        width: calc(50% - 10px);
    }
     .cptv2-price-table-container.cptv2-cols-2 .cptv2-price-gig {
        flex-basis: 100%; /* Show 1 column */
        width: 100%;
    }
}

@media (max-width: 480px) { /* Smaller Mobile */
    .cptv2-price-table-container.cptv2-cols-2 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-3 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-4 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-5 .cptv2-price-gig,
    .cptv2-price-table-container.cptv2-cols-6 .cptv2-price-gig {
        flex-basis: 100%; /* Show 1 column */
        width: 100%;
    }
}


/* --- Load More Button Styles (you should already have these) --- */
.cptv2-load-more-container {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
    clear: both;
    width: 100%;
}
.cptv2-load-more-button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #ffffff;
    background-color: #0073aa;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.cptv2-load-more-button:hover { background-color: #005a87; }
.cptv2-load-more-button:disabled { background-color: #cccccc; color: #666666; cursor: not-allowed; opacity: 0.7; }

/* In your custom-price-table-styles.css file */

.cptv2-price-table-container .cptv2-price-gig .cptv2-gig-tab-header {
    /* 
     * Set a minimum height that can comfortably fit up to 3 lines of text.
     * You will need to fine-tune this value based on your font size and line-height.
     * If 1 line is ~1.4em, then 3 lines would be ~4.2em. 
     * Add padding, so something like 5.5em to 6.5em might be a good starting point.
     * 
     * EXAMPLE: Let's try a more generous height.
     */
    min-height: 5.5em; /* ADJUST THIS VALUE AS NEEDED - try increasing it */
    
    /* This ensures that even if content is shorter, the box maintains this height */
    height: auto; /* Allow it to grow if absolutely necessary, but min-height is key */

    /* Use flexbox for better alignment of content within the header */
    display: flex;
    flex-direction: column; /* Stack content vertically if needed, good for text */
    align-items: center;    /* Horizontally centers the text content */
    justify-content: center; /* Vertically centers the text content */
    
    /* Text alignment within the text block itself */
    text-align: center;

    /* 
     * Consistent padding. Adjust these to your visual preference.
     * This padding is INSIDE the min-height due to box-sizing.
     */
    padding: 0.75em 0.5em; /* (Vertical padding: 0.75em, Horizontal padding: 0.5em) - ADJUST AS NEEDED */

    /* 
     * This is important! It makes the min-height and padding work together intuitively.
     */
    box-sizing: border-box; 
}