/* AI Sales Advisor — Rockmark brand style */

.asa-advisor-wrap {
    --asa-primary:      #FF2A13;
    --asa-primary-dark: #AC1100;
    --asa-accent:       #D80F0F;
    --asa-text:         #121212;
    --asa-text-muted:   #545454;
    --asa-bg-muted:     #f5f5f5;
    --asa-border:       #dddddd;

    font-family: "Rubik", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--asa-text);
    background: transparent;
    width: 100%;
    max-width: 100%;
}

/* ── Title ─────────────────────────────────────────────────────────────── */

.asa-advisor-title {
    font-family: "Rubik", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--asa-text);
    margin: 0 0 14px;
}

/* ── Input area (top) ──────────────────────────────────────────────────── */

.asa-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--asa-text);
    margin-bottom: 16px;
}

.asa-input {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    color: var(--asa-text);
    outline: none;
}

.asa-input::placeholder {
    color: #bababa;
}

.asa-input:disabled {
    cursor: not-allowed;
    color: #bababa;
}

.asa-send-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--asa-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    padding: 0;
}

.asa-send-btn:hover:not(:disabled)  { background: var(--asa-primary-dark); }
.asa-send-btn:active:not(:disabled) { background: var(--asa-primary-dark); }
.asa-send-btn:disabled              { background: #bababa; cursor: not-allowed; }

/* ── Messages ──────────────────────────────────────────────────────────── */

.asa-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-bottom: 4px;
}

.asa-message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.asa-message-bot  { align-self: flex-start; }
.asa-message-user { align-self: flex-end; }

.asa-bubble {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}

.asa-message-bot  .asa-bubble {
    background: var(--asa-bg-muted);
    border-radius: 0 10px 10px 10px;
}

.asa-message-user .asa-bubble {
    background: var(--asa-primary);
    color: #fff;
    border-radius: 10px 0 10px 10px;
}

/* Typing indicator */
.asa-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    background: var(--asa-bg-muted);
    border-radius: 0 10px 10px 10px;
    align-self: flex-start;
    width: fit-content;
}

.asa-loading-init {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    align-self: flex-start;
}

.asa-typing-dot {
    width: 7px;
    height: 7px;
    background: var(--asa-text-muted);
    border-radius: 50%;
    animation: asa-bounce 1.2s infinite ease-in-out both;
}

.asa-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.asa-typing-dot:nth-child(2) { animation-delay: -0.16s; }
.asa-typing-dot:nth-child(3) { animation-delay: 0s; }

@keyframes asa-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1);   opacity: 1; }
}

/* Closing / ended */
.asa-bubble-closing {
    font-style: italic;
    opacity: .85;
}

.asa-chat-ended .asa-input-area {
    opacity: .45;
    pointer-events: none;
}

/* Error */
.asa-error {
    font-size: 13px;
    color: var(--asa-primary);
    padding: 8px 12px;
    background: #fff5f5;
    align-self: flex-start;
    max-width: 90%;
}

/* ── Results section ───────────────────────────────────────────────────── */

.asa-results-section {
    margin-top: 32px;
    border-top: 2px solid var(--asa-text);
    padding-top: 24px;
}

.asa-results-reason {
    font-size: 14px;
    color: var(--asa-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ── Product grid (3 col desktop) ──────────────────────────────────────── */

.asa-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Rockmark product card ─────────────────────────────────────────────── */

.asa-rm-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 310px;
    padding: 0 27px;
    box-sizing: border-box;
}

/* Card box: image + price footer — max 256×409px (border-box) */
.asa-rm-card-box {
    border: 2px solid var(--asa-text);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-top: 19px;
    padding: 20px;
    box-sizing: border-box;
}

.asa-rm-card-link {
    display: block;
    text-decoration: none;
}

.asa-rm-image-wrap {
    aspect-ratio: 380 / 518;
    overflow: hidden;
    background: var(--asa-bg-muted);
}

.asa-rm-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Price + icon — vertically stacked inside card box */
.asa-rm-card-footer {
}

.asa-rm-price {
    font-family: "Rubik", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--asa-accent);
    line-height: 1;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Regular price (crossed out) — 80% smaller, black */
.asa-rm-price del {
    font-size: 80%;
    color: var(--asa-text);
    text-decoration: line-through;
    font-weight: 400;
    margin-right: 4px;
}

/* Sale price stays full size and red */
.asa-rm-price ins {
    text-decoration: none;
    color: var(--asa-accent);
}

.asa-rm-icon-wrap {
    text-align: right;
    line-height: 0;
}

.asa-rm-icon-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--asa-text);
    opacity: 0.65;
    transition: opacity .2s;
    line-height: 0;
}

.asa-rm-icon-btn:hover {
    opacity: 1;
}

/* Below-card info — fills remaining grid cell height */
.asa-rm-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.asa-rm-name {
    font-family: "Rubik", sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--asa-text);
    line-height: 1.35;
}

.asa-rm-summary {
    font-size: 13px;
    color: var(--asa-text-muted);
    line-height: 1.5;
}

.asa-rm-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--asa-primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-family: "Rubik", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s;
    align-self: flex-end;
    margin-top: auto;
}

.asa-rm-cart-btn:hover,
.asa-rm-cart-btn:focus {
    background: var(--asa-primary-dark);
    color: #fff;
    text-decoration: none;
}

.asa-rm-select-btn {
    display: inline-flex;
    align-items: center;
    color: #e30613;
    text-decoration: none;
    font-family: "Rubik", sans-serif;
    font-size: 14.4px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    align-self: flex-end;
    margin-top: auto;
    transition: opacity .2s;
}

.asa-rm-select-btn:hover,
.asa-rm-select-btn:focus {
    color: #e30613;
    text-decoration: none;
    opacity: 0.75;
}

/* ── Bundle section ────────────────────────────────────────────────────── */

.asa-bundle-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--asa-border);
}

.asa-bundle-label {
    font-family: "Rubik", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--asa-text);
    margin-bottom: 16px;
}

.asa-bundle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Feedback ──────────────────────────────────────────────────────────── */

.asa-feedback-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--asa-border);
}

.asa-feedback-label {
    font-size: 12px;
    color: var(--asa-text-muted);
    font-family: "Rubik", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.asa-thumb {
    background: none;
    border: 1px solid var(--asa-border);
    padding: 4px 10px;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    line-height: 1.4;
}

.asa-thumb:hover:not(:disabled)    { background: var(--asa-bg-muted); border-color: #aaa; }
.asa-thumb-selected                { background: var(--asa-bg-muted); border-color: var(--asa-primary); }
.asa-thumb:disabled                { cursor: default; opacity: .6; }

/* ── Search redirect ───────────────────────────────────────────────────── */

.asa-search-redirect p {
    margin: 0 0 10px;
}

.asa-search-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--asa-primary);
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    font-family: "Rubik", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background .2s;
}

.asa-search-link:hover { background: var(--asa-primary-dark); color: #fff; text-decoration: none; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .asa-messages {
        max-height: 380px;
    }

    .asa-product-grid,
    .asa-bundle-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}