/**
 * Dirty compatibility layer for StandardUI-based MasterPages.
 * Mainly used for overriding whole form components and irreplaceable template structures.
 */

/*                                                                          */
/* PROCESS PAGE STEP TABS                                                   */
/*                                                                          */

.lbl-handler-path {
    display: none;
}

#step-tabs-container {
    overflow-x: auto;
    white-space: nowrap;
    background: rgb(var(--theme-bg-muted));
}

#step-tabs {
    margin: 0 calc(var(--page-container-padding) * -1);
}

    #step-tabs ul li {
        display: block;
        position: relative;
        padding: 1.5rem 2rem;
        text-align: center;
        color: rgb(var(--theme-text)/50%);
    }

    #step-tabs ul li.completed {
        font-weight: 700;
        color: rgb(var(--theme-text)/100%);
    }

    #step-tabs ul li:not(:first-child)::after {
        content: "";
        position: absolute;
        left: 0;
        top: 1.5rem;
        bottom: 1.5rem;
        border-left: 1px solid rgb(var(--theme-text)/10%);
    }

    #step-tabs ul li.completed + li::after {
        display: none;
    }

    #step-tabs ul li.completed + li::before {
        content: "";
        position: absolute;
        left: -0.625rem;
        top: calc(50% - 0.675rem);
        display: inline-block;
        height: 1.25rem;
        width: 1.25rem;
        background-color: rgb(var(--theme-text)/50%);
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='none'%3E%3Cpath d='m12 10 5 5-5 5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 9999px;
        z-index: 1;
    }

/*                                                                          */
/* PROCESS PAGE FORM CONTROLS                                               */
/*                                                                          */

/* make required asterisks red */
.ti-required {
    margin: 0 0.125em;
    color: rgb(var(--theme-status-critical)/1);
}

/* add standard error styles */
.std-error-container {
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    background: rgb(var(--theme-status-critical)/5%);
    color: rgb(var(--theme-status-critical)/1);
    font-size: 1rem;
    line-height: 1.5rem;
}

.stdui-theme-hpe .std-error-container {
    border-radius: 0.5rem;
}

.std-error-container .errorList {
    font-weight: 700;
    margin: 0.5rem 0;
}

.std-error-container .errorList:last-child {
    margin-bottom: 0;
}

/* add standard success message styles */
.std-success-container {
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    background: rgb(var(--theme-status-success)/5%);
    color: rgb(var(--theme-status-success-text));
    font-size: 1rem;
    line-height: 1.5rem;
}

/* add primitive styling for label-tagged errors */
.form-control .error {
    color: rgb(var(--theme-status-critical)/1);
}

/* dim dropdowns when disabled (obscure telerik logic prevents StandardUI from catching this case) */
.form-control.dropdown:has(select:disabled) input {
    background-color: rgb(var(--theme-bg-muted)/1);
    box-shadow: 0 0 0 1px rgb(var(--theme-border)/10%) inset;
    color: rgb(var(--theme-text-muted)/1);
}

/* neatly style telerik date pickers & icons */
.form-control.date-picker .date-picker-icon {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    cursor: pointer;
}

    .form-control.date-picker .date-picker-icon svg {
        width: 1rem;
        height: 1rem;
    }

    .form-control.date-picker .date-picker-container {
        display: none;
    }

    /* dim date pickers when disabled (obscure telerik logic prevents StandardUI from catching this case) */
    .form-control.date-picker:has(input:disabled) input {
        background-color: rgb(var(--theme-bg-muted)/1);
        box-shadow: 0 0 0 1px rgb(var(--theme-border)/10%) inset;
        color: rgb(var(--theme-text-muted)/1);
    }

    .form-control.date-picker:has(input:disabled) .date-picker-icon {
        opacity: 0.25;
    }

/* override native RadCalendarPopup styles to match new design a little bit */
.RadCalendarPopup {
    box-shadow: rgb(0 0 0 / 5%) 0 0.5rem 5rem;
}

    .RadCalendarPopupShadows {
        padding: 0 !important;
    }

    .RadCalendarPopupShadows .rcShadTR,
    .RadCalendarPopupShadows .rcShadTL,
    .RadCalendarPopupShadows .rcShadBR,
    .RadCalendarPopupShadows .rcShadBL {
        display: none !important;
    }

    .RadCalendar_Default .rcTitlebar,
    .RadCalendarTimeView_Default .rcHeader {
        background: rgb(var(--theme-bg-muted)/1) !important;
    }

    /* override RadCalendar fonts */
    .RadCalendar_Default,
    .RadCalendar_Default .rcTitlebar table,
    .RadCalendar_Default .rcMainTable,
    .RadCalendarTimeView_Default {
        font-family: var(--theme-font, system-ui) !important;
        font-size: 0.9rem !important;
        line-height: 1.25rem !important;
    }

    .RadCalendar_Default .rcTitle,
    .RadCalendarTimeView_Default .rcHeader {
        padding-top: 0.25rem !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1.5rem !important;
    }

    .RadCalendar_Default .rcWeek {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        line-height: 1rem !important;
        opacity: 0.5;
    }

    .RadCalendarPopup .RadCalendar_Default .rcMain .rcRow .rcSelected,
    .RadCalendarPopup .RadCalendarTimeView_Default td.rcSelected a {
        border-color: transparent !important;
        background: rgb(var(--theme-text));
        color: rgb(var(--theme-bg));
    }

    .RadCalendarPopup .RadCalendar_Default .rcMain .rcRow .rcHover,
    .RadCalendarPopup .RadCalendarTimeView_Default td.rcHover a {
        border-color: transparent  !important;
        background: rgb(var(--theme-text)/5%);
        color: rgb(var(--theme-text));
    }

    .RadCalendarPopup .RadCalendar_Default .rcMain .rcRow .rcSelected.rcHover,
    .RadCalendarPopup .RadCalendar_Default .rcMain .rcRow .rcSelected.rcHover a {
        border-color: transparent !important;
        background: rgb(var(--theme-text)/50%);
        color: rgb(var(--theme-bg));
    }

/* restyle RadUpload fields as standard buttons */
.RadUpload_Default {
    margin: 1rem 0;
}
    .RadUpload_Default,
    .RadUpload_Default a,
    .RadUpload_Default input {
        font: inherit !important;
        width: auto !important;
    }

    .RadUpload_Default .ruFileWrap {
        height: auto !important;
        line-height: inherit !important;
    }

    .RadUpload_Default .ruButton {
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
        background: rgb(var(--theme-button-bg)/var(--tw-bg-opacity)) !important;
        border-radius: var(--theme-button-radius) !important;
        color: rgb(var(--theme-button-text)/var(--tw-text-opacity)) !important;
        display: block;
        font-weight: 600 !important;
        line-height: 1.5rem !important;
        padding: .5rem 1rem !important;
        transition: all .2s ease;
        width: auto !important;
        height: auto !important;
    }

        .RadUpload_Default .ruButton.ruButtonHover {
            background: rgb(var(--theme-button-hover-bg)/var(--tw-bg-opacity)) !important;
            color: rgb(var(--theme-button-hover-text)/var(--tw-text-opacity)) !important;
        }

        .RadUpload_Default .ruButton.ruButtonFocus {
            border: none !important;
        }

        /* mimic button-bordered behavior for optional uploads */
        .multiup_cnt_optional .RadUpload_Default .ruButton,
        .epop_upload_optional .RadUpload_Default .ruButton {
            --tw-text-opacity: 1;
            background-color: transparent !important;
            box-shadow: 0 0 0 1px rgb(var(--theme-button-bg) / 1) inset !important;
            color: rgb(var(--theme-button-bg) / var(--tw-text-opacity)) !important;
        }

    .RadUpload_Default .ruStyled .ruFileInput {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        cursor: pointer !important;
    }

    .RadUpload_Default .ruDropZone {
        position: absolute;
        top: -1rem;
        left: -1rem;
        right: -1rem;
        bottom: -1rem;
        height: auto;
        background: rgb(var(--theme-bg)/90%) !important;
        color: rgb(var(--theme-text)) !important;
        border: 1px dashed rgb(var(--theme-border)) !important;
        backdrop-filter: blur(5px);
    }

        .RadUpload_Default .ruDropZone span {
            margin: 0;
            position: absolute;
            top: calc(50% - 1rem);
            left: 2rem;
            right: 2rem;
            line-height: 2rem;
            text-align: center;
        }

/* custom inline price input layout */
.form-control.inline-price-input {
}

    .form-control.inline-price-input .inline-price-field-wrapper {
        display: flex;
    }

    .form-control.inline-price-input .inline-price-field-wrapper strong {
        flex: 0 0 auto;
        padding: 0 0.75rem;
        margin: 0 -1px;
        line-height: 2.5rem;
        background: rgb(var(--theme-bg-muted)/1);
        border: 1px solid rgb(var(--theme-border)/5%);
        z-index: -1;
    }

    .stdui-theme-hpe .form-control.inline-price-input .inline-price-field-wrapper strong {
        background: transparent;
        border: none;
        border-radius: 0.5rem;
    }

    .form-control.inline-price-input .inline-price-field-wrapper input {
        flex: 1;
    }

    .form-control.inline-price-input .inline-price-field-wrapper input:last-child {
        flex: 0 0 3.5rem;
    }

/* add custom styles for AddressTable controls */
table.ti-personal-data-table {
    width: 100%;
    max-width: 72ch;
    margin: 2rem 0 1rem;
}

    table.ti-personal-data-table + table.ti-personal-data-table {
        margin-top: 0;
    }

    table.ti-personal-data-table td {
        padding-bottom: 1rem;
    }

        table.ti-personal-data-table td.res-tbl-row {
            line-height: 1.25;
            width: 40%;
            padding-right: 2rem;
        }

        table.ti-personal-data-table td.res-input-cell > table {
            width: 100%;
        }

        table.ti-personal-data-table td.res-input-cell > table td {
            padding-bottom: 0;
        }

        table.ti-personal-data-table td.res-tbl-row .error {
            color: rgb(var(--theme-status-critical)/1);
            font-weight: 700;
        }
    
        table.ti-personal-data-table td.res-tbl-row:has(.error) + td.res-input-cell.form-control input,
        table.ti-personal-data-table td.res-tbl-row:has(.error) + td.res-input-cell.form-control select,
        table.ti-personal-data-table td.res-tbl-row:has(.error) + td.res-input-cell.form-control textarea,
        table.ti-personal-data-table td.res-tbl-row:has(.error) + td.res-input-cell .form-control input,
        table.ti-personal-data-table td.res-tbl-row:has(.error) + td.res-input-cell .form-control select,
        table.ti-personal-data-table td.res-tbl-row:has(.error) + td.res-input-cell .form-control textarea {
            box-shadow: 0 0 0 1px rgb(var(--theme-status-critical) / 1) inset;
        }

        /* used in aggregated bank data fields (NZ) */
        table.ti-personal-data-table table.res-tbl-bankcode tr:has(td.res-input-cell + td.res-spacer) {
            display: flex;
        }

        table.ti-personal-data-table table.res-tbl-bankcode tr:has(td.res-input-cell + td.res-spacer) td.res-spacer {
            padding: 0 0.25rem;
            line-height: 2.5rem;
        }

@media (max-width: 764px) {
    table.ti-personal-data-table,
    table.ti-personal-data-table tbody,
    table.ti-personal-data-table tr,
    table.ti-personal-data-table td {
        display: block;
    }

    table.ti-personal-data-table {
        margin: 2rem 0;
    }

        table.ti-personal-data-table + table.ti-personal-data-table {
            margin-top: 0;
        }

        table.ti-personal-data-table tr {
            margin-bottom: 1rem;
        }

        table.ti-personal-data-table td {
            padding-bottom: 0;
        }

        table.ti-personal-data-table td.res-tbl-row {
            width: auto;
        }
}

/* matching AddressTable styles for generic .tabular-address-form layouts (PickUpInstructions, BankData) */
.tabular-address-form {
    width: 100%;
    max-width: 72ch;
    margin: 2rem 0 1rem;
    display: grid;
    gap: 1rem 2rem;
}

    .tabular-address-form .field-row .col-label .error {
        color: rgb(var(--theme-status-critical)/1);
        font-weight: 700;
    }

    .tabular-address-form .field-row .col-label:has(.error) + .col-input .form-control input,
    .tabular-address-form .field-row .col-label:has(.error) + .col-input .form-control select,
    .tabular-address-form .field-row .col-label:has(.error) + .col-input .form-control textarea {
        box-shadow: 0 0 0 1px rgb(var(--theme-status-critical) / 1) inset;
    }

@media (min-width: 765px) {
    .tabular-address-form {
        grid-template-columns: calc(40% - 2rem) 1fr;
    }

        .tabular-address-form .field-row {
            display: contents;
        }

        .tabular-address-form .col-label {
            line-height: 1.25;
        }
}

/* add styles for additional context input grids */

.addl-ctx-grid {
    grid-column: 1 / -1;
    display: grid;
    gap: 1rem 2rem;
}

@media (min-width: 768px) {
    .addl-ctx-grid.max-cols-2,
    .addl-ctx-grid.max-cols-3,
    .addl-ctx-grid.max-cols-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .addl-ctx-grid.max-cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .addl-ctx-grid.max-cols-4 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* convert addl-ctx-grid to side-by-side columns when inside table.ti-personal-data-table */

table.ti-personal-data-table td.address-additional-context .addl-ctx-grid,
.tabular-address-form .addl-ctx-grid {
    width: 100%;
    max-width: 72ch;
}

    table.ti-personal-data-table td.address-additional-context .addl-ctx-grid .form-control,
    .tabular-address-form .addl-ctx-grid .form-control {
        display: grid;
        gap: 1rem 2rem;
        align-items: center;
    }

    table.ti-personal-data-table td.address-additional-context .addl-ctx-grid .form-control label,
    .tabular-address-form .addl-ctx-grid .form-control label {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.25;
    }

    @media (min-width: 765px) {
        table.ti-personal-data-table td.address-additional-context .addl-ctx-grid .form-control,
        .tabular-address-form .addl-ctx-grid .form-control {
            grid-template-columns: calc(40% - 2rem) 1fr;
        }
    
            table.ti-personal-data-table td.address-additional-context .addl-ctx-grid .form-control .field-row,
            .tabular-address-form .addl-ctx-grid .form-control .field-row {
                display: contents;
            }
    
            table.ti-personal-data-table td.address-additional-context .addl-ctx-grid .form-control .col-label,
            .tabular-address-form .addl-ctx-grid .form-control .col-label {
                line-height: 1.25;
            }
    
            table.ti-personal-data-table td.address-additional-context .addl-ctx-grid .form-control .col-label,
            .tabular-address-form .addl-ctx-grid .form-control .col-label {
                line-height: 1.25;
            }
    }

/**
 * Add sizing parity for the default address table templates.
 * This is necessary because we can't force these contexts to be separated
 * into different root columns (due to them being in a single control).
 */

table.ti-personal-data-table td.address-additional-context .addl-ctx-grid .addl-context-field-placeholder {
    display: grid;
    gap: 1rem 2rem;
}

@media screen and (min-width: 765px) {
    table.ti-personal-data-table td.address-additional-context .addl-ctx-grid .addl-context-field-placeholder {
        grid-template-columns: calc(40% - 2rem) 1fr;
    }
}

/* hot fix for broken error messages */

.tabular-address-form > .std-error-container {
    grid-column: span 2;
}

/* shared personal data steps styles */

#ti-privacy {
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid #ccc;
    opacity: 0.5;
}

    #ti-privacy h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
    }

    #ti-privacy p {
        margin-bottom: 0;
        font-size: 0.9rem;
    }

@media (min-width: 1280px) {
    .client-data-columns {
        display: grid;
        grid-template-columns: 1fr 24rem;
        gap: 2rem;
        align-items: start;
    }

    #ti-privacy {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 2rem;
        margin-top: 4rem;
        border-top: none;
        border-left: 1px solid #ccc;
    }
}

/* add styles for FileListControl */
.file-list-control {
    margin: 1rem 0;
    background: rgb(var(--theme-bg-muted));
    padding: 1.25rem 1.5rem;
}

    .file-list-control .file-list-header,
    .file-list-control .file-list-header h1,
    .file-list-control .file-list-header h2,
    .file-list-control .file-list-header h3 {
        margin: 0;
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .file-list-control ul {
        margin: 2rem 0 0;
        display: grid;
        gap: 2rem;
    }

    .file-list-control li {
        position: relative;
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .file-list-control li:not(:first-child)::before {
            content: "";
            position: absolute;
            top: -1rem;
            left: 0;
            width: 100%;
            height: 1px;
            background: rgb(var(--theme-border)/10%);
        }

    .file-list-control li .button {
        font-size: 0.9rem;
    }

/* add styles for shared cart overview & summary page TI details table */

.overview-product-table-l1 + .overview-product-table-l1 {
    border-top: 1px solid rgb(var(--theme-border) / 50%);
}

.overview-product-table-l1:not(:has(.button-group)) table tr:last-child {
    border-bottom: none;
}

.ti-cashback-amount-wrapper {
    --ti-value-width: 20rem;
    width: var(--ti-value-width, 20rem);
    font-size: 1.25rem;
    padding: 0.67rem 1rem;
    padding-left: 0;
    font-weight: 700;
}

.overview-callout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}

@media screen and (max-width: 768px) {
    .ti-cashback-amount-wrapper {
        width: auto;
        text-align: right;
        font-size: 1rem;
    }

    .overview-product-table-l1 {
        display: grid;
        margin-bottom: 2rem;
    }

    .l1-benefit {
        display: none;
    }

    .overview-callout {
        flex-direction: column;
    }
}

/*                                                                          */
/* ADDRESS COMPONENTS FOR ACCOUNT MGMT & SELECTION                          */
/*                                                                          */

.account-address-list-control {
}

    .account-address-list-control .address-list {
        margin: 1rem 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .account-address-list-control .address-list {
            grid-template-columns: 1fr 1fr;
        }
    }

    .account-address-list-control .address-list .address-panel {
        display: flex;
        flex-direction: column;
        border: 1px solid rgb(var(--theme-border));
    }

        .account-address-list-control .address-list .address-panel .address-control {
            flex: 1;
            padding: 1rem;
        }

        .account-address-list-control .address-list .address-panel .action-buttons {
            flex: 0 0 auto;
            display: flex;
            justify-content: flex-end;
            border-top: 1px solid rgb(var(--theme-border));
        }

            .account-address-list-control .address-list .address-panel .action-buttons a {
                display: block;
                padding: 0.5rem;
                font-size: 1.5rem;
                transition: all 250ms ease;
            }

                .account-address-list-control .address-list .address-panel .action-buttons a:hover,
                .account-address-list-control .address-list .address-panel .action-buttons a:focus {
                    background: rgb(var(--theme-button-bg));
                    color: rgb(var(--theme-button-text));
                }

/* override custom table styles when rendered inside an address list control */
.account-address-list-control table.ti-personal-data-table {
    margin: 0;
}

.account-address-list-control table.ti-personal-data-table td {
    padding: 0;
}

/* add styles for link blocks below process pages (predominantly used in HPE) */
.link-blocks {
    display: grid;
    column-gap: 2rem;
    row-gap: 1rem;
}

.link-blocks .link-block {
    display: contents;
}

.link-blocks a {
    position: relative;
    display: inline-block;
    font-weight: 700;
    padding-left: 2rem;
    margin: 0.25rem 0;
}

.link-blocks a:hover,
.link-blocks a:focus {
    text-decoration: underline;
}

.link-blocks a::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.675rem);
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
    background-color: rgb(var(--theme-text));
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='none'%3E%3Cpath d='m12 10 5 5-5 5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 9999px;
    z-index: 1;
}

@media (min-width: 1280px) {
    .link-blocks {
        grid-template-columns: 1fr 1fr 1fr;
    }
}