/*#region Scotia Styles*/

:root {
    /* Scotiabank brand red — single source of truth for the accent colour. */
    --scotia-red: #EC111A;
}

/*#region Scotia Font*/
@font-face {
    font-family: 'Scotia Sans';
    src: url('/fonts/Scotia_W_Rg.woff2') format('woff2'), url('/fonts/Scotia_W_Rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Scotia Sans';
    src: url('/fonts/Scotia_W_Bd.woff2') format('woff2'), url('/fonts/Scotia_W_Bd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Scotia Sans';
    src: url('/fonts/Scotia_W_It.woff2') format('woff2'), url('/fonts/Scotia_W_It.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Scotia Sans';
    src: url('/fonts/Scotia_W_BdIt.woff2') format('woff2'), url('/fonts/Scotia_W_BdIt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Scotia Sans Light';
    src: url('/fonts/Scotia_W_Lt.woff2') format('woff2'), url('/fonts/Scotia_W_Lt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Scotia Sans Light';
    src: url('/fonts/Scotia_W_LtIt.woff2') format('woff2'), url('/fonts/Scotia_W_LtIt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Scotia Sans Headline';
    src: url('/fonts/Scotia_W_Headline.woff2') format('woff2'), url('/fonts/Scotia_W_Headline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Scotia Sans Legal';
    src: url('/fonts/Scotia_W_Legal.woff2') format('woff2'), url('/fonts/Scotia_W_Legal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Scotia Sans Legal';
    src: url('/fonts/Scotia_W_LegalIt.woff2') format('woff2'), url('/fonts/Scotia_W_LegalIt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
/*#endregion // Scotia Font*/

html {
    font-family: "Scotia Sans",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 18px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

@media (max-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: "Scotia Sans",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    color: #515151;
    /*background-color: #F2F2F2 !important;*/
}

a, a:hover, a:active, a:visited {
    color: var(--scotia-red);
}

.text-danger {
    color: var(--scotia-red);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Scotia Sans Headline",Roboto,"Helvetica Neue",Arial,sans-serif;
}

h1 {
    font-size: 1.5rem !important;
}

h2 {
    font-size: 1.25rem !important;
}

.header-red {
    font-family: "Scotia Sans Headline",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 1.1em;
    color: var(--scotia-red);
}

.header-image {
    margin-left: -27px;
    margin-right: -27px;
}

.header-row {
    padding: 0px 16px;
    /*background-color: #F6EFE7;*/
}

.header-icon {
    padding-left: 32px;
    text-align: center;
    width: 102px;
}

.header-icon > img {
    height: 64px;
}

.header-imgsection {
    padding-bottom: 32px;
}

.header-imgsection .header-icon-text {
    padding-left: 20px;
}

.form-header {
    padding-top: 0px
}

.form-row {
    padding: 0px 16px 0px 16px;
}

.submit-row {
    padding: 0px 16px 0px 16px;
}

.details-row {
    /*    margin-top: 32px;
    padding-top: 16px;
    background-color: #F6F6F6;
*/
}

.scene-footer {
    padding: 0px 0px;
    font-size: 0.8em;
    /*border-top: 1px solid #dee2e6;*/
}

.scene-footer-links {
    font-size: 1.2em !important;
    padding: 0px 32px;
    text-align: left;
}

.scene-footer-links > a {
    text-decoration: none !important;
    font-weight: 700;
}

/*#region Button Style*/
.btn {
    background-color: #ED0722;
    border: 1px #d1101c solid;
    font-size: 1em;
    font-weight: bold;
    color: #ffffff !important;
    padding: 5px 20px 6px;
    border-radius: 6px;
}

.btn:hover {
    background-color: #d1101c;
    border: 1px #d1101c solid;
    color: #ffffff;
}

.btn:active {
    background-color: #ED0722;
    border: 1px #ffffff solid;
    color: #ffffff;
}

.btn-submit {
    font-size: 1.5em;
}

.btn-lg {
    font-size: 1.25em;
    padding: 0.5rem 1rem;
}

@media (max-width: 502px) {
    .submit-content {
        padding-top: 16px !important;
    }
}
/*#endregion // Button Style*/
/*#region Large Check-box*/
.form-check .form-check-input[type=checkbox] {
    border-color: rgb(193, 193, 193);
}

.form-check .form-check-input[type=radio] {
    border-color: rgb(193, 193, 193);
}

.form-check-input:checked {
    background-color: var(--scotia-red);
}

.checkbox-xl > .form-check-input {
    scale: 1.7;
    position: relative;
    margin-left: -1em !important;
}

.checkbox-xl > .form-check-label {
    margin-left: 1rem;
}
/*#endregion // Large Check-box*/

p.success-message {
    padding: 96px 64px;
}

@media (max-width: 768px) {
    p.success-message {
        padding: 64px 32px !important;
    }
}


.banner-text {
    padding-left: 10px;
    padding-top: 38px;
    padding-bottom: 38px;
    background-color: var(--scotia-red);
}

.banner-text-header {
    font-family: "Scotia Sans Headline",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 24px;
    line-height: 30px;
    color: #FFFFFF;
}

.banner-text-subheader {
    font-family: "Scotia Sans",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    color: #FFFFFF;
}

table.termsTable td {
    border: 1px solid #000000;
}

ol.termsList > li::marker {
    font-weight: bold;
}

table.termsTable th {
    border: 1px solid #000000;
    background-color: #D9D9D9;
    font-weight: 700;
}

.accordion-header {
    /*margin: 0px -12px;*/
}

/* Defaults preserved via the var fallbacks; a per-accordion HeaderBackgroundColor sets
   --bs-accordion-* inline so collapsed and expanded share the same configured colour. */
.accordion-button {
    background-color: var(--bs-accordion-btn-bg, #FFFFFF);
    color: var(--bs-accordion-btn-color, #000000);
}

.accordion-button:focus {
    border-color: var(--scotia-red);
    box-shadow: 0 0 0 0.25rem rgba(236, 17, 26, 0.25)
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-accordion-active-bg, var(--scotia-red));
    color: var(--bs-accordion-active-color, #FFFFFF);
}

/* Chevron colour is driven by --scotia-red. The SVG is used as a mask (its own fill is
   irrelevant) and the colour comes from background-color, so a single variable controls it
   in both the collapsed and expanded states. Bootstrap's transform still flips it open. */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: none !important;
    background-color: var(--scotia-red);
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") no-repeat center / contain;
}

.accordion-body {
    padding: 18px 32px;
}

.header-sitelogo {
    padding: 20px 8px 8px 8px;
}

.header-sitelogo > img {
    width: 32px;
}

/*#region Rich checkbox cards (RichCheckBoxGroup) */
.rich-check-group {
    border: 0;
    padding: 0;
    margin: 0;
}

.rich-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 0;
}

/* Divider below each option except the last. */
.rich-check:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;
}

.rich-check > .form-check-input {
    float: none;
    margin: 0;
    scale: 1.4;
    flex: 0 0 auto;
}

.rich-check-card {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0;
    background-color: #ffffff;
    cursor: pointer;
}

.rich-check-badge {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f7eeee;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rich-check-badge i {
    color: var(--scotia-red);
    font-size: 1.25rem;
}

/* Image icons (from the managed icon library) inside the rich-checkbox badge. */
.rich-check-badge .rich-check-badge-img {
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
}

/* Accordion header icon sits inside a white circular badge (like the rich-check badge). */
.accordion-header-badge {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.accordion-header-badge i.accordion-header-icon {
    color: var(--scotia-red);
    font-size: 45px;
    line-height: 1;
}

/* Image icon (managed icon library) inside the accordion header badge. */
img.accordion-header-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
    vertical-align: middle;
}

.rich-check-body {
    flex: 1 1 240px;
    min-width: 200px;
}

.rich-check-title {
    display: block;
    font-weight: 700;
}

.rich-check-desc {
    display: block;
    color: #6c757d;
}

.rich-check-features {
    flex: 1 1 240px;
    min-width: 200px;
    border-left: 1px solid #dee2e6;
    padding-left: 1.25rem;
}

.rich-check-features ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.rich-check-features li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.rich-check-tick {
    color: var(--scotia-red);
    margin-top: 0.2rem;
}

@media (max-width: 768px) {
    .rich-check-features {
        border-left: 0;
        padding-left: 0;
        flex-basis: 100%;
    }
}
/*#endregion */

.header-content {
    padding: 16px;
}

.header-title {
    font-family: "Scotia Sans Headline",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 24px;
    line-height: 30px;
    color: #FFFFFF;
    margin-top: 32px;
    margin-bottom: 16px;
}

.header-subtitle {
    margin-bottom: 16px;
    font-family: "Scotia Sans",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    color: #FFFFFF;
}

.header-copyright {
    font-family: "Scotia Sans",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    padding-top: 58px;
}

.header-logo > img {
    width: 96px;
}

.header-headline {
    background-color: #1E1117;
    padding: 32px 36px 32px 36px;
}

.header-headline > h1 {
    font-family: "Scotia Sans",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #fffffe;
    line-height: 30px;
}

.header-container {
    max-width: 999px;
    padding: 16px 0 16px 0;
}

.main-container {
    max-width: 999px;
    padding-bottom: 16px;
    background-color: #FFFFFF;
}

.footer-container {
    padding: 16px 0 16px 0;
    max-width: 999px;
    background-color: #FFFFFF;
}

.footer-legal {
    padding: 0px 32px;
}

.footer-row .col {
    padding: 0px;
}

#lang-select > a {
    color: #222222;
    text-decoration: none;
}

.logo-responsive {
    max-height: 36px;
}

@media (max-width: 768px) {
    .logo-responsive {
        max-height: 24px;
    }
}

.banner-container {
    width: 100%;
    max-width: 999px;
    margin: 0 auto;
    text-align: center;
}

.banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* intl-tel-input — keep the wrapper full-width inside Bootstrap form rows
   and align widget height with adjacent .form-floating inputs (~3.5rem). */
.iti-field {
    width: 100%;
}

.iti-field .iti {
    width: 100%;
}

.iti-field .iti .form-control {
    min-height: calc(3.5rem + 2px);
}

/* The country dropdown lives in .iti__country-container, which the library positions absolutely at
   z-index:auto. Bootstrap gives .form-floating > label z-index 2, so the *next* field's floating
   label painted over the open country list. This has to beat 2; 5 leaves room for the other small
   z-indexes Bootstrap uses on focused controls rather than sitting one step clear of the bug.
   Only the open list moves -- closed, the container is just the flag button inside the input. */
.iti-field .iti__country-container {
    z-index: 5;
}

/* Branch Lookup — custom dropdown used when branches carry rich DisplayHtml (a native <option>
   can't render markup). The real <select> stays in the DOM (visually hidden) so it remains the
   posted value and the source of required-field validation; the button/menu are display only. */
.branch-lookup .branch-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
}

.branch-lookup .branch-menu {
    max-height: 15rem;
    overflow-y: auto;
}

/* Reflect the hidden select's invalid state on the visible toggle + reveal the feedback,
   matching how Bootstrap styles a normal :invalid .form-select after submit. */
.was-validated .branch-lookup .branch-native:invalid ~ .dropdown .branch-toggle,
.branch-lookup .branch-native.is-invalid ~ .dropdown .branch-toggle {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.was-validated .branch-lookup .branch-native:invalid ~ .invalid-feedback,
.branch-lookup .branch-native.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Lay the control and its "Find a branch" button out as one row, with the label and the validation
   feedback taking full width above and below. Wraps to two rows on a narrow screen. */
.branch-field,
.branch-lookup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
}

.branch-field > .form-floating,
.branch-lookup > .dropdown {
    flex: 1 1 12rem;
}

.branch-lookup > .form-label {
    flex: 0 0 100%;
    margin-bottom: 0;
}

.branch-lookup > .invalid-feedback {
    flex: 0 0 100%;
}

/* .form-floating is taller than a default button, so match it to keep the two aligned. */
.branch-field > .branch-find {
    min-height: calc(3.5rem + 2px);
}

.branch-modal-table td,
.branch-modal-table th {
    vertical-align: middle;
}