/*
 * BlogSafe storefront.
 * On blogsafe.org the markup also carries the site's own classes (bs-card, bs-button, bs-steps,
 * bs-contact-form) and these rules read the site's colour variables. Every var() has a neutral
 * fallback, so the shortcodes still look right on a site without blogsafe-site-core.
 */

/* Product box ---------------------------------------------------------------------------- */
.bss-product { margin: 1.5em 0; }
.bss-product-card { border: 1px solid var(--bs-border, rgba(0, 0, 0, .12)); border-radius: var(--bs-radius, 8px); padding: 1.25em 1.5em; }
.bss-product-name { margin: 0 0 .4em; }
.bss-product-desc { margin: 0 0 1em; color: var(--bs-muted, inherit); }
.bss-editions { display: flex; flex-wrap: wrap; gap: 1em; }
.bss-edition { display: flex; flex-direction: column; gap: .5em; align-items: flex-start; }
.bss-edition-label { font-size: .9em; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-muted, inherit); }
.bss-edition-label strong { text-transform: none; letter-spacing: 0; color: var(--bs-text, inherit); font-size: 1.15em; margin-left: .3em; }
.bss-buy { display: flex; flex-direction: column; gap: .35em; margin: 0; }
.bss-secure, .bss-note { font-size: .85em; color: var(--bs-muted, inherit); opacity: .9; }

/* Buttons where the site's .bs-button is not available */
.bss-button { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 1.2em; border-radius: 8px; border: 1px solid currentColor; text-decoration: none; cursor: pointer; font: inherit; font-weight: 700; background: transparent; color: inherit; }
.bss-button-primary { background: var(--bs-red, #0f62fe); border-color: var(--bs-red, #0f62fe); color: #fff; }
.bss-button-primary:hover, .bss-button-primary:focus { filter: brightness(1.08); color: #fff; }

.bss-alert { padding: .75em 1em; border-radius: 8px; border: 1px solid var(--bs-amber, #f1c21b); background: rgba(245, 166, 35, .08); }
.bss-alert-error { border-color: var(--bs-red, #da1e28); background: rgba(255, 35, 45, .07); }

/* Purchase complete / My Downloads cards -------------------------------------------------- */
.bss-card {
    margin: 0 0 24px;
    padding: 32px;
    max-width: 820px;
    border: 1px solid var(--bs-border, rgba(0, 0, 0, .12));
    border-radius: var(--bs-radius, 12px);
    background: var(--bs-panel, transparent);
    box-shadow: none;
    color: var(--bs-text, inherit);
}
.bss-card--success { border-top: 3px solid var(--bs-green, #24a148); }
.bss-card--pending { border-top: 3px solid var(--bs-amber, #f1c21b); }
.bss-card--error { border-top: 3px solid var(--bs-red, #da1e28); }
.bss-card h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; color: var(--bs-text, inherit); }
.bss-card .bs-eyebrow { margin: 0 0 6px; }
.bss-card p { line-height: 1.65; }
.bss-card__head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.bss-muted { color: var(--bs-muted, inherit); margin: 12px 0 0; }

.bss-check {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--bs-green, #24a148);
    color: var(--bs-green, #24a148);
    font-size: 22px;
    font-weight: 800;
}
.bss-spinner {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid var(--bs-border, rgba(0, 0, 0, .15));
    border-top-color: var(--bs-amber, #f1c21b);
    animation: bss-spin 1s linear infinite;
}
@keyframes bss-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bss-spinner { animation: none; } }

/* License key row */
.bss-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--bs-border, rgba(0, 0, 0, .12));
    border-radius: 8px;
    background: var(--bs-bg-soft, rgba(0, 0, 0, .03));
}
.bss-key__label { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-muted, inherit); }
.bss-key__value {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
    font-size: clamp(15px, 1.8vw, 19px);
    letter-spacing: .04em;
    color: var(--bs-green, inherit);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
    user-select: all;
}
.bss-copy { min-height: 38px; padding: 0 16px; cursor: pointer; font-family: inherit; }
.bss-copy.is-copied { border-color: var(--bs-green, #24a148); color: var(--bs-green, #24a148); }

/* The site styles every link in page content as a green underlined link; buttons stay buttons. */
.bss-card a.bs-button { text-decoration: none; }
.bss-card a.bs-button--primary, .bss-product a.bs-button--primary { color: #fff; }
.bss-card a.bs-button--secondary { color: var(--bs-text, inherit); }
.bss-card .bs-actions { margin-top: 22px; }

.bss-subhead { margin: 28px 0 0; font-size: 17px; color: var(--bs-text, inherit); }
.bss-card .bs-steps { margin-top: 10px; }
.bss-footnote { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--bs-border, rgba(0, 0, 0, .12)); font-size: 14px; color: var(--bs-muted, inherit); }
.bss-footnote a { color: var(--bs-green, inherit); }

.bss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 0; }
.bss-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-muted, inherit); }
.bss-facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; color: var(--bs-text, inherit); overflow-wrap: anywhere; }

/* Lookup form: matches the site's contact form; standalone fallback below */
.bss-form { margin-top: 22px; }
.bss-form .bss-mono { font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.bss-form .bss-mono::placeholder { text-transform: none; letter-spacing: 0; }
.bss-form { display: grid; gap: 16px; }
.bss-form label { display: grid; gap: 7px; font-weight: 600; color: var(--bs-text, inherit); }
.bss-form input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid var(--bs-border, rgba(0, 0, 0, .25));
    border-radius: 8px;
    background: var(--bs-bg-soft, #fff);
    color: var(--bs-text, inherit);
    font: inherit;
}
.bss-form input:focus { outline: 2px solid var(--bs-green, #0f62fe); outline-offset: 1px; }
.bss-form .bs-button { justify-self: start; cursor: pointer; font-family: inherit; }
.bss-status { margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--bs-red, #da1e28); border-radius: 8px; color: var(--bs-text, inherit); }
.bss-status--success { border-color: var(--bs-green, #24a148); }

@media (max-width: 650px) {
    .bss-card { padding: 22px; }
    .bss-card__head { align-items: flex-start; }
    .bss-card .bs-actions .bs-button { width: 100%; }
}