/*
 * The button printed under a calculator widget by a "redirect_btn" entry.
 *
 * Same button as the embed calculator (config_api,
 * resources/embed/core/calculator.css) and as the order-received page, so a
 * customer sees one Aizdevums.lv button on the product page and one at
 * checkout. Colours go through CSS variables, so a theme can override a single
 * one without losing the rest of the scheme:
 *
 *   .alvc-calc__button { --alvc-button-bg: #123456; }
 */
.alvc-calc {
    margin: 0 0 1em;
}

.alvc-calc__button {
    /*
     * The widget's iframe carries its own bottom padding, so the button is
     * pulled up to sit against the calculator rather than float below it -
     * the same offset the embed calculator uses.
     */
    --alvc-button-offset: -15px;
    --alvc-button-bg: #fff;
    --alvc-button-bg-hover: rgb(240 240 240);
    --alvc-button-fg: #000;
    --alvc-button-border: rgb(0 0 0);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    margin-top: var(--alvc-button-offset);
    padding: 8px 16px;
    border: 1px solid var(--alvc-button-border);
    border-radius: 12px;
    background-color: var(--alvc-button-bg);
    color: var(--alvc-button-fg);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.alvc-calc[data-color-scheme="black"] .alvc-calc__button {
    --alvc-button-bg: rgb(0 0 0);
    --alvc-button-bg-hover: rgb(51 51 51);
    --alvc-button-fg: #fff;
}

.alvc-calc[data-color-scheme="color"] .alvc-calc__button {
    --alvc-button-bg: rgb(155 203 235);
    --alvc-button-bg-hover: rgb(135 190 225);
    --alvc-button-fg: #000;
    --alvc-button-border: rgb(135 190 225);
}

.alvc-calc__button:hover,
.alvc-calc__button:focus-visible {
    background-color: var(--alvc-button-bg-hover);
    color: var(--alvc-button-fg);
}