/* ============================================================
   BloomBridge — feature pack styles (new file, bb- namespace)
   1) "Watch AI work" live demo   2) AI readiness mini-quiz
   3) Booking scaffold (contact)  4) Exit-intent nudge
   ============================================================ */

/* ---------- 1) Watch AI work — terminal-ish card ---------- */
.bbd-card{
  max-width:780px;margin:0 auto;overflow:hidden;border-radius:16px;
  background:linear-gradient(165deg,#F8F7E8 0%,#ECEAD0 100%);
  border:1px solid rgba(139,115,85,.38);
  box-shadow:0 18px 44px rgba(61,47,36,.14),0 2px 8px rgba(61,47,36,.08);
}
.bbd-bar{display:flex;align-items:center;gap:7px;padding:.62rem .95rem;background:#3D2F24}
.bbd-dot{width:9px;height:9px;border-radius:50%;background:#8B7355;opacity:.8}
.bbd-dot:nth-child(2){background:#B59A78}
.bbd-dot:nth-child(3){background:#ECEAD0;opacity:.55}
.bbd-title{margin-left:8px;color:#ECEAD0;font-size:.76rem;letter-spacing:.8px;opacity:.75;font-family:ui-monospace,Consolas,'Courier New',monospace}
.bbd-body{padding:1.15rem 1.3rem 1rem;min-height:300px}
.bbd-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1.6px;color:#8B7355;margin:0 0 .35rem}
.bbd-prompt{font-family:ui-monospace,Consolas,'Courier New',monospace;font-size:.94rem;line-height:1.6;color:#3D2F24;min-height:3.2em;max-width:none;margin:0}
.bbd-caret{display:inline-block;width:8px;height:1.05em;background:#8B7355;vertical-align:-2px;margin-left:2px;animation:bbdBlink .85s steps(1) infinite}
.bbd-think{display:flex;align-items:center;gap:4px;margin:.7rem 0 0;color:#8B7355;font-size:.85rem;font-style:italic;max-width:none}
.bbd-think i{width:6px;height:6px;border-radius:50%;background:#B59A78;font-style:normal;animation:bbdBounce 1s ease-in-out infinite}
.bbd-think i:nth-child(2){animation-delay:.15s}
.bbd-think i:nth-child(3){animation-delay:.3s}
.bbd-think .bbd-tlabel{margin-left:6px;background:linear-gradient(100deg,#8B7355 30%,#B59A78 50%,#8B7355 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bbdShimmer 1.2s linear infinite}
.bbd-answer{margin-top:.7rem;border-top:1px dashed rgba(139,115,85,.4);padding-top:.7rem}
.bbd-line{opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease;font-size:.95rem;line-height:1.6;color:#5C4A3A;margin:.3rem 0;max-width:none}
.bbd-line.on{opacity:1;transform:none}
.bbd-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.55rem 1.3rem .8rem;font-size:.75rem;color:#8B7355;letter-spacing:.4px}
.bbd-hint{opacity:.7;transition:opacity .3s}
.bbd-card.paused .bbd-hint{opacity:1;font-weight:bold}
.bbd-caption{text-align:center;margin:1.35rem auto 0;max-width:64ch;font-family:Georgia,'Times New Roman',serif;font-size:1.08rem;color:#5C4A3A}
.bbd-caption a{border-bottom:1px solid #B59A78}
@keyframes bbdBlink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes bbdBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
@keyframes bbdShimmer{from{background-position:130% 0}to{background-position:-30% 0}}

/* ---------- 2) AI readiness mini-quiz ---------- */
.bbq-card{
  position:relative;max-width:660px;margin:0 auto;min-height:340px;
  background:linear-gradient(170deg,#FBFAF0,#F0EEDA);
  border:1px solid rgba(139,115,85,.35);border-radius:18px;
  box-shadow:0 18px 44px rgba(61,47,36,.14);
  padding:1.6rem 1.7rem 1.8rem;overflow:hidden;
}
.bbq-step{display:flex;flex-direction:column;gap:.55rem}
.bbq-step.in{animation:bbqIn .38s cubic-bezier(.22,.61,.36,1) both}
.bbq-dots{display:flex;gap:8px;margin-bottom:.4rem}
.bbq-dots i{width:9px;height:9px;border-radius:50%;background:rgba(139,115,85,.25);transition:background .3s,transform .3s}
.bbq-dots i.done{background:#8B7355}
.bbq-dots i.now{background:#B59A78;transform:scale(1.35);box-shadow:0 0 8px rgba(214,186,140,.8)}
.bbq-count{font-size:.72rem;text-transform:uppercase;letter-spacing:1.6px;color:#8B7355;margin:0}
.bbq-q{font-family:Georgia,'Times New Roman',serif;font-size:1.35rem;color:#5C4A3A;margin:0 0 .5rem;line-height:1.3}
.bbq-chips{display:flex;flex-direction:column;gap:.55rem}
.bbq-chip{
  font-family:inherit;font-size:.97rem;text-align:left;cursor:pointer;
  color:#3D2F24;background:#F5F5DC;border:1px solid rgba(139,115,85,.45);
  border-radius:12px;padding:.72rem .95rem;
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.bbq-chip:hover,.bbq-chip:focus-visible{background:#ECEAD0;border-color:#8B7355;transform:translateX(4px);box-shadow:0 4px 14px rgba(61,47,36,.1)}
.bbq-chip.picked{background:#5C4A3A;border-color:#5C4A3A;color:#F5F5DC;box-shadow:0 0 18px rgba(214,186,140,.5)}
.bbq-result{align-items:center;text-align:center;gap:.7rem;padding-top:.5rem}
.bbq-burst{position:absolute;left:50%;top:34%;width:0;height:0;pointer-events:none}
.bbq-name{font-family:Georgia,'Times New Roman',serif;font-size:2rem;color:#5C4A3A;margin:0;text-shadow:0 0 24px rgba(214,186,140,.45)}
.bbq-read{color:#5C4A3A;margin:0 auto .4rem;max-width:46ch}
.bbq-again{background:none;border:none;cursor:pointer;font-family:inherit;font-size:.85rem;color:#8B7355;text-decoration:underline;margin-top:.4rem;padding:.2rem}
.bbq-again:hover{color:#5C4A3A}
.bbq-fine{text-align:center;font-size:.78rem;color:#8B7355;margin:.9rem auto 0;max-width:none;letter-spacing:.3px}
.bbq-petal{
  position:absolute;left:-5px;top:-7px;width:10px;height:14px;
  border-radius:60% 60% 60% 0;opacity:0;
  animation:bbqPetal 1s cubic-bezier(.17,.67,.4,1) forwards;
}
@keyframes bbqIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes bbqPetal{
  0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.5)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx,40px),var(--ty,-60px)) rotate(var(--rz,180deg)) scale(1)}
}

/* ---------- 3) Booking scaffold (contact page) ---------- */
#bb-booking{max-width:780px;margin:0 auto}
.bbk-loading{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:180px;border-radius:16px;
  background:linear-gradient(165deg,#F8F7E8,#ECEAD0);
  border:1px dashed rgba(139,115,85,.5);
  box-shadow:0 18px 44px rgba(61,47,36,.1);
}
.bbk-loading p{margin:0;color:#8B7355;font-family:Georgia,'Times New Roman',serif;font-size:1.05rem}
.bbk-pulse{width:12px;height:12px;border-radius:50%;background:#B59A78;box-shadow:0 0 0 0 rgba(181,154,120,.6);animation:bbkPulse 1.4s ease-out infinite}
.bbk-frame{width:100%;min-height:620px;border:0;border-radius:16px;background:#ECEAD0;box-shadow:0 18px 44px rgba(61,47,36,.14)}
.bbk-fallback{text-align:center;margin-top:1.1rem}
.bbk-fallback[hidden]{display:none}
.bbk-or{
  display:flex;align-items:center;gap:14px;justify-content:center;
  font-size:.75rem;text-transform:uppercase;letter-spacing:1.8px;color:#8B7355;
  margin:0 auto .8rem;max-width:none;
}
.bbk-or::before,.bbk-or::after{content:"";height:1px;width:64px;background:rgba(139,115,85,.4)}
.bbk-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@keyframes bbkPulse{0%{box-shadow:0 0 0 0 rgba(181,154,120,.55)}70%{box-shadow:0 0 0 14px rgba(181,154,120,0)}100%{box-shadow:0 0 0 0 rgba(181,154,120,0)}}

/* ---------- 4) Exit-intent nudge (desktop) ---------- */
.bb-exit{
  position:fixed;top:0;left:0;right:0;z-index:3500;
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:.65rem 3rem .65rem 1.2rem;
  background:linear-gradient(90deg,#3D2F24,#5C4A3A 55%,#3D2F24);
  border-bottom:1px solid rgba(214,186,140,.45);
  box-shadow:0 12px 34px rgba(61,47,36,.4);
  transform:translateY(-110%);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.bb-exit.show{transform:none}
.bb-exit p{margin:0;max-width:none;color:#ECEAD0;font-size:.95rem}
.bb-exit p strong{color:#F5F5DC}
.bb-exit .bb-exit-x{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:#B59A78;
  font-size:1.35rem;line-height:1;padding:.25rem .5rem;
}
.bb-exit .bb-exit-x:hover{color:#F5F5DC}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .bbd-body{padding:1rem;min-height:330px}
  .bbd-foot{padding:.5rem 1rem .75rem}
  .bbq-card{padding:1.2rem 1.1rem 1.4rem}
  .bbq-q{font-size:1.18rem}
}

/* ---------- reduced motion ---------- */
html.rm .bbd-caret,html.rm .bbd-think i,html.rm .bbd-think .bbd-tlabel,
html.rm .bbk-pulse,html.rm .bbq-petal{animation:none}
html.rm .bbq-step.in{animation:none}
html.rm .bbq-chip:hover{transform:none}
html.rm .bb-exit{transition:none}
@media (prefers-reduced-motion:reduce){
  .bbd-caret,.bbd-think i,.bbd-think .bbd-tlabel,.bbk-pulse,.bbq-petal{animation:none}
  .bbq-step.in{animation:none}
  .bbq-chip:hover{transform:none}
  .bb-exit{transition:none}
}