/* =============================================================================
   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 cards sit in theme.css's .card-grid > .custom-column > .inner-column
   > .card grid and take its card surface; this file stacks a card's
   content in a column, with its actions at the bottom, and adds the
   shop's own lines. The .card-price and .card-meta rules are the same in
   every shop addon, so installing several changes nothing.
   ============================================================================= */

/* A shop card's content in a column, so the actions sit at its bottom
   and every card of a row lines its buttons up */
.card {
    display: flex;
    flex-direction: column;
}

.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 private plan's link: its card, set apart from the form or the detail
   list above it, then the address and its Copy link button on one line,
   the button under the address when the line is too narrow */
.subscriptions-link-panel {
    margin-top: 24px;
}

.subscriptions-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -4px;
}

.subscriptions-link-row input {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0 4px 8px;
}

.subscriptions-link-row button {
    flex: 0 0 auto;
    margin: 0 4px 8px;
}

/* The plans page's consent box (subscriptions_withdrawal_consent): the
   checkbox beside its sentence, the sentence wrapping under itself */
.subscriptions-consent {
    display: flex;
    align-items: flex-start;
    margin: 0;
    font-weight: 400;
}

.subscriptions-consent input {
    flex: 0 0 auto;
    width: auto;
    margin: 4px 12px 0 0;
}

.subscriptions-consent span {
    flex: 1 1 auto;
    min-width: 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;
}