@import url("common/popup.css");
@import url("common/dialogs.css");
@import url("common/first-party.css");
@import url("common/first-occurrence.css");
@import url("common/utilities.css");

:root {
    --a4d-orange: #ff7a00;
    --a4d-orange-deep: #ff7a00;
    --a4d-orange-soft: #fff3e9;
    --a4d-ink: #151923;
    --a4d-muted: #667085;
    --a4d-line: #e7e9ee;
    --a4d-panel: #f8f9fb;
    --a4d-shadow: 0 24px 70px rgba(17, 24, 39, 0.22);
}

/* Shared first-party HTML dialog close control.
   Use for custom HTML dialogs that do not use a standard .modal-header. */
button.a4d-dialog-close,
.modal-header .close {
    appearance: none !important;
    box-sizing: border-box !important;
    flex: 0 0 42px !important;
    float: none !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--a4d-orange) !important;
    border-radius: 10px !important;
    background: var(--a4d-orange) !important;
    color: #000 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

button.a4d-dialog-close > svg,
.modal-header .close > svg {
    display: block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    fill: none !important;
    stroke: #000 !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: none !important;
    pointer-events: none !important;
}

button.a4d-dialog-close:hover,
button.a4d-dialog-close:focus-visible,
.modal-header .close:hover,
.modal-header .close:focus-visible {
    background: var(--a4d-orange) !important;
    color: #000 !important;
}

button.a4d-dialog-close:focus-visible,
.modal-header .close:focus-visible {
    outline: 3px solid color-mix(in srgb, #000 28%, transparent) !important;
    outline-offset: 2px !important;
}