/*
 * Free competitions (free-games.php). Loaded after the theme stylesheet.
 */

/* "FREE" in the price pill and the competition page price. */
.pp-free-price {
  font-weight: 800;
  letter-spacing: .04em;
}
.woocommerce div.product .summary .price .pp-free-price,
.single-product div.product .summary .price .pp-free-price {
  color: var(--pp-red-text, #B00808);
}

/* Fixed one entry note where the ticket picker would be. */
.woocommerce div.product form.cart .pp-free-qty-note {
  flex: 0 0 100%;
  width: 100%;
  margin: 4px 0 12px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--pp-ink, #14141A);
}

/* With no picker, the button takes the full row, as it does after the picker. */
.woocommerce div.product form.cart .pp-free-qty-note ~ button.single_add_to_cart_button {
  flex: 0 0 100%;
  width: 100%;
  height: 52px;
  min-height: 52px;
  font-size: 1.05rem;
}

/* "No payment needed" under the basket and checkout totals. */
.woocommerce table.shop_table tr.pp-no-payment td,
.woocommerce-checkout-review-order-table tr.pp-no-payment td {
  text-align: right;
  font-weight: 700;
  color: #1B7F3B;
  border-top: 0;
  padding-top: 0;
}

/* Slide out basket: a free entry is always 1, so no steppers. */
.pp-basket-free-entry {
  font-size: .85rem;
  font-weight: 700;
  color: var(--pp-text-muted, #6B6B70);
}

/* Free Games page while no free competition is published. */
.pp-free-empty {
  max-width: 760px;
  margin: 8px auto 48px;
  padding: 40px 32px;
  border-radius: 22px;
  background: radial-gradient(circle at 85% 10%, rgba(209, 10, 10, .45), transparent 55%), var(--pp-ink, #14141A);
  color: var(--pp-on-ink, #F3F3F5);
  text-align: center;
}
.pp-free-empty h2 {
  margin: 0 0 10px;
  color: #fff;
}
.pp-free-empty p {
  margin: 0 auto 22px;
  max-width: 560px;
  color: var(--pp-on-ink-muted, #C9C9D1);
  line-height: 1.6;
}
.pp-free-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.pp-free-empty .button.pp-free-empty-primary,
.pp-free-empty .button.pp-free-empty-ghost {
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
}
.pp-free-empty .button.pp-free-empty-primary {
  background: var(--pp-red, #D10A0A);
  border: 1px solid var(--pp-red, #D10A0A);
  color: #fff;
}
.pp-free-empty .button.pp-free-empty-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}