/* Commerce Client - Agentforce Widget Styles */

/* ── Header button ── */
.cc-header-entry {
    vertical-align: top;
    display: inline-block;
    margin: 1.1em 0 0 0.75em;
}

/* Client-side injection appends the trigger to the configured header wrapper.
   Keep it last in flex-based storefront headers (after the cart), and neutralize
   the legacy margin so it aligns with the surrounding header controls. */
.cc-header-entry--injected {
    display: flex;
    align-items: center;
    order: 2147483647;
    margin: 0;
}

.cc-header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    box-sizing: border-box;
    background: var(--cc-trigger-surface, #000);
    color: var(--cc-trigger-text, #fff);
    border: none;
    box-shadow: inset 0 0 0 2px var(--cc-trigger-accent, transparent);
    border-radius: var(--cc-trigger-radius, 4px);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 20px;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    text-decoration: none;
}

.cc-header-button:hover  { opacity: 0.88; }
.cc-header-button:active { opacity: 0.72; }

.cc-header-button:focus-visible,
.cc-plp-chip:focus-visible {
    outline: 2px solid var(--cc-trigger-accent, #000);
    outline-offset: 2px;
}

.cc-sparkle-icon,
.cim-widget-minimized-button::before {
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5l2 5.5 5.5 2-5.5 2L9 16.5 7 11 1.5 9 7 7zM19 12l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5l2 5.5 5.5 2-5.5 2L9 16.5 7 11 1.5 9 7 7zM19 12l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.cc-header-button .cc-sparkle-icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--cc-header-icon-color, #fff);
}

.cc-header-button-label { letter-spacing: 0.01em; }

@media (max-width: 767.98px) {
    .cc-header-button-label { display: none; }
    .cc-header-button        { min-width: 36px; padding: 8px; }
    .cc-header-entry:not(.cc-header-entry--injected) { margin: 1.1em 0 0 0.5em; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-header-button,
    .cc-plp-chip {
        transition: none;
    }
}

/* ── PLP AI-filter chip ── */
/* !important: injected into an arbitrary storefront filter-bar container,
   whose own generic "button" selectors (e.g. width/background/border resets
   for its own filter tabs) can otherwise out-specificity a plain class
   selector — this is the narrowest specificity bump that still wins. */
.cc-plp-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    width: 32px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    margin: 0 10px 0 0 !important;
    background: var(--cc-trigger-surface, #000) !important;
    color: var(--cc-trigger-accent, #fff) !important;
    border: none !important;
    box-shadow: inset 0 0 0 2px var(--cc-trigger-accent, transparent) !important;
    border-radius: var(--cc-trigger-radius, 999px) !important;
    padding: 0 !important;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cc-plp-chip:hover  { opacity: 0.85 !important; }
.cc-plp-chip:active { opacity: 0.7 !important; }

.cc-plp-chip .cc-sparkle-icon {
    display: block;
    width: 15px;
    height: 15px;
}

/* ── Full-height side panel ── */
.cim-widget-dialog.full-height.bottom-left,
.cim-widget-dialog.full-height.bottom-right {
    top: var(--cc-panel-top, 0) !important;
    bottom: 0 !important;
    height: var(--cc-panel-height, 100dvh) !important;
    border-radius: 0 !important;
    width: min(var(--cc-panel-width, 480px), 100vw) !important;
    box-shadow:
        -10px 0 12px #00000014,
        10px 0 12px #00000014 !important;
}

/* ── FAB ── */
body.cc-hide-fab .cim-widget-minimized-container { display: none !important; }

/* Hide every icon the SDK itself may render (img or inline svg) so our own
   ::before icon below is always the only one visible — a single, reliable
   icon regardless of which markup the SDK uses internally. */
.cim-widget-minimized-icon-img,
.cim-widget-minimized-button > svg {
    display: none !important;
}

html.cc-trigger-themed .cim-widget-minimized-button {
    background: linear-gradient(
        180deg,
        var(--cc-fab-gradient-start, var(--cc-trigger-accent, #6c3fc5)),
        var(--cc-fab-gradient-end, #171522)
    ) !important;
    border-radius: var(--cc-trigger-radius, 4px) !important;
}

.cim-widget-minimized-button::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    color: var(--cc-fab-icon-color, #fff);
}

html.cc-trigger-themed .cim-widget-minimized-button:focus-visible {
    outline: 2px solid var(--cc-trigger-accent, #000);
    outline-offset: 2px;
}

/* ── Page-push (cc_pagePush = true only) ── */
@media (min-width: 768px) {
    body.cc-panel-left,
    body.cc-panel-right {
        transition: margin-left 0.25s ease-out, margin-right 0.25s ease-out;
    }
    body.cc-panel-open.cc-panel-left  { margin-left:  min(var(--cc-panel-width, 480px), 50vw); }
    body.cc-panel-open.cc-panel-right { margin-right: min(var(--cc-panel-width, 480px), 50vw); }
}