/* BA PRIVATE CLASS TIMES, 11 Nov 2026 (times.js). Uses the funnel's own tokens (funnel-complete.css :root) and the look of the
 * private note (ba-slots.css, .vbs-note): calm teal and tint, no warning colours, no red. Logical properties, so right-to-left
 * pages work. Everything is scoped to the funnel, or to the body classes that only times.js sets. */

/* The old note of ba-slots.js is replaced by the question while this add-on acts. */
body.vf-bapt-on #baPrivNote {
    display: none !important;
}

/* ------------------------------------------------------------ the question (step 4 and the summary card) */
#vamos-complete-funnel .vf-bapt-box,
#vamos-complete-funnel .vf-bapt-ask {
    margin: 0 0 20px;
    font-family: var(--vf-font-body, inherit);
}

#vamos-complete-funnel .vf-bapt-set {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

#vamos-complete-funnel .vf-bapt-set legend {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--vf-ink, #0D2424);
}

#vamos-complete-funnel .vf-bapt-lead {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--vf-ink-2, #2A4040);
}

#vamos-complete-funnel .vf-bapt-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 2px solid var(--vf-divider, #D5ECEC);
    border-radius: 8px;
    background: var(--vf-surface, #fff);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#vamos-complete-funnel .vf-bapt-opt:hover {
    border-color: var(--vf-brand, #1E7272);
}

#vamos-complete-funnel .vf-bapt-opt.is-on {
    border-color: var(--vf-brand, #1E7272);
    background: var(--vf-brand-tint, #E0F5F5);
}

#vamos-complete-funnel .vf-bapt-opt input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--vf-brand, #1E7272);
    cursor: pointer;
}

#vamos-complete-funnel .vf-bapt-opt:has(input[type="radio"]:focus-visible),
#vamos-complete-funnel .vf-bapt-opt input[type="radio"]:focus-visible {
    outline: 3px solid var(--vf-brand, #1E7272) !important;
    outline-offset: 2px !important;
}

#vamos-complete-funnel .vf-bapt-opt-body {
    display: block;
    min-width: 0;
}

#vamos-complete-funnel .vf-bapt-opt-t {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vf-ink, #0D2424);
}

#vamos-complete-funnel .vf-bapt-opt-h,
#vamos-complete-funnel .vf-bapt-opt-b {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--vf-muted, #4F6B6B);
}

#vamos-complete-funnel .vf-bapt-opt-b {
    font-weight: 600;
    color: var(--vf-brand, #1E7272);
}

/* the message when no choice is made: calm, tied to the group by aria-describedby */
#vamos-complete-funnel .vf-bapt-err {
    margin: 0 0 10px;
    padding: 10px 14px;
    background: var(--vf-brand-tint, #E0F5F5);
    border: 1px solid var(--vf-divider, #D5ECEC);
    border-inline-start: 4px solid var(--vf-brand, #1E7272);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--vf-ink, #0D2424);
}

#vamos-complete-funnel .vf-bapt-err[hidden] {
    display: none;
}

#vamos-complete-funnel .vf-bapt-set.is-invalid .vf-bapt-opt {
    border-color: var(--vf-brand, #1E7272);
}

/* ------------------------------------------------------------ notes, hint and the card for mornings only */
#vamos-complete-funnel .vf-bapt-after {
    margin: 0 0 20px;
}

#vamos-complete-funnel .vf-bapt-after:empty {
    display: none;
}

#vamos-complete-funnel .vf-bapt-note,
#vamos-complete-funnel .vf-bapt-card,
#vamos-complete-funnel .vf-bapt-hint,
#vamos-complete-funnel .vf-bapt-thanks {
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 14px 16px;
    background: var(--vf-brand-tint, #E0F5F5);
    border: 1px solid var(--vf-divider, #D5ECEC);
    border-inline-start: 4px solid var(--vf-brand, #1E7272);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--vf-ink, #0D2424);
}

#vamos-complete-funnel .vf-bapt-note p,
#vamos-complete-funnel .vf-bapt-hint p {
    margin: 0;
    font-size: 14px;
    color: var(--vf-ink, #0D2424);
}

#vamos-complete-funnel .vf-bapt-card .vf-bapt-card-t {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vf-ink, #0D2424);
}

#vamos-complete-funnel .vf-bapt-card .vf-bapt-card-b {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--vf-ink, #0D2424);
}

#vamos-complete-funnel .vf-bapt-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#vamos-complete-funnel .vf-bapt-links li {
    margin: 0;
    padding: 0;
}

#vamos-complete-funnel .vf-bapt-link {
    display: inline-block;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vf-brand, #1E7272);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

#vamos-complete-funnel .vf-bapt-link:hover {
    color: var(--vf-brand-hover, #185C5C);
}

#vamos-complete-funnel .vf-bapt-hint-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

#vamos-complete-funnel .vf-bapt-small {
    margin: 0;
    padding: 8px 14px;
    border: 2px solid var(--vf-brand, #1E7272);
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vf-brand, #1E7272);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#vamos-complete-funnel .vf-bapt-small:hover {
    background: var(--vf-brand, #1E7272);
    color: var(--vf-on-brand, #fff);
}

#vamos-complete-funnel .vf-bapt-links :focus-visible,
#vamos-complete-funnel .vf-bapt-small:focus-visible {
    outline: 3px solid var(--vf-brand, #1E7272) !important;
    outline-offset: 2px !important;
}

.vf-bapt-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

/* ------------------------------------------------------------ the summary (step 8) */
#vamos-complete-funnel .vf-bapt-sum {
    margin: 18px 0 0;
}

#vamos-complete-funnel .vf-bapt-line {
    margin: 8px auto 0;
    max-width: 560px;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    color: var(--vf-muted, #4F6B6B);
}

/* Mornings only = a request: no pay button, no phone bar, the quote button is the main button. */
body.vf-bapt-request #proceedToPaymentBtn,
body.vf-bapt-request #vfDecideBar,
body.vf-bapt-request #vfBaptSumPay,
body.vf-bapt-request #step8 .vf-sum-quote-wrap {
    display: none !important;
}

/* the live What's Next block says the booking is confirmed by e-mail; a request is not a booking */
body.vf-bapt-request #step8 .vf-sum-after {
    display: none !important;
}

/* the room funnel-decide.css keeps for the phone bar is not needed while the bar is hidden */
body.vf-bapt-request.vf-decide-bar-on {
    padding-bottom: 0 !important;
}

body.vf-bapt-request #emailQuoteBtn {
    background: var(--vf-action, #F07832);
    color: var(--vf-on-action, #0D2424);
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}

body.vf-bapt-request #emailQuoteBtn:hover {
    background: var(--vf-action-hover, #D9661F);
    color: var(--vf-on-action, #0D2424);
}

/* The Brazilian in-person page (agreement step): in the request state the page's own "Accept and continue" is hidden above, our
   send button is the main button, and the page's text link that sends the quote (#emailQuoteBtn, which our button clicks) and
   the dot beside it are hidden, so there is one way to send. "Go back and correct" and "Save or print" stay. */
body.vf-bapt-br.vf-bapt-request .vf-cpa-more #emailQuoteBtn,
body.vf-bapt-br.vf-bapt-request .vf-cpa-more > span[aria-hidden="true"] {
    display: none !important;
}

#vamos-complete-funnel .vf-bapt-send {
    font-weight: 600;
    cursor: pointer;
}

/* ------------------------------------------------------------ the pop-up after a request, and the thank-you line */
.vf-bapt-sent {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
}

.vf-bapt-wa-btn {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid var(--vf-brand, #1E7272);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vf-brand, #1E7272);
    text-decoration: none;
}

.vf-bapt-wa-btn:hover {
    background: var(--vf-brand, #1E7272);
    color: var(--vf-on-brand, #fff);
}

#vamos-complete-funnel .vf-bapt-thanks {
    margin: 0 0 16px;
}

@media (max-width: 480px) {
    #vamos-complete-funnel .vf-bapt-opt {
        padding: 12px;
        gap: 10px;
    }

    #vamos-complete-funnel .vf-bapt-set legend {
        font-size: 16px;
    }

    #vamos-complete-funnel .vf-bapt-small {
        flex: 1 1 100%;
    }
}

/* Brazilian agreement step, request state: nothing is paid, so the item "how you pay" (card text, the plan choice, the referral code,
   the place block, the cash line) is not shown. The subtitle, the intro and the closing line are swapped for request words by the script. */
body.vf-bapt-br.vf-bapt-request .vf-cpa-item[data-cpa="payment"] {
    display: none !important;
}