/* Blue Biz Inquiry — logic UI only (form, shortlist, modal, buttons) */

.bb-app {
 --navy: #0f172a;
 --blue: #2563eb;
 --cyan: #06b6d4;
 --muted: #64748b;
 font-family: "Noto Sans", Arial, sans-serif;
 color: var(--navy);
 font-size: 14px;
 line-height: 1.55;
 box-sizing: border-box;
}
.bb-app *,
.bb-add-inquiry,
.bb-rfq,
.bb-selected,
.bb-layer {
 box-sizing: border-box;
}
.bb-app h1,
.bb-app h2,
.bb-app h3,
.bb-app p,
.bb-selected h3,
.bb-selected p,
.bb-rfq p {
 margin: 0 0 16px;
 font-family: inherit;
}
.bb-app button,
.bb-app input,
.bb-app select,
.bb-app textarea,
.bb-add-inquiry,
.bb-rfq button,
.bb-rfq input,
.bb-rfq select,
.bb-rfq textarea {
 font: inherit;
}
.bb-app button,
.bb-app a,
.bb-add-inquiry,
.bb-button {
 cursor: pointer;
}
.bb-app button,
.bb-add-inquiry {
 border: 0;
 background: transparent;
 color: inherit;
}
.bb-app a {
 text-decoration: none;
}
.bb-app button:focus-visible,
.bb-app a:focus-visible,
.bb-app input:focus-visible,
.bb-app textarea:focus-visible,
.bb-app select:focus-visible,
.bb-app summary:focus-visible,
.bb-add-inquiry:focus-visible,
.bb-rfq input:focus-visible,
.bb-rfq textarea:focus-visible,
.bb-rfq select:focus-visible {
 outline: 3px solid #38bdf8;
 outline-offset: 3px;
}
.bb-app img,
.bb-selected img,
.bb-layer img {
 max-width: 100%;
 display: block;
}

.bb-button,
.bb-add-inquiry {
 background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
 color: white !important;
 border-radius: 9px;
 padding: 12px 20px;
 display: inline-block;
 font-weight: 600;
 text-align: center;
 border: 0 !important;
}
.bb-add-inquiry {
 font-size: 12px !important;
 padding: 10px 16px !important;
}
.bb-dark {
 background: #0f172a !important;
}
.bb-rfq .bb-submit {
 background: linear-gradient(90deg, #2563eb, #7c3aed) !important;
 border-radius: 30px;
 margin-top: 22px;
 width: 100%;
}

.bb-notice {
 padding: 16px;
 border: 1px solid #fde68a;
 background: #fffbeb;
 border-radius: 8px;
 color: #92400e;
 font-size: 13px;
}
.bb-notice code {
 font-size: 12px;
}

.bb-floating {
 position: fixed;
 right: 24px;
 bottom: 24px;
 z-index: 9000;
 background: #0f172a !important;
 color: white !important;
 border: 0;
 border-radius: 30px;
 padding: 14px 20px;
 box-shadow: 0 8px 25px #0f172a33;
}
.bb-app.bb-cart-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 9px 15px;
 border: 1px solid #e2e8f0;
 border-radius: 9999px;
 background: #f8fafc !important;
 color: #1d4ed8 !important;
 line-height: 1;
 transition: background-color 0.2s, border-color 0.2s;
}
.bb-app.bb-cart-icon:hover {
 background: #eff6ff !important;
 border-color: #bfdbfe;
}
.bb-cart-icon .bb-cart-icon-img {
 display: block;
 width: 16px;
 height: 17px;
}
.bb-cart-icon .bb-cart-count {
 min-width: 18px;
 height: 18px;
 margin: -16px -9px 0 -4px;
 padding: 0 5px;
 box-sizing: border-box;
 border: 2px solid #f8fafc;
 border-radius: 9999px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 font-weight: 700;
 line-height: 1;
}
.bb-cart-icon .bb-cart-count[data-count="0"] {
 visibility: hidden;
}
.bb-inquiry-shortlist-trigger:not(.bb-floating):not(.bb-cart-icon) {
 background: #0f172a !important;
 color: white !important;
 border-radius: 30px;
 padding: 12px 18px;
}
.bb-cart-count {
 background: #2563eb;
 color: white;
 border-radius: 20px;
 padding: 2px 8px;
 margin-left: 6px;
}

/* Selected SKUs on inquiry page */
.bb-selected {
 background: #eff6ff;
 border: 1px solid #dbeafe;
 padding: 16px;
 border-radius: 10px;
 margin: 0 0 8px;
}
.bb-selected h3 {
 font-size: 13px;
 color: #2563eb;
 margin-bottom: 12px;
}
.bb-selected > div {
 display: flex;
 gap: 12px;
 align-items: center;
 margin: 10px 0;
}
.bb-selected img {
 width: 40px;
 height: 40px;
 object-fit: contain;
 background: white;
 border-radius: 5px;
}
.bb-selected span {
 flex: 1;
}
.bb-selected strong {
 font-size: 12px;
}
.bb-selected small {
 display: block;
 font-size: 10px;
 color: #64748b;
}
.bb-selected b {
 font-size: 12px;
}
.bb-form-note {
 color: #64748b;
 font-size: 12px;
 margin: 8px 0 16px !important;
}

/* RFQ form */
.bb-rfq {
 margin-top: 8px;
}
.bb-rfq label {
 display: block;
 font-size: 12px;
 font-weight: 600;
 color: #0f172a;
}
.bb-rfq label > input:not([type="checkbox"]),
.bb-rfq label > select,
.bb-rfq label > textarea {
 width: 100%;
 display: block;
 margin-top: 7px;
 font-size: 13px;
 font-weight: 400;
 min-width: 0;
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 background: white;
 color: #0f172a;
 padding: 11px 12px;
}
.bb-form-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
}
.bb-rfq fieldset {
 border: 0;
 padding: 0;
 margin: 24px 0;
}
.bb-rfq legend {
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 10px;
}
.bb-checks {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 18px;
}
.bb-checks label {
 display: flex;
 align-items: center;
 gap: 7px;
 font-weight: 400 !important;
 font-size: 11px !important;
}
.bb-checks input {
 accent-color: #2563eb;
}
.bb-export {
 border: 1px solid #e2e8f0;
 border-radius: 10px;
 padding: 16px;
 margin: 20px 0;
}
.bb-export summary {
 cursor: pointer;
 font-size: 13px;
 font-weight: 600;
 margin-bottom: 16px;
}
.bb-export summary small {
 display: block;
 font-weight: 400;
 color: #64748b;
}
.bb-feedback {
 margin: 14px 0 !important;
 color: #2563eb;
}
.bb-trap {
 position: absolute;
 left: -10000px;
 width: 1px;
 height: 1px;
 overflow: hidden;
}
.bb-app button:disabled,
.bb-button:disabled {
 opacity: 0.4;
 cursor: default;
}

/* Overlay layer, modal, drawer */
.bb-layer[hidden] {
 display: none !important;
}
.bb-layer {
 position: fixed;
 inset: 0;
 z-index: 100000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
 font-family: "Noto Sans", Arial, sans-serif;
 color: #0f172a;
 font-size: 14px;
 line-height: 1.55;
}
.bb-shade {
 position: absolute;
 inset: 0;
 background: #0f172ab3;
 backdrop-filter: blur(4px);
}
.bb-lock {
 overflow: hidden;
}

.bb-catalog-search {
 width: 100%;
}
.bb-search {
 width: 100%;
 max-width: 672px;
 margin: 0 auto;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 gap: 0;
 padding: 6px;
 border-radius: 9999px;
 background: white;
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 font-family: "Noto Sans", Arial, sans-serif;
}
.bb-search:focus-within {
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(96, 165, 250, 0.45);
}
.bb-search .bb-search-icon {
 flex: 0 0 20px;
 width: 20px;
 height: 20px;
 margin: 0 8px 0 16px;
}
.bb-app .bb-search-label {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
}
.bb-search.bb-app input[type="search"] {
 flex: 1 1 auto;
 min-width: 0;
 height: auto;
 margin: 0;
 padding: 10px 8px 10px 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 outline: none;
 color: #0f172a;
 font-size: 16px;
 line-height: 22px;
 appearance: none;
}
.bb-search input[type="search"]::placeholder {
 color: #94a3b8;
}
.bb-search input[type="search"]::-webkit-search-cancel-button {
 display: none;
}
.bb-app .bb-search-clear {
 flex: 0 0 32px;
 width: 32px;
 height: 32px;
 margin-right: 6px;
 padding: 0;
 border-radius: 50%;
 color: #94a3b8;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
.bb-app .bb-search-clear[hidden] {
 display: none;
}
.bb-app .bb-search-clear:hover {
 background: #f1f5f9;
 color: #475569;
}
.bb-app .bb-search-submit {
 flex: 0 0 auto;
 padding: 10px 24px;
 border-radius: 9999px;
 background: linear-gradient(130deg, #0052d4 0%, #4364f7 50%, #8c52ff 100%);
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 color: white;
 font-size: 14px;
 font-weight: 600;
 line-height: 20px;
 transition: filter 0.2s;
}
.bb-app .bb-search-submit:hover {
 filter: brightness(1.08);
}
.bb-catalog-title {
 scroll-margin-top: 120px;
}
.bb-empty-results {
 padding: 48px 24px;
 border: 1px dashed #cbd5e1;
 border-radius: 16px;
 background: white;
 color: #475569;
 font-family: "Noto Sans", Arial, sans-serif;
 font-size: 15px;
 line-height: 24px;
 text-align: center;
}
.bb-empty-results strong {
 display: block;
 margin-bottom: 6px;
 color: #0f172a;
 font-size: 18px;
}
.bb-empty-results a {
 color: #2563eb;
 font-weight: 600;
 text-decoration: underline;
}
@media (max-width: 767px) {
 .bb-search .bb-search-icon {
  margin-left: 10px;
 }
 .bb-search.bb-app input[type="search"] {
  font-size: 15px;
 }
 .bb-app .bb-search-submit {
  padding: 10px 16px;
 }
 .bb-catalog-title {
  scroll-margin-top: 24px;
 }
}

.bb-age {
 position: relative;
 width: min(540px, 100%);
 max-height: 90dvh;
 overflow: auto;
 box-sizing: border-box;
 padding: 20px 40px 32px;
 border: 1px solid #f1f5f9;
 border-radius: 24px;
 background: white;
 box-shadow: 0 25px 60px -15px rgba(8, 18, 37, 0.45);
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}
.bb-app .bb-age-close {
 align-self: flex-end;
 margin-right: -20px;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 color: #94a3b8;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0;
}
.bb-app .bb-age-close:hover {
 background: #f1f5f9;
 color: #475569;
}
.bb-age-close .bb-icon {
 width: 20px;
 height: 20px;
}
.bb-layer .bb-age-logo {
 width: 84px;
 height: 56px;
 object-fit: contain;
 margin: -16px 0 48px;
}
.bb-app .bb-age-title {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
}
.bb-app .bb-age-notice {
 max-width: 420px;
 margin: 0 0 72px;
 font-size: 14px;
 font-weight: 500;
 line-height: 19.5px;
 letter-spacing: 0.6px;
 text-transform: uppercase;
 color: #0f172a;
}
.bb-age-actions {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
}
.bb-app .bb-age-confirm {
 width: 100%;
 min-height: 52px;
 border-radius: 9999px;
 background: linear-gradient(135deg, #0052d4 0%, #4364f7 100%);
 box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -4px rgba(37, 99, 235, 0.3);
 color: white;
 font-size: 16px;
 font-weight: 700;
 line-height: 24px;
 text-transform: uppercase;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 14px 24px;
 transition: transform 0.2s, box-shadow 0.2s;
}
.bb-app .bb-age-confirm:hover {
 transform: translateY(-1px);
 box-shadow: 0 14px 20px -4px rgba(37, 99, 235, 0.4), 0 4px 6px -4px rgba(37, 99, 235, 0.3);
}
.bb-app .bb-age-cancel {
 padding: 6px 12px;
 color: #94a3b8;
 font-size: 14px;
 font-weight: 500;
 line-height: 20px;
}
.bb-app .bb-age-cancel:hover {
 color: #475569;
}
.bb-app .bb-age-legal {
 width: 100%;
 margin: 24px 0 0;
 padding-top: 13px;
 border-top: 1px solid #f1f5f9;
 font-size: 10px;
 line-height: 15px;
 color: #94a3b8;
}
@media (max-width: 767px) {
 .bb-age {
  padding: 16px 24px 24px;
  border-radius: 20px;
 }
 .bb-app .bb-age-close {
  margin-right: -8px;
 }
 .bb-layer .bb-age-logo {
  margin: -8px 0 32px;
 }
 .bb-app .bb-age-notice {
  margin-bottom: 40px;
  font-size: 13px;
 }
 .bb-app .bb-age-confirm {
  font-size: 15px;
 }
}

.bb-modal {
 position: relative;
 background: white;
 border-radius: 16px;
 overflow: auto;
 width: min(900px, 100%);
 max-height: 90dvh;
 box-shadow: 0 20px 90px #0004;
 display: grid;
 grid-template-columns: 42% 58%;
 grid-template-rows: auto 1fr;
 max-width: 896px;
 min-height: 620px;
}
.bb-modal header,
.bb-drawer header {
 background: #0f172a;
 color: white;
 padding: 20px 24px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 16px;
}
.bb-modal header {
 grid-column: 2;
 grid-row: 1;
}
.bb-modal header h2 {
 font-size: 22px;
 margin: 0;
}
.bb-modal header button,
.bb-drawer header button,
.bb-gallery-controls button,
.bb-qty button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 auto;
 padding: 0;
 line-height: 1;
}
.bb-icon {
 display: block;
 width: 16px;
 height: 16px;
 pointer-events: none;
}
.bb-modal header button,
.bb-drawer header button {
 color: white;
 border: 1px solid #475569;
 border-radius: 50%;
 height: 32px;
 width: 32px;
 background: transparent;
}
.bb-modal header button:hover,
.bb-drawer header button:hover {
 background: #ffffff1a;
}
.bb-modal-body {
 display: contents;
}
.bb-gallery {
 grid-column: 1;
 grid-row: 1 / 3;
 background: linear-gradient(140deg, #f8fafc, #eff6ff);
 border-radius: 16px 0 0 16px;
 padding: 40px 24px 20px;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.bb-gallery img {
 width: 100%;
 height: 290px;
 object-fit: contain;
}
.bb-gallery-controls {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 25px;
 font-size: 12px;
 color: #64748b;
}
.bb-gallery-controls button {
 height: 34px;
 width: 34px;
 border-radius: 50%;
 background: white;
 box-shadow: 0 2px 8px #0001;
 color: #0f172a;
 border: 0;
}
.bb-gallery-controls .bb-icon {
 width: 18px;
 height: 18px;
}
.bb-product-info {
 grid-column: 2;
 grid-row: 2;
 padding: 24px;
}
.bb-product-info:before {
 content: "";
 display: block;
 width: 64px;
 height: 4px;
 border-radius: 3px;
 background: linear-gradient(90deg, #2563eb, #06b6d4);
 margin: 8px 0 24px;
}
.bb-meta {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
}
.bb-meta > div {
 background: #f8fafc;
 border: 1px solid #e2e8f0;
 padding: 14px;
 border-radius: 9px;
}
.bb-meta small {
 display: block;
 text-transform: uppercase;
 font-size: 10px;
 letter-spacing: 0.8px;
 color: #64748b;
 margin-bottom: 6px;
}
.bb-meta strong {
 font-size: 13px;
}
.bb-certs {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin: 16px 0;
}
.bb-certs span {
 padding: 5px 8px;
 border: 1px solid #dbeafe;
 border-radius: 6px;
 color: #2563eb;
 font-size: 11px;
}
.bb-product-info > p {
 margin-top: 16px;
 color: #64748b;
 font-size: 12px;
}
.bb-product-info > .bb-button {
 display: block;
 margin-top: 12px;
 width: 100%;
}

.bb-drawer {
 position: absolute;
 right: 0;
 top: 0;
 height: 100dvh;
 width: min(410px, 100%);
 background: white;
 display: flex;
 flex-direction: column;
 box-shadow: -15px 0 50px #0002;
}
.bb-drawer h2 {
 font-size: 13px;
 letter-spacing: 0.8px;
 margin: 0;
}
.bb-drawer-items {
 flex: 1;
 overflow: auto;
 padding: 20px;
}
.bb-cart-item {
 display: grid;
 grid-template-columns: 65px 1fr;
 gap: 16px;
 padding: 16px 0;
 border-bottom: 1px solid #e2e8f0;
}
.bb-cart-item img {
 height: 75px;
 width: 65px;
 object-fit: contain;
 border-radius: 8px;
 background: #f8fafc;
}
.bb-cart-item strong {
 font-size: 13px;
}
.bb-cart-item small {
 display: block;
 color: #64748b;
 font-size: 11px;
}
.bb-qty {
 display: flex;
 align-items: center;
 gap: 14px;
 margin: 12px 0;
}
.bb-qty button {
 border: 1px solid #e2e8f0;
 border-radius: 5px;
 height: 28px;
 width: 28px;
 background: white;
 color: #0f172a;
}
.bb-qty .bb-icon {
 width: 14px;
 height: 14px;
}
.bb-qty button:last-child {
 margin-left: auto;
 color: #ef4444;
}
.bb-cart-item details {
 font-size: 11px;
 color: #64748b;
}
.bb-cart-item textarea {
 width: 100%;
 margin-top: 8px;
 font-size: 12px;
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 padding: 8px;
}
.bb-drawer footer {
 padding: 20px;
 border-top: 1px solid #e2e8f0;
}
.bb-drawer footer p {
 display: flex;
 justify-content: space-between;
 color: #64748b;
 font-size: 12px;
 margin: 0 0 12px;
}
.bb-drawer footer .bb-button {
 width: 100%;
}
.bb-more {
 display: block;
 width: 100%;
 margin-top: 12px;
 background: transparent;
 border: 0;
 color: #64748b;
 padding: 8px;
}

@media (max-width: 767px) {
 .bb-form-grid {
  grid-template-columns: 1fr;
 }
 .bb-layer {
  padding: 12px;
 }
 .bb-modal {
  display: block;
  min-height: 0;
 }
 .bb-modal-body {
  display: flex;
  flex-direction: column;
 }
 .bb-gallery {
  border-radius: 0;
  padding: 20px;
 }
 .bb-gallery img {
  height: 190px;
 }
 .bb-product-info {
  padding: 20px;
 }
 .bb-product-info:before {
  margin-top: 0;
 }
 .bb-modal header {
  display: flex;
 }
 .bb-modal header h2 {
  font-size: 18px;
 }
 .bb-floating {
  right: 14px;
  bottom: 14px;
  font-size: 12px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .bb-app *,
 .bb-layer * {
  scroll-behavior: auto !important;
 }
}