/* Main account panel rendered by the [jamsara_account] shortcode. */
.jamsara-account {
    /* Keep the panel readable when it is placed in a full-width layout. */
    max-width: 640px;

    /* Give the account content breathing room inside the panel. */
    padding: 24px;

    /* Use a quiet border so the panel works inside Elementor layouts. */
    border: 1px solid #dddddd;

    /* Match the site's modest rounded-corner visual language. */
    border-radius: 8px;

    /* Keep shortcode content legible on varied page backgrounds. */
    background: #ffffff;
}

/* Visible marker for hidden/private sandbox pages using the DEV environment. */
.jamsara-environment-badge {
    /* Keep the label compact so it does not dominate the account panel. */
    display: inline-block;

    /* Separate the badge from the plan summary below it. */
    margin-bottom: 12px;

    /* Give the label enough shape to read as a status badge. */
    padding: 4px 8px;

    /* Use a warning tone to distinguish sandbox flows from production. */
    border: 1px solid #b45309;

    /* Match the plugin's modest rounded-corner style. */
    border-radius: 4px;

    /* Keep the fill light enough for readable dark text. */
    background: #fffbeb;

    /* Brown-orange text reads clearly against the pale warning fill. */
    color: #92400e;

    /* Make the badge readable without making it bulky. */
    font-size: 12px;

    /* Use bold text so the environment warning is hard to miss. */
    font-weight: 700;

    /* Prevent the compact badge from looking vertically cramped. */
    line-height: 1.2;
}

/* Container for the plan label, plan name, and plan detail text. */
.jamsara-plan {
    /* Separate the plan summary from messages and action buttons. */
    margin-bottom: 20px;
}

/* Small uppercase label above the current plan name. */
.jamsara-plan-label {
    /* Keep the label close to its corresponding plan name. */
    margin-bottom: 6px;

    /* Use compact type so the label reads as metadata. */
    font-size: 0.9rem;

    /* Add weight to compensate for the smaller text size. */
    font-weight: 600;

    /* Match common account-summary label styling. */
    text-transform: uppercase;

    /* Give uppercase letters a little extra room. */
    letter-spacing: 0.04em;

    /* Reduce emphasis so the plan name remains dominant. */
    opacity: 0.7;
}

/* Larger customer-facing plan name such as Paid, Trial, or Not signed in. */
.jamsara-plan-name {
    /* Add a small gap before the explanatory detail line. */
    margin-bottom: 8px;

    /* Make the account state easy to scan. */
    font-size: 1.5rem;

    /* Use medium-bold weight without feeling too heavy. */
    font-weight: 600;
}

/* Explanatory subscription or trial text below the plan name. */
.jamsara-plan-detail {
    /* Improve readability for longer subscription-status sentences. */
    line-height: 1.5;
}

/* Shared message styling for account and callback status text. */
.jamsara-account-message,
.jamsara-auth-status {
    /* Create space around transient messages. */
    margin: 16px 0;

    /* Match the plan-detail reading rhythm. */
    line-height: 1.5;
}

/* Error color used by both account and callback scripts. */
.jamsara-error {
    /* Use a red that is visible but not overly bright. */
    color: #a12622;
}

/* Flexible action row for sign-in, checkout, portal, and sign-out buttons. */
.jamsara-account-actions {
    /* Let buttons sit next to each other when space allows. */
    display: flex;

    /* Wrap buttons on narrow mobile containers. */
    flex-wrap: wrap;

    /* Keep button spacing consistent without margin juggling. */
    gap: 10px;
}

/* Base button spacing inside the account action row. */
.jamsara-account-actions button {
    /* Make it clear these are clickable controls. */
    cursor: pointer;

    /* Give button labels enough room to breathe. */
    padding: 10px 16px;
}

/* Busy state while checkout or portal sessions are being created. */
.jamsara-account-actions button:disabled {
    /* The wait cursor hints that the current action is still processing. */
    cursor: wait;

    /* Dim disabled buttons without hiding their labels. */
    opacity: 0.6;
}

/* Respect the hidden attribute used by the account JavaScript state machine. */
[hidden] {
    /* Force hidden controls to stay hidden across WordPress theme styles. */
    display: none !important;
}