/* My IAPSNJ – application fields inside the FluentCart checkout. */
.my-iapsnj-application {
    margin: 24px 0;
}
.my-iapsnj-application h3.my-iapsnj-application-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}
.my-iapsnj-application-intro {
    margin: 0 0 16px;
    opacity: 0.85;
}
/* "Retired Law Enforcement Only" under the Lifetime title. */
.my-iapsnj-application .my-iapsnj-application-subtitle {
    margin: -4px 0 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
/* Text box under a dropdown answered "Other (not listed)", and the
   "Department not listed? Add it here" link that opens it. */
.my-iapsnj-application .my-iapsnj-other {
    margin-top: 10px;
}
.my-iapsnj-application .my-iapsnj-other-link-wrap {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
}
.my-iapsnj-application .my-iapsnj-other-link {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
/* Section headings: bold, between the form title (22px) and the field
   labels (FluentCart: 14px), with room above so each group reads as its
   own block. Pixel sizes match FluentCart's checkout, which sets its own
   text in px, so the theme's body font cannot upset the order. The
   selectors are specific on purpose: themes style bare h3 elements. */
.my-iapsnj-application .my-iapsnj-section {
    margin: 40px 0 0;
}
.my-iapsnj-application .my-iapsnj-application-title + .my-iapsnj-section,
.my-iapsnj-application .my-iapsnj-application-intro + .my-iapsnj-section,
.my-iapsnj-application input[type="hidden"] + .my-iapsnj-section {
    margin-top: 20px;
}
.my-iapsnj-application h3.my-iapsnj-section-title {
    margin: 0 0 6px;
    padding: 0 0 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: none;
    color: inherit;
}
.my-iapsnj-application .my-iapsnj-section-intro {
    margin: 8px 0 4px;
    font-size: 14px;
    opacity: 0.8;
}
.my-iapsnj-application .my-iapsnj-section-title + .my-iapsnj-field,
.my-iapsnj-application .my-iapsnj-section-intro + .my-iapsnj-field {
    margin-top: 18px;
}
.my-iapsnj-field {
    margin-top: 12px;
}
.my-iapsnj-field {
    margin-bottom: 20px;
}
/* A conditional field sits under the answer that shows it. */
.my-iapsnj-conditional {
    margin-left: 4px;
    padding-left: 14px;
    border-left: 2px solid rgba(0, 0, 0, 0.1);
}
.my-iapsnj-preview-notice {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 4px solid #dba617;
    background: #fcf9e8;
    font-size: 0.9em;
}
.my-iapsnj-field > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
.my-iapsnj-field .fct-input,
.my-iapsnj-field select,
.my-iapsnj-field textarea {
    width: 100%;
    box-sizing: border-box;
}
.my-iapsnj-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    cursor: pointer;
}
.my-iapsnj-checkbox input {
    margin-top: 4px;
    flex: 0 0 auto;
    width: auto;
}
.my-iapsnj-radio-group {
    border: 0;
    margin: 0;
    padding: 0;
}
.my-iapsnj-radio-group legend {
    margin-bottom: 6px;
    font-weight: 600;
}
.my-iapsnj-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-weight: 400;
    cursor: pointer;
}
.my-iapsnj-radio input {
    width: auto;
    flex: 0 0 auto;
}
.my-iapsnj-required {
    color: #c0392b;
}
.my-iapsnj-help {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.8;
}

/* Membership checkout: one column, the order summary below the application
   on every width (My_IAPSNJ_Checkout_Page). FluentCart sets the form and
   summary side by side (55% / 45%) and, under 767px of checkout width,
   column-reverse puts the summary on top. Two classes win over FluentCart's
   one, inside or outside its container query. The footer script then moves
   the summary between the application and the payment methods; without it
   the summary still comes after the form. */
.my-iapsnj-membership-checkout .fct_checkout_inner {
    flex-direction: column;
    gap: 30px;
}
.my-iapsnj-membership-checkout .fct_checkout_inner .fct_checkout_form,
.my-iapsnj-membership-checkout .fct_checkout_inner .fct_checkout_summary,
.my-iapsnj-membership-checkout .fct_checkout_summary.my-iapsnj-summary {
    width: 100%;
}
.my-iapsnj-membership-checkout .fct_checkout_summary.my-iapsnj-summary {
    margin: 0 0 24px;
}

/* Note under the Discount Code field (inside FluentCart's summary list). */
.fct_summary_items_list li.my-iapsnj-discount-note {
    display: block;
}
.fct_summary_items_list li.my-iapsnj-discount-note p {
    margin: 4px 0 8px;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.85;
}

/* Note inside the Pay by Check box, under its title (beats FluentCart's
   `.fct_payment_method p`). */
.fct_payment_method_wrapper p.my-iapsnj-check-note {
    margin: 0 16px 12px;
    padding: 8px 10px;
    border-left: 3px solid #dba617;
    background: #fcf9e8;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* "This email address is already registered" prompt under the name / email box
   (My_IAPSNJ_Email_Check). */
.my-iapsnj-email-notice {
    margin: 10px 0 16px;
    padding: 10px 14px;
    border-left: 4px solid #dba617;
    background: #fcf9e8;
    font-size: 14px;
    line-height: 1.5;
}
.my-iapsnj-email-notice a {
    font-weight: 600;
    text-decoration: underline;
}