/* wwwroot/css/radzen-brand.css */
:root {
    /* Core brand */
    --rz-primary: var(--brand-blue, #005EB8);
    --rz-on-primary: #fff; /* text on primary */

    --rz-secondary: var(--brand-blue, blue);
    --rz-on-secondary: #0F2B5B;
    /* Inputs / focus */
    --rz-input-focus-border-color: var(--brand-blue, #005EB8);
    --rz-input-focus-ring-color: color-mix(in srgb, var(--brand-blue, #005EB8) 22%, transparent);
    /* Buttons (fallbacks for themes that expose these) */
    --rz-button-primary-background: var(--rz-primary);
    --rz-button-primary-border: var(--rz-primary);
    --rz-button-primary-color: var(--rz-on-primary);
    --rz-button-secondary-background: transparent;
    --rz-button-secondary-border: var(--rz-primary);
    --rz-button-secondary-color: var(--rz-primary);
}

/* Make sure Date/Time picker footer buttons use brand, even if the theme has hardcoded rules */
.rz-datepicker-popup .rz-button.rz-primary,
.rz-timepicker-popup .rz-button.rz-primary {
    background: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
    color: var(--rz-on-primary) !important;
}

.rz-datepicker-popup .rz-button.rz-secondary,
.rz-timepicker-popup .rz-button.rz-secondary {
    background: transparent !important;
    border-color: var(--rz-primary) !important;
    color: var(--rz-primary) !important;
}


/* Dialog content - tighter top padding globally */
.rz-dialog-content,
.rz-dialog-side-content {
    padding: 12px !important;
    border: none !important;
    border-top: none !important;
}

/* Modal close button - match exit-booking-button style (white circle with blue border) */
.rz-dialog-titlebar-close,
.rz-dialog-side-titlebar-close,
.rz-dialog-titlebar .rz-dialog-titlebar-close,
.rz-dialog-titlebar-icon.rz-dialog-titlebar-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: white !important;
    border: 1px solid var(--brand-blue, #005EB8) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

    .rz-dialog-titlebar-close:hover,
    .rz-dialog-side-titlebar-close:hover,
    .rz-dialog-titlebar .rz-dialog-titlebar-close:hover,
    .rz-dialog-titlebar-icon.rz-dialog-titlebar-close:hover {
        background-color: #f0f7ff !important;
        border-color: var(--brand-blue-dark, #004a93) !important;
        text-decoration: none !important;
    }

    /* Style the icon */
    .rz-dialog-titlebar-close .rzi-times,
    .rz-dialog-side-titlebar-close .rzi-times,
    .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times,
    .rz-dialog-titlebar-icon.rz-dialog-titlebar-close .rzi-times {
        color: var(--brand-blue, #005EB8) !important;
        font-size: 18px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        border-bottom: none !important;
    }

    .rz-dialog-titlebar-close:hover .rzi-times,
    .rz-dialog-side-titlebar-close:hover .rzi-times,
    .rz-dialog-titlebar .rz-dialog-titlebar-close:hover .rzi-times,
    .rz-dialog-titlebar-icon.rz-dialog-titlebar-close:hover .rzi-times {
        color: var(--brand-blue-dark, #004a93) !important;
        text-decoration: none !important;
    }

/* Remove underline/border from modal titlebar */
.rz-dialog-titlebar,
.rz-dialog-side-titlebar,
.rz-dialog .rz-dialog-titlebar,
.rz-dialog-wrapper .rz-dialog-titlebar,
.rz-dialog-title {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Center titlebar content vertically */
.rz-dialog-titlebar,
.rz-dialog-side-titlebar {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
}

.rz-dialog-title {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Exclude close button from border removal */
.rz-dialog-titlebar-icon:not(.rz-dialog-titlebar-close) {
    border: none !important;
}

.rz-dialog-titlebar::after,
.rz-dialog-side-titlebar::after,
.rz-dialog-titlebar::before,
.rz-dialog-side-titlebar::before,
.rz-dialog-title::after,
.rz-dialog-title::before {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* Target the dialog itself */
.rz-dialog {
    border: none !important;
}

    .rz-dialog > * {
        border: none !important;
    }


@media (max-width: 768px) {
    /* Force wrapper to not interfere */
    .rz-dialog-wrapper {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

        /* Dialog pinned to bottom, height based on content */
        .rz-dialog-wrapper .rz-dialog {
            position: absolute !important;
            top: auto !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            margin: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            height: fit-content !important;
            min-height: 0 !important;
            max-height: 90vh !important;
            border-radius: 16px 16px 0 0 !important;
            -webkit-animation: slideUpDialog 300ms ease-out forwards !important;
            animation: slideUpDialog 300ms ease-out forwards !important;
        }

    @-webkit-keyframes slideUpDialog {
        0% {
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    @keyframes slideUpDialog {
        0% {
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }
}