/* ============================================================
   RCP REGISTRATION FORM - advertise-with-us package sign-up
   Scoped to .regbc-register-form (see get_ad_form() wrapper).

   The XD mock-up's proportions translated to the web: rem-based
   type that respects the visitor's font size, a grid that
   collapses on its own, and fixed UI details (10px radius,
   1px borders) held constant.

   No container queries here: this form is injected into an Oxygen
   .ct-div-block (flex column, align-items:flex-start), so the box
   is shrink-to-fit and the size containment container-type brings
   would collapse it.

   The form is designed to sit on the #004990 page blue - the
   Oxygen section must supply that background.
   ============================================================ */

.regbc-register-form,
#rcp_login_form {
    /* Site design tokens (regbc-styles.css :root). Literals are only
       fallbacks in case that stylesheet is ever dequeued. */
    --rf-blue: var(--primary-blue, #004990);      /* headings on white */
    --rf-navy: var(--blue-dark, #00365F);         /* input text */
    --rf-accent: var(--tertiary-blue, #206599);   /* input borders, rules */
    --rf-text: var(--gray-dark, #3F4950);         /* body copy on white */
    --rf-red: var(--accent-red, #c40035);         /* button + select chevron */
    --rf-font-heading: var(--font-heading, "Poppins", sans-serif);
    --rf-font-body: var(--font-body, "Inter", sans-serif);
    --rf-weight-regular: var(--font-weight-regular, 400);
    --rf-weight-bold: var(--font-weight-bold, 700);

    --rf-radius: 10px;
    --rf-gap: 1rem;
    /* Deeper card shadow, matching the mock-up's larger surfaces */
    --rf-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
    --rf-field-height: 3.5rem;
    --rf-section-gap: 2.75rem;
}

.regbc-register-form {
    box-sizing: border-box;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    color: #fff;
    font-size: 1rem;
    /* Oxygen sets text-align:justify on some sections - don't inherit it */
    text-align: left;
}

/* --- Empty-state -----------------------------------------------
   The .ad-form section is an empty shell until a package is chosen
   and the form is injected into it. Rather than hide it, drop only
   its bottom padding while empty: the top padding still separates it
   from the panel above, and the sections either side keep their own
   spacing untouched. Once the form is injected the section's default
   padding applies again, with no JS involved.
   The injected markup always carries .regbc-register-form (see
   get_ad_form() in inc/shortcodes.php). */
.ad-form:not(:has(.regbc-register-form)) > .ct-section-inner-wrap {
    padding-bottom: 0;
}

/* regbc-styles.css gives the last section in .ct-inner-content a
   padding-bottom of var(--space-2x) - double - at (0,4,2). This mirrors
   that selector plus .ad-form, landing at (0,5,2) so it wins on
   specificity rather than on stylesheet order, and covers the 768px
   variant of that rule too. */
html .ct-inner-content section.ad-form:not(.h1-lines):not(:has(.regbc-register-form)) .ct-section-inner-wrap {
    padding-bottom: 0;
}

/* Oxygen's .ct-section-inner-wrap is a flex column with
   align-items:flex-start, which leaves its children shrink-to-fit.
   Claim the full row for the element holding .regbc-register-form. */
.ct-section-inner-wrap > :has(> .regbc-register-form) {
    align-self: stretch;
    width: 100%;
}

.regbc-register-form *,
.regbc-register-form *::before,
.regbc-register-form *::after {
    box-sizing: border-box;
}

.regbc-register-form p,
.regbc-register-form label,
.regbc-register-form li,
.regbc-register-form td,
.regbc-register-form th {
    text-align: left;
}

/* --- Headings ------------------------------------------------ */

.regbc-register-form .rcp_header {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: var(--rf-font-heading);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: var(--rf-weight-regular);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.regbc-register-form .rcp_header + form::before,
.regbc-register-form > form::before {
    content: "Your information is secure and will never be shared.";
    display: block;
    margin: 0.75rem 0 var(--rf-section-gap);
    color: #fff;
    font-size: 1rem;
}

/* Section titles - drawn in the mock-up, absent from RCP's markup */
.regbc-register-form .rcp_user_fieldset::before,
.regbc-register-form .rcp_card_fieldset::before,
.regbc-register-form .rcp_primary_area_fieldset > #rcp_primary_area_wrap > label,
.regbc-register-form .rcp_subscription_message {
    display: block;
    margin: 0 0 1.25rem;
    color: #fff;
    font-family: var(--rf-font-heading);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: var(--rf-weight-regular);
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: none;
}

.regbc-register-form .rcp_user_fieldset::before {
    content: "Account Information";
    grid-column: 1 / -1;
    order: 0;
}

.regbc-register-form .rcp_card_fieldset::before {
    content: "Payment Information";
    grid-column: 1 / -1;
}

/* --- Sections ------------------------------------------------- */

.regbc-register-form fieldset {
    margin: 0 0 var(--rf-section-gap);
    padding: 0;
    border: 0;
}

.regbc-register-form .rcp_subscription_fieldset,
.regbc-register-form .rcp_primary_area_fieldset,
.regbc-register-form .rcp_gateway_fields {
    padding-top: var(--rf-section-gap);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.regbc-register-form p {
    margin: 0 0 1.5rem;
}

/* --- Fields ---------------------------------------------------- */

.regbc-register-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: var(--rf-weight-regular);
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.regbc-register-form input[type="text"],
.regbc-register-form input[type="email"],
.regbc-register-form input[type="tel"],
.regbc-register-form input[type="password"],
.regbc-register-form select {
    width: 100%;
    min-height: var(--rf-field-height);
    padding: 0.75rem 1.125rem;
    background: #fff;
    border: 1px solid var(--rf-accent);
    border-radius: var(--rf-radius);
    color: var(--rf-navy);
    font-family: inherit;
    /* 1rem minimum - anything smaller makes iOS zoom on focus */
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.regbc-register-form input[type="text"]:focus,
.regbc-register-form input[type="email"]:focus,
.regbc-register-form input[type="tel"]:focus,
.regbc-register-form input[type="password"]:focus,
.regbc-register-form select:focus {
    border-color: var(--rf-red);
    box-shadow: 0 0 0 3px rgba(196, 0, 53, 0.25);
    outline: none;
}

.regbc-register-form ::placeholder {
    color: var(--rf-navy);
    opacity: 0.55;
}

/* Red chevron, as drawn in the mock-up */
.regbc-register-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath fill='none' stroke='%23C40035' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.5 8 8l6.5-6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.125rem center;
    background-size: 1rem 0.625rem;
}

/* --- Account + card fields: two-up, collapsing on its own ----- */

.regbc-register-form .rcp_user_fieldset,
.regbc-register-form .rcp_card_fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    column-gap: var(--rf-gap);
}

.regbc-register-form .rcp_user_fieldset > p {
    min-width: 0;
}

/* Mock-up order (name, then credentials) now comes from the markup itself -
   see rcp/register-common.php. Reordering here with `order` left tab sequence,
   screen-reader order and autofill following the original source order. */

.regbc-register-form .rcp_user_login_error {
    display: block;
    margin-top: 0.375rem;
}

/* --- Membership level: white card ---------------------------- */

.regbc-register-form #rcp_subscription_levels {
    margin: 0;
    padding: 0;
    list-style: none;
}

.regbc-register-form .rcp_subscription_level {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--rf-accent);
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow);
}

.regbc-register-form .rcp_subscription_level:last-child {
    margin-bottom: 0;
}

.regbc-register-form .rcp_subscription_level:has(input:checked) {
    border-color: var(--rf-red);
    /* keep the card shadow - the ring is additive, not a replacement */
    box-shadow: 0 0 0 1px var(--rf-red), var(--rf-shadow);
}

/* :has()-gated on purpose - without :has() support the native radio
   stays visible, since the styled dot below would not render. */
.regbc-register-form #rcp_subscription_levels:has(li) .rcp_subscription_level input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.regbc-register-form .rcp_subscription_level label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin: 0;
    padding: 1.125rem 1.5rem;
    color: var(--rf-text);
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

.regbc-register-form #rcp_subscription_levels:has(li + li) .rcp_subscription_level label::before {
    content: "";
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    background: #fff;
    border: 2px solid var(--rf-accent);
    border-radius: 50%;
}

.regbc-register-form #rcp_subscription_levels:has(li + li) .rcp_subscription_level:has(input:checked) label::before {
    border-color: var(--rf-red);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 1.125rem var(--rf-red);
}

.regbc-register-form .rcp_subscription_level_name,
.regbc-register-form .rcp_price {
    color: var(--rf-blue);
    font-family: var(--rf-font-heading);
    font-size: 1.25rem;
}

.regbc-register-form .rcp_level_duration {
    color: var(--rf-text);
    font-size: 0.9375rem;
}

/* Thin the separators RCP prints between name, price and duration -
   kept rather than hidden, since the duration string varies
   ("1 Month", "per month", "unlimited") and reads wrong without them. */
.regbc-register-form .rcp_separator {
    color: var(--rf-accent);
    opacity: 0.5;
    font-size: 0.875rem;
}

.regbc-register-form .rcp_level_description {
    flex: 1 0 100%;
    color: var(--rf-text);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.regbc-register-form .rcp_level_description:empty {
    display: none;
}

/* --- Primary advertising area -------------------------------- */

.regbc-register-form #rcp_primary_area_wrap > span {
    display: block;
    max-width: 60ch;
    margin-bottom: 1.25rem;
    color: #fff;
    font-size: 1rem;
    line-height: 1.55;
}

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

.regbc-register-form .rcp_discount_code_field_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 34rem;
}

.regbc-register-form .rcp_discount_code_field_wrap input[type="text"] {
    flex: 1 1 12rem;
    min-width: 0;
}

.regbc-register-form #rcp_apply_discount {
    flex: 0 0 auto;
    min-height: var(--rf-field-height);
    padding: 0.5em 1.5em;
    background: var(--rf-accent);
    border: 1px solid transparent;
    border-radius: var(--rf-radius);
    color: #fff;
    font-family: var(--rf-font-body);
    font-size: 1rem;
    font-weight: var(--rf-weight-bold);
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.regbc-register-form #rcp_apply_discount:hover {
    background: var(--rf-red);
}

.regbc-register-form .rcp_discount_valid { color: #8ff0b4; }
.regbc-register-form .rcp_discount_invalid { color: #ffc2ce; }

/* --- Card fields --------------------------------------------- */

.regbc-register-form #rcp_card_name_wrap,
.regbc-register-form #rcp_card_wrap {
    margin-bottom: 1.5rem;
    min-width: 0;
}

/* Stripe Elements mounts an iframe into #rcp-card-element. Stripe's
   guidance is to style this as a plain block container - padding,
   border, background only - and to leave its display, position and
   sizing alone so their script can measure and size the iframe.
   Deliberately NOT display:flex and NOT part of the shared input rule
   above: nothing here should be able to affect the payment field's
   behaviour, only its frame. */
.regbc-register-form #rcp-card-element {
    width: 100%;
    padding: 1rem 1.125rem;
    background: #fff;
    border: 1px solid var(--rf-accent);
    border-radius: var(--rf-radius);
}

.regbc-register-form #rcp-card-element-errors:not(:empty) {
    margin-bottom: 1.5rem;
    color: #ffc2ce;
    font-size: 0.9375rem;
}

.regbc-register-form #rcp_payment_gateways {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.regbc-register-form .rcp_gateway_option_label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

/* --- Order summary: white card ------------------------------- */

.regbc-register-form .rcp_registration_total {
    margin: 0 0 var(--rf-section-gap);
    padding: 0.25rem 1.75rem 1rem;
    background: #fff;
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow);
}

/* RCP's AJAX replaces this div's contents with a template that carries its
   own .rcp_registration_total wrapper, so the class ends up nested (visible
   in the live site's markup). Keep the card treatment on the outer one only. */
.regbc-register-form .rcp_registration_total .rcp_registration_total {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.regbc-register-form .rcp_registration_total table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

/* profile-styling.css paints .rcp-table thead tr navy, and RCP's totals table
   carries that class. Reset the row, not just its cells. */
.regbc-register-form .rcp_registration_total tr,
.regbc-register-form .rcp_registration_total thead tr {
    background: none;
}

.regbc-register-form .rcp_registration_total th,
.regbc-register-form .rcp_registration_total td {
    padding: 0.75rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rf-accent);
    color: var(--rf-text);
    font-size: 1rem;
    font-weight: var(--rf-weight-regular);
    vertical-align: top;
}

.regbc-register-form .rcp_registration_total thead th {
    color: var(--rf-blue);
    font-family: var(--rf-font-heading);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.regbc-register-form .rcp_registration_total td + td {
    text-align: right;
    white-space: nowrap;
}

.regbc-register-form .rcp_registration_total tr:last-child th,
.regbc-register-form .rcp_registration_total tr:last-child td {
    border-bottom: 0;
}

.regbc-register-form .rcp_registration_total .rcp-total td,
.regbc-register-form .rcp_registration_total .rcp-total td + td {
    color: var(--rf-blue);
    font-weight: var(--font-weight-semibold, 600);
}

/* --- Terms / privacy ------------------------------------------ */

.regbc-register-form .rcp_agree_to_terms_fieldset,
.regbc-register-form .rcp_agree_to_privacy_policy_fieldset {
    margin-bottom: 0.75rem;
}

.regbc-register-form #rcp_agree_to_terms_wrap,
.regbc-register-form #rcp_agree_to_privacy_policy_wrap {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
}

.regbc-register-form #rcp_agree_to_terms_wrap input[type="checkbox"],
.regbc-register-form #rcp_agree_to_privacy_policy_wrap input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    cursor: pointer;
}

.regbc-register-form #rcp_agree_to_terms_wrap input[type="checkbox"]:checked,
.regbc-register-form #rcp_agree_to_privacy_policy_wrap input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5 8.5 15 16 5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
}

.regbc-register-form #rcp_agree_to_terms_wrap input[type="checkbox"]:focus-visible,
.regbc-register-form #rcp_agree_to_privacy_policy_wrap input[type="checkbox"]:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.regbc-register-form #rcp_agree_to_terms_wrap label,
.regbc-register-form #rcp_agree_to_privacy_policy_wrap label {
    margin: 0;
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

/* RCP's label contains only the link text ("Terms of Use"), which reads as a
   link rather than a consent statement. Name the action in front of it. */
.regbc-register-form #rcp_agree_to_terms_wrap label::before,
.regbc-register-form #rcp_agree_to_privacy_policy_wrap label::before {
    content: "I agree to the ";
}

.regbc-register-form a {
    color: #fff;
    text-decoration: underline;
}

/* --- Submit --------------------------------------------------- */

.regbc-register-form #rcp_submit_wrap {
    margin: var(--rf-section-gap) 0 0;
}

/* Same box model as the site's global .btn-red (see packages-styling.css) */
.regbc-register-form #rcp_submit,
.regbc-register-form .rcp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 25rem;
    padding: 0.5em 1.5em;
    background: var(--rf-red);
    border: 1px solid transparent;
    border-radius: var(--rf-radius);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: var(--rf-font-body);
    font-size: 1rem;
    font-weight: var(--rf-weight-bold);
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.regbc-register-form #rcp_submit:hover,
.regbc-register-form .rcp-button:hover {
    background: #a3002c;
}

.regbc-register-form #rcp_submit:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

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

.regbc-register-form .rcp_message,
.regbc-register-form p.error {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: var(--rf-radius);
    color: var(--rf-text);
    font-size: 1rem;
}

.regbc-register-form .rcp_message.error,
.regbc-register-form p.error {
    border-left: 4px solid var(--rf-red);
    color: #8c0c20;
}

.regbc-register-form .rcp_message.success {
    border-left: 4px solid #1a7f45;
}

.regbc-register-form .rcp_login_link {
    margin-bottom: 1.5rem;
}

/* --- Narrow viewports ----------------------------------------- */

@media (max-width: 40em) {
    .regbc-register-form {
        --rf-section-gap: 2rem;
    }

    .regbc-register-form .rcp_discount_code_field_wrap,
    .regbc-register-form #rcp_submit,
    .regbc-register-form .rcp-button {
        max-width: none;
    }
}

/* ============================================================
   RCP LOGIN FORM - member login page

   Same tokens, field treatment and button as the registration
   form above, so the two read as one system. Like that form it
   is designed to sit on the #004990 page blue.

   Replaces the old #rcp_login_form rule in regbc-styles.css,
   whose display:flex + justify-content:center was centring the
   labels and squeezing the fields to their content width.
   ============================================================ */

#rcp_login_form {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    color: #fff;
    font-size: 1rem;
    text-align: left;
}

#rcp_login_form *,
#rcp_login_form *::before,
#rcp_login_form *::after {
    box-sizing: border-box;
}

#rcp_login_form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

#rcp_login_form p {
    margin: 0 0 1.5rem;
    text-align: left;
}

#rcp_login_form label {
    display: block;
    margin-bottom: 0.5rem;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: var(--rf-weight-regular);
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

#rcp_login_form input[type="text"],
#rcp_login_form input[type="email"],
#rcp_login_form input[type="password"] {
    width: 100%;
    min-height: var(--rf-field-height);
    padding: 0.75rem 1.125rem;
    background: #fff;
    border: 1px solid var(--rf-accent);
    border-radius: var(--rf-radius);
    color: var(--rf-navy);
    font-family: inherit;
    /* 1rem minimum - anything smaller makes iOS zoom on focus */
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#rcp_login_form input[type="text"]:focus,
#rcp_login_form input[type="email"]:focus,
#rcp_login_form input[type="password"]:focus {
    border-color: var(--rf-red);
    box-shadow: 0 0 0 3px rgba(196, 0, 53, 0.25);
    outline: none;
}

/* Remember me - checkbox and its label on one line */
#rcp_login_form p:has(> #rcp_user_remember) {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

#rcp_login_form #rcp_user_remember {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    cursor: pointer;
}

#rcp_login_form #rcp_user_remember:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5 8.5 15 16 5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
}

#rcp_login_form #rcp_user_remember:focus-visible,
#rcp_login_submit:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

#rcp_login_form #rcp_user_remember + label {
    margin: 0;
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

#rcp_login_form .rcp_lost_password {
    margin-bottom: 1.75rem;
    font-size: 0.9375rem;
}

#rcp_login_form a {
    color: #fff;
    text-decoration: underline;
}

/* Same box model as the site's global .btn-red */
#rcp_login_submit,
#rcp_login_form .rcp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.5em 1.5em;
    background: var(--rf-red);
    border: 1px solid transparent;
    border-radius: var(--rf-radius);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: var(--rf-font-body);
    font-size: 1rem;
    font-weight: var(--rf-weight-bold);
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#rcp_login_submit:hover,
#rcp_login_form .rcp-button:hover {
    background: #a3002c;
}

/* Messages around the form */
.rcp_form .rcp_message,
.rcp_success,
p.rcp_error {
    max-width: 34rem;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: var(--rf-radius, 10px);
    color: var(--rf-text, #3F4950);
    font-size: 1rem;
    text-align: left;
}

.rcp_success {
    border-left: 4px solid #1a7f45;
}

p.rcp_error {
    border-left: 4px solid var(--rf-red, #c40035);
}