/* =============================================================
   product-tabs-block.css — Bluworks v2
   Interactive pill-row + feature panel section on /overview.
   Token values resolved from Website/style.css.
   ============================================================= */

/* ── Section ── */
.po-tabs {
  padding: 20px 0 clamp(64px, 8vw, 96px);
  background: #FAFBFD;
}

.po-tabs .container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Pill row ── */
.po-pills-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 40px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px;
}

.po-pills-row::-webkit-scrollbar { display: none; }

@media (max-width: 880px) {
  .po-pills-row { flex-wrap: wrap; }
}

/* ── Single pill ── */
.po-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #FAFBFD;
  border: 1px solid #E4E8F3;
  border-radius: 999px;
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0A0F1E;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
  transition: background 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.po-pill:hover {
  background: #EEF3FF;
  border-color: #1E50E5;
  color: #0A2A8A;
  transform: translateY(-1px);
}

.po-pill.po-pill-active {
  background: #1E50E5;
  border-color: #1E50E5;
  color: #fff;
}

.po-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}

html[dir="rtl"] .po-pill {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .po-pill { transition: none; }
  .po-pill:hover { transform: none; }
}

/* ── Panels ── */
.po-tab-content { display: none; }
.po-tab-content.active { display: block; }

.po-tab-head {
  text-align: center;
  margin-bottom: 40px;
}

.po-tab-head h2 {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #0A0F1E;
  line-height: 1.1;
}

.po-tab-head p {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color: #4B5068;
  margin: 0 auto;
  line-height: 1.55;
  font-weight: 500;
}

html[dir="rtl"] .po-tab-head h2,
html[dir="rtl"] .po-tab-head p {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

/* ── Feature blocks grid ── */
.po-blocks {
  display: grid;
  gap: 20px;
}

.po-blocks-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* When a tab has fewer than 3 (real) feature blocks, keep each card the
 * same width it would have in the 3-column layout, and center the row
 * instead of leaving an empty trailing column. */
.po-blocks-count-1,
.po-blocks-count-2 {
  grid-template-columns: repeat(var(--po-blocks-visible, 1), calc((100% - 40px) / 3));
  justify-content: center;
}
.po-blocks-count-1 { --po-blocks-visible: 1; }
.po-blocks-count-2 { --po-blocks-visible: 2; }

@media (max-width: 920px) {
  .po-blocks-count-1,
  .po-blocks-count-2 {
    grid-template-columns: repeat(var(--po-blocks-visible, 1), calc((100% - 20px) / 2));
  }
}
@media (max-width: 600px) {
  .po-blocks-count-1,
  .po-blocks-count-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) { .po-blocks-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .po-blocks-3 { grid-template-columns: 1fr; }
.po-tab-head p{
font-size:16px;
}
.po-tabs{
padding-bottom:0px;
}
}

/* ── Individual feature block ── */
.po-block {
  background: #FFFFFF;
  border: 1px solid #E4E8F3;
  border-radius: 12px;
  padding: 28px;
  padding-bottom:52px !important;
  display: flex;
  flex-direction: column;
  transition: border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.po-block:hover {
  border-color: #4895FF;
  box-shadow: 0 4px 14px rgba(10, 15, 30, 0.08);
  transform: translateY(-2px);
}

.po-block-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.po-block-icon {
  width: 36px;
  height: 36px;
  background: #EEF3FF;
  color: #1E50E5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.po-block-icon svg {
  width: 18px;
  height: 18px;
}

.po-block h3 {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: #0A0F1E;
  line-height: 1.25;
}

.po-block p {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color: #4B5068;
  margin: 0;
  line-height: 1.55;
  flex-grow: 1;
  font-weight: 500;
}

html[dir="rtl"] .po-block h3,
html[dir="rtl"] .po-block p {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .po-block { transition: none; }
  .po-block:hover { transform: none; }
}

/* ── Panel CTA row ── */
.po-panel-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.po-panel-cta-empty {
  min-height: 46px;
}

/* ── Buttons (scoped to block) ── */
.po-tabs .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
  cursor: pointer;
}

.po-tabs .btn-secondary {
  background: #FFFFFF;
  color: #0A0F1E;
  border-color: #E4E8F3;
}

.po-tabs .btn-secondary:hover {
  background: #FAFBFD;
  border-color: #0A0F1E;
}

.po-tabs .btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.po-tabs .btn:hover .btn-arrow {
  transform: translateX(3px);
}

html[dir="rtl"] .po-tabs .btn-arrow {
  transform: scaleX(-1);
}

html[dir="rtl"] .po-tabs .btn:hover .btn-arrow {
  transform: scaleX(-1) translateX(3px);
}

html[dir="rtl"] .po-tabs .btn {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .po-tabs .btn,
  .po-tabs .btn-arrow { transition: none; }
  .po-tabs .btn:hover .btn-arrow { transform: none; }
}