/**
 * 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;
}

/* "Browse plans" CTA — match the plugin's filled primary button (cream → invert on hover).
   Scoped under .woocommerce-account so we beat WC's default `.woocommerce a.button` rule. */
.woocommerce-account .ai-sub-usage-empty a.button,
.ai-sub-usage-empty a.button {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 25px;
    border: 2px solid var(--e-global-color-b54462a, #F1DAB0);
    background: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-1fe9fdf, #8B5403);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.woocommerce-account .ai-sub-usage-empty a.button:hover,
.woocommerce-account .ai-sub-usage-empty a.button:focus,
.ai-sub-usage-empty a.button:hover,
.ai-sub-usage-empty a.button:focus {
    background: transparent;
    color: var(--e-global-color-edaa0cc, #FFFFFF);
    text-decoration: none;
}

/* 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;
}

/* ============================================================ *
 * WooCommerce native forms (Edit account, addresses…) — keep the
 * same label-vs-input contrast used in the AI Subscription sections:
 *   - labels in light grey (#CBD5E1)
 *   - input text in cream (#F1DAB0)
 *   - dark slate background + slate border
 * Scoped to .woocommerce-account so it only applies on the account pages
 * where this plugin's dark Elementor palette is active.
 * Specificity (0,2,1) to win over typical theme/WC rules (0,1,1). */
.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account .woocommerce-MyAccount-content form label {
    color: var(--e-global-color-4c858f9, #CBD5E1);
    font-weight: 500;
}

.woocommerce-account .woocommerce form .woocommerce-Input,
.woocommerce-account .woocommerce form input.input-text,
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    background: var(--e-global-color-a986c82, #33415580);
    border: 1px solid var(--e-global-color-0687250, #475569);
    border-radius: 5px;
    color: var(--e-global-color-b54462a, #F1DAB0);
    color-scheme: dark;
}

.woocommerce-account .woocommerce form .woocommerce-Input:focus,
.woocommerce-account .woocommerce form input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
    outline: none;
    border-color: var(--e-global-color-edaa0cc, #FFFFFF);
}

/* Helper / description text under fields (e.g. "Indique comment votre nom…") */
.woocommerce-account .woocommerce form .description,
.woocommerce-account .woocommerce-MyAccount-content em,
.woocommerce-account .woocommerce-MyAccount-content small {
    color: var(--e-global-color-4c858f9, #CBD5E1);
    opacity: 0.85;
}