/* Overrides for the Alaric booking widget (main/part/booking_widget.blade.php).
   Loaded after the vendor sheets so it wins without !important where possible;
   the vendor sets its blue with plain declarations, so the brand gold needs it. */

/* The snippet's gold is #BF9F62, a lighter tone than the site's own #cc9933
   (style.css .btn_1, which is what the BOOK NOW button directly above the hero
   uses). Side by side in the same viewport the lighter one read as a disabled
   button, so the CTA takes the site gold and the site's 600 weight. */
.calcal form .box input[type="submit"],
.m-calcal .btn-bottom {
    background-color: #cc9933 !important;
    border-color: #cc9933 !important;
    font-weight: 600 !important;
}

.date-picker-wrapper .first-date-selected,
.date-picker-wrapper .last-date-selected {
    background-color: #cc9933 !important;
    color: #fff !important;
}

.date-picker-wrapper .month-wrapper table .day.checked {
    background-color: #cc9933 !important;
}

/* The vendor snippet pins this at width:900px. The hero is centred text, and
   between 481px (where the vendor sheet switches to the mobile widget) and 900px
   a fixed width is wider than the viewport, which gave the homepage a horizontal
   scrollbar. */
.containerrr {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    text-align: left;
}

/* .hero centres everything; the widget's own labels and values are left-aligned
   fields, not headline copy. */
.m-calcal {
    text-align: left;
}

/* Between 481px and ~820px the four boxes in one flex row are too narrow to read
   -- "Check Availability" wraps mid-word and the promo input collapses. Stack the
   date/guest/promo boxes and let the submit run full width. */
@media (max-width: 820px) {
    .calcal form,
    .calcal form .bx1 {
        flex-wrap: wrap;
    }

    .calcal form .box {
        flex: 1 1 100%;
    }

    .calcal .separated {
        display: none;
    }
}

/* The guest popup is absolutely positioned with no z-index, so the promo box --
   a later position:relative sibling -- painted on top of it and swallowed the
   clicks on the +/- counters. */
.calcal .modal-guest,
.calcal .modal-promocode {
    z-index: 10;
}

/* The widget ships its trigger as a second fixed bar across the bottom of the
   screen, where the site already has its own (.mobile_cta_bar in
   main/part/nav.blade.php: BOOK NOW + WhatsApp, z-index 1001). Two stacked bars
   is not a layout, so this one is pulled back into the flow and sits in the hero
   under the tagline -- the place the desktop widget occupies anyway. */
.m-calcal .floating-btn {
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
}

.m-calcal .floating-btn .btn-bottom {
    display: block;
    max-width: 320px;
    margin-inline: auto;
    padding: 14px 10px;
    font-size: 14px;
}

/*============================================================================================*/
/* Text colour                                                                                */
/*============================================================================================*/

/* style.css sets `.hero { color: #fff }` for the headline over the dark video, and
   the widget sits inside that hero. The vendor sheet paints the card white but
   never states a text colour, so every label, date and guest count inherited white
   and the whole widget read as an empty white bar. Same story inside the mobile
   modal, which is a white sheet on its own. */
.calcal,
.m-calcal .content-modal {
    color: #212529;
}

/* The field labels ("Checkin - Checkout", "Guests", "Promo code") are secondary to
   the values under them, so they get the muted grey rather than the same near-black. */
.calcal form .box > p.mb-8,
.m-calcal .box-border > p {
    color: #6c757d;
}

/* The calendar is appended into .calcal on desktop but into the modal on mobile;
   both need the dark text, and the muted days need to stay visibly muted. */
.date-picker-wrapper {
    color: #212529;
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
    color: #212529;
}

.date-picker-wrapper .month-wrapper table .day.invalid,
.date-picker-wrapper .month-wrapper table .day.nextMonth,
.date-picker-wrapper .month-wrapper table .day.lastMonth {
    color: #868e96;
}

/* Selected days sit on the brand gold, so they keep white text (set with the gold
   above); the range between them is a pale tint and must not. */
.date-picker-wrapper .month-wrapper table .day.checked {
    color: #fff !important;
}

/* The promo input is transparent over the white card; its placeholder inherited
   white too. */
.calcal .promocode::placeholder,
.m-calcal .promocode::placeholder {
    color: #6c757d;
    opacity: 1;
}

.calcal .promocode,
.m-calcal .promocode {
    color: #212529;
}