/* =========================
PMPRO PREMIUM LAYER (SGX)
Scope: only pages where body has .pmpro
========================= */

#main .pmpro,
#main .pmpro * {
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


#main .pmpro h2 {
  font-size: 24px;
  font-weight: 600;
}

#main .pmpro_card{
  background-color: var(--pmpro--color--base);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(12, 16, 56, 0.03);
  display: flex;
  flex-direction: column;
  margin: var(--pmpro--base--spacing--medium) 0;
  overflow: hidden;
  border: hidden;
}

#main .pmpro_card_actions{
  background-color: #070023;
  color: #ffffff;
  font-size: 16px;
}

#main .pmpro_card_actions a {
  color: #fff !important;
}

#main .pmpro_tag-success {
  border-radius: 4px;
}

#main .pmpro_form_input {
  border-radius: 4px;
  border-color: #bbbbbb;
}

#main .pmpro_btn {
  border-radius: 4px;
  box-shadow: none;
}

#main .pmpro_btn-print{
  color: #ffffff;
}

#main .pmpro_btn-cancel:hover{
  background-color: #070023;
  color: #ffffff;
}

#main td:last-child{
  padding-bottom:16px;
}

#main tbody td{
  padding:20px;
}

#main .pmpro_card_content{
  padding-bottom: 16px;
  padding-bottom: 32px;
}

/* Hide avatar on PMPro account page */
#main #pmpro_account-profile .pmpro_card_title img.avatar{
  display: none !important;
}

/* Hide "My Account" heading on PMPro account page */
#main #pmpro_account-profile > .pmpro_section_title {
  display: none !important;
}


/* PMPro confirmation: hide the avatar card media */
#main body.pmpro .pmpro_card .pmpro_card_media,
body.pmpro .pmpro_card img {
  display: none !important;
}

/* tighten left padding now the avatar is gone */
#main body.pmpro .pmpro_card {
  padding-left: 0 !important;
}

/* Hide PMPro avatar everywhere */
#main .pmpro img.avatar,
#main .pmpro .avatar {
  display: none !important;
}

#main .pmpro .pmpro_heading-with-avatar h2,
#main .pmpro .pmpro_card_title {
  padding-left: 36px;           /* controlled, premium spacing */
}


#main .pmpro_checkout-field {
	margin-bottom: 16px;
}

/* Input styling to match (covers most PMPro inputs) */
#main .pmpro input.pmpro_form_input,
#main .pmpro select.pmpro_form_input,
#main .pmpro textarea.pmpro_form_input,
#main .pmpro .pmpro_checkout-field input[type="text"],
#main .pmpro .pmpro_checkout-field input[type="email"],
#main .pmpro .pmpro_checkout-field input[type="password"]{
  border-radius: 4px;
  border-color: #bbbbbb;
}


@media (max-width: 640px){
#main .pmpro_card_content{
  padding: 16px;
}

#main #main td:last-child{
  padding-top: 32px;
}
}


/* =========================
SGX: First + Last name layout (PMPro checkout)
========================= */

/* Make our wrapper behave nicely inside PMPro's flex stack */
#main .pmpro .sgx-checkout-row--name{
  flex: 0 0 100% !important;
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-bottom: 16px !important;
}

/* Kill any inherited float/clear that forces stacking */
#main .pmpro .sgx-checkout-row--name,
#main .pmpro .sgx-checkout-row--name *{
  float: none !important;
  clear: none !important;
}

/* Ensure the two inner field divs don't force 100% widths */
#main .pmpro .sgx-checkout-row--name > .pmpro_checkout-field{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Inputs fill their grid column */
#main .pmpro .sgx-checkout-row--name input{
  width: 100% !important;
  box-sizing: border-box;
}

#main .pmpro .sgx-checkout-row--name label{
  display: inline-block;        /* ensures margin applies consistently */
  margin-bottom: 6px;           /* tweak to taste: 6–8px matches PMPro */
  font-weight: inherit;         /* keep visual consistency */
}

/* Mobile: stack */
@media (max-width: 640px){
  #main .pmpro .sgx-checkout-row--name{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}