/*
 * The portal's booking form (QuickBooking module, admin theme) inside the
 * frame of the website's booking page: the website's fonts and colours
 * (--kr-red, --kr-dark and --kr-nav come from Website › Settings).
 */
:root {
    --bs-primary: var(--kr-red);
    --bs-primary-rgb: 129, 0, 0;
    --bs-link-color: var(--kr-red);
    --bs-link-hover-color: var(--kr-dark);
    --bs-body-font-family: "Poppins", sans-serif;
    --bs-body-color: #374151;
    --bs-heading-color: var(--kr-dark);
}

html, body, .main-content, .wrapper, #page_layout { background: transparent !important; }
body { font-family: "Poppins", sans-serif; color: #374151; }
.main-content.wrapper { min-height: 0; }

.kr-booking-embed { padding: 40px; }
@media (max-width: 767px) { .kr-booking-embed { padding: 12px 0; } }

/*
 * Natural heights: the admin theme stretches the page to the window
 * (height: 100%), which in the frame means "as tall as the frame" and would
 * hide the bottom of a longer step. The frame follows the form instead; inside
 * the form, the panel still fills its row (Next stays at the bottom).
 */
html, body { height: auto !important; min-height: 0 !important; }

/* narrow screens: the columns may shrink, the row of step markers scrolls instead of widening the form */
.kr-booking-embed .widget-layout > * { min-width: 0; }
.kr-booking-embed .tab-list { overflow-x: auto; }

/*
 * The form sizes its lists and tabs by the screen height (100vh). In the frame
 * 100vh is the frame's own height, which follows the form: the two would grow
 * each other without end. Here the form keeps its natural height and the
 * website's page scrolls instead.
 */
.kr-booking-embed .tab-content,
.kr-booking-embed .widget-tabs { max-height: none !important; }
/* a long list (services, doctors) still scrolls inside its card, with a fixed height */
.kr-booking-embed .card-list-data { min-height: 0 !important; max-height: 560px !important; overflow-y: auto; }
@media (max-width: 576px) { .kr-booking-embed .card-list-data { max-height: 440px !important; } }

.kr-booking-embed h1, .kr-booking-embed h2, .kr-booking-embed h3,
.kr-booking-embed h4, .kr-booking-embed h5, .kr-booking-embed h6 {
    font-family: "Montserrat", sans-serif; color: var(--kr-dark);
}

/* buttons: the website's red, rounded buttons */
.kr-booking-embed .btn-primary,
.kr-booking-embed .btn-primary:disabled {
    background-color: var(--kr-red); border-color: var(--kr-red); color: #fff;
    border-radius: 25px; font-weight: 500; letter-spacing: .5px; padding-left: 24px; padding-right: 24px;
}
.kr-booking-embed .btn-primary:hover, .kr-booking-embed .btn-primary:focus,
.kr-booking-embed .btn-primary:active { background-color: var(--kr-dark); border-color: var(--kr-dark); color: #fff; }
.kr-booking-embed .btn-outline-primary { color: var(--kr-red); border-color: var(--kr-red); border-radius: 25px; }
.kr-booking-embed .btn-outline-primary:hover { background-color: var(--kr-red); color: #fff; }

/* chosen items, steps and focus in red instead of the admin theme's blue */
.kr-booking-embed .text-primary { color: var(--kr-red) !important; }
.kr-booking-embed .bg-primary { background-color: var(--kr-red) !important; }
.kr-booking-embed .border-primary { border-color: var(--kr-red) !important; }
.kr-booking-embed .form-control:focus, .kr-booking-embed .form-select:focus {
    border-color: var(--kr-red); box-shadow: 0 0 0 .2rem rgba(129, 0, 0, .15);
}
.kr-booking-embed .form-check-input:checked { background-color: var(--kr-red); border-color: var(--kr-red); }