/* ═══════════════════════════════════════════════════════════════
   PepSync B2B Catalog — Flatsome-compatible presentation layer
   ps-catalog.css · NorthcomPepSync
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens (mirrors ps-advisor.css palette) ────────── */
:root {
  --psc-primary:    #1B6CA8;
  --psc-primary-dk: #0B2545;
  --psc-accent:     #00B4D8;
  --psc-surface:    #ffffff;
  --psc-bg:         #f4f7fb;
  --psc-border:     #d8e2ef;
  --psc-text:       #1a2333;
  --psc-muted:      #64748b;
  --psc-radius:     8px;
  --psc-radius-sm:  5px;
  --psc-shadow:     0 2px 12px rgba(0,0,0,.08);
  --psc-transition: 180ms ease;
}

/* ════════════════════════════════════════════════════════════
   PRICE PILL  — "Pris på forespørsel"
   Appears inside WooCommerce .price container
   ════════════════════════════════════════════════════════════ */

.ps-por-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(27,108,168,.09);
  color: var(--psc-primary);
  border: 1px solid rgba(27,108,168,.22);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  line-height: 1.4;
}

/* Flatsome wraps .price in .price-wrapper — make the pill fit naturally */
.price-wrapper .ps-por-badge {
  margin: 4px 0 2px;
}

/* ════════════════════════════════════════════════════════════
   LOOP CARD: SERIES BADGE
   Rendered by render_series_badge() inside .price-wrapper
   ════════════════════════════════════════════════════════════ */

.ps-loop-series-badge {
  margin-bottom: 4px;
  line-height: 1;
}

.ps-series-tag {
  display: inline-block;
  background: var(--psc-bg);
  color: var(--psc-muted);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-sm);
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ════════════════════════════════════════════════════════════
   LOOP CARD: INQUIRY BUTTON
   Rendered by render_loop_btn() inside flatsome_product_box_after
   (inside .box-text, same position as Flatsome's Add-to-Cart button)
   ════════════════════════════════════════════════════════════ */

.ps-loop-inquiry-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--psc-primary) !important;
  color: #fff !important;
  border: 2px solid var(--psc-primary) !important;
  border-radius: var(--psc-radius) !important;
  padding: 9px 14px !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: background var(--psc-transition), border-color var(--psc-transition), transform var(--psc-transition);
  margin-top: 8px;
  line-height: 1.4;
}

.ps-loop-inquiry-btn:hover,
.ps-loop-inquiry-btn:focus {
  background: var(--psc-primary-dk) !important;
  border-color: var(--psc-primary-dk) !important;
  color: #fff !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

.ps-loop-inquiry-btn:active {
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   SINGLE PRODUCT: INQUIRY CTA BOX
   Renders at woocommerce_single_product_summary priority 30
   ════════════════════════════════════════════════════════════ */

.ps-b2b-cta {
  background: var(--psc-surface);
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 16px 0 12px;
  box-shadow: var(--psc-shadow);
}

.ps-b2b-por-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.ps-b2b-por-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--psc-primary);
  background: rgba(27,108,168,.08);
  border: 1px solid rgba(27,108,168,.2);
  border-radius: 999px;
  padding: 5px 14px;
  letter-spacing: .02em;
}

.ps-b2b-sku {
  font-size: .8rem;
  color: var(--psc-muted);
  font-family: monospace, monospace;
}

.ps-b2b-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Primary CTA — overrides Flatsome .button.alt colours */
.ps-b2b-primary-btn.button.alt,
.ps-b2b-primary-btn {
  flex: 1 1 180px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--psc-primary) !important;
  color: #fff !important;
  border: 2px solid var(--psc-primary) !important;
  border-radius: var(--psc-radius) !important;
  padding: 13px 20px !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background var(--psc-transition), border-color var(--psc-transition), transform var(--psc-transition);
  cursor: pointer;
  text-align: center;
}

.ps-b2b-primary-btn.button.alt:hover,
.ps-b2b-primary-btn:hover {
  background: var(--psc-primary-dk) !important;
  border-color: var(--psc-primary-dk) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Secondary CTA */
.ps-b2b-secondary-btn.button,
.ps-b2b-secondary-btn {
  flex: 0 1 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent !important;
  color: var(--psc-primary) !important;
  border: 2px solid var(--psc-primary) !important;
  border-radius: var(--psc-radius) !important;
  padding: 13px 18px !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background var(--psc-transition), color var(--psc-transition);
  cursor: pointer;
}

.ps-b2b-secondary-btn.button:hover,
.ps-b2b-secondary-btn:hover {
  background: rgba(27,108,168,.07) !important;
  color: var(--psc-primary-dk) !important;
}

.ps-b2b-tagline {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--psc-muted);
  margin: 0;
  line-height: 1.4;
}

.ps-b2b-tagline svg {
  flex-shrink: 0;
  color: var(--psc-primary);
}

/* ════════════════════════════════════════════════════════════
   SINGLE PRODUCT: PDF DATASHEET SECTION
   Renders at woocommerce_single_product_summary priority 55
   ════════════════════════════════════════════════════════════ */

.ps-pdf-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--psc-bg);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  margin: 10px 0;
  font-size: .85rem;
}

.ps-pdf-section-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--psc-muted);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.ps-pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--psc-primary) !important;
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(27,108,168,.3);
  padding-bottom: 1px;
  transition: color var(--psc-transition), border-color var(--psc-transition);
}

.ps-pdf-link:hover {
  color: var(--psc-primary-dk) !important;
  border-bottom-color: var(--psc-primary-dk);
}

/* ════════════════════════════════════════════════════════════
   SHOP FILTER BAR
   Renders above the product grid on shop/category pages
   ════════════════════════════════════════════════════════════ */

.ps-filter-bar {
  width: 100%;
  margin-bottom: 24px;
  overflow: hidden;
}

.ps-filter-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ps-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 15px;
  background: var(--psc-surface);
  color: var(--psc-text) !important;
  border: 1.5px solid var(--psc-border);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background var(--psc-transition), border-color var(--psc-transition), color var(--psc-transition);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
}

.ps-filter-pill:hover {
  background: var(--psc-bg);
  border-color: var(--psc-primary);
  color: var(--psc-primary) !important;
}

.ps-filter-pill.ps-pill--active {
  background: var(--psc-primary);
  border-color: var(--psc-primary);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(27,108,168,.28);
}

.ps-pill-count {
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: .75rem;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  line-height: 1.5;
}

.ps-filter-pill:not(.ps-pill--active) .ps-pill-count {
  background: var(--psc-bg);
  color: var(--psc-muted);
}

/* ════════════════════════════════════════════════════════════
   FLATSOME OVERRIDES
   These rules target Flatsome-specific classes to ensure our
   elements integrate cleanly with the theme's product grid.
   ════════════════════════════════════════════════════════════ */

/* Override northcom-studio's blanket .price { display:none !important }.
   Higher specificity wins when both rules use !important. */
.ps-peplink-catalog span.price,
.ps-peplink-product span.price {
  display: inline !important;
  visibility: visible !important;
}

/* Remove Flatsome's sale badge colour conflict with our price pill */
.ps-peplink-product .woocommerce-Price-amount,
.ps-peplink-product .price del,
.ps-peplink-product .price ins {
  display: none;
}

/* Ensure the "Pris på forespørsel" pill shows correctly in single product summary */
.ps-peplink-product .summary .price .ps-por-badge {
  display: inline-flex;
  font-size: .9rem;
  padding: 6px 16px;
  margin: 4px 0 6px;
}

/* On product cards: keep box-text height consistent when badge + price pill present */
.ps-peplink-catalog .product-small .box-text {
  min-height: 0;
}

/* Flatsome product card: align inquiry button to bottom of card */
.ps-peplink-catalog .product-small .box-text .ps-loop-inquiry-btn {
  margin-top: auto;
}

/* Remove Flatsome's default product rating star gap when there are no reviews */
.ps-peplink-catalog .star-rating {
  display: none;
}

/* Category header banner tweaks — integrate with Flatsome's banner style */
.ps-peplink-catalog .woocommerce-products-header__title,
.ps-peplink-catalog .woocommerce-products-header h1 {
  color: var(--psc-primary-dk);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .ps-b2b-cta {
    padding: 16px;
  }

  .ps-b2b-actions {
    flex-direction: column;
  }

  .ps-b2b-primary-btn.button.alt,
  .ps-b2b-primary-btn,
  .ps-b2b-secondary-btn.button,
  .ps-b2b-secondary-btn {
    flex: 1 1 100%;
    text-align: center;
    justify-content: center;
  }

  .ps-filter-bar-inner {
    gap: 6px;
  }

  .ps-filter-pill {
    font-size: .8rem;
    padding: 6px 12px;
  }
}

@media (max-width: 479px) {
  .ps-por-badge {
    font-size: .78rem;
    padding: 3px 10px;
  }
}