/*
 * @package   PsyFrameSubscriptions
 * @copyright Copyright (c)2026 Psyframe Softwareentwicklung Steven Fenner
 * @license   GNU General Public License version 3, or later
 *
 * Frontend styles for PsyFrame Subscriptions, on top of Bootstrap 5.
 *
 * The design is the one the shop used before the migration. It used to be spread over three
 * files: the original component stylesheet, the FEF framework stylesheet, and the site's
 * user.css which overrode both. FEF is gone (the component renders Bootstrap markup now), so
 * every rule that hung on the old framework's panel, button and notice classes has been
 * re-expressed against the Bootstrap classes the templates actually emit. Where that mapping
 * is not obvious, it is noted at the block in question.
 *
 * Colours are design tokens. --pfs-color-primary and --pfs-color-primary-hover follow the
 * Cassiopeia template when it defines its own variables, so the component keeps matching the
 * site if its colour scheme changes; the fallbacks are the values the shop uses today.
 *
 * Rules are scoped to #pfs where they would otherwise reach outside the component, but they
 * stay free of !important so a site template can still override them.
 *
 * Dark mode is deliberately NOT defined here yet - it is the next step and needs its own pass.
 */

:root {
    /* Brand blue: tile headers, card headers, primary buttons */
    --pfs-color-primary: var(--cassiopeia-color-primary, #004466);
    --pfs-color-primary-hover: var(--cassiopeia-color-hover, #0088cc);

    /* Hairlines between tile sections */
    --pfs-color-hairline: #e5e4e3;
    /* Tile body ground */
    --pfs-color-tile-body: #f9f9f9;
    /* "Total incl. tax" bar under the price */
    --pfs-color-total-bar: #009fff;
    /* Estimated tax line on the dark header */
    --pfs-color-tax: #aad074;

    /* Accent buttons */
    --pfs-color-orange: #eea236;
    --pfs-color-orange-hover: #df8a13;
    --pfs-color-red: #e2363c;
    --pfs-color-grey: #e7e7e7;
    --pfs-color-grey-hover: #cecdcd;

    /* Subscribe button */
    --pfs-color-green: #448344;
    --pfs-color-green-hover: #3a6f3a;
    /* Grand total badge */
    --pfs-color-badge-green: #93c34e;

    /* Light text on the order panel's blue ground */
    --pfs-color-panel-text: #62c6c9;
    /* Neutral panel header (terms of service) */
    --pfs-color-panel-neutral: #e2e2e2;
    /* Underline below section headings */
    --pfs-color-heading-rule: #40b5b8;
    /* Notice boxes */
    --pfs-color-note-border: #0078fe;
    --pfs-color-note-bg: #aee0ff;
    --pfs-color-note-fg: #1f6fa5;

    --pfs-radius: 6px;
    --pfs-tile-description-min-height: 200px;
}

/* --- Component wrapper ---------------------------------------------------- */
#pfs {
    margin-bottom: 1em;
    background: transparent;
    padding: 0;
}

/* =========================================================================
 * Subscription level tiles
 *
 * Layout note: the tiles are laid out by Bootstrap. The markup carries .row on the container
 * and .col on every tile, so the original float/percentage widths per .columns-N are not
 * reproduced - they would fight Bootstrap and squeeze every tile onto one line on phones.
 * ========================================================================= */
.pfs-levels {
    margin-bottom: 15px;
    background: #ffffff;
    border-radius: var(--pfs-radius);
}

/*
 * The tile row is a grid rather than the Bootstrap flex row, so that the header, the body and
 * the footer of every tile can be aligned with one another through subgrid - see below. The
 * Bootstrap gutter is cleared and replaced by the grid gap.
 */
#pfs .pfs-levels .columns {
    display: grid;
    /*
     * The column tracks are capped at 800px each (see the .columns-N rules below), so with
     * few tiles - e.g. a single level left to buy - the tiles stop growing; centring the
     * track band keeps them in the middle of the page instead of hugging the left edge.
     */
    justify-content: center;
    /*
     * Three implicit rows per band - header, body, footer - repeated for every further row of
     * tiles. Declaring them as auto rows rather than an explicit template avoids a leftover
     * empty row at the end.
     */
    grid-auto-rows: auto 1fr auto;
    gap: 14px;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    border: 0;
    margin: 0;
    border-radius: 0;
}

#pfs .pfs-levels .columns-1 { grid-template-columns: repeat(1, minmax(0, 800px)); }
#pfs .pfs-levels .columns-2 { grid-template-columns: repeat(2, minmax(0, 800px)); }
#pfs .pfs-levels .columns-3 { grid-template-columns: repeat(3, minmax(0, 800px)); }
#pfs .pfs-levels .columns-4 { grid-template-columns: repeat(4, minmax(0, 800px)); }
#pfs .pfs-levels .columns-5 { grid-template-columns: repeat(5, minmax(0, 800px)); }
#pfs .pfs-levels .columns-6 { grid-template-columns: repeat(6, minmax(0, 800px)); }
#pfs .pfs-levels .columns-7 { grid-template-columns: repeat(7, minmax(0, 800px)); }
#pfs .pfs-levels .columns-8 { grid-template-columns: repeat(8, minmax(0, 800px)); }
#pfs .pfs-levels .columns-9 { grid-template-columns: repeat(9, minmax(0, 800px)); }
#pfs .pfs-levels .columns-10 { grid-template-columns: repeat(10, minmax(0, 800px)); }

/*
 * A clearfix left over from the float layout. In a grid it would claim a cell of its own and
 * leave an empty row with a gap below the tiles.
 */
#pfs .pfs-levels .columns > .level-clear {
    display: none;
}

/* Each tile carries its own frame now that the container has none */
#pfs .pfs-level-card {
    box-shadow: 0 0 2px #373637;
    margin-bottom: 0;
    padding-top: 7px;
}

#pfs .pfs-level-card:hover {
    box-shadow: 0 0 10px #373637;
    z-index: auto;
}

/*
 * Equal heights without a line of JavaScript.
 *
 * The three sections of a tile - header, body, footer - are handed up to the row grid with
 * subgrid, so the header sits in row 1, the body in row 2 and the footer in row 3 for every
 * tile alike. The grid sizes each row from the tallest tile in the row: all headers end up
 * equally tall, row 2 is the 1fr row and absorbs the remaining height, and every subscribe
 * button lands on the same baseline at the bottom.
 *
 * Two wrappers sit between the tile and those sections, so the subgrid is passed through both.
 * The ribbon container is absolutely positioned and therefore occupies no grid cell.
 */
#pfs .pfs-level-card,
#pfs .pfs-level-card > div,
#pfs .pfs-level-card > div > div:not(.pfs-level-badge-container) {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
}

#pfs .pfs-level-card__body {
    display: flex;
    flex-direction: column;
}

#pfs .pfs-level-card__body > .pfs-level-card__description {
    flex: 1 1 auto;
}

/*
 * Fallback for browsers without subgrid: the tiles still come out equally tall and the button
 * still sits at the bottom; only the headers keep their individual heights.
 */
@supports not (grid-template-rows: subgrid) {
    #pfs .pfs-level-card,
    #pfs .pfs-level-card > div,
    #pfs .pfs-level-card > div > div:not(.pfs-level-badge-container) {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    #pfs .pfs-level-card > div,
    #pfs .pfs-level-card > div > div:not(.pfs-level-badge-container) {
        flex: 1 1 auto;
    }

    #pfs .pfs-level-card__body {
        flex: 1 1 auto;
    }

    #pfs .pfs-level-card__footer {
        margin-top: auto;
    }
}

/* Tile header and level bar share the brand gradient */
#pfs .pfs-level-card__header,
#pfs .pfs-level-card__title,
#pfs .pfs-level-card:hover .pfs-level-card__header,
#pfs .pfs-level-card:hover .pfs-level-card__title {
    background-color: var(--pfs-color-primary);
    background-image: linear-gradient(135deg, var(--pfs-color-primary) 0%, var(--pfs-color-primary-hover) 100%);
}

/*
 * The header is the reference for the cqw units below, so the level name, the price and the
 * icon scale with the tile width instead of the viewport. It has to sit here and not on the
 * tile itself: an element with a containment context cannot also be a subgrid, and the tile
 * needs to be one so the sections line up across the row.
 */
#pfs .pfs-level-card__header {
    padding: 0;
    container-type: inline-size;
}

#pfs .pfs-level-card__title {
    border: none;
    padding: 12px 0;
    font-size: 1vw;
    margin-bottom: 0;
    text-align: center;
}

/*
 * The short rule under the level name. Symmetric margins keep it centred under the name; the
 * 120px floor keeps its left end clear of the level icon, which floats into the header's top
 * left corner (about 105px wide incl. padding on narrow tiles). With a plain "width: 50%;
 * left: 25%" the icon covered the rule's left end on phones in portrait mode.
 */
#pfs .pfs-level-card__title::after {
    content: '';
    display: block;
    position: relative;
    margin-top: -5px;
    margin-left: max(25%, 100px);
    margin-right: max(25%, 100px);
    border-top: 1px solid var(--pfs-color-hairline);
}

#pfs a.pfs-level-card__link {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    text-shadow: none;
}

#pfs a.pfs-level-card__link.label {
    margin-right: 0;
}

#pfs .pfs-price {
    color: #ffffff;
    font-size: 2vw;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    text-shadow: none;
    padding-top: 0;
}

#pfs .pfs-price span.pfs-price__integer,
#pfs .pfs-price span.pfs-price__free {
    font-size: 70%;
}

/* Duration line under the price, e.g. "per year" */
#pfs .pfs-price.psyframe-level-period {
    color: slategrey;
    font-size: 18px;
}

/* The "total including tax" bar */
#pfs .pfs-price__prediscount {
    background-color: var(--pfs-color-total-bar);
    color: #ffffff;
    font-size: 22px;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    height: auto;
    text-shadow: none;
}

/* Estimated tax, sits on the dark header */
#pfs .pfs-price__taxnotice {
    color: var(--pfs-color-tax);
    font-style: italic;
    font-weight: bold;
    font-size: 13pt;
    text-align: center;
    height: auto;
    padding: 0;
}

#pfs .pfs-level-card__image,
#pfs .pfs-level-card__description,
#pfs .pfs-level-card__footer {
    padding: 2%;
    border-top: 1px solid var(--pfs-color-hairline);
}

/*
 * The level image is a small badge floating into the header, not a banner. The negative
 * margins are what pull it up over the header and stop it from taking horizontal space.
 * width/height attributes on the tag carry the file's intrinsic size (so the browser can
 * reserve the aspect ratio); "height: auto" is what lets these rules win over them.
 */
#pfs img.pfs-level-card__image {
    display: block;
    float: left;
    max-width: 3.5vw;
    min-width: 75px;
    height: auto;
    padding: 0 0 0 10px;
    margin: -25px -100px 0 0;
    border: 0;
    border-radius: 0;
}

#pfs .pfs-level-card__description {
    background-color: var(--pfs-color-tile-body);
    padding: 4%;
    min-height: var(--pfs-tile-description-min-height);
    text-align: center;
}

#pfs .pfs-level-card__description p,
#pfs .pfs-subscription-description p {
    text-align: center;
    float: none;
}

#pfs .pfs-level-card__description .psyframe-subscription-description,
#pfs .pfs-subscription-description .psyframe-subscription-description {
    padding-top: 20px;
}

/* Emphasised duration inside the level description, e.g. "1 YEAR" */
#pfs .pfs-level-card__description p .subscription-duration,
#pfs .pfs-subscription-description p .subscription-duration {
    display: block;
    font-size: 2em;
    padding: 5px;
    font-weight: 800;
    text-transform: uppercase;
}

#pfs .pfs-level-card__footer {
    background-color: #ffffff;
    padding-bottom: 15px;
    text-align: center;
}

#pfs .pfs-level-card__subscribe {
    text-align: center;
}

/* Buttons inside a tile and the renew button do not stretch across the whole tile */
#pfs .pfs-levels button.btn,
#pfs .pfs-subscription-level-renew-container a.btn {
    max-width: 260px;
}

/* =========================================================================
 * Corner ribbons ("Most popular", "Recommended", ...)
 *
 * The ribbon is a CSS triangle: a border-top plus a transparent border-left, with the label
 * rotated 45 degrees on top of it.
 * ========================================================================= */
/*
 * The ribbon must not affect the geometry of the tile. The markup puts it in a container of
 * its own ahead of the tile content, so in the normal flow it would push everything below it
 * down and a labelled tile would sit lower than an unlabelled one. The original compensated
 * for that with a fixed negative margin, which only ever matched one particular tile height.
 *
 * Taking the ribbon out of the flow and pinning it to the top right corner of the tile removes
 * the problem at the source: labelled and unlabelled tiles now have identical geometry.
 */
#pfs .column-first,
#pfs .column-middle,
#pfs .column-last {
    position: relative;
}

#pfs .pfs-level-badge-container {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 0;
    height: 0;
}

#pfs .pfs-level-card__inner {
    float: none;
    width: auto;
    margin-top: 0;
}

#pfs .pfs-level-badge {
    position: relative;
    width: 0;
    height: 0;
    border-top: 5.5em solid #49b948;
    border-left: 5.5em solid transparent;
    float: right;
}

#pfs .pfs-level-badge__txt {
    display: inline-block;
    position: absolute;
    top: -50px;
    right: -20px;
    z-index: 2;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    transform: rotate(45deg);
    color: #ffffff;
    font-size: 11px;
}

#pfs .pfs-level-badge.label-color-pop { border-top-color: green; }
#pfs .pfs-level-badge.label-color-mpop { border-top-color: red; }
#pfs .pfs-level-badge.label-color-rec { border-top-color: orange; }
#pfs .pfs-level-badge.label-color-exp,
#pfs .pfs-level-badge.label-color-ext { border-top-color: blue; }

/*
 * Highlight badges, driven by the category/level parameter pfs_badge (see the LevelGroups
 * helper). Each badge id carries one accent colour, used by the corner ribbon, the tile
 * frame and the pill on the subscribe page alike. The colours follow the mapping of the
 * old hardcoded labels: Empfohlen orange, Am Beliebtesten red - Aktion gets the green.
 */
#pfs .pfs-badge--recommended { --pfs-badge-color: var(--pfs-color-orange); }
#pfs .pfs-badge--popular { --pfs-badge-color: var(--pfs-color-red); }
#pfs .pfs-badge--promo { --pfs-badge-color: var(--pfs-color-green); }

#pfs .pfs-level-badge[class*="pfs-badge--"] {
    border-top-color: var(--pfs-badge-color);
}

/* A badged tile is framed in its badge colour - on hover the glow strengthens like everywhere else */
#pfs .pfs-level-card--highlight {
    --pfs-badge-color: #373637;
    box-shadow: 0 0 0 2px var(--pfs-badge-color), 0 0 6px rgba(55, 54, 55, 0.35);
}

#pfs .pfs-level-card--highlight:hover {
    box-shadow: 0 0 0 2px var(--pfs-badge-color), 0 0 10px #373637;
}

#pfs .pfs-level-card--badge-recommended { --pfs-badge-color: var(--pfs-color-orange); }
#pfs .pfs-level-card--badge-popular { --pfs-badge-color: var(--pfs-color-red); }
#pfs .pfs-level-card--badge-promo { --pfs-badge-color: var(--pfs-color-green); }

/* The badge as a small pill next to the level title on the subscribe page */
#pfs .pfs-badge-pill {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.15em 0.7em;
    border-radius: 999px;
    background-color: var(--pfs-badge-color, #373637);
    color: #ffffff;
    font-size: 0.6em;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}

/*
 * The source offset the ribbon by -3px to clear a border that no longer exists here, which
 * left it sticking out past the tile. Flush with the header is what it should be.
 */
#pfs .pfs-level-badge[class*="label-color-"],
#pfs .pfs-level-badge[class*="pfs-badge--"] {
    right: 0;
}

/* =========================================================================
 * Checkout
 *
 * The old framework distinguished panels by a colour modifier: the coloured ones carried the
 * brand gradient in their header, the neutral ones a flat grey. Bootstrap cards have no such
 * modifier, so the gradient is the default here and the grey is applied to the one card that
 * needs it - see the Terms of Service block below.
 * ========================================================================= */
#pfs .card > .card-header {
    background-color: var(--pfs-color-primary);
    background-image: linear-gradient(135deg, var(--pfs-color-primary) 0%, var(--pfs-color-primary-hover) 100%);
    color: #ffffff;
    min-height: 42px;
}

#pfs .card > .card-header h1,
#pfs .card > .card-header h2,
#pfs .card > .card-header h3,
#pfs .card > .card-header h4,
#pfs .card > .card-header h5 {
    color: inherit;
    border-bottom: 0;
    margin-bottom: 0;
}

/*
 * The Terms of Service body is a .card-body and a .form-check at the same time. Both set a
 * left padding, the card's wins, and .form-check-input then pulls itself out by 1.5em - which
 * put the checkbox outside the card. Enough padding to absorb that pull puts it back inside.
 */
#pfs .card-body.form-check {
    padding-left: 2.5rem;
}

/*
 * Neutral header for the Terms of Service card, which used to be a FEF "default" panel.
 * The Bootstrap markup gives every card the same classes and even the same id, so the card
 * can only be identified by what it contains - its body is the one carrying .form-check.
 * :has() is supported by all current browsers (Firefox from version 121); where it is not,
 * this header simply keeps the blue gradient above.
 */
#pfs .card:has(> .card-body.form-check) > .card-header {
    background-color: var(--pfs-color-panel-neutral);
    background-image: none;
    color: inherit;
}

/* "Your order" panel on the subscribe page */
#pfs #pfs-panel-yourorder {
    padding: 0;
}

/*
 * The blue level column has to run edge to edge, from the top of the card to its bottom. Two
 * things stand in the way by default: the card body's padding, and the row's gutter, which
 * gives every column a horizontal padding and the row itself a negative margin. Both are
 * cleared here and the padding is moved to the description column, which is the only part
 * that actually needs it. The column then stretches on its own - a Bootstrap row is a flex
 * container with align-items: stretch.
 */
#pfs #pfs-panel-yourorder > .card-body {
    --bs-gutter-x: 0;
    padding: 0;
    margin: 0;
    text-align: center;
}

#pfs #pfs-panel-yourorder .pfs-subscription-level {
    background-color: var(--pfs-color-primary);
    background-image: linear-gradient(135deg, var(--pfs-color-primary) 0%, var(--pfs-color-primary-hover) 100%);
    color: var(--pfs-color-panel-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2em 1em;
}

#pfs #pfs-panel-yourorder .pfs-subscription-description {
    padding: 2em;
}

/*
 * Inside the order panel the level is a centred stack - icon above, title below. The flex row
 * layout of the shared rule belongs to the My Subscriptions page, not here.
 */
#pfs #pfs-panel-yourorder .pfs-subscription-level .pfs-subscription-level-inner-container {
    display: block;
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
    margin: 0;
    border: 0;
    gap: 0;
}

#pfs #pfs-panel-yourorder .pfs-subscription-level-image {
    display: inline-block;
    margin: .5em auto;
}

/*
 * On the blue ground the text is light. Only the panel heading carries a rule; the level
 * title below the icon must not repeat it, otherwise the panel shows two dividers.
 */
#pfs #pfs-panel-yourorder .pfs-subscription-level h4 {
    color: var(--pfs-color-panel-text);
    border-bottom-color: rgba(255, 255, 255, .45);
}

#pfs #pfs-panel-yourorder .pfs-subscription-level h5 {
    border-bottom: 0;
    margin-bottom: 0;
}

#pfs #pfs-panel-yourorder .pfs-subscription-level .pfs-subscription-level-inner-container h5 {
    color: #ffffff;
    font-weight: bold;
    font-size: 11pt;
}

#pfs #pfs-panel-yourorder .pfs-subscription-description:nth-child(2) {
    text-align: center;
}

/*
 * Order summary: individual sums right, grand total centred and large.
 *
 * The tax cell is a wrapper now - the amount carries the id the price localisation writes into,
 * and the footnote marker sits next to it - so the alignment is set on the cell, not on the id.
 */
#pfs-sum-original-field,
#pfs-sum-discount-field,
#pfs-sum-net-field,
#pfs .pfs-sum-tax-cell {
    text-align: right;
}

#pfs-sum-label {
    text-align: center;
    margin: 1em 0 .5em;
}

#pfs-sum-price {
    font-size: 300%;
    font-weight: bold;
    text-align: center;
}

/*
 * The grand total badge. This is the one place that needs !important: the markup uses
 * Bootstrap's .bg-success utility, and utility classes declare their colour as !important by
 * design, so no amount of specificity can override them otherwise.
 */
#pfs #pfs-sum-price .badge {
    background-color: var(--pfs-color-badge-green) !important;
}

/*
 * The amounts in the order summary.
 *
 * .pfs-level-price is the type style of the subscription level tiles - 2rem, bold. The order
 * summary reuses the class, which makes its rows huge, but only when a discount is applied:
 * without one the price localisation replaces those cells wholesale and the spans disappear, so
 * the same panel rendered two different ways. It also worked the wrong way round on the grand
 * total, where the absolute 2rem overrode the 300% of #pfs-sum-price.
 *
 * Inside the panel the amounts therefore inherit their type, and only the grand total is set
 * large - by its container, as before.
 */
#pfs #pfs-column-price .pfs-level-price,
#pfs #pfs-column-price .pfs-level-price-currency {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

#pfs #pfs-sum-price .pfs-level-price {
    font-weight: 700;
}

/*
 * text-decoration is drawn by the element that declares it, in that element's own font size.
 * With the amount back at the surrounding size the strike-through sits where it should; it only
 * needs a little more weight to stay visible.
 */
#pfs #pfs-sum-original-field del {
    text-decoration-thickness: 2px;
}

#pfs-coupon-code-outer-container {
    margin-top: 6pt;
}

/* Feedback under the coupon field: quiet, one line, in the flow of the panel */
#pfs .pfs-coupon-note {
    margin: .4rem 0 0;
    font-size: .85rem;
    line-height: 1.4;
}

#pfs .pfs-coupon-note-ok {
    color: var(--pfs-color-green);
}

#pfs .pfs-coupon-note-error {
    color: var(--pfs-color-red);
}

#pfs #coupon {
    margin: inherit;
}

/* --- Buttons -------------------------------------------------------------- */
#pfs .btn-primary,
#pfs .btn-info,
#pfs .btn-dark {
    background-color: var(--pfs-color-primary);
    border-color: var(--pfs-color-primary);
    color: #ffffff;
}

#pfs .btn-primary:hover,
#pfs .btn-info:hover,
#pfs .btn-dark:hover {
    background-color: var(--pfs-color-primary-hover);
    border-color: var(--pfs-color-primary-hover);
    color: #ffffff;
}

#pfs .btn-outline-info {
    border: 2px solid var(--pfs-color-primary-hover);
    color: var(--pfs-color-primary);
}

#pfs .btn-warning {
    background-color: var(--pfs-color-orange);
    border-color: var(--pfs-color-orange);
    color: #ffffff;
}

#pfs .btn-warning:hover {
    background-color: var(--pfs-color-orange-hover);
    border-color: var(--pfs-color-orange-hover);
    color: #ffffff;
}

#pfs .btn-secondary,
#pfs .btn-outline-secondary {
    background-color: var(--pfs-color-grey);
    border-color: var(--pfs-color-grey);
    color: #212529;
}

#pfs .btn-secondary:hover,
#pfs .btn-outline-secondary:hover {
    background-color: var(--pfs-color-grey-hover);
    border-color: var(--pfs-color-grey-hover);
    color: #212529;
}

#pfs .btn-danger {
    background-color: var(--pfs-color-red);
    border-color: var(--pfs-color-red);
}

/* The subscribe button is green, and pales out while the terms are unaccepted */
#pfs #subscribenow {
    background-color: var(--pfs-color-green);
    border-color: var(--pfs-color-green);
    color: #ffffff;
}

#pfs #subscribenow:hover {
    background-color: var(--pfs-color-green-hover);
    border-color: var(--pfs-color-green-hover);
}

.pfs-btn-big {
    font-size: 150%;
    padding: 1em;
}

/*
 * The subscribe button carries two lines: its label, and a smaller note naming the reseller.
 * The note must not inherit the button's enlarged type, hence the relative size and the
 * normal weight.
 */
#pfs #subscribenow {
    white-space: normal;
    line-height: 1.25;
}

#pfs .pfs-subscribe-label {
    display: block;
}

#pfs .pfs-subscribe-note {
    display: block;
    margin-top: .4em;
    font-size: .55em;
    font-weight: 400;
    text-transform: none;
    opacity: .95;
}

/*
 * Bootstrap only gives the pointing hand to <a> and to <button> elements it recognises as
 * such; a button that is styled as a panel-wide call to action still shows the text caret in
 * some templates because the label spans swallow the pointer. Setting it on the button and
 * letting the spans inherit keeps the whole surface clickable-looking. While the terms are
 * unaccepted the button is disabled, and then the cursor has to say so instead.
 */
#pfs #subscribenow,
#pfs #subscribenow .pfs-subscribe-label,
#pfs #subscribenow .pfs-subscribe-note,
#pfs .btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

#pfs #subscribenow:disabled,
#pfs #subscribenow.disabled,
#pfs .btn:disabled,
#pfs .btn.disabled {
    cursor: not-allowed;
}

.pfs-level-login-button {
    margin: .5em 0;
}

.pfs-goback {
    margin-top: 1rem;
}

.pfs-panel-force-top-margin {
    margin-top: 1.5rem;
}

/* --- Notices and headings ------------------------------------------------- */
#pfs .alert-info {
    border: 1px solid var(--pfs-color-note-border);
    background-color: var(--pfs-color-note-bg);
    color: var(--pfs-color-note-fg);
}

#pfs h1 { font-size: 1.5em; }
#pfs h2 { font-size: 1.2em; }
#pfs h3 { font-size: 1em; }

#pfs h4,
#pfs h5 {
    font-size: 1.2em;
    border-bottom: 1px solid var(--pfs-color-heading-rule);
    margin-bottom: 15px;
}

/* Upsell / upgrade panel */
#pfs .psyframe-upsell {
    background-color: #f3f3f3;
}

#pfs .psyframe-upsell > .card-header {
    background-color: var(--pfs-color-orange);
    background-image: none;
    padding: 5px;
}

#pfs .psyframe-upsell .btn-secondary {
    border-color: #f9b172;
}

/* --- Signup form ---------------------------------------------------------- */
.pfs-signup-fields {
    margin-bottom: 1.5rem;
}

#pfs .pfs-signup-fields input,
#pfs .pfs-signup-fields select {
    width: 100%;
}

#pfs .pfs-signup-fields input[type="checkbox"],
#pfs .pfs-signup-fields input[type="radio"] {
    width: inherit;
}

/* --- Level price boxes (levels list, modules) ----------------------------- */
.pfs-level-price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.pfs-level-price-currency {
    font-size: .6em;
    font-weight: 400;
    vertical-align: super;
}

.pfs-level-initial-price {
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
}

.pfs-level-footer {
    margin-top: auto;
    padding-top: 1rem;
    text-align: center;
}

/* =========================================================================
 * My Subscriptions
 * ========================================================================= */
.pfs-subscription-container {
    margin-bottom: 1.5rem;
}

.pfs-subscription-levels-subscriptions-details {
    margin-bottom: 3em;
}

.pfs-subscription-level-inner-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .375rem;
}

.pfs-subscription-level-image,
.pfs-subscription-level-image img {
    max-width: 64px;
    height: auto;
}

.pfs-subscription-header {
    font-weight: 600;
    font-size: 1.125rem;
}

.pfs-subscription-info,
.pfs-subscription-description {
    flex: 1 1 16rem;
}

.mysubs-level-header {
    display: flex;
    flex-wrap: wrap;
}

.mysubs-level-header > h3 {
    font-weight: bold;
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin-bottom: 0;
}

.mysubs-level-header > h3 > img {
    margin-right: 1em;
}

.mysubs-level-header .pfs-subscription-info {
    align-self: center;
    text-align: right;
}

.mysubs-level-header .pfs-subscription-info span {
    display: block;
}

.pfs-subscriptions-billing-history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .75rem;
    font-weight: 600;
    border-bottom: 2px solid rgba(0, 0, 0, .25);
}

.pfs-subscriptions-billing-history-head > span {
    flex: 1 1 auto;
}

.pfs-subscriptions-billing-history-head > button {
    flex: 0 0 auto;
    align-self: center;
    margin-bottom: .25em;
    /* Never break the button label into two lines - the button moves below the title instead */
    white-space: nowrap;
}

/* Narrow phones (portrait): title and show/hide button always stacked, button aligned with the text */
@media (max-width: 428px) {
    .pfs-subscriptions-billing-history-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .pfs-subscriptions-billing-history-head > button {
        align-self: flex-start;
        margin-top: .1em;
        margin-bottom: .4em;
    }
}

/* The level description repeats the title in its first paragraph - hide it */
.pfs-subscriptions-description-level > p:first-child {
    display: none;
}

.pfs-subscription-level-renew-container {
    margin-top: .75rem;
    text-align: center;
}

.pfs-subscription-level-renew-container a {
    width: 100%;
    max-width: 200px;
}

/* Active vs expired itemised subscriptions */
.pfs-subscriptions-itemized-active {
    border-left: .25rem solid #198754;
    padding-left: .75rem;
}

.pfs-subscriptions-itemized-expired {
    border-left: .25rem solid #adb5bd;
    padding-left: .75rem;
    opacity: .75;
}

/* Label column of the subscription detail tables */
td.subscription-label {
    font-weight: bold;
    min-width: 10em;
    background-color: #efefef;
}

/* --- Subscription status badges ------------------------------------------ */
.pfs-subscription-status {
    display: inline-block;
    padding: .25em .6em;
    font-size: .8em;
    font-weight: 600;
    border-radius: .375rem;
    color: #fff;
    background-color: #6c757d; /* default / unknown */
}

.pfs-subscription-status-new {
    background-color: #0d6efd;
}

.pfs-subscription-status-pending {
    background-color: #ffc107;
    color: #212529;
}

.pfs-subscription-status-active,
.pfs-subscription-status-completed {
    background-color: #198754;
}

.pfs-subscription-status-expired {
    background-color: #6c757d;
}

.pfs-subscription-status-canceled,
.pfs-subscription-status-cancelled {
    background-color: #dc3545;
}

/* =========================================================================
 * Membership group listing (the shop's group article page)
 *
 * This markup is produced by the site's article, not by the component. The rules are kept
 * here so the presentation survives if the site's user.css is cleaned up later.
 * ========================================================================= */
.item-pagepsyframe-shop-groups .page-header {
    margin: 2px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.item-pagepsyframe-shop-groups .page-header h1 {
    font-size: 22px;
    font-weight: bold;
    line-height: 44px;
}

.item-pagepsyframe-shop-groups .psyframe-memberships-group-container.span12 {
    width: 100%;
    padding-left: 30%;
    padding-right: 30%;
}

.item-pagepsyframe-shop-groups .psyframe-memberships-group-container.span6 {
    width: 50%;
    margin-left: 0;
}

.item-pagepsyframe-shop-groups .psyframe-memberships-group-container.span4 {
    width: 33.3%;
}

.item-pagepsyframe-shop-groups .psyframe-memberships-group-container.span3 {
    width: 25%;
}

/* The source used a comma as the decimal separator here, which browsers discard - so .span2
   never got a width at all. Written correctly: */
.item-pagepsyframe-shop-groups .psyframe-memberships-group-container.span2 {
    width: 16.67%;
}

.psyframe-memberships {
    border-top: 1px solid var(--pfs-color-hairline);
}

.psyframe-memberships-group {
    border: 1px solid #999;
    margin: 0 20px;
    text-align: center;
}

.psyframe-memberships-group:hover {
    box-shadow: 0 0 10px #373637;
}

.psyframe-memberships-group-details {
    height: 100%;
}

.psyframe-memberships-title {
    padding: 10px 0;
}

.psyframe-memberships-image {
    padding-top: 0;
}

.psyframe-memberships-image img {
    max-width: 50px;
}

.psyframe-memberships-price {
    padding: 2%;
}

.psyframe-memberships-description,
.psyframe-memberships-image,
.psyframe-memberships-subscribebutton {
    padding: 4%;
    border-top: 1px solid var(--pfs-color-hairline);
    background-color: #f9f8f8;
}

.psyframe-memberships-description.muted {
    color: #999;
}

/* =========================================================================
 * Responsive tables ("no more tables" pattern: every cell becomes a row and
 * takes its heading from the data-title attribute)
 * ========================================================================= */
@media only screen and (max-width: 820px) {
    #no-more-tables tbody,
    #no-more-tables tr,
    #no-more-tables td {
        display: block;
    }

    #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables tr {
        border-bottom: 1px solid #ccc;
    }

    #no-more-tables td {
        position: relative;
        padding-left: 50%;
        border: none;
        border-bottom: 1px solid #eee;
    }

    #no-more-tables td:before {
        content: attr(data-title);
        position: absolute;
        left: 6px;
        font-weight: bold;
    }

    #no-more-tables td#no-more-tables-first {
        margin-top: 20px;
        text-align: left;
        font-weight: bold;
    }

    #no-more-tables td#no-more-tables-last a {
        float: left;
        margin-left: 0;
    }

    #no-more-tables td.no-more-tables-header {
        background-color: #004466;
        color: white;
        padding-top: 20px;
    }
}

/* =========================================================================
 * Breakpoints for the tiles: the level name and price scale with the viewport,
 * with fixed sizes below the tablet breakpoint.
 * ========================================================================= */
/*
 * Proportions measured from the design: at a tile 424 px wide the level name is about 19 px,
 * the price block about 26 px and the icon 54 px wide - that is 4.5%, 6.1% and 12.7% of the
 * tile; the icon was then enlarged by hand to 17%. Expressed in cqw those ratios hold at any tile width, which makes the viewport-based
 * breakpoints below a fallback for browsers without container queries.
 */
@supports (container-type: inline-size) {
    #pfs .pfs-level-card__title {
        font-size: 4.5cqw;
    }

    #pfs .pfs-price {
        font-size: 6.1cqw;
    }

    #pfs .pfs-price__prediscount {
        font-size: 6.6cqw;
    }

    #pfs .pfs-price__taxnotice {
        font-size: 3.4cqw;
    }

    #pfs img.pfs-level-card__image {
        width: 17cqw;
        max-width: none;
        min-width: 0;
    }

    /*
     * The rule under the level name must start right of the icon (17cqw wide, 75px minimum
     * on phones, plus its 10px padding). On narrow tiles the icon is wider than 25% of the
     * tile, so the floor grows with the icon; the margins stay symmetric to keep the rule
     * centred under the name.
     */
    #pfs .pfs-level-card__title::after {
        margin-left: max(25%, calc(17cqw + 25px));
        margin-right: max(25%, calc(17cqw + 25px));
    }

    /*
     * "FREE" is one long word where a price is a short number: on phones in portrait mode it
     * ran into the icon at the price size. Capped by the tile width it stays clear of it.
     */
    #pfs .pfs-price span.pfs-price__free {
        font-size: min(70%, 7cqw);
    }
}

@media (max-width: 1600px) {
    #pfs .pfs-level-card__title {
        font-size: 1.5vw;
    }
}

@media (max-width: 1320px) {
    #pfs .pfs-level-card__title {
        font-size: 2vw;
    }

    #pfs img.pfs-level-card__image {
        max-width: 3vw;
        min-width: 50px;
        margin-top: -35px;
    }
}

@media (max-width: 991px) {
    #pfs .pfs-level-card__title {
        font-size: 1.5vw;
    }

    #pfs .pfs-level-card__title::after {
        margin-top: 0;
    }

    #pfs img.pfs-level-card__image {
        max-width: 4vw;
        min-width: 25px;
        margin-top: -20px;
    }
}

@media (max-width: 767px) {
    /*
     * Below the tablet breakpoint the tiles stack. With the row being a grid, the lever is the
     * column template: one column, whatever the .columns-N class says.
     */
    #pfs .pfs-levels .columns[class*="columns-"] {
        grid-template-columns: minmax(0, 1fr);
    }

    #pfs .pfs-level-card__title {
        font-size: 26px;
    }

    #pfs .pfs-price {
        font-size: 40px;
    }

    #pfs img.pfs-level-card__image {
        min-width: 75px;
    }

    /* The icon is at least 75px wide here (plus padding): keep the rule clear of it */
    #pfs .pfs-level-card__title::after {
        margin-left: max(25%, calc(17cqw + 25px), 100px);
        margin-right: max(25%, calc(17cqw + 25px), 100px);
    }

    #pfs .pfs-level-badge[class*="label-color-"],
    #pfs .pfs-level-badge[class*="pfs-badge--"] {
        position: relative;
        right: 0;
    }

    .item-pagepsyframe-shop-groups .psyframe-memberships-group-container {
        float: left;
        width: 100%;
        padding-bottom: 10px;
    }

    .item-pagepsyframe-shop-groups .psyframe-memberships-group-container.span12 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* On narrow screens the My Subscriptions header stacks */
    .mysubs-level-header {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    /*
     * flex: 0 0 auto is essential here: the generic ".pfs-subscription-info { flex: 1 1 16rem }"
     * sets a 16rem flex-basis meant as a WIDTH in the row layout - in the column layout it
     * became a 16rem HEIGHT and blew the header up to a tall, mostly empty block.
     */
    .mysubs-level-header .pfs-subscription-info {
        flex: 0 0 auto;
        margin-top: .5em;
        border-top: 1px solid rgba(255, 255, 255, .5);
        padding-top: .5em;
        align-self: stretch;
        text-align: left;
    }

    .mysubs-level-header > h3 {
        flex-grow: 0;
    }

    /*
     * The renew / upgrade boxes in the level card body are Bootstrap .row > .col columns.
     * .col keeps them side by side at every width; on phones they stack instead.
     */
    #pfs .pfs-subscription-level-renew-container.row > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =========================================================================
 * Standing information below the page content
 *
 * Two blocks: the payment/reseller information under the level list, and the EU VAT guidance
 * under a single level. Both are reference material rather than part of the purchase flow, so
 * they are set quieter than the page above them - smaller type, muted colour - and separated
 * from it by a rule the templates emit as <hr class="pfs-notice-divider">.
 *
 * They deliberately do not use the .alert-info look: an alert reads as "something happened",
 * while these are permanent fixtures of the page.
 * ========================================================================= */
#pfs .pfs-notice-divider {
    margin: 2.5rem 0 1.5rem;
    border: 0;
    border-top: 1px solid var(--pfs-color-hairline);
    opacity: 1;
}

#pfs .pfs-notice {
    font-size: .9rem;
    line-height: 1.6;
    color: #555555;
}

#pfs .pfs-notice-head {
    margin: 0 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--pfs-color-heading-rule);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pfs-color-primary);
}

#pfs .pfs-notice p {
    margin-bottom: .75rem;
}

#pfs .pfs-notice p:last-child {
    margin-bottom: 0;
}

#pfs .pfs-notice a {
    color: var(--pfs-color-primary);
    text-decoration: underline;
}

#pfs .pfs-notice a:hover {
    color: var(--pfs-color-primary-hover);
}

/*
 * The dagger paragraph explains the marker used up in the price tiles, so it is set apart as a
 * footnote: smaller, indented by the marker's own width so the superscript hangs in the margin.
 */
#pfs #pfs-automatic-discount {
    font-size: .85em;
    padding-left: 1em;
    text-indent: -1em;
}

/*
 * The price footnotes at the very bottom of both pages.
 *
 * Every one of them qualifies the asterisk shown next to the prices, so the asterisk is set
 * once, in its own column, and all the paragraphs hang under it - the same relationship a
 * footnote marker has to its footnote. The box is drawn like the VAT sections above so the two
 * read as the same kind of aside.
 */
#pfs .pfs-priceinfo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .5rem;
    align-items: start;
    border: 1px solid var(--pfs-color-hairline);
    border-radius: var(--pfs-radius);
    background-color: var(--pfs-color-tile-body);
    padding: .6rem .9rem;
    color: #555555;
}

#pfs .pfs-priceinfo-marker {
    font-weight: 600;
    color: var(--pfs-color-primary);
    /* Bootstrap sets .form-text one step smaller, so the marker is matched to it by hand */
    font-size: .875em;
    line-height: 1.5;
}

#pfs .pfs-priceinfo-body > .form-text {
    margin-top: 0;
    margin-bottom: .5rem;
}

#pfs .pfs-priceinfo-body > .form-text:last-child {
    margin-bottom: 0;
}

/* --- The VAT block's collapsibles ---------------------------------------- */
#pfs .pfs-vat-sections {
    display: grid;
    gap: .5rem;
}

#pfs .pfs-vat-section {
    border: 1px solid var(--pfs-color-hairline);
    border-radius: var(--pfs-radius);
    background-color: var(--pfs-color-tile-body);
    padding: .6rem .9rem;
}

#pfs .pfs-vat-section > summary {
    cursor: pointer;
    list-style: none;
    /* The default triangle sits too low next to the bold summary text, so it is redrawn below */
    display: flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--pfs-color-primary);
}

#pfs .pfs-vat-section > summary::-webkit-details-marker {
    display: none;
}

#pfs .pfs-vat-section > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: .35em solid transparent;
    border-bottom: .35em solid transparent;
    border-left: .45em solid currentColor;
    transition: transform .15s ease-in-out;
}

#pfs .pfs-vat-section[open] > summary::before {
    transform: rotate(90deg);
}

#pfs .pfs-vat-section[open] > summary {
    margin-bottom: .5rem;
}

#pfs .pfs-vat-section > summary:hover {
    color: var(--pfs-color-primary-hover);
}

#pfs .pfs-vat-section p {
    margin-bottom: .5rem;
}

#pfs .pfs-vat-section p:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    #pfs .pfs-notice {
        font-size: .85rem;
    }

    #pfs .pfs-notice-divider {
        margin: 1.75rem 0 1.25rem;
    }
}

/* =========================================================================
 * Payment method icon font
 * ========================================================================= */
@font-face {
    font-family: "PsyFrame-Subscriptions-Payment-Methods";
    src: url("../fonts/PsyFrame-Subscriptions-Payment-Methods.eot");
    src: url("../fonts/PsyFrame-Subscriptions-Payment-Methods.eot#iefix") format("embedded-opentype"),
    url("../fonts/PsyFrame-Subscriptions-Payment-Methods.ttf") format("truetype"),
    url("../fonts/PsyFrame-Subscriptions-Payment-Methods.woff") format("woff"),
    url("../fonts/PsyFrame-Subscriptions-Payment-Methods.svg#PsyFrame-Subscriptions-Payment-Methods") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.pfs-payment-methods,
[class^="pfpayment-icon-"],
[class*=" pfpayment-icon-"] {
    font-family: "PsyFrame-Subscriptions-Payment-Methods", sans-serif !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pfs-payment-methods {
    color: #333333;
    font-size: 18pt;
}

.pfpayment-icon-high_risk:before { content: "\e909"; }
.pfpayment-icon-recuring_issue:before { content: "\e90a"; }
.pfpayment-icon-cancel_recuring:before { content: "\e90b"; }
.pfpayment-icon-recuring:before { content: "\e90c"; }
.pfpayment-icon-state_n:before { content: "\e906"; }
.pfpayment-icon-unknown:before { content: "\e908"; }
.pfpayment-icon-state_p:before { content: "\e907"; }
.pfpayment-icon-paypal:before { content: "\e900"; }
.pfpayment-icon-visa:before { content: "\e901"; }
.pfpayment-icon-mastercard:before { content: "\e902"; }
.pfpayment-icon-amex:before { content: "\e903"; }
.pfpayment-icon-bank:before { content: "\e904"; }
.pfpayment-icon-apple:before { content: "\e905"; }
.pfpayment-icon-state_c:before { content: "\e93b"; }
.pfpayment-icon-state_x:before { content: "\ea0f"; }

/* =========================================================================
 * "My subscriptions" dashboard: make the ACTIVE subscription stand out.
 * Design adopted from the site's user.css (Design/user.css) and re-anchored on the
 * component's own ids/classes (formerly .psyframe-dashboard / #akeeba-...Tabs).
 * ========================================================================= */

/* Tab strips: greyscale for inactive tabs, gradient/red for the active one */
#pfs-dashboard-tab-itemsTabs a.nav-link,
#pfs-subscriptions-tab-subscriptionsTabs a.nav-link {
    background-image: linear-gradient(135deg, #cecece 0%, #fff 100%);
    text-decoration: none;
}

#pfs-dashboard-tab-itemsTabs a.nav-link:hover,
#pfs-subscriptions-tab-subscriptionsTabs a.nav-link:hover {
    background-image: linear-gradient(135deg, #9b9b9b 0%, #fff 100%) !important;
    color: #000;
}

#pfs-dashboard-tab-itemsTabs a.nav-link.active {
    background-image: linear-gradient(135deg, var(--cassiopeia-color-primary, #004c76) 0%, var(--cassiopeia-color-hover, #0080c0) 100%) !important;
    color: #fff;
}

/* The subscription-type tabs mark the selected type in red */
#pfs-subscriptions-tab-subscriptionsTabs a.nav-link.active {
    background-image: none !important;
    background-color: red;
    color: #fff;
}

/*
 * Level panels: colour the header by subscription state, overriding the generic blue
 * gradient of #pfs .card > .card-header above. Default (expired, canceled, disabled level)
 * is a calm grey; an ACTIVE subscription gets the green header, a bought-but-not-yet-started
 * renewal keeps the primary gradient.
 */
#pfs .card.pfs-subscription-levels-subscriptions-details > .mysubs-level-header {
    background-color: var(--pfs-color-panel-neutral);
    background-image: none;
    color: inherit;
}

#pfs .card.pfs-mysubs-level--active > .mysubs-level-header {
    background-color: var(--pfs-color-green);
    background-image: none;
    color: #fff;
}

#pfs .card.pfs-mysubs-level--waiting > .mysubs-level-header {
    background-color: var(--pfs-color-primary);
    background-image: linear-gradient(135deg, var(--pfs-color-primary) 0%, var(--pfs-color-primary-hover) 100%);
    color: #fff;
}

/* =========================================================================
 * Notice boxes (pfs-note) - successors of the FEF-era hint panels and warning
 * blocks (design carried over from the site's user.css). Three variants:
 *   --note     neutral hint: light grey ground, orange info icon
 *   --warning  amber warning block (border #f0ad4e on #fdf5e9)
 *   --info     blue information block (note tokens)
 * ========================================================================= */
#pfs .pfs-note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--pfs-color-hairline);
    border-radius: .25rem;
    background: #f3f3f3;
}

#pfs .pfs-note > .fas {
    flex: 0 0 auto;
    font-size: 1.75em;
    line-height: 1;
    margin-top: .05em;
    color: var(--pfs-color-orange);
}

#pfs .pfs-note > div {
    flex: 1 1 auto;
    align-self: center;
}

#pfs .pfs-note--warning {
    border-color: #f0ad4e;
    background: #fdf5e9;
}

#pfs .pfs-note--warning > .fas {
    color: #f0ad4e;
}

#pfs .pfs-note--info {
    border-color: var(--pfs-color-note-border);
    background: var(--pfs-color-note-bg);
}

#pfs .pfs-note--info > .fas {
    color: var(--pfs-color-note-fg);
}

/* Collapsible note: an "Information" button (icon, label, chevron); the text sits in a
 * [hidden] body below it and is toggled by media/js/notes.js. */
#pfs .pfs-note--collapsible {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

#pfs .pfs-note__toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    margin: 0;
    padding: .55rem 1rem;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

#pfs .pfs-note__toggle:hover,
#pfs .pfs-note__toggle:focus-visible {
    background: rgba(0, 0, 0, .05);
}

#pfs .pfs-note__toggle:focus-visible {
    outline: 2px solid var(--pfs-color-orange);
    outline-offset: -2px;
}

#pfs .pfs-note__toggle > .fas:first-child {
    flex: 0 0 auto;
    font-size: 1.5em;
    line-height: 1;
    color: var(--pfs-color-orange);
}

#pfs .pfs-note__label {
    flex: 1 1 auto;
}

#pfs .pfs-note__chevron {
    flex: 0 0 auto;
    font-size: .9em;
    color: var(--pfs-color-orange);
    transition: transform .2s ease;
}

#pfs .pfs-note__toggle[aria-expanded="true"] .pfs-note__chevron {
    transform: rotate(180deg);
}

#pfs .pfs-note__body {
    padding: .25rem 1rem .75rem 1rem;
}

#pfs .pfs-note__body[hidden] {
    display: none;
}

/* =========================================================================
 * Cancel button for the Paddle overlay checkout: a red "X" fixed to the top right corner
 * of the viewport, appended to <body> by level/paddlejs.php while the overlay is open.
 * Clicking it calls Paddle.Checkout.close(), which ends the payment process.
 * ========================================================================= */
.pfs-checkout-close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2147483647;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.pfs-checkout-close:hover,
.pfs-checkout-close:focus-visible {
    background: #bb2d3b;
    outline: none;
}