/**
 * AI Subscription - WooCommerce My Account Usage Tab
 *
 * Themed with Elementor global colors so it blends with the dark account page.
 *
 * @package AI_Subscription
 */

/* Outer wrapper — replicates the inner padding that JetWooBuilder applies to standard
   endpoints (edit-account, orders…) via its nested Elementor template. Our custom
   endpoint is rendered directly inside the widget without that wrapper, so we add
   matching padding here to keep the look consistent across all account tabs. */
.ai-sub-usage-wrapper {
    padding: 10px;
}

/* Empty state */
.ai-sub-usage-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--e-global-color-b54462a, #F1DAB0);
}

.ai-sub-usage-empty p {
    margin-bottom: 16px;
}

/* Section title (Mes forfaits / Forfaits précédents / Mes informations) */
.ai-sub-usage-section-title,
.ai-sub-usage-past-title {
    margin: 0 0 16px;
    font-family: var(--e-global-typography-primary-font-family, "Lato"), sans-serif;
    font-size: 1.25em;
    font-weight: 600;
    color: var(--e-global-color-edaa0cc, #FFFFFF);
}

.ai-sub-usage-past-title {
    margin-bottom: 4px;
}

/* Package cards (active) */
.ai-sub-usage-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ai-sub-usage-card {
    border: 1px solid var(--e-global-color-b54462a, #F1DAB0);
    border-radius: 25px;
    padding: 20px 24px;
    background: var(--e-global-color-a986c82, #33415580);
    color: var(--e-global-color-b54462a, #F1DAB0);
    font-family: var(--e-global-typography-text-font-family, "Lato"), sans-serif;
}

.ai-sub-usage-card h3 {
    margin: 0 0 16px;
    font-family: var(--e-global-typography-primary-font-family, "Lato"), sans-serif;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--e-global-color-edaa0cc, #FFFFFF);
}

/* Usage rows */
.ai-sub-usage-row {
    margin-bottom: 12px;
}

.ai-sub-usage-row:last-child {
    margin-bottom: 0;
}

.ai-sub-usage-label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--e-global-color-4c858f9, #CBD5E1);
}

/* Progress bar */
.ai-sub-usage-bar {
    height: 8px;
    background: rgba(0, 15, 38, 0.5);
    border: 1px solid var(--e-global-color-0687250, #475569);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}

.ai-sub-usage-bar-fill {
    height: 100%;
    background: var(--e-global-color-b54462a, #F1DAB0);
    border-radius: 6px;
    transition: width 0.3s;
}

.ai-sub-usage-text {
    color: var(--e-global-color-b54462a, #F1DAB0);
}

/* Expiry */
.ai-sub-usage-expiry {
    color: var(--e-global-color-b54462a, #F1DAB0);
}

.ai-sub-usage-expiry small {
    color: var(--e-global-color-4c858f9, #CBD5E1);
    margin-left: 4px;
    opacity: 0.8;
}

/* Past packages section */
.ai-sub-usage-past {
    margin-top: 40px;
}

.ai-sub-usage-card-past {
    opacity: 0.7;
    background: rgba(51, 65, 85, 0.25);
    border-color: var(--e-global-color-0687250, #475569);
}

.ai-sub-usage-card-past h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Status badges */
.ai-sub-usage-badge {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid currentColor;
}

.ai-sub-usage-badge-exhausted {
    background: rgba(253, 109, 117, 0.12);
    color: var(--e-global-color-eced392, #FD6D75);
}

.ai-sub-usage-badge-expired {
    background: rgba(255, 225, 152, 0.12);
    color: var(--e-global-color-873fe11, #FFE198);
}

/* Past packages note */
.ai-sub-usage-past-note {
    color: var(--e-global-color-4c858f9, #CBD5E1);
    margin: 0 0 16px;
    font-size: 0.9em;
    opacity: 0.8;
}

/* Offered tokens */
.ai-sub-usage-offered {
    color: var(--e-global-color-873fe11, #FFE198);
    font-style: italic;
}