/* --- UNIVERSAL STYLING & DESKTOP LAYOUT (Flexbox) --- */

.pricing-matrix-container {
    margin-top: 0;
    background-color: transparent;
    color: var(--color-text-inverse, #ffffff);
    /* Set the main border and rounding */
    border: 1px solid var(--color-text-inverse, #ffffff);
    border-radius: 1rem;
    overflow: hidden; /* Clips contents to the rounded border */
}

/* Base style for all cells/rows */
.pricing-matrix-container > div {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Horizontal Separator */
}

/* Style for individual cells */
.pricing-matrix-container .header-cell, 
.pricing-matrix-container .location-cell, 
.pricing-matrix-container .price-cell {
    padding: 12px 10px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.5); /* Vertical Separator */
    flex-grow: 1; /* Default to equal width */
    width: 25%;
}

/* Remove last vertical separator */
.pricing-matrix-container .price-cell:last-child,
.pricing-matrix-container .header-cell:last-child {
    border-right: none; 
}

/* --- Row-Specific Styles --- */

/* Top Header Row Styling (LOCATION, SESSIONS) */
.pricing-header-row {
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--font-size-base);
}
.pricing-matrix-container .location-header {
    flex-basis: 25%; /* Give LOCATION column more space on desktop */
    flex-grow: 0;
    text-align: left;
}

/* Pricing Group Header (Face-to-face, Online) */
.pricing-group-header {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 700;
    text-align: center;
    padding: 12px 10px;
    font-size: var(--font-size-h4);
    border-right: none;
    border-left: none;
}

/* --- Corner Rounding Fixes (Desktop) --- */

/* Top corners */
.pricing-matrix-container .pricing-header-row:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
/* Bottom corners */
.pricing-matrix-container .promo-row:last-of-type {
    border-bottom: none; /* Remove last horizontal separator */
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* --- Promotion Styling --- */
.pricing-matrix-container .promo-row {
    background-color: transparent; 
}
.pricing-matrix-container .promo-cell {
    color: var(--color-tertiary-dark, #c9c88a); 
    font-weight: bold;
}


/* --- MOBILE TRANSFORMATION (Pure Vertical Card Layout) --- */

@media screen and (max-width: 600px) {
    
    .pricing-matrix-container {
        border: none; /* No outer border needed on mobile */
    }
    
    /* Hide the desktop header */
    .pricing-header-row {
        display: none !important; 
    }
    
    /* CRITICAL RESET: Ensure all cells take full width and stop trying to form a grid */
    .pricing-matrix-container .header-cell, 
    .pricing-matrix-container .location-cell, 
    .pricing-matrix-container .price-cell {
        width: auto; /* Allow stacking */
        flex-basis: auto; /* Reset flex-basis */
        flex-grow: 0; /* Stop growing/shirnking */
        border-right: none; /* Remove vertical separators */
    }

    /* Reset all rows to stack vertically and gain borders/rounding for cards */
    .pricing-matrix-container > div {
        display: block;
        border-bottom: none;
        margin-bottom: 15px;
        border: 1px solid var(--color-text-inverse, #ffffff);
        border-radius: 1rem;
        overflow: hidden;
    }

    .pricing-matrix-container .promo-row:last-of-type {
    border: 1px solid var(--color-text-inverse, #ffffff);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    }

    /* Price Group Header (e.g., Face-to-face) - becomes the main card title */
    .pricing-group-header {
        border-radius: 0; 
        border-bottom: 1px solid var(--color-text-inverse, #ffffff);
    }
    
    /* Individual price cells now stack as key/value pairs */
    .pricing-matrix-container .location-cell, 
    .pricing-matrix-container .price-cell {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        border-right: none;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
        text-align: left;
    }
    
    /* Label the price cells with their session name */
    .pricing-matrix-container .price-cell::before {
        font-weight: 700;
        padding-right: 15px;
    }
    .pricing-matrix-container .price-cell:nth-of-type(2)::before { content: "1 Session:"; }
    .pricing-matrix-container .price-cell:nth-of-type(3)::before { content: "3 Sessions:"; }
    .pricing-matrix-container .price-cell:nth-of-type(4)::before { content: "5 Sessions:"; }

    /* Last price cell in the promo row is the last item of the card */
    .pricing-matrix-container .promo-row .price-cell:last-of-type,
    .pricing-matrix-container .pricing-row .price-cell:last-of-type {
        border-bottom: none;
    }
    
    /* Standard Price and Promo Price rows get special styling */
    .pricing-row .location-cell {
        font-weight: 700;
        background-color: rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid var(--color-text-inverse, #ffffff);
    }
    
    /* Remove the bottom margin from the last price block in a group */
    .pricing-matrix-container > div:last-of-type {
        margin-bottom: 0;
    }
}