/* Conference Booking – new booking UI. All classes are cb- prefixed so nothing else in the app is affected. */
.cb *, .cb *::before, .cb *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

.cb img {
    max-width: 100%;
    display: block
}

.cb button {
    font-family: inherit;
    cursor: pointer
}

/* Existing images are referenced from the real app's wwwroot (unchanged, nothing removed) */
.cb {
    font-family: Inter,"Segoe UI",system-ui,sans-serif;
    color: var(--ink);
    --cbf-primary: #1a1f6d;
    --primary: #1a1f6d;
    --primary-2: #2a3a8a;
    --primary-dark: #101450;
    --accent: #4f6bff;
    --accent-soft: #eef1ff;
    --ink: #1b1f3b;
    --muted: #6b7280;
    --line: #e6e9f5;
    --bg: #f4f6fd;
    --white: #fff;
    --ok: #16a34a;
    --warn: #f59e0b;
    --bad: #ef4444;
    --conf: #4f46e5;
    --disc: #0d9488;
    --r: 16px;
    --shadow: 0 20px 50px -12px rgba(26,31,109,.25);
}

/* HERO */
.cb-hero {
    max-width: 1200px;
    margin: auto;
    padding: 36px 20px 60px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 36px;
    align-items: center
}

.cb-hero__art {
   /* background: linear-gradient(160deg,#fff,var(--accent-soft));
    border-radius: 28px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);*/
    position: relative;
    /*overflow: hidden*/
}

    .cb-hero__art::before {
        content: "";
        position: absolute;
        inset: auto -60px -60px auto;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(79,107,255,.18),transparent 70%)
    }

    .cb-hero__art img {
        margin: auto;
        width: 100%;
        max-width: 560px;
        /*animation: cbfloat 6s ease-in-out infinite*/
    }

@keyframes cbfloat {
    50% {
        transform: translateY(-8px)
    }
}

.cb-card {
    background: #fff;
    /*border-radius: 28px;*/
    padding: 34px 30px;
    /*box-shadow: var(--shadow);
    border: 1px solid var(--line);*/
    text-align: center;
    position: relative
}

.cb-card__icon {
    width: 96px;
    height: 96px;
    margin: -64px auto 14px;
    background: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(26,31,109,.2);
    border: 4px solid var(--accent-soft)
}

    .cb-card__icon img {
        width: 56px
    }

.cb-badge {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    background: var(--accent-soft);
    color: var(--primary);
    font-size: .75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: .4px;
    text-transform: uppercase
}

.cb-card h1 {
    font-size: 1.9rem;
    margin: 12px 0 6px;
    color: var(--primary);
    font-weight: 800;
    line-height: 1.15
}

.cb-card p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 20px
}

.cb-rules {
    display: grid;
    gap: 10px;
    text-align: left;
    margin-bottom: 22px
}

.cb-rule {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: .86rem
}

    .cb-rule i {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: #fff;
        flex: none
    }

    .cb-rule b {
        display: block;
        font-size: .9rem
    }

    .cb-rule span {
        color: var(--muted)
    }

.cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 14px;
    padding: 15px 22px;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg,var(--primary),var(--accent));
    box-shadow: 0 12px 24px -8px rgba(79,107,255,.6);
    transition: .2s;
    width: 100%
}

    .cb-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 28px -8px rgba(79,107,255,.7)
    }

    .cb-btn:disabled {
        background: #cfd4e6;
        box-shadow: none;
        cursor: not-allowed;
        transform: none
    }

.cb-btn--ghost {
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--line);
    box-shadow: none;
    width: auto
}

    .cb-btn--ghost:hover {
        background: var(--accent-soft);
        box-shadow: none
    }

/* MODAL */
.cb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12,16,60,.55);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px
}

    .cb-overlay.open {
        display: flex;
        animation: cbfade .25s
    }

@keyframes cbfade {
    from {
        opacity: 0
    }
}

.cb-modal {
    background: #fff;
    /*border-radius: 26px;*/
    width: 100%;
    max-width: 1020px;
    max-height: 94vh;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    overflow: hidden;
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.5);
    animation: cbpop .3s cubic-bezier(.2,.9,.3,1.2)
}

@keyframes cbpop {
    from {
        transform: translateY(24px) scale(.97);
        opacity: 0
    }
}

.cb-modal__side {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
    color: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden
}

    .cb-modal__side::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        right: -100px;
        top: -100px;
        background: rgba(255,255,255,.08)
    }

.cb-side__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    z-index: 1
}

    .cb-side__logo img {
        height: 28px
    }

.cb-side__art {
    flex: 1;
    display: grid;
    place-items: center;
    z-index: 1;
    background: rgba(255,255,255,.95);
    /*border-radius: 20px;*/
    padding: 14px;
    min-height: 0
}

    .cb-side__art img {
        max-height: 300px;
        width: auto;
        transition: opacity .3s
    }

.cb-summary {
    z-index: 1;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    /*border-radius: 16px;*/
    padding: 14px;
    font-size: .85rem;
    display: grid;
    gap: 8px
}

    .cb-summary div {
        display: flex;
        justify-content: space-between;
        gap: 10px
    }

    .cb-summary span {
        opacity: .75
    }

    .cb-summary b {
        text-align: right;
        font-weight: 600
    }

.cb-modal__main {
    display: flex;
    flex-direction: column;
    min-height: 0
}

.cb-mhead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 10px
}

    .cb-mhead h2 {
        font-size: 1.2rem;
        color: var(--primary);
        font-weight: 800;
        flex: 1
    }

.cb-x {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: var(--bg);
    color: var(--ink);
    font-size: 1rem;
    transition: .2s
}

    .cb-x:hover {
        background: #fee2e2;
        color: var(--bad);
        transform: rotate(90deg)
    }

.cb-steps {
    display: flex;
    gap: 6px;
    padding: 0 22px 12px
}

    .cb-steps i {
        flex: 1;
        height: 5px;
        border-radius: 9px;
        background: var(--line);
        transition: .3s
    }

        .cb-steps i.on {
            background: linear-gradient(90deg,var(--primary),var(--accent))
        }

.cb-mbody {
    padding: 6px 22px 18px;
    overflow-y: auto;
    flex: 1;
    min-height: 0
}

.cb-mfoot {
    padding: 14px 22px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    background: #fff
}

    .cb-mfoot .cb-btn {
        padding: 13px
    }

.cb-step {
    display: none
}

    .cb-step.on {
        display: block;
        animation: cbslide .3s
    }

@keyframes cbslide {
    from {
        opacity: 0;
        transform: translateX(16px)
    }
}

.cb-lbl {
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 14px 0 8px
}

    .cb-lbl:first-child {
        margin-top: 4px
    }

/* rooms */
.cb-group {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.cb-room {
    border: 2px solid var(--line);
    border-radius: 16px;
    padding: 14px 8px;
    text-align: center;
    background: #fff;
    transition: .2s;
    position: relative
}

    .cb-room i {
        font-size: 1.4rem;
        margin-bottom: 6px;
        display: block
    }

    .cb-room b {
        font-size: .85rem;
        display: block;
        color: var(--ink)
    }

    .cb-room small {
        color: var(--muted);
        font-size: .72rem
    }

    .cb-room.conf i {
        color: var(--conf)
    }

    .cb-room.disc i {
        color: var(--disc)
    }

    .cb-room:hover {
        transform: translateY(-3px);
        border-color: var(--accent);
        box-shadow: 0 10px 20px -10px rgba(79,107,255,.5)
    }

    .cb-room.sel {
        border-color: var(--accent);
        background: var(--accent-soft);
        box-shadow: 0 0 0 4px rgba(79,107,255,.15)
    }

        .cb-room.sel::after {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: -8px;
            right: -8px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--ok);
            color: #fff;
            font-size: .7rem;
            display: grid;
            place-items: center
        }

.cb-hint {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: .82rem;
    margin-top: 12px
}

    .cb-hint.info {
        background: var(--accent-soft);
        color: var(--primary)
    }

    .cb-hint.tealh {
        background: #e6f7f5;
        color: #0f5f58
    }

    .cb-hint i {
        margin-top: 2px
    }

/* calendar */
.cb-cal {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    background: #fff
}

.cb-cal__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

    .cb-cal__top h3 {
        font-size: 1.02rem;
        color: var(--primary);
        font-weight: 700
    }

.cb-cal__nav {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--primary);
    transition: .2s
}

    .cb-cal__nav:hover:not(:disabled) {
        background: var(--accent-soft)
    }

    .cb-cal__nav:disabled {
        opacity: .3;
        cursor: not-allowed
    }

.cb-cal__grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 4px
}

.cb-cal__wd {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--muted);
    padding: 6px 0;
    text-transform: uppercase
}

.cb-cal__d {
    aspect-ratio: 1;
    border: 0;
    background: transparent;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    position: relative;
    transition: .15s;
    min-height: 38px
}

    .cb-cal__d:hover:not(:disabled) {
        background: var(--accent-soft);
        color: var(--primary)
    }

    .cb-cal__d:disabled {
        color: #c4c9dc;
        cursor: not-allowed;
        font-weight: 500
    }

    .cb-cal__d.today::after {
        content: "";
        position: absolute;
        bottom: 5px;
        left: 50%;
        width: 5px;
        height: 5px;
        margin-left: -2.5px;
        border-radius: 50%;
        background: var(--accent)
    }

    .cb-cal__d.inrange {
        background: #f3f5ff
    }

    .cb-cal__d.sel {
        background: linear-gradient(135deg,var(--primary),var(--accent));
        color: #fff;
        box-shadow: 0 8px 16px -6px rgba(79,107,255,.7)
    }

        .cb-cal__d.sel::after {
            background: #fff
        }

.cb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: .75rem;
    color: var(--muted)
}

    .cb-legend span {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .cb-legend i {
        width: 12px;
        height: 12px;
        border-radius: 4px;
        display: inline-block
    }

/* time */
.cb-slots {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.cb-slot {
    padding: 11px 4px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    transition: .15s
}

    .cb-slot:hover:not(:disabled) {
        border-color: var(--accent);
        background: var(--accent-soft)
    }

    .cb-slot.sel {
        background: linear-gradient(135deg,var(--primary),var(--accent));
        color: #fff;
        border-color: transparent
    }

    .cb-slot.range {
        background: var(--accent-soft);
        border-color: #c9d2ff;
        color: var(--primary)
    }

    .cb-slot:disabled {
        background: repeating-linear-gradient(45deg,#f1f2f8,#f1f2f8 6px,#e8eaf4 6px,#e8eaf4 12px);
        color: #a3a8bf;
        cursor: not-allowed;
        text-decoration: line-through;
        border-color: transparent
    }

/* form */
.cb-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.cb-fg {
    position: relative;
    margin-bottom: 12px
}

    .cb-fg.full {
        grid-column: 1/-1
    }

    .cb-fg label {
        display: block;
        font-size: .78rem;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 5px
    }

        .cb-fg label em {
            color: var(--bad);
            font-style: normal
        }

    .cb-fg i {
        position: absolute;
        left: 14px;
        bottom: 14px;
        color: var(--accent);
        font-size: .9rem;
        pointer-events: none
    }

    .cb-fg input, .cb-fg select, .cb-fg textarea {
        width: 100%;
        padding: 12px 12px 12px 38px;
        border: 1.5px solid var(--line);
        border-radius: 12px;
        font: inherit;
        font-size: .92rem;
        background: #fafbff;
        color: var(--ink);
        transition: .2s;
        outline: 0
    }

    .cb-fg textarea {
        min-height: 76px;
        resize: vertical
    }

        .cb-fg input:focus, .cb-fg select:focus, .cb-fg textarea:focus {
            border-color: var(--accent);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(79,107,255,.13)
        }

    .cb-fg.err input, .cb-fg.err select {
        border-color: var(--bad)
    }

    .cb-fg.err::after {
        content: "Required";
        position: absolute;
        right: 4px;
        top: 0;
        font-size: .7rem;
        color: var(--bad)
    }

/* success */
.cb-done {
    text-align: center;
    padding: 28px 10px
}

    .cb-done .cb-tick {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: #dcfce7;
        color: var(--ok);
        display: grid;
        place-items: center;
        font-size: 2.4rem;
        margin: 0 auto 14px;
        animation: cbpop .5s
    }

    .cb-done h3 {
        color: var(--primary);
        font-size: 1.4rem;
        margin-bottom: 6px
    }

    .cb-done p {
        color: var(--muted);
        font-size: .9rem
    }

/* RESPONSIVE */
@media (max-width:900px) {
    .cb-hero {
        grid-template-columns: 1fr;
        padding-top: 20px;
        gap: 64px
    }

    .cb-hero__art {
        order: 2;
        padding: 16px
    }

    .cb-card {
        padding: 28px 20px
    }

    .cb-modal {
        grid-template-columns: 1fr;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        max-width: none
    }

    .cb-overlay {
        padding: 0
    }

    .cb-modal__side {
        display: none
    }

    .cb-mhead {
        padding-top: calc(16px + env(safe-area-inset-top))
    }

        .cb-mhead .cb-m-art {
            display: block
        }
}

.cb-m-art {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    padding: 6px
}

@media (max-width:820px) {
}

@media (max-width:520px) {
    .cb-group {
        grid-template-columns: repeat(3,1fr);
        gap: 8px
    }

    .cb-room {
        padding: 12px 4px
    }

        .cb-room b {
            font-size: .74rem
        }

    .cb-slots {
        grid-template-columns: repeat(3,1fr)
    }

    .cb-grid2 {
        grid-template-columns: 1fr
    }

    .cb-card h1 {
        font-size: 1.5rem
    }

    .cb-mbody, .cb-mhead, .cb-steps, .cb-mfoot {
        padding-left: 16px;
        padding-right: 16px
    }
}

/* Discussion Room theme (only applied while a Discussion Room is selected) */
.cb-modal.cb-disc .cb-modal__side{
  background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
}

/* Mobile: side panel is hidden, so the same gradients go on the top bar (title + close + progress) */
@media (max-width:900px) {
    .cb-top {
        background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
        border-radius: 0 0 22px 22px;
        box-shadow: 0 10px 24px -12px rgba(5, 0, 59, .6);
        position: relative;
        z-index: 1
    }

    .cb-modal.cb-disc .cb-top {
        background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b)
    }

    .cb-top .cb-mhead h2 { color: #fff }
    .cb-top .cb-x { background: rgba(255,255,255,.18); color: #fff }
    .cb-top .cb-x:hover { background: rgba(255,255,255,.3); color: #fff }
    .cb-top .cb-m-art { background: #fff }
    .cb-top .cb-steps { padding-bottom: 18px }
    .cb-top .cb-steps i { background: rgba(255,255,255,.28) }
    .cb-top .cb-steps i.on { background: #fff }
}

/* Compact desktop size */
@media (min-width:901px) {
    .cb-modal { max-width: 940px; max-height: 88vh }
    .cb-modal__side { padding: 14px }
    .cb-side__art img { max-height: 293px }
    .cb-mhead { padding: 14px 20px 8px }
    .cb-mhead h2 { font-size: 1.05rem }
    .cb-mbody { padding: 4px 20px 14px }
    .cb-mfoot { padding: 10px 20px 12px }
    .cb-mfoot .cb-btn { padding: 10px }
    .cb-cal { padding: 10px }
    .cb-cal__top { margin-bottom: 6px }
    .cb-cal__nav { width: 32px; height: 32px }
    .cb-cal__grid { gap: 2px }
    .cb-cal__d { aspect-ratio: auto; height: 36px; min-height: 0; font-size: .85rem }
    .cb-cal__wd { padding: 4px 0 }
    .cb-legend { margin-top: 8px }
    .cb-hint { margin-top: 8px; padding: 8px 11px }
}

/* Searchable department dropdown (Select2) styled to match the other fields */
.cb-fg i { z-index: 2 }
.cb-fg .select2-container { width: 100% !important }
.cb-fg .select2-container--default .select2-selection--single {
    height: 44px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fafbff;
    display: flex;
    align-items: center;
}
.cb-fg .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 38px;
    color: var(--ink);
    font-size: .92rem;
}
.cb-fg .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9aa0b5 }
.cb-fg .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 8px }
.cb-fg .select2-container--default.select2-container--open .select2-selection--single,
.cb-fg .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(79,107,255,.13);
    background: #fff;
}
.cb-fg.err .select2-container--default .select2-selection--single { border-color: var(--bad) }
/* dropdown is rendered on <body>, above the wizard overlay */
.select2-container--open { z-index: 2000 }
.cb-s2-drop { border: 1.5px solid #e6e9f5; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px -10px rgba(26,31,109,.35) }
.cb-s2-drop .select2-search--dropdown { padding: 8px }
.cb-s2-drop .select2-search--dropdown .select2-search__field { border: 1.5px solid #e6e9f5; border-radius: 8px; padding: 8px 10px; outline: 0 }
.cb-s2-drop .select2-search--dropdown .select2-search__field:focus { border-color: #4f6bff }
.cb-s2-drop .select2-results__option { padding: 9px 12px; font-size: .9rem }
.cb-s2-drop .select2-results__option--highlighted[aria-selected],
.cb-s2-drop .select2-results__option--highlighted.select2-results__option--selectable { background: #1a1f6d; color: #fff }

/* ---- Department dropdown: theme colours (Conference = blue, Discussion = teal) ---- */
.cb-s2-drop .select2-search--dropdown {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, #1a1f6d, #05003b);
}
.cb-s2-drop.cb-s2-disc .select2-search--dropdown {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
}
.cb-s2-drop .select2-search--dropdown .select2-search__field { background: rgba(255,255,255,.95); border-color: transparent }
.cb-s2-drop .select2-search--dropdown .select2-search__field:focus { border-color: #fff }
.cb-s2-drop .select2-results__option--highlighted[aria-selected],
.cb-s2-drop .select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(135deg, #1a1f6d, #4e73df);
    color: #fff;
}
.cb-s2-drop.cb-s2-disc .select2-results__option--highlighted[aria-selected],
.cb-s2-drop.cb-s2-disc .select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(135deg, #04384f, #12b3a6);
}
.cb-s2-drop .select2-results__option[aria-selected=true],
.cb-s2-drop .select2-results__option--selected { background: #eef1ff; color: #1a1f6d; font-weight: 600 }
.cb-s2-drop.cb-s2-disc .select2-results__option[aria-selected=true],
.cb-s2-drop.cb-s2-disc .select2-results__option--selected { background: #e6f7f5; color: #04384f }

/* the closed field's focus/open ring follows the theme too */
.cb-modal.cb-disc .cb-fg .select2-container--default.select2-container--open .select2-selection--single,
.cb-modal.cb-disc .cb-fg .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #12b3a6;
    box-shadow: 0 0 0 4px rgba(18,179,166,.18);
}
.cb-modal.cb-disc .cb-fg i { color: #0d9488 }

/* ---- Time slots: theme colours (Conference = blue, Discussion = teal) ---- */
.cb-slot.sel {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 16px -8px rgba(26,31,109,.7);
}
.cb-slot.range { background: #eef1ff; border-color: #c9d2ff; color: #1a1f6d }
.cb-slot:hover:not(:disabled) { border-color: #4e73df; background: #eef1ff; color: #1a1f6d }
.cb-slot.sel:hover:not(:disabled) { color: #fff }

.cb-modal.cb-disc .cb-slot.sel {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
    box-shadow: 0 8px 16px -8px rgba(4,56,79,.7);
}
.cb-modal.cb-disc .cb-slot.range { background: #e6f7f5; border-color: #a7e3dd; color: #04384f }
.cb-modal.cb-disc .cb-slot:hover:not(:disabled) { border-color: #12b3a6; background: #e6f7f5; color: #04384f }
.cb-modal.cb-disc .cb-slot.sel:hover:not(:disabled) { color: #fff }

/* ---- Next / Back buttons: theme colours (Conference = blue, Discussion = teal) ---- */
.cb-mfoot .cb-btn:not(.cb-btn--ghost):not(:disabled) {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
    box-shadow: 0 12px 24px -10px rgba(26,31,109,.75);
}
.cb-mfoot .cb-btn:not(.cb-btn--ghost):not(:disabled):hover { box-shadow: 0 16px 28px -10px rgba(26,31,109,.85) }
.cb-mfoot .cb-btn--ghost { color: #1a1f6d; border-color: #c9d2ff }
.cb-mfoot .cb-btn--ghost:hover { background: #eef1ff; border-color: #4e73df }

.cb-modal.cb-disc .cb-mfoot .cb-btn:not(.cb-btn--ghost):not(:disabled) {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
    box-shadow: 0 12px 24px -10px rgba(4,56,79,.75);
}
.cb-modal.cb-disc .cb-mfoot .cb-btn:not(.cb-btn--ghost):not(:disabled):hover { box-shadow: 0 16px 28px -10px rgba(4,56,79,.85) }
.cb-modal.cb-disc .cb-mfoot .cb-btn--ghost { color: #04384f; border-color: #a7e3dd }
.cb-modal.cb-disc .cb-mfoot .cb-btn--ghost:hover { background: #e6f7f5; border-color: #12b3a6 }

/* ---- Book Now button: theme colours ---- */
#cbBookNow {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
    box-shadow: 0 12px 24px -10px rgba(26,31,109,.75);
}
#cbBookNow:hover { box-shadow: 0 16px 28px -10px rgba(26,31,109,.85) }

/* ---- Close (X) button: theme colours (desktop; on mobile it sits on the gradient top bar) ---- */
@media (min-width:901px) {
    .cb-modal .cb-x {
        background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
        color: #fff;
        box-shadow: 0 6px 14px -6px rgba(26,31,109,.7);
    }
    .cb-modal .cb-x:hover { color: #fff; box-shadow: 0 8px 18px -6px rgba(26,31,109,.9); transform: rotate(90deg) }
    .cb-modal.cb-disc .cb-x {
        background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
        box-shadow: 0 6px 14px -6px rgba(4,56,79,.7);
    }
    .cb-modal.cb-disc .cb-x:hover { box-shadow: 0 8px 18px -6px rgba(4,56,79,.9) }
}

/* ---- Calendar: theme colours (Conference = blue, Discussion = teal) ---- */
.cb-cal__d.sel {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(26,31,109,.75);
}
.cb-cal__d.inrange { background: #f3f5ff }
.cb-cal__d:hover:not(:disabled):not(.sel) { background: #dfe6ff; color: #1a1f6d }
.cb-cal__d.today::after { background: #4e73df }
.cb-cal__d.sel.today::after { background: #fff }
.cb-cal__top h3 { color: #1a1f6d }
.cb-cal__nav {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
    color: #fff;
    border: 0;
}
.cb-cal__nav:hover:not(:disabled) { background: linear-gradient(160deg, #4e73df, #1a1f6d); }
.cb-cal__nav:disabled { opacity: .3 }

.cb-modal.cb-disc .cb-cal__d.sel {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
    box-shadow: 0 8px 16px -8px rgba(4,56,79,.75);
}
.cb-modal.cb-disc .cb-cal__d.inrange { background: #eefaf8 }
.cb-modal.cb-disc .cb-cal__d:hover:not(:disabled):not(.sel) { background: #cdf0ec; color: #04384f }
.cb-modal.cb-disc .cb-cal__d.today::after { background: #12b3a6 }
.cb-modal.cb-disc .cb-cal__d.sel.today::after { background: #fff }
.cb-modal.cb-disc .cb-cal__top h3 { color: #04384f }
.cb-modal.cb-disc .cb-cal__nav {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
}
.cb-modal.cb-disc .cb-cal__nav:hover:not(:disabled) { background: linear-gradient(160deg, #12b3a6, #04384f) }
.cb-modal.cb-disc .cb-cal { border-color: #cdf0ec }
.cb-cal { border-color: #dfe6ff }

/* legend "Selected" swatch follows the theme (overrides its inline style) */
.cb-legend span:first-child i { background: linear-gradient(160deg, var(--cbf-primary), #05003b) !important }
.cb-modal.cb-disc .cb-legend span:first-child i { background: linear-gradient(160deg, #04384f, #12b3a6) !important }

/* ---- Room cards: each card carries its own theme (Conference = blue, Discussion = teal) ---- */
.cb-room.conf { border-color: #dfe6ff }
.cb-room.conf i { color: #4e73df }
.cb-room.conf:hover { border-color: #4e73df; box-shadow: 0 10px 20px -10px rgba(26,31,109,.55) }
.cb-room.conf.sel {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
    border-color: transparent;
    box-shadow: 0 12px 24px -10px rgba(26,31,109,.8);
}

.cb-room.disc { border-color: #cdf0ec }
.cb-room.disc i { color: #12b3a6 }
.cb-room.disc:hover { border-color: #12b3a6; box-shadow: 0 10px 20px -10px rgba(4,56,79,.55) }
.cb-room.disc.sel {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
    border-color: transparent;
    box-shadow: 0 12px 24px -10px rgba(4,56,79,.8);
}

.cb-room.sel b, .cb-room.sel i, .cb-room.sel small { color: #fff }
.cb-room.sel small { opacity: .8 }

/* ---- Registration form fields: theme colours (Conference = blue, Discussion = teal) ---- */
.cb-fg label { color: #1a1f6d }
.cb-fg i { color: #4e73df }
.cb-fg input, .cb-fg select, .cb-fg textarea { border-color: #dfe6ff; background: #f7f9ff }
.cb-fg input:hover, .cb-fg textarea:hover { border-color: #b9c6fb }
.cb-fg input:focus, .cb-fg select:focus, .cb-fg textarea:focus {
    border-color: #4e73df;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(78,115,223,.18);
}
.cb-fg input::placeholder, .cb-fg textarea::placeholder { color: #9aa6d6 }
.cb-fg:focus-within > i { color: #1a1f6d }
.cb-fg .select2-container--default .select2-selection--single { border-color: #dfe6ff; background: #f7f9ff }

.cb-modal.cb-disc .cb-fg label { color: #04384f }
.cb-modal.cb-disc .cb-fg i { color: #12b3a6 }
.cb-modal.cb-disc .cb-fg input, .cb-modal.cb-disc .cb-fg select, .cb-modal.cb-disc .cb-fg textarea { border-color: #cdf0ec; background: #f5fcfb }
.cb-modal.cb-disc .cb-fg input:hover, .cb-modal.cb-disc .cb-fg textarea:hover { border-color: #93d9d2 }
.cb-modal.cb-disc .cb-fg input:focus, .cb-modal.cb-disc .cb-fg select:focus, .cb-modal.cb-disc .cb-fg textarea:focus {
    border-color: #12b3a6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(18,179,166,.18);
}
.cb-modal.cb-disc .cb-fg input::placeholder, .cb-modal.cb-disc .cb-fg textarea::placeholder { color: #8fc3be }
.cb-modal.cb-disc .cb-fg:focus-within > i { color: #04384f }
.cb-modal.cb-disc .cb-fg .select2-container--default .select2-selection--single { border-color: #cdf0ec; background: #f5fcfb }

/* validation error stays red in both themes */
.cb-fg.err input, .cb-fg.err select, .cb-modal.cb-disc .cb-fg.err input, .cb-modal.cb-disc .cb-fg.err select,
.cb-fg.err .select2-container--default .select2-selection--single { border-color: var(--bad) }
.cb-modal.cb-disc .cb-fg.err .select2-container--default .select2-selection--single { border-color: var(--bad) }

/* ---- Result popups (SweetAlert2): theme colours (Conference = blue, Discussion = teal) ---- */
.swal2-popup.cb-swal {
    /*border-radius: 22px;*/
    overflow: hidden;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    padding-top: 2.2em;
    border-top: 8px solid transparent;
    border-image: linear-gradient(90deg, #1a1f6d, #4e73df) 1;
    box-shadow: 0 30px 60px -18px rgba(26,31,109,.55);
}
.swal2-popup.cb-swal .swal2-title { color: #1a1f6d; font-weight: 800 }
.swal2-popup.cb-swal .swal2-html-container { color: #3b4266; line-height: 1.7 }
.swal2-popup.cb-swal .swal2-html-container strong { color: #1a1f6d }
.swal2-popup.cb-swal .swal2-styled.swal2-confirm {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, #1a1f6d, #05003b) !important;
    border-radius: 12px;
    padding: .7em 2em;
    font-weight: 700;
    box-shadow: 0 10px 20px -10px rgba(26,31,109,.8);
}
.swal2-popup.cb-swal .swal2-styled:focus { box-shadow: 0 0 0 4px rgba(78,115,223,.3) }

.swal2-popup.cb-swal.cb-swal-disc {
    border-image: linear-gradient(90deg, #04384f, #12b3a6) 1;
    box-shadow: 0 30px 60px -18px rgba(4,56,79,.55);
}
.swal2-popup.cb-swal.cb-swal-disc .swal2-title { color: #04384f }
.swal2-popup.cb-swal.cb-swal-disc .swal2-html-container strong { color: #04384f }
.swal2-popup.cb-swal.cb-swal-disc .swal2-styled.swal2-confirm {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b) !important;
    box-shadow: 0 10px 20px -10px rgba(4,56,79,.8);
}
.swal2-popup.cb-swal.cb-swal-disc .swal2-styled:focus { box-shadow: 0 0 0 4px rgba(18,179,166,.3) }

/* ---- Modal header (title + close + progress): theme colours on desktop too ---- */
@media (min-width:901px) {
    .cb-top {
        background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 10px 24px -14px rgba(5, 0, 59, .7);
        position: relative;
        z-index: 1;
    }
    .cb-modal.cb-disc .cb-top {
        background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
        box-shadow: 0 10px 24px -14px rgba(4, 56, 79, .7);
    }
    .cb-top .cb-mhead h2 { color: #fff }
    .cb-modal .cb-top .cb-x,
    .cb-modal.cb-disc .cb-top .cb-x { background: rgba(255,255,255,.18); color: #fff; box-shadow: none }
    .cb-modal .cb-top .cb-x:hover,
    .cb-modal.cb-disc .cb-top .cb-x:hover { background: rgba(255,255,255,.32); box-shadow: none }
    .cb-top .cb-steps { padding-bottom: 14px }
    .cb-top .cb-steps i { background: rgba(255,255,255,.28) }
    .cb-top .cb-steps i.on { background: #fff }
    .cb-top .cb-m-art { background: #fff }
}

/* ---- Modal header, desktop: white bar, gradient only on the title TEXT (overrides the block above) ---- */
@media (min-width:901px) {
    .cb-top,
    .cb-modal.cb-disc .cb-top { background: none; border-radius: 0; box-shadow: none; z-index: auto }

    .cb-top .cb-mhead h2 {
        background: linear-gradient(90deg, #1a1f6d, #4e73df);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    .cb-modal.cb-disc .cb-top .cb-mhead h2 { background: linear-gradient(90deg, #04384f, #12b3a6); -webkit-background-clip: text; background-clip: text }

    /* close button: back to the themed gradient circle */
    .cb-modal .cb-top .cb-x {
        background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
        color: #fff; box-shadow: 0 6px 14px -6px rgba(26,31,109,.7);
    }
    .cb-modal .cb-top .cb-x:hover { background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b); box-shadow: 0 8px 18px -6px rgba(26,31,109,.9) }
    .cb-modal.cb-disc .cb-top .cb-x,
    .cb-modal.cb-disc .cb-top .cb-x:hover {
        background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
        box-shadow: 0 6px 14px -6px rgba(4,56,79,.7);
    }

    /* progress bar: normal track, themed fill */
    .cb-top .cb-steps { padding-bottom: 12px }
    .cb-top .cb-steps i { background: var(--line) }
    .cb-top .cb-steps i.on { background: linear-gradient(90deg, #1a1f6d, #4e73df) }
    .cb-modal.cb-disc .cb-top .cb-steps i.on { background: linear-gradient(90deg, #04384f, #12b3a6) }
    .cb-top .cb-m-art { background: var(--accent-soft) }
}

/* ---- Modal header, mobile: same style as desktop (white bar, gradient title text, themed icons) ---- */
@media (max-width:900px) {
    .cb-top,
    .cb-modal.cb-disc .cb-top { background: none; border-radius: 0; box-shadow: none; z-index: auto }

    .cb-modal .cb-top .cb-mhead h2 {
        background: linear-gradient(90deg, #1a1f6d, #4e73df);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    .cb-modal.cb-disc .cb-top .cb-mhead h2 { background: linear-gradient(90deg, #04384f, #12b3a6); -webkit-background-clip: text; background-clip: text }

    /* close (X) icon: themed gradient circle */
    .cb-modal .cb-top .cb-x,
    .cb-modal .cb-top .cb-x:hover {
        background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, var(--cbf-primary), #05003b);
        color: #fff;
        box-shadow: 0 6px 14px -6px rgba(26,31,109,.7);
    }
    .cb-modal.cb-disc .cb-top .cb-x,
    .cb-modal.cb-disc .cb-top .cb-x:hover {
        background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
        box-shadow: 0 6px 14px -6px rgba(4,56,79,.7);
    }

    /* schedule icon tile next to the title: themed frame */
    .cb-modal .cb-top .cb-m-art { background: #eef1ff; border: 2px solid #c9d2ff; box-shadow: 0 6px 14px -8px rgba(26,31,109,.6) }
    .cb-modal.cb-disc .cb-top .cb-m-art { background: #e6f7f5; border-color: #a7e3dd; box-shadow: 0 6px 14px -8px rgba(4,56,79,.6) }

    /* progress bar: normal track, themed fill */
    .cb-top .cb-steps { padding-bottom: 12px }
    .cb-top .cb-steps i { background: var(--line) }
    .cb-top .cb-steps i.on { background: linear-gradient(90deg, #1a1f6d, #4e73df) }
    .cb-modal.cb-disc .cb-top .cb-steps i.on { background: linear-gradient(90deg, #04384f, #12b3a6) }
}

/* ---- Hint boxes (room / date / time): theme colours ---- */
.cb-hint.info { background: #eef1ff; color: #1a1f6d; border: 1px solid #dfe6ff }
.cb-hint.info i { color: #4e73df }
.cb-hint.tealh { background: #e6f7f5; color: #04384f; border: 1px solid #cdf0ec }
.cb-hint.tealh i { color: #12b3a6 }