.cta-quote {
    border: 1px solid var(--clr-dark);
    background-color: var(--clr-bg);
    color: var(--clr-suplight);
    padding-right: calc(var(--std-padding) / 3);
    padding-left: calc(var(--std-padding) / 3);
    z-index: 4800;
}

.cta-quote:hover {
    background: var(--clr-dark);
}

html.light .cta-quote:hover {
    background: var(--clr-dark);
    color: var(--clr-suplight);
}

.quote-widget {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4900;
    box-shadow: var(--std-shadow);
    border-radius: calc(var(--bord-rad) / 2);
}

/* Panel */
.quote-panel {
    /* width: min(360px, calc(90vw - 32px)); */
    width: max(300px);
    border-radius: calc(var(--bord-rad) / 2);
    overflow: hidden;
    background: var(--clr-bg);
    color: var(--clr-suplight);

    /* collapsed state */
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    border: none;

    transition: transform 180ms ease, opacity 180ms ease, max-height 220ms ease;
}

/* Open state */
.quote-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    max-height: 70vh;
    border: none;
    background: var(--clr-bg);
}

/* Header */
.quote-panel__header {
    display: flex;
    border-top-left-radius: calc(var(--bord-rad) / 2);
    border-top-right-radius: calc(var(--bord-rad) / 2);
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--std-padding) / 2);
    background: var(--clr-really-dark);
    color: var(--clr-suplight);
    border: 1px solid var(--clr-dark);
    border-bottom: 0;
}

html.light .quote-panel__header {
    background: var(--clr-bg);
}

.quote-close {
    border: none;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    background: var(--clr-really-dark);
    color: var(--clr-suplight);
    border-radius: var(--circ-rad);
    border: 1px solid var(--clr-dark);
}

html.light .quote-close {
    background: var(--clr-really-dark);
}

.quote-close:hover {
    background-color: var(--clr-dark);
    /* background-color: var(--clr-light); */
}

/* Body */
.quote-panel__body {
    padding: calc(var(--std-padding) / 2);

    background: var(--clr-really-dark-alt);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    gap: calc(var(--std-padding) / 2);
    border: 1px solid var(--clr-dark);
    border-radius: calc(var(--bord-rad) / 2);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.quote-settings {
    display: grid;
    align-content: center;
    gap: calc(var(--std-padding) / 2);
    padding-bottom: calc(var(--std-padding) / 2);
}

.quote-settings label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--std-padding) / 2);
}

.quote-panel select,
.quote-panel input {
    width: max(170px);
    box-sizing: border-box;
    border-radius: calc(var(--bord-rad) / 2);
    border: 1px solid var(--clr-dark);
    background-color: var(--clr-really-dark);
    color: var(--clr-suplight);
    padding: calc(var(--std-padding) / 3);
    margin-left: calc(var(--std-padding) / 2);
    font-family: Maple, monospace;
    font-size: 14px;
    outline: none;
}

.quote-panel select:hover {
    cursor: pointer;
}

.quote-panel select:hover,
.quote-panel input:hover {
    background-color: var(--clr-bg);
}

.quote-results {
    border-radius: calc(var(--bord-rad) / 2);
    padding: calc(var(--std-padding) / 2);
    background: var(--clr-bg);
    display: grid;
    gap: calc(var(--std-padding) / 2);
    border: 1px solid var(--clr-dark);
}

.quote-results__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}