/* HC Contact Tab 1.2.3 — "Help" tab on the left edge; slides out WhatsApp / WeChat / live chat. */
.hct-tab {
    position: fixed;
    left: 0;
    bottom: calc(var(--hct-bm, 80px) + env(safe-area-inset-bottom, 0px));
    z-index: 9997;
    /* 1.0.4: between 1.0.0 (32x100) and 1.0.3 (56x150); height follows the word. */
    width: 44px;
    min-height: 118px;
    margin: 0;
    padding: 12px 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 0 14px 14px 0;
    background: #f18833;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 2px 4px 14px rgba(0,0,0,.18);
    cursor: pointer;
    transition: transform .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.hct-tab svg { display: block; flex: 0 0 auto; }
.hct-tab-t {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1;
    white-space: nowrap;
}
.hct-cjk .hct-tab-t { transform: none; letter-spacing: 1px; }
.hct.is-open .hct-tab { transform: translateX(-110%); }

.hct-panel {
    position: fixed;
    left: 0;
    bottom: calc(var(--hct-bm, 80px) + env(safe-area-inset-bottom, 0px));
    z-index: 10001; /* 1.0.1: above the store badge (9999) and its info popup (10000) */
    width: 252px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 14px 12px 8px;
    background: #fff;
    border-radius: 0 16px 16px 0;
    box-shadow: 4px 8px 30px rgba(0,0,0,.22);
    text-align: start;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
}
.hct.is-open .hct-panel { transform: none; visibility: visible; transition: transform .28s ease; }
.hct-head { margin: 0 8px 6px; font-size: 14px; font-weight: 700; color: #1a1a1a; }
.hct-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 12px;
    color: #1a1a1a !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hct-row:hover, .hct-row:focus-visible { background: #f5f5f5; }
.hct-row .hct-lb { flex: 1; min-width: 0; }
.hct-ic svg { display: block; width: 40px; height: 40px; border-radius: 50%; }
.hct-chev { color: #b5b5b5; flex: 0 0 auto; }
.hct-hide {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 0;
    padding: 6px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
@media (min-width: 768px) {
    .hct-tab, .hct-panel { bottom: var(--hct-bd, 84px); }
}
/* ============== 1.1.0: ONE ROUND BUTTON (mode "fab") ==============
   Same size and bottom line as the store badge (hc-store-lock: 56 px; phone 16 px / 80 px, desktop 20 px / 84 px). */
.hct-fabmode {
    position: fixed;
    left: 16px;
    bottom: calc(var(--hct-bm, 80px) + env(safe-area-inset-bottom, 0px));
    z-index: 9998;
    width: 56px;
    height: 56px;
}
@media (min-width: 768px) {
    .hct-fabmode { left: 20px; bottom: var(--hct-bd, 84px); }
}
.hct-fab {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 1.2.0: three rings like the store badge – orange edge, white ring, orange centre, white icon.
       1.2.1: same proportions as the badge's JP flag (red disc = 60 % of the 52 px inside): white ring 10 px, centre 32 px. */
    border: 2px solid #f18833;
    border-radius: 50%;
    background: #f18833;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 10px #fff, 0 6px 18px rgba(0,0,0,.24);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hct-fab:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 10px #fff, 0 10px 24px rgba(0,0,0,.28); }
.hct-fabmode.is-dragging .hct-fab { cursor: grabbing; transform: scale(1.06); transition: none; }
.hct-fab svg { display: block; pointer-events: none; }
.hct-fab .hct-i-open, .hct-fab .hct-i-close { width: 18px; height: 18px; }
/* 1.2.0: one channel left – the button is that channel: orange edge, white ring, the channel's own round logo. */
.hct-fab.hct-fab-single { -webkit-user-drag: none; background: #fff; padding: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.24); text-decoration: none !important; }
.hct-fab.hct-fab-single:hover { box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.hct-fab-single .hct-ic, .hct-fab-single .hct-ic svg { display: block; width: 32px; height: 32px; border-radius: 50%; pointer-events: none; }
.hct-fab .hct-i-close { display: none; }
.hct-fabmode.is-open .hct-fab .hct-i-open { display: none; }
.hct-fabmode.is-open .hct-fab .hct-i-close { display: block; }

.hct-list {
    position: absolute;
    left: 4px;
    bottom: calc(100% + 12px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    visibility: hidden;
    pointer-events: none;
}
.hct-fabmode.hct-down .hct-list { bottom: auto; top: calc(100% + 12px); flex-direction: column-reverse; }
.hct-fabmode.hct-right .hct-list { left: auto; right: 4px; align-items: flex-end; }
.hct-fabmode.is-open .hct-list { visibility: visible; pointer-events: auto; }
.hct-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1a1a1a !important;
    text-decoration: none !important;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(.92);
    transition: opacity .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.hct-fabmode.hct-down .hct-item { transform: translateY(-10px) scale(.92); }
.hct-fabmode.hct-right .hct-item { flex-direction: row-reverse; }
.hct-fabmode.is-open .hct-item { opacity: 1; transform: none; }
.hct-fabmode.is-open .hct-item:nth-child(1) { transition-delay: .08s; }
.hct-fabmode.is-open .hct-item:nth-child(2) { transition-delay: .04s; }
.hct-item .hct-ic svg { display: block; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.hct-pill {
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
.hct-item:hover .hct-pill, .hct-item:focus-visible .hct-pill { background: #fdf3e7; }
/* 1.3.0: no channel names next to the icons – screen readers still get them. */
.hct-fabmode .hct-pill { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; box-shadow: none !important; }
/* 1.3.0: resting half outside the left edge; the JS sets --hct-peek = -(left + half width). */
.hct-fabmode:not(.hct-single) { transition: transform .28s ease; }
.hct-fabmode.hct-peek { transform: translateX(var(--hct-peek, -44px)); }
.hct-fabmode.hct-peek .hct-fab:hover { transform: none; }
.hct-fabmode.is-dragging { transition: none; }
/* 1.3.1: soft halo only while it rests closed at the edge (same look as the keyboard focus ring); gone when opened or pulled. */
body .hct-fabmode.hct-peek:not(.is-dragging) .hct-fab, body .hct-fabmode.hct-peek:not(.is-dragging) .hct-fab:hover, body .hct-fabmode.hct-peek:not(.is-dragging) .hct-fab:focus, body .hct-fabmode.hct-peek:not(.is-dragging) .hct-fab:active { outline: 3px solid rgba(241,136,51,.45); outline-offset: 3px; }
body .hct-fab, body .hct-fab:hover, body .hct-fab:focus, body .hct-fab:active { background: #f18833; color: #fff; border: 2px solid #f18833; outline: none; }
body .hct-fab.hct-fab-single, body .hct-fab.hct-fab-single:hover, body .hct-fab.hct-fab-single:focus, body .hct-fab.hct-fab-single:active { background: #fff; }
/* 1.2.3: Kadence "button:hover/:focus/:active" puts its own box-shadow on the focused button after a drag/tap,
   which wiped the white ring (inset shadow) until the visitor clicked elsewhere. Pin the rings in every state. */
body .hct-fabmode .hct-fab, body .hct-fabmode .hct-fab:hover, body .hct-fabmode .hct-fab:focus, body .hct-fabmode .hct-fab:active { box-shadow: inset 0 0 0 10px #fff, 0 6px 18px rgba(0,0,0,.24) !important; }
body .hct-fabmode .hct-fab.hct-fab-single, body .hct-fabmode .hct-fab.hct-fab-single:hover, body .hct-fabmode .hct-fab.hct-fab-single:focus, body .hct-fabmode .hct-fab.hct-fab-single:active { box-shadow: 0 6px 18px rgba(0,0,0,.24) !important; }
body .hct-fab:focus-visible { outline: 3px solid rgba(241,136,51,.45); outline-offset: 3px; }

/* Hidden while the age gate is open */
html.hc-age-gate-locked .hct { display: none; }

/* ============== THEME GUARD ==============
   Kadence styles every button / link state; pin our own. */
body .hct-tab, body .hct-tab:hover, body .hct-tab:focus, body .hct-tab:active { background: #f18833; color: #fff; border: 0; outline: none; }
body .hct-tab:focus-visible { outline: 3px solid rgba(241,136,51,.45); outline-offset: 2px; }
body .hct-hide, body .hct-hide:hover, body .hct-hide:focus, body .hct-hide:active { background: transparent; color: #777; border: 0; box-shadow: none; }
body .hct-hide:hover { color: #1a1a1a; }

@media (prefers-reduced-motion: reduce) {
    .hct-tab, .hct-panel, .hct.is-open .hct-panel, .hct-item, .hct-fab, .hct-fabmode { transition: none; }
}
@media print { .hct { display: none !important; } }