/* ============================================================
   kiosk.css (MAUI Kiosk overrides)
   - Full-screen frame
   - No page scrolling
   - Content scrolls inside .white-card only
   - Big/touch friendly inputs only in kiosk
   ============================================================ */

/* Disable selection/drag except in inputs/textareas */
*:not(input):not(textarea) {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* Kiosk scrollbar width (if anything scrolls inside panels) */
::-webkit-scrollbar {
    width: 38px;
}

/* Avoid browser gestures + lock viewport */
html, body {
    touch-action: pan-y;
    height: 100%;
    width: 100%;
}

html, body, #app, .page, .kiosk {
    height: 100%;
    width: 100%;
}

body {
    overflow: hidden !important; /* never scroll the page */
}

/* Kiosk wrappers fill and never scroll */
.kiosk .content,
.kiosk .container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden !important;
}

/* Show kiosk-only UI blocks */
.kiosk .hidden-if-not-kiosk {
    display: flex !important;
}

/* ------------------------------------------------------------
   ✅ Main layout: header/footer fixed, content scrolls inside white-card
   ------------------------------------------------------------ */

/* Ensure kiosk pages have a stable height */
.kiosk,
.kiosk .container,
.kiosk .gradient-card {
    height: 100% !important;
    min-height: 0 !important;
}

    /* Main card is a column layout */
    .kiosk .gradient-card {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        margin: 0 !important;
        border-radius: 16px !important;
        min-height: 0 !important;
        height: 100% !important;
    }

    /* Topbar/title area should not shrink */
    .kiosk .kiosk-topbar,
    .kiosk .kiosk-topbar + .rz-stack,
    .kiosk .kiosk-topbar + .rz-stack-layout,
    .kiosk .kiosk-topbar + .rz-stack.rz-display-flex {
        flex: 0 0 auto;
    }

    /* Content area: scroll here (not on body) */
    .kiosk .white-card {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin-bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 26px rgba(0,0,0,0.12);
        touch-action: pan-y !important;
        overscroll-behavior: contain; /* prevents “scroll chaining” to body */
        -webkit-overflow-scrolling: touch;
    }

        .kiosk .white-card.main-stack {
            display: block !important; /* override inline-block */
        }

        .kiosk .white-card .rz-form-field,
        .kiosk .white-card .rz-form-field-content,
        .kiosk .white-card .rz-stack,
        .kiosk .white-card .rz-stack-layout {
            touch-action: pan-y !important;
        }

        .kiosk .white-card * {
            touch-action: pan-y !important;
        }

/* Radzen DatePicker popup/calendar should float above cards/overlays */
.rz-datepicker-panel,
.rz-calendar {
    z-index: 10000 !important;
}
    /* Footer stays visible */
    .kiosk .next-back-buttons {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

        /* Keyboards should sit at the bottom and not cause reflow */
        .kiosk .textkeyboard,
        .kiosk .numerickeyboard,
        .kiosk .next-back-buttons + .rz-stack,
        .kiosk .next-back-buttons + .rz-stack-layout {
            flex: 0 0 auto !important;
        }

    .kiosk .textkeyboard {
        margin-top: 40px !important;
    }

    /* Prevent Radzen inner scrolling containers from creating nested scrollbars */
    .kiosk .rz-datalist,
    .kiosk .rz-datalist-content,
    .kiosk .rz-datalist-data,
    .kiosk .rz-grid,
    .kiosk .rz-grid-table-wrapper {
        overflow: hidden !important;
        min-height: 0 !important;
    }

    /* Tighten base H2/H6 a bit for kiosk fit */
    .kiosk .rz-text-h2 {
        font-size: 2rem !important;
        line-height: 1.1 !important;
    }

    .kiosk .rz-text-h6 {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
    }

@media (max-height: 800px) {
    .kiosk .rz-text-h2 {
        font-size: 1.8rem !important;
    }

    .kiosk .rz-text-h6 {
        font-size: 1.2rem !important;
    }
}

/* ------------------------------------------------------------
   ✅ Kiosk-only BIG TOUCH form sizing
   ------------------------------------------------------------ */
.kiosk .form-fields {
    width: 100% !important;
    min-height: 62px !important;
}

.kiosk .form-fields-half {
    width: 50% !important;
}

@media (max-width: 768px) {
    .kiosk .form-fields {
        width: 100% !important;
    }
}

.kiosk .form-fields .rz-inputtext,
.kiosk .form-fields .rz-textbox,
.kiosk .form-fields .rz-spinner {
    font-size: x-large !important;
    height: fit-content !important;
}

.kiosk .form-fields .rz-radio-btn {
    font-size: x-large !important;
    height: fit-content !important;
    padding: 7px;
}

.kiosk .form-fields .rz-dropdown {
    font-size: x-large !important;
    min-height: 48px !important;
}

    .kiosk .form-fields .rz-dropdown .rz-inputtext {
        font-size: x-large !important;
        min-height: 48px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .kiosk .form-fields .rz-dropdown .rz-dropdown-trigger {
        min-height: 48px !important;
    }

/* Dropdown panel renders outside body; keep kiosk sizing global */
.kiosk .rz-dropdown-panel .rz-dropdown-item {
    font-size: x-large !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Match dropdown popup width reasonably to trigger on kiosk.
   Use a comfortable minimum, but let it shrink on small screens. */
.kiosk .rz-dropdown-panel {
    min-width: 260px;
    max-width: 90vw;
}

.kiosk .form-fields .rz-form-field-label {
    font-size: 19px !important;
    font-weight: 600;
    height: fit-content !important;
    color: black !important;
    text-align: left;
}

.kiosk .form-fields .rz-button.submit {
    background-color: dodgerblue !important;
    align-items: flex-end !important;
    font-size: large !important;
    width: max-content !important;
    height: 50px !important;
}

.kiosk .form-fields-double {
    width: 100% !important;
}

/* ------------------------------------------------------------
   ✅ Kiosk tap feel improvements
   ------------------------------------------------------------ */
.kiosk .rz-button {
    border-radius: 14px !important;
    min-height: 54px;
}

    .kiosk .rz-button:active {
        transform: scale(0.98);
    }

/* SelectBar / toggles */
.kiosk .rz-selectbar {
    border-radius: 14px !important;
    overflow: hidden;
}

    .kiosk .rz-selectbar .rz-button {
        min-height: 56px;
        font-size: 1.15rem;
    }

/* ------------------------------------------------------------
   Existing contact/insurance page structure (kept)
   ------------------------------------------------------------ */
.kiosk.contacts-page .gradient-card {
    height: 100%;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
}

.kiosk.contacts-page #contacts-header,
.kiosk.contacts-page #contacts-footer,
.kiosk #ins-header,
.kiosk #ins-footer {
    flex: 0 0 auto;
}

.kiosk.contacts-page #contacts-body,
.kiosk #ins-body {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
}

.kiosk.contacts-page #contacts-list,
.kiosk #ins-list {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.kiosk.contacts-page .rz-datalist {
    min-height: 0;
}

/* ------------------------------------------------------------
   ✅ Start Over icon button: force perfect circle
   ------------------------------------------------------------ */
.kiosk-topbar-right .rz-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

    .kiosk-topbar-right .rz-button .rzi,
    .kiosk-topbar-right .rz-button i {
        font-size: 20px !important;
        margin: 0 !important;
    }

/* ------------------------------------------------------------
   ✅ Radzen form-field “single focus box” look
   ------------------------------------------------------------ */
.kiosk .rz-form-field-content {
    background: var(--xnet-field-bg);
    border: 2px solid var(--xnet-field-border);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), var(--xnet-field-shadow);
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease, transform .08s ease;
}

    .kiosk .rz-form-field-content:hover {
        border-color: var(--xnet-field-border-strong);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 14px rgba(0,0,0,0.10);
    }

    /* prevent double focus boxes */
    .kiosk .rz-form-field-content .rz-inputtext,
    .kiosk .rz-form-field-content .rz-textbox,
    .kiosk .rz-form-field-content .rz-mask,
    .kiosk .rz-form-field-content input,
    .kiosk .rz-form-field-content textarea,
    .kiosk .rz-form-field-content select {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }

.kiosk .rz-form-field:focus-within .rz-form-field-content {
    background: #fdfefe;
    border-color: #1e90ff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75), 0 6px 18px rgba(0,0,0,0.14), var(--xnet-focus-ring);
    transform: translateY(-1px);
}

/* ============================================================
   Year Picker — Kiosk overrides
   Base styles live in app.css; these add larger touch targets
   and WebView2 touch-action fixes needed for MAUI.
   ============================================================ */

/* Slightly wider trigger area for fat-finger tapping */
.kiosk .year-picker-trigger {
    width: 54px;
}

.kiosk .year-picker-trigger-icon {
    font-size: 22px;
}

/* On kiosk the popup uses position:fixed (set inline) to escape overflow:hidden cards.
   Override position so the inline fixed value wins, keep visual polish. */
.kiosk .year-grid-popup.in-field {
    position: fixed !important;   /* must escape gradient-card overflow:hidden */
    z-index: 2100002 !important;
    border-width: 3px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Bigger tap targets for the year buttons */
.kiosk .year-grid .rz-button {
    min-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.92rem;
}

/* Avoid WebView2 pan-gesture compositor issues on touch */
.kiosk .year-picker,
.kiosk .year-picker *,
.kiosk .year-picker-trigger,
.kiosk .year-picker-trigger *,
.kiosk .year-grid-popup,
.kiosk .year-grid-popup * {
    touch-action: manipulation !important;
}

.kiosk .year-decade-btn {
    touch-action: manipulation;
}

.kiosk .white-card.year-grid-open .rz-form-field:focus-within .rz-form-field-content {
    transform: none !important;
}

/* ------------------------------------------------------------
   ✅ KioskWelcome: responsive check-in image placement
   ------------------------------------------------------------ */
.kiosk .kiosk-welcome-image {
    width: min(92vw, 680px);
    margin: 18px auto 0 auto;
}

    .kiosk .kiosk-welcome-image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

@media (max-width: 600px) {
    /* KioskWelcome only: make the language stack vertical */
    .kiosk.kiosk-welcome-page .form-fields.rz-display-flex,
    .kiosk.kiosk-welcome-page .form-fields.rz-stack,
    .kiosk.kiosk-welcome-page .form-fields.rz-stack-layout {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    /* KioskWelcome only: make buttons a comfortable mobile width */
    .kiosk.kiosk-welcome-page .form-fields .rz-button {
        width: min(90vw, 320px) !important;
    }
}

/* Default: desktop/tablet => show the "below" image */
.kiosk .kiosk-welcome-image--mobile {
    display: none;
}

.kiosk .kiosk-welcome-image--desktop {
    display: block;
}

/* Mobile => show the "above" image, hide the "below" one */
@media (max-width: 600px) {
    .kiosk .kiosk-welcome-image--mobile {
        display: block;
        width: min(80vw, 320px); /* ✅ smaller on phones */
        margin-top: 8px;
        margin-bottom: 12px;
    }

    .kiosk .kiosk-welcome-image--desktop {
        display: none;
    }
}

/* ------------------------------------------------------------
   Portal welcome (Server registration): responsive for mobile/tablet/laptop
   ------------------------------------------------------------ */
.portal-welcome-page .portal-lang-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .portal-welcome-page .portal-lang-buttons .rz-button {
        min-width: 100px !important;
    }
}

@media (max-width: 480px) {
    .portal-welcome-page .portal-lang-buttons {
        flex-direction: column;
        align-items: center;
    }
    .portal-welcome-page .portal-lang-buttons .rz-button {
        width: min(90vw, 280px) !important;
    }
}