/* ==========================================================
   IV — only specific styles
   ========================================================== */

.iv-card-open {
    color: inherit;

    background:
        transparent;

    cursor: pointer;
}

.iv-card-title {
    padding: 0;

    border: 0;

    background:
        transparent;

    color: inherit;

    font: inherit;

    text-align: center;

    cursor: pointer;
}

.iv-card-title:hover {
    color:
        var(--villa-green);
}

.iv-card-more {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        .4rem
        .7rem;

    border: 0;

    border-radius:
        999px;

    background:
        var(--villa-surface-green);

    color:
        var(--villa-green);

    font-size: .86rem;
    font-weight: 500;

    cursor: pointer;
}

.iv-card-more:hover {
    background:
        var(--villa-surface-green-hover);
}

.iv-card-open:focus-visible,
.iv-card-title:focus-visible,
.iv-card-more:focus-visible {
    outline:
        3px solid
        var(--villa-focus-color);

    outline-offset: 3px;
}

.iv-card__lead {
    margin-bottom: 1.2rem;

    color:
        var(--villa-text-soft);

    font-size: 1.05rem;
    line-height: 1.65;
}

.iv-card__section + .iv-card__section {
    margin-top: 1.4rem;
}

.iv-card__section h3 {
    margin-bottom: .6rem;

    font-size: 1rem;
    font-weight: 600;
}

.iv-card__section ul {
    margin-bottom: 0;

    padding-left: 1.25rem;

    line-height: 1.65;
}

.iv-card__section li + li {
    margin-top: .35rem;
}

.iv-card__footer {
    display: flex;

    justify-content: flex-end;

    margin-top: 1.5rem;
    padding-top: 1.15rem;

    border-top:
        1px solid
        var(--villa-border);
}

.iv-price {
    text-align: right;
}

.iv-price span {
    display: block;

    margin-bottom: .1rem;

    color:
        var(--villa-muted);

    font-size: .82rem;
}

.iv-price strong {
    color:
        var(--villa-text);

    font-size: 1.4rem;
    font-weight: 600;
}



/* ==========================================================
   IV CARDS
   ========================================================== */

.iv-card-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.iv-card-title {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: center;
    cursor: pointer;
    transition: color var(--villa-transition);
}

.iv-card-title:hover {
    color: var(--villa-green);
}

.iv-card-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: .4rem .8rem;
    border: 0;
    border-radius: 999px;
    background: var(--villa-surface-green);
    color: var(--villa-green);
    font-size: .86rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color var(--villa-transition),
        color var(--villa-transition);
}

.iv-card-more:hover {
    background: var(--villa-surface-green-hover);
    color: var(--villa-green-dark);
}

.iv-card-open:focus-visible,
.iv-card-title:focus-visible,
.iv-card-more:focus-visible {
    outline: 3px solid var(--villa-focus-color);
    outline-offset: 3px;
}


/* ==========================================================
   IV MODAL CONTENT
   ========================================================== */

.iv-card__content {
    line-height: 1.65;
}

.iv-card__content h3 {
    margin: 1.4rem 0 .65rem;
    color: var(--villa-green-dark);
    font-size: 1rem;
    font-weight: 600;
}

.iv-card__content h3:first-child {
    margin-top: 0;
}

.iv-card__content ul {
    padding-left: 1.25rem;
}

.iv-card__content li + li {
    margin-top: .35rem;
}

.iv-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--villa-border);
}

.iv-price {
    flex-shrink: 0;
    text-align: right;
}

.iv-price__label {
    display: block;
    margin-bottom: .15rem;
    color: var(--villa-muted);
    font-size: .82rem;
}

.iv-price__value {
    color: var(--villa-green-dark);
    font-size: 1.45rem;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .iv-card__footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .iv-price {
        text-align: left;
    }

    .iv-card__footer .btn {
        width: 100%;
    }
}