/* ===========================================================================================
   Check-in flow: the Next (BmyGuest) theme.

   Linked by Views/Shared/_LayoutLogin.cshtml (and the admin preview frame,
   Views/Next/Locations/Partials/_CustomerHtmlPreview.cshtml) for a location in Next mode, that is
   every location that has no custom CSS of its own and never chose otherwise, plus every location
   that switched. A Classic location never loads this file, so everything a customer built against
   assets/modern/css/style.css renders exactly as before. That file is still not to be changed (see
   the checkin-brand-css skill); this one sits after it and after the layout's own inline rules, so at
   equal specificity it wins on source order. #main is the page root and an id, so most rules carry
   it to outrank the theme.

   EVERYTHING A CUSTOMER MAY CHANGE IS A VARIABLE. The :root block below is the theme's defaults; a
   location's design (the "Check-in design" section of the location settings page, and the setup
   guide's "Make it yours" step) is a <style id="ci-tokens"> block after this file that re-declares
   only the variables that differ, generated by BMyGuest.Core's CheckInDesignCss from typed values. A
   location's extra CSS comes after that again. So a customer's CSS that overrides a --ci-* variable
   survives any rewrite of the rules that read it; the variable names are a contract.

   The Next UI is a LIGHT interface: a #F4F7FA page, white surfaces, slate text, a dark sidebar.
   Tokens from assets/next/css/app.css and the rendered Next pages:
     page          #F4F7FA          ink        #0b1219
     surface       #fff             secondary  #5E6E82
     primary       #2C3E50          hover      #3b5782
     tertiary      #dfeeff          active     #E5ECF4
     radius        0.8rem  (pills 1.5rem)      button weight "wght" 530
   The warm accent is the pink end of the Next host gradient, rgb(213,151,156), used only as a
   faint wash in the backdrop.
   =========================================================================================== */

:root {
    /* Colours */
    --ci-primary: #2C3E50;                    /* brand colour 1: buttons, links, focus, checked states */
    --ci-primary-rgb: 44, 62, 80;
    --ci-primary-hover: #3b5782;
    --ci-primary-active: #1f2d3b;
    --ci-primary-ink: #fff;                   /* text on the primary colour */
    /* --ci-primary-hover-ink (the text on a hovered or pressed button) is only declared by a location that chose its
       own hover colour: --ci-primary-ink applies otherwise. */
    --ci-secondary: #dfeeff;                  /* brand colour 2: the accent */
    /* --ci-secondary-fill is only declared when brand colour 2 is too dark to fill the outline button's pressed
       state: --ci-secondary applies otherwise. */
    --ci-accent-soft: #E5ECF4;                /* icon circles, disabled fill */
    --ci-page: #F4F7FA;
    --ci-page-rgb: 244, 247, 250;
    --ci-surface: #fff;
    --ci-ink: #0b1219;
    --ci-muted: #5E6E82;                      /* paragraphs, labels: readable on page and surface */
    --ci-subtle: #7B8797;                     /* hints, locked fields, the disabled button's label */
    --ci-placeholder: #9AA5B1;
    --ci-border: rgba(44, 62, 80, .16);
    --ci-focus-ring: rgba(44, 62, 80, .12);
    /* Backdrop */
    --ci-backdrop:
        radial-gradient(70% 55% at 6% 0%,   rgba(207, 227, 251, .95) 0%, rgba(207, 227, 251, 0) 60%),
        radial-gradient(60% 50% at 100% 8%, rgba(213, 151, 156, .30) 0%, rgba(213, 151, 156, 0) 60%),
        radial-gradient(80% 60% at 50% 110%, rgba(229, 236, 244, 1)   0%, rgba(229, 236, 244, 0) 65%),
        linear-gradient(180deg, #F7F9FC 0%, #F1F4F8 100%);
    /* --ci-photo-opacity and --ci-photo-blur are only declared by a location that set them: with a
       background photo the layout's own --bs-opacity-strength and --bs-blur-strength apply otherwise. */
    /* Shape */
    --ci-radius-card: 1.35rem;
    --ci-radius-input: 0.9rem;
    --ci-radius-button: 1.5rem;
    --ci-radius-button-lg: 1.75rem;           /* the tall "Check in" button; a pill at any height */
    /* Depth */
    --ci-shadow-card:
        0 1px 2px rgba(11, 18, 25, .04),
        0 10px 30px rgba(44, 62, 80, .10);
    --ci-shadow-card-hover:
        0 2px 4px rgba(11, 18, 25, .05),
        0 18px 40px rgba(44, 62, 80, .16);
    /* Type. --ci-font and --ci-heading-font are only declared by a location that chose a family: the
       check-in stylesheet's Neue Montreal applies otherwise, and the headings follow --ci-font unless
       --ci-heading-font is set. The weight is given twice: as the axis of a variable font (Neue Montreal,
       Editorial Old), and as font-weight for a family with separate cuts (Palatino, Georgia), which
       ignores the axis. With Neue Montreal's 1 to 999 range the font-weight changes nothing. */
    --ci-heading-weight: 660;
    --ci-heading-font-weight: 700;
    --ci-heading-letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------------------------
   1. Backdrop
   -------------------------------------------------------------------------------------------
   The theme's body has background-color: var(--bs-primary). Because <html> has no background, that
   colour is PROPAGATED TO THE CANVAS, which is what lets the fixed .background (z -2) and
   .background-image (z -1) layers paint above it. So: recolour body (still propagated, still
   behind everything), never html - a root background stops the propagation, body then paints as
   an in-flow box and covers both layers.

   With no location photo the layout adds a separate <style> AFTER this blob:
       .background-image { background-color: #2980B9 }
   which is 0,1,0 and later, so it needs 0,2,0 to clear. A real photo added later still shows on
   top of the gradient and keeps its designed blur, unless the location tones it. */

body {
    background-color: var(--ci-page);
}

.background {
    background-color: var(--ci-page);
    background-image: var(--ci-backdrop);
    background-repeat: no-repeat;
}

.background-image.background-image {
    background-color: transparent;
    opacity: var(--ci-photo-opacity, var(--bs-opacity-strength));
    filter: blur(var(--ci-photo-blur, var(--bs-blur-strength)));
}

/* The layout fades the photo in (.background-image.animated, keyframes image_blur) towards --bs-blur-strength and
   --bs-opacity-strength, then drops to the rule above: a location's 2px blur showed 20px for three seconds and then
   snapped sharp. These keyframes name only the start, so the fade ends on the location's own values. */
.background-image.background-image.animated {
    animation-name: ci-photo-in;
}

@keyframes ci-photo-in {
    from {
        filter: blur(1px);
        opacity: .8;
    }
}

#main {
    font-family: var(--ci-font, var(--bs-body-font-family));
}

/* -------------------------------------------------------------------------------------------
   2. Logos
   -------------------------------------------------------------------------------------------
   The layout's header falls back to the WHITE logo, invisible on a light page; the visitor type
   page's phone-width block falls back to the dark one, which is right here. Swap the header's
   default asset for the dark one. Only the default file is matched: a location's own uploaded
   logo has a different path and is left alone. */

img[src$="/logo_rectangle_white.png"] {
    content: url("/assets/media/logos/logo_rectangle.png");
}

/* -------------------------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------------------------- */

#main h1, #main h2, #main h3, #main h4, #main h5,
#main p, #main label, #main .btn, #main .form-check-label {
    text-shadow: none;
}

#main h1, #main h2, #main h3, #main h4 {
    color: var(--ci-ink);
    letter-spacing: var(--ci-heading-letter-spacing);
    font-variation-settings: "wght" var(--ci-heading-weight);
    font-weight: var(--ci-heading-font-weight);
}

/* The check-in stylesheet gives every h1-h6 its own --bs-headline-font-family, so without these the
   headings kept Neue Montreal whatever --ci-font said. The accordion headers on the checked-in page are
   rows rather than headings: they take the text font, as the h5 card titles and group names do. */
#main h1, #main h2:not(.accordion-header), #main h3, #main h4 {
    font-family: var(--ci-heading-font, var(--ci-font, var(--bs-headline-font-family)));
}

#main h5, #main h6, #main .accordion-header {
    font-family: var(--ci-font, var(--bs-headline-font-family));
}

#main h3,
.select-visitor-type-headline {
    font-size: clamp(1.75rem, 2.4vw, 2.4rem);
    line-height: 1.12;
    margin-bottom: .55rem;
}

#main p,
.select-visitor-type-description {
    color: var(--ci-muted);
    font-variation-settings: "wght" 430;
}

.select-visitor-type-description {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.select-visitor-type-group-headline {
    color: var(--ci-ink);
    font-variation-settings: "wght" 580;
}

#main .text-muted,
#main .form-text {
    color: var(--ci-subtle) !important;
}

/* -------------------------------------------------------------------------------------------
   4. Visitor type cards
   -------------------------------------------------------------------------------------------
   The Next card: white, rounded, soft layered shadow, and the icon in a tinted circle the way
   the setup guide draws its step icons. The theme has .card { border: none }, so the border is
   additive. */

.select-visitor-type-page .card {
    background: var(--ci-surface);
    border: 1px solid rgba(var(--ci-primary-rgb), .08);
    border-radius: var(--ci-radius-card);
    box-shadow: var(--ci-shadow-card);
    transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
    overflow: hidden;
    margin-bottom: 1.25rem !important;
}

.select-visitor-type-page .card.clickable:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--ci-primary-rgb), .30);
    box-shadow: var(--ci-shadow-card-hover);
}

.select-visitor-type-page .card.clickable:active {
    transform: translateY(-1px);
}

.select-visitor-type-page .card-body {
    padding: 1.6rem 1.1rem 1.5rem !important;
}

/* The icon: the partial renders <i class="... fa-fw fa-3x fa-light mb-2">. Sizing overrides fa-3x
   (3em) and fa-fw (1.25em wide) so the glyph sits centred in a 4.5rem circle.
   #main IS .select-visitor-type-page (one element), so the two are written as a compound selector;
   "#main .select-visitor-type-page" would look for a descendant and match nothing. */
#main.select-visitor-type-page .card-body i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem !important;
    border-radius: 50%;
    background: var(--ci-accent-soft);
    color: var(--ci-primary);
    font-size: 1.85rem;
    line-height: 1;
}

#main.select-visitor-type-page .card-title {
    color: var(--ci-ink);
    font-size: 1.15rem;
    font-variation-settings: "wght" 620;
    letter-spacing: -0.01em;
    margin-bottom: .3rem;
}

#main.select-visitor-type-page .card-body p {
    color: var(--ci-muted);
    font-size: .9rem;
    line-height: 1.4;
    margin-bottom: 0;
    opacity: 1;
}

/* -------------------------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------------------------
   Straight from Next's .btn-dark-blue. The theme's .btn:disabled { opacity: .5 } is overridden
   to 1 with explicit muted colours instead: half-opacity over a translucent fill is exactly how
   the "Check in" label disappeared on the details step. */

#main .btn {
    border-radius: var(--ci-radius-button);
    font-variation-settings: "wght" 530;
    letter-spacing: 0;
    transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out,
                transform .15s ease-out, border-color .15s ease-out;
}

#main .btn-primary,
#main #checkOutButton {
    --bs-btn-bg: var(--ci-primary);
    --bs-btn-border-color: var(--ci-primary);
    --bs-btn-color: var(--ci-primary-ink);
    --bs-btn-hover-bg: var(--ci-primary-hover);
    --bs-btn-hover-border-color: var(--ci-primary-hover);
    --bs-btn-hover-color: var(--ci-primary-hover-ink, var(--ci-primary-ink));
    --bs-btn-active-bg: var(--ci-primary-active);
    --bs-btn-active-border-color: var(--ci-primary-active);
    --bs-btn-active-color: var(--ci-primary-hover-ink, var(--ci-primary-ink));
    --bs-btn-disabled-bg: var(--ci-accent-soft);
    --bs-btn-disabled-border-color: var(--ci-accent-soft);
    --bs-btn-disabled-color: var(--ci-subtle);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 6px 16px rgba(var(--ci-primary-rgb), .26);
}

#main .btn-primary.btn-login {
    height: 3.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ci-radius-button-lg);
}

#main .btn-primary:hover,
#main #checkOutButton:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 10px 22px rgba(var(--ci-primary-rgb), .30);
}

#main .btn-primary:disabled,
#main .btn-primary.disabled,
#main fieldset:disabled .btn-primary {
    opacity: 1;
    box-shadow: none;
    transform: none;
}

/* "Back to overview" is .btn-info in the markup, a teal chip. Rendered as Next's outline pill. */
#main .btn-info {
    --bs-btn-bg: var(--ci-surface);
    --bs-btn-border-color: rgba(var(--ci-primary-rgb), .18);
    --bs-btn-color: var(--ci-primary);
    --bs-btn-hover-bg: var(--ci-accent-soft);
    --bs-btn-hover-border-color: rgba(var(--ci-primary-rgb), .28);
    --bs-btn-hover-color: var(--ci-primary);
    --bs-btn-active-bg: var(--ci-secondary-fill, var(--ci-secondary));
    --bs-btn-active-border-color: rgba(var(--ci-primary-rgb), .28);
    --bs-btn-active-color: var(--ci-primary);
    border-width: 1px;
    padding: .5rem 1rem;
    box-shadow: 0 1px 2px rgba(11, 18, 25, .05);
}

#main .btn-alpha,
#main .btn-outline-light {
    --bs-btn-color: var(--ci-primary);
    --bs-btn-border-color: rgba(var(--ci-primary-rgb), .22);
    --bs-btn-hover-bg: var(--ci-accent-soft);
    --bs-btn-hover-color: var(--ci-primary);
    --bs-btn-hover-border-color: rgba(var(--ci-primary-rgb), .3);
    border-radius: var(--ci-radius-button);
}

/* -------------------------------------------------------------------------------------------
   6. Inputs
   -------------------------------------------------------------------------------------------
   The theme stacks floating-label fields: every .form-floating > .form-control is square, and only
   .first rounds the top and .last the bottom, so a name + phone pair reads as ONE box (a field that
   stands alone carries both classes). The phone widget wraps its input in .iti, so the rules match
   descendants, not just direct children. */

#main .form-floating,
#main .form-control,
#main .form-select,
#main .input-group {
    --bs-border-radius: var(--ci-radius-input);
    --bs-border-radius-lg: var(--ci-radius-input);
    --bs-border-radius-sm: var(--ci-radius-input);
}

#main .form-control,
#main .form-select {
    border: 1px solid var(--ci-border);
    background-color: var(--ci-surface);
    color: var(--ci-ink);
    box-shadow: none;
}

#main .form-control.shadow,
#main .form-select.shadow {
    box-shadow: none !important;
}

/* Stack geometry. */
#main .form-floating .form-control {
    border-radius: 0;
}

#main .form-floating .form-control.first {
    border-top-left-radius: var(--ci-radius-input);
    border-top-right-radius: var(--ci-radius-input);
}

#main .form-floating .form-control.last {
    border-bottom-left-radius: var(--ci-radius-input);
    border-bottom-right-radius: var(--ci-radius-input);
}

/* A field outside any floating group. */
#main .form-control:not(.form-floating *),
#main .form-select {
    border-radius: var(--ci-radius-input);
}

/* The theme's :focus carries !important, so this must too. No outer halo: in a stack it reads as
   a grey slab cut flat by the neighbour above. A 1px inset line on top of the 1px border gives a
   crisp 2px outline instead, the way Next draws a focused control. */
#main .form-control:focus,
#main .form-select:focus {
    border-color: var(--ci-primary);
    box-shadow: inset 0 0 0 1px var(--ci-primary) !important;
}

/* Lift the WRAPPER of a focused field above its stacked neighbours, so the top edge of the outline
   is not hidden under the previous field's overlap. Lifting the input itself would put it above the
   flag container that intl-tel-input lays over the phone field, and the flag disappears. */
#main .form-floating:focus-within {
    z-index: 2;
}

#main .form-floating > label {
    color: var(--ci-muted);
    font-variation-settings: "wght" 450;
}

/* Bootstrap 5.3 paints a rounded ::after behind a floated label to mask the field border, in
   --bs-body-bg, or --bs-secondary-bg when the field is disabled or read-only: the grey pill behind
   "Your email address" on the details step. The label never crosses a border here, so it goes,
   in every state. */
#main .form-floating > label::after {
    background-color: transparent !important;
}

#main .form-control::placeholder {
    color: var(--ci-placeholder);
}

/* Inside a floating label the placeholder must stay invisible: Bootstrap only needs it so
   :placeholder-shown can decide whether to float the label. Colouring it shows the label and the
   placeholder at once. A field with no label at all relies on its placeholder - the phone widget's
   input, which the theme puts in .form-floating without one - so the rule asks for a label first. */
#main .form-floating > .form-control:has(~ label)::placeholder {
    color: transparent;
}

/* The e-mail chip on the details step, from Views/Account/Partials/_RegisterUserForm.cshtml:
       <div class="input-group disabled first last">
         <div class="form-floating"> <input class="form-control first last" readonly> <label> </div>
         <span class="input-group-text"> (the "start over" arrow) </span>
       </div>
   The field is a grandchild of the group, so Bootstrap's own corner flattening has to be restated
   one level down for the field and its button to read as one control. */
#main .input-group > .form-floating:not(:last-child) .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

#main .input-group > .form-floating:not(:first-child) .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#main .input-group-text {
    background-color: var(--ci-surface);
    border: 1px solid var(--ci-border);
    border-left: none;
    color: var(--ci-primary);
    border-radius: 0 var(--ci-radius-input) var(--ci-radius-input) 0;
    padding-left: .9rem;
    padding-right: .9rem;
}

#main .upper.input-group-text {
    border-bottom-right-radius: 0;
}

#main .lower.input-group-text {
    border-top-right-radius: 0;
}

/* Read-only: the field and its button share one quiet grey, so they still read as one control. */
#main .form-control:read-only:not([type="checkbox"]),
#main .disabled .input-group-text {
    background-color: var(--ci-page);
    color: var(--ci-muted);
}

/* The theme paints the label of a .disabled group white, for the old dark backdrop. */
#main .disabled .form-floating > label,
#main .disabled label {
    color: var(--ci-subtle) !important;
    background: transparent !important;
}

/* The international phone widget: its flag dropdown sits inside the field. */
#main .iti__flag-container,
#main .iti__country-container {
    border-top-left-radius: var(--ci-radius-input);
    border-bottom-left-radius: var(--ci-radius-input);
}

#main .iti__selected-flag,
#main .iti__selected-country-primary,
#main .iti__selected-dial-code {
    color: var(--ci-primary);
}

/* Consent and terms checkboxes. */
#main .form-check-input {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: .1rem;
    border-radius: .4rem;
    border: 1px solid rgba(var(--ci-primary-rgb), .35);
    background-color: var(--ci-surface);
}

#main .form-check-input:checked {
    background-color: var(--ci-primary);
    border-color: var(--ci-primary);
}

#main .form-check-input:focus {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 .2rem var(--ci-focus-ring);
}

#main .form-check-label {
    color: var(--ci-ink);
    padding-left: .25rem;
}

#main .form-check-label a,
#main .form-check-label i {
    color: var(--ci-primary);
}

/* The "open the terms" icon next to the consent checkbox (_RegisterUserForm.cshtml:101) is written
   with an inline style="color:white" for the old dark backdrop, so only !important reaches it. */
#main .form-check ~ a > i,
#main a > i[style*="color:white"],
#main a > i[style*="color: white"] {
    color: var(--ci-primary) !important;
    font-size: .85em;
}

#main .text-danger {
    color: #dc3545 !important;
}

/* -------------------------------------------------------------------------------------------
   7. Footer chrome and the language flag
   ------------------------------------------------------------------------------------------- */

#main .btn-footer {
    color: var(--ci-muted);
    background: transparent;
    border: 0;
    font-variation-settings: "wght" 450;
    box-shadow: none;
}

#main .btn-footer:hover {
    color: var(--ci-ink);
    background: rgba(var(--ci-primary-rgb), .06);
}

#main .btn-footer img {
    opacity: .7;
}

/* The links outside #main's column (admin / host login) are plain anchors in the layout. */
a:not(.btn):not(.card):not([class*="select2"]) {
    color: var(--ci-primary);
}

/* -------------------------------------------------------------------------------------------
   8. Widgets the flow renders from the bundle, not from Bootstrap
   -------------------------------------------------------------------------------------------
   Only visible mid-flow: the host picker (Select2), the confirm dialog (SweetAlert2), the submit
   overlay, the kiosk countdown. */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--ci-radius-input);
    border: 1px solid var(--ci-border);
    background: var(--ci-surface);
    min-height: 3.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ci-ink);
    line-height: 3.4rem;
    padding-left: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 3.4rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 .2rem var(--ci-focus-ring);
}

.select2-dropdown {
    border-radius: var(--ci-radius-input);
    border: 1px solid rgba(var(--ci-primary-rgb), .12);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(var(--ci-primary-rgb), .16);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ci-primary);
    color: var(--ci-primary-ink);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: .6rem;
    border: 1px solid var(--ci-border);
}

.host-circle {
    background-color: var(--ci-accent-soft);
    color: var(--ci-primary);
}

.swal2-popup {
    border-radius: var(--ci-radius-card);
    font-family: var(--ci-font, "Neue Montreal", "Helvetica Neue", system-ui, sans-serif);
    color: var(--ci-ink);
}

.swal2-title {
    font-family: var(--ci-heading-font, var(--ci-font, "Neue Montreal", "Helvetica Neue", system-ui, sans-serif));
}

.swal2-styled.swal2-confirm {
    background-color: var(--ci-primary) !important;
    color: var(--ci-primary-ink) !important;
    border-radius: var(--ci-radius-button) !important;
    font-variation-settings: "wght" 530;
}

.swal2-styled.swal2-cancel {
    border-radius: var(--ci-radius-button) !important;
    font-variation-settings: "wght" 530;
}

#checkin-loader-overlay {
    background: rgba(var(--ci-page-rgb), .78);
    backdrop-filter: blur(3px);
}

/* customModern paints the overlay's text and spinner dots white, for its dark slate backdrop. On the light page
   colour above they vanished: white on white while the check-in posts. */
#checkin-loader-overlay .loader-content {
    color: var(--ci-ink);
}

#checkin-loader-overlay .sk-chase-dot:before {
    background-color: var(--ci-primary);
}

/* The kiosk inactivity countdown, a 5px bar pinned to the bottom that shrinks as the session
   times out. Kept, in the primary colour, so it reads as part of the design. */
#countdownBar {
    background-color: var(--ci-primary);
    opacity: .28;
}