/* Shared dropdown and map context-menu surface; accent follows the action context. */
/* Keep the same centering width while DaisyUI's close transition is still visible. */
:root .modal:not(.modal-start, .modal-end) {
    scrollbar-gutter: stable;
}

/* Keep extension password menus clickable outside the credential dialogs.
   Scroll the full dialog on short screens instead of clipping its card. */
:root:has(.account-dialog[open], .account-dialog.modal-open) {
    overflow: hidden;
}

:root .account-dialog {
    overflow-y: auto;
    align-items: safe center;
}

:root .account-dialog .modal-box {
    overflow: visible;
    max-height: none;
    margin-block: 1rem;
}

/* Account feedback uses the same quiet, translucent surface as the dialogs. */
:root .account-dialog .alert-error {
    display: block;
    padding: .65rem .8rem;
    border: 1px solid rgb(255 139 139 / 35%);
    border-radius: .65rem;
    background: rgb(220 38 38 / 8%);
    color: #ffb3b3;
    font-size: .875rem;
    line-height: 1.45;
    text-align: left;
    box-shadow: none;
}

:root .account-dialog .alert-error.hidden {
    display: none;
}

:root .account-dialog .alert-error[data-tone="notice"] {
    border-color: rgb(255 255 255 / 22%);
    background: rgb(255 255 255 / 5%);
    color: rgb(255 255 255 / 85%);
}

.account-field-error {
    margin: .4rem 0 0;
    color: #ffb3b3;
    font-size: .8rem;
    line-height: 1.4;
}

:root .account-dialog input[aria-invalid="true"] {
    border-color: rgb(255 139 139 / 65%);
}

.sg-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 50%;
    background: transparent;
    color: white;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

/* The website's outline controls also belong to account dialogs on Maps/E-Codes. */
.review-action, .site-controls .btn, .account-dialog .btn, #disclaimerGate .btn {
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 9999px;
    background: rgb(255 255 255 / 5%);
    color: rgb(255 255 255 / 85%);
    font-size: .875rem;
    font-weight: 600;
    box-shadow: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.review-action .lucide-icon, .site-controls .btn .lucide-icon, .account-dialog .btn .lucide-icon {
    stroke-width: 2;
}

.review-action:disabled, .review-action[aria-disabled="true"],
.site-controls .btn:disabled, .site-controls .btn[aria-disabled="true"],
.account-dialog .btn:disabled, .account-dialog .btn[aria-disabled="true"], #disclaimerGate .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.site-controls .btn:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
.account-dialog .btn:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
#disclaimerGate .btn:not(:disabled):is(:hover, :focus-visible),
.review-action:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
.review-map-link:is(:hover, :focus-visible) {
    background: rgb(97 95 255 / 24%);
    border-color: rgb(97 95 255 / 65%);
    box-shadow: none;
    color: white;
}

.review-ecode-link:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
#disclaimerGate[data-accent="ecode"] .btn:not(:disabled):is(:hover, :focus-visible),
.site-controls .btn.btn-outline.review-ecode-link:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: rgb(220 38 38 / 24%);
    border-color: rgb(220 38 38 / 65%);
    box-shadow: none;
    color: white;
}

/* Keep the signed-in website Account inverted, including hover and keyboard focus. */
.site-controls .btn[data-open-account-modal]:not(:disabled):not([aria-disabled="true"]) {
    background: white;
    border-color: white;
    color: #111827;
}

.sg-modal-close:is(:hover, :focus-visible) {
    background: rgb(220 38 38 / 24%);
    border-color: rgb(220 38 38 / 65%);
}

.sg-modal-close:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sg-modal-close {
        transition: none;
    }
}

:root .modal-box.glass-box {
    background: rgb(25 28 36 / 42%);
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 1rem;
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    box-shadow: 0 24px 70px rgb(0 0 0 / 45%);
}

:root .sg-select-menu,
:root .panel-popover,
:root .marker-action-popup .leaflet-popup-content-wrapper {
    --menu-accent: 97 95 255;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: .85rem;
    background: rgb(12 13 17 / 94%);
    color: rgb(255 255 255 / 92%);
    box-shadow: 0 10px 32px rgb(0 0 0 / 35%);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

:root [data-menu-accent="ecode"] {
    --menu-accent: 220 38 38;
}

.sg-select-shell {
    display: contents;
}

.sg-select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    cursor: pointer;
    text-align: left;
}

.sg-select-trigger::after {
    content: '';
    width: .4rem;
    height: .4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-.1rem) rotate(45deg);
    flex-shrink: 0;
}

.sg-select-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.sg-select-trigger:disabled {
    opacity: .45;
    cursor: default;
}

:root .sg-select-menu {
    position: fixed;
    inset: auto;
    z-index: 2147483647;
    margin: 0;
    padding: .3rem;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    font: 500 .8rem/1.4 ui-sans-serif, system-ui, sans-serif;
}

:root .sg-select-menu:not(.sg-open) {
    display: none;
}

:root .sg-select-option,
:root .panel-popover-button {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 2rem;
    padding: .4rem .65rem;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: inherit;
    box-sizing: border-box;
    text-align: left;
    font: 500 .8rem/1.4 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
}

.sg-select-option::before {
    content: '';
    width: 1rem;
    flex-shrink: 0;
}

.sg-select-option[aria-selected="true"]::before {
    content: '✓';
}

:root .sg-select-option:is(:hover, :focus-visible),
:root .panel-popover-button:is(:hover, :focus-visible) {
    background: rgb(var(--menu-accent, 97 95 255) / 24%);
    color: white;
}

:root .sg-select-option[aria-selected="true"] {
    background: rgb(var(--menu-accent, 97 95 255));
    color: white;
}

:root .sg-select-option:focus-visible,
:root .panel-popover-button:focus-visible {
    outline: 1px solid rgb(255 255 255 / 65%);
    outline-offset: -1px;
}

:root .sg-select-option:disabled {
    opacity: .4;
    cursor: default;
    background: transparent;
}

:root .panel-popover-button.sg-menu-danger {
    color: #ff8b8b;
    font-weight: 650;
    background: rgb(220 38 38 / 10%);
}

:root .panel-popover-button.sg-menu-danger:is(:hover, :focus-visible) {
    background: rgb(220 38 38 / 24%);
    color: white;
}

:root .marker-action-popup .leaflet-popup-content-wrapper {
    padding: 0;
}

:root .marker-action-popup .leaflet-popup-content {
    margin: .25rem;
    color: inherit;
}

:root .marker-action-popup .leaflet-popup-tip {
    background: rgb(12 13 17 / 98%);
    box-shadow: none;
}