/* Notaring Core: visual fixes for Amelia forms. */

/* Phone field: keep the country picker level with the number box (Amelia's inline layout drops it by 1px). */
.m-select-country .m-popover-trigger {
    display: block !important;
    line-height: normal !important;
}

.m-select-country .m-popover-trigger > .m-input {
    vertical-align: top !important;
    display: flex !important;
}

/* Flags: show them at their real 3:2 shape instead of squeezed into a circle. */
.m-select-country picture,
.m-select-country picture img,
.m-select-country__select__item__flag-container picture,
.m-select-country__select__item__flag-container picture img {
    width: 22px !important;
    height: 15px !important;
}

.m-select-country picture img,
.m-select-country__select__item__flag-container picture img {
    object-fit: cover !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(35, 41, 46, .08);
}

/* Customer portal: "Book an appointment" section (see assets/js/portal-booking.js). */
/* While closed, the booking pane stays loaded but invisible, at its real size (so it opens instantly and lays out correctly). */
.ntg-book-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

html.ntg-booking-open .ntg-book-pane {
    position: relative;
    visibility: visible;
    pointer-events: auto;
    z-index: auto;
}

html.ntg-booking-open .am-fs__main-inner {
    display: flex !important;
    flex-direction: column;
}

html.ntg-booking-open .ntg-book-pane {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
}

/* While booking on a computer, size the portal to about 80% of the screen so it stays fully in view,
   with room above and below and the Continue bar always visible. */
html.ntg-booking-open:not(.ntg-mobile) .am-cap__wrapper {
    height: clamp(600px, calc(100vh - 180px), 860px) !important;
    max-height: none !important;
}

html.ntg-booking-open:not(.ntg-mobile) .am-cap__wrapper > .am-fs-sb,
html.ntg-booking-open:not(.ntg-mobile) .am-cap__wrapper > .am-fs__main,
html.ntg-booking-open:not(.ntg-mobile) .am-cap__wrapper .am-fs__main-inner {
    height: 100% !important;
    max-height: none !important;
}

html.ntg-booking-open .am-fs__main-inner > .am-fs__main-content,
html.ntg-booking-open:not(.ntg-mobile) .am-fs__main-inner > .am-caph__main {
    display: none !important;
}

.ntg-book-pane iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 480px;
    border: 0;
    opacity: 0;
    transition: opacity .2s;
}

.ntg-book-pane iframe.ntg-ready {
    opacity: 1;
}

/* Only the active section looks selected. */
html.ntg-booking-open .am-fs-sb__page.selected:not(.ntg-book-item),
html.ntg-booking-open .am-msd__item.selected:not(.ntg-book-item-m) {
    background: transparent !important;
}

html.ntg-booking-open .am-fs-sb__page.selected:not(.ntg-book-item) .am-fs-sb__page-indicator,
html.ntg-booking-open .am-msd__item.selected:not(.ntg-book-item-m) .am-msd__item-indicator {
    display: none !important;
}

.ntg-book-item.ntg-on,
.ntg-book-item-m.ntg-on {
    background: rgba(255, 255, 255, .1) !important;
}

.ntg-book-item:not(.ntg-on):not(:hover) .am-fs-sb__page-indicator,
.ntg-book-item-m:not(.ntg-on) .am-msd__item-indicator,
.ntg-book-item .am-fs-sb__page-inner.am-collapsed .am-fs-sb__page-heading,
.ntg-book-item .am-fs-sb__page-inner.am-collapsed .am-fs-sb__page-indicator {
    display: none !important;
}

/* No browser outline when the menu item is clicked with a mouse (keyboard focus still shows one). */
.ntg-book-item:focus:not(:focus-visible),
.ntg-book-item-m:focus:not(:focus-visible) {
    outline: none !important;
}

/* The active "Book appointment" item shows the same arrow as Amelia's selected items. */
.ntg-book-item.ntg-on .am-fs-sb__page-inner:not(.am-collapsed) .am-fs-sb__page-indicator,
.ntg-book-item:hover .am-fs-sb__page-inner:not(.am-collapsed) .am-fs-sb__page-indicator,
.ntg-book-item-m.ntg-on .am-msd__item-indicator {
    display: flex !important;
}

@media (prefers-reduced-motion: reduce) {
    .ntg-book-pane iframe {
        transition: none;
    }
}

/* Customer portal: "Documents" section (see assets/js/portal-documents.js).
   Our open/closed state lives on <html> (Amelia rewrites the classes of its own elements on every re-render).
   Hidden unless Documents is open; strong enough to beat Amelia's own display rules. */
.ntg-docs-pane {
    display: none !important;
}

html.ntg-docs-open .am-fs__main-inner {
    display: flex !important;
    flex-direction: column;
}

html.ntg-docs-open .am-fs__main-inner > .am-fs__main-content {
    display: none !important;
}

/* Documents uses Amelia's own header bar (so it looks exactly like Appointments), without the time zone picker. */
html.ntg-docs-open .am-fs__main-inner > .am-caph__main .am-select-wrapper {
    visibility: hidden !important;
}

html.ntg-docs-open .ntg-docs-pane {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    box-sizing: border-box;
    color: var(--am-c-main-text, #1a2c37);
    font-family: inherit;
}

.amelia-v2-booking #amelia-container .ntg-docs-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 32px 32px;
    box-sizing: border-box;
    text-align: left;
}

html.ntg-mobile .amelia-v2-booking #amelia-container .ntg-docs-body {
    padding: 16px;
}

/* Never wider than the portal, even with long document names. */
html.ntg-docs-open .am-fs__main,
html.ntg-docs-open .am-fs__main-inner,
.amelia-v2-booking #amelia-container .ntg-docs-pane {
    min-width: 0;
    max-width: 100%;
}

.amelia-v2-booking #amelia-container .ntg-docs-h {
    margin: 0 0 10px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--am-c-main-text, #1a2c37) !important;
    opacity: .7;
}

.amelia-v2-booking #amelia-container .ntg-docs-h:not(:first-child) {
    margin-top: 28px !important;
}

.amelia-v2-booking #amelia-container .ntg-docs-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.amelia-v2-booking #amelia-container .ntg-docs-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    margin: 0 !important;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid rgba(26, 44, 55, .12);
    border-radius: 10px;
    background: #fff;
}

.amelia-v2-booking #amelia-container .ntg-docs-row-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2fc;
    color: #4a6ee0;
}

.amelia-v2-booking #amelia-container .ntg-docs-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.amelia-v2-booking #amelia-container .ntg-docs-row-title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amelia-v2-booking #amelia-container .ntg-docs-row-meta {
    font-size: 13px;
    line-height: 18px;
    opacity: .65;
}

.amelia-v2-booking #amelia-container .ntg-docs-btn {
    flex: 0 0 auto;
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    background: #15c39a;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    transition: background .15s;
}

.amelia-v2-booking #amelia-container .ntg-docs-btn:hover {
    background: #11a883;
}

.amelia-v2-booking #amelia-container .ntg-docs-btn:focus-visible {
    outline: 2px solid #4a6ee0;
    outline-offset: 2px;
}

.amelia-v2-booking #amelia-container .ntg-docs-note {
    margin: 0 !important;
    font-size: 14px;
    line-height: 22px;
    opacity: .75;
}

.amelia-v2-booking #amelia-container .ntg-docs-small {
    margin-top: 12px !important;
    font-size: 13px;
}

/* Files for upcoming appointments: View and Replace. */
.amelia-v2-booking #amelia-container .ntg-file-when {
    margin: 0 0 10px !important;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color: var(--am-c-main-text, #1a2c37);
}

.amelia-v2-booking #amelia-container .ntg-docs-list + .ntg-docs-small + .ntg-file-when {
    margin-top: 22px !important;
}

.amelia-v2-booking #amelia-container .ntg-file-acts {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.amelia-v2-booking #amelia-container button.ntg-docs-btn {
    margin: 0;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Same width while it says "Uploading…", so nothing jumps. */
.amelia-v2-booking #amelia-container .ntg-file-acts button.ntg-docs-btn {
    min-width: 108px;
    text-align: center;
}

.amelia-v2-booking #amelia-container button.ntg-docs-btn:disabled {
    cursor: default;
    background: #15c39a;
    opacity: .6;
}

.amelia-v2-booking #amelia-container .ntg-docs-btn-quiet {
    padding: 8px 17px;
    border: 1px solid rgba(26, 44, 55, .2);
    background: transparent;
    color: var(--am-c-main-text, #1a2c37) !important;
    transition: border-color .15s, color .15s;
}

.amelia-v2-booking #amelia-container .ntg-docs-btn-quiet:hover {
    background: transparent;
    border-color: #15c39a;
    color: #11a883 !important;
}

.amelia-v2-booking #amelia-container .ntg-file-input {
    display: none !important;
}

.amelia-v2-booking #amelia-container .ntg-file-msg {
    font-size: 13px;
    line-height: 18px;
}

.amelia-v2-booking #amelia-container .ntg-file-msg:empty {
    display: none;
}

.amelia-v2-booking #amelia-container .ntg-file-msg.ntg-file-ok {
    margin-top: 2px;
    color: var(--am-c-main-text, #1a2c37);
    opacity: .7;
}

.amelia-v2-booking #amelia-container .ntg-file-msg.ntg-file-err {
    margin-top: 2px;
    color: #c4392f;
}

.amelia-v2-booking #amelia-container .ntg-file-row.ntg-busy .ntg-docs-row-text {
    opacity: .6;
}

/* Empty state: matches Amelia's "No appointments found". */
.amelia-v2-booking #amelia-container .ntg-empty {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 0 40px;
    color: var(--am-c-main-text, #1a2c37);
}

.amelia-v2-booking #amelia-container .ntg-empty-img {
    color: var(--am-c-main-text, #1a2c37);
    line-height: 0;
}

.amelia-v2-booking #amelia-container .ntg-empty-art {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
}

.amelia-v2-booking #amelia-container .ntg-empty-heading {
    margin: 14px 0 4px !important;
    font-size: 18px !important;
    line-height: 1.555555 !important;
    font-weight: 400 !important;
    color: var(--am-c-main-text, #1a2c37) !important;
}

.amelia-v2-booking #amelia-container .ntg-empty-text {
    margin: 0 !important;
    max-width: 400px;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: var(--am-c-main-text, #1a2c37) !important;
    opacity: .7;
}

.amelia-v2-booking #amelia-container .ntg-docs-icon svg {
    display: block;
}

/* The drawn icon (older Amelia versions only) sits centred like Amelia's font icons. */
.amelia-v2-booking #amelia-container .ntg-docs-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Phones (Amelia's mobile layout). */
html.ntg-mobile .amelia-v2-booking #amelia-container .ntg-docs-row {
    padding: 12px;
    gap: 12px;
}

html.ntg-mobile .amelia-v2-booking #amelia-container .ntg-docs-row-icon {
    display: none;
}

html.ntg-mobile .amelia-v2-booking #amelia-container .ntg-docs-row-title {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* On a phone, View and Replace sit under the file name. */
html.ntg-mobile .amelia-v2-booking #amelia-container .ntg-file-row {
    flex-wrap: wrap;
}

html.ntg-mobile .amelia-v2-booking #amelia-container .ntg-file-row .ntg-docs-row-text {
    flex: 1 1 100%;
}

html.ntg-mobile .amelia-v2-booking #amelia-container .ntg-file-acts {
    flex: 1 1 100%;
}

/* Only the active section looks selected while Documents is open. */
html.ntg-docs-open .am-fs-sb__page.selected:not(.ntg-docs-item),
html.ntg-docs-open .am-msd__item.selected:not(.ntg-docs-item-m) {
    background: transparent !important;
}

html.ntg-docs-open .am-fs-sb__page.selected:not(.ntg-docs-item) .am-fs-sb__page-indicator,
html.ntg-docs-open .am-msd__item.selected:not(.ntg-docs-item-m) .am-msd__item-indicator {
    display: none !important;
}

.ntg-docs-item.ntg-on,
.ntg-docs-item-m.ntg-on {
    background: rgba(255, 255, 255, .1) !important;
}

.ntg-docs-item:not(.ntg-on):not(:hover) .am-fs-sb__page-indicator,
.ntg-docs-item-m:not(.ntg-on) .am-msd__item-indicator,
.ntg-docs-item .am-fs-sb__page-inner.am-collapsed .am-fs-sb__page-heading,
.ntg-docs-item .am-fs-sb__page-inner.am-collapsed .am-fs-sb__page-indicator {
    display: none !important;
}

.ntg-docs-item.ntg-on .am-fs-sb__page-inner:not(.am-collapsed) .am-fs-sb__page-indicator,
.ntg-docs-item:hover .am-fs-sb__page-inner:not(.am-collapsed) .am-fs-sb__page-indicator,
.ntg-docs-item-m.ntg-on .am-msd__item-indicator {
    display: flex !important;
}

.ntg-docs-item:focus:not(:focus-visible),
.ntg-docs-item-m:focus:not(:focus-visible) {
    outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ntg-docs-btn,
    .ntg-docs-btn-quiet {
        transition: none;
    }
}

/* Menu labels for Documents and Book appointment animate exactly like Amelia's own items. */
@keyframes ntg-sb-label {
    0% { opacity: 0; transform: translate(-100%); }
    50% { transform: translate(10%); }
    to { opacity: 1; transform: translate(0); }
}

.am-fs-sb__page-heading.ntg-sb-in {
    animation: ntg-sb-label 1s;
}

.am-fs-sb__page-heading.ntg-sb-out {
    animation: ntg-sb-label 1s reverse forwards;
}

/* Our menu items sit in our own box at the end of Amelia's menu; keep Amelia's staggered entrance going. */
.amelia-v2-booking #amelia-container .ntg-sb-extra > .ntg-docs-item {
    animation-delay: .21s !important;
}

.amelia-v2-booking #amelia-container .ntg-sb-extra > .ntg-book-item {
    animation-delay: .28s !important;
}

.amelia-v2-booking #amelia-container .ntg-msd-extra > .ntg-docs-item-m {
    animation-delay: .28s !important;
}

.amelia-v2-booking #amelia-container .ntg-msd-extra > .ntg-book-item-m {
    animation-delay: .35s !important;
}

/* Section name in the portal header (Documents, or Book appointment on phones). Amelia's own text stays in place
   but takes no room; the label is drawn in the same font, so the header keeps its exact size and alignment. */
.am-caph__text[data-ntg-label] {
    font-size: 0 !important;
}

.am-caph__text[data-ntg-label]::after {
    content: attr(data-ntg-label);
    font-size: 18px;
    line-height: 1.55;
}

/* Amelia opens the sidebar on load and folds it a second later; show it folded from the first frame
   (see portal-booking.js). Only the customer portal's sidebar, never the booking form's. */
html.ntg-sb-boot .am-cap__wrapper .am-fs-sb {
    width: 72px !important;
    transition: none !important;
}

html.ntg-sb-boot .am-cap__wrapper .am-fs-sb__page-heading,
html.ntg-sb-boot .am-cap__wrapper .am-fs-sb__page-indicator {
    display: none !important;
}

html.ntg-sb-boot .am-cap__wrapper .am-fs-sb__page-inner {
    justify-content: center !important;
}

/* Booking form: note under an add-on that reached Standard's limit (see assets/js/booking-limits.js). */
.amelia-v2-booking #amelia-container .ntg-limit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 0 !important;
    padding: 12px 14px !important;
    border-radius: 8px;
    background: #eef2fc;
    animation: ntg-limit-in .2s ease-out;
}

.amelia-v2-booking #amelia-container .ntg-limit-text {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 21px !important;
    color: var(--am-c-main-text, #1a2c37) !important;
}

.amelia-v2-booking #amelia-container .ntg-limit-text strong {
    font-weight: 600;
}

.amelia-v2-booking #amelia-container .ntg-limit-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: #15c39a;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.amelia-v2-booking #amelia-container .ntg-limit-btn:hover {
    background: #11a883;
}

.amelia-v2-booking #amelia-container .ntg-limit-btn:focus-visible {
    outline: 2px solid #4a6ee0;
    outline-offset: 2px;
}

.amelia-v2-booking #amelia-container .ntg-limit-btn:disabled {
    opacity: .6;
    cursor: default;
}

@media (max-width: 480px) {
    .amelia-v2-booking #amelia-container .ntg-limit {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Movement only: the note is never hidden, even where the browser pauses animations. */
@keyframes ntg-limit-in {
    from { transform: translateY(-4px); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .amelia-v2-booking #amelia-container .ntg-limit {
        animation: none;
    }
}

/* Booking form: the Upload Documents step built from what the customer pays for (see assets/js/booking-upload.js).
   Amelia's own upload fields, its notes box and its "Other signers" box (33, filled in by the script) stay in the
   page, hidden; every file still goes through them. */
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-1,
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-20,
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-24,
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-33,
.amelia-v2-booking.ntg-up-on:not(.ntg-note-open) #amelia-container #am-cf-25,
.amelia-v2-booking.ntg-note-open #amelia-container .ntg-up-note {
    display: none !important;
}

.amelia-v2-booking #amelia-container .ntg-up,
.amelia-v2-booking #amelia-container .ntg-up-details {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.amelia-v2-booking #amelia-container .ntg-up {
    margin: 4px 0 12px !important;
}

.amelia-v2-booking #amelia-container .ntg-up-details {
    margin: 0 0 6px !important;
}

.amelia-v2-booking #amelia-container .ntg-up-h {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    color: var(--am-c-main-text, #23292e) !important;
}

.amelia-v2-booking #amelia-container .ntg-up-sub {
    margin: 2px 0 10px !important;
    font-size: 13px !important;
    line-height: 19px !important;
    color: var(--am-c-main-text, #23292e) !important;
    opacity: .7;
}

.amelia-v2-booking #amelia-container .ntg-up-sec {
    margin: 0 0 20px !important;
}

.amelia-v2-booking #amelia-container .ntg-up-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(35, 41, 46, .16) !important;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
}

.amelia-v2-booking #amelia-container .ntg-up-signer {
    margin: 0 0 8px !important;
    border: 1px solid rgba(35, 41, 46, .16) !important;
    border-radius: 8px;
    overflow: hidden;
}

.amelia-v2-booking #amelia-container .ntg-up-signer .ntg-up-row {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
}

.amelia-v2-booking #amelia-container .ntg-up-row.ntg-done,
.amelia-v2-booking #amelia-container .ntg-up-signer:has(.ntg-done) {
    background: #f7f9fd;
}

.amelia-v2-booking #amelia-container .ntg-up-row.ntg-missing {
    border-color: #c4392f !important;
}

.amelia-v2-booking #amelia-container .ntg-up-signer:has(.ntg-missing) {
    border-color: #c4392f !important;
}

.amelia-v2-booking #amelia-container .ntg-up-row.ntg-busy {
    opacity: .6;
    pointer-events: none;
}

.amelia-v2-booking #amelia-container .ntg-up-ic {
    flex: 0 0 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef2fc;
    color: #4a6ee0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.amelia-v2-booking #amelia-container .ntg-done .ntg-up-ic {
    background: #4a6ee0;
    color: #fff !important;
}

.amelia-v2-booking #amelia-container .ntg-up-ic svg {
    display: block;
}

.amelia-v2-booking #amelia-container .ntg-up-t {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
}

.amelia-v2-booking #amelia-container .ntg-up-t b {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--am-c-main-text, #23292e) !important;
}

.amelia-v2-booking #amelia-container .ntg-up-meta {
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--am-c-main-text, #23292e) !important;
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hints wrap on narrow screens; only file names are cut short. */
.amelia-v2-booking #amelia-container .ntg-up-row:not(.ntg-done) .ntg-up-meta {
    white-space: normal;
}

.amelia-v2-booking #amelia-container .ntg-bad .ntg-up-meta {
    color: #c4392f !important;
    opacity: 1;
    white-space: normal;
}

.amelia-v2-booking #amelia-container .ntg-up-input {
    display: none !important;
}

.amelia-v2-booking #amelia-container .ntg-up-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: #15c39a;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.amelia-v2-booking #amelia-container .ntg-up-btn:hover {
    background: #11a883;
}

.amelia-v2-booking #amelia-container .ntg-up-change,
.amelia-v2-booking #amelia-container .ntg-up-a {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 19px;
    cursor: pointer;
}

.amelia-v2-booking #amelia-container .ntg-up-change {
    flex: 0 0 auto;
    padding: 6px 4px;
    color: var(--am-c-main-text, #23292e);
    text-decoration: underline;
    opacity: .75;
}

.amelia-v2-booking #amelia-container .ntg-up-change:hover {
    opacity: 1;
}

.amelia-v2-booking #amelia-container .ntg-up-row:not(.ntg-done) .ntg-up-change,
.amelia-v2-booking #amelia-container .ntg-up-row.ntg-done .ntg-up-btn {
    display: none !important;
}

.amelia-v2-booking #amelia-container .ntg-up-a {
    color: #4a6ee0;
    font-weight: 600;
}

.amelia-v2-booking #amelia-container .ntg-up-a:hover {
    text-decoration: underline;
}

.amelia-v2-booking #amelia-container .ntg-up-btn:focus-visible,
.amelia-v2-booking #amelia-container .ntg-up-change:focus-visible,
.amelia-v2-booking #amelia-container .ntg-up-a:focus-visible {
    outline: 2px solid #4a6ee0;
    outline-offset: 2px;
}

.amelia-v2-booking #amelia-container .ntg-up-more {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    color: var(--am-c-main-text, #23292e) !important;
}

.amelia-v2-booking #amelia-container .ntg-up-rule {
    margin: 10px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px;
    background: #eef2fc;
    font-size: 13px !important;
    line-height: 19px !important;
    color: var(--am-c-main-text, #23292e) !important;
}

/* Certified true copy: "my recipient accepts online notarization" (Amelia checkbox field 26) as one bordered row
   like the file rows. The whole row ticks the box; Amelia still requires it. */
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 {
    position: relative;
    display: grid !important;
    grid-template-columns: 18px 1fr;
    column-gap: 10px;
    align-items: start;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 0 20px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(35, 41, 46, .16);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color .15s;
}

/* Amelia hides the field on services it isn't attached to (Standard, Premium): keep it hidden there. */
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26[style*="display: none"],
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26[style*="display:none"] {
    display: none !important;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26:hover {
    border-color: rgba(35, 41, 46, .32);
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26.is-error {
    border-color: #e5484d;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 > .el-form-item__label {
    grid-column: 2;
    grid-row: 1;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 400 !important;
    color: var(--am-c-main-text, #23292e) !important;
    text-align: left;
    cursor: pointer;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 > .el-form-item__label::before {
    display: none !important;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 > .el-form-item__content {
    grid-column: 1;
    grid-row: 1;
    position: static !important;
    margin: 1px 0 0 !important;
    line-height: 18px !important;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .am-checkbox-group-wrapper,
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-checkbox-group,
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .am-checkbox-wrapper {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-checkbox {
    position: static !important;
    display: block !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The checkbox's own label stretches over the row, so a click anywhere ticks it. */
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-checkbox::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

/* "I've checked" stays for screen readers; the field's label already says it. */
.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-checkbox__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-checkbox__inner {
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid rgba(35, 41, 46, .32) !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-sizing: border-box;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #15c39a !important;
    border-color: #15c39a !important;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-checkbox__inner::after {
    width: 4px !important;
    height: 8px !important;
    left: 5px !important;
    top: 1.5px !important;
    border-width: 2px !important;
    border-color: #fff !important;
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-checkbox__input.is-focus .el-checkbox__inner {
    box-shadow: 0 0 0 3px rgba(74, 110, 224, .25);
}

.amelia-v2-booking.ntg-up-on #amelia-container #am-cf-26 .el-form-item__error {
    position: static !important;
    grid-column: 1 / -1;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

.amelia-v2-booking #amelia-container .ntg-up-email {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px 10px;
    padding: 0 12px 12px 54px !important;
    background: inherit;
}

.amelia-v2-booking #amelia-container .ntg-up-field {
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid rgba(35, 41, 46, .25);
    border-radius: 6px;
    background: #fff;
    color: var(--am-c-main-text, #23292e);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.amelia-v2-booking #amelia-container .ntg-up-field:focus {
    border-color: #4a6ee0;
    outline: none;
    box-shadow: 0 0 0 1px #4a6ee0;
}

.amelia-v2-booking #amelia-container .ntg-up-field:disabled {
    background: #f4f6fa;
    color: rgba(35, 41, 46, .45);
}

.amelia-v2-booking #amelia-container .ntg-up-field.ntg-bad {
    border-color: #c4392f;
}

.amelia-v2-booking #amelia-container .ntg-up-same {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--am-c-main-text, #23292e) !important;
    white-space: nowrap;
    cursor: pointer;
    grid-column: 1 / -1;
}

.amelia-v2-booking #amelia-container .ntg-up-same input {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: #4a6ee0;
}

.amelia-v2-booking #amelia-container .ntg-up-error {
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    border-radius: 8px;
    background: #fdecea;
    color: #a3322a !important;
    font-size: 13px !important;
    line-height: 19px !important;
}

.amelia-v2-booking #amelia-container .ntg-up-error:empty {
    display: none !important;
}

/* Files too large for the server (booking-upload.js): the warning under the files, the file at fault,
   and Continue greyed out until it is fixed (a click on it brings the warning into view). */
.amelia-v2-booking #amelia-container .ntg-up-limit {
    margin: 4px 0 12px !important;
    padding: 10px 12px !important;
    border-radius: 8px;
    background: #fdecea;
    color: #a3322a !important;
    font-size: 13px !important;
    line-height: 19px !important;
}

.amelia-v2-booking #amelia-container .ntg-up-limit:empty {
    display: none !important;
}

.amelia-v2-booking #amelia-container .ntg-up-row.ntg-big {
    border-color: #c4392f !important;
}

.amelia-v2-booking #amelia-container .ntg-up-row.ntg-big .ntg-up-meta {
    color: #a3322a !important;
}

.amelia-v2-booking.ntg-up-big #amelia-container .am-fs__main-footer .am-button--primary {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

.amelia-v2-booking #amelia-container .ntg-up-note {
    display: inline-block !important;
}

/* The theme stretches buttons full width and centres their text; these links sit where the text is. */
.amelia-v2-booking #amelia-container .ntg-up-a,
.amelia-v2-booking #amelia-container .ntg-up-change {
    width: auto !important;
    text-align: left;
}

@media (max-width: 520px) {
    .amelia-v2-booking #amelia-container .ntg-up-row {
        gap: 10px;
    }

    .amelia-v2-booking #amelia-container .ntg-up-email {
        grid-template-columns: 1fr;
        padding-left: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .amelia-v2-booking #amelia-container .ntg-up-btn,
    .amelia-v2-booking #amelia-container .ntg-up-row {
        transition: none;
    }
}

/* Confirmation screen (assets/js/booking-confirmation.js). Everything here applies only while
   booking-confirmation.js has added its blocks (the .ntgc-on class). */

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-main > img,
.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-main > .am-fs__congrats-main-heading,
.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-main > span {
    display: none !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats {
    text-align: left !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-main {
    margin: 0 !important;
    padding: 0 !important;
}

.amelia-v2-booking #amelia-container .ntgc-top {
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 4px 0 18px;
    box-sizing: border-box;
}

.amelia-v2-booking #amelia-container .ntgc-ic {
    flex: 0 0 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #4a6ee0;
    color: #fff !important;
}

.amelia-v2-booking #amelia-container .ntgc-ic svg {
    display: block;
    width: 18px;
    height: 18px;
}

.amelia-v2-booking #amelia-container .ntgc-t {
    min-width: 0;
}

.amelia-v2-booking #amelia-container .ntgc-h {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    color: var(--am-c-main-text, #23292e) !important;
}

.amelia-v2-booking #amelia-container .ntgc-sub {
    margin: 2px 0 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    color: var(--am-c-main-text, #23292e) !important;
    opacity: .7;
    overflow-wrap: anywhere;
}

.amelia-v2-booking #amelia-container .ntgc-h2 {
    width: 100%;
    margin: 0 0 8px !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    color: var(--am-c-main-text, #23292e) !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-info {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 20px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f7f9fd !important;
    box-sizing: border-box;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__ci-label,
.amelia-v2-booking.ntgc-on #amelia-container .am-fs__ci-value {
    font-size: 14px !important;
    line-height: 22px !important;
    color: var(--am-c-main-text, #23292e) !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__ci-label {
    opacity: .7;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__ci-value {
    font-weight: 600 !important;
}

.amelia-v2-booking #amelia-container .ntgc-next {
    width: 100%;
    margin: 0 0 20px;
    text-align: left;
}

.amelia-v2-booking #amelia-container .ntgc-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(35, 41, 46, .16) !important;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}

.amelia-v2-booking #amelia-container .ntgc-num {
    flex: 0 0 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef2fc;
    color: #4a6ee0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.amelia-v2-booking #amelia-container .ntgc-row-t {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
}

.amelia-v2-booking #amelia-container .ntgc-row-t b {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--am-c-main-text, #23292e) !important;
}

.amelia-v2-booking #amelia-container .ntgc-meta {
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--am-c-main-text, #23292e) !important;
    opacity: .7;
}

.amelia-v2-booking #amelia-container .ntgc-rule {
    margin: 10px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px;
    background: #eef2fc;
    font-size: 13px !important;
    line-height: 19px !important;
    color: var(--am-c-main-text, #23292e) !important;
}

/* Phones: Amelia paints the top of its mobile confirmation in the sidebar colour (dark), which hid "You're booked",
   and lists each label and value on its own line. Plain white, and label and value side by side. */
.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats {
    background: none !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-info {
    box-shadow: none !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-info-mobile .am-fs__congrats-info-customer {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-info-mobile .am-fs__congrats-info-customer > .am-fs__ci-border {
    grid-column: 1 / -1 !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats-info-mobile .am-fs__ci-value {
    overflow-wrap: anywhere;
}

/* Phones: Amelia's "Add to Calendar" buttons sit on the confirmation itself (on computers they are in the dark
   sidebar). They are drawn in the sidebar's white, made for the dark top that is removed above, so they vanished.
   Here they use the page's own text colour, on white cards with a light border, left-aligned like the rest. */
.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats .am-fs-sb-cs {
    --am-c-atc-sb-text: var(--am-c-main-text, #23292e) !important;
    --am-c-atc-sb-text-op5: #fff !important;
    --am-c-atc-sb-text-op10: rgba(35, 41, 46, .16) !important;
    width: 100%;
    margin: 0 0 20px !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats .am-fs-sb-cs > p {
    margin: 0 0 8px !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    color: var(--am-c-main-text, #23292e) !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats .am-fs-sb-cs-cals {
    justify-content: flex-start !important;
    gap: 8px;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats .am-fs-sb-cs-cals-cards {
    margin: 0 !important;
    gap: 8px;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats .am-fs-sb-cs-cals-card {
    margin: 0 !important;
    background-color: #fff !important;
    border-color: rgba(35, 41, 46, .16) !important;
    color: var(--am-c-main-text, #23292e) !important;
    box-shadow: none !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats .am-fs-sb-cs-cals-card:hover {
    background-color: #f7f9fd !important;
}

.amelia-v2-booking.ntgc-on #amelia-container .am-fs__congrats .am-fs-sb-cs-cals-card div span {
    color: var(--am-c-main-text, #23292e) !important;
}

/* Scrollbars inside the booking form: a thin light-grey thumb only, no track, no arrows.
   Amelia sets two scrollbar styles: standard scrollbar colours (which make Chrome draw its full, old-style bar)
   and its own thin bars coloured from the theme blue. Both are replaced here. Firefox gets its own thin version. */
.amelia-v2-booking * {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
}

.amelia-v2-booking *::-webkit-scrollbar,
.amelia-v2-booking #amelia-container *::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
}

.amelia-v2-booking *::-webkit-scrollbar-track,
.amelia-v2-booking *::-webkit-scrollbar-track-piece,
.amelia-v2-booking *::-webkit-scrollbar-corner,
.amelia-v2-booking #amelia-container *::-webkit-scrollbar-track,
.amelia-v2-booking #amelia-container *::-webkit-scrollbar-track-piece,
.amelia-v2-booking #amelia-container *::-webkit-scrollbar-corner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.amelia-v2-booking *::-webkit-scrollbar-button,
.amelia-v2-booking #amelia-container *::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.amelia-v2-booking *::-webkit-scrollbar-thumb,
.amelia-v2-booking #amelia-container *::-webkit-scrollbar-thumb {
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(35, 41, 46, .18) !important;
}

.amelia-v2-booking #amelia-container *::-webkit-scrollbar-thumb:hover {
    background: rgba(35, 41, 46, .32) !important;
}

/* On the dark sidebar, the same thumb in a light grey. */
.amelia-v2-booking #amelia-container .am-fs-sb *::-webkit-scrollbar-thumb,
.amelia-v2-booking #amelia-container [class*="am-fs-sb__"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22) !important;
}

@supports (-moz-appearance: none) {
    .amelia-v2-booking * {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(35, 41, 46, .2) transparent !important;
    }
}

/* "Uploading your files… 45%" while the booking and its files are sent (assets/js/booking-send.js):
   a card in the middle of the booking form's main panel, over a light veil. The card sits inside Amelia's form,
   whose own resets would otherwise remove its spacing, hence the !important. */
.ntg-send-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 60 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, .82) !important;
    border-radius: inherit !important;
}

.ntg-send-layer.ntg-send-fixed {
    position: fixed !important;
    z-index: 100000 !important;
    background: rgba(255, 255, 255, .6) !important;
}

.ntg-send-layer.ntg-send-bad {
    cursor: pointer;
}

.ntg-send-layer .ntg-send {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    padding: 22px 22px 18px !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 36px rgba(35, 41, 46, .16) !important;
    font-family: "Open Sans", Arial, sans-serif;
    text-align: center !important;
    color: #23292e;
}

.ntg-send-layer .ntg-send-ic {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 0 10px !important;
    border-radius: 50% !important;
    background: #eef2fc !important;
    color: #4a6ee0;
}

.ntg-send-layer.ntg-send-bad .ntg-send-ic {
    background: #fdecea !important;
    color: #c4392f;
}

.ntg-send-layer .ntg-send-t {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    color: #23292e !important;
}

.ntg-send-layer.ntg-send-bad .ntg-send-t {
    color: #c4392f !important;
}

.ntg-send-layer .ntg-send-bar {
    display: block !important;
    height: 6px !important;
    border-radius: 6px !important;
    background: #eef2fc !important;
    overflow: hidden !important;
}

.ntg-send-layer .ntg-send-bar i {
    display: block !important;
    width: 0;
    height: 100% !important;
    border-radius: 6px !important;
    background: #4a6ee0 !important;
    transition: width .2s;
}

.ntg-send-layer .ntg-send-sub {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    color: #5f6e7d !important;
}

@media (prefers-reduced-motion: reduce) {
    .ntg-send-layer .ntg-send-bar i {
        transition: none;
    }
}