/**
 * TZ Price Display - Mountain/Trekking Themed Styles
 * 
 * @package TZ_Price_Display
 * @author Santosh Baral - TechZen Corporation
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables - Mountain Theme Colors (Modified for Light Blue Design)
   ========================================================================== */
:root {
    --mteg-gp-primary: #333333;
    /* Dark Text */
    --mteg-gp-secondary: #BDE6F6;
    /* Light Blue Header */
    --mteg-gp-secondary-light: #BDE6F6;
    /* Same for solid color */
    --mteg-gp-accent: #007bff;
    /* Button Blue (minus icon) */
    --mteg-gp-snow: #ffffff;
    /* White bg */
    --mteg-gp-border: #e0e0e0;
    /* Subtle border */
    --mteg-gp-text: #333333;
    --mteg-gp-text-light: #666666;
    --mteg-gp-shadow: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Wrapper Styles
   ========================================================================== */
.mteg-gp-pricing-wrapper {
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    max-width: 400px;
    /* Constrain width like screenshot */
}

/* ==========================================================================
   Rate Card - Shared Styles
   ========================================================================== */
.mteg-gp-rate-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--mteg-gp-shadow);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #BDE6F6;
    /* Match header color for border or subtle */
}

/* Rate Header */
.mteg-gp-rate-header {
    background: var(--mteg-gp-secondary);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mteg-gp-rate-title {
    margin: 0;
    color: #444;
    /* Dark gray title */
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Toggle Icon */
.mteg-gp-toggle-icon {
    background: #ffffff;
    color: #0056b3;
    /* Darker blue */
    width: 24px;
    /* Small square like screenshot */
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    /* Minus sign size */
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mteg-gp-toggle-icon:hover {
    background-color: #f0f0f0;
    color: #003d80;
}

.mteg-gp-toggle-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Table Display Mode
   ========================================================================== */
.mteg-gp-table-wrapper {
    padding: 10px 20px;
    /* Padding inside card */
}

.mteg-gp-display-table .mteg-gp-price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.mteg-gp-price-table tbody tr {
    border-bottom: 1px solid #eee;
    /* Divider lines */
}

.mteg-gp-price-table tbody tr:last-child {
    border-bottom: none;
}

.mteg-gp-price-table td {
    padding: 12px 0;
    /* Vertical spacing */
    font-size: 16px;
    /* Larger readable text */
    color: #333;
}

.mteg-gp-price-table td.mteg-gp-group-label {
    text-align: left;
    color: #333;
}

.mteg-gp-price-table td.mteg-gp-price-value {
    text-align: right;
    font-weight: 600;
    color: #333;
}

/* Price Value */
.mteg-gp-price {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* ==========================================================================
   List Display Mode
   ========================================================================== */
.mteg-gp-display-list .mteg-gp-price-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mteg-gp-display-list .mteg-gp-price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--mteg-gp-border);
    transition: background-color 0.2s ease;
}

.mteg-gp-display-list .mteg-gp-price-item:last-child {
    border-bottom: none;
}

.mteg-gp-display-list .mteg-gp-price-item:hover {
    background-color: rgba(45, 90, 61, 0.05);
}

/* ==========================================================================
   Inline Display Mode
   ========================================================================== */
.mteg-gp-display-inline .mteg-gp-inline-rate {
    padding: 0.8rem 1.2rem;
    background: var(--mteg-gp-snow);
    border-radius: 8px;
    border-left: 4px solid var(--mteg-gp-primary);
    margin-bottom: 0.8rem;
    line-height: 1.8;
}

.mteg-gp-display-inline .mteg-gp-inline-rate:last-child {
    margin-bottom: 0;
}

.mteg-gp-inline-title {
    color: var(--mteg-gp-primary);
    font-weight: 600;
}

.mteg-gp-inline-dates {
    color: var(--mteg-gp-text-light);
    font-size: 0.9rem;
}

.mteg-gp-inline-item {
    display: inline-block;
    margin: 0 0.2rem;
}

.mteg-gp-inline-label {
    color: var(--mteg-gp-text-light);
    font-size: 0.9rem;
}

.mteg-gp-inline-price {
    color: var(--mteg-gp-primary);
    font-weight: 700;
}

.mteg-gp-separator {
    color: var(--mteg-gp-border);
    margin: 0 0.3rem;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 768px) {
    .mteg-gp-rate-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .mteg-gp-rate-dates {
        margin-top: 0.5rem;
    }

    .mteg-gp-price-table th,
    .mteg-gp-price-table td {
        padding: 0.8rem 1rem;
    }

    .mteg-gp-price-table th.mteg-gp-col-group {
        width: 50%;
    }

    .mteg-gp-price {
        font-size: 1.1rem;
    }

    .mteg-gp-age-badge {
        font-size: 0.8rem;
        padding: 0.3rem 0.8rem;
    }

    .mteg-gp-display-list .mteg-gp-price-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
    }

    .mteg-gp-display-list .mteg-gp-price-item .mteg-gp-price {
        align-self: flex-end;
    }

    .mteg-gp-display-inline .mteg-gp-inline-rate {
        line-height: 2;
    }

    .mteg-gp-inline-item {
        display: block;
        margin: 0.3rem 0;
    }

    .mteg-gp-separator {
        display: none;
    }
}

@media (max-width: 480px) {
    .mteg-gp-rate-card {
        border-radius: 8px;
    }

    .mteg-gp-rate-title {
        font-size: 1rem;
    }

    .mteg-gp-price-table {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .mteg-gp-rate-card {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .mteg-gp-rate-header {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .mteg-gp-rate-title,
    .mteg-gp-rate-dates {
        color: #333 !important;
    }

    .mteg-gp-price {
        color: #2d5a3d !important;
        -webkit-text-fill-color: #2d5a3d !important;
    }
}