/* Paid Memberships Pro, in the Rhythm & Brands palette.
   ---------------------------------------------------------------------------
   PMPro's own frontend stylesheet is switched off in inc/pmpro.php, so this
   file is the whole appearance of the member area rather than a pile of
   overrides. It covers the levels table, checkout, billing, account, the
   member login and the Stripe card field's container.
   --------------------------------------------------------------------------- */

.pmpro,
.pmpro_form,
.pmpro_content_message,
#pmpro_account,
#pmpro_levels_table {
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--text);
}

/* ------------------------------------------------------------------- levels */
#pmpro_levels_table,
.pmpro_checkout table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
#pmpro_levels_table thead th {
  background: #000;
  color: var(--ivory);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 16px 18px;
  text-align: left;
  border: 0;
}
#pmpro_levels_table td {
  padding: 20px 18px;
  border-bottom: 1px solid rgba(18, 23, 26, .12);
  vertical-align: top;
  font-size: 16px;
  line-height: 1.6;
}
#pmpro_levels_table .pmpro_level-name,
#pmpro_levels_table td:first-child {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
}
#pmpro_levels_table .pmpro_level-price,
#pmpro_levels_table td:nth-child(2) {
  font-weight: 700;
  color: #8A6E33;
  white-space: nowrap;
}
#pmpro_levels_table tr:hover td { background: rgba(184, 151, 90, .05); }

/* The cards PMPro 3 renders instead of a table, when that layout is chosen. */
.pmpro_level {
  border: 1px solid rgba(18, 23, 26, .14);
  background: var(--ivory);
  padding: clamp(20px, 2.4vw, 34px);
}
.pmpro_level h3,
.pmpro_level .pmpro_level-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 8px;
}
.pmpro_level .pmpro_level-price { font-size: 20px; font-weight: 700; color: #8A6E33; }
.pmpro_level ul { list-style: none; margin: 18px 0 0; padding: 0; }
.pmpro_level li {
  padding: 9px 0 9px 26px;
  position: relative;
  font-size: 16px;
  border-top: 1px solid rgba(18, 23, 26, .09);
}
.pmpro_level li::before {
  content: "";
  position: absolute;
  left: 2px; top: 17px;
  width: 11px; height: 2px;
  background: var(--gold);
}

/* ----------------------------------------------------------------- the form */
.pmpro_form fieldset,
.pmpro_checkout {
  border: 1px solid rgba(18, 23, 26, .14);
  background: var(--ivory);
  padding: clamp(18px, 2.2vw, 30px);
  margin: 0 0 22px;
}
.pmpro_checkout h2,
.pmpro_form legend,
.pmpro_form .pmpro_card_title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 27px;
  color: var(--text);
  padding: 0 0 14px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(184, 151, 90, .5);
  width: 100%;
}
.pmpro_form label,
.pmpro_checkout label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6D6960;
  margin: 0 0 7px;
}
.pmpro_form input[type="text"],
.pmpro_form input[type="email"],
.pmpro_form input[type="password"],
.pmpro_form input[type="tel"],
.pmpro_form input[type="number"],
.pmpro_form select,
.pmpro_form textarea {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(18, 23, 26, .22);
  border-radius: 0;
  padding: 13px 15px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 17px;
  color: var(--text);
}
.pmpro_form input:focus,
.pmpro_form select:focus,
.pmpro_form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(184, 151, 90, .22);
}
.pmpro_form .pmpro_asterisk { color: var(--gold); }

/* Stripe draws the card field inside an iframe. We cannot style what is in
   there from here, so the type styles are handed to Stripe in inc/pmpro.php
   and this only makes the box around it match the other inputs. */
#pmpro_payment_information_fields .StripeElement,
.pmpro_form .StripeElement {
  background: #fff;
  border: 1px solid rgba(18, 23, 26, .22);
  padding: 14px 15px;
}
.pmpro_form .StripeElement--focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(184, 151, 90, .22);
}
.pmpro_form .StripeElement--invalid { border-color: #9B2C2C; }

/* --------------------------------------------------------------- the buttons */
.pmpro_btn,
.pmpro_btn-submit,
.pmpro_btn-submit-checkout,
input[type="submit"].pmpro_btn,
.pmpro_form input[type="submit"] {
  display: inline-block;
  background: var(--gold);
  color: #000;
  border: 1px solid var(--gold);
  border-radius: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 15px 32px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.pmpro_btn:hover,
.pmpro_btn-submit:hover,
.pmpro_form input[type="submit"]:hover { background: var(--gold-light); }
.pmpro_btn-cancel,
.pmpro_btn.pmpro_btn-cancel {
  background: transparent;
  color: var(--text);
  border-color: rgba(18, 23, 26, .35);
}

/* ---------------------------------------------------------------- the notices */
.pmpro_message,
.pmpro_error,
.pmpro_success {
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 16px;
  border-left: 3px solid var(--gold);
  background: rgba(184, 151, 90, .1);
  color: var(--text);
}
.pmpro_error { border-left-color: #9B2C2C; background: rgba(155, 44, 44, .08); }
.pmpro_success { border-left-color: #2F6B3C; background: rgba(47, 107, 60, .08); }

/* ------------------------------------------------------------------- account */
#pmpro_account .pmpro_box,
#pmpro_account > div {
  border: 1px solid rgba(18, 23, 26, .14);
  background: var(--ivory);
  padding: clamp(18px, 2.2vw, 28px);
  margin: 0 0 20px;
}
#pmpro_account h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 25px;
  margin: 0 0 12px;
}
#pmpro_account table { width: 100%; border-collapse: collapse; }
#pmpro_account th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6D6960;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid rgba(18, 23, 26, .12);
}
#pmpro_account td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid rgba(18, 23, 26, .08);
  font-size: 16px;
}

/* The member area sits on cream, full width, not in the prose column. */
body.rb-levels .entry-content,
body.rb-checkout .entry-content,
body.pmpro-account .entry-content,
body.pmpro-billing .entry-content { max-width: 1100px; }

@media (max-width: 700px) {
  #pmpro_levels_table thead { display: none; }
  #pmpro_levels_table tr { display: block; border-bottom: 1px solid rgba(18,23,26,.14); padding: 8px 0; }
  #pmpro_levels_table td { display: block; border: 0; padding: 6px 0; }
}