.ntv-detail-box {
    font-size: var(--wp--preset--font-size--xx-small) !important;
    position: relative;
    margin-bottom: 20px !important;
}
.ntv-detail-box + .wp-block-group {
    margin-top: 128px !important;
}
.wp-block-group + .ntv-detail-box {
    margin-top: 64px !important;
}

.ntv-detail-box .detail-box-placement {
    position: absolute;
    width: 24px;
    height: 24px;
    content: "1";
    top: 24px;
    left: 0;
    min-width: 1rem;
    color: var(--wp--preset--color--river-bed);
    z-index: 9;
    border-radius: 8px 0 2px 0;
    text-align: center;
    background-color: var(--wp--preset--color--porcelain);
    font-weight: 400;
    font-size: 12px;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group
    > .wp-block-columns {
    position: relative;
    padding: 32px 20px 24px 20px;
    gap: 20px;
}

.ntv-detail-box .wp-block-read-more {
    margin-top: auto;
}

/* label badge */
.ntv-detail-box > .acf-innerblocks-container > p {
    background-color: var(--wp--preset--color--light-monza);
    padding: 4px 8px;
    color: var(--wp--preset--color--monza);
    border-radius: 5px 5px 0 0;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-left: 1.5rem;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1;
}
.ntv-detail-box > .acf-innerblocks-container > p + p {
    margin-left: 8px;
}
.ntv-detail-box > .acf-innerblocks-container > p *[class*="emoji_"] {
    margin-right: 4px;
}
.ntv-detail-box > .acf-innerblocks-container > p *[class*="emoji_"]::before {
    width: 14px;
    height: 14px;
}

.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group
    p.has-background {
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 400;
    display: inline-block;
}

.wp-block-acf-linked-detail-box
    .metafield[data-metafield-name="provider_ranking_description"] {
    background-color: #dcf6e7;
    padding: 0.2rem 0.7rem;
    border-radius: 8px 8px 0 0;
    display: inline-block;
    font-size: 1rem;
    margin-left: 1.5rem;
}

/* shadow and hover*/
.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-columns:not(:has(.wp-block-details)),
.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group:not(:has(.wp-block-details)) {
    width: 100%;
    border-radius: 8px;
    clear: both;
    outline: 1px solid #efefef !important;
}

.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group:not(:has(.qr_code_link_container)):hover:not(
        :has(.tabs:hover)
    ) {
    outline: 1px solid var(--wp--preset--color--monza) !important;
    cursor: pointer;
}

/* new layout for new detail boxes */
.ntv-detail-box .acf-innerblocks-container > .wp-block-group {
    width: 100%;
    border-radius: 8px;
}

.ntv-detail-box
    .acf-innerblocks-container
    > .wp-block-group
    > .wp-block-columns {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    max-width: none !important;
}

.ntv-detail-box .wp-block-details summary {
    background-color: var(--wp--preset--color--light-monza);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.ntv-detail-box .wp-block-details > .wp-block-columns {
    gap: 1rem;
    margin: 0 !important;
    padding: 1rem 0 0;
    max-width: none !important;
}

.ntv-detail-box .wp-block-details > .wp-block-columns .wp-block-column {
    padding-top: 0;
}

.ntv-detail-box
    .wp-block-details
    > .wp-block-columns
    .wp-block-column:not(:has(.tabs)) {
    height: fit-content;
}

/* post-image and image blocks */
.ntv-detail-box .wp-block-post-featured-image {
    text-align: left !important;
}
.ntv-detail-box .wp-block-post-featured-image .wp-post-image {
    max-width: 150px;
    max-height: 80px;
}

.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group
    > .wp-block-columns
    > .wp-block-column:first-child
    .wp-block-image
    img {
    object-fit: contain;
    max-width: 140px;
    max-height: 140px;
    vertical-align: initial !important;
}

/* special float on mobile */
.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group
    > .wp-block-columns
    > .wp-block-column:first-child
    > .wp-block-image:first-child {
    text-align: center;
}
.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group
    > .wp-block-columns
    > .wp-block-column:first-child
    > .wp-block-image:first-child
    img {
    max-width: 140px;
    border-radius: 4px;
    max-height: 100px;
}
.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group
    > .wp-block-columns
    > .wp-block-column:first-child
    > .wp-block-image:first-child
    + .wp-block-group {
    justify-content: flex-end;
    gap: 0 0.5rem;
    color: #868686;
    font-size: 12px;
    flex-wrap: wrap;
}
.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group
    > .wp-block-columns
    > .wp-block-column:first-child
    > .wp-block-acf-responsive-content {
    text-align: right;
}

.ntv-detail-box
    > .acf-innerblocks-container
    > .wp-block-group
    > .wp-block-columns
    > .wp-block-column:first-child
    > .wp-block-image:not(:first-child) {
    clear: both;
}

/* lists */
.ntv-detail-box ul.is-style-orange_checkmark_list > li,
.ntv-detail-box ul.is-style-crossmark_list > li,
.ntv-detail-box ul.is-style-green_checkmark_list > li {
    padding-left: 1.8rem;
    margin-bottom: 4px !important;
}
.ntv-detail-box ul.is-style-orange_checkmark_list > li::before,
.ntv-detail-box ul.is-style-crossmark_list > li::before,
.ntv-detail-box ul.is-style-green_checkmark_list > li::before {
    top: 2px;
}
.ntv-detail-box ul.is-style-check-list li:last-child {
    margin-bottom: 0 !important;
}
/* 3 features */
.ntv-detail-box .features-group > .wp-block-group {
    background-color: var(--wp--preset--color--athens-gray);
    padding: 8px 12px;
    border-radius: 4px;
    gap: 8px;
    flex: 1 1 auto;
}
.ntv-detail-box .features-group > .wp-block-group p {
    margin-top: 0;
}

/*
.wp-block-post.type-post .wp-block-post-featured-image .wp-post-image {
    max-width: 300px;
} */
.ntv-detail-box .wp-block-post-title,
.ntv-detail-box h2.wp-block-heading {
    font-size: 20px;
    font-weight: 600;
}
.ntv-detail-box .wp-block-post-title + p,
.ntv-detail-box h2.wp-block-heading + p {
    margin-top: 0 !important;
}

.ntv-detail-box .wp-block-button {
    background-color: transparent;
    padding: 0;
    width: 100%;
}
.ntv-detail-box .wp-block-buttons {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.ntv-detail-box .metafield[data-metafield-name="provider_external_link"] {
    margin-top: 2rem;
}

.ntv-detail-box .wp-block-button .wp-block-button__link,
.ntv-detail-box .metafield[data-metafield-name="provider_external_link"] a {
    background-color: var(--wp--preset--color--monza);
    color: white !important;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ntv-detail-box .wp-block-button .wp-block-button__link::after,
.ntv-detail-box
    .metafield[data-metafield-name="provider_external_link"]
    a::after {
    content: "";
    display: block;
    margin-left: 8px;
    background-color: currentColor;
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='8' height='16' viewBox='0 0 8 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16L8 8L0 0V2.5264L5.4736 8L5.0528 8.4208L0 13.4736V16Z' fill='white'/%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg width='8' height='16' viewBox='0 0 8 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16L8 8L0 0V2.5264L5.4736 8L5.0528 8.4208L0 13.4736V16Z' fill='white'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat;
    mask-position: center;
}

.ntv-detail-box .wp-block-button .wp-block-button__link:hover,
.ntv-detail-box
    .metafield[data-metafield-name="provider_external_link"]
    a:hover {
    background-color: var(--wp--preset--color--monza);
}

/* details */
.ntv-detail-box details p {
    padding: 0 !important;
}

.ntv-detail-box .wp-block-details {
    padding: 0;
    border-radius: 0 0 8px 8px;
    border: none;
    max-width: none;
}

.wp-block-acf-linked-detail-box .wp-block-details {
    background-color: var(--wp--preset--color--light-monza);
}

.ntv-detail-box .wp-block-details summary {
    padding: 0.8rem 2rem;
    text-align: center;
    font-size: 1.2rem;
    text-decoration: underline;
}

.ntv-detail-box .wp-block-details summary::after {
    position: relative;
    display: inline-block;
    margin-left: 0.5rem;
}

/* .ntv-detail-box .wp-block-details > *, */
.wp-block-acf-linked-detail-box .wp-block-details > * {
    width: calc(100% - 4rem);
    margin: 0 auto !important;
    padding: 0;
}

/* .ntv-detail-box .wp-block-details > *:last-child, */
.wp-block-acf-linked-detail-box .wp-block-details > *:last-child {
    margin-bottom: 2rem !important;
}

/* tabs */
.ntv-detail-box .tabs {
    padding-bottom: 24px;
}
.ntv-detail-box .tabs-navigation-list {
    justify-content: flex-start !important;
    gap: 0;
}

.ntv-detail-box .tabs .tab {
    padding: 1rem 0;
}

.ntv-detail-box .tabs .tabs-navigation ul li {
    padding: 0 !important;
    width: 100%;
}
.ntv-detail-box .tabs .tabs-navigation ul li button {
    padding: 5px 0;
    width: 100%;
    text-align: left;
    box-sizing: content-box;
    /* reset tabs styling */
    display: unset;
    background-color: unset;
    border: none;
}

/* new main tabs */
.ntv-detail-box .wp-block-group > .wp-block-columns + .tabs {
    margin-top: 0;
    border-radius: 0 0 24px 24px;
}
.ntv-detail-box .wp-block-group > .wp-block-columns + .tabs > .tabs-navigation {
    border-bottom: none;
    padding: 0 32px;
    box-sizing: border-box;
}
.ntv-detail-box
    .wp-block-group
    > .wp-block-columns
    + .tabs
    > .tabs-navigation
    > ul
    > li {
    padding-bottom: 1rem;
}
.ntv-detail-box
    .wp-block-group
    > .wp-block-columns
    + .tabs
    > .tabs-navigation
    > ul
    li
    button,
.ntv-detail-box
    .tabs[data-vertical="1"]
    .tabs-navigation
    .tabs-navigation-list
    li
    button {
    color: black;
    font-weight: 600;
    position: relative;
    padding-right: 1.5rem;
    font-size: 14px !important;
}
.ntv-detail-box
    .wp-block-group
    > .wp-block-columns
    + .tabs
    > .tabs-navigation
    > ul
    li
    button::after,
.ntv-detail-box
    .tabs[data-vertical="1"]
    .tabs-navigation
    .tabs-navigation-list
    li
    button::after {
    content: "";
    position: absolute;
    right: 5px;
    top: calc(50% - 2.5px);
    background-color: #000;
    width: 10px;
    height: 5px;
    mask-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.05604 5.01521C4.64771 5.01521 4.23938 4.85771 3.93021 4.54854L0.126875 0.745208C-0.0422917 0.576041 -0.0422917 0.296042 0.126875 0.126875C0.296042 -0.0422917 0.576042 -0.0422917 0.745209 0.126875L4.54854 3.93021C4.82854 4.21021 5.28354 4.21021 5.56354 3.93021L9.36687 0.126875C9.53604 -0.0422917 9.81604 -0.0422917 9.98521 0.126875C10.1544 0.296042 10.1544 0.576041 9.98521 0.745208L6.18188 4.54854C5.87271 4.85771 5.46438 5.01521 5.05604 5.01521Z' fill='black'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat;
    transform: rotate(0deg);
    transform-origin: center;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.ntv-detail-box
    .wp-block-group
    > .wp-block-columns
    + .tabs
    > .tabs-navigation
    > ul
    li
    button.active,
.ntv-detail-box
    .tabs[data-vertical="1"]
    .tabs-navigation
    .tabs-navigation-list
    li
    button.active {
    color: var(--wp--preset--color--monza);
}
.ntv-detail-box
    .wp-block-group
    > .wp-block-columns
    + .tabs
    > .tabs-navigation
    > ul
    li
    button.active::after,
.ntv-detail-box
    .tabs[data-vertical="1"]
    .tabs-navigation
    .tabs-navigation-list
    li
    button.active::after {
    transform: rotate(180deg);
    background-color: var(--wp--preset--color--monza);
}
.ntv-detail-box
    .wp-block-group
    > .wp-block-columns
    + .tabs
    > .acf-innerblocks-container
    > .tab {
    padding: 32px 32px 0 32px;
}
.ntv-detail-box
    .wp-block-group
    > .wp-block-columns
    + .tabs
    > .acf-innerblocks-container
    > .tab
    > .acf-innerblocks-container
    > *:last-child {
    margin-bottom: 0;
}
.ntv-detail-box .tabs[data-vertical="1"] .tabs-navigation {
    border: none;
    border-top: 1px solid #f5f5f5;
}

@media only screen and (min-width: 782px) {
    .ntv-detail-box .tabs {
        padding-bottom: 24px;
    }
    .ntv-detail-box .tabs .tabs-navigation ul li {
        width: auto;
    }
    .ntv-detail-box .tabs .tabs-navigation ul li button {
        padding: 0 42px 0 0 !important;
        width: auto;
        text-align: left;
    }
    .ntv-detail-box .tabs[data-vertical="1"] .tabs-navigation {
        background-color: transparent !important;
        min-width: 150px;
        border: none;
    }
    .ntv-detail-box
        .tabs[data-vertical="1"]
        .tabs-navigation
        .tabs-navigation-list {
        padding: 0;
    }
    .ntv-detail-box
        .tabs[data-vertical="1"]
        .tabs-navigation
        .tabs-navigation-list
        li {
        width: 100%;
    }
    .ntv-detail-box
        .tabs[data-vertical="1"]
        .tabs-navigation
        .tabs-navigation-list
        li:first-child
        button {
        padding-top: 0 !important;
    }
    .ntv-detail-box
        .tabs[data-vertical="1"]
        .tabs-navigation
        .tabs-navigation-list
        li
        button {
        padding: 6px 1.5rem 6px 0 !important;
        width: 100%;
        text-align: left;
    }
    .ntv-detail-box
        .wp-block-group
        > .wp-block-columns
        + .tabs
        > .tabs-navigation {
        padding-left: calc(140px + 20px + 20px);
    }
    .ntv-detail-box
        .wp-block-group
        > .wp-block-columns
        + .tabs
        > .tabs-navigation
        > ul
        li
        button::after {
        right: 24px;
    }
    .ntv-detail-box
        .tabs[data-vertical="1"]
        .tabs-navigation
        .tabs-navigation-list
        li
        button::after {
        transform: rotate(270deg);
    }
    .ntv-detail-box
        .tabs[data-vertical="1"]
        .tabs-navigation
        .tabs-navigation-list
        li
        button.active::after {
        transform: rotate(90deg);
    }
    .ntv-detail-box
        > .acf-innerblocks-container
        > .wp-block-group
        > .wp-block-columns
        > .wp-block-column:first-child
        > .wp-block-image:first-child {
        float: none;
        margin-right: auto;
        max-width: none;
    }
    .ntv-detail-box
        > .acf-innerblocks-container
        > .wp-block-group
        > .wp-block-columns
        > .wp-block-column:first-child
        > .wp-block-image:first-child
        img {
        max-width: 140px;
    }
    .ntv-detail-box
        > .acf-innerblocks-container
        > .wp-block-group
        > .wp-block-columns
        > .wp-block-column:first-child
        > .wp-block-image:first-child
        + .wp-block-group {
        justify-content: flex-start;
    }
    .ntv-detail-box
        > .acf-innerblocks-container
        > .wp-block-group
        > .wp-block-columns
        > .wp-block-column:first-child
        > .wp-block-acf-responsive-content {
        text-align: left;
    }
    .ntv-detail-box .score-box {
        text-align: left;
    }
    .ntv-detail-box
        > .acf-innerblocks-container
        > .wp-block-group
        > .wp-block-columns
        > .wp-block-column:first-child {
        flex: 0 0 140px !important;
    }
}
@media only screen and (min-width: 990px) {
    .ntv-detail-box .tabs[data-vertical="1"] .tab {
        padding: 0 2rem;
    }
    .ntv-detail-box .tabs[data-vertical="1"] .tabs-navigation {
        width: 20%;
    }
}