/* HEAL ME / UPLIFT ME modal — shared (homepage + site chrome)
   Sections:
   1) Shell & hero
   2) Mobile content blocks
   3) Shared card components
   4) Viewport/layout overrides
*/
body.homepage-revamp-code,
body.hcc-site-chrome {
    --hcc-primary: #f58220;
    --hcc-mobile-booking-bar-height: var(--hcc-floating-nav-height, 77px);
}

.hcc-popular-modal {
    position:fixed;
    inset:0;
    z-index:6;
    width:100%;
    display:none;
    align-items:flex-start;
    justify-content:center;
    background:transparent;
}
.hcc-popular-modal.is-open {
    display:flex;
}
.hcc-popular-modal-panel {
    width:100%;
    max-width:390px;
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:0;
    background:#fff;
    box-shadow:none;
    padding:0;
    box-sizing:border-box;
    font-family:var(--hcc-font);
}

/* 1) Shell & hero */
.hcc-popular-modal-hero {
    position:relative;
    height:201px;
    overflow:hidden;
    background:linear-gradient(180deg, #6f111e 0%, #d5213a 100%);
    box-shadow:0 5px 10px -2px rgba(13,13,18,.04), 0 4px 8px -1px rgba(13,13,18,.02);
    flex-shrink:0;
}
.hcc-popular-modal-panel.is-uplift .hcc-popular-modal-hero {
    background:linear-gradient(180deg, #345d9d 0%, #5a8fd4 100%);
}
.hcc-popular-modal-hero-img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    pointer-events:none;
    z-index:0;
}
.hcc-popular-modal-hero.has-cms-banner {
    background:#0d0d12;
}
.hcc-popular-modal-hero.has-cms-banner::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(13,13,18,.48) 0%, rgba(13,13,18,.2) 30%, rgba(13,13,18,0) 52%, rgba(13,13,18,.14) 100%);
}
.hcc-popular-modal-hero.has-cms-banner .hcc-popular-modal-hero-img {
    object-fit:cover;
    object-position:center center;
}
.hcc-popular-modal-hero-content {
    position:relative;
    z-index:2;
    padding:56px 20px 16px;
    max-width:58%;
}
.hcc-popular-modal-hero-title {
    margin:0 0 2px;
    color:#fff;
    font-size:24px;
    font-weight:700;
    line-height:1.5;
    letter-spacing:0;
}
.hcc-popular-modal-hero-tags {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}
.hcc-popular-modal-hero-tag {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 6px;
    border-radius:99px;
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.7);
    font-size:12px;
    font-weight:500;
    line-height:normal;
    letter-spacing:-.24px;
    white-space:nowrap;
}
.hcc-popular-modal-hero-tag--more {
    position:relative;
    cursor:help;
    font-weight:600;
    letter-spacing:0;
}
.hcc-popular-modal-hero-tag--more::after {
    content:attr(title);
    position:absolute;
    left:50%;
    top:calc(100% + 6px);
    transform:translateX(-50%);
    z-index:5;
    max-width:min(220px, 70vw);
    padding:6px 8px;
    border-radius:6px;
    background:rgba(13,13,18,.92);
    color:#fff;
    font-size:10px;
    line-height:1.4;
    font-weight:400;
    letter-spacing:0;
    white-space:normal;
    text-align:center;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .15s ease, visibility .15s ease;
}
.hcc-popular-modal-hero-tag--more:hover::after,
.hcc-popular-modal-hero-tag--more:focus-visible::after,
.hcc-popular-modal-hero-tag--more:active::after {
    opacity:1;
    visibility:visible;
}
.hcc-popular-modal-toolbar {
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:6px;
}
.hcc-popular-modal-back {
    width:32px;
    height:32px;
    border:0;
    border-radius:99px;
    background:#fff;
    padding:0;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 16px -4px rgba(13,13,18,.14), 0 4px 6px -2px rgba(13,13,18,.08);
    flex-shrink:0;
}
.hcc-popular-modal-back img {
    width:12px;
    height:12px;
    display:block;
}
.hcc-popular-modal-pill {
    display:inline-flex;
    align-items:center;
    gap:4px;
    height:32px;
    padding:8px;
    border-radius:99px;
    border:1px solid rgba(111,17,30,.24);
    background:#6f111e;
    color:#fff;
    font-size:12px;
    font-weight:500;
    line-height:normal;
    letter-spacing:-.24px;
    white-space:nowrap;
}
.hcc-popular-modal-panel.is-uplift .hcc-popular-modal-pill {
    background:#345d9d;
    border-color:rgba(52,93,157,.24);
}
.hcc-popular-modal-pill img {
    width:16px;
    height:16px;
    display:block;
    flex-shrink:0;
}
.hcc-popular-modal-head {
    display:none;
}
.hcc-popular-modal-body {
    padding:16px 0 32px;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}
.hcc-popular-modal-main-tabs {
    position:relative;
    align-self:center;
    width:max-content;
    max-width:min(600px, calc(100% - 24px));
    margin:0 0 16px;
    padding:4px;
    border:1px solid rgba(223,225,231,.2);
    border-radius:999px;
    background:#fff;
    box-shadow:0 1px 3px rgba(13,13,18,.05), 0 1px 2px rgba(13,13,18,.04);
    box-sizing:border-box;
    overflow:hidden;
}
.hcc-popular-modal-main-tabs.is-overflowing::after {
    content:'';
    position:absolute;
    top:4px;
    right:4px;
    bottom:4px;
    width:40px;
    border-radius:0 999px 999px 0;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%, #fff 100%);
    pointer-events:none;
    z-index:1;
}
.hcc-popular-modal-main-tabs-scroll {
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
    max-width:100%;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    scrollbar-width:none;
}
.hcc-popular-modal-main-tabs-scroll::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
}
.hcc-popular-modal-main-tabs.is-overflowing:hover .hcc-popular-modal-main-tabs-scroll,
.hcc-popular-modal-main-tabs.is-overflowing:focus-within .hcc-popular-modal-main-tabs-scroll {
    scrollbar-width:thin;
    scrollbar-color:rgba(245,130,32,.22) transparent;
}
.hcc-popular-modal-main-tabs.is-overflowing:hover .hcc-popular-modal-main-tabs-scroll::-webkit-scrollbar,
.hcc-popular-modal-main-tabs.is-overflowing:focus-within .hcc-popular-modal-main-tabs-scroll::-webkit-scrollbar {
    display:block;
    height:2px;
}
.hcc-popular-modal-main-tabs.is-overflowing:hover .hcc-popular-modal-main-tabs-scroll::-webkit-scrollbar-track,
.hcc-popular-modal-main-tabs.is-overflowing:focus-within .hcc-popular-modal-main-tabs-scroll::-webkit-scrollbar-track {
    background:transparent;
    margin:0 14px;
}
.hcc-popular-modal-main-tabs.is-overflowing:hover .hcc-popular-modal-main-tabs-scroll::-webkit-scrollbar-thumb,
.hcc-popular-modal-main-tabs.is-overflowing:focus-within .hcc-popular-modal-main-tabs-scroll::-webkit-scrollbar-thumb {
    background:rgba(245,130,32,.28);
    border-radius:999px;
}
.hcc-popular-modal-main-tabs-inner,
#hccPopularMainTabs {
    display:flex;
    flex-flow:row nowrap;
    align-items:stretch;
    width:max-content;
    max-width:none;
}
.hcc-popular-modal-main-tab {
    flex:0 0 auto;
    border:0;
    background:#fff;
    color:#0d0d12;
    border-radius:999px;
    min-height:0;
    padding:16px;
    font-size:14px;
    font-weight:700;
    line-height:1.55;
    letter-spacing:-.28px;
    font-family:var(--hcc-font);
    cursor:pointer;
    text-align:center;
    white-space:nowrap;
}
.hcc-popular-modal-main-tab.is-active {
    background:#fef3e9;
    color:#f58220;
}
.hcc-popular-modal-subtabs {
    display:none;
}

/* 2) Mobile content blocks */
/* Figma 13218:13392 — strip area full lebar; putih hanya dari gap antar section (margin bawah + bg body). */
.hcc-popular-modal-area {
    position:relative;
    margin:0 0 16px;
    padding:16px 16px 12px;
    border-radius:0;
    background:#faf8f5;
    overflow:hidden;
    width:100%;
    box-sizing:border-box;
}
.hcc-popular-modal-area-deco {
    position:absolute;
    top:8px;
    right:-40px;
    width:306px;
    height:77px;
    pointer-events:none;
    z-index:0;
    opacity:.85;
}
.hcc-popular-modal-area-deco img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.hcc-popular-modal-area-inner {
    position:relative;
    z-index:1;
}
.hcc-popular-modal-area-head {
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:16px;
}
.hcc-popular-modal-area-icon {
    width:32px;
    height:32px;
    border-radius:888px;
    border:1px solid #2a4a7d;
    background:linear-gradient(180deg, #6b9fd4 0%, #345d9d 100%);
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hcc-popular-modal-panel.is-uplift .hcc-popular-modal-area-icon {
    border-color:#a6022a;
    background:linear-gradient(180deg, #ff6086 0%, #c70d3a 100%);
}
.hcc-popular-modal-area-icon img {
    width:auto;
    height:auto;
    max-width:22px;
    max-height:28px;
    object-fit:contain;
    display:block;
}
.hcc-popular-modal-area-head h4 {
    margin:0;
    color:#101820;
    font-size:18px;
    font-weight:700;
    line-height:1.5;
    letter-spacing:0;
    text-transform:uppercase;
}
.hcc-popular-modal-concerns {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.hcc-popular-modal-concern {
    border:1px solid #dfe1e7;
    border-radius:16px;
    background:#fff;
    overflow:hidden;
}
.hcc-popular-modal-concern.is-open {
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:12px;
    box-sizing:border-box;
}
.hcc-popular-modal-concern-toggle {
    width:100%;
    border:0;
    background:#fff;
    padding:12px;
    display:flex;
    align-items:center;
    gap:24px;
    cursor:pointer;
    font-family:var(--hcc-font);
    text-align:left;
    box-sizing:border-box;
}
.hcc-popular-modal-concern.is-open .hcc-popular-modal-concern-toggle {
    border-bottom:1px dashed #dfe1e7;
    padding:0 0 16px;
    margin:0;
}
.hcc-popular-modal-concern-main {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
}
.hcc-popular-modal-concern-thumb {
    width:48px;
    height:48px;
    border-radius:12px;
    overflow:hidden;
    flex-shrink:0;
    background:linear-gradient(180deg, #771220 0%, #dd213b 100%);
}
.hcc-popular-modal-panel.is-uplift .hcc-popular-modal-concern-thumb {
    background:linear-gradient(180deg, #2a4a7d 0%, #5a8fd4 100%);
}
.hcc-popular-modal-concern-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.hcc-popular-modal-concern-title {
    margin:0;
    font-family:var(--hcc-font);
    color:#0d0d12;
    font-size:16px;
    font-weight:700;
    line-height:1.5;
    letter-spacing:0;
}
.hcc-popular-modal-concern-action {
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
    font-family:var(--hcc-font);
    color:#666d80;
    font-size:12px;
    font-weight:400;
    line-height:18px;
    letter-spacing:-.24px;
}
.hcc-popular-modal-concern-action-caret {
    width:24px;
    height:24px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
}
.hcc-popular-modal-concern-action-caret img {
    width:16px;
    height:16px;
    display:block;
    transition:transform .2s ease;
}
.hcc-popular-modal-concern.is-open .hcc-popular-modal-concern-action-caret img {
    transform:rotate(180deg);
}
.hcc-popular-modal-concern-panel {
    display:none;
    padding:0;
}
.hcc-popular-modal-concern.is-open .hcc-popular-modal-concern-panel {
    display:block;
}
.hcc-popular-modal-cards {
    display:flex;
    gap:8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0;
}
.hcc-popular-modal-cards::-webkit-scrollbar {
    display:none;
}

/* 3) Shared card components */
.hcc-popular-modal-card {
    flex:0 0 150px;
    border:1px solid #dfe1e7;
    border-radius:8px;
    padding:8px;
    box-sizing:border-box;
    scroll-snap-align:start;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
}
.hcc-popular-modal-card-media {
    position:relative;
    width:100%;
    aspect-ratio:240 / 180;
    border-radius:7.265px;
    overflow:hidden;
    background:#f3f4f6;
}
.hcc-popular-modal-card-media img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.hcc-popular-modal-card-media-link {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    padding:2px 10px;
    background:rgba(0,0,0,.15);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    font-family:var(--hcc-font);
    color:#fff;
    font-size:12px;
    font-weight:400;
    line-height:18px;
    letter-spacing:-.24px;
    text-decoration:none;
}
.hcc-popular-modal-card-body {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    flex:1 1 auto;
    min-height:120px;
    gap:10px;
}
.hcc-popular-modal-card-title {
    font-family:var(--hcc-font);
    color:#0d0d12;
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    letter-spacing:0;
    height:45px;
    max-height:45px;
    margin:0;
    overflow:hidden;
}
.hcc-popular-modal-card-title-text,
.hcc-popular-modal-card-title-link {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-word;
    max-height:45px;
    font-family:inherit;
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
    letter-spacing:inherit;
}
.hcc-popular-modal-card-title-link {
    text-decoration:none;
    cursor:pointer;
}
.hcc-popular-modal-card-title-link:hover,
.hcc-popular-modal-card-title-link:focus-visible {
    color:inherit;
    text-decoration:none;
}
.hcc-popular-modal-card-footer {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
}
.hcc-popular-modal-price {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px;
    font-family:var(--hcc-font);
    color:#666d80;
    font-size:12px;
    font-weight:400;
    line-height:18px;
    letter-spacing:-.24px;
}
.hcc-popular-modal-price-prefix {
    font-family:inherit;
    color:#666d80;
    font-weight:400;
    letter-spacing:-.24px;
}
.hcc-popular-modal-price strong {
    font-family:inherit;
    color:#101820;
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:0;
}
.hcc-popular-modal-cta {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:32px;
    border-radius:999px;
    background:#f58220;
    color:#fff;
    text-decoration:none;
    font-family:var(--hcc-font);
    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:-.24px;
    padding:8px 16px;
    box-sizing:border-box;
    box-shadow:0 1px 1px rgba(13,13,18,.06);
    -webkit-text-fill-color:#fff;
}
.hcc-popular-modal-cta:link,
.hcc-popular-modal-cta:visited,
.hcc-popular-modal-cta:hover,
.hcc-popular-modal-cta:active,
.hcc-popular-modal-cta:focus {
    color:#fff;
    text-decoration:none;
    -webkit-text-fill-color:#fff;
}
.hcc-popular-modal-close {
    display:none;
}
body.hcc-popular-modal-open {
    overflow:hidden;
}
@media (max-width:1023.98px) {
    body.hcc-popular-modal-open .header-mobile-copy {
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        z-index:9;
    }
    body.hcc-popular-modal-open .hcc-popular-modal {
        inset:auto;
        top:var(--hcc-mobile-header-height);
        right:0;
        bottom:var(--hcc-mobile-booking-bar-height);
        left:0;
    }
    body.hcc-popular-modal-open .hcc-popular-modal-panel {
        height:calc(100dvh - var(--hcc-mobile-header-height) - var(--hcc-mobile-booking-bar-height));
        max-height:calc(100dvh - var(--hcc-mobile-header-height) - var(--hcc-mobile-booking-bar-height));
    }
    body.hcc-popular-modal-open .floating-buttons {
        z-index:8;
    }
    body.hcc-popular-modal-open #floating-whatsapp {
        z-index:8;
    }
    body.hcc-popular-modal-open #back2top.btn-circle.active {
        z-index:8;
    }
}
.hcc-footer-main.hcc-footer-main--in-modal {
    margin:0;
    width:100%;
    max-width:none;
    flex-shrink:0;
    box-sizing:border-box;
    /* Di halaman biasa 90px menjernihkan floating booking bar; di dalam modal panel
       sudah di atas bar itu, jadi padding besar hanya membuat jarak kosong. */
    padding-bottom:24px;
}
.hcc-popular-modal-empty {
    margin:0 12px;
    color:#666d80;
    font-size:14px;
    line-height:1.5;
    letter-spacing:-.28px;
}

@media (min-width: 1024px) {
/* 4) Viewport/layout overrides */
/* Desktop: same flow as mobile — full panel below nav, not centered popup / find-clinic */
body.hcc-popular-modal-open.homepage-revamp-code,
body.hcc-popular-modal-open.homepage-revamp-code .homepage-revamp-page {
    --hcc-desktop-header-height:96px;
}
body.hcc-popular-modal-open .hcc-desktop-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    max-width:none;
    margin:0;
    z-index:9;
}
body.hcc-popular-modal-open .hcc-popular-modal {
    inset:auto;
    top:var(--hcc-desktop-header-height, 96px);
    right:0;
    bottom:var(--hcc-floating-nav-height, 77px);
    left:0;
    padding:0;
    background:#fff;
    align-items:stretch;
    justify-content:stretch;
}
body.hcc-popular-modal-open .hcc-desktop-floating-nav {
    z-index:8;
    display:block !important;
}
body.hcc-popular-modal-open .hcc-popular-modal-panel {
    position:relative;
    max-width:none;
    width:100%;
    max-height:calc(100dvh - var(--hcc-desktop-header-height, 96px) - var(--hcc-floating-nav-height, 77px));
    height:calc(100dvh - var(--hcc-desktop-header-height, 96px) - var(--hcc-floating-nav-height, 77px));
    border-radius:0;
    padding:0;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-hero {
    display:block;
    height:324px;
    flex-shrink:0;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-toolbar {
    display:none;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-hero.has-cms-banner .hcc-popular-modal-hero-img {
    inset:0;
    object-fit:cover;
    object-position:center center;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-hero-content {
    position:absolute;
    left:125px;
    top:100px;
    padding:0;
    max-width:420px;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-hero-title {
    font-size:64px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:0;
    margin:0 0 2px;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-hero-tags {
    gap:4px;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-hero-tag {
    font-size:18px;
    font-weight:500;
    line-height:1.55;
    letter-spacing:0;
    padding:2px 6px;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-hero-tag--more {
    font-weight:600;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-hero-tag--more::after {
    max-width:min(320px, 40vw);
    padding:8px 12px;
    border-radius:8px;
    font-size:14px;
    line-height:1.5;
    top:calc(100% + 8px);
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-head {
    display:flex;
    position:absolute;
    top:20px;
    right:20px;
    z-index:5;
    margin:0;
    padding:0;
    width:auto;
}
.hcc-popular-modal-head h3 {
    display:none;
}
.hcc-popular-modal-close {
    display:inline-flex;
    width:40px;
    height:40px;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.9);
    color:#666d80;
    padding:0;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    box-shadow:0 1px 2px rgba(13,13,18,.08);
}
.hcc-popular-modal-close svg {
    width:20px;
    height:20px;
    display:block;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-body {
    padding:0 16px 0;
    background:#fff;
    min-width:0;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-main-tabs {
    padding:8px;
    box-shadow:0 1px 1.5px rgba(13,13,18,.05), 0 1px 1px rgba(13,13,18,.04);
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-main-tabs.is-overflowing::after {
    top:8px;
    right:8px;
    bottom:8px;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-main-tab {
    min-height:48px;
    height:48px;
    padding:16px 24px;
    font-family:var(--hcc-font);
    font-size:16px;
    font-weight:700;
    line-height:1.55;
    letter-spacing:-.32px;
    color:var(--hcc-text-dark);
    background:#fff;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-main-tab.is-active {
    background:var(--hcc-bg-soft);
    color:var(--hcc-primary);
}
.hcc-popular-modal-subtabs {
    display:none !important;
}
.hcc-popular-modal-panel--desktop #hccPopularBlocks {
    display:flex;
    flex-direction:column;
    gap:16px;
    max-width:810px;
    width:100%;
    margin:0 auto;
    padding:36px 12px 64px;
    border-radius:16px 16px 0 0;
    background:linear-gradient(180deg, rgba(245,130,32,.08) 0%, rgba(245,130,32,0) 100%), #fff;
    box-sizing:border-box;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-area {
    margin:0;
    padding:0;
    background:transparent;
    border-radius:0;
    overflow:visible;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-area-deco {
    display:none;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-area-head {
    margin-bottom:16px;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-area-head h4 {
    font-family:var(--hcc-font);
    font-size:18px;
    font-weight:700;
    line-height:1.5;
    letter-spacing:0;
    color:var(--hcc-text-title);
    text-transform:uppercase;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-concerns {
    gap:8px;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-concern-title {
    font-family:var(--hcc-font);
    font-size:16px;
    font-weight:700;
    line-height:1.5;
    letter-spacing:0;
    color:var(--hcc-text-dark);
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-concern-action-label {
    font-family:var(--hcc-font);
    font-size:12px;
    font-weight:400;
    line-height:18px;
    letter-spacing:-.24px;
    color:var(--hcc-text-body);
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-card {
    flex:0 0 150px;
    display:flex;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-card-media,
.hcc-popular-modal-panel--desktop .hcc-popular-modal-card-body {
    display:flex;
}
/* Desktop card title typography (container + text/link share same style) */
.hcc-popular-modal-panel--desktop .hcc-popular-modal-card-title,
.hcc-popular-modal-panel--desktop .hcc-popular-modal-card-title-text,
.hcc-popular-modal-panel--desktop .hcc-popular-modal-card-title-link {
    font-family:var(--hcc-font);
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    letter-spacing:0;
    color:var(--hcc-text-dark);
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-card-media-link {
    font-family:var(--hcc-font);
    font-size:12px;
    font-weight:400;
    line-height:18px;
    letter-spacing:-.24px;
    color:#fff;
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-price,
.hcc-popular-modal-panel--desktop .hcc-popular-modal-price-prefix {
    font-family:var(--hcc-font);
    font-size:12px;
    font-weight:400;
    line-height:18px;
    letter-spacing:-.24px;
    color:var(--hcc-text-body);
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-price strong {
    font-family:var(--hcc-font);
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:0;
    color:var(--hcc-text-title);
}
.hcc-popular-modal-panel--desktop .hcc-popular-modal-cta {
    width:100%;
    font-family:var(--hcc-font);
    font-size:12px;
    font-weight:700;
    line-height:normal;
    letter-spacing:-.24px;
    color:#fff;
    background:var(--hcc-primary);
    box-shadow:0 1px 1px rgba(13,13,18,.06);
}
body.hcc-popular-modal-open .hcc-popular-modal-panel.hcc-popular-modal-panel--desktop .hcc-popular-modal-body {
    flex:0 0 auto;
    min-height:auto;
    overflow:visible;
}
body.hcc-popular-modal-open .hcc-footer-main.hcc-footer-main--in-modal {
    margin:0;
    width:100%;
    max-width:none;
    padding-bottom:32px;
}
body.hcc-popular-modal-open .hcc-footer-main.hcc-footer-main--in-modal .hcc-footer-container {
    max-width:1080px;
    margin-left:auto;
    margin-right:auto;
}
}