/* ============================================================
   Weight Calculator Plugin — Styles
   ============================================================ */

/* ── Section wrapper ── */
.wc-calc {
  padding: 10px;
}

.wc-calc__container {
  max-width: 920px;
  margin: 0 auto;
}

/* ── Two-column content ── */
.wc-calc__content {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

/* ── Left column ── */
.wc-calc__scale-section {
  flex: 1;
  min-width: 280px;
  max-width: 420px;
}

.wc-calc__subtitle {
	text-align: center;
	margin-bottom: 0;
}

.wc-calc__scale-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ── SVG Gauge ── */
.wc-calc__gauge-wrap {
  width: 100%;
  max-width: 300px;
}

.wc-calc__gauge-svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
}

/* Tick group rotation — JS handles the transform */
.wc-calc__tick-group {
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: 200px 200px;
}

.wc-calc__gauge-number {
  font-weight: 800;
  fill: #112125;
}

/* ── Slider ── */
.wc-calc__slider {
  width: 100%;
  max-width: 300px;
  padding: 10px 0 20px;
}

.wc-calc__track {
  position: relative;
  height: 6px;
  background: #c0c0c0;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  opacity: 0.4;
}

.wc-calc__track-fill {
  position: absolute;
  inset: 0;
  background: #c0c0c0;
  border-radius: 4px;
  pointer-events: none;
}

/* Tick dots under slider */
.wc-calc__tick-dots {
  position: absolute;
  top: 12px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.wc-calc__dot {
  display: block;
  width: 4px;
  height: 4px;
  background: #b0aba6;
  border-radius: 50%;
}

/* Knob — uses left:% so it works at any track width */
.wc-calc__knob {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 20px;
  background: #ffffff;
  border-radius: 100px;
  box-shadow: 0 .5px 4px rgba(0,0,0,.12),0 6px 13px rgba(0,0,0,.12);
  cursor: grab;
  touch-action: none;
  z-index: 2;
  transition: box-shadow 0.15s;
  outline: none;
}

.wc-calc__knob:hover, .wc-calc__knob:focus-visible {
  box-shadow: 0 3px 16px rgba(0,0,0,0.22), 0 0 0 2px #bbbbbb90;
}

.wc-calc__knob.dragging,
.wc-calc__knob:active {
  cursor: grabbing;
  box-shadow: 0 3px 16px rgba(0,0,0,0.22), 0 0 0 2px #bbbbbb90;
}

/* ── Right column: Projections ── */
.wc-calc__projection-section {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.wc-calc__projection-card {
  background: hsla(0, 0%, 100%, .5);
  border-radius: 8px;
  padding: 16px 24px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

.wc-calc__projection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

.wc-calc__projection-label {
  font-size: 14px;
  color: #112125;
  font-weight: 300;
}

.wc-calc__projection-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.wc-calc__projection-number {
  font-size: 24px;
  font-weight: 700;
  color: #112125;
  text-align: right;
  line-height: 1;
}

.wc-calc__projection-unit {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.wc-calc__projection-divider {
  height: 1px;
  background: #eee9e5;
  margin: 2px 0;
}

/* ── CTA Button ── */
.wc-calc__cta-link {
  text-decoration: none;
  display: block;
}

.wc-calc__cta {
  display: block;
  width: 100%;
  padding: 16px 30px;
  background: #106278;
  color: #ffffff;
  border: 2px solid #106278;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.wc-calc__cta:hover {
  background: #ffffff;
  color: #106278;
}


/* ============================================================
   Responsive — Mobile (< 640px)
   ============================================================ */
@media (max-width: 640px) {

  .wc-calc__content {
    flex-direction: column;
	align-items: center;
    gap: 24px;
  }

  .wc-calc__scale-section {
    max-width: 100%;
  }

  .wc-calc__projection-section {
    flex: none;
    width: 100%;
  }

  .wc-calc__projection-card {
    padding: 18px 20px;
  }

  .wc-calc__projection-number {
    font-size: 1.4rem;
  }

  .wc-calc__gauge-wrap {
    max-width: 100%;
  }
}

/* ============================================================
   Tablet (641px – 968px) — single column centered
   ============================================================ */
@media (min-width: 641px) and (max-width: 968px) {
  .wc-calc__content {
    flex-direction: column;
    align-items: center;
  }

  .wc-calc__scale-section,
  .wc-calc__projection-section {
    width: 100%;
    max-width: 420px;
    flex: none;
  }
}