/* ==========================================================================
   Retreat Funnel — The Invitation (dates, price, cart)
   Inherits the site design system (main.css): --primary-color #33443c,
   --sfondo-color #efe9df, Quattrocento (headings) + Montserrat (body).
   Self-contained: this page loads neither retreat-waitlist.css nor retreat-reveal.css.
   ========================================================================== */

/* The inherited $head hides the page via `html.js-loading { opacity: 0 }` and relies on
   a jQuery footer script to remove the class. This standalone page loads neither, so
   force it visible (works with JS disabled too). Beats the inherited rule on specificity. */
html.js-loading {
    opacity: 1;
}

.retreat-booking {
    background-color: var(--sfondo-color);
    color: var(--paragraph-color);
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
}

.retreat-booking h1,
.retreat-booking h2,
.retreat-booking h3 {
    font-family: "Quattrocento", serif;
    color: var(--primary-color);
    margin: 0;
}

.retreat-booking section {
    padding: 96px 0;
    position: relative;
}

.bk-included,
.bk-plan {
    background-color: #e6dfd1;
}

.bk-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
    opacity: 0.75;
    margin-bottom: 1rem;
}

.bk-section-title {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.bk-text {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 660px;
    margin: 0 auto 1.25rem;
}

.bk-note {
    font-size: 0.9rem;
    font-style: italic;
    color: #6b6b6b;
    max-width: 560px;
    margin: 0 auto;
}

/* 1. HERO ------------------------------------------------------------------ */
.retreat-booking .bk-hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(51, 68, 60, 0.06) 0%, rgba(51, 68, 60, 0) 60%),
        var(--sfondo-color);
}

.bk-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.12;
    margin-bottom: 1.25rem;
}

/* The retreat has a name now, so the hero title is two registers: the name, then
   the line under it. Smaller, letter-spaced, and not bold, so "BLOOM" still reads
   as the headline and the tagline as its subtitle rather than competing with it. */
.bk-hero-tagline {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.42em;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--primary-color);
    opacity: 0.75;
}

.bk-hero-subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 2rem;
}

.bk-dates {
    font-family: "Quattrocento", serif;
    font-size: 1.15rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

/* Was 0.95rem grey — a quiet aside under the dates. Now it sits above them in the
   hierarchy, so it takes the serif and the primary colour of .bk-dates: body-grey at
   this size reads as a styling mistake rather than emphasis. Letter-spacing drops
   because the 1px was set for small text. */
.bk-countdown {
    font-family: "Quattrocento", serif;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    margin: 0.6rem 0 0.7rem;
}

.bk-spots {
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.bk-spots strong {
    font-family: "Quattrocento", serif;
    font-size: 1.35rem;
}

/* Button aligned to the site's .primary-btn */
.bk-cta,
.bk-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 0;
    border-radius: 30px;
    cursor: pointer;
    font-family: "Quattrocento", serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.3s;
}

.bk-cta::after,
.bk-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #26332d;
    transform: scale(0, 1);
    transform-origin: left;
    z-index: -1;
    transition: all 0.4s ease-out 0s;
}

.bk-cta:hover,
.bk-submit:hover {
    color: var(--white-color);
}

.bk-cta:hover::after,
.bk-submit:hover::after {
    transform: scale(1, 1);
}

.bk-submit {
    width: 100%;
    margin-top: 0.5rem;
}

.bk-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 2. WHAT'S INCLUDED ------------------------------------------------------- */
.bk-included {
    text-align: center;
}

.bk-list {
    list-style: none;
    padding: 0;
    margin: 2rem auto 0;
    max-width: 660px;
    text-align: left;
}

.bk-list li {
    position: relative;
    padding: 0.9rem 0 0.9rem 1.9rem;
    border-bottom: 1px solid rgba(51, 68, 60, 0.14);
    font-size: 1.02rem;
    line-height: 1.65;
}

.bk-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

.bk-list li:last-child {
    border-bottom: 0;
}

.bk-list strong {
    font-family: "Quattrocento", serif;
    color: var(--primary-color);
}

/* What the price does NOT cover: one muted line under the list, not a second
   bullet list — these are boundaries, not selling points, and they only need
   to be impossible to miss. */
.bk-excluded {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #6b6b6b;
    max-width: 660px;
    margin: 2rem auto 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(51, 68, 60, 0.14);
}

.bk-excluded strong {
    font-family: "Quattrocento", serif;
    color: var(--primary-color);
}

/* 3. THE PRICE ------------------------------------------------------------- */
.bk-price {
    text-align: center;
}

/* There are three of these now, not two. At minmax(260px) only two fitted the column
   and the third dropped to its own row beside a gap; 240px lets all three sit in one
   row on desktop and still stack cleanly on a phone. */
.bk-price-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.bk-price-card {
    background: #fff;
    border: 1px solid rgba(51, 68, 60, 0.14);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 30px rgba(51, 68, 60, 0.06);
}

.bk-price-card-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.72rem;
    color: #6b6b6b;
    margin-bottom: 0.6rem;
}

.bk-price-card-amount {
    font-family: "Quattrocento", serif;
    font-size: 2.6rem;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 0.8rem;
}

.bk-price-card-note {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* The gift on two full places, read where the prices are. Not .bk-note: that one is the
   grey small print about running out of beds, and this is an invitation. */
.bk-price-gift {
    max-width: 560px;
    margin: 1.4rem auto 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--primary-color);
}

/* 4. PLAN ------------------------------------------------------------------ */
.bk-plan {
    text-align: center;
}

/* 5. CART ------------------------------------------------------------------ */
.bk-cart-section {
    scroll-margin-top: 20px;
}

.bk-cart {
    background: #fff;
    border: 1px solid rgba(51, 68, 60, 0.14);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 18px 45px rgba(51, 68, 60, 0.08);
    margin-top: 1.5rem;
}

.bk-field {
    margin-bottom: 1.1rem;
}

.bk-field label,
.bk-field legend {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.4rem;
}

.bk-field-hint {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6b6b6b;
}

.bk-optional {
    font-weight: 400;
    color: #9b968c;
}

.bk-field input[type="text"],
.bk-field input[type="email"],
.bk-field input[type="tel"],
.bk-field input[type="number"],
.bk-field textarea {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(51, 68, 60, 0.35);
    border-radius: 10px;
    background: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    color: var(--paragraph-color);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.bk-field input:focus,
.bk-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(51, 68, 60, 0.12);
}

.bk-field--check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.bk-field--check label {
    margin: 0;
    font-weight: 400;
}

.bk-radio {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--paragraph-color);
    margin-bottom: 0.4rem;
    cursor: pointer;
}

.bk-radio input {
    margin: 0;
}


/* The companion caveat, hanging under its own option. Its own block with the label's
   indent: `.bk-field label` outranks `.bk-radio` on specificity, so these labels are
   display:block and a plain <br> would have dropped this line to the far left, under
   the radio button instead of under the words. The weight is restated because the same
   rule sets 600 on the whole label. */
.bk-radio-aside {
    display: block;
    padding-left: 1.5rem;
    margin-top: 0.1rem;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6b6b6b;
}

.bk-radio-aside strong {
    font-weight: 600;
    color: var(--paragraph-color);
}

/* The accommodation hint, which JS moves in between the options so it always sits under
   the one it describes. Same indent as .bk-radio-aside, for the same reason: it has to
   line up with the words, not with the radio button. The bottom margin is the gap the
   option below it would otherwise lose. */
.bk-sist-hint {
    padding-left: 1.5rem;
    margin: 0.15rem 0 0.7rem;
}

/* With JS off nothing ever fills it and it never moves, so it sits empty at the foot of
   the fieldset - where its bottom margin would still open a gap the old rule never had. */
.bk-sist-hint:empty {
    display: none;
}

/* The gift slot in the cart: one element, two states. Both are hidden with the `hidden`
   attribute, so the [hidden] guard has to come after the display rule - without it the
   note would print itself empty on every single-place cart. */
.bk-gift {
    display: block;
    margin: 0.2rem 0 1.4rem;
    padding: 0.8rem 1rem;
    border: 1px dashed rgba(51, 68, 60, 0.35);
    border-radius: 10px;
    background: rgba(51, 68, 60, 0.04);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--paragraph-color);
}

.bk-gift.is-earned {
    border-style: solid;
    border-color: var(--primary-color);
    background: rgba(51, 68, 60, 0.09);
    color: var(--primary-color);
    font-weight: 600;
}

.bk-gift[hidden] {
    display: none;
}

.bk-summary {
    border-top: 1px solid rgba(51, 68, 60, 0.14);
    margin-top: 1.4rem;
    padding-top: 1.2rem;
}

.bk-summary p {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 0.5rem;
    font-size: 0.98rem;
}

.bk-summary strong {
    font-family: "Quattrocento", serif;
    font-size: 1.2rem;
    color: var(--primary-color);
}

.bk-consent {
    font-size: 0.78rem;
    line-height: 1.5;
    color: #6b6b6b;
    margin: 0.9rem 0 0;
}

.bk-success {
    margin-top: 1rem;
    background: rgba(51, 68, 60, 0.08);
    border: 1px solid rgba(51, 68, 60, 0.25);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    color: var(--primary-color);
    font-size: 1.02rem;
}

.bk-success strong {
    font-family: "Quattrocento", serif;
}

.bk-error {
    margin-top: 0.7rem;
    color: #b00020;
    font-size: 0.9rem;
}

/* 6. FOOTER ---------------------------------------------------------------- */
.bk-footer {
    background-color: var(--primary-color);
    padding: 48px 0;
    text-align: center;
}

.bk-footer-logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 1.25rem;
}

.bk-footer-company {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 1.1rem;
}

.bk-footer-company strong {
    font-family: "Quattrocento", serif;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.bk-footer-company a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: border-color 0.2s;
}

.bk-footer-company a:hover {
    border-bottom-color: #fff;
}

.bk-footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}

.bk-footer-copy {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    margin: 0.9rem auto 0;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 767px) {
    .retreat-booking section {
        padding: 64px 0;
    }
    .retreat-booking .bk-hero {
        min-height: 88vh;
        padding: 90px 0;
    }
    .bk-cart {
        padding: 1.4rem;
    }
    .bk-cta {
        width: 100%;
    }
}