/* AskBee product page */

:root {
  --bee: #f59e0b;
  --bee-dark: #b45309;
  --bee-grad: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.text-bee { background: linear-gradient(90deg, #fcd34d, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; }

.eyebrow.is-soon { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .5); color: #fcd34d; }
.eyebrow.is-soon .dot { background: #fbbf24; animation: ab-blink 1.6s ease-in-out infinite; }
@keyframes ab-blink { 50% { opacity: .3; } }

.btn-bee { background: var(--bee-grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(234, 120, 8, .8); }
.btn-bee:hover { color: #fff; box-shadow: 0 14px 30px -10px rgba(234, 120, 8, .9); }

.product-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; color: #fff; font-weight: 800; font-size: 1.5rem; }
.product-logo img { width: 52px; height: 52px; }
.product-logo small { display: block; font-size: .68rem; letter-spacing: .14em; color: #a9a4e0; font-weight: 700; text-transform: uppercase; }

.feature-icon.bee { background: #fff4dc; color: #b45309; }

.soon-box .price { font-size: 2.2rem; }
.soon-box .badge-soon { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #fff4dc; color: #92400e; font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

.compare { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); font-size: .98rem; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--bg-soft); color: var(--ink); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.compare .yes { color: #0a8f6b; font-weight: 800; }
.compare .no { color: #a01d31; font-weight: 700; }

/* ---------- Live widget demo ---------- */

.ab-demo-stage { position: relative; min-height: 560px; background: linear-gradient(135deg, #f6f5ff, #fff7e6); padding: 32px; }
.ab-demo-site { max-width: 520px; display: grid; gap: 14px; }
.ab-demo-site span { display: block; height: 12px; border-radius: 6px; background: #e4e1f5; }
.ab-demo-site .ab-l1 { width: 40%; height: 18px; background: #cfc8f2; }
.ab-demo-site .ab-l2 { width: 90%; }
.ab-demo-site .ab-l3 { width: 75%; }
.ab-demo-site .ab-card { height: 120px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }

.ab-widget { position: absolute; right: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-size: 14px; }
.ab-launcher { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--bee-grad); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 28px -8px rgba(180, 83, 9, .7); transition: transform .15s ease; }
.ab-launcher:hover { transform: scale(1.06); }
.ab-launcher svg { width: 28px; height: 28px; }
.ab-teaser { background: #fff; color: var(--text); padding: 10px 14px; border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow); font-weight: 600; max-width: 240px; }
.ab-teaser[hidden], .ab-popup[hidden] { display: none; }

.ab-popup { width: min(350px, calc(100vw - 72px)); background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px -12px rgba(11, 6, 40, .45); display: flex; flex-direction: column; max-height: 470px; }
.ab-head { background: var(--bee-grad); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.ab-avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff7e6; color: var(--bee-dark); font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; flex: none; }
.ab-head strong { display: block; font-size: 15px; line-height: 1.2; }
.ab-head small { color: #fff4e0; font-size: 12px; }
.ab-close { margin-left: auto; background: rgba(255, 255, 255, .2); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; }

.ab-body { background: #fffdf8; padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 220px; }
.ab-faq h4 { font-size: 13px; margin: 0 0 8px; }
.ab-faq details { background: #fff; border: 1px solid #efe9dc; border-radius: 12px; padding: 0 12px; margin-bottom: 8px; }
.ab-faq summary { cursor: pointer; padding: 10px 0; font-weight: 700; font-size: 13px; color: var(--ink); }
.ab-faq details p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }

.ab-msg { max-width: 82%; padding: 9px 13px; border-radius: 16px; line-height: 1.45; font-size: 13.5px; }
.ab-msg.is-me { align-self: flex-end; background: var(--bee); color: #fff; border-bottom-right-radius: 4px; }
.ab-msg.is-them { align-self: flex-start; background: #f1eff8; color: var(--text); border-bottom-left-radius: 4px; }
.ab-typing { align-self: flex-start; background: #f1eff8; border-radius: 14px; padding: 12px 14px; display: flex; gap: 5px; }
.ab-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8a87ad; animation: ab-dot 1s infinite; }
.ab-typing i:nth-child(2) { animation-delay: .15s; }
.ab-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ab-dot { 50% { transform: translateY(-4px); opacity: .5; } }

.ab-form { border-top: 1px solid #eeeaf6; padding: 10px 12px 12px; display: flex; gap: 8px; background: #fff; }
.ab-form input { flex: 1; min-width: 0; border: 1px solid #e4e1f5; background: #f6f5ff; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 13.5px; }
.ab-form input:focus { outline: 3px solid rgba(245, 158, 11, .35); border-color: var(--bee); }
.ab-form button { border: 0; background: var(--bee); color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: none; }
.ab-form button svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
  .ab-demo-stage { min-height: 600px; padding: 20px; }
  .ab-widget { right: 12px; bottom: 12px; }
}