/* Cyclists Hub Review box: "Compare N products" opt-in card and the same card floating in the right margin.
   Loaded after review-box.css, which defines the --chrb-* variables on .chrb-float and .chrb-cta-box.
   Rules are scoped two classes deep so they outrank theme rules like ".entry-content p" and Astra's
   global input and button styles. */

.chrb-float,
.chrb-cta-box {
    color: var(--chrb-main);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.5;
}

.chrb-float,
.chrb-cta-box,
.chrb-float *,
.chrb-float *::before,
.chrb-float *::after,
.chrb-cta-box *,
.chrb-cta-box *::before,
.chrb-cta-box *::after {
    box-sizing: border-box;
}

/* ---------- Opt-in card ---------- */

.chrb-cta-box {
    margin: 2em 0;
    padding: 20px;
    border: 1px solid var(--chrb-border);
    border-radius: var(--chrb-radius-lg);
    background: linear-gradient(180deg, var(--chrb-light) 0%, #fff 70%);
    box-shadow: var(--chrb-shadow-2);
    font-size: 16px;
}

.chrb-cta-box .chrb-cta-box-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 14px;
    border-radius: var(--chrb-radius);
    box-shadow: var(--chrb-shadow-1);
}

.chrb-cta-box .chrb-cta-box-title {
    margin: 0 0 6px;
    color: var(--chrb-main);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.chrb-cta-box .chrb-cta-box-text {
    margin: 0 0 14px;
    color: var(--chrb-main);
    font-size: 15px;
    line-height: 1.55;
}

/* Below the article: image left, text and form right; stacked on narrow screens. */
@media (min-width: 640px) {
    .chrb-cta-box--inline:has(> .chrb-cta-box-img) {
        display: grid;
        grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 22px;
    }

    .chrb-cta-box--inline:has(> .chrb-cta-box-img) > .chrb-cta-box-img {
        grid-row: 1 / -1;
        align-self: start;
        margin: 0;
    }
}

/* ---------- Form ---------- */

.chrb-cta-box .chrb-optin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
    position: relative;
}

/* Below the article: first name and email on one row (email wider) once the form column has room.
   The card is the query container, so this follows the card's width, not the screen's. */
.chrb-cta-box--inline { container-type: inline-size; }

@container (min-width: 600px) {
    .chrb-cta-box--inline .chrb-optin {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
}

.chrb-cta-box .chrb-optin input[type="text"],
.chrb-cta-box .chrb-optin input[type="email"] {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 9px 12px;
    border: 1.5px solid var(--chrb-border);
    border-radius: var(--chrb-radius);
    background: #fff;
    box-shadow: none;
    color: var(--chrb-main);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    transition: border-color .2s var(--chrb-ease), box-shadow .2s var(--chrb-ease);
}

.chrb-cta-box .chrb-optin input::placeholder { color: #8aa3b5; }

.chrb-cta-box .chrb-optin input:focus {
    border-color: var(--chrb-medium);
    box-shadow: 0 0 0 3px #247ba026;
    outline: none;
}

.chrb-cta-box .chrb-optin input[aria-invalid="true"] {
    border-color: var(--chrb-bad);
}

/* Honeypot: out of sight and out of the tab order. */
.chrb-cta-box .chrb-optin .chrb-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.chrb-cta-box .chrb-optin .chrb-optin-btn {
    grid-column: 1 / -1;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--chrb-radius);
    background: var(--chrb-cta);
    box-shadow: var(--chrb-shadow-cta);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .5px;
    text-transform: none;
    cursor: pointer;
    transition: transform .2s var(--chrb-ease), box-shadow .2s var(--chrb-ease), background-color .2s var(--chrb-ease);
}

.chrb-cta-box .chrb-optin .chrb-optin-btn:hover,
.chrb-cta-box .chrb-optin .chrb-optin-btn:focus-visible {
    background: var(--chrb-cta-dark);
    box-shadow: var(--chrb-shadow-cta-hover);
    color: #fff;
    transform: translateY(-1px);
}

.chrb-cta-box .chrb-optin .chrb-optin-btn[disabled] {
    opacity: .7;
    cursor: progress;
    transform: none;
}

.chrb-cta-box .chrb-optin .chrb-optin-error {
    grid-column: 1 / -1;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--chrb-radius);
    background: #fff0f0;
    color: #b00020;
    font-size: 14px;
}

.chrb-cta-box .chrb-optin .chrb-optin-error[hidden] { display: none; }

.chrb-cta-box .chrb-optin .chrb-optin-note {
    grid-column: 1 / -1;
    margin: 0;
    color: #5b7083;
    font-size: 12px;
}

.chrb-cta-box .chrb-optin-note a { color: inherit; }

/* Replaces the form after a successful signup. */
/* Replaces the form: pink tick, heading and where the link went, centred. Same look as the
   /ratings/ landing page's success panel. */
.chrb-cta-box .chrb-optin-success {
    margin: 0;
    padding: 4px 0 0;
    color: var(--chrb-main);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    animation: chrb-fade-up .45s var(--chrb-ease) both;
}

.chrb-cta-box .chrb-optin-tick {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    padding: 0;
    line-height: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--chrb-cta) 0%, var(--chrb-cta-dark) 100%);
    box-shadow: var(--chrb-shadow-cta);
    animation: chrb-pop .45s var(--chrb-ease) both;
}

.chrb-cta-box .chrb-optin-tick svg {
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.chrb-cta-box .chrb-optin-success .chrb-optin-success-title {
    margin: 0 0 4px;
    color: var(--chrb-main);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.chrb-cta-box .chrb-optin-success:focus { outline: none; }
.chrb-cta-box .chrb-optin-success p { margin: 0 0 6px; }
.chrb-cta-box .chrb-optin-success strong { color: var(--chrb-main); font-weight: 700; word-break: break-word; }
.chrb-cta-box .chrb-optin-success .chrb-optin-hint { margin: 0; color: #5b7083; font-size: 13px; }

@keyframes chrb-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes chrb-pop {
    0%   { opacity: 0; transform: scale(.6); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ---------- Floating panel (right margin, wide screens only) ---------- */

.chrb-float { display: none; }

/* 720px article column + 32px gap + 280px panel + 16px edge = 1376px. */
/* 660px tall: room for the whole card (image, headline, subtitle, form, ~520px) with a margin above and below. */
@media (min-width: 1380px) and (min-height: 660px) {
    .chrb-float {
        position: fixed;
        /* Vertically centred, like the table of contents on the left. */
        top: 50%;
        left: calc(50% + 392px);
        z-index: 40;
        display: block;
        width: 280px;
        opacity: 0;
        visibility: hidden;
        transform: translate(24px, -50%);
        /* Leaving: a quicker fade; visibility flips only once it has faded. */
        transition: opacity .35s ease-in, transform .35s ease-in, visibility 0s linear .35s;
    }

    /* Arriving: a short pause after the review box scrolls away, then a slow slide in from the margin. */
    .chrb-float.is-shown {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
        transition: opacity .7s var(--chrb-ease) .15s, transform .9s var(--chrb-ease) .15s, visibility 0s linear .15s;
    }

}

/* × in the card's top-right corner, sitting on the frame so it never covers the image. */
.chrb-float .chrb-float-close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--chrb-border);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--chrb-shadow-1);
    color: var(--chrb-main);
    font: 400 20px/1 Arial, sans-serif;
    cursor: pointer;
    transition: background-color .2s var(--chrb-ease), color .2s var(--chrb-ease);
}

.chrb-float .chrb-float-close:hover,
.chrb-float .chrb-float-close:focus-visible {
    background: var(--chrb-main);
    color: #fff;
}

.chrb-float .chrb-float-close:focus-visible {
    outline: 2px solid var(--chrb-sky);
    outline-offset: 2px;
}

/* Closed with the ×: the card collapses to a pill with the headline; clicking it opens the card again. */
.chrb-float .chrb-float-reopen { display: none; }

.chrb-float.is-collapsed .chrb-cta-box--panel,
.chrb-float.is-collapsed .chrb-float-close { display: none; }

.chrb-float.is-collapsed .chrb-float-reopen {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 9px 10px 9px 16px;
    border: 1px solid var(--chrb-border);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--chrb-light) 0%, #fff 100%);
    box-shadow: var(--chrb-shadow-2);
    color: var(--chrb-main);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: box-shadow .2s var(--chrb-ease), transform .2s var(--chrb-ease);
}

.chrb-float.is-collapsed .chrb-float-reopen:hover,
.chrb-float.is-collapsed .chrb-float-reopen:focus-visible {
    background: linear-gradient(180deg, var(--chrb-light) 0%, #fff 100%);
    box-shadow: var(--chrb-shadow-2), 0 0 0 2px var(--chrb-sky);
    color: var(--chrb-main);
    transform: translateY(-1px);
}

.chrb-float .chrb-float-reopen-label {
    white-space: normal;   /* the whole headline, on two lines if it needs them */
}

.chrb-float .chrb-float-reopen-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--chrb-cta);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

/* The card in the panel: same frame as below the article, sized for 280px. */
.chrb-float .chrb-cta-box--panel {
    margin: 0;
    padding: 16px;
}

.chrb-float .chrb-cta-box--panel .chrb-cta-box-img { margin-bottom: 12px; }
.chrb-float .chrb-cta-box--panel .chrb-cta-box-title { font-size: 19px; }
.chrb-float .chrb-cta-box--panel .chrb-cta-box-text { margin-bottom: 12px; font-size: 14px; }
.chrb-float .chrb-cta-box--panel .chrb-optin input[type="text"],
.chrb-float .chrb-cta-box--panel .chrb-optin input[type="email"] { min-height: 38px; padding: 7px 10px; font-size: 14px; }
.chrb-float .chrb-cta-box--panel .chrb-optin .chrb-optin-btn { min-height: 40px; font-size: 14px; }
.chrb-float .chrb-cta-box--panel .chrb-optin-success { font-size: 14px; }

/* Admin preview (Posts → CTA Boxes): the panel card in place, not floating. */
.chrb-float.chrb-float--preview {
    position: relative;
    /* Undo the floating card's placement (fixed, top 50%, left of centre + 392px) for the preview. */
    top: auto;
    left: auto;
    margin-top: 0;
    display: block;
    width: 280px;
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Reduced motion: no sliding, but still a gentle fade, so the card never pops in. */
@media (prefers-reduced-motion: reduce) {
    .chrb-cta-box * { transition: none !important; animation: none !important; }

}

/* Only the real floating card (never the admin preview), and only where it floats at all. */
@media (prefers-reduced-motion: reduce) and (min-width: 1380px) and (min-height: 660px) {
    .chrb-float:not(.chrb-float--preview) {
        transform: translateY(-50%) !important;
        transition: opacity .4s ease-in, visibility 0s linear .4s !important;
    }

    .chrb-float.is-shown:not(.chrb-float--preview) {
        transition: opacity .8s ease-out .15s, visibility 0s linear .15s !important;
    }
}