/* =============================================================================
   subscriptions.css - Subscriptions addon styles
   =============================================================================
   Ships with the subscriptions addon. Copy to includes/css/subscriptions.css
   and link it in index.html after theme.css. The card component below is the
   shared pattern used by all shop-style addons (products, credits,
   subscriptions); each addon ships its own copy so it stays self-contained,
   and duplicate definitions are harmless when several are installed.
   ============================================================================= */

/* Grid > .custom-column > .inner-column > .card. The column only takes its
   share of the row (the whole row on phones, half from 768px, a third
   from 1024px) and carries no padding; the .inner-column pads by 8px, half
   of the 16px gutter on every side, and the grid's -8px margin takes the
   outer half back so the cards sit flush with the page. Column and inner
   column are flex boxes, so every card in a row fills the same height. */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.card-grid > .custom-column {
    display: flex;
    flex: 0 0 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .card-grid > .custom-column {
        flex-basis: 50%;
    }
}

@media (min-width: 1024px) {
    .card-grid > .custom-column {
        flex-basis: 33.333%;
    }
}

.card-grid > .custom-column > .inner-column {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}

.card-grid > .custom-column > .inner-column > .card {
    flex: 1 1 auto;
    min-width: 0;
}

.card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--silver);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.card h2 {
    margin-top: 0;
    font-size: 1.25rem;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .card h2 {
        font-size: 1.5rem;
    }
}

.card-price {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 8px 0;
}

.card-meta {
    color: var(--gray);
    margin: 4px 0;
}

.card .form-actions,
.card button {
    margin-top: auto;
}

/* My subscription and the admin's page for one user: the current plan is
   one .panel card holding its heading, its detail list and its actions.
   The heading is a card title, a step below the page's h1. */
.subscriptions-card-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.125rem;
    line-height: 1.4;
}

/* A help line under a field or a group of fields: the plan form's length
   and the assign form's dates, which the plan's length sets */
.subscriptions-help {
    margin: -8px 0 16px 0;
    color: var(--gray);
    font-size: .85rem;
}

@media (min-width: 768px) {
    .subscriptions-card-title {
        font-size: 1.25rem;
    }
}

/* The detail list sits flat inside the card instead of drawing a second
   card of its own */
.subscriptions-panel .detail-list {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Quiet secondary text: the demo note beside a renewal date and the
   subscription reference on the admin page */
.subscriptions-muted {
    color: var(--gray);
    font-size: .8rem;
}

/* The history is a table card; its caption carries the card title, set
   on the same 16px side padding as the cells. The top margin keeps the
   card clear of a form above it (it collapses with a panel's own). */
.subscriptions-history {
    margin-top: 24px;
}

.subscriptions-history caption {
    margin-bottom: 0;
    padding: 16px 16px 12px;
    text-align: start;
}

.subscriptions-history caption .subscriptions-card-title {
    margin-bottom: 0;
}

/* A history date, time or reference never breaks inside itself (a
   Y-m-d date would otherwise break at its hyphens on a phone) */
.subscriptions-nowrap {
    white-space: nowrap;
}