/*
 * IM Series Checkout styles.
 *
 * Theme-independent: colors are the plugin's own custom properties with
 * hardcoded fallbacks, not the active theme's design tokens, so the
 * [im_series_checkout] shortcode renders consistently under any theme.
 * A theme (or child theme) may override appearance by redefining these
 * --imsc-* properties on `.imsc-checkout` or an ancestor.
 */

.imsc-checkout {
    --imsc-color-bg-accent: #f7f7f8;
    --imsc-color-border: #d9d9df;
    --imsc-color-text: #1a1a1a;
    --imsc-color-text-muted: #5c5c66;
    --imsc-color-accent: #2a5bd7;
    --imsc-color-button: #1a1a1a;
    --imsc-color-button-hover: #333333;
    --imsc-color-error: #b3261e;

    padding: 4rem 1.5rem;
    color: var(--imsc-color-text);
}

.imsc-checkout-page-notice {
    max-width: 32rem;
    margin: 0 auto 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    background-color: #fdecea;
    color: var(--imsc-color-error);
    font-size: 0.9rem;
}

.imsc-product-card {
    max-width: 32rem;
    margin: 0 auto;
    padding: 2.5rem;
    background-color: var(--imsc-color-bg-accent);
    border: solid 1px var(--imsc-color-border);
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.imsc-product-name {
    margin: 0 0 1rem;
    font-size: 1.5rem;
}

.imsc-product-description {
    margin: 0 0 1.5rem;
    color: var(--imsc-color-text-muted);
    line-height: 1.75;
}

.imsc-product-features {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.imsc-product-features li {
    padding-left: 1.25rem;
    position: relative;
    font-size: 0.95rem;
}

.imsc-product-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--imsc-color-accent);
}

.imsc-checkout-buy-button {
    display: inline-block;
    width: 100%;
    padding: 0.9rem 2rem;
    background-color: var(--imsc-color-button);
    color: #ffffff;
    border: solid 1px #000;
    border-radius: 0.375rem;
    font-size: 1.125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-sizing: border-box;
}

.imsc-checkout-buy-button:hover:not(:disabled) {
    background-color: var(--imsc-color-button-hover);
    border-color: var(--imsc-color-button-hover);
}

.imsc-checkout-buy-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.imsc-checkout-error {
    margin-top: 1rem;
    color: var(--imsc-color-error);
    font-size: 0.9rem;
}

.imsc-product-unavailable {
    margin-top: 1rem;
    color: var(--imsc-color-text-muted);
    font-size: 0.9rem;
}