/* The Boat Brokers — front-end UX layer (2026-09-16). Pairs with assets/js/tbb-ux.js. */

/* ── Next-step line ─────────────────────────────────────────────────────── */
.tbb-next-step{margin:10px 0 0;font-size:.86rem;line-height:1.45;color:#334155;font-weight:600}

/* ── Search typeahead ───────────────────────────────────────────────────── */
.tbb-ta{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:9990;background:#fff;border:1px solid #CBD7E4;border-radius:12px;box-shadow:0 18px 44px rgba(2,6,23,.18);max-height:min(70vh,460px);overflow-y:auto;padding:6px}
.tbb-ta[hidden]{display:none}
.tbb-ta__opt{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;color:#0f172a;text-decoration:none;min-height:44px}
.tbb-ta__opt:hover,.tbb-ta__opt[aria-selected="true"]{background:#eef3fa}
.tbb-ta__thumb{flex:0 0 64px;height:44px;border-radius:6px;background:#e2e8f0 center/cover no-repeat}
.tbb-ta__txt{display:flex;flex-direction:column;min-width:0}
.tbb-ta__title{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbb-ta__meta{font-size:.8rem;color:#475569}
.tbb-ta__all{justify-content:center;font-weight:700;color:#1B3A5C;border-top:1px solid #eef2f7;margin-top:4px;border-radius:0 0 8px 8px}
.tbb-ta__empty{padding:10px 12px;font-size:.86rem;color:#475569}

/* ── Welcome back ───────────────────────────────────────────────────────── */
.tbb-wb{max-width:1280px;margin:18px auto 8px;padding:16px 20px;background:#fff;border:1px solid #CBD7E4;border-radius:16px;box-shadow:0 6px 24px rgba(20,42,68,.10);box-sizing:border-box}
.tbb-wb--inline{margin:0 0 14px;max-width:none}
.tbb-wb__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tbb-wb__h{margin:0;font-size:1.02rem;font-weight:800;color:#0f172a;letter-spacing:-.01em}
.tbb-wb__x{flex:0 0 36px;height:36px;border:0;border-radius:50%;background:#f1f5f9;color:#475569;font:700 18px/36px system-ui,sans-serif;cursor:pointer}
.tbb-wb__last{display:inline-block;margin:8px 0 2px;font-weight:700;font-size:.9rem;color:#1B3A5C;text-decoration:none}
.tbb-wb__last:hover{text-decoration:underline}
.tbb-wb__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.tbb-wb__card{display:flex;flex-direction:column;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;background:#fff}
.tbb-wb__card:hover{border-color:#1B3A5C}
.tbb-wb__card.is-gone{opacity:.6}
.tbb-wb__thumb{height:96px;background:#e2e8f0 center/cover no-repeat}
.tbb-wb__body{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px}
.tbb-wb__name{font-size:.8rem;font-weight:700;color:#0f172a;line-height:1.3}
.tbb-wb__price{font-size:.9rem;font-weight:900;color:#C41E3A}
.tbb-wb__flag{align-self:flex-start;margin-top:3px;padding:2px 8px;border-radius:999px;background:#eef2f7;color:#334155;font-size:.7rem;font-weight:800}
.tbb-wb__flag--drop{background:#dcfce7;color:#14532d}
.tbb-wb__flag--gone{background:#f1f5f9;color:#475569}
@media (max-width:820px){
  .tbb-wb{margin:12px 16px 4px;padding:14px}
  .tbb-wb__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:4px}
  .tbb-wb__card{flex:0 0 46%;scroll-snap-align:start}
}

/* ── Inventory card: one button, compact body ───────────────────────────── */
#inv2-grid .inv2-card-photo{height:230px}
#inv2-grid .inv2-card-body{padding:14px 16px 16px}
#inv2-grid .inv2-card-tags{margin:0 0 8px}
#inv2-grid .inv2-card-payment{margin:0 0 10px;padding:0;background:none;border:0}
#inv2-grid .inv2-payment-est{font-size:.95rem}
#inv2-grid .inv2-payment-note{font-size:.72rem;color:#64748b;margin:2px 0 0}
#inv2-grid .inv2-card-preapprove{display:inline-block;margin-left:6px;font-size:.8rem;font-weight:700;color:#1B3A5C;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;min-height:24px}
#inv2-grid .inv2-card-preapprove:hover{color:#C41E3A}
#inv2-grid .tbb-card-inspected{font-size:.74rem;margin:0 0 10px}

/* ── Inventory: sticky results bar, end of list ─────────────────────────── */
@media (min-width:821px){
  .inv2-toolbar{position:sticky;top:12px;z-index:30}
  body.admin-bar .inv2-toolbar{top:44px}
}
.inv2-end{margin:26px 0 8px;padding:18px 20px;text-align:center;background:#f6f9fc;border:1px dashed #B9C9DC;border-radius:14px;color:#1e293b}
.inv2-end strong{display:block;font-size:1rem;margin-bottom:4px}
.inv2-end a{font-weight:700;color:#1B3A5C}

/* ── Reels (listing page) ───────────────────────────────────────────────── */
.tbb-reel__frame{position:relative;width:100%;max-width:380px;aspect-ratio:9/16;margin:0 auto;border-radius:16px;overflow:hidden;background:#0B2447}
.tbb-reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tbb-reel__play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#0B2447 center/cover no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff}
.tbb-reel__play:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.15),rgba(2,6,23,.55))}
.tbb-reel__icon{position:relative;width:76px;height:76px;border-radius:50%;background:rgba(196,30,58,.95);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tbb-reel__icon:after{content:"";position:absolute;left:30px;top:22px;border-left:24px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}
.tbb-reel__label{position:relative;font:800 1rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.tbb-reel__play:focus-visible{outline:3px solid #fbbf24;outline-offset:-3px}

/* ── Listing rail: one primary action, the rest quieter ─────────────────── */
.rail-ctas.tbb-one-primary .rail-action:not(.tbb-primary){background:#fff;color:#1B3A5C;border:1px solid #CBD7E4;box-shadow:none;padding-top:10px;padding-bottom:10px}
.rail-ctas.tbb-one-primary .rail-action:not(.tbb-primary) .ico{stroke:#1B3A5C}
.rail-ctas.tbb-one-primary .rail-action:not(.tbb-primary) small{color:#475569}
.rail-ctas.tbb-one-primary .rail-action:not(.tbb-primary):hover{border-color:#1B3A5C;background:#f6f9fc}
.rail-ctas .tbb-more{display:none}
.rail-ctas.tbb-collapsed .tbb-more{display:flex}
.rail-ctas.tbb-collapsed .rail-action.tbb-extra{display:none}
.rail-more-btn{width:100%;margin-top:6px;padding:10px;border:0;background:none;color:#1B3A5C;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px}

/* ── One launcher (flagged) ─────────────────────────────────────────────── */
html.tbb-one-launcher [id^="widget-button-"]{position:fixed!important;left:-9999px!important;top:auto!important}
html.tbb-one-launcher .tbb-tt{display:none!important}
.tbb-launch{position:fixed;right:20px;bottom:20px;z-index:2147482999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.tbb-launch__btn{min-height:52px;padding:0 22px;border:0;border-radius:999px;background:#C41E3A;color:#fff;font-weight:800;font-size:1rem;box-shadow:0 10px 30px rgba(196,30,58,.35);cursor:pointer}
.tbb-launch__menu{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:16px;padding:10px;box-shadow:0 18px 50px rgba(2,6,23,.25);min-width:240px}
.tbb-launch__menu[hidden]{display:none}
.tbb-launch__opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#0f172a;font-weight:800;font-size:.95rem;cursor:pointer;min-height:52px}
.tbb-launch__opt small{font-weight:500;font-size:.78rem;color:#475569}
.tbb-launch__opt:hover{border-color:#1B3A5C;background:#f6f9fc}
@media (max-width:640px){.tbb-launch{right:14px;bottom:14px}}

@media (prefers-reduced-motion:reduce){.tbb-ta,.tbb-wb,.tbb-launch *{transition:none!important}}

/* ── Exit guarantee (2026-09-16) ────────────────────────────────────────── */
.tbb-exit-pill{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:2147483647;display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#0F2439;color:#fff;font:700 .95rem/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 6px 22px rgba(2,6,23,.45);cursor:pointer}
.tbb-exit-pill[hidden]{display:none}
.tbb-exit-pill:hover,.tbb-exit-pill:focus-visible{background:#C41E3A;outline:3px solid #fff;outline-offset:2px}
body.admin-bar .tbb-exit-pill{top:max(58px,env(safe-area-inset-top))}
html.tbb-overlay-open .tbb-tt{display:none!important}
/* Listing exit offer on short phones: the sheet scrolls inside itself so its × stays reachable. */
@media (max-width:480px){#bbi-exit .bbi-exit__modal{max-height:85vh;max-height:85dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}}
@media (max-height:640px){#bbi-exit .bbi-exit__modal{max-height:90vh;overflow-y:auto}}
/* Video library lightbox: tall vertical videos never push the × off screen. */
#vlb-lb{overflow-y:auto}
#vlb-lb .vlb-lb-inner.vertical{max-width:min(420px,calc((100vh - 140px) * .5625))}
/* Lead / booking dialogs: their own × follows the scroll instead of scrolling away. */
.bbi-modal .bbi-modal-close,#vpmod-overlay #vpmod-close{position:sticky;top:0;float:right;z-index:3}
/* Barletta reel overlay */
.tbb-reel-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:56px 12px 12px}
.tbb-reel-overlay video{max-width:92vw;max-height:80vh;border-radius:8px;background:#000}
.tbb-reel-overlay__close{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;min-width:44px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:#0F2439;font:700 .95rem/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer}