/**
 * Package comparison under the price cards.
 *
 * Sizes are in em because the site sets the root font size to 10px.
 */

.atmos365-cmp {
    --atmos365-cmp-accent: var(--primary, #d61339);
    --atmos365-cmp-ink: var(--secondary, #33050f);
    --atmos365-cmp-warm: var(--action-ultra-light, #fff1e6);
    --atmos365-cmp-heading: var(--action, #f07f1b);
    --atmos365-cmp-line: rgba(51, 5, 15, 0.1);

    width: 100%;
    margin-top: 2.5em;
    color: var(--atmos365-cmp-ink);
}

.atmos365-cmp__bar {
    display: flex;
    justify-content: center;
}

.atmos365-cmp__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.75em 1.6em;
    border: 2px solid var(--atmos365-cmp-accent);
    border-radius: 2em;
    background: #fff;
    color: var(--atmos365-cmp-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.atmos365-cmp__toggle:hover,
.atmos365-cmp__toggle:focus-visible {
    background: var(--atmos365-cmp-accent);
    color: #fff;
}

.atmos365-cmp__toggle:focus-visible,
.atmos365-cmp__card-link:focus-visible {
    outline: 2px solid var(--atmos365-cmp-accent);
    outline-offset: 3px;
}

.atmos365-cmp__chevron {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.atmos365-cmp--open .atmos365-cmp__chevron {
    transform: rotate(180deg);
}

.atmos365-cmp__panel {
    margin-top: 1.75em;
}

.atmos365-cmp__scroll {
    overflow-x: auto;
    border-radius: 1em;
    background: #fff;
    box-shadow: 0 0 0 1px var(--atmos365-cmp-line);
}

.atmos365-cmp__table {
    width: 100%;
    min-width: 40em;
    border-collapse: collapse;
    font-size: 0.95em;
    line-height: 1.4;
}

.atmos365-cmp__caption,
.atmos365-cmp__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.atmos365-cmp__table th,
.atmos365-cmp__table td {
    /* Keeps the visually hidden labels inside the table, not the page. */
    position: relative;
    padding: 0.7em 1em;
    border-bottom: 1px solid var(--atmos365-cmp-line);
    text-align: center;
    vertical-align: middle;
}

.atmos365-cmp__table tbody th[scope="row"] {
    width: 40%;
    text-align: left;
    font-weight: 400;
}

/* Keep the row names in view when the table scrolls sideways on a phone. */
.atmos365-cmp__table tbody th[scope="row"],
.atmos365-cmp__table .atmos365-cmp__corner {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}

.atmos365-cmp__table thead th,
.atmos365-cmp__table thead td {
    padding-top: 1.2em;
    padding-bottom: 1.1em;
    border-bottom: 2px solid var(--atmos365-cmp-line);
}

.atmos365-cmp__package-name,
.atmos365-cmp__package-price,
.atmos365-cmp__package-note {
    display: block;
}

.atmos365-cmp__package-name {
    color: var(--atmos365-cmp-heading);
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.2;
}

.atmos365-cmp__package-price {
    margin-top: 0.2em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.atmos365-cmp__package-note {
    margin-top: 0.15em;
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.75;
}

.atmos365-cmp__group th {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    background: var(--atmos365-cmp-warm);
    color: var(--atmos365-cmp-ink);
    font-weight: 700;
    text-align: left;
}

.atmos365-cmp__tick {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    color: var(--atmos365-cmp-accent);
    vertical-align: middle;
}

.atmos365-cmp__dash {
    opacity: 0.35;
    font-size: 1.2em;
}

.atmos365-cmp__table tfoot td {
    padding-top: 1.2em;
    padding-bottom: 1.4em;
    border-bottom: 0;
}

.atmos365-cmp__cta {
    display: inline-block;
    padding: 0.6em 1.4em;
    border-radius: 2em;
    background: var(--atmos365-cmp-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.atmos365-cmp__cta:hover,
.atmos365-cmp__cta:focus-visible {
    color: #fff;
    filter: brightness(1.1);
}

/* On a phone, fit two or three packages on screen before scrolling sideways. */
@media (max-width: 600px) {
    .atmos365-cmp__table {
        min-width: calc(11em + var(--atmos365-cmp-columns, 2) * 5.5em);
        font-size: 0.85em;
    }

    .atmos365-cmp__table th,
    .atmos365-cmp__table td {
        padding: 0.6em 0.5em;
    }

    .atmos365-cmp__table tbody th[scope="row"] {
        width: 50%;
        padding-left: 0.8em;
    }

    .atmos365-cmp__group th {
        padding-left: 0.8em;
    }

    .atmos365-cmp__package-name {
        font-size: 1.15em;
    }

    .atmos365-cmp__cta {
        padding: 0.55em 1em;
    }
}

/* Card items that open the table at their row. */
.atmos365-cmp__card-link {
    cursor: pointer;
}

.atmos365-cmp__flash th,
.atmos365-cmp__flash td {
    animation: atmos365-cmp-flash 1.6s ease-out;
}

@keyframes atmos365-cmp-flash {
    0%,
    40% {
        background-color: rgba(240, 127, 27, 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .atmos365-cmp__toggle,
    .atmos365-cmp__chevron {
        transition: none;
    }

    .atmos365-cmp__flash th,
    .atmos365-cmp__flash td {
        animation: none;
        outline: 2px solid rgba(240, 127, 27, 0.6);
    }
}