:root {
    /* Fonts */
    --font-body: sans-serif;
    --font-body-bold: var(--font-proxima);
    --font-proxima: var(--font-proxima);
    /* Colours */
    --mmi-white: white;
    --mmi-black: black;
    --mmi-invertable-white: var(--mmi-white);
    --mmi-invertable-black: var(--mmi-black);
    --mmi-pink: rgb(236, 0, 140);
    --mmi-pink_tint: rgba(236, 0, 140, 0.2);
    --mmi-blue: rgb(0, 165, 224);
    --mmi-blue_tint: rgba(0, 165, 224, .2);
    --mmi-green: rgb(114, 169, 54);
    --mmi-dark-grey: rgb(133, 133, 133);
    --mmi-grey: rgb(231, 231, 231);
    --mmi-red: rgb(229, 0, 0);
    --mmi-orange: rgb(241, 164, 49);
    --mmi-tertiary: rgb(243, 252, 254);
    --mmi-tertiary-tint: rgba(243, 252, 254, 0.2);
    --primaryColour: var(--mmi-pink);
    --primaryGradientColor: var(--primaryColour);
    --primaryTextColour: var(--mmi-pink);
    --primaryTint: var(--mmi-pink_tint);
    --secondaryColour: var(--mmi-blue);
    --secondaryGradientColour: var(--secondaryColour);
    --secondaryTextColour: var(--mmi-blue);
    --secondaryTint: var(--mmi-blue_tint);
    --tertiaryColour: var(--mmi-tertiary);
    --tertiaryTextColour: var(--mmi-tertiary);
    --tertiaryTint: var(--mmi-tertiary-tint);
    --successColour: var(--mmi-green);
    --dangerColour: var(--mmi-red);
    --warningColour: var(--mmi-orange);
    --infoColour: var(--mmi-blue);
    --fontPrimaryColour: rgb(14, 14, 14);
    --textColourOnPrimary: var(--mmi-invertable-white);
    --textColourOnSecondary: var(--mmi-invertable-white);
    --textColourOnSuccess: var(--mmi-white);
    --textColourOnDanger: var(--mmi-white);
    --textWhite: var(--mmi-white);
    --headerColour: var(--mmi-white);
    --formBorderColour: rgb(32, 32, 32);
    --inputOutlineColour: rgb(204, 204, 204);
    --cbCheckedBgColor: rgb(89, 163, 16);
    --tabBgColour: var(--tertiaryColour);
    --bgColourLight: rgb(238, 239, 238);
    --disabledColour: rgb(133, 133, 133);
    --disabledBgColour: rgb(231, 231, 231);
    --overlayColour: rgba(0,0,0,0.2);
    --small-font-size: 0.85rem;
    --msg-font-size: 0.6rem;
    --gradient: var(--linearGradient);
    --linearGradient: linear-gradient(to right, var(--primaryGradientColor) 0%, var(--secondaryGradientColour) 100%);
    /* Provider Whitelabeling */
    --hireAMoverPrimary: rgb(51, 153, 208);
    --hireAMoverPrimaryTint: rgba(51, 153, 208, 0.4);
    --whizzCleaningPrimary: rgb(119, 197, 229);
    --whizzCleaningPrimaryTint: rgba(119, 197, 229, 0.4);
    --briskTransportPrimary: rgb(37, 26, 106);
    --briskTransportPrimaryTint: rgba(37, 26, 106, 0.4);
    --muvalPrimary: rgb(236, 102, 44);
    --muvalPrimaryTint: rgba(236, 102, 44, 0.4);
}

html, body {
    background-color: rgb(245, 245, 245);
    color: var(--fontPrimaryColour);
    font-family: var(--font-body);
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

body {
    margin: auto;
}

main {
    min-height: calc(100dvh - 57px);
    padding-bottom: 4rem;
    max-width: 100%;
}

h2, h3, h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding-top: 1rem;
    text-align: center;
}

h3 {
    font-size: 1.1rem;
}

h4 {
    font-size: 1rem;
}

.cursor-pointer {
    cursor: pointer;
}

.text-white {
    color: var(--textWhite);
}

.text-dark-grey {
    color: var(--mmi-dark-grey);
}

.text-primary {
    color: var(--primaryColour);
}

.mmi-border-primary {
    border: 1px solid var(--primaryColour);
}

.mmi-border-dark-grey {
    border: 1px solid var(--mmi-dark-grey);
}

.mmi-bg-primary {
    background-color: var(--primaryColour);
}

    .mmi-bg-primary:hover {
        background-color: var(--primaryColour);
    }

.mmi-bg-green {
    background-color: var(--successColour);
}

    .mmi-bg-green:hover {
        background-color: var(--successColour);
    }

.mmi-bg-grey {
    background-color: var(--mmi-grey);
}

    .mmi-bg-grey:hover {
        background-color: var(--mmi-grey);
    }

.text-small {
    font-size: var(--msg-font-size)
}

.text-extra-small {
    font-size: var(--msg-font-size)
}

#blazor-error-ui {
    display: none !important;
}

img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.full-width-center {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.grid-center-1p {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    padding: 0 1rem;
    width: 100%;
}

    .grid-center-1p > * {
        max-width: 100%;
        width: 17ch;
    }

        .grid-center-1p > *:first-child {
            justify-self: center;
        }

.grid-center-2p {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    padding: 0 1rem;
    width: 100%;
}

    .grid-center-2p > * {
        max-width: 100%;
        width: 17ch;
    }

        .grid-center-2p > *:first-child {
            justify-self: end;
        }

        .grid-center-2p > *:last-child {
            justify-self: start;
        }

.details-grid,
.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 100%;
    max-width: 100%;
    align-items: center;
}

.details-grid {
    padding-bottom: 3.5rem;
}

    .details-grid > .btn {
        max-width: 12rem;
    }

    .details-grid > h2 {
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 1rem;
        padding: 0;
        text-align: center;
    }

    .details-grid p {
        margin: 0;
    }

    .details-grid .mmi-input-label  {
        width: 100%;
    }

/* Validation */
input.invalid.modified, select.invalid.modified, input:invalid, select:invalid {
    border: 2px solid #ff0000a8;
    outline: 1px solid #ff000054;
}

.validation-message {
    color: red;
}

div.radio-grid.mb-5 + div.validation-message {
    max-width: 316px;
    margin: 0 auto;
}

/* Form Inputs */
.form-input-label {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

    .form-input-label .req {
        color: var(--primaryColour);
    }

label, select {
    max-width: 100%;
}

input[type=month],
input[type=date],
select {
    border: none;
    appearance: none;
    background-color: white;
    border-radius: 5px;
    color: var(--fontPrimaryColour);
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    outline: 2px solid var(--inputOutlineColour);
    padding: 0.5rem 0.9rem;
    max-width: 100%;
    width: 100%;
}

input[type=month],
input[type=date] {
    min-height: 2.7rem;
}

input::-webkit-date-and-time-value {
    text-align: left;
}

input[type=date]:focus, input[type=date]:active,
input[type=month]:focus, input[type=month]:active {
    outline: var(--primaryColour) solid 2px;
}

input[type=date]:disabled,
input[type=month]:disabled {
    background-color: var(--disabledBgColour);
    color: black;
    outline: 2px solid black;
}

select {
    background-image: url("/icons/dropdown-watermark.svg");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    select:disabled {
        background-color: var(--disabledBgColour);
        cursor: default;
        outline: 2px solid black;
    }

input[type=checkbox] {
    accent-color: var(--cbCheckedBgColor);
    cursor: pointer;
    height: 2rem;
    width: 2rem;
    vertical-align: middle;
    margin-right: .5rem;
}

    input[type=checkbox]:disabled {
        appearance: none;
        background-color: var(--disabledBgColour);
        border: 2px solid black;
        border-radius: 5px;
    }

label:has(input[type=checkbox]) {
    display: block;
    padding-left: 3rem;
    text-indent: -2.9rem;
    padding-right: 1rem;
}

/* Shared CSS */
.white-topper {
    background-color: white;
    max-width: calc(100% + 1rem + var(--bs-gutter-x) * .5);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: calc(1rem + (var(--bs-gutter-x) * .5));
    padding-right: calc(1rem + (var(--bs-gutter-x) * .5));
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

    .white-topper h2 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .white-topper p {
        font-size: .9rem;
        line-height: 1.4;
    }

/* Do not isolate table.usageCharges */
/* Usage to align the table in the field Plan.PlanSettings.TariffInfo */
table.usageCharges {
    margin: 0 auto;
    text-align: center;
}

.seasonal-usage-charge-header:not(:first-of-type) th {
    padding-top: 0.5rem;
}

.plans {
    display: grid;
    position: relative;
    gap: 1rem;
    margin: 1rem auto;
}

    .plans .plan {
        --planBtnBgColour: var(--primaryColour);
        --planBgColour: var(--mmi-white);
        --planBtnColour: var(--mmi-invertable-white);
        --planBtnTextAlign: center;
        --planCursor: pointer;
        --nextBtnBgColour: rgb(231, 231, 231);
        --nextBtnColour: rgb(133, 133, 133);
        --nextCursor: initial;
        --iconOpacity: 0;
        background-color: var(--planBgColour);
        border-radius: 8px 8px 0 0;
        position: relative;
        text-align: center;
        display: flex;
        flex-direction: column;
    }

        .plans .plan.unavailable {
            --planBgColour: var(--mmi-white);
            --planBtnTextAlign: center;
            --planCursor: default;
            --nextCursor: default;
        }

        .plans .plan.selected {
            --planBtnBgColour: rgb(216, 230, 183);
            --planBtnColour: rgb(93, 171, 16);
            --planBtnTextAlign: left;
            --planCursor: pointer;
            --nextBtnBgColour: var(--planBtnColour);
            --nextBtnColour: var(--planBgColour);
            --nextCursor: pointer;
            --iconOpacity: 1;
            position: relative;
            z-index: 1;
        }

            .plans .plan.selected::before {
                background: linear-gradient(0deg, var(--secondaryColour) 0%, var(--primaryColour) 100%);
                border-radius: 4px;
                content: "";
                inset: -3px;
                position: absolute;
                z-index: -1;
            }

        .plans .plan .header {
            background-color: var(--secondaryColour);
            border-radius: 8px 8px 0 0;
            color: var(--mmi-invertable-white);
            padding: .35rem 0;
        }

        .plans .plan.selected .header {
            border-radius: 1px 1px 0 0;
        }

        .plans .plan .header h3 {
            font-size: .9rem;
            line-height: 1;
        }

        .plans .plan .body {
            background-color: var(--mmi-white);
            display: grid;
            font-size: .9rem;
            gap: 1rem;
            grid-template-columns: minmax(0, 1fr);
            line-height: 1.4;
            padding: 1rem;
        }

        .plans .plan .actions {
            background-color: var(--mmi-white);
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
            padding: 0 0.5rem 1.75rem;
        }

    .plans:has(.plan.selected) .plan:not(.selected) .actions button.plan-btn {
        background-color: var(--primaryColour);
        color: var(--mmi-invertable-white);
        filter: opacity(.6);
        z-index: 2;
    }

@media(min-width: 400px) {
    .plans .plan .actions {
        padding: 0 1.5rem 1.75rem;
    }
}

.plans .plan .actions .full-width-center {
    justify-content: space-around;
}

.plans .plan .actions button {
    border-radius: 100rem;
    line-height: 1.2;
    max-width: 17ch;
    width: 100%;
}

.plans .plan .actions .plan-btn {
    background: var(--planBtnBgColour);
    color: var(--planBtnColour);
    cursor: var(--planCursor);
    min-width: 17ch;
    padding: .375rem 1rem;
    position: relative;
    text-align: var(--planBtnTextAlign);
    transition-duration: 0s;
}

    .plans .plan .actions .plan-btn .icon-tick {
        background-color: rgb(93, 171, 16);
        background-image: url('/icons/tick.svg');
        background-position: 40% center;
        background-repeat: no-repeat;
        border-radius: 50%;
        display: inline-block;
        height: 1rem;
        opacity: var(--iconOpacity);
        position: absolute;
        right: .5rem;
        top: 50%;
        transform: translateY(-50%);
        transition-duration: 0s;
        width: 1rem;
    }

.plans .plan .actions .next {
    background: var(--nextBtnBgColour);
    color: var(--nextBtnColour);
    cursor: var(--nextCursor);
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    transition: all .233s;
}

.plan-info {
    align-items: center;
    display: grid;
    gap: 0;
    grid-template-columns: 100%;
}

    .plan-info > p {
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 0;
        width: 100%;
    }

/* Grids */
.info-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 100%;
    max-width: 100%;
}

    .info-grid > h2 {
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 1rem;
        padding: 0;
        text-align: center;
    }

    .info-grid p {
        margin: 0;
    }

/* Confirmed Box */
.confirmed-box {
    background-color: white;
    border-radius: 15px;
    border: 3px solid var(--infoColour);
    color: var(--mmi-black);
    display: grid;
    gap: .5rem;
    min-height: 15rem;
    justify-items: left;
    margin: 1rem;
    margin-bottom: 5rem;
}

.confirmed-box-tick {
    align-items: center;
    background-color: var(--mmi-white);
    border: 2px solid var(--infoColour);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    height: 3.5rem;
    margin: -1.5rem 0 -1rem 1rem;
    width: 3.5rem;
}

    .confirmed-box-tick > span[data-icon='Tick'].extra-large.primary {
        background-color: var(--infoColour);
    }

.confirmed-box-title {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin: .8rem 0;
    padding: 0 1rem;
}

.confirmed-box-subtitle {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
    padding: 0 1rem;
    text-align: left;
}

.confirmed-box-text {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 0 1rem;
    margin: 0;
}

.confirmed-box-image-container {
    align-items: center;
    background-color: var(--mmi-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    bottom: 0;
    display: flex;
    height: 7rem;
    justify-content: center;
    position: relative;
    width: 100%;
}

.confirmed-box .confirmed-box-image-container > img {
    max-height: 6rem;
    max-width: 70%;
}

.btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Warning Box */
.warning-box {
    background-color: var(--warningColour);
    border-radius: 15px;
    color: var(--mmi-white);
    display: grid;
    gap: .5rem;
    min-height: 15rem;
    justify-items: left;
    margin: 1rem;
    margin-bottom: 5rem;
}

.warning-box-tick {
    align-items: center;
    background-color: var(--mmi-white);
    border: 2px solid var(--warningColour);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    height: 3.5rem;
    margin: -1.5rem 0 -1rem 1rem;
    width: 3.5rem;
}

    .warning-box-tick > span[data-icon='Tick'].extra-large.primary {
        background-color: var(--warningColour);
    }

.warning-box-title {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin: .8rem 0;
    padding: 0 1rem;
}

.warning-box-subtitle {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
    padding: 0 1rem;
    text-align: left;
}

.warning-box-text {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 0 1rem;
    margin: 0;
}

.warning-box-image-container {
    align-items: center;
    background-color: var(--mmi-white);
    color: var(--mmi-black);
    border: 3px solid var(--warningColour);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 0 1rem;
    bottom: 0;
    display: flex;
    height: 7rem;
    justify-content: center;
    margin-bottom: -4rem;
    position: relative;
    width: 100%;
}

.warning-box .warning-box-image-container > img {
    max-height: 6rem;
    max-width: 70%;
}

/* Info Box */
.info-box.warning {
    --info-box-bg: var(--warningColour);
}

.info-box {
    --info-box-bg: var(--mmi-blue);
    background-color: var(--info-box-bg);
    border-radius: 15px;
    color: var(--mmi-white);
    display: grid;
    gap: .5rem;
    min-height: 15rem;
    justify-items: left;
    margin: 1rem;
    margin-bottom: 5rem;
}

.info-box-tick {
    align-items: center;
    background-color: var(--mmi-white);
    border: 2px solid var(--info-box-bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    height: 3.5rem;
    margin: -1.5rem 0 -1rem 1rem;
    width: 3.5rem;
}

    .info-box-tick > span[data-icon='Tick'].extra-large.primary {
        background-color: var(--info-box-bg);
    }

.info-box-title {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin: .8rem 0;
    padding: 0 1rem;
}

.info-box-subtitle {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
    padding: 0 1rem;
    text-align: left;
}

.info-box-text {
    display: block;
    font-family: 'proxima-nova', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 0 1rem;
    margin: 0;
}

.info-box-image-container, .info-box-text-container {
    align-items: center;
    background-color: var(--mmi-white);
    color: var(--mmi-black);
    border: 3px solid var(--info-box-bg);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 0 1rem;
    bottom: 0;
    display: flex;
    justify-content: center;
    margin-bottom: -4rem;
    position: relative;
    width: 100%;
}

.info-box-image-container {
    height: 7rem;
}

.info-box-text-container {
    overflow-wrap: break-word;
    word-break: break-word;
}

.info-box .info-box-image-container > img {
    max-height: 6rem;
    max-width: 70%;
}

/* Plan detail points */
.plan-detail-points {
    font-size: .9rem;
    line-height: 1.3;
    margin: 0;
    padding-left: 1.5rem;
    text-align: left;
}

    .plan-detail-points li + li {
        margin-top: .6rem;
    }

ul.plan-detail-points .show-items-toggle {
    color: var(--secondaryColour);
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: underline;
}

.overlay {
    background-color: var(--overlayColour);
    display: none;
    position: absolute;
}

    .overlay.planContainer {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }

    .overlay.plansContainer {
        inset: 1rem 0 0 0;
        width: calc(100% - 1rem + (var(--bs-gutter-x) * .5));
    }

    .overlay.visible {
        display: block;
        z-index: 1;
    }

.notificationBar {
    background-color: var(--primaryColour);
    color: white;
    min-height: 220px;
    top: 0;
    left: 0;
    z-index: 10;
}

.notificationMessage {
    color: var(--mmi-invertable-white);
    text-align: center;
    line-height: 20px;
    padding: 20px;
    max-width: 800px;
}

.visually-hidden {
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
    height: 1px !important;
}

#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

    #components-reconnect-modal .info-box {
        border-radius: 15px 15px 0 0;
        min-height: 10rem;
    }

.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected {
    display: none;
}

/* Show the failed and rejected states immediately */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* Delay showing the reconnecting modal by 3 seconds to avoid flashing on brief network blips */
#components-reconnect-modal.components-reconnect-show {
    display: flex;
    animation: delayedShow 3s;
    animation-fill-mode: backwards;
}

@keyframes delayedShow {
    0%, 99% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

#components-reconnect-modal > div {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.components-reconnect-hide {
    display: none !important;
}


.modal-calendar {
    --bs-modal-padding: 0;
    /* Cap width sensibly; grid-auto-rows in the scoped CSS controls the height.
       !important overrides Bootstrap's .modal-lg (max-width: 800px at >=992px). */
    --bs-modal-width: min(90dvw, 600px);
    max-width: min(90dvw, 600px) !important;
    margin-inline: auto;
}

    .modal-calendar .modal-content {
        /* Hard ceiling so the modal never exceeds the viewport */
        max-height: 96dvh;
        overflow: hidden;
    }

    .modal-calendar .modal-body {
        /* Safety valve for very short screens */
        overflow-y: auto;
        padding: 0;
    }

    .modal-calendar .modal-header {
        /*Some hacky css to place the "x" button above a custom modal header */
        position: absolute;
        background: transparent;
        z-index: calc(var(--bs-modal-zindex) + 1) !important;
        right: 0;
        border: none;
    }

    .modal-calendar .selected-date-display {
        border-top-left-radius: var(--bs-modal-inner-border-radius);
        border-top-right-radius: var(--bs-modal-inner-border-radius);
    }

/* ── Validation error shake on Next/Submit button ──────────────────────────── */
@keyframes btn-shake {
    0%,  100% { transform: translateX(0); }
    15%        { transform: translateX(-7px) rotate(-1deg); }
    30%        { transform: translateX(7px)  rotate(1deg); }
    45%        { transform: translateX(-5px); }
    60%        { transform: translateX(5px); }
    75%        { transform: translateX(-3px); }
    90%        { transform: translateX(3px); }
}

.btn-validation-error {
    animation: btn-shake 0.65s ease-in-out !important;
    /* Brief red flash so the error is impossible to miss */
    background-color: var(--errorColour, #dc3545) !important;
    border-color:     var(--errorColour, #dc3545) !important;
    color: #fff !important;
}