/*
 * ARABOO LMS — Restyle for PMPro's default markup on /membership-checkout/
 * and /membership-account/membership-confirmation/.
 *
 * Scoped under `.apml .apml-pmpro-shell` so the rules only apply
 * inside our wrapper templates — global PMPro styling on other pages
 * (admin, gateway flows) stays untouched.
 *
 * PMPro emits semantic class names (`pmpro_card`, `pmpro_form_field`,
 * `pmpro_btn`, etc.) which we restyle here. The targets are stable
 * across PMPro 3.x; if PMPro renames a class in a future major,
 * search for that name across this file and update.
 */

/* Subtitle directly under the hero h2 — shared shape with brandbar */
.apml .apml-mock-subtitle{
  margin: 12px 0 0;
  color: var(--apml-muted);
  font-size: 15px;
  font-weight: 500;
}
.apml .apml-mock-subtitle strong{
  color: var(--apml-ink);
  font-weight: 700;
}

/* The wrapper our checkout/confirmation templates use to scope the
 * upstream-PMPro markup. */
.apml-pmpro-shell{
  margin-top: 14px;
}

/* PMPro's outermost element — we don't need its default margins, but
 * keep it as a layout container so child selectors keep matching. */
.apml-pmpro-shell .pmpro{
  margin: 0;
  padding: 0;
}

/* Cards (e.g. "Order Summary", "Account Information", "Billing Address") */
.apml-pmpro-shell .pmpro_card{
  background: var(--apml-card);
  border: 1px solid var(--apml-line-soft);
  border-radius: 18px;
  box-shadow: var(--apml-shadow-sm);
  padding: 26px 28px;
  margin: 0 0 22px;
}
.apml-pmpro-shell .pmpro_card_title{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--apml-ink);
  line-height: 1.2;
}
.apml-pmpro-shell .pmpro_card_subtitle,
.apml-pmpro-shell .pmpro_form_subfield_description,
.apml-pmpro-shell .pmpro_form_field_description{
  color: var(--apml-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.apml-pmpro-shell .pmpro_card_content{
  margin-top: 18px;
}
.apml-pmpro-shell .pmpro_card_actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Section + spacer */
.apml-pmpro-shell .pmpro_section{
  margin: 0 0 22px;
}
.apml-pmpro-shell .pmpro_spacer{
  height: 14px;
}

/* Form fields */
.apml-pmpro-shell .pmpro_form_fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
}
.apml-pmpro-shell .pmpro_form_field{
  margin: 0;
  display: flex;
  flex-direction: column;
}
.apml-pmpro-shell .pmpro_form_field--full,
.apml-pmpro-shell .pmpro_form_field-textarea,
.apml-pmpro-shell .pmpro_form_field-select2,
.apml-pmpro-shell .pmpro_form_field-htmleditor,
.apml-pmpro-shell .pmpro_form_field-multiselect,
.apml-pmpro-shell .pmpro_form_field-checkbox-grouped,
.apml-pmpro-shell .pmpro_form_field-radio-grouped{
  grid-column: 1 / -1;
}

.apml-pmpro-shell .pmpro_form_label{
  font-weight: 600;
  font-size: 14px;
  color: var(--apml-ink);
  margin: 0 0 6px;
  letter-spacing: 0.005em;
}
.apml-pmpro-shell .pmpro_form_label-required::after,
.apml-pmpro-shell .pmpro_required{
  color: var(--apml-orange);
}

.apml-pmpro-shell .pmpro_form_input,
.apml-pmpro-shell input[type="text"].pmpro_form_input,
.apml-pmpro-shell input[type="email"].pmpro_form_input,
.apml-pmpro-shell input[type="password"].pmpro_form_input,
.apml-pmpro-shell input[type="number"].pmpro_form_input,
.apml-pmpro-shell input[type="tel"].pmpro_form_input,
.apml-pmpro-shell input[type="url"].pmpro_form_input,
.apml-pmpro-shell select.pmpro_form_input,
.apml-pmpro-shell textarea.pmpro_form_input{
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--apml-line);
  border-radius: 11px;
  background: var(--apml-card);
  color: var(--apml-ink);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.apml-pmpro-shell .pmpro_form_input:focus,
.apml-pmpro-shell input.pmpro_form_input:focus,
.apml-pmpro-shell select.pmpro_form_input:focus,
.apml-pmpro-shell textarea.pmpro_form_input:focus{
  outline: 0;
  border-color: var(--apml-teal);
  box-shadow: 0 0 0 4px rgba(31,159,148,0.12);
}
.apml-pmpro-shell select.pmpro_form_input{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235E7A7E' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}
.apml-pmpro-shell .pmpro_form_field-input--inline-checkbox,
.apml-pmpro-shell .pmpro_form_field input[type="checkbox"],
.apml-pmpro-shell .pmpro_form_field input[type="radio"]{
  accent-color: var(--apml-teal);
}

/* Hints, validation messages */
.apml-pmpro-shell .pmpro_form_hint,
.apml-pmpro-shell .pmpro_form_field_hint{
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--apml-muted);
}
.apml-pmpro-shell .pmpro_message{
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 13px;
  border: 1px solid #f6d7a8;
  background: #fff7e6;
  color: #7a4d11;
  font-size: 14px;
}
.apml-pmpro-shell .pmpro_message.pmpro_error{
  background: #fdecec; border-color: #f5c2c2; color: #8b2f2f;
}
.apml-pmpro-shell .pmpro_message.pmpro_success{
  background: #e9f7ef; border-color: #bce0c8; color: #1f6a36;
}
.apml-pmpro-shell .pmpro_message.pmpro_alert{
  background: var(--apml-t-teal); border-color: rgba(31,159,148,0.25); color: var(--apml-teal-dark);
}

/* Buttons.
 *
 * Funcare paints any bare <button> sage by default, and PMPro emits
 * its checkout submits as <input type="submit"> with .pmpro_btn class.
 * We bracket every interactive surface with !important on the visual
 * properties Funcare hijacks so the brand teal / coral always wins. */
.apml-pmpro-shell .pmpro_btn,
.apml-pmpro-shell input[type="submit"].pmpro_btn,
.apml-pmpro-shell button.pmpro_btn,
.apml-pmpro-shell a.pmpro_btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 22px !important;
  border: none !important;
  border-radius: 13px !important;
  background: var(--apml-teal) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.apml-pmpro-shell .pmpro_btn:hover,
.apml-pmpro-shell input[type="submit"].pmpro_btn:hover,
.apml-pmpro-shell button.pmpro_btn:hover,
.apml-pmpro-shell a.pmpro_btn:hover{
  background: var(--apml-teal-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  text-decoration: none;
}
.apml-pmpro-shell .pmpro_btn-submit-checkout,
.apml-pmpro-shell input[type="submit"].pmpro_btn-submit-checkout{
  background: var(--apml-orange) !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
}
.apml-pmpro-shell .pmpro_btn-submit-checkout:hover,
.apml-pmpro-shell input[type="submit"].pmpro_btn-submit-checkout:hover{
  background: var(--apml-orange-deep) !important;
}
.apml-pmpro-shell .pmpro_btn-outline,
.apml-pmpro-shell a.pmpro_btn-outline{
  background: var(--apml-card) !important;
  color: var(--apml-teal-dark) !important;
  border: 1.5px solid var(--apml-line) !important;
}

/* Plain button variant — utility actions like "Show Password" toggle,
 * "Apply Discount Code" toggle. PMPro emits them as
 *   <button class="pmpro_btn pmpro_btn-plain pmpro_btn-password-toggle">
 * intending .pmpro_btn-plain to strip the chrome that .pmpro_btn adds.
 * Our generic .pmpro_btn rule above paints them as full primary
 * buttons (chunky teal pill), and Funcare's catch-all <button> rule
 * used to paint them sage on top. Funcare's exclusion list now skips
 * [class*="pmpro_"], and these rules undo our own .pmpro_btn chrome
 * for the plain variant so it reads like an inline link instead. */
.apml-pmpro-shell .pmpro_btn.pmpro_btn-plain,
.apml-pmpro-shell button.pmpro_btn.pmpro_btn-plain,
.apml-pmpro-shell button.pmpro_btn-password-toggle,
.apml-pmpro-shell .pmpro_form_field-password-toggle button{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: var(--apml-muted) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  transform: none !important;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(94,122,126,0.4);
}
.apml-pmpro-shell .pmpro_btn.pmpro_btn-plain:hover,
.apml-pmpro-shell button.pmpro_btn-password-toggle:hover,
.apml-pmpro-shell .pmpro_form_field-password-toggle button:hover{
  background: transparent !important;
  color: var(--apml-teal-dark) !important;
  text-decoration-color: var(--apml-teal);
  transform: none !important;
}
/* Container that holds the toggle button — pin to the cell so the
 * chunky-button overflow we used to see can't repeat. */
.apml-pmpro-shell .pmpro_form_field-password-toggle{
  position: relative;
  margin-top: 6px;
  line-height: 1;
}
.apml-pmpro-shell .pmpro_form_field-password-toggle .pmpro_icon{
  display: inline-flex;
  align-items: center;
}
.apml-pmpro-shell .pmpro_form_field-password-toggle .pmpro_icon svg{
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* Inline links anywhere inside the shell — "Already have an account?
 * Log in here", "Forgot your password?", etc. Funcare doesn't paint
 * these but the parent Kava theme often does (magenta). Force brand
 * teal so the surface stays coherent. The .pmpro_btn anchor variant
 * is excluded so the action-CTA styling above still wins. */
.apml-pmpro-shell a:not(.pmpro_btn):not([class*="apml-"]),
.apml-pmpro-shell .pmpro_member_login_link a,
.apml-pmpro-shell .pmpro_account-links a:not(.pmpro_btn){
  color: var(--apml-teal-dark) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31,159,148,0.4);
  font-weight: 600;
}
.apml-pmpro-shell a:not(.pmpro_btn):not([class*="apml-"]):hover,
.apml-pmpro-shell .pmpro_member_login_link a:hover,
.apml-pmpro-shell .pmpro_account-links a:not(.pmpro_btn):hover{
  color: var(--apml-teal) !important;
  text-decoration-color: var(--apml-teal);
}
.apml-pmpro-shell .pmpro_btn-outline:hover,
.apml-pmpro-shell a.pmpro_btn-outline:hover{
  border-color: var(--apml-teal) !important;
  color: var(--apml-teal-dark) !important;
  background: var(--apml-card) !important;
}

/* Order / level summary tables PMPro renders on checkout +
 * confirmation. */
.apml-pmpro-shell .pmpro_table,
.apml-pmpro-shell table.pmpro_table{
  width: 100%;
  border-collapse: collapse;
  background: var(--apml-card);
  border-radius: 13px;
  overflow: hidden;
  margin: 0;
}
.apml-pmpro-shell .pmpro_table thead th{
  background: var(--apml-t-teal);
  color: var(--apml-teal-dark);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border: none;
}
.apml-pmpro-shell .pmpro_table tbody td,
.apml-pmpro-shell .pmpro_table tbody th{
  padding: 14px 16px;
  border-top: 1px dashed var(--apml-line);
  font-size: 14.5px;
  color: var(--apml-ink);
  background: transparent;
}
.apml-pmpro-shell .pmpro_table .pmpro_level-price{
  font-weight: 700;
  font-size: 16px;
  color: var(--apml-teal);
  margin: 0;
}
.apml-pmpro-shell .pmpro_table .pmpro_level-expiration{
  font-size: 12.5px;
  color: var(--apml-muted);
  margin: 4px 0 0;
}

/* "Choose your gateway" radio strip */
.apml-pmpro-shell .pmpro_gateways{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.apml-pmpro-shell .pmpro_gateway{
  background: var(--apml-card);
  border: 1.5px solid var(--apml-line);
  border-radius: 13px;
  padding: 10px 16px;
}

/* The pricing block we showed on the levels page (Yearly Single
 * "Save £130") doesn't appear here, but the upstream confirmation
 * does emit a "your account" link block. Treat it like a card foot. */
.apml-pmpro-shell .pmpro_actions_nav,
.apml-pmpro-shell .pmpro_account-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.apml-pmpro-shell .pmpro_actions_nav a,
.apml-pmpro-shell .pmpro_account-links a{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 16px !important;
  border-radius: 11px !important;
  background: var(--apml-t-teal) !important;
  color: var(--apml-teal-dark) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  text-decoration: none;
  transition: background .18s ease;
}
.apml-pmpro-shell .pmpro_actions_nav a:hover,
.apml-pmpro-shell .pmpro_account-links a:hover{
  background: rgba(31,159,148,0.18) !important;
  text-decoration: none;
}

/* Narrow viewports */
@media (max-width: 720px){
  .apml-pmpro-shell .pmpro_form_fields{
    grid-template-columns: 1fr;
  }
  .apml-pmpro-shell .pmpro_card{
    padding: 22px 20px;
  }
}