:root {
    --silver-grey: #CDCDCD;
    --quote-grey-1: #f5f4f5;
    --quote-grey-2: #e7e9ec;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    accent-color: var(--bs-yellow);
}
body > main {
    flex: 1;
}

.itk-content {
    z-index: unset;
}

button {
    border: none;
}
button[disabled]{
    filter: saturate(0) brightness(1.2);
    cursor: not-allowed !important;
}
button[disabled]:hover {
    text-decoration: none !important;
    padding: 15px 25px !important;
    margin: 2px !important;
}

img {
    max-width: 100%;
}
label {
    cursor: pointer;
}

#steps {
    display: grid;
}
.step {
    background-color: white;
    grid-area: 1/1;
    transition: opacity, display allow-discrete;
    transition-duration: .5s;
    display: none;
    opacity: 0;
}
.step.show {
    display: block;
    opacity: 1;
}

#summary {
    height: fit-content;
    position: sticky;
    top: 10px;
}

.step-summary {
    --bs-card-cap-bg: var(--quote-grey-1);
    --bs-card-cap-padding-x: 1.5rem;
    --bs-card-cap-padding-y: var(--bs-card-cap-padding-x);
    background-color: var(--quote-grey-2);
    height: fit-content;
    margin-bottom: 0.5rem;
    border-radius: var(--bs-card-border-radius);

}
.step-summary .card-header {
    border-radius: var(--bs-card-border-radius);
    transition: color, background-color;
    transition-duration: .2s;
    border: none;
    display: flex;
    justify-content: space-between;
}
.step-summary .card-body {
    padding: var(--bs-card-cap-padding-x);
}
.step-summary:has(.card-body:is(.show, .collapsing)){
    --bs-card-cap-color: white;
    --bs-card-cap-bg: var(--bs-blue);
    border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
}
.step-summary h4 {
    font-size: 0.9rem;
    color: #a9adb7;
    line-height: 1;
    margin-bottom: 0;
    margin-top: 10px;
}

.edit-btn {
    padding: 0;
    background: transparent;
}
.edit-btn svg {
    width: 25px;
    height: 25px;
}

.summary-prop-list span:has(+ span)::after {
    content: ", ";
}

.summary-prop-list:empty::before, #summary-tests:empty::before {
    content: "None selected";
    font-size: 16px;
    -webkit-text-stroke: 0.02em;
}

.summary-test {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.remove-btn {
    width: 10px;
    height: 20px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2306213d'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") transparent center/auto no-repeat;
}

.cta-yellow, .cta-tran {
    text-align: center;
}

#tests-list {
    list-style: none;
    padding: 0;
}

label.cta-label {
    position: relative;
}
label.cta-label input {
    display: none;
}
label.cta-label:has(:checked) {
    background-color: var(--bs-cyan);
}
label.cta-label .tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50% -15px;
    width: 300px;
    background-color: var(--quote-grey-1);
    border-radius: 999px;
    text-align: center;
    padding: 5px 20px;
    opacity: 0;
    display: none;
    transition: opacity, display allow-discrete;
    transition-duration: .3s;
}
label.cta-label .tooltip::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 10px;
    top: 100%;
    left: 50%;
    translate: -50%;
    background-color: inherit;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
label.cta-label:hover .tooltip {
    opacity: 1;
    display: inline-block;
    
}
@starting-style {
    label.cta-label:hover .tooltip { 
        opacity: 0;
    }
}
@property --color1 {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}
svg use {
    transition: --color1 .3s ease-in-out;
}
.product-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 10px;
}
label.product-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-left: 20px;
    background-color: var(--quote-grey-1);
    border-radius: 5px;
    transition: background-color .3s ease-in-out;
    cursor: pointer;
}
label.product-label:hover {
    background-color: var(--quote-grey-2);
}
label.product-label:has(:checked) {
    background-color: var(--bs-blue);
    color: white;
}
label.product-label svg use {
    --color1: var(--bs-blue);
}
label.product-label:has(:checked) svg use {
    --color1: white;
}
label.product-label:has(:checked):hover {
    background-color: #082c51;
}
label.product-label svg {
    width: 60px;
    height: 60px;
}

.i-btn {
    padding: 0;
    background: transparent;
    transition: opacity 0.3s;
}
.i-btn svg {
    width: 30px;
    height: 30px;
}
.i-btn:hover {
    opacity: 0.6;
}

.test, .test-location {
    border-bottom: 1px solid var(--silver-grey);
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    position: relative;

}

.test :is(h3, p) {
    max-width: calc(100% - 170px);
}

.test label.cta-label {
    position: absolute;
    top: 0;
    right: 0;
}

.test .supply {
    background-color: var(--bs-blue);
    color: white;
    padding: 2rem;

}
.test .supply h4 {
    color: var(--bs-yellow);
}

.test-location img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background-color: var(--quote-grey-2);
}

.location-select {
    list-style: none;
    background-color: var(--quote-grey-1);
    border-radius: 5px;
    padding: 0 20px;
}
.location-select li {
    padding: 15px 0;
}
.location-select li + li {
    border-top: 1px solid var(--silver-grey);
}
.location-select label {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.summary-field {
    display: grid;
    grid-template-columns: 1fr 25px;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
}
.summary-field button {
    grid-row-end: span 2;
}

:is(ol, ul) :is(ol, ul) {

}

.validation-error {
    color: red;
}

#quote-id {
    font-size: 1.5em;
    padding: 12px 10px 6px;
    background-color: #fff4cc;
}

.modal {
    --bs-modal-padding: 4rem;
    --bs-modal-width: 800px;
    --bs-modal-bg: transparent
}
.modal-body {
    background: white;
}
.btn-close {
    --bs-btn-close-opacity: 1;
    filter: invert();
}
.modal table td {
    padding-left: 50px;
    padding-bottom: 10px;
}
.modal table :is(th, td) {
    vertical-align: top;
}
#special-instructions {
    background-color: var(--quote-grey-2) !important;
}