/*
 * What the AIvent template had no CSS for, because its Angular packages
 * carried it: the reveal on scroll (AOS), the sliding bands and logo strip
 * (ngx-marquee and Swiper), the parallax backgrounds (jarallax), and the menu
 * on a phone, which the template's own navbar never opened.
 *
 * Then the few things this site adds and the template has no class for: the
 * countdown, the sign-up form, and the stand-ins drawn where a picture is
 * missing.
 *
 * The template's own colours are used throughout, so nothing here changes how
 * it looks - it only makes what it describes actually happen.
 */

/* ------------------------------------------------------------- the logo */

/*
 * The group's mark (resources/views/partials/logo), which the bar and the
 * footer carry in place of the template's own picture. The construction is
 * the same as everywhere else on the site; only the size and the colour of
 * the name change, because this page is dark throughout.
 */
.mil-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: .26em;
    white-space: nowrap;
}

.mil-logo-mark {
    flex: none;
    width: .82em;
    height: .82em;
}

.mil-logo-lockup.is-mark-only .mil-logo-mark {
    width: 1em;
    height: 1em;
}

.mil-logo-name { line-height: 1; }

.webinar-wordmark {
    display: inline-block;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
}

.webinar-wordmark:hover,
.webinar-wordmark:focus-visible { color: #fff; }

/* The template shrinks its bar once the page has moved; the mark goes with it. */
header.smaller .webinar-wordmark { font-size: 22px; }

/* In the footer it sits above the social icons, at the size the template's
   own footer picture was drawn. */
.webinar-wordmark.is-footer {
    font-size: 24px;
    margin-bottom: 4px;
}

@media only screen and (max-width: 767px) {
    .webinar-wordmark,
    header.smaller .webinar-wordmark { font-size: 21px; }
}

/* ------------------------------------------- the mark on a ticket (d-ticket)
   The template printed its own brand into the ticket twice, as two pictures:
   a wordmark at the head and a big pale one behind the price. Both are the
   drawn lockup here, so a ticket carries the group's mark and not the
   template's, and neither costs a request. */

.webinar-ticket-mark {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
}

/*
 * The pale one behind the price. It keeps the template's `w-40`, so it still
 * grows and shrinks with the ticket; the badge is told to fill that width
 * rather than follow the font size the lockup usually scales by.
 */
.webinar-ticket-watermark .mil-logo-lockup { display: block; }

.webinar-ticket-watermark .mil-logo-lockup .mil-logo-mark {
    width: 100%;
    height: auto;
}

/*
 * As faint white line art, the way the template's own watermark sits on the
 * ticket, rather than the coloured badge: an outlined square with the B. in
 * it, well behind the pass's name and price.
 */
.webinar-ticket-watermark {
    opacity: .22 !important;
}

.webinar-ticket-watermark .mil-logo-mark rect {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
}

.webinar-ticket-watermark .mil-logo-mark text,
.webinar-ticket-watermark .mil-logo-mark circle {
    fill: #fff;
}

/* ---------------------------------------------------------------- reveal */

/*
 * The template marks what should come in with data-aos, as AOS reads it.
 * webinar.js adds .is-in once the element has been scrolled to.
 */
[data-aos] {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
    will-change: opacity, transform;
}

[data-aos="fade-up"]   { transform: translateY(40px); }
[data-aos="fade-down"] { transform: translateY(-40px); }
[data-aos="zoom-in"]   { transform: scale(.85); }

[data-aos].is-in {
    opacity: 1;
    transform: none;
}

/* Nothing hidden from anyone who would rather the page held still. */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --------------------------------------------------------------- sliding */

/*
 * A band whose content is written twice and slid the width of one copy, so
 * the join never shows. The track is as wide as it needs to be; the band
 * itself hides what runs past its edges.
 */
.webinar-marquee {
    overflow: hidden;
    width: 100%;
}

.webinar-marquee-track {
    display: flex;
    width: max-content;
}

.webinar-marquee-run {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    animation: webinar-slide 40s linear infinite;
}

.webinar-marquee-run.is-reverse {
    animation-direction: reverse;
}

.webinar-marquee:hover .webinar-marquee-run {
    animation-play-state: paused;
}

@keyframes webinar-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .webinar-marquee-run { animation: none; }
}

/* the logo strip, which slides on the same animation */
.webinar-logos {
    display: flex;
    align-items: center;
    gap: 20px;
}

.webinar-logo {
    flex: 0 0 auto;
    width: 180px;
}

.webinar-logo-name {
    display: block;
    padding: 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    opacity: .7;
    white-space: nowrap;
}

/* -------------------------------------------------------------- parallax */

/*
 * The background picture of a band, moved a little slower than the page.
 * webinar.js sets --webinar-shift as the band passes.
 */
.webinar-parallax {
    overflow: hidden;
}

.webinar-parallax-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 130%;
    object-fit: cover;
    transform: translateY(var(--webinar-shift, 0));
    will-change: transform;
}

/* ---------------------------------------------------------- menu, mobile */

/*
 * The template hides the bar below 992px and shows the three lines, but never
 * wrote what opens. The menu slides down from under the bar.
 */
@media only screen and (max-width: 992px) {
    #mainmenu[data-webinar-menu] {
        display: none;
    }

    #mainmenu[data-webinar-menu].is-open {
        display: block;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 80px);
        margin: 0;
        padding: 10px 24px 24px;
        overflow-y: auto;
        background: rgba(0, 0, 0, .95);
        backdrop-filter: blur(8px);
        z-index: 200;
    }
}

/* ------------------------------------------------------------- countdown */

.webinar-clock {
    display: flex;
    gap: 22px;
}

.webinar-clock-box {
    text-align: center;
    min-width: 54px;
}

.webinar-clock-box strong {
    display: block;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
}

.webinar-clock-box span {
    display: block;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
}

/* ------------------------------------------------------------- the form */

.webinar-form .form-control {
    background: rgba(255, 255, 255, .06);
    border: solid 1px rgba(255, 255, 255, .2);
    color: #fff;
}

.webinar-form .form-control::placeholder {
    color: rgba(255, 255, 255, .55);
}

.webinar-form .form-control:focus {
    background: rgba(255, 255, 255, .1);
    border-color: var(--primary-color);
    box-shadow: none;
    color: #fff;
}

.webinar-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #ff8087;
}

/* A field jQuery Validation has just complained about. */
.webinar-form .form-control.is-invalid,
.webinar-form .form-control.is-invalid:focus {
    border-color: #ff8087;
    box-shadow: 0 0 0 3px rgba(255, 128, 135, .18);
}

.webinar-note {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: 8px;
    text-align: center;
}

.webinar-note.is-ok {
    background: rgba(40, 167, 69, .18);
    border: solid 1px rgba(40, 167, 69, .5);
}

.webinar-note.is-error {
    background: rgba(220, 53, 69, .18);
    border: solid 1px rgba(220, 53, 69, .5);
}

/* ----------------------------------------------------------- the passes */

/*
 * The template slid its tickets past on a one-second timer. They sit still
 * here, so a price someone is deciding between does not move away while they
 * read it, and the column stretches so the buttons line up across the row
 * however long the lists above them are.
 */
.webinar-pass {
    display: flex;
    flex-direction: column;
}

/*
 * The whole pass is one card: the ticket, what it gets you and the button
 * inside a single bordered panel, rather than three things stacked loose on
 * the background. The panel stretches to the tallest in the row, which is
 * what keeps the buttons level.
 */
.webinar-pass-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--rounded-1, 12px);
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Takes the height left over, so the buttons sit level across the row
   however many lines the lists above them run to. */
.webinar-pass-perks {
    flex: 1 1 auto;
    padding: 24px 4px;
}

/*
 * A pass is a narrow column, so a perk has to earn its width. Set a little
 * tighter than the page's body type, so an ordinary one sits on a single line.
 *
 * The theme's tick is an inline ::before with a margin, which means a line
 * that does wrap comes back to the left edge and runs underneath the tick.
 * The tick is given a column of its own instead, so a long perk wraps under
 * its own words.
 */
.webinar-pass-perks .ul-check li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
}

.webinar-pass-perks .ul-check li::before {
    flex: none;
    margin-right: 0;
}

/* A pass that is gone stays on the page, said so, rather than vanishing. */
.webinar-pass-gone {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .62);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.btn-main.is-gone {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ------------------------------- the sign-up answer, as a popup (SweetAlert2) */

/*
 * The page's own colours rather than the plugin's: the template's dark navy
 * card, its Manrope, and the purple its buttons are painted in. The seminar
 * pages do the same in Grand Conference's pink ({@see seminar-theme}).
 */
.swal-webinar {
    padding: 34px 32px 28px;
    border-radius: var(--rounded-1, 10px);
    background: var(--bg-dark-2, #1a1e42);
    border: solid 1px rgba(255, 255, 255, .12);
    font-family: var(--body-font, "Manrope", Helvetica, Arial, sans-serif);
}

.swal-webinar .swal2-icon { margin: 4px auto 18px; }

.swal-webinar .swal2-icon.swal2-success {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.swal-webinar .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--primary-color); }
.swal-webinar .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(var(--primary-color-rgb), .3); }
.swal-webinar .swal2-icon.swal2-error { border-color: #ff8087; color: #ff8087; }
.swal-webinar .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #ff8087; }

.swal-webinar-title {
    padding: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}

/*
 * Scoped to the popup rather than left on its own class. SweetAlert2 styles
 * this line with `div:where(.swal2-container) .swal2-html-container`, which
 * outweighs a single class however late this file loads, so its
 * `color: inherit` would otherwise take the text back to the plugin's own
 * grey - all but unreadable on the dark card this popup is drawn on.
 */
.swal-webinar .swal-webinar-text {
    margin: 12px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.6;
}

.swal-webinar-button {
    margin-top: 22px;
    padding: 13px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .4px;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}

.swal-webinar-button:hover,
.swal-webinar-button:focus-visible {
    background: var(--secondary-color);
    transform: translateY(-1px);
}

.swal-webinar-button:focus-visible {
    outline: 3px solid rgba(var(--primary-color-rgb), .45);
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .swal-webinar { padding: 26px 20px 22px; }
    .swal-webinar-title { font-size: 22px; }
}

/* --------------------------------------------- where a picture is missing */

/* A Why Attend card with no picture keeps the height of one that has. */
.webinar-card-blank {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 6;
    background: linear-gradient(160deg, var(--secondary-color), #111);
}

/* A speaker with no photograph is drawn as their initial. */
.webinar-speaker-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 5 / 6;
    background: linear-gradient(160deg, var(--secondary-color), #111);
    font-size: 96px;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
}

/* A break or a pause in the schedule shows a clock where a face would be. */
.webinar-session-clock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    font-size: 30px;
    color: var(--primary-color);
}

/* ------------------------------------------------------------------ map */

.webinar-map {
    position: relative;
    padding-top: 40%;
}

.webinar-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------------------------- without JavaScript */

/*
 * The schedule's days and the answers to the questions are switched by
 * script. With none, everything is shown rather than everything but the first
 * being out of reach.
 */
.no-js [data-webinar-panel] { display: block !important; }
.no-js .accordion-section-content { display: block !important; }
.no-js [data-aos] { opacity: 1; transform: none; }

/* ---------- skipping the bar ----------
   The bar comes before the page, so the first thing a keyboard reaches is a
   way past it. Off screen until it is focused, as on the main site. */
.mil-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 12px 20px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .2s;
}

.mil-skip-link:focus,
.mil-skip-link:focus-visible { transform: none; color: #fff; }

#main-content:focus { outline: none; }


/* --------------------------------------------- the tickets page and basket */

/*
 * The tickets page (/webinar/tickets): the band at the top, the steppers
 * under each pass, and the basket beside them.
 *
 * The template had no ticket page of its own, only the row of passes on the
 * landing page, so everything a basket needs is here. The colours are the
 * template's own throughout.
 */

.webinar-tickets-head {
    overflow: hidden;
}

.webinar-tickets-head-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.webinar-tickets-empty {
    padding: 60px 0 40px;
    text-align: center;
}

/* The count under a pass, and the two buttons that change it. */
.webinar-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.webinar-stepper-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--primary-color, #764DF0);
    color: #fff;
    font-size: 18px;
    line-height: 34px;
    cursor: pointer;
    transition: opacity .2s ease;
}

.webinar-stepper-button:hover {
    opacity: .82;
}

/* The number itself: a plain field, with the browser's own spinner taken off
   so the two buttons are the only way it moves. */
.webinar-stepper-count {
    width: 56px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.webinar-stepper-count::-webkit-outer-spin-button,
.webinar-stepper-count::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.webinar-pass-left {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    text-align: center;
}

/* The basket. It follows the reader down a long list of passes, until the
   viewport is too short for that to leave anything to read. */
.webinar-cart {
    padding: 4px 0 0;
}

@media (min-width: 992px) {
    .webinar-cart {
        position: sticky;
        top: 110px;
    }
}

.webinar-cart-title {
    margin-bottom: 22px;
}

.webinar-cart-line {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.webinar-cart-line-head,
.webinar-cart-line-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.webinar-cart-line-name {
    font-size: 15px;
    font-weight: 600;
}

.webinar-cart-line-times {
    color: var(--primary-color, #764DF0);
}

.webinar-cart-line-sum {
    white-space: nowrap;
}

.webinar-cart-line-foot {
    margin-top: 4px;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

/* Sits between the price and Delete, so a line reads across in one go. */
.webinar-cart-line-left {
    margin-right: auto;
    margin-left: 14px;
}

.webinar-cart-line-remove {
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.webinar-cart-line-remove:hover {
    color: #fff;
}

.webinar-cart-empty[hidden] {
    display: none;
}

.webinar-cart-empty {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .6);
}

.webinar-cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: 22px;
    font-weight: 700;
}

/* Only asked for once there is something to buy. */
.webinar-cart-buyer[hidden] {
    display: none;
}

.webinar-cart-buyer {
    margin-top: 22px;
}

.webinar-cart-buy {
    margin-top: 18px;
}

.webinar-cart-buy[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.webinar-cart-small {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    line-height: 1.6;
}

.webinar-optional {
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
    font-weight: 400;
}

/* A labelled field in the basket. The sign-up band leans on placeholders; a
   basket is filled in more carefully, so these carry real labels. */
.webinar-field {
    margin-bottom: 14px;
}

.webinar-field label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    font-weight: 600;
}

/* ------------------------------------------------------- audit additions */

/* Keyboard focus, visible on every control. The template turned outlines off
   and put nothing in their place. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #F5A623;
    outline-offset: 3px;
}

/* The honeypot on the sign-up form: off screen, never hidden with display,
   so a bot filling every field still fills it. */
.webinar-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.webinar-privacy-line {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.webinar-privacy-line a { color: #fff; text-decoration: underline; }

.webinar-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    font-size: 13px;
}

.webinar-legal-links a { color: rgba(255, 255, 255, 0.72); }
.webinar-legal-links a:hover { color: #fff; }

/* ------------------------------------------ the sign-up popup */

/*
 * The sign-up form every webinar page carries (webinar/_register-modal),
 * opened by anything marked data-register-open.
 *
 * Progressive, not decorative: with no JavaScript the head never swaps
 * html.no-js for .js, none of the fixed positioning below applies, and the
 * panel is simply a section at the foot of the page with the form in it. The
 * popup is only ever built on top of something that already worked.
 */
.webinar-modal {
    position: static;
    padding: 0 0 80px;
}

.webinar-modal-veil,
.webinar-modal-x {
    display: none;
}

.webinar-modal-panel {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px;
}

/* From here on, only when the page has JavaScript. */
.js .webinar-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}

.js .webinar-modal.is-open {
    display: flex;
}

.js .webinar-modal-veil {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 24, .82);
    backdrop-filter: blur(3px);
}

.js .webinar-modal-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: auto;
    padding: 40px 36px 32px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--rounded-1, 14px);
    background: #101331;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    animation: webinar-modal-in .24s ease-out;
}

.js .webinar-modal-x {
    display: block;
    position: absolute;
    top: 10px;
    right: 12px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(255, 255, 255, .6);
    font-size: 26px;
    line-height: 38px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.js .webinar-modal-x:hover,
.js .webinar-modal-x:focus-visible {
    background: var(--primary-color, #764DF0);
    color: #fff;
}

/* The page behind it stays put while it is open. */
body.webinar-modal-open {
    overflow: hidden;
}

@keyframes webinar-modal-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.webinar-modal-title {
    margin-bottom: 10px;
    font-size: 30px;
    text-align: center;
}

.webinar-modal-note {
    margin-bottom: 26px;
    color: rgba(255, 255, 255, .7);
    text-align: center;
}

/* The band's button, which is only any use once JavaScript can open the
   popup. Without it the band is a heading and the form is further down. */
.webinar-register-cta {
    display: none;
    margin-top: 26px;
}

.js .webinar-register-cta {
    display: block;
}

@media (max-width: 575px) {
    .js .webinar-modal-panel { padding: 34px 20px 26px; }
    .webinar-modal-title { font-size: 24px; }
}