/*
 * /pierwszy-trening landing page (P5-pierwszy-trening). Loaded only there
 * through the layout's `head` section; assets/css/style.css is read-only,
 * so the fear cards, step list, practical-info rows, FAQ accordion, review
 * quotes and the dark form section live here. Colours follow the theme:
 * #ed342c accent, #151515/#16161a dark, Teko headings, Barlow body.
 */

.ft-section {
  padding: 80px 0 50px;
}

.ft-section--grey {
  background: #f5f5f5;
}

.ft-section .section-tittle span {
  margin-left: 0;
  padding-left: 72px;
  position: relative;
}

.ft-section .section-tittle span::before {
  left: 0;
  top: 50%;
}

.ft-section .section-tittle h2 {
  font-size: 44px;
}

.ft-lede {
  font-size: 20px;
  color: #444;
  max-width: 720px;
  margin: -20px auto 50px;
}

/* ---- red intro banner ------------------------------------------------ */

.ft-intro {
  padding-bottom: 30px;
}

.ft-intro .price-plan h2 {
  font-size: 40px;
  line-height: 1.1;
}

.ft-intro__lead {
  font-size: 18px;
  margin-top: 12px !important;
  opacity: 0.95;
}

/* ---- fear cards --------------------------------------------------------- */

.ft-card {
  background: #fff;
  border: 1px solid #ececec;
  border-top: 3px solid #ed342c;
  padding: 30px 26px 24px;
  margin-bottom: 30px;
  height: calc(100% - 30px);
  transition: box-shadow 0.2s, transform 0.2s;
}

.ft-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.ft-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ed342c;
  color: #fff;
  font-size: 22px;
  margin-bottom: 18px;
}

.ft-card h3 {
  font-family: "Teko", sans-serif;
  font-size: 26px;
  line-height: 1.15;
  color: #16161a;
  margin-bottom: 12px;
}

.ft-card p {
  font-size: 16px;
  color: #444;
  margin: 0;
}

/* ---- steps -------------------------------------------------------------- */

.ft-step {
  text-align: center;
  padding: 0 14px 30px;
}

.ft-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #ed342c;
  color: #ed342c;
  font-family: "Teko", sans-serif;
  font-size: 34px;
  line-height: 1;
  padding-top: 4px;
  margin-bottom: 18px;
}

.ft-step h3 {
  font-family: "Teko", sans-serif;
  font-size: 28px;
  color: #16161a;
  margin-bottom: 10px;
}

.ft-step p {
  font-size: 16px;
  color: #444;
}

.ft-step a {
  color: #ed342c;
  font-weight: 600;
}

/* ---- what to bring + practical info ---------------------------------- */

.ft-practical .section-tittle {
  text-align: left !important;
}

.ft-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.ft-list li {
  font-size: 18px;
  color: #333;
  padding: 10px 0 10px 36px;
  position: relative;
  border-bottom: 1px solid #eee;
}

.ft-list li i {
  position: absolute;
  left: 0;
  top: 15px;
  color: #ed342c;
}

.ft-info__row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 26px;
}

.ft-info__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #16161a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 18px;
}

.ft-info__row h4 {
  font-family: "Teko", sans-serif;
  font-size: 24px;
  color: #16161a;
  margin-bottom: 4px;
}

.ft-info__row p,
.ft-info__row li p {
  font-size: 16px;
  color: #444;
  margin-bottom: 4px;
}

.ft-info__row ul {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}

.ft-info__row a {
  color: #ed342c;
}

.ft-info__phone {
  font-family: "Teko", sans-serif;
  font-size: 30px;
  font-weight: 600;
}

/* The FAQ accordion styles moved to css/faq.css (shared with /faq and home);
   the review cards to css/reviews.css (shared with /opinie and /o-trenerze). */

/* ---- form ---------------------------------------------------------------- */

.ft-form {
  padding-bottom: 80px;
}

.ft-form .section-tittle--light span {
  color: #fff;
}

.ft-form .ft-lede {
  color: #ddd;
}

.ft-form .form-control {
  color: #fff;
  border-color: #444;
}

.ft-form .form-control::placeholder {
  color: #aaa;
}

.ft-form select.ft-select {
  height: 48px;
  background: transparent;
  color: #fff;
  border: 1px solid #444;
  border-radius: 0;
  font-size: 13px;
  padding-left: 18px;
}

.ft-form select.ft-select option {
  color: #16161a;
}

/* main.js runs $('select').niceSelect() on every select on the site, which
 * replaces the element with a <div class="nice-select"> and copies the
 * original's class attribute onto it. So the dark-field styling has to be
 * repeated for the generated element — a rule written for `select` never
 * reaches it.
 *
 * The list itself is white (assets/css/nice-select.css). The control sits on
 * a near-black panel and therefore needs light text, and that colour is
 * inherited straight into the white dropdown unless the options set their
 * own — which is how this ended up white on white. The select previously
 * carried Bootstrap's .text-white, whose !important made it unfixable from
 * here; it is gone from the markup, and the colours are set below.
 */
.ft-form .nice-select.ft-select {
  background-color: transparent;
  border: 1px solid #444;
  border-radius: 0;
  color: #fff;
  height: 48px;
  line-height: 46px;
  font-size: 13px;
  padding-left: 18px;
  width: 100%;
  float: none;
}

.ft-form .nice-select.ft-select::after {
  border-bottom-color: #fff;
  border-right-color: #fff;
}

.ft-form .nice-select.ft-select .list {
  width: 100%;
  background-color: #fff;
}

.ft-form .nice-select.ft-select .option {
  color: #16161a;
  line-height: 1.4;
  min-height: 38px;
  padding: 9px 18px;
  white-space: normal;
}

.ft-form .nice-select.ft-select .option:hover,
.ft-form .nice-select.ft-select .option.focus,
.ft-form .nice-select.ft-select .option.selected.focus {
  background-color: #f3f3f3;
  color: #16161a;
}

.ft-form .status,
.ft-form .status-red {
  font-size: 16px;
  margin-top: 10px;
}

.ft-form .status-red {
  color: #ff8a80;
}

.ft-form__note {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 20px;
}

.ft-form__note a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .ft-section {
    padding: 50px 0 20px;
  }

  .ft-section .section-tittle h2 {
    font-size: 34px;
  }

  .ft-intro .price-plan h2 {
    font-size: 30px;
  }
}