/*
 * ProstoPolicz Premium Cards v1
 * Page-specific, presentation-only styling for four established calculators.
 * Preserves the existing grid layouts, inputs, calculator scripts and mode states.
 */

/* Hero panels */
body.page-id-77 .pp-salary-header,
body.page-id-113 .pp-vat-header,
body.page-id-133 .pp-bmi-header,
body.page-id-124 .pp-percent-header {
  box-sizing: border-box;
  padding: clamp(22px, 3.5vw, 34px);
  border: 1px solid #dbe7f4;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5faff 0%, #fff 58%, #ecf5ff 100%);
  box-shadow: 0 12px 28px rgba(25, 72, 119, .07),
              inset 0 2px 0 rgba(255, 255, 255, .96);
}
body.page-id-77 .pp-salary-header h1,
body.page-id-113 .pp-vat-header h1,
body.page-id-133 .pp-bmi-header h1,
body.page-id-124 .pp-percent-header h1 {
  color: #152b45;
  letter-spacing: -.015em;
}

/* 3D form and result cards; do not change existing padding, grid, or visibility. */
body.page-id-77 .pp-salary-form-card,
body.page-id-77 .pp-salary-result-card,
body.page-id-113 .pp-vat-form-card,
body.page-id-113 .pp-vat-result-card,
body.page-id-133 .pp-bmi-form-card,
body.page-id-133 .pp-bmi-result-card,
body.page-id-124 .pp-percent-form-card,
body.page-id-124 .pp-percent-result-card {
  border: 1px solid #d8e4f2;
  border-radius: 19px;
  box-shadow: 0 16px 34px rgba(17, 48, 84, .085),
              0 4px 10px rgba(17, 48, 84, .035),
              inset 0 2px 0 rgba(255,255,255,.97);
}
body.page-id-77 .pp-salary-form-card,
body.page-id-113 .pp-vat-form-card,
body.page-id-133 .pp-bmi-form-card,
body.page-id-124 .pp-percent-form-card {
  background: linear-gradient(155deg, #fff 0%, #fff 65%, #f6faff 100%);
}
body.page-id-77 .pp-salary-result-card,
body.page-id-113 .pp-vat-result-card,
body.page-id-133 .pp-bmi-result-card,
body.page-id-124 .pp-percent-result-card {
  background: linear-gradient(155deg, #fbfdff 0%, #eef6ff 100%);
}

/* Primary calculation buttons, without altering toggle-button active states. */
body.page-id-77 .pp-main-calc-btn,
body.page-id-113 .pp-vat-calculate-btn,
body.page-id-133 .pp-bmi-calculate,
body.page-id-124 .pp-percent-calculate {
  color: #fff !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #418ed4 0%, #2668aa 100%) !important;
  box-shadow: 0 9px 17px rgba(29, 91, 157, .22),
              inset 0 1px 0 rgba(255,255,255,.28) !important;
  transition: transform .17s ease, filter .17s ease, box-shadow .17s ease;
}
body.page-id-77 .pp-main-calc-btn:hover,
body.page-id-113 .pp-vat-calculate-btn:hover,
body.page-id-133 .pp-bmi-calculate:hover,
body.page-id-124 .pp-percent-calculate:hover {
  color: #fff !important;
  filter: brightness(1.055);
  transform: translateY(-2px);
  box-shadow: 0 12px 21px rgba(29, 91, 157, .27),
              inset 0 1px 0 rgba(255,255,255,.31) !important;
}
body.page-id-77 .pp-main-calc-btn:active,
body.page-id-113 .pp-vat-calculate-btn:active,
body.page-id-133 .pp-bmi-calculate:active,
body.page-id-124 .pp-percent-calculate:active {
  transform: translateY(1px);
}
body.page-id-77 .pp-main-calc-btn:focus-visible,
body.page-id-113 .pp-vat-calculate-btn:focus-visible,
body.page-id-133 .pp-bmi-calculate:focus-visible,
body.page-id-124 .pp-percent-calculate:focus-visible {
  outline: 3px solid rgba(47,115,185,.35);
  outline-offset: 3px;
}

/* Sharper focus feedback for fields. Existing widths and dimensions stay intact. */
body.page-id-77 .pp-salary-form-card :is(input, select):focus-visible,
body.page-id-113 .pp-vat-form-card :is(input, select):focus-visible,
body.page-id-133 .pp-bmi-form-card :is(input, select):focus-visible,
body.page-id-124 .pp-percent-form-card :is(input, select):focus-visible {
  outline: 2px solid #397ebd;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  body.page-id-77 .pp-salary-header,
  body.page-id-113 .pp-vat-header,
  body.page-id-133 .pp-bmi-header,
  body.page-id-124 .pp-percent-header {
    padding: 19px;
    border-radius: 16px;
  }
  body.page-id-77 .pp-salary-form-card,
  body.page-id-77 .pp-salary-result-card,
  body.page-id-113 .pp-vat-form-card,
  body.page-id-113 .pp-vat-result-card,
  body.page-id-133 .pp-bmi-form-card,
  body.page-id-133 .pp-bmi-result-card,
  body.page-id-124 .pp-percent-form-card,
  body.page-id-124 .pp-percent-result-card {
    border-radius: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-77 .pp-main-calc-btn,
  body.page-id-113 .pp-vat-calculate-btn,
  body.page-id-133 .pp-bmi-calculate,
  body.page-id-124 .pp-percent-calculate {
    transition: none !important;
  }
  body.page-id-77 .pp-main-calc-btn:hover,
  body.page-id-113 .pp-vat-calculate-btn:hover,
  body.page-id-133 .pp-bmi-calculate:hover,
  body.page-id-124 .pp-percent-calculate:hover {
    transform: none !important;
  }
}