/* WhatsApp widget panel (button keeps legacy #btnwhatsapp style from footer.css) */
/* --wa-panel-text is set inline from admin; use it below so footer { color } / footer li / footer a never override configured panel colors. */
#whatsapp-widget-panel {
    position: fixed;
    z-index: 9998;
    bottom: 90px;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #fff;
    color: var(--wa-panel-text, #222222) !important;
    /* --wa-panel-radius set inline from admin; fallback keeps older cached markup usable */
    border-radius: var(--wa-panel-radius, 16px);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 24px rgba(15, 23, 42, 0.1),
        0 20px 48px -16px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    padding: 0;
    box-sizing: border-box;
}
#whatsapp-widget-panel.right {
    right: 20px;
    left: auto;
}
#whatsapp-widget-panel.left {
    left: 20px;
    right: auto;
}
#whatsapp-widget-panel .wa-panel-inner {
    box-sizing: border-box;
}
#whatsapp-widget-panel .wa-panel-header {
    position: relative;
    margin: 0;
    /* padding set inline from admin (whatsapp_widget_panel_header_padding) */
    border-radius: var(--wa-panel-radius, 16px) var(--wa-panel-radius, 16px) 0 0;
}
#whatsapp-widget-panel .wa-panel-header__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
#whatsapp-widget-panel .wa-panel-header__titles {
    flex: 1 1 0%;
    min-width: 0;
}
#whatsapp-widget-panel .wa-panel-header__titles h4 {
    margin: 0 0 4px;
}
#whatsapp-widget-panel .wa-panel-header__titles .wa-sub {
    margin: 0;
}
#whatsapp-widget-panel .wa-panel-body {
    margin: 0;
    padding: 0;
}
#whatsapp-widget-panel .wa-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    line-height: 1;
    color: var(--wa-panel-text, #222222);
    box-sizing: border-box;
}
#whatsapp-widget-panel .wa-panel-icon--class i {
    line-height: 1;
}
#whatsapp-widget-panel .wa-panel-icon--media {
    border-radius: 10px;
    overflow: hidden;
}
#whatsapp-widget-panel .wa-panel-icon--media img,
#whatsapp-widget-panel .wa-panel-icon--media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Wrapper spans use display:contents so #btnwhatsapp a behaves like a single SVG child
   (same as legacy <a>{{ icon_whatsapp }}</a>) — only the visible icon participates in layout. */
#btnwhatsapp-toggle .wa-fab-icon-open {
    display: contents;
}
#btnwhatsapp-toggle .wa-fab-icon-close {
    display: none;
}
#btnwhatsapp-toggle.is-open .wa-fab-icon-open {
    display: none;
}
#btnwhatsapp-toggle.is-open .wa-fab-icon-close {
    display: contents;
}
#whatsapp-widget-panel h4 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wa-panel-text, #222222);
}
#whatsapp-widget-panel .wa-sub {
    margin: 0;
    font-size: 0.9rem;
    color: var(--wa-panel-text, #222222);
    opacity: 0.88;
}
#whatsapp-widget-panel .wa-body-intro {
    margin: 0 0 10px;
    line-height: 1.45;
    word-break: break-word;
}
#whatsapp-widget-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
/* Keep list as flex container so inline gap works */
#whatsapp-widget-panel ul.wa-widget-lines {
    display: flex !important;
    flex-direction: column;
}
/* Row background via --wa-line-i-bg (twig) so li:hover can override; borders stay inline */
/* position + left/top for row hover motion: stagger keyframes use transform on li, which blocks hover transform in several UAs */
#whatsapp-widget-panel ul.wa-widget-lines > li.wa-line-item {
    box-sizing: border-box;
    overflow: hidden;
    background: var(--wa-line-i-bg, transparent);
    position: relative;
    left: 0;
    top: 0;
    transition: box-shadow 0.22s ease, left 0.22s ease, top 0.22s ease;
}
#whatsapp-widget-panel ul.wa-widget-lines > li.wa-line-item:hover {
    background: var(--wa-line-row-hover-bg, #f6fffb);
}
#whatsapp-widget-panel ul.wa-widget-lines[data-line-hover-effect="shift-left"] > li.wa-line-item:hover {
    left: -6px;
}
#whatsapp-widget-panel ul.wa-widget-lines[data-line-hover-effect="shift-right"] > li.wa-line-item:hover {
    left: 6px;
}
#whatsapp-widget-panel ul.wa-widget-lines[data-line-hover-effect="lift"] > li.wa-line-item:hover {
    top: -4px;
}
#whatsapp-widget-panel ul.wa-widget-lines[data-line-hover-effect="shadow"] > li.wa-line-item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
#whatsapp-widget-panel ul.wa-widget-lines[data-line-hover-effect="lift-shadow"] > li.wa-line-item:hover {
    top: -3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/* Scoped link only: avoid #whatsapp-widget-panel a { color } which overrides .wa-line-title / .wa-line-desc */
#whatsapp-widget-panel ul.wa-widget-lines > li.wa-line-item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    text-decoration: none;
    color: inherit;
    transform: none;
    transition: transform 0.22s ease;
}
#whatsapp-widget-panel ul.wa-widget-lines > li.wa-line-item > a:focus {
    outline: none;
}

#whatsapp-widget-panel ul.wa-widget-lines[data-line-hover-effect="zoom"] > li.wa-line-item:hover > a {
    transform: scale(1.04);
}
#whatsapp-widget-panel img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e8e8e8;
}
#whatsapp-widget-panel .wa-line-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 0%;
}
/* Typography defaults only when inline styles are absent (no !important: inline from Twig must win) */
#whatsapp-widget-panel .wa-line-title {
    font-weight: var(--wa-line-title-weight, 600);
    font-size: var(--wa-line-title-size, 0.95rem);
    font-style: var(--wa-line-title-style, normal);
    color: var(--wa-line-title-color, var(--wa-panel-text, #222222));
}
#whatsapp-widget-panel .wa-line-desc {
    font-size: var(--wa-line-desc-size, 0.82rem);
    font-weight: var(--wa-line-desc-weight, 400);
    font-style: var(--wa-line-desc-style, normal);
    color: var(--wa-line-desc-color, #666666);
    word-break: break-word;
}
#whatsapp-widget-panel .wa-foot {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--wa-panel-text, #222222);
    opacity: 0.72;
}
#whatsapp-widget-panel.wa-zoom-enter {
    animation: waZoomIn 0.22s ease-out;
}
#whatsapp-widget-panel.wa-zoom-leave {
    animation: waZoomOut 0.22s ease-in;
}
@keyframes waZoomIn {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes waZoomOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0; }
}

/* Staggered line reveal only after panel open + JS delay (see footer scheduleLineRevealAfterPanel) */
#whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"]:not(.wa-lines--revealed) .wa-line-item {
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
}
#whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"][data-lines-effect="slide-left"]:not(.wa-lines--revealed) .wa-line-item {
    transform: translateX(-22px);
}
#whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"][data-lines-effect="slide-right"]:not(.wa-lines--revealed) .wa-line-item {
    transform: translateX(22px);
}
/* Longhand animation props: some UAs drop the whole rule if shorthand parsing fails (e.g. delay + fill-mode). */
#whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"].wa-lines--fade.wa-lines--revealed .wa-line-item {
    animation-name: waLineRowFade;
    animation-duration: 0.62s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: calc(var(--wa-i, 0) * 130ms);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes waLineRowFade {
    from { opacity: 0; visibility: visible; transform: translateY(26px); }
    to { opacity: 1; visibility: visible; transform: translateY(0); }
}
#whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"].wa-lines--slide.wa-lines--revealed .wa-line-item {
    animation-name: waLineRowSlide;
    animation-duration: 0.62s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: calc(var(--wa-i, 0) * 130ms);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes waLineRowSlide {
    from { opacity: 0; visibility: visible; transform: translateY(26px); }
    to { opacity: 1; visibility: visible; transform: translateY(0); }
}
#whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"].wa-lines--slide-left.wa-lines--revealed .wa-line-item {
    animation-name: waLineRowSlideLeft;
    animation-duration: 0.58s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: calc(var(--wa-i, 0) * 130ms);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes waLineRowSlideLeft {
    from { opacity: 0; visibility: visible; transform: translateX(-28px); }
    to { opacity: 1; visibility: visible; transform: translateX(0); }
}
#whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"].wa-lines--slide-right.wa-lines--revealed .wa-line-item {
    animation-name: waLineRowSlideRight;
    animation-duration: 0.58s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: calc(var(--wa-i, 0) * 130ms);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes waLineRowSlideRight {
    from { opacity: 0; visibility: visible; transform: translateX(28px); }
    to { opacity: 1; visibility: visible; transform: translateX(0); }
}
#whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"].wa-lines--zoom.wa-lines--revealed .wa-line-item {
    animation-name: waLineRowZoom;
    animation-duration: 0.58s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: calc(var(--wa-i, 0) * 130ms);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes waLineRowZoom {
    from { opacity: 0; visibility: visible; transform: scale(0.82); }
    to { opacity: 1; visibility: visible; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    #whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"] .wa-line-item {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* Stagger uses transform on li; reset only when not hovering so shift-hover on li can still be disabled below */
    #whatsapp-widget-panel ul.wa-widget-lines[data-lines-stagger="1"] .wa-line-item:not(:hover) {
        transform: none !important;
    }
    #whatsapp-widget-panel ul.wa-widget-lines > li.wa-line-item {
        transition: none !important;
    }
    #whatsapp-widget-panel ul.wa-widget-lines > li.wa-line-item:hover {
        box-shadow: none !important;
        transform: none !important;
        left: 0 !important;
        top: 0 !important;
    }
    #whatsapp-widget-panel ul.wa-widget-lines > li.wa-line-item > a {
        transition: none !important;
    }
    #whatsapp-widget-panel ul.wa-widget-lines > li.wa-line-item:hover > a {
        transform: none !important;
    }
}

@media (max-width: 768px) {
    #whatsapp-widget-panel {
        bottom: 96px;
    }
}
@media (max-width: 480px) {
    #whatsapp-widget-panel {
        width: calc(100vw - 24px);
    }
}