/*
    Stylesheet Name : YTL Lead Conference 2025 - Extension
    Created on      : October   06, 2025, 03:25:00 PM
    Last edited on  : October   06, 2025, 03:25:00 PM
    Author          : YTL Digital Design [AL, AK]
    Colors          : Text              - #FAF6EE (Cosmic Latte)
                      Background        - #003CA5 (Egyptian Blue), #0082CB (Steel Blue), #97CAEB (Baby Blue)
                      Graphic Elements  - #EFE99C (Flax), #FDAEBF (Sakura Pink), #FFA069 (Atomic Tangerine), #E23E2F (Vermillion), #4D62C9 (Savoy Blue)
*/

body {
    background: rgba(3, 122, 193, 1.0) url('../images/bg-auth.png') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.layer-page {
    background: transparent;
}

.layer-header,
.layer-footer,
.layer-siteFooter {
    display: none;
}

.layer-content {
    justify-content: start;
}

.layer-section.section-registerHeader {
    /* background-color: #212943; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5rem !important;
    /* position: fixed;
    top: 0;
    left: 0; */
    width: 100%;
}

.layer-section.section-registerHeader .panel-logo {
    margin-bottom: 0;
}

.layer-section.section-registerHeader .panel-logo img.img-fluid {
    max-height: 30px;
}

.section-register {
    padding: 0 0 4rem;
}

.reg-head {
    font-size: 3.7rem;
    font-weight: 600;
    display: block;
    margin: 0;
}


/* Standardize auth pages nav length */

@media (min-width: 576px) {
    .layer-page {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .layer-page {
        max-width: 720px;
    }
}

@media (min-width: 922px) {
    .layer-page {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .layer-page {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .layer-page {
        max-width: 1320px;
    }
}

@media (min-width: 992px) {
    .layer-content {
        justify-content: center;
    }
    .layer-section.section-registerHeader {
        display: none;
    }
    .layer-content .layer-section.section-register {
        padding: 1.5rem 0;
    }
}


/* ==========================================================================
   LEAD '26 brand layout
   Used by auth-master pages that pass 'brand_layout' => true
   Colors : Background - #040404, Terra Red - #EF3200, Text - #ECEADA,
            Silvermist - #CED2D5, Dark text - #24282B
   ========================================================================== */

body.page-brand {
    background: #040404;
    color: #ECEADA;
}

body.page-brand .layer-page {
    max-width: none;
}


/* Above the header and band (z-index 2) so pop-up overlays cover them; artwork stays behind */

body.page-brand .layer-body {
    position: relative;
    z-index: 3;
}


/* Centre content vertically, but never push tall content above the header */

body.page-brand .layer-content {
    justify-content: flex-start;
    min-height: 100vh;
    /* Stop the fade-up animation's start position from briefly adding a scrollbar */
    overflow: hidden;
    overflow: clip;
}


/* Main page section: clear of the header and band, centred vertically */

body.page-brand .layer-content>.layer-section:not(.section-alert) {
    margin-bottom: auto;
    margin-top: auto;
    padding: 96px 56px 64px 24px;
}


/* Flash messages sit under the header */

body.page-brand .layer-content>.layer-section.section-alert {
    padding: 80px 56px 0 24px;
}

@media (min-width: 992px) {
    body.page-brand .layer-content>.layer-section:not(.section-alert) {
        padding: 120px 98px;
    }
    body.page-brand .layer-content>.layer-section.section-alert {
        padding: 96px 98px 0;
    }
}


/* Header wordmark */

.layer-brandHeader {
    align-items: center;
    display: flex;
    height: 64px;
    left: 0;
    padding: 0 24px;
    position: absolute;
    top: 0;
    z-index: 2;
}

.link-brandWordmark {
    color: #ECEADA;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
}

.link-brandWordmark:hover,
.link-brandWordmark:focus {
    color: #ECEADA;
    opacity: 0.8;
}


/* Right-hand wordmark band */

.layer-brandBand {
    align-items: center;
    background-color: #EF3200;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 24px;
    position: fixed;
    right: 0;
    top: 0;
    width: 32px;
    z-index: 2;
}


/* Black LEAD '26 logo turned to read bottom to top; the box is the rotated logo's size */

.layer-brandBand .panel-bandLogo {
    display: block;
    height: 101px;
    position: relative;
    width: 15px;
}

.layer-brandBand .panel-bandLogo img {
    height: auto;
    left: 50%;
    max-width: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 101px;
}


/* Rock artwork, bottom left */


/* Stone sculpture (img-auth-sculpture.png, 732 x 614, cut from the design): the whole image, bottom left,
   scaled with the screen */

.img-brandArtwork {
    --artwork-width: 60vw;
    bottom: 0;
    height: auto;
    left: 0;
    pointer-events: none;
    position: fixed;
    width: var(--artwork-width);
    z-index: 0;
}

@media (min-width: 992px) {
    .layer-brandHeader {
        height: 80px;
        padding: 0 55px;
    }
    .link-brandWordmark {
        font-size: 24px;
        letter-spacing: 2.4px;
    }
    .layer-brandBand {
        padding-bottom: 36px;
        width: 58px;
    }
    .layer-brandBand .panel-bandLogo {
        height: 151px;
        width: 22px;
    }
    .layer-brandBand .panel-bandLogo img {
        width: 151px;
    }
    /* 600px at 1440, as in the frame */
    .img-brandArtwork {
        --artwork-width: clamp(420px, 41.667vw, 860px);
    }
}


/* Layout variants, set per page with 'brand_modifiers' */

body.page-brand.is-bgCharcoal {
    background: #24282B;
}

body.page-brand.is-bandLimestone .layer-brandBand {
    background-color: #ECEADA;
}

body.page-brand.is-bandAlpineBloom .layer-brandBand {
    background-color: #DF7ED2;
}


/* Tilted mountain artwork ('brand_artwork' => 'mountain'), scaled from the 1440px frame */


/* Sea and sculpture (1440 x 699, transparent sky): the whole picture, bottom right, ending at the
   coloured band (32px wide, 58px from 992px) and scaling with the screen width */

.img-brandArtwork.is-mountain {
    bottom: 0;
    left: auto;
    right: 32px;
    width: calc(100vw - 32px);
}

.img-brandArtwork.is-mountain img {
    display: block;
    height: auto;
    max-width: none;
    width: 100%;
}


/* Desktop: smaller (62.5vw, 900px at 1440, up to 1200px) so the sculpture sits beside the card;
   the sea fades in from the left so it never ends in a hard edge */

@media (min-width: 992px) {
    .img-brandArtwork.is-mountain {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 35%);
        mask-image: linear-gradient(to right, transparent 0, #000 35%);
        right: 58px;
        /* width: min(62.5vw, 1200px); */
    }
}

body.page-brand.is-artworkRight .img-brandArtwork {
    left: auto;
    right: -40px;
}

@media (min-width: 992px) {
    body.page-brand.is-bandLimestone .layer-brandBand,
    body.page-brand.is-bandAlpineBloom .layer-brandBand {
        padding-bottom: 39px;
    }
    body.page-brand.is-artworkRight .img-brandArtwork {
        right: 0px;
    }
}


/* ==========================================================================
   Register page (register-animation.blade.php)
   ========================================================================== */

body.page-brand .layer-brandForm {
    margin: 0 auto;
    max-width: 656px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

body.page-brand .multisteps-form__form {
    color: #ECEADA;
}

body.page-brand .multisteps-form__panel.card {
    background-color: transparent;
    border: 0;
}


/* Welcome panel */

.panel-welcome {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.panel-welcomeTitle {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.panel-welcomeTitle h1 {
    color: #ECEADA;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.panel-welcomeTitle p {
    color: #CED2D5;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 992px) {
    .panel-welcomeTitle h1 {
        font-size: 32px;
    }
}


/* Microsoft / Google sign-in buttons */

.panel-welcomeSso {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* Email field with the full-width NEXT button below it */

.panel-welcomeEmail {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.btn-ssoProvider {
    align-items: center;
    background-color: #CED2D5;
    border: 2px solid #CED2D5;
    border-radius: 8px;
    color: #24282B;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 18px;
    line-height: 1.2;
    padding: 16px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 100%;
}

.btn-ssoProvider:hover,
.btn-ssoProvider:focus {
    background-color: #ECEADA;
    border-color: #ECEADA;
    color: #24282B;
}

.btn-ssoProvider:focus-visible {
    outline: 2px solid #EF3200;
    outline-offset: 2px;
}

.panel-ssoIcon {
    background-color: #FFF;
    border-radius: 2px;
    flex-shrink: 0;
    height: 50px;
    overflow: hidden;
    position: relative;
    width: 50px;
}

.panel-ssoIcon img {
    max-width: none;
    position: absolute;
}

.panel-ssoIcon .icon-microsoft {
    left: 12px;
    top: 11.5px;
}

.panel-ssoIcon .icon-google {
    left: 10.45px;
    top: 9.29px;
}


/* Email registration (shown when SSO is off or ENABLE_EMAIL_REGISTRATION=true) */

.section-register .link-green {
    color: #EF3200 !important;
}

.section-register .link-green:hover {
    color: #EF3200 !important;
    text-decoration: underline;
}

.section-register .rpos-mobile {
    text-align: center;
}

.section-register .input-group-btn {
    position: relative;
}

.section-register .input-group-btn .btn {
    border-left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.section-register .input-group-btn .btn.btn-primary {
    background-color: transparent;
    border-color: transparent;
    border-radius: 0 8px 8px 0;
    padding: 0.7rem 1.2rem;
}

.section-register .input-group-btn .btn.btn-primary:hover {
    background-color: #0082CB;
    border-color: #0082CB;
}

.section-register .standardForm .input-group-btn .form-control {
    padding-right: 4.375rem;
}

.section-register .standardForm .input-group-btn .form-control:focus {
    border-color: rgba(252, 252, 252, 0.4);
}

.section-register .standardForm .input-group-btn .form-control:is(:-webkit-autofill,
 :autofill) {
    background-color: transparent !important;
}

.section-register .standardForm .input-group-btn .form-control:is(:-webkit-autofill,
 :autofill)~.btn,
.section-register .standardForm .input-group-btn .form-control:is(:-webkit-autofill,
 :autofill)~.btn:active {
    color: #333;
}

.section-register .standardForm .input-group-btn .form-control:is(:-webkit-autofill,
 :autofill)~.btn:hover {
    color: #FFF;
}


/* Steps after the welcome panel: plain charcoal background, no band or artwork */

body.page-brand.is-brandPlain {
    background: #24282B;
}

body.page-brand.is-brandPlain .layer-brandBand,
body.page-brand.is-brandPlain .img-brandArtwork {
    display: none;
}

@media (max-width: 991.98px) {
    body.page-brand.is-brandPlain .layer-content>.layer-section {
        padding-right: 24px;
    }
}


/* Confirm details and set password panel */

.panel-details {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.heading-brandPanel {
    color: #ECEADA;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 10px;
    text-align: center;
}

@media (min-width: 992px) {
    .heading-brandPanel {
        font-size: 32px;
    }
}

.panel-detailsBody {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.panel-detailsLocked,
.panel-detailsPassword {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ==========================================================================
   LEAD '26 form fields (reusable on any .page-brand form)
   ========================================================================== */

.panel-brandRow {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 576px) {
    .panel-brandRow {
        flex-direction: row;
    }
    .panel-brandRow .form-brand {
        flex: 1 1 0;
        min-width: 0;
    }
    .panel-brandRow .form-brand.is-narrow {
        flex: 0 0 207px;
    }
}

body.page-brand .standardForm .form-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

body.page-brand .standardForm .form-brand>label {
    color: #ECEADA;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

body.page-brand .standardForm .form-brand .form-control {
    background-color: transparent;
    border: 1px solid rgba(206, 210, 213, 0.35);
    border-radius: 8px;
    box-shadow: none;
    color: #ECEADA;
    font-size: 16px;
    font-weight: 400;
    height: 46px;
    line-height: 1.2;
    padding: 0 18px;
}

body.page-brand .standardForm .form-brand .form-control::placeholder {
    color: rgba(236, 234, 218, 0.7);
    opacity: 1;
}

body.page-brand .standardForm .form-brand .form-control:focus {
    border-color: #ECEADA;
}


/* Read-only details pulled from the invitee list */

body.page-brand .standardForm .form-brand .form-control:disabled {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(206, 210, 213, 0.16);
    background-image: none;
    color: #CED2D5;
    cursor: default;
    opacity: 1;
    -webkit-text-fill-color: #CED2D5;
}


/* Mobile number: country code dropdown + number, side by side */

.panel-brandPhone {
    display: flex;
    gap: 12px;
}

.panel-brandPhone>.form-control {
    flex: 1 1 0;
    min-width: 0;
}

.panel-brandCode {
    flex: 0 0 120px;
    position: relative;
}


/* The list shows "Malaysia (+60)"; the box itself shows just the code (.panel-codeValue on top) */

body.page-brand .standardForm .panel-brandCode select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CED2D5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4l4-4'/%3e%3c/svg%3e");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    color: transparent;
    cursor: pointer;
    padding-right: 38px;
    width: 100%;
}

body.page-brand .standardForm .panel-brandCode select.form-control option {
    background-color: #24282B;
    color: #ECEADA;
}

.panel-codeValue {
    color: #ECEADA;
    font-size: 16px;
    left: 19px;
    line-height: 1.2;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.panel-brandNote {
    color: #CED2D5;
    font-size: 14px;
    line-height: normal;
    margin: 0;
}

.panel-brandNote strong {
    font-weight: 700;
}

.panel-brandNote a {
    color: #EF3200;
    font-weight: 600;
    text-decoration: underline;
}

.panel-brandNote a:hover {
    color: #EF3200;
    opacity: 0.8;
}


/* Password field with show/hide toggle */

.panel-brandPassword {
    position: relative;
}

body.page-brand .standardForm .panel-brandPassword .form-control {
    padding-right: 56px;
}

.panel-brandPassword+.panel-brandNote {
    margin-top: -2px;
}

.btn-brandVisibility {
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 0;
    opacity: 0.7;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 11px;
    transition: opacity 0.2s ease;
}

.btn-brandVisibility.is-confirm {
    right: 19.76px;
}

.btn-brandVisibility:hover,
.btn-brandVisibility.is-visible {
    opacity: 1;
}

.btn-brandVisibility:focus-visible {
    border-radius: 4px;
    outline: 2px solid #EF3200;
    outline-offset: 2px;
}

.btn-brandVisibility img {
    max-width: none;
}


/* Square single-choice options (e.g. dietary requirement) */

.panel-brandOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 67px;
    margin-top: 2px;
}

body.page-brand .standardForm .form-brandCheck {
    align-items: flex-start;
    color: #ECEADA;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    gap: 8px;
    line-height: 24px;
    margin: 0;
}

.panel-brandOptions .form-brandCheck:first-child {
    min-width: 70px;
}

.form-brandCheck input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(206, 210, 213, 0.35);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    height: 24px;
    margin: 0;
    width: 24px;
}

.form-brandCheck input:checked {
    background-color: #EF3200;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ECEADA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    border-color: #EF3200;
}

.form-brandCheck input:focus-visible {
    outline: 2px solid #ECEADA;
    outline-offset: 2px;
}


/* Primary pill button */

.btn-brandPrimary {
    background-color: #EF3200;
    border: 0;
    border-radius: 40px;
    color: #ECEADA;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    letter-spacing: 2px;
    line-height: normal;
    padding: 0 24px;
    text-transform: uppercase;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    width: 100%;
}

.btn-brandPrimary:hover,
.btn-brandPrimary:focus {
    background-color: #D42C00;
    color: #ECEADA;
}

.btn-brandPrimary:focus-visible {
    outline: 2px solid #ECEADA;
    outline-offset: 2px;
}

.btn-brandPrimary:disabled {
    background-color: #EF3200;
    cursor: not-allowed;
    opacity: 0.4;
}


/* Same button used as a link (e.g. "Back to login") */

a.btn-brandPrimary {
    align-items: center;
    display: flex;
    justify-content: center;
    text-decoration: none;
}


/* ==========================================================================
   Questionnaire page (profile/questionaire.blade.php)
   ========================================================================== */


/* Intro card */

.panel-brandIntro {
    align-items: center;
    background-color: rgba(236, 234, 218, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0 auto;
    max-width: 880px;
    padding: 32px 20px 40px;
    text-align: center;
    width: 100%;
}

.tag-brandDuration {
    align-items: center;
    border: 1px solid rgba(206, 210, 213, 0.35);
    border-radius: 999px;
    color: #ECEADA;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    line-height: 22px;
    margin: 0;
    padding: 5px 14px 5px 12px;
}

.tag-brandDuration img {
    max-width: none;
}


/* Status variant, e.g. "Part 1 Completed" */

.tag-brandDuration.is-complete {
    border-color: rgba(3, 207, 203, 0.25);
}

.panel-brandIntroText {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.panel-brandIntroText h1 {
    color: #ECEADA;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.panel-brandIntroText p {
    color: #ECEADA;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    max-width: 540px;
}


/* The three registration parts (profile/questionaire.blade.php): stacked with down arrows,
   side by side with right arrows from 768px. Revealed one by one by the page script. */

.listing-regParts {
    display: flex;
    flex-direction: column;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.card-regPart {
    align-items: center;
    background-color: rgba(4, 4, 4, 0.35);
    border: 1px solid rgba(236, 234, 218, 0.2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 24px 20px;
    position: relative;
    text-align: center;
}


/* Part 1 is the step they're about to start */

.card-regPart.is-current {
    border-color: #EF3200;
    /* 2px outline in total; the extra 1px is drawn inside, so the card stays the same size as the others */
    box-shadow: inset 0 0 0 1px #EF3200;
}


/* Red pill with the part, e.g. "Part 1" */

.card-regPart .panel-partNumber {
    align-items: center;
    background-color: #EF3200;
    border-radius: 999px;
    color: #ECEADA;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
    justify-content: center;
    letter-spacing: 1px;
    line-height: normal;
    margin-bottom: 4px;
    padding: 0 16px;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-regPart .panel-partTitle {
    color: #ECEADA;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}


/* Arrow to the next card, centred in the gap (pointing down while stacked) */

.card-regPart .panel-partArrow {
    fill: none;
    height: 14px;
    left: calc(50% - 16px);
    overflow: visible;
    position: absolute;
    stroke: #EF3200;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    top: calc(100% + 13px);
    transform: rotate(90deg);
    width: 32px;
}


/* Reveal: cards fade up, then the arrow draws towards the next card */

.listing-regParts.is-animated .card-regPart {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.listing-regParts.is-animated .card-regPart.is-shown {
    opacity: 1;
    transform: none;
}

.listing-regParts.is-animated .panel-arrowLine {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    transition: stroke-dashoffset 0.35s ease;
}

.listing-regParts.is-animated .panel-arrowHead {
    opacity: 0;
    transition: opacity 0.15s ease 0.35s;
}

.listing-regParts.is-animated .card-regPart.is-linked .panel-arrowLine {
    stroke-dashoffset: 0;
}

.listing-regParts.is-animated .card-regPart.is-linked .panel-arrowHead {
    opacity: 1;
}

@media (min-width: 768px) {
    .listing-regParts {
        flex-direction: row;
    }
    .card-regPart {
        flex: 1 1 0;
        min-width: 0;
        padding: 28px 16px;
    }
    .card-regPart .panel-partArrow {
        left: calc(100% + 4px);
        top: calc(50% - 7px);
        transform: none;
    }
}

.panel-brandIntro .btn-brandPrimary {
    font-size: 18px;
    max-width: 656px;
    /* Grows if a longer label wraps on small screens (e.g. "Start My Registration") */
    height: auto;
    min-height: 48px;
    padding-bottom: 12px;
    padding-top: 12px;
}

@media (min-width: 992px) {
    .panel-brandIntro {
        gap: 46px;
        padding: 48px 88px 80px;
    }
    .panel-brandIntroText h1 {
        font-size: 36px;
    }
}


/* Build or Think notice card is taller in the design */

@media (min-width: 992px) {
    .section-buildThinkNotice .panel-brandIntro {
        min-height: 562px;
    }
}


/* Registration complete card (profile/complete-registration.blade.php) */

.section-registrationComplete .panel-brandIntroText {
    gap: 38px;
}

.section-registrationComplete .panel-brandIntroText p {
    max-width: 653px;
}

.section-registrationComplete .panel-brandIntroText p.panel-brandStatus {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
}


/* ==========================================================================
   Login page (authentication/login.blade.php)
   ========================================================================== */

.panel-login {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.panel-loginBody {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* Microsoft / Google side by side */

.panel-welcomeSso.is-row .btn-ssoProvider {
    color: #2F2F2F;
}

@media (min-width: 576px) {
    .panel-welcomeSso.is-row {
        flex-direction: row;
    }
    .panel-welcomeSso.is-row .btn-ssoProvider {
        flex: 1 1 0;
        min-width: 0;
    }
}


/* OR divider */

.panel-brandOr {
    align-items: center;
    color: #FCFCFC;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 20px;
    line-height: 1.2;
    margin: 0;
}

.panel-brandOr::before,
.panel-brandOr::after {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    content: '';
    flex: 1 1 0;
}

.panel-loginFields {
    display: flex;
    flex-direction: column;
    gap: 26px;
}


/* Outlined fields on the black background */

body.page-brand .standardForm .form-brand.is-outlined {
    gap: 11px;
}

body.page-brand .standardForm .form-brand.is-outlined .form-control {
    /* Same black as the page, so the rock artwork never shows through on small screens */
    background-color: #040404;
    border-color: #CED2D5;
    padding: 0 28px;
}

body.page-brand .standardForm .form-brand.is-outlined .panel-brandPassword .form-control {
    padding-right: 56px;
}

body.page-brand .standardForm .form-brand.is-outlined .form-control::placeholder {
    color: rgba(236, 234, 218, 0.5);
}

body.page-brand .standardForm .form-brand .form-control.is-invalid {
    background-image: none;
    border-color: #EF3200;
}

.panel-forgot {
    margin: 0;
    padding-bottom: 8px;
    text-align: right;
}


/* Links on the black login-style pages: Terra Red, underlined on hover (a darker red would be too dim on black) */

.panel-forgot a,
.panel-loginRegister a {
    color: #EF3200;
    font-size: 16px;
    text-decoration: none;
}

.panel-forgot a:hover,
.panel-loginRegister a:hover {
    color: #EF3200;
    text-decoration: underline;
}

.panel-loginRegister {
    color: #CED2D5;
    font-size: 14px;
    margin: 0;
    text-align: center;
}

.panel-loginRegister a {
    font-size: 14px;
}


/* Solid disabled button, so the rock artwork can't show through it on small screens */

.panel-login .btn-brandPrimary:disabled {
    background-color: #621602;
    color: #8A8880;
    opacity: 1;
}


/* Field errors on the login-style pages (login, forgot / reset password) */

body.page-brand .panel-login .form-brand .span-errMsg {
    color: #EF3200;
    font-size: 14px;
    line-height: 1.4;
    padding: 0;
}


/* Embedded Easyforms questionnaire */

.layer-brandEmbed {
    margin: 0 auto;
    max-width: 880px;
    width: 100%;
}


/* ==========================================================================
   Build or Think page (profile/activity-registration.blade.php)
   ========================================================================== */

[v-cloak] {
    display: none;
}

.layer-buildThink {
    margin: 0 auto;
    max-width: 880px;
    width: 100%;
}

.layer-buildThink .panel-title {
    color: #ECEADA;
    margin-bottom: 32px;
    text-align: center;
}

.layer-buildThink .panel-title h1 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 12px;
}

.layer-buildThink .panel-title p {
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
}


/* Option cards */

.layer-buildThinkOptions {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 32px;
}

.card-session {
    align-items: flex-start;
    background-color: #CED2D5;
    border: 2px solid #CED2D5;
    border-radius: 12px;
    color: #24282B;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    min-height: 354px;
    overflow: hidden;
    padding: 26px 30px 30px;
    position: relative;
    transition: border-color 0.2s ease;
}

.card-session input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.card-session:hover,
.card-session.is-selected {
    border-color: #EF3200;
}

.card-session input:focus-visible+.panel-heading .radio-session {
    outline: 2px solid #EF3200;
    outline-offset: 2px;
}

.card-session .panel-heading {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    position: relative;
    width: 100%;
    z-index: 1;
}

.card-session .panel-heading p {
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.card-session .panel-label {
    color: rgba(36, 40, 43, 0.5);
    font-size: 13px;
    letter-spacing: 1.04px;
    margin-bottom: 6px !important;
}

.card-session .panel-name {
    color: #24282B;
    font-size: 32px;
    margin-bottom: 6px !important;
}

.card-session .panel-tagline {
    color: #24282B;
    font-size: 18px;
}

.radio-session {
    border: 1.5px solid #24282B;
    border-radius: 12px;
    flex-shrink: 0;
    height: 24px;
    width: 24px;
}

.radio-session img {
    display: none;
    max-width: none;
}

.card-session.is-selected .radio-session {
    border: 0;
}

.card-session.is-selected .radio-session img {
    display: block;
}

.card-session .panel-desc {
    color: #24282B;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    max-width: 264px;
    position: relative;
    z-index: 1;
}

.card-session .panel-spacer {
    flex: 1 0 0;
}


/* Card artwork, clipped by the card */

.card-session .panel-artwork {
    overflow: hidden;
    pointer-events: none;
    position: absolute;
}

.card-session .panel-artwork img {
    max-width: none;
    position: absolute;
}


/* Card artwork, pre-cropped to what the 428px-wide card shows in the frame, so it scales with the card.
   Both sit in the bottom right: Build the stone sculpture (263 x 195, 61.4% of the card width),
   Think the glass sphere on ripples (218 x 194, 50.9%) */

.card-session .panel-artwork.is-build {
    aspect-ratio: 526 / 390;
    bottom: 0;
    right: 0;
    width: 61.4%;
}

.card-session .panel-artwork.is-think {
    aspect-ratio: 436 / 388;
    bottom: 0;
    right: 0;
    width: 50.9%;
}

.card-session .panel-artwork.is-build img,
.card-session .panel-artwork.is-think img {
    height: 100%;
    inset: 0;
    width: 100%;
}

.tag-session {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
    padding: 4px 30px;
    position: relative;
    z-index: 1;
}

.tag-session.is-limited {
    background-color: rgba(246, 122, 89, 0.3);
    color: #EF3200;
}

.tag-session.is-full {
    background-color: rgba(36, 40, 43, 0.12);
    color: rgba(36, 40, 43, 0.6);
}

.card-session.is-full {
    border-color: #CED2D5;
    cursor: not-allowed;
}

.card-session.is-full .panel-heading,
.card-session.is-full .panel-desc,
.card-session.is-full .panel-artwork {
    opacity: 0.4;
}


/* Preference note */

.layer-buildThinkNote {
    align-items: flex-start;
    background-color: rgba(206, 210, 213, 0.15);
    border-left: 3px solid #03CFCB;
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 20px;
}

.layer-buildThinkNote img {
    flex-shrink: 0;
    max-width: none;
}

.layer-buildThinkNote p {
    color: #CED2D5;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.layer-buildThinkNote p.panel-heading {
    color: #ECEADA;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 4px;
}


/* Confirm (no back button in the registration flow) */

.layer-buildThink .panel-cta {
    display: flex;
    justify-content: flex-end;
}


/* Narrow cards: keep the description clear of the artwork */

@media (max-width: 767.98px) {
    .card-session .panel-desc {
        max-width: 62%;
    }
    .card-session .panel-artwork.is-build {
        bottom: -48px;
        height: 191px;
        right: -71px;
        width: 240px;
    }
}

@media (min-width: 768px) {
    .layer-buildThinkOptions {
        gap: 24px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 56px;
    }
    .card-session {
        height: 354px;
    }
    .layer-buildThink .panel-title {
        margin-bottom: 40px;
    }
    .layer-buildThinkNote {
        margin-bottom: 32px;
    }
    .layer-buildThink .panel-cta .btn-brandPrimary {
        width: 250px;
    }
}


/* ==========================================================================
   Pre-conference activity page (profile/pre-conference.blade.php)
   ========================================================================== */


/* Long scrolling page: top-aligned, room at the bottom for the sticky footer */

body.page-brand .layer-content>.layer-section.section-preConference {
    padding: 88px 16px 200px;
}

@media (min-width: 992px) {
    body.page-brand .layer-content>.layer-section.section-preConference {
        padding: 128px 24px 160px;
    }
}

.layer-activity {
    display: flex;
    flex-direction: column;
    gap: 38px;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

.layer-activity .panel-title {
    text-align: center;
}

.layer-activity .panel-title h1 {
    color: #ECEADA;
    font-size: 28px;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 8px;
}

.layer-activity .panel-title p {
    color: #CED2D5;
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
}


/* Activity cards */

.layer-activityGrid {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .layer-activityGrid {
        /* 1fr rows: every row (so every card) is as tall as the tallest card, and it updates as times are picked */
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .layer-activityGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card-activity {
    background-color: rgba(206, 210, 213, 0.1);
    border: 2px solid rgba(206, 210, 213, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    min-height: 301px;
    overflow: hidden;
    padding: 22px;
    position: relative;
    transition: border-color 0.2s ease;
}

.card-activity.is-selected {
    border-color: #EF3200;
}


/* Colour strip along the top of each tour card (6px: the top border + a 4px bar), cycling
   Terra Red, Waterlight, Alpine Bloom, Golden Glow. The opt-out card stays plain. */

.layer-activityGrid .card-activity:not(.is-optOut) {
    border-top-color: var(--activity-strip);
}

.layer-activityGrid .card-activity:not(.is-optOut)::before {
    background-color: var(--activity-strip);
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.layer-activityGrid .card-activity:nth-child(4n+1) {
    --activity-strip: #EF3200;
}

.layer-activityGrid .card-activity:nth-child(4n+2) {
    --activity-strip: #03CFCB;
}

.layer-activityGrid .card-activity:nth-child(4n+3) {
    --activity-strip: #DF7ED2;
}

.layer-activityGrid .card-activity:nth-child(4n+4) {
    --activity-strip: #EDDB00;
}

.card-activity .icon-selected {
    max-width: none;
    position: absolute;
    right: 14px;
    top: 11px;
}

.card-activity .panel-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.2s ease;
}

.card-activity.is-disabled .panel-info {
    opacity: 0.5;
}

.card-activity .panel-info p {
    margin: 0;
}

.card-activity .panel-company {
    color: rgba(236, 234, 218, 0.41);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.04px;
    line-height: normal;
    padding-right: 32px;
    text-transform: uppercase;
}

.card-activity .panel-name {
    color: #CED2D5;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}

.card-activity .panel-location,
.card-activity .panel-warning {
    align-items: center;
    display: flex;
    font-size: 15px;
    font-weight: 600;
}

.modal-activity .panel-warning {
    align-items: center;
    display: flex;
    font-size: 15px;
    font-weight: 600;
}

.card-activity .panel-location {
    color: #CED2D5;
    gap: 8px;
    font-size: 15px;
    line-height: normal;
}

.card-activity .panel-description {
    color: #CED2D5;
    font-size: 15px;
    font-weight: 600;
}

.card-activity .panel-warning {
    color: #03CFCB;
    gap: 5px;
    line-height: 1.4;
}

.modal-activity .panel-warning {
    color: #03CFCB;
    gap: 5px;
    line-height: 1.4;
}

.card-activity .panel-location img,
.card-activity .panel-warning img {
    flex-shrink: 0;
    max-width: none;
}

.card-activity .tag-limited {
    align-self: flex-start;
    background-color: rgba(246, 122, 89, 0.18);
    border-radius: 4px;
    color: #EF3200;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.28px;
    line-height: 1.2;
    padding: 4px 20px;
}

.card-activity .panel-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* Chosen dates and times (one chip each), with X to remove it; limestone chip as in the Figma */

.panel-activityPreferences {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel-activityPreference {
    align-items: center;
    background-color: #ECEADA;
    border: 1px solid rgba(206, 210, 213, 0.15);
    border-radius: 8px;
    color: #222222;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 12px;
    justify-content: space-between;
    line-height: normal;
    padding: 10px 12px;
}

.btn-removePreference {
    background: none;
    border: 0;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 0;
    opacity: 0.8;
    padding: 0;
}

.btn-removePreference:hover {
    opacity: 1;
}

.btn-removePreference img {
    height: 18px;
    max-width: none;
    width: 18px;
}


/* Card buttons */

.btn-activity {
    background-color: #ECEADA;
    border: 0;
    border-radius: 999px;
    color: #24282B;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    line-height: normal;
    transition: background-color 0.2s ease;
    width: 100%;
}

.btn-activity:hover {
    background-color: #FFFFFF;
}

.btn-activity.is-selected {
    background-color: #EF3200;
    color: #ECEADA;
    letter-spacing: 2px;
}

.btn-activity.is-selected:hover {
    background-color: #D42C00;
}

.btn-activity:disabled {
    background-color: #CFCFCF;
    color: #7F7F7F;
    cursor: not-allowed;
}

.btn-activity.is-selected:disabled:hover {
    background-color: #CFCFCF;
}

.btn-activity:focus-visible,
.btn-removePreference:focus-visible {
    outline: 2px solid #ECEADA;
    outline-offset: 2px;
}


/* Note under the grid */

.layer-activityNote {
    align-items: center;
    background-color: rgba(206, 210, 213, 0.15);
    border-left: 2px solid #03CFCB;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
}

.layer-activityNote img {
    flex-shrink: 0;
    max-width: none;
}

.layer-activityNote p {
    color: #CED2D5;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}


/* Sticky footer */

.layer-activityFooter {
    background-color: #ECEADA;
    border-top: 1px solid #E8E8E8;
    bottom: 0;
    box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.08);
    left: 0;
    padding: 16px;
    position: fixed;
    right: 0;
    z-index: 1050;
}

.layer-activityFooter .panel-inner {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto;
    max-width: 1200px;
}

.layer-activityFooter .panel-status {
    flex: 1 1 0;
    min-width: 0;
}

.layer-activityFooter .panel-status p {
    line-height: normal;
    margin: 0;
}

.layer-activityFooter .panel-count {
    color: #24282B;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 2px !important;
}

.layer-activityFooter .panel-summary {
    color: rgba(36, 40, 43, 0.65);
    font-size: 14px;
}


/* Numbered picks, in the order they were selected */

.listing-selectedRanks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.listing-selectedRanks li {
    align-items: center;
    color: rgba(36, 40, 43, 0.65);
    display: flex;
    font-size: 14px;
    gap: 8px;
    line-height: normal;
    margin: 0;
    min-width: 0;
}

.listing-selectedRanks .panel-rank {
    align-items: center;
    background-color: #EF3200;
    border-radius: 16px;
    color: #ECEADA;
    display: flex;
    flex: none;
    font-size: 14px;
    font-weight: 600;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.btn-activitySubmit {
    background-color: #EF3200;
    border: 0;
    border-radius: 999px;
    color: #ECEADA;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    line-height: normal;
    transition: background-color 0.2s ease;
    width: 100%;
}

.btn-activitySubmit:hover {
    background-color: #D42C00;
}

.btn-activitySubmit:disabled {
    background-color: #CFCFCF;
    color: #7F7F7F;
    cursor: not-allowed;
    font-weight: 600;
    letter-spacing: 0.64px;
}

@media (min-width: 768px) {
    .layer-activityFooter {
        padding: 16px 24px;
    }
    .layer-activityFooter .panel-inner {
        align-items: center;
        flex-direction: row;
        gap: 24px;
    }
    .btn-activitySubmit {
        width: 280px;
    }
}


/* Date and time pop-up */

.layer-activityOverlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow-y: auto;
    padding: 16px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
}

.modal-activity {
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.2);
    color: #24282B;
    margin: auto;
    max-width: 800px;
    overflow: hidden;
    width: 100%;
}

.modal-activity p {
    margin: 0;
}

.modal-activity .panel-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 24px 20px;
    position: relative;
}

.modal-activity .panel-company {
    color: rgba(36, 40, 43, 0.65);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.04px;
    line-height: normal;
    padding-right: 48px;
    text-transform: uppercase;
}

.modal-activity .panel-name {
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    padding-right: 32px;
}

.modal-activity .panel-desc {
    color: rgba(36, 40, 43, 0.65);
    font-size: 16px;
    line-height: normal;
}


/* "Out-of-office" reminder under the time options */

.modal-activity .panel-clearance {
    align-items: flex-start;
    /* background-color: rgba(236, 234, 218, 0.6); */
    background-color: rgba(3, 207, 203, 0.09);
    border-radius: none;
    border-left: 4px solid #03CFCB;
    color: #24282B;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    line-height: 20px;
    padding: 12px 16px;
}

.modal-activity .panel-clearance svg {
    fill: none;
    flex: none;
    height: 20px;
    stroke: #24282B;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 20px;
}

.modal-activity .panel-location {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 8px;
    line-height: normal;
}

.modal-activity .panel-location img {
    flex-shrink: 0;
    height: 16px;
    max-width: none;
    width: 16px;
}

.btn-closeActivity {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 20px;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 17px;
    width: 40px;
}

.btn-closeActivity:hover {
    background-color: #F2F2F2;
}

.btn-closeActivity img {
    max-width: none;
}

.modal-activity .panel-body {
    border-bottom: 1px solid #E8E8E8;
    border-top: 1px solid #E8E8E8;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px 24px 32px;
}

.modal-activity .panel-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-activity .panel-step>p {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}

.modal-activity .panel-options {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
}

.btn-activityChip {
    background-color: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    color: #24282B;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    min-height: 42px;
    padding: 10px 20px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-activityChip.is-time {
    font-size: 15px;
    min-height: 46px;
}

.btn-activityChip:hover {
    border-color: #24282B;
}

.btn-activityChip.is-active {
    background-color: #24282B;
    border-color: #24282B;
    color: #FFFFFF;
}

.btn-activityChip:focus-visible {
    outline: 2px solid #EF3200;
    outline-offset: 2px;
}

.modal-activity .panel-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 24px;
}

.modal-activity .panel-selection {
    flex: 1 1 0;
    min-width: 0;
}

.modal-activity .panel-selection p:first-child {
    color: rgba(36, 40, 43, 0.65);
    font-size: 14px;
    line-height: normal;
    margin-bottom: 2px;
}

.modal-activity .panel-selection .panel-value {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}

.modal-activity .panel-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0 21px;
    justify-content: flex-end;
}

@media (max-width: 575.98px) {
    .modal-activity .panel-buttons .btn-activityConfirm {
        flex: 1 1 auto;
        width: auto;
    }
}

.btn-activityText {
    background: none;
    border: 0;
    color: #24282B;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    line-height: normal;
    padding: 0;
}

.btn-activityText:hover {
    opacity: 0.7;
}

.btn-activityText.is-remove {
    color: #EF3200;
    margin-right: auto;
}

.btn-activityConfirm {
    background-color: #EF3200;
    border: 0;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    line-height: normal;
    transition: background-color 0.2s ease;
    width: 200px;
}

.btn-activityConfirm:hover {
    background-color: #D42C00;
}

.btn-activityConfirm:disabled {
    background-color: #CFCFCF;
    color: #7F7F7F;
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .modal-activity .panel-header {
        padding: 32px 40px 24px;
    }
    .modal-activity .panel-name {
        font-size: 28px;
    }
    .modal-activity .panel-body {
        padding: 24px 40px 48px;
    }
    .modal-activity .panel-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .modal-activity .panel-footer {
        align-items: center;
        flex-direction: row;
        padding: 20px 40px 24px;
    }
}


/* Questionnaire notice ('brand_artwork' => 'blocks', img-auth-blocks.png, 774 x 414): bottom right,
   against the band (32px, 58px from 992px); kept smaller than the frame (576px at 1440) so it sits clear of the copy */

body.page-brand .img-brandArtwork.is-blocks {
    --artwork-width: 60vw;
    left: auto;
    right: 32px;
    width: var(--artwork-width);
}

@media (min-width: 992px) {
    body.page-brand .img-brandArtwork.is-blocks {
        --artwork-width: clamp(420px, 40vw, 820px);
        right: 58px;
    }
}


/* Questionnaire notice and registration complete ('brand_artwork' => 'sculpture', img-auth-sculpture-right.png,
   945 x 614): the whole sculpture in the bottom right, running under the band as in the frame (774px at 1440) */

body.page-brand .img-brandArtwork.is-sculpture {
    --artwork-width: 70vw;
    left: auto;
    right: 0;
    width: var(--artwork-width);
}

@media (min-width: 992px) {
    body.page-brand .img-brandArtwork.is-sculpture {
        --artwork-width: clamp(560px, 53.75vw, 1100px);
    }
}