/* ==========================================================================
   MMOPS EVENT HUB - SELF-HOSTED MONTSERRAT
   AppHtml/Fonts/Montserrat-VariableFont_wght.ttf
   AppHtml/Fonts/Montserrat-Italic-VariableFont_wght.ttf
   ========================================================================== */

@font-face {
    font-family: "Montserrat";
    src: url("../Fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../Fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

/* ==========================================================================
   MMOPS EVENT HUB - Ticketing / Raffle Checkout
   Responsive premium theme
   ========================================================================== */

/* ------------------------------
   Theme tokens
   ------------------------------ */

.MMSTicketingView {
    --mmops-orange: #f4a11e;
    --mmops-orange-dark: #aa7015;
    --mmops-charcoal: #181818;
    --mmops-charcoal-2: #262626;
    --mmops-page: #f3f3f1;
    --mmops-panel: #ffffff;
    --mmops-border: #e2e0dc;
    --mmops-muted: #707070;
    --mmops-soft: #f8f8f6;

    background: var(--mmops-page);
    color: var(--mmops-charcoal);
    font-family: "Montserrat", Arial, sans-serif;

    /* Keep mobile Safari/Chrome from independently inflating text sizes. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* ------------------------------
   Page / structural layout
   ------------------------------ */

.MMSTicketingMain {
    box-sizing: border-box;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 28px 38px 28px;
}

.MMSTicketCataloguePanel,
.MMSTicketCheckoutDetails,
.MMSTicketPaymentDetails {
    box-sizing: border-box;
    padding-right: 22px;
}

.MMSTicketProductContainer {
    width: 100%;
}


/* ------------------------------
   Hero
   ------------------------------ */

.MMSTicketCampaignHero {
    box-sizing: border-box;
    margin-bottom: 24px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #242424 !important;
    border-radius: 14px;
    background: var(--mmops-charcoal);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .10);
}

.MMSTicketHeroImage {
    overflow: hidden;
    background: #111111;
}

.MMSTicketHeroText {
    box-sizing: border-box;
    padding: 24px 30px 28px 30px;
    color: #ffffff;
    border-top: 3px solid var(--mmops-orange);
}

.MMSTicketHeroText h1 {
    margin: 4px 0 10px 0;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 550;
    letter-spacing: -.02em;
}

.MMSTicketHeroEyebrow {
    color: var(--mmops-orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.MMSTicketHeroDescription,
.MMSTicketCampaignIntro {
    max-width: 900px;
    color: #d5d5d5;
    font-size: 14px;
    line-height: 1.65;
}

.MMSTicketHeroMeta {
    display: inline-flex;
    align-items: center;
    margin: 14px 18px 0 0;
    color: #ededed;
    font-size: 12px;
}


/* ------------------------------
   Section headings
   ------------------------------ */

.MMSTicketSectionTitle {
    box-sizing: border-box;
    margin: 2px 0 16px 0 !important;
    padding: 4px 0 7px 13px !important;
    border-left: 4px solid var(--mmops-orange);
    color: var(--mmops-charcoal) !important;
    font-size: 23px !important;
    font-weight: 600 !important;
    letter-spacing: -.015em;
}


/* ------------------------------
   Ticket product cards
   ------------------------------ */

.MMSTicketProductCard {
    box-sizing: border-box;
    min-height: 330px;
    margin: 0 10px 20px 0;
    padding: 14px;
    overflow: hidden;

    border: 1px solid var(--mmops-border) !important;
    border-radius: 12px;
    background: var(--mmops-panel);

    box-shadow: 0 4px 18px rgba(0, 0, 0, .045);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .MMSTicketProductCard:hover {
        transform: translateY(-2px);
        border-color: rgba(244, 161, 30, .85) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .09);
    }
}

.MMSTicketProductImage {
    margin-bottom: 13px;
    overflow: hidden;
    border-radius: 8px;
    background: #efefed;
}

.MMSTicketProductTitle {
    min-height: 44px;
    color: var(--mmops-charcoal) !important;
    font-size: 15px !important;
    line-height: 1.4;
    font-weight: 600 !important;
}

.MMSTicketProductPrice {
    margin: 3px 0 12px 0;
    color: var(--mmops-orange-dark) !important;
    font-size: 23px !important;
    line-height: 1.2;
    font-weight: 700 !important;
}


/* ------------------------------
   Quantity selector
   ------------------------------ */

.MMSTicketQtySelector {
    box-sizing: border-box;
    margin: 11px 0 12px 0;
}

.MMSTicketQtyButton button {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 !important;

    border: 1px solid var(--mmops-charcoal) !important;
    background: var(--mmops-charcoal) !important;
    color: #ffffff !important;

    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 500 !important;

    cursor: pointer;
}

.MMSTicketQtyMinus button {
    border-radius: 7px 0 0 7px !important;
}

.MMSTicketQtyPlus button {
    border-color: var(--mmops-orange) !important;
    border-radius: 0 7px 7px 0 !important;
    background: var(--mmops-orange) !important;
    color: var(--mmops-charcoal) !important;
    font-weight: 700 !important;
}

@media (hover: hover) and (pointer: fine) {
    .MMSTicketQtyMinus button:hover {
        background: #303030 !important;
    }

    .MMSTicketQtyPlus button:hover {
        border-color: var(--mmops-orange-dark) !important;
        background: var(--mmops-orange-dark) !important;
        color: #ffffff !important;
    }
}

.MMSTicketProductQty input,
.MMSTicketProductQty input.WebFrm_Input {
    box-sizing: border-box !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 6px !important;

    border-top: 1px solid #cfcfcf !important;
    border-right: 0 !important;
    border-bottom: 1px solid #cfcfcf !important;
    border-left: 0 !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    color: var(--mmops-charcoal) !important;

    text-align: center !important;
    text-indent: 0 !important;

    font-size: 17px !important;
    line-height: 46px !important;
    font-weight: 650 !important;

    opacity: 1 !important;
    -webkit-text-fill-color: var(--mmops-charcoal) !important;
}


/* ------------------------------
   Primary / secondary buttons
   ------------------------------ */

.MMSTicketAddButton {
    margin-top: 2px;
}

.MMSTicketAddButton button,
.MMSTicketCheckoutButton button,
.MMSTicketPayButton button {
    min-height: 46px !important;
    border: 1px solid var(--mmops-orange) !important;
    border-radius: 7px !important;
    background: var(--mmops-orange) !important;
    color: var(--mmops-charcoal) !important;

    font-weight: 700 !important;
    letter-spacing: .01em;
}

@media (hover: hover) and (pointer: fine) {
    .MMSTicketAddButton button:hover,
    .MMSTicketCheckoutButton button:hover,
    .MMSTicketPayButton button:hover {
        border-color: var(--mmops-orange-dark) !important;
        background: var(--mmops-orange-dark) !important;
        color: #ffffff !important;
    }
}

.MMSTicketSecondaryButton button {
    min-height: 44px !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: var(--mmops-charcoal) !important;
    font-weight: 550 !important;
}

@media (hover: hover) and (pointer: fine) {
    .MMSTicketSecondaryButton button:hover {
        border-color: var(--mmops-charcoal) !important;
        background: var(--mmops-charcoal) !important;
        color: #ffffff !important;
    }
}


/* ------------------------------
   Cart
   ------------------------------ */

.MMSTicketCartPanel {
    box-sizing: border-box;
    position: sticky;
    top: 18px;
    align-self: flex-start;

    padding: 19px;

    border: 1px solid var(--mmops-border) !important;
    border-top: 4px solid var(--mmops-orange) !important;
    border-radius: 12px;
    background: var(--mmops-panel);

    box-shadow: 0 9px 28px rgba(0, 0, 0, .07);
}

.MMSTicketCartTitle {
    margin-bottom: 12px;
    color: var(--mmops-charcoal) !important;
    font-size: 20px !important;
    font-weight: 650 !important;
}

.MMSTicketCartList {
    margin-bottom: 14px;
}

.MMSTicketCartTotalLabel {
    padding-top: 9px;
    color: var(--mmops-charcoal) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

.MMSTicketCartTotal input {
    border: 0 !important;
    background: transparent !important;
    color: var(--mmops-charcoal) !important;
    text-align: right !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: var(--mmops-charcoal) !important;
    opacity: 1 !important;
}

.MMSTicketSecureMessage {
    margin-top: 11px;
    padding: 11px 12px;

    border-left: 3px solid var(--mmops-orange);
    border-radius: 5px;
    background: var(--mmops-soft);

    color: #666666;
    text-align: left;
    font-size: 10px;
    line-height: 1.45;
}


/* ------------------------------
   Checkout / payment panels
   ------------------------------ */

.MMSTicketCheckoutDetails,
.MMSTicketPaymentDetails {
    box-sizing: border-box;
    padding: 22px;

    border: 1px solid var(--mmops-border) !important;
    border-radius: 12px;
    background: var(--mmops-panel);

    box-shadow: 0 5px 22px rgba(0, 0, 0, .045);
}

.MMSTicketForm {
    margin-bottom: 10px;
}

.MMSTicketForm input,
.MMSTicketForm select,
.MMSTicketCardNumber input {
    box-sizing: border-box !important;
    min-height: 44px !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: var(--mmops-charcoal) !important;
}

.MMSTicketForm input:focus,
.MMSTicketForm select:focus,
.MMSTicketCardNumber input:focus {
    border-color: var(--mmops-orange) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(244, 161, 30, .15) !important;
}

.MMSTicketCardNumber input {
    font-size: 18px !important;
    letter-spacing: .055em;
}

.MMSTicketPaymentIntro {
    max-width: 780px;
    margin: -3px 0 18px 0;
    color: var(--mmops-muted);
    font-size: 12px;
    line-height: 1.6;
}

.MMSTicketPaymentAmount {
    margin-bottom: 14px;
}

.MMSTicketPaymentAmount input {
    min-height: 48px !important;
    border: 1px solid #dedede !important;
    border-radius: 7px !important;
    background: var(--mmops-soft) !important;
    color: var(--mmops-charcoal) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: var(--mmops-charcoal) !important;
    opacity: 1 !important;
}

.MMSTicketPaymentSecurity {
    margin: 8px 0 16px 0;
    padding: 12px 14px;

    border: 1px solid #e7e7e7;
    border-left: 3px solid var(--mmops-orange);
    border-radius: 6px;
    background: var(--mmops-soft);

    color: #616161;
    text-align: center;
    font-size: 10px;
}


/* ------------------------------
   Confirmation
   ------------------------------ */

.MMSTicketConfirmationPanel {
    box-sizing: border-box;
    max-width: 760px;
    margin: 42px auto;
    padding: 52px 30px;

    border: 1px solid var(--mmops-border) !important;
    border-top: 4px solid var(--mmops-orange) !important;
    border-radius: 14px;
    background: #ffffff;

    text-align: center;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}

.MMSTicketConfirmationPanel h2 {
    margin: 14px 0 8px 0;
    color: var(--mmops-charcoal);
    font-size: 25px;
    font-weight: 600;
}

.MMSTicketConfirmationPanel p {
    color: var(--mmops-muted);
}

.MMSTicketConfirmationIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border: 2px solid var(--mmops-orange);
    border-radius: 50%;
    background: rgba(244, 161, 30, .08);
    color: var(--mmops-charcoal);

    font-size: 27px;
    font-weight: 700;
}

.MMSTicketConfirmationRef,
.MMSTicketConfirmationAmount {
    margin-top: 13px;
    color: #555555;
    font-size: 12px;
}


/* ==========================================================================
   Responsive polish
   Structural reflow is handled by DataFlex WebSetResponsive rules.
   ========================================================================== */

@media (max-width: 1024px) {
    .MMSTicketingMain {
        padding: 20px;
    }

    .MMSTicketCataloguePanel,
    .MMSTicketCheckoutDetails,
    .MMSTicketPaymentDetails {
        padding-right: 0;
    }

    .MMSTicketCartPanel {
        position: static;
        margin-top: 20px;
    }
}

@media (max-width: 700px) {
    .MMSTicketingMain {
        padding: 10px;
    }

    .MMSTicketCampaignHero {
        margin-bottom: 16px;
        border-radius: 10px;
    }

    .MMSTicketHeroText {
        padding: 18px 16px 20px 16px;
    }

    .MMSTicketHeroText h1 {
        font-size: 27px;
    }

    .MMSTicketHeroMeta {
        display: block;
        margin-top: 9px;
    }

    .MMSTicketSectionTitle {
        margin-bottom: 12px !important;
        font-size: 20px !important;
    }

    .MMSTicketProductCard {
        min-height: 0;
        margin-right: 0;
        margin-bottom: 12px;
        padding: 12px;
        border-radius: 10px;
    }

    .MMSTicketProductTitle {
        min-height: 0;
        font-size: 15px !important;
    }

    .MMSTicketProductPrice {
        font-size: 22px !important;
    }

    .MMSTicketQtyButton button,
    .MMSTicketProductQty input,
    .MMSTicketProductQty input.WebFrm_Input {
        min-height: 50px !important;
        height: 50px !important;
    }

    .MMSTicketQtyButton button {
        font-size: 23px !important;
    }

    .MMSTicketProductQty input,
    .MMSTicketProductQty input.WebFrm_Input {
        line-height: 50px !important;
        font-size: 18px !important;
    }

    .MMSTicketCartPanel,
    .MMSTicketCheckoutDetails,
    .MMSTicketPaymentDetails {
        padding: 15px;
        border-radius: 10px;
    }

    .MMSTicketingView input,
    .MMSTicketingView select {
        font-size: 16px !important;
    }

    .MMSTicketAddButton button,
    .MMSTicketCheckoutButton button,
    .MMSTicketPayButton button,
    .MMSTicketSecondaryButton button {
        min-height: 48px !important;
    }

    .MMSTicketCheckoutButton,
    .MMSTicketPayButton,
    .MMSTicketSecondaryButton {
        margin-top: 7px;
    }

    .MMSTicketConfirmationPanel {
        margin: 18px 0;
        padding: 34px 16px;
        border-radius: 10px;
    }
}


/* ==========================================================================
   Cart summary - remove DataFlex selected/current row highlighting
   ========================================================================== */

.MMSTicketCartList .WebList_Row.WebList_Selected,
.MMSTicketCartList .WebList_Row.WebList_Focus,
.MMSTicketCartList .WebList_Row.WebList_Current,
.MMSTicketCartList .WebList_Row.WebList_SelectedRow,
.MMSTicketCartList .WebList_Row.WebList_Selected:hover,
.MMSTicketCartList .WebList_Row.WebList_Focus:hover,
.MMSTicketCartList .WebList_Row.WebList_Current:hover {
    background: #ffffff !important;
    color: var(--mmops-charcoal) !important;
}

.MMSTicketCartList .WebList_Row.WebList_Selected .WebList_Cell,
.MMSTicketCartList .WebList_Row.WebList_Focus .WebList_Cell,
.MMSTicketCartList .WebList_Row.WebList_Current .WebList_Cell,
.MMSTicketCartList .WebList_Row.WebList_SelectedRow .WebList_Cell,
.MMSTicketCartList .WebList_Row.WebList_Selected > *,
.MMSTicketCartList .WebList_Row.WebList_Focus > *,
.MMSTicketCartList .WebList_Row.WebList_Current > * {
    background: #ffffff !important;
    color: var(--mmops-charcoal) !important;
    box-shadow: none !important;
}

/* Email confirmation feedback */
.MMSTicketEmailStatus {
    margin: -3px 0 9px 0;
    padding-left: 2px;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.MMSTicketEmailMatch {
    color: #4b7d28 !important;
}

.MMSTicketEmailMismatch {
    color: #b5362d !important;
}


/* ==========================================================================
   TYPOGRAPHY CONSISTENCY
   Force DataFlex native controls and list internals to use the MMOPS font.
   ========================================================================== */

.MMSTicketingView,
.MMSTicketingView input,
.MMSTicketingView select,
.MMSTicketingView textarea,
.MMSTicketingView button,
.MMSTicketingView .WebLabel,
.MMSTicketingView .WebFrm_Wrapper,
.MMSTicketingView .WebFrm_Prompt,
.MMSTicketingView .WebFrm_Input,
.MMSTicketingView .WebList,
.MMSTicketingView .WebList_Cell,
.MMSTicketingView .WebList_Row,
.MMSTicketingView .WebList_ColHead,
.MMSTicketingView .WebList_ColHead *,
.MMSTicketingView .WebList_Row *,
.MMSTicketingView .WebList_Body,
.MMSTicketingView .WebList_Header {
    font-family: "Montserrat", Arial, sans-serif !important;
}

/* Keep typed form values visually consistent with the rest of the checkout. */
.MMSTicketingView input,
.MMSTicketingView select,
.MMSTicketingView textarea,
.MMSTicketingView .WebFrm_Input {
    font-weight: 450 !important;
    letter-spacing: 0 !important;
}

/* Cart headings and row values */
.MMSTicketCartList .WebList_ColHead,
.MMSTicketCartList .WebList_ColHead *,
.MMSTicketCartList .WebList_Header,
.MMSTicketCartList .WebList_Header * {
    color: #8a8a8a !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.MMSTicketCartList .WebList_Cell,
.MMSTicketCartList .WebList_Row,
.MMSTicketCartList .WebList_Row * {
    color: var(--mmops-charcoal) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}


/* ==========================================================================
   QUANTITY STEPPER
   Both decrement and increment buttons now use the same MMOPS treatment.
   ========================================================================== */

.MMSTicketQtyMinus button,
.MMSTicketQtyPlus button {
    border-color: var(--mmops-orange) !important;
    background: var(--mmops-orange) !important;
    color: var(--mmops-charcoal) !important;
    font-weight: 700 !important;
}

@media (hover: hover) and (pointer: fine) {
    .MMSTicketQtyMinus button:hover,
    .MMSTicketQtyPlus button:hover {
        border-color: var(--mmops-orange-dark) !important;
        background: var(--mmops-orange-dark) !important;
        color: #ffffff !important;
    }
}


/* ==========================================================================
   CHECKOUT STRUCTURE
   Permanent 8-column left content host + 4-column cart.
   ========================================================================== */

.MMSTicketCheckoutContent {
    min-width: 0;
    padding-right: 18px;
}

.MMSTicketCheckoutContent .MMSTicketCataloguePanel,
.MMSTicketCheckoutContent .MMSTicketCheckoutDetails,
.MMSTicketCheckoutContent .MMSTicketPaymentDetails {
    width: 100%;
    min-width: 0;
    padding-right: 0 !important;
}

/* Make the stage panel start immediately beneath the hero. */
.MMSTicketCheckoutContent > .WebCon_Content {
    min-width: 0;
}

@media (max-width: 1100px) {
    .MMSTicketCheckoutContent {
        padding-right: 0;
    }
}


/* ==========================================================================
   OPT-IN CHECKBOX TYPOGRAPHY
   Keep the native DataFlex checkbox caption consistent with MMOPS forms.
   ========================================================================== */

.MMSTicketOptIn,
.MMSTicketOptIn *,
.MMSTicketOptIn label,
.MMSTicketOptIn span {
    font-family: "Montserrat", Arial, sans-serif !important;
    font-weight: 450 !important;
    letter-spacing: 0 !important;
}


/* ==========================================================================
   PROFILE THEMES
   The view switches between these by changing one class:
       MMSTicketingThemeLight
       MMSTicketingThemeDark
   ========================================================================== */

.MMSTicketingView.MMSTicketingThemeLight {
    color-scheme: light;

    --mmops-page: #f3f3f1;
    --mmops-panel: #ffffff;
    --mmops-border: #e2e0dc;
    --mmops-muted: #707070;
    --mmops-soft: #f8f8f6;
}


/* --------------------------------------------------------------------------
   MMOPS DARK
   Charcoal / graphite surfaces with the same MMOPS orange brand accent.
   -------------------------------------------------------------------------- */

.MMSTicketingView.MMSTicketingThemeDark {
    color-scheme: dark;

    --mmops-page: #101113;
    --mmops-panel: #1a1c1f;
    --mmops-border: #34373c;
    --mmops-muted: #a7a9ad;
    --mmops-soft: #22252a;

    background: var(--mmops-page) !important;
    color: #f2f2f2 !important;
}

.MMSTicketingThemeDark .MMSTicketingMain {
    background: transparent;
}


/* Hero remains deliberately dark in both themes, but is slightly deeper
   in Dark mode so the orange accent still separates it from the page. */
.MMSTicketingThemeDark .MMSTicketCampaignHero {
    border-color: #2d3034 !important;
    background: #0b0c0e !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .30);
}

.MMSTicketingThemeDark .MMSTicketHeroImage {
    background: #08090a;
}


/* Headings / primary text */
.MMSTicketingThemeDark .MMSTicketSectionTitle,
.MMSTicketingThemeDark .MMSTicketProductTitle,
.MMSTicketingThemeDark .MMSTicketCartTitle,
.MMSTicketingThemeDark .MMSTicketCartTotalLabel,
.MMSTicketingThemeDark .MMSTicketConfirmationPanel h2,
.MMSTicketingThemeDark .WebLabel,
.MMSTicketingThemeDark .WebFrm_Prompt,
.MMSTicketingThemeDark label {
    color: #f2f2f2 !important;
}


/* Cards / checkout surfaces */
.MMSTicketingThemeDark .MMSTicketProductCard,
.MMSTicketingThemeDark .MMSTicketCartPanel,
.MMSTicketingThemeDark .MMSTicketCheckoutDetails,
.MMSTicketingThemeDark .MMSTicketPaymentDetails,
.MMSTicketingThemeDark .MMSTicketConfirmationPanel {
    border-color: var(--mmops-border) !important;
    background: var(--mmops-panel) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

.MMSTicketingThemeDark .MMSTicketProductImage {
    background: #141619;
}


/* Forms */
.MMSTicketingThemeDark .MMSTicketForm input,
.MMSTicketingThemeDark .MMSTicketForm select,
.MMSTicketingThemeDark .MMSTicketForm textarea,
.MMSTicketingThemeDark .MMSTicketCardNumber input,
.MMSTicketingThemeDark input.WebFrm_Input,
.MMSTicketingThemeDark select.WebFrm_Input,
.MMSTicketingThemeDark textarea.WebFrm_Input {
    border-color: #3d4147 !important;
    background: #121417 !important;
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
}

.MMSTicketingThemeDark .MMSTicketForm input::placeholder,
.MMSTicketingThemeDark .MMSTicketCardNumber input::placeholder,
.MMSTicketingThemeDark input.WebFrm_Input::placeholder,
.MMSTicketingThemeDark textarea.WebFrm_Input::placeholder {
    color: #787c82 !important;
    opacity: 1 !important;
}

.MMSTicketingThemeDark select option {
    background: #16181b;
    color: #f2f2f2;
}

.MMSTicketingThemeDark .MMSTicketForm input:focus,
.MMSTicketingThemeDark .MMSTicketForm select:focus,
.MMSTicketingThemeDark .MMSTicketCardNumber input:focus,
.MMSTicketingThemeDark input.WebFrm_Input:focus {
    border-color: var(--mmops-orange) !important;
    box-shadow: 0 0 0 2px rgba(244, 161, 30, .22) !important;
}


/* Read-only amount / quantity */
.MMSTicketingThemeDark .MMSTicketProductQty input,
.MMSTicketingThemeDark .MMSTicketProductQty input.WebFrm_Input {
    border-top-color: #45494f !important;
    border-bottom-color: #45494f !important;
    background: #121417 !important;
    color: #f2f2f2 !important;
    -webkit-text-fill-color: #f2f2f2 !important;
}

.MMSTicketingThemeDark .MMSTicketCartTotal input {
    color: #f2f2f2 !important;
    -webkit-text-fill-color: #f2f2f2 !important;
}

.MMSTicketingThemeDark .MMSTicketPaymentAmount input {
    border-color: #3a3d42 !important;
    background: var(--mmops-soft) !important;
    color: #f2f2f2 !important;
    -webkit-text-fill-color: #f2f2f2 !important;
}


/* Secondary button becomes graphite rather than white. */
.MMSTicketingThemeDark .MMSTicketSecondaryButton button {
    border-color: #474b51 !important;
    background: #24272b !important;
    color: #f2f2f2 !important;
}

@media (hover: hover) and (pointer: fine) {
    .MMSTicketingThemeDark .MMSTicketSecondaryButton button:hover {
        border-color: var(--mmops-orange) !important;
        background: var(--mmops-orange) !important;
        color: var(--mmops-charcoal) !important;
    }
}


/* Supporting callouts */
.MMSTicketingThemeDark .MMSTicketSecureMessage,
.MMSTicketingThemeDark .MMSTicketPaymentSecurity {
    border-color: #363a3f;
    border-left-color: var(--mmops-orange);
    background: var(--mmops-soft);
    color: #bfc1c5;
}

.MMSTicketingThemeDark .MMSTicketPaymentIntro,
.MMSTicketingThemeDark .MMSTicketConfirmationPanel p,
.MMSTicketingThemeDark .MMSTicketConfirmationRef,
.MMSTicketingThemeDark .MMSTicketConfirmationAmount {
    color: #aeb1b5 !important;
}


/* Opt-in */
.MMSTicketingThemeDark .MMSTicketOptIn,
.MMSTicketingThemeDark .MMSTicketOptIn *,
.MMSTicketingThemeDark .MMSTicketOptIn label,
.MMSTicketingThemeDark .MMSTicketOptIn span {
    color: #e8e8e8 !important;
}


/* DataFlex cart/list internals */
.MMSTicketingThemeDark .MMSTicketCartList,
.MMSTicketingThemeDark .MMSTicketCartList .WebList,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Body,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Cell {
    background: var(--mmops-panel) !important;
    color: #ededed !important;
}

.MMSTicketingThemeDark .MMSTicketCartList .WebList_ColHead,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_ColHead *,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Header,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Header * {
    background: var(--mmops-panel) !important;
    color: #92969c !important;
}

.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row.WebList_Selected,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row.WebList_Focus,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row.WebList_Current,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row.WebList_SelectedRow,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row.WebList_Selected .WebList_Cell,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row.WebList_Focus .WebList_Cell,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row.WebList_Current .WebList_Cell,
.MMSTicketingThemeDark .MMSTicketCartList .WebList_Row.WebList_SelectedRow .WebList_Cell {
    background: var(--mmops-panel) !important;
    color: #ededed !important;
    box-shadow: none !important;
}


/* Confirmation */
.MMSTicketingThemeDark .MMSTicketConfirmationIcon {
    background: rgba(244, 161, 30, .12);
    color: #f3f3f3;
}



/* ==========================================================================
   LIGHT THEME HERO
   Use a clean white hero with MMOPS tangerine/orange text instead of black.
   ========================================================================== */

.MMSTicketingThemeLight .MMSTicketCampaignHero {
    border-color: var(--mmops-orange) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

.MMSTicketingThemeLight .MMSTicketHeroImage {
    background: #ffffff !important;
}

.MMSTicketingThemeLight .MMSTicketHeroText {
    background: #ffffff !important;
}

.MMSTicketingThemeLight .MMSTicketHeroText h1,
.MMSTicketingThemeLight .MMSTicketHeroText .MMSTicketHeroTitle,
.MMSTicketingThemeLight .MMSTicketHeroText .MMSTicketSectionTitle {
    color: var(--mmops-orange) !important;
}

.MMSTicketingThemeLight .MMSTicketHeroText p,
.MMSTicketingThemeLight .MMSTicketHeroText .MMSTicketHeroSubTitle,
.MMSTicketingThemeLight .MMSTicketHeroText .MMSTicketHeroDescription,
.MMSTicketingThemeLight .MMSTicketHeroText .WebHtmlBox {
    color: var(--mmops-charcoal) !important;
}

.MMSTicketingThemeLight .MMSTicketHeroText .MMSTicketHeroKicker,
.MMSTicketingThemeLight .MMSTicketHeroText .MMSTicketHeroMeta {
    color: var(--mmops-orange-dark) !important;
}


/* ==========================================================================
   SINGLE-PAGE PURCHASE FLOW
   Tickets -> Your Details -> Secure Payment remain on the same page.
   ========================================================================== */

.MMSTicketSinglePageSection {
    margin-bottom: 22px;
}

.MMSTicketCheckoutContent .MMSTicketCheckoutDetails,
.MMSTicketCheckoutContent .MMSTicketPaymentDetails {
    margin-top: 8px;
}

/* A subtle MMOPS divider makes the long single page feel intentionally staged. */
.MMSTicketCheckoutContent .MMSTicketCheckoutDetails,
.MMSTicketCheckoutContent .MMSTicketPaymentDetails {
    position: relative;
}

.MMSTicketCheckoutContent .MMSTicketCheckoutDetails::before,
.MMSTicketCheckoutContent .MMSTicketPaymentDetails::before {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin: 0 0 18px 0;
    border-radius: 999px;
    background: var(--mmops-orange);
}

/* Keep the running cart visible while the purchaser moves through the page. */
@media (min-width: 1101px) {
    .MMSTicketCartPanel {
        position: sticky;
        top: 18px;
        align-self: flex-start;
    }
}

@media (max-width: 768px) {
    .MMSTicketSinglePageSection {
        margin-bottom: 16px;
    }

    .MMSTicketCheckoutContent .MMSTicketCheckoutDetails,
    .MMSTicketCheckoutContent .MMSTicketPaymentDetails {
        margin-top: 4px;
    }
}


/* ==========================================================================
   TOP CART / SINGLE-PAGE ORDER SUMMARY
   Cart now sits directly below the hero and above Choose Your Tickets.
   ========================================================================== */

.MMSTicketCartPanel {
    position: static !important;
    top: auto !important;
    align-self: auto !important;
    width: 100%;
    margin: 0 0 22px 0;
}

.MMSTicketCheckoutContent {
    width: 100%;
    padding-right: 0 !important;
}

/* Amount / expiry alignment */
.MMSTicketPaymentAmount input,
.MMSTicketPaymentAmount input.WebFrm_Input {
    text-align: center !important;
}



@media (min-width: 1101px) {
    .MMSTicketCartPanel {
        position: static !important;
        top: auto !important;
    }
}


/* ==========================================================================
   MMOPS TICKETING MESSAGE MODAL
   Replaces standard ShowInfoBox presentation for the public checkout.
   ========================================================================== */

.MMOPSTicketMessageModal {
    /* Modal dialogs are rendered outside .MMSTicketingView, so define the
       MMOPS theme tokens locally instead of relying on inherited variables. */
    --mmops-orange: #f4a11e;
    --mmops-orange-dark: #aa7015;
    --mmops-charcoal: #181818;

    font-family: "Montserrat", Arial, sans-serif !important;
}

.MMOPSTicketMessageModal .WebCon_Content,
.MMOPSTicketMessageModal .WebWindow,
.MMOPSTicketMessageModal .WebWin_main,
.MMOPSTicketMessageModal .WebWin_Main {
    border-radius: 12px !important;
}

.MMOPSTicketMessageHtml {
    padding: 18px 18px 6px 18px;
}

.MMOPSTicketMessageBody {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.MMOPSTicketMessageIcon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mmops-orange);
    color: var(--mmops-charcoal);
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.MMOPSTicketMessageText {
    min-width: 0;
    flex: 1 1 auto;
}

.MMOPSTicketMessageTitle {
    margin: 1px 0 9px 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 650;
}

.MMOPSTicketMessageCopy {
    font-size: 13px;
    line-height: 1.7;
    font-weight: 450;
}

/* The DataFlex CSS class can sit on the wrapper or the rendered button
   depending on framework markup, so target both forms. */
.MMOPSTicketMessageOK,
.MMOPSTicketMessageOK button,
button.MMOPSTicketMessageOK,
.MMOPSTicketMessageOK.WebButton {
    min-height: 42px !important;
}

.MMOPSTicketMessageOK button,
button.MMOPSTicketMessageOK {
    border: 1px solid #f4a11e !important;
    border-radius: 6px !important;
    background-color: #f4a11e !important;
    background-image: none !important;
    color: #181818 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-weight: 700 !important;
}


/* Light message */
.MMOPSTicketMessageLight,
.MMOPSTicketMessageLight .WebCon_Content,
.MMOPSTicketMessageLight .WebWindow,
.MMOPSTicketMessageLight .WebWin_main,
.MMOPSTicketMessageLight .WebWin_Main {
    background: #ffffff !important;
    color: var(--mmops-charcoal) !important;
}

.MMOPSTicketMessageLight .MMOPSTicketMessageTitle {
    color: var(--mmops-charcoal);
}

.MMOPSTicketMessageLight .MMOPSTicketMessageCopy {
    color: #666666;
}


/* Dark message */
.MMOPSTicketMessageDark,
.MMOPSTicketMessageDark .WebCon_Content,
.MMOPSTicketMessageDark .WebWindow,
.MMOPSTicketMessageDark .WebWin_main,
.MMOPSTicketMessageDark .WebWin_Main {
    border-color: #34373c !important;
    background: #1a1c1f !important;
    color: #f2f2f2 !important;
}

.MMOPSTicketMessageDark .MMOPSTicketMessageTitle {
    color: #f2f2f2;
}

.MMOPSTicketMessageDark .MMOPSTicketMessageCopy {
    color: #b9bcc1;
}


/* Error keeps the MMOPS treatment but provides a clear error cue. */
.MMOPSTicketMessageERROR .MMOPSTicketMessageIcon {
    background: #c7463d;
    color: #ffffff;
}

.MMOPSTicketMessageWARNING .MMOPSTicketMessageIcon,
.MMOPSTicketMessageINFO .MMOPSTicketMessageIcon {
    background: var(--mmops-orange);
    color: var(--mmops-charcoal);
}

@media (hover: hover) and (pointer: fine) {
    .MMOPSTicketMessageOK button:hover,
    button.MMOPSTicketMessageOK:hover {
        border-color: #aa7015 !important;
        background-color: #aa7015 !important;
        background-image: none !important;
        color: #ffffff !important;
    }
}

@media (max-width: 600px) {
    .MMOPSTicketMessageHtml {
        padding: 14px 12px 4px 12px;
    }

    .MMOPSTicketMessageBody {
        gap: 12px;
    }

    .MMOPSTicketMessageIcon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 19px;
    }

    .MMOPSTicketMessageTitle {
        font-size: 16px;
    }

    .MMOPSTicketMessageCopy {
        font-size: 12px;
    }
}


/* ==========================================================================
   RESPONSIVE MMOPS MESSAGE MODAL
   DataFlex sets responsive piWidth/piHeight; these rules provide a second
   safety net for very small browser viewports and long validation messages.
   ========================================================================== */

.MMOPSTicketMessageModal,
.MMOPSTicketMessageModal .WebWindow,
.MMOPSTicketMessageModal .WebWin_main,
.MMOPSTicketMessageModal .WebWin_Main,
.MMOPSTicketMessageModal .WebCon_Content {
    box-sizing: border-box !important;
    max-width: calc(100vw - 20px) !important;
}

@media (max-width: 600px) {

    .MMOPSTicketMessageModal,
    .MMOPSTicketMessageModal .WebWindow,
    .MMOPSTicketMessageModal .WebWin_main,
    .MMOPSTicketMessageModal .WebWin_Main {
        max-width: calc(100vw - 16px) !important;
    }

    .MMOPSTicketMessageHtml {
        max-height: 190px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 12px 10px 4px 10px;
    }

    .MMOPSTicketMessageBody {
        width: 100%;
        min-width: 0;
    }

    .MMOPSTicketMessageText {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .MMOPSTicketMessageCopy {
        overflow-wrap: anywhere;
    }

    .MMOPSTicketMessageOK {
        margin-top: 4px;
    }

    .MMOPSTicketMessageOK button {
        min-height: 44px !important;
    }
}

@media (max-width: 340px) {

    .MMOPSTicketMessageBody {
        gap: 9px;
    }

    .MMOPSTicketMessageIcon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 17px;
    }

    .MMOPSTicketMessageTitle {
        font-size: 15px;
    }

    .MMOPSTicketMessageCopy {
        font-size: 11px;
        line-height: 1.6;
    }
}


/* ==========================================================================
   CBA COMMWEB HOSTED SESSION - TICKETING
   Sensitive fields are replaced by CBA-hosted iframe controls.
   ========================================================================== */

.MMSTicketHostedSession {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 2px 0 10px 0;
    font-family: "Montserrat", Arial, sans-serif !important;
}

.MMSTicketHostedSession .CBAHostedFields,
.MMSTicketHostedSession .CBAHostedField,
.MMSTicketHostedSession .CBAHostedField label,
.MMSTicketHostedSession .CBAHostedField input,
.MMSTicketHostedSession .CBAHostedStatus {
    font-family: "Montserrat", Arial, sans-serif !important;
}

.MMSTicketHostedSession .CBAHostedField label {
    color: var(--mmops-charcoal);
    font-size: 12px;
    font-weight: 550;
}

.MMSTicketHostedSession .CBAHostedField input {
    min-height: 46px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    background: #ffffff;
    color: var(--mmops-charcoal);
}

.MMSTicketHostedSession .CBAHostedStatus {
    border-left-color: var(--mmops-orange);
    background: var(--mmops-soft);
    color: var(--mmops-muted);
}

.MMSTicketHostedSession .CBAHostedReady {
    border-left-color: #4b7d28;
}

.MMSTicketHostedSession .CBAHostedError {
    border-left-color: #b5362d;
}


/* Dark profile */
.MMSTicketingThemeDark .MMSTicketHostedSession .CBAHostedField label {
    color: #f2f2f2;
}

.MMSTicketingThemeDark .MMSTicketHostedSession .CBAHostedField input {
    border-color: #3d4147;
    background: #121417;
    color: #f3f3f3;
}

.MMSTicketingThemeDark .MMSTicketHostedSession .CBAHostedStatus {
    background: var(--mmops-soft);
    color: #bfc1c5;
}


/* Hosted payment fields remain touch-friendly on mobile. */
@media (max-width: 700px) {
    .MMSTicketHostedSession {
        margin-bottom: 8px;
    }

    .MMSTicketHostedSession .CBAHostedField input {
        min-height: 50px;
        height: 50px;
        font-size: 16px;
    }

    .MMSTicketHostedSession .CBAHostedStatus {
        font-size: 11px;
    }
}


/* ==========================================================================
   PURCHASE CONFIRMATION - CENTRED + RESET BUTTON
   ========================================================================== */

.MMSTicketConfirmationPanel {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center;
    align-self: center;
}

.MMSTicketConfirmationOK {
    margin-top: 24px;
}

.MMSTicketConfirmationOK button {
    width: 100% !important;
    min-height: 46px !important;
    border: 1px solid var(--mmops-orange) !important;
    border-radius: 7px !important;
    background: var(--mmops-orange) !important;
    color: var(--mmops-charcoal) !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-weight: 700 !important;
}

@media (hover: hover) and (pointer: fine) {
    .MMSTicketConfirmationOK button:hover {
        border-color: var(--mmops-orange-dark) !important;
        background: var(--mmops-orange-dark) !important;
        color: #ffffff !important;
    }
}

.MMSTicketingThemeDark .MMSTicketConfirmationOK button {
    color: var(--mmops-charcoal) !important;
}

@media (max-width: 700px) {
    .MMSTicketConfirmationPanel {
        margin-top: 18px !important;
        margin-bottom: 18px !important;
    }

    .MMSTicketConfirmationOK {
        margin-top: 18px;
    }

    .MMSTicketConfirmationOK button {
        min-height: 48px !important;
    }
}


/* ==========================================================================
   OPTIONAL CAMPAIGN FOOTER
   Rendered from ITEMS.FOOTER_TEXT_2 only when ITEMS.SHOW_FOOTER = "Y".
   ========================================================================== */

.MMSTicketCampaignFooter {
    box-sizing: border-box;
    width: 100%;
    margin: 28px 0 0 0;
    padding: 22px 26px;

    border: 1px solid var(--mmops-border) !important;
    border-top: 3px solid var(--mmops-orange) !important;
    border-radius: 12px;
    background: var(--mmops-panel);

    color: var(--mmops-charcoal);
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 13px;
    line-height: 1.65;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .045);
}

.MMSTicketCampaignFooter,
.MMSTicketCampaignFooter * {
    font-family: "Montserrat", Arial, sans-serif !important;
}

.MMSTicketCampaignFooter p:first-child,
.MMSTicketCampaignFooter h1:first-child,
.MMSTicketCampaignFooter h2:first-child,
.MMSTicketCampaignFooter h3:first-child {
    margin-top: 0;
}

.MMSTicketCampaignFooter p:last-child {
    margin-bottom: 0;
}

.MMSTicketCampaignFooter a {
    color: var(--mmops-orange-dark);
}


/* Dark profile */
.MMSTicketingThemeDark .MMSTicketCampaignFooter {
    border-color: var(--mmops-border) !important;
    border-top-color: var(--mmops-orange) !important;
    background: var(--mmops-panel);
    color: #e8e8e8;
}

.MMSTicketingThemeDark .MMSTicketCampaignFooter a {
    color: var(--mmops-orange);
}


@media (max-width: 700px) {
    .MMSTicketCampaignFooter {
        margin-top: 18px;
        padding: 17px 16px;
        border-radius: 10px;
        font-size: 12px;
    }
}


/* ==========================================================================
   CASH PAYMENT MODE - legacy URL p2
   ========================================================================== */

.MMSTicketCashPaymentNotice {
    margin: 2px 0 14px 0;
}

.MMSTicketCashNotice {
    padding: 16px 18px;
    border: 1px solid var(--mmops-border);
    border-left: 4px solid var(--mmops-orange);
    border-radius: 7px;
    background: var(--mmops-soft);
    color: var(--mmops-charcoal);
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 13px;
    line-height: 1.6;
}

.MMSTicketCashNotice strong {
    color: var(--mmops-orange-dark);
    font-weight: 700;
}

.MMSTicketingThemeDark .MMSTicketCashNotice {
    border-color: #363a3f;
    border-left-color: var(--mmops-orange);
    background: var(--mmops-soft);
    color: #e8e8e8;
}

.MMSTicketingThemeDark .MMSTicketCashNotice strong {
    color: var(--mmops-orange);
}

@media (max-width: 700px) {
    .MMSTicketCashNotice {
        padding: 14px;
        font-size: 12px;
    }
}


/* ==========================================================================
   CASH / CHEQUE PAYMENT MODE - legacy URL p2
   ========================================================================== */

.MMSTicketOfflinePaymentMethod {
    margin: 4px auto 8px auto;
}

.MMSTicketOfflinePaymentMethod select,
.MMSTicketOfflinePaymentMethod .WebFrm_Wrapper {
    font-family: "Montserrat", Arial, sans-serif !important;
}

.MMSTicketOfflinePaymentInfo {
    margin: 0 0 14px 0;
}

.MMSTicketOfflineNotice {
    padding: 13px 16px;
    border: 1px solid var(--mmops-border);
    border-left: 4px solid var(--mmops-orange);
    border-radius: 7px;
    background: var(--mmops-soft);
    color: var(--mmops-charcoal);
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

.MMSTicketingThemeDark .MMSTicketOfflineNotice {
    border-color: #363a3f;
    border-left-color: var(--mmops-orange);
    background: var(--mmops-soft);
    color: #e8e8e8;
}

@media (max-width: 700px) {
    .MMSTicketOfflineNotice {
        padding: 12px 14px;
        font-size: 12px;
    }
}