/* =====================================================================
   onlinelad-forms.css
   Dresses the Paid Member Subscriptions forms (registration at /join/,
   and the account and change-subscription forms) to match the rest of
   the site.

   Every selector here is a pms- or cozmoslabs- class, so this file only
   ever applies where those forms appear. It is safe to load sitewide.

   Tokens come from onlinelad-chrome.css, which defines them on :root.

   NOTE ON THE HONEYPOTS
   PMS drops hidden "beehive" fields into the form to catch bots. They are
   hidden by PMS's own CSS, and revealing them would break that, so every
   field rule below excludes .beehive. Do not remove those exclusions.
   ===================================================================== */

.pms-form{
  font-family:var(--font);
  color:var(--ink);
  max-width:560px;
  margin:0;
}

.pms-form .pms-form-fields-wrapper{
  list-style:none;
  margin:0;
  padding:0;
}

/* ---- Text fields ---------------------------------------------------- */

.pms-form .pms-field:not(.beehive),
.pms-form .cozmoslabs-form-field-wrapper:not(.beehive){
  list-style:none;
  margin:0 0 16px;
  padding:0;
}

.pms-form .pms-field:not(.beehive) > label,
.pms-form .cozmoslabs-form-field-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 6px;
}

.pms-form input[type="text"],
.pms-form input[type="email"],
.pms-form input[type="password"],
.pms-form input[type="tel"],
.pms-form select,
.pms-form textarea{
  width:100%;
  box-sizing:border-box;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.pms-form input[type="text"]:focus,
.pms-form input[type="email"]:focus,
.pms-form input[type="password"]:focus,
.pms-form select:focus,
.pms-form textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,74,173,.12);
}

.pms-form input::placeholder{color:var(--slate);opacity:1}

/* ---- Plan chooser --------------------------------------------------- */

.pms-form .pms-field-subscriptions{
  margin:24px 0;
  padding:0;
  list-style:none;
}

.pms-form .pms-subscription-plan{
  margin:0 0 8px;
}

.pms-form .pms-subscription-plan > label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:13px 15px;
  margin:0;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}

.pms-form .pms-subscription-plan > label:hover{
  border-color:var(--sky);
  background:var(--mist);
}

/* The selected row. :has is well supported now; the rule below it is the
   fallback for anything that does not support it, which simply leaves the
   row in its resting state rather than breaking. */
.pms-form .pms-subscription-plan > label:has(input:checked){
  border-color:var(--blue);
  background:var(--mist);
  box-shadow:inset 3px 0 0 var(--blue);
}

.pms-form .pms-subscription-plan input[type="radio"]{
  accent-color:var(--blue);
  width:17px;
  height:17px;
  margin:0;
  flex:none;
}

.pms-form .pms-subscription-plan-name{font-weight:800}

.pms-form .pms-subscription-plan-price{
  margin-left:auto;
  font-weight:700;
  color:var(--blue);
  white-space:nowrap;
}

.pms-form .pms-subscription-plan-duration{
  color:var(--slate);
  font-weight:600;
}

.pms-form .pms-subscription-plan-trial,
.pms-form .pms-subscription-plan-sign-up-fee{
  color:var(--slate);
  font-size:13px;
}

.pms-form .pms-subscription-plan-auto-renew{
  margin:14px 0 0;
}

.pms-form .pms-subscription-plan-auto-renew > label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:var(--slate);
  margin:0;
  cursor:pointer;
}

.pms-form .pms-subscription-plan-auto-renew input[type="checkbox"]{
  accent-color:var(--blue);
  width:16px;
  height:16px;
  margin:0;
}

/* ---- Discount code -------------------------------------------------- */

.pms-form #pms-subscription-plans-discount{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:20px 0 0;
}

.pms-form #pms-subscription-plans-discount label{
  width:100%;
  font-size:14px;
  font-weight:700;
  margin:0 0 2px;
}

.pms-form #pms_subscription_plans_discount_code{
  flex:1 1 200px;
  width:auto;
}

.pms-form #pms-apply-discount{
  flex:none;
  font:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--blue);
  background:var(--white);
  border:2px solid var(--blue);
  border-radius:var(--r);
  padding:10px 18px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.pms-form #pms-apply-discount:hover{
  background:var(--blue);
  color:var(--white);
}

.pms-form #pms-subscription-plans-discount-messages{
  font-size:14px;
  color:var(--slate);
  margin-top:8px;
}

/* ---- Payment gateways ----------------------------------------------- */

.pms-form .pms-paygates-holder{margin:28px 0 0}

.pms-form #pms-paygates-wrapper h3,
.pms-form .pms-field-type-heading h3{
  font-size:17px;
  font-weight:900;
  color:var(--ink);
  margin:0 0 10px;
}

.pms-form #pms-paygates-inner{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 20px;
}

.pms-form #pms-paygates-inner > label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--white);
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  transition:border-color .15s ease, background .15s ease;
}

.pms-form #pms-paygates-inner > label:hover{border-color:var(--sky)}

.pms-form #pms-paygates-inner > label:has(input:checked){
  border-color:var(--blue);
  border-width:2px;
  background:var(--mist);
}

.pms-form #pms-paygates-inner input[type="radio"]{
  accent-color:var(--blue);
  width:16px;
  height:16px;
  margin:0;
}

.pms-form .pms-paygate-extra-fields{
  list-style:none;
  margin:0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--mist);
}

.pms-form #pms-stripe-payment-elements{margin-top:4px}

.pms-form .pms-spinner__holder{padding:10px 0}

/* ---- reCAPTCHA and submit ------------------------------------------- */

.pms-form #pms-recaptcha-register-wrapper{margin:22px 0}

.pms-form .pms-form-submit,
.pms-form input[type="submit"].pms-form-submit{
  display:inline-block;
  font:inherit;
  font-size:16px;
  font-weight:800;
  color:var(--white);
  background:var(--blue);
  border:2px solid var(--blue);
  border-radius:var(--r);
  padding:13px 30px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

.pms-form .pms-form-submit:hover{
  background:#003c8c;
  border-color:#003c8c;
}

.pms-form .pms-form-submit:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* ---- Messages ------------------------------------------------------- */

.pms-error,
.pms-success,
.pms-form .pms-field-error{
  font-size:14px;
  border-radius:var(--r);
  padding:11px 14px;
  margin:0 0 16px;
}

.pms-error,
.pms-form .pms-field-error{
  color:#8A1C1C;
  background:#FCEBEB;
  border:1px solid #F3C9C9;
}

.pms-success{
  color:#0B5228;
  background:#E8F6EE;
  border:1px solid #BFE3CE;
}

/* ---- Account and change-subscription forms -------------------------- */

.pms-account-navigation{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pms-account-navigation li{margin:0}

.pms-account-navigation a{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  color:var(--blue);
  background:var(--mist);
  border-radius:100px;
  padding:8px 16px;
}

.pms-account-navigation a:hover{background:var(--blue);color:var(--white)}

/* ---- Narrow screens -------------------------------------------------- */

@media (max-width:600px){
  .pms-form .pms-subscription-plan > label{
    flex-wrap:wrap;
    gap:6px 10px;
  }
  .pms-form .pms-subscription-plan-price{margin-left:0;width:100%}
  .pms-form #pms-paygates-inner > label{flex:1 1 100%}
}