/* Brand overrides for Saucony AI Assistant chat.
   This file is loaded after ai-chat-engine.css. */

.hyper-speed-chat-main[data-brand="saucony_us"],
.hyper-speed-chat-main[data-brand="saucony"] {
    --ai-color-primary: #000000;
    --ai-color-secondary: #ffffff;
    --ai-color-accent: #edfe52;
    --ai-color-tertiary: #111111;
    --ai-color-count: rgba(0, 0, 0, 0.8);
    --ai-brand-accent: var(--ai-color-accent);
    --ai-brand-chip-hover: var(--ai-color-secondary);
    --ai-brand-chip-hover-color: var(--ai-color-primary);
    --ai-brand-border-chip: 1.245px solid #f2f2f2;
    --ai-brand-border-chip-hover: linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%);
    --ai-brand-secondary: var(--ai-color-secondary);
    --ai-viewport-bg: url('../images/ai-saucony-background.jpg') no-repeat center center;
    --ai-chat-bg: linear-gradient(180deg, var(--ai-color-accent) 0%, var(--ai-color-accent) 45%, var(--ai-color-secondary) 85%);
    --ai-chat-bubble-bg: #ffffff40;
    --ai-card-input-border: #f2f2f2;
    --ai-card-input-hover: #e2e2e2;
    --ai-text-base: var(--ai-color-primary);
    --ai-border-radius: 12px;
    --ai-font-stack: "Metrify Narrow", "Helvetica Neue", Arial, sans-serif;
    --ai-font-stack-secondary: "Metrify Regular", "Helvetica Neue", Arial, sans-serif;
    --ai-font-stack-spacing: 10%;
    --ai-font-stack-secondary-spacing: 20%;
    --ai-greeting-font-stack: var(--ai-font-stack);
    --ai-greeting-text-color: var(--ai-color-primary);
    --ai-accent-text: var(--ai-color-tertiary);
    --ai-btn-bg: var(--ai-color-secondary);
    --ai-btn-color: var(--ai-color-tertiary);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --ai-user-msg-bg: var(--ai-color-tertiary);
    --ai-user-text-color: var(--ai-color-secondary);
    --ai-header-bg: var(--ai-color-accent);
    --ai-header-text: var(--ai-color-tertiary);
    --ai-card-border: var(--ai-color-primary);
    --ai-card-bg: var(--ai-color-secondary);
    --ai-tile-card-bg: rgba(255, 255, 255, 0.40);
    --ai-muted-text: #555555;
    --ai-img-bg: #f7f8f9;
    --ai-nav-bg: var(--ai-color-accent);
    --ai-nav-button-border-color: var(--ai-color-primary);
    --ai-nav-color: var(--ai-color-secondary);
    --ai-header-badge-icon-color: var(--ai-color-tertiary);
    --ai-header-badge-icon-filter: brightness(0);
    --ai-footer-color: rgba(0, 0, 0, 0.50);
    --ai-elite-color-count: rgba(0, 0, 0, 0.80);
    --ai-elite-color-count-hover: rgba(0, 0, 0, 0.80);
    /* Bottom Dock Properties Matched to Header Background (#fbff12) */
    --ai-input-bg: var(--ai-header-bg);
    --ai-footer-bg: var(--ai-header-bg);
    --ai-input-field-bg: var(--ai-color-secondary);
    --ai-input-border: var(--ai-color-primary);

    --ai-carousel-hover-line: var(--ai-color-accent);
    --ai-carousel-hover-shadow: 0 8px 24px rgba(196, 255, 14, 0.25);
    --ai-tile-card-shadow-hover: var(--ai-carousel-hover-shadow);

    --ai-btn-bg-desktop: var(--ai-color-secondary);
    --ai-btn-bg-mobile: var(--ai-color-secondary);
    --ai-btn-color-desktop: var(--ai-color-tertiary);
    --ai-btn-color-mobile: var(--ai-color-tertiary);

    --ai-glow-gradient: linear-gradient(270deg, #111111, #fbff12, #c4ff0e, #111111);
    --ai-glow-gradient-desktop: linear-gradient(270deg, #ffffff, #fbff12, #c4ff0e, #ffffff);
    --ai-glow-size: 400% 400%;
    --ai-glow-speed: 1.8s;
    --ai-glow-timing: linear;
    --ai-glow-inset: -2px;
    --ai-loader-image: url('../images/saucony-logo-loader.svg');
    --ai-loader-shimmer: var(--ai-color-accent);
    --ai-loader-base-opacity: 1;
    --ai-glow-radius: 4px;
    /* New Sparkle Animation Tokens */
    --ai-sparkle-start-color: rgba(255, 255, 255, 0.4);
    --ai-sparkle-peak-color: var(--ai-color-accent);
    /* Citron/Yellow glow */
    --ai-sparkle-filter-base: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45));
    --ai-sparkle-filter-peak: brightness(0) saturate(100%) invert(92%) sepia(88%) saturate(530%) hue-rotate(8deg) brightness(106%) contrast(103%) drop-shadow(0 0 4px rgba(237, 254, 82, 0.6));
    /* New/Updated Mobile Navigation Tokens */
    --ai-nav-border-mobile: linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%);
    --ai-nav-color-mobile: var(--ai-color-primary);
    /* New Mobile Sparkle Color Tokens */
    --ai-sparkle-fill-start-mobile: #111111;
    --ai-sparkle-peak-mobile: var(--ai-color-accent);
    --ai-ask-border-gradient-hover-brand: linear-gradient(90deg, var(--ai-color-accent) 0%, var(--ai-color-primary) 100%);
    --ai-scroll-bottom-arrow-color: var(--ai-color-secondary);
    --ai-submit-arrow-color-default: var(--ai-color-tertiary);
    --ai-submit-arrow-color-focus: var(--ai-color-secondary);
    --ai-ask-shadow-focus: 0 0 0 2px rgba(0, 0, 0, 0.16);
    --ai-disclaimer-color: rgba(0, 0, 0, 0.50);
    --ai-ask-border-gradient-default: var(--ai-brand-border-chip-hover);
    --ai-ask-border-gradient-hover: var(--ai-ask-border-gradient-hover-brand, linear-gradient(90deg, var(--ai-color-accent) 0%, var(--ai-color-primary) 100%));

}

.hyper-speed-chat-main .ai-elite-card {
    @media screen and (min-width: 768px) {
        min-height: 314px !important;
    }
}

.hyper-speed-chat-main .chat-viewport.chat-main-viewport.is-active {
    border-radius: 10px 10px 0 0 !important;

    @media screen and (min-width: 768px) {
        border-radius: 10px !important;
    }
}

.hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-cta,
.hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-cta,
.hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-cta {
    transform: translateX(var(--ai-tile-arrow-shift, 6px)) !important;
}

/* Base border: black -> green */
.hyper-speed-chat-main .chat-input-field-wrapper::before,
.hyper-speed-chat-main .chat-input-field-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 0.6s ease-in-out;
}

.hyper-speed-chat-main .chat-input-field-wrapper::before {
    background: linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%);
    opacity: 1;
}

/* Hover border: green -> black */
.hyper-speed-chat-main .chat-input-field-wrapper::after {
    background: linear-gradient(90deg, var(--ai-color-accent) 0%, var(--ai-color-primary) 100%);
    opacity: 0;
}

.hyper-speed-chat-main .chat-input-field-wrapper:hover:not(:focus-within)::before {
    opacity: 0;
}

.hyper-speed-chat-main .chat-input-field-wrapper:hover:not(:focus-within)::after {
    opacity: 1;
}

/* Let your focus-within solid border show cleanly */
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within::before,
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within::after {
    opacity: 0;
}

/* base arrow */
.hyper-speed-chat-main .chat-input-row button#chat-submit-action-btn::before,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    content: "" !important;
    width: 10px !important;
    height: 14px !important;
    background-color: var(--ai-submit-arrow-color-default) !important;
    -webkit-mask-image: var(--ai-icon-arrow-solid-mask, url('../images/ai-card-up-arrow-solid.svg')) !important;
    mask-image: var(--ai-icon-arrow-solid-mask, url('../images/ai-card-up-arrow-solid.svg')) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    opacity: 1 !important;
    z-index: 2 !important;
    pointer-events: none !important;

    @media screen and (min-width: 768px) {
        width: 14px !important;
        height: 12px !important;
    }
}

.hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-price,
.hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-price,
.hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-price {
    border-radius: var(--ai-tile-price-pill-radius, 2px) !important;
    line-height: 140% !important;
    transition: all 0.6s ease-in-out;
    font-weight: 400 !important;
}

.hyper-speed-chat-main .ai-elite-card {
    border: var(--ai-brand-border-chip, 1.245px solid) !important;
    ;
    background-color: rgba(255, 255, 255, 0.40) !important;
}

.hyper-speed-chat-main .ai-elite-price {
    font-weight: 400 !important;
    line-height: 140% !important;
}

.hyper-speed-chat-main .ai-elite-cta::before {
    background-color: var(--ai-color-primary) !important;
    color: var(--ai-color-primary) !important;
}

.hyper-speed-chat-main .ai-elite-img-wrap {
    background-blend-mode: multiply;
    background: #F9F9F9 !important;

}

.hyper-speed-chat-main .chat-header-navigation-link .nav-beta-tag {
    letter-spacing: 1px !important;

    @media screen and (min-width: 768px) {
        letter-spacing: 1.4px !important;
    }
}

.hyper-speed-chat-main .chat-input-row button#chat-submit-action-btn,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn {
    @media screen and (min-width: 768px) {
        padding: 10px !important;
        gap: 10px !important;
    }
}

.hyper-speed-chat-main .chat-input-row input {
    @media screen and (min-width: 768px) {
        line-height: 140% !important;
    }
}

.hyper-speed-chat-main .ai-elite-pricing {
    flex-direction: row-reverse;
}

.hyper-speed-chat-main .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-standard-price {
    /* color: var(--ai-color-primary) !important; */
    text-decoration: line-through;
}

.hyper-speed-chat-main .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price {
    background-color: var(--ai-color-accent) !important;
    padding: 0 2px !important;
    text-decoration: none;
}

.hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-standard-price,
.hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-standard-price,
.hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-standard-price {
    opacity: 1 !important;
}

.hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price,
.hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price,
.hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price {
    color: var(--ai-color-primary) !important;
    text-decoration: none;
}

.hyper-speed-chat-main strong {
    font-weight: 900 !important;
}

.hyper-speed-chat-main .chat-bubble a {
    color: var(--ai-color-primary) !important;
    text-decoration: underline !important;
    font-size: 16px !important;
}

.hyper-speed-chat-main .chat-bubble a:hover {
    color: var(--ai-color-primary) !important;
    text-decoration: none !important;
    font-size: 16px !important;
}

@media screen and (max-width: 767px) {
    .chat-header-navigation-link {
        height: 25px !important;
    }
}

.hyper-speed-chat-main .ai-carousel-group-header {
    font-size: 16px !important;

    @media screen and (min-width: 768px) {
        font-size: 18px !important;
    }
}

.hyper-speed-chat-main strong {
    font-family: "Metrify Bold", "Helvetica Neue", Arial, sans-serif !important;
}