/* =====================================================================
   Where-to-buy drawer — slide-in panel for product pages.
   Styles are scoped under .qswtb-* and rely on no globals from the host
   theme other than fonts (Source Sans 3 / Rajdhani fallback chains).
   Mobile is intentionally hidden — desktop-only feature per product spec.
   ===================================================================== */

/* --- Custom select widget (qs-cs-*) --------------------------------------
   Replacement UI for native <select> so options use the host theme font
   instead of the OS native rendering (Chrome/Windows ignores font-family:
   inherit on <option>). Native select keeps state + form submission;
   trigger button + listbox provide the visible UI. Same styles live at
   the top of qs-styles.css for the map.
   ----------------------------------------------------------------------- */
.qs-cs-wrap {
  position: relative; display: inline-flex;
  flex: 1; min-width: 0;
}
.qs-cs-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; border: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
}
/* Reset <button> user-agent + theme defaults so the host class
   (.qswtb-country-select) is the only thing painting the trigger.
   !important wins over `button { ... !important }` rules that some
   WordPress themes apply globally. */
.qs-cs-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  /* Smooth focus ring matching the drawer's red accent. */
  outline-offset: -2px !important;
}
.qs-cs-trigger:focus-visible {
  outline: 2px solid #C20019 !important;
}
.qs-cs-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qs-cs-arrow {
  flex-shrink: 0;
  width: 12px; height: 8px;
  margin-left: 10px;
  color: #555;
  transition: transform 0.15s ease;
  /* Flex-center the SVG inside so it doesn't ride on the text baseline
     (default inline rendering pushes it ~2-3px off vertical center). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qs-cs-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.qs-cs-trigger[aria-expanded="true"] .qs-cs-arrow {
  transform: rotate(180deg);
}
.qs-cs-list {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #e8e8eb;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  list-style: none;
  margin: 0; padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
  z-index: 9999;
  font-family: inherit;
}
.qs-cs-option {
  padding: 9px 14px;
  font-family: inherit;
  font-size: 14px; line-height: 1.3;
  color: #1a1a1a;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis; overflow: hidden;
}
.qs-cs-option:hover {
  background: #f8f8fa;
  color: #C20019;
}
.qs-cs-option[aria-selected="true"] {
  background: #fef0f1;
  color: #C20019;
  font-weight: 600;
}
.qs-cs-option-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Floating trigger pinned to right edge, vertically centered. Slim vertical
   tab so it doesn't cover product content. font-family: inherit makes the
   tab pick up whatever the host theme uses for buttons — visually matches
   the existing "Where to buy" button in the site header without having to
   declare specific fonts here. */
.qswtb-trigger {
  /* `right: -8px` parks the trigger 8px past the viewport edge so its right
     side is always tucked off-screen. Animation then slides it leftward via
     `transform: translateX`, which is GPU-composited (no layout reflow per
     frame) — smoother than the `padding` approach. Because the right edge
     lives off-screen, no gap can appear during the slide. */
  position: fixed; right: -8px; top: 50%;
  transform: translateY(-50%);
  background: #C20019; color: #fff !important;
  border: none; padding: 40px 22px;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  box-shadow: -3px 3px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background 0.2s ease;
  animation: qswtbSlide 2.6s ease-in-out infinite;
  will-change: transform;
}
.qswtb-trigger:hover {
  background: #A0000F;
  /* Slide fully on-screen — translate equal to the off-screen offset so the
     right edge meets the viewport edge exactly. Pauses the loop animation
     so hover feels stable, not jittery. */
  transform: translate(-8px, -50%);
  animation: none;
}
.qswtb-trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
@keyframes qswtbSlide {
  0%, 100% { transform: translate(0, -50%); }
  50%      { transform: translate(-4px, -50%); }
}
/* Honour OS-level reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .qswtb-trigger { animation: none; }
}
/* Vertical writing mode for the label. rotate(180deg) flips it so it reads
   bottom-to-top, which feels more natural on a right-edge tab. */
.qswtb-trigger-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 15px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase;
}

.qswtb-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9100;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.qswtb-overlay.qswtb-overlay-open { opacity: 1; }

.qswtb-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: #fff;
  z-index: 9200;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex; flex-direction: column;
  /* Inherit theme fonts (Rajdhani for headings, body sans for the rest) so
     the drawer reads as part of qubicsystem.com instead of an injected widget. */
  font-family: inherit;
  color: #1a1a1a;
  overflow-y: auto;
}
.qswtb-drawer.qswtb-drawer-open { transform: translateX(0); }

.qswtb-preview-banner {
  background: #FFF8E1;
  border-bottom: 1px solid #FFD54F;
  padding: 10px 24px;
  font-size: 12px; color: #6b4f00;
}
.qswtb-preview-banner strong { color: #8a5a00; }

/* Header — matches the black/red banner used at the bottom of qubicsystem.com
   product pages ("Find distributor in your country"). Sharp corners, bold
   uppercase, red accent strip at the bottom for identity continuity. All
   colour rules use !important to win against host-theme h2/h3 defaults that
   would otherwise paint the title dark-on-dark. */
.qswtb-head {
  position: relative;
  background: #111 !important;
  padding: 26px 56px 22px 26px;
  border-bottom: 3px solid #C20019;
}
.qswtb-head .qswtb-subtitle {
  display: block;
  font-family: inherit;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: #b8b8bb !important;
  margin: 0 0 8px;
}
.qswtb-head .qswtb-title {
  margin: 0;
  font-family: inherit;
  font-size: 24px; font-weight: 700; line-height: 1.05;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff !important;
}
.qswtb-close {
  position: absolute; top: 18px; right: 16px;
  background: transparent; border: none; color: #fff !important;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.qswtb-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff !important; }

.qswtb-country-row {
  padding: 14px 24px;
  background: #f8f8fa;
  border-bottom: 1px solid #ececef;
  display: flex; align-items: center; gap: 12px;
}
.qswtb-country-label {
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: #555 !important;
  white-space: nowrap;
}
/* Match .qsdist-filter-bar select from the map plugin — same height (42px),
   padding, light alt background, 6px corners. Lets users feel the drawer is
   part of the same map family. */
/* !important on visual props so the styled <button> trigger that the
   custom-select widget renders on top isn't overridden by host-theme
   `button { ... !important }` global rules. White bg gives the dropdown
   visible contrast with the grey country-row (#f8f8fa) it sits in. */
.qswtb-country-select {
  flex: 1; min-width: 0;
  padding: 10px 14px !important;
  height: 42px !important;
  font-family: inherit !important;
  font-size: 14px !important; line-height: 1 !important;
  font-weight: 500 !important;
  border: 1px solid #d9d9dd !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #1a1a1a !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.qswtb-country-select:hover {
  border-color: #b5b5ba !important;
}
.qswtb-country-select:focus,
.qswtb-country-select[aria-expanded="true"] {
  outline: none !important;
  border-color: #C20019 !important;
  box-shadow: 0 0 0 3px rgba(194, 0, 25, 0.12) !important;
}

/* Both sections sit on grey shelves so distributor cards (white) read as
   floating objects, not embedded list items. Local uses the same #f8f8fa as
   country-row/footer (continuation of the primary secondary tone). Worldwide
   steps one notch darker to reinforce hierarchy: "your country first, the
   rest below". border-top + slightly darker shade do the visual separation. */
.qswtb-section {
  padding: 22px 26px 14px;
  background: #f8f8fa;
}
.qswtb-section .qswtb-row:last-child {
  margin-bottom: 0;
}
.qswtb-section-worldwide {
  background: #f0f0f3;
  border-top: 1px solid #ececef;
}
/* Section title with red left accent bar — same identity move qubicsystem.com
   uses on H2 separators. Black uppercase Rajdhani-style typography. */
.qswtb-section-title {
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: #111 !important;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 3px solid #C20019;
  display: flex; align-items: center; gap: 10px;
  line-height: 1;
}
/* Pill-style count badge — matches .qsdist-dealer-count from the map. Light
   gray background, gray text, full pill rounding. Looks like an annotation,
   not a button. */
.qswtb-count {
  background: #ececef; color: #666 !important;
  padding: 2px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  min-width: 24px; text-align: center;
}

.qswtb-row {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #e8e8eb;
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px; align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Stack CTA + webshop note vertically in the right column. flex-end so
   the smaller webshop label aligns under the right edge of the CTA. */
.qswtb-row-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.qswtb-row:hover {
  border-color: #C20019;
  box-shadow: 0 2px 8px rgba(194, 0, 25, 0.08);
}
.qswtb-row-info { min-width: 0; }
.qswtb-row-name {
  font-family: inherit;
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
  color: #111 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* No flex-wrap — webshop badge must stay on the same row as flag + city.
   When city/country text is long it truncates with ellipsis instead of
   pushing webshop to a new line, which would change row height and make
   the VISIT STORE button look misaligned across rows. min-width: 0 is
   required for the inner text span's overflow to actually clip. */
.qswtb-row-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #666 !important;
  margin-bottom: 8px;
  min-width: 0;
}
.qswtb-row-meta-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qswtb-flag {
  width: 18px; height: 12px;
  border-radius: 1px; object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
/* Webshop note — matches the public map's .qsdist-webshop-badge style:
   cart icon + small uppercase label, no background, no border. Reads as a
   metadata annotation about the row, not a button. Sits below the CTA. */
.qswtb-webshop-note {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  color: #555 !important;
  text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap;
}
.qswtb-cart-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
/* Pill badge — mirrors .qsdist-stock-indicator from the public map exactly:
   same padding, font, letter-spacing, and 110px min-width so the badge has
   visual weight even when the label is short ("Ask" / "In stock"). Dot is a
   ::before pseudo-element so the JS template doesn't need to emit it inline. */
.qswtb-status {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  border-radius: 4px;
  white-space: nowrap;
  min-width: 110px;
}
.qswtb-status::before {
  content: ''; width: 7px; height: 7px;
  border-radius: 50%; flex-shrink: 0;
}
.qswtb-status-green        { background: #E8F5E9; color: #1B5E20; }
.qswtb-status-green::before { background: #28A745; }
.qswtb-status-ask          { background: #E1F5FE; color: #01579B; }
.qswtb-status-ask::before  { background: #19A0DC; }

/* CTA — mirrors .qs-btn / .cta-btn from the public map plugin so the drawer
   uses the same button language: normal-case 13px text, 6px radius, light
   border, gentle 0.3px letter-spacing. No uppercase, no chunky weight. */
.qswtb-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.qswtb-cta-primary {
  background: #C20019; color: #fff !important;
  border: 1px solid #C20019;
}
.qswtb-cta-primary:hover {
  background: #9B0014; border-color: #9B0014;
  color: #fff !important;
}
.qswtb-cta-outline {
  background: transparent; color: #C20019 !important;
  border: 1px solid #C20019;
}
.qswtb-cta-outline:hover { background: #C20019; color: #fff !important; }

.qswtb-empty {
  margin: 8px 26px 4px;
  padding: 16px;
  background: #f8f8fa; border: 1px dashed #d0d0d4; border-radius: 6px;
  font-size: 13px; color: #888; font-style: italic; text-align: center;
}

.qswtb-footer {
  margin-top: auto;
  padding: 22px 26px 26px;
  border-top: 1px solid #ececef;
  background: #f8f8fa;
  text-align: center;
}
.qswtb-footer-text {
  font-family: inherit;
  font-size: 13px; color: #666 !important;
  margin: 0 0 12px;
}

/* Lock body scroll while drawer is open so scroll wheel acts on the drawer
   contents, not the underlying page. */
body.qswtb-noscroll { overflow: hidden; }

/* Mobile: hide the entire feature. Customer on phone gets the existing
   "Where to buy" CTA on the page (links to the public map). The drawer
   layout doesn't fit gracefully under 768px, and the spec is desktop-only. */
@media (max-width: 768px) {
  .qswtb-trigger,
  .qswtb-drawer,
  .qswtb-overlay {
    display: none !important;
  }
}