/*!
 * SGR Signup Page — Front-end Styles
 * Author : Paqayad
 * Scope  : body.sgr-signup-active  (added by PHP on configured pages)
 *
 * Cleaned, consolidated rewrite of the original 1,470-line Custom CSS.
 * All duplicate "FIX / FINAL FIX / FINAL BUTTON FIX" layers merged into
 * one source of truth per selector. Final visual is preserved.
 * --------------------------------------------------------------- */


/* ===============================================================
   1.  DESIGN TOKENS
   =============================================================== */
body.sgr-signup-active {
    --sgr-yellow:        #f5f25f;
    --sgr-yellow-soft:   rgba(245, 242, 95, 0.14);
    --sgr-yellow-border: rgba(245, 242, 95, 0.36);
    --sgr-yellow-strong: rgba(245, 242, 95, 0.50);

    --sgr-bg:            #000000;
    --sgr-panel:         rgba(18, 18, 22, 0.72);
    --sgr-card-dark:     rgba(12, 12, 14, 0.82);
    --sgr-card-deep:     rgba(20, 20, 16, 0.92);

    --sgr-text:          #f5f5f7;
    --sgr-text-strong:   #ffffff;
    --sgr-muted:         rgba(255, 255, 255, 0.62);

    --sgr-border:        rgba(255, 255, 255, 0.09);
    --sgr-border-soft:   rgba(255, 255, 255, 0.06);
    --sgr-divider:       rgba(255, 255, 255, 0.10);

    --sgr-radius-xl:     30px;
    --sgr-radius-lg:     24px;
    --sgr-radius-md:     18px;

    --sgr-shadow:        0 28px 70px rgba(0, 0, 0, 0.50);
    --sgr-shadow-card:   inset 0 1px 0 rgba(255, 255, 255, 0.08),
                         0 16px 34px rgba(0, 0, 0, 0.32),
                         0 0 28px rgba(245, 242, 95, 0.10);

    background: var(--sgr-bg) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;

    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Stop the html element from scrolling sideways when our body class is on */
html:has(body.sgr-signup-active),
html.sgr-signup-html {
    overflow-x: hidden;
    max-width: 100vw;
}


/* ===============================================================
   2.  CINEMATIC BACKGROUND OVERLAY
   =============================================================== */
body.sgr-signup-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 18%, rgba(245, 242, 95, 0.13), transparent 27%),
        radial-gradient(circle at 28% 72%, rgba(245, 242, 95, 0.07), transparent 25%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.92)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.82));
}

body.sgr-signup-active .site-content,
body.sgr-signup-active .elementor,
body.sgr-signup-active .entry-content {
    position: relative;
    z-index: 2;
}


/* ===============================================================
   3.  PAGE HEADINGS
   =============================================================== */
body.sgr-signup-active h1,
body.sgr-signup-active h2,
body.sgr-signup-active h3,
body.sgr-signup-active h4,
body.sgr-signup-active h5,
body.sgr-signup-active h6,
body.sgr-signup-active .elementor-heading-title,
body.sgr-signup-active .arm_step_title,
body.sgr-signup-active .arm_setup_main_step_title,
body.sgr-signup-active .arm_setup_step_title,
body.sgr-signup-active [class*="step_title"],
body.sgr-signup-active [class*="_title_label"] {
    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;
    opacity: 1 !important;
    letter-spacing: -0.035em !important;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Last-resort catch-all: any direct child of the signup form that
   looks like a heading text node (no nested controls) gets whitened. */
body.sgr-signup-active .arm_setup_form > div > h1,
body.sgr-signup-active .arm_setup_form > div > h2,
body.sgr-signup-active .arm_setup_form > div > h3,
body.sgr-signup-active .arm_setup_form > div > h4,
body.sgr-signup-active .arm_setup_form > h1,
body.sgr-signup-active .arm_setup_form > h2,
body.sgr-signup-active .arm_setup_form > h3,
body.sgr-signup-active .arm_setup_form > h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


/* ===============================================================
   4.  ELEMENTOR "ALREADY A MEMBER" BUTTON
   =============================================================== */
body.sgr-signup-active .elementor-button {
    background: linear-gradient(180deg, #fff97a 0%, var(--sgr-yellow) 100%) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-radius: 999px !important;
    padding: 13px 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 14px 28px rgba(0, 0, 0, 0.28) !important;
    transition: all .22s ease !important;
}

body.sgr-signup-active .elementor-button * {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

body.sgr-signup-active .elementor-button:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 18px 34px rgba(0, 0, 0, 0.34) !important;
}


/* ===============================================================
   5.  ARMEMBER SIGNUP CONTAINER & GLASS PANEL
   =============================================================== */
body.sgr-signup-active .arm_setup_form_container,
body.sgr-signup-active .arm_setup_form,
body.sgr-signup-active .arm_form_101 {
    max-width: 560px !important;
    width: 100% !important;
}

body.sgr-signup-active .arm_setup_form {
    position: relative !important;
    background: var(--sgr-panel) !important;
    border: 1px solid var(--sgr-border) !important;
    border-radius: var(--sgr-radius-xl) !important;
    padding: 28px !important;
    box-shadow: var(--sgr-shadow) !important;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    overflow: hidden !important;
}

body.sgr-signup-active .arm_setup_form::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%),
        radial-gradient(circle at 50% 0%, rgba(245, 242, 95, 0.08), transparent 35%);
}

body.sgr-signup-active .arm_setup_form > * {
    position: relative;
    z-index: 2;
}

/* Transparent backgrounds for all inner ARMember wrappers */
body.sgr-signup-active .arm_module_plans_container,
body.sgr-signup-active .arm_module_plans_main_container,
body.sgr-signup-active .arm_module_plans_ul,
body.sgr-signup-active .arm_setup_column_plan,
body.sgr-signup-active .arm_setup_column_item,
body.sgr-signup-active .arm_module_box,
body.sgr-signup-active .arm_setup_plan_main_wrapper,
body.sgr-signup-active .arm_setup_plan_wrapper,
body.sgr-signup-active .arm_setup_section,
body.sgr-signup-active .arm_setup_plan_section,
body.sgr-signup-active .arm_setup_plan_container,
body.sgr-signup-active .arm_setup_plan_area {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


/* ===============================================================
   6.  SECTION TITLES  (Choose Plan / Select Payment Method)
   =============================================================== */
body.sgr-signup-active .arm_setup_section_title_wrapper {
    width: 100% !important;
    display: block !important;
    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;
    text-align: center !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    margin: 0 auto 24px !important;
    padding: 0 22px !important;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

body.sgr-signup-active .arm_setup_section_title_wrapper * {
    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;
}

/* Broad coverage for plan/section titles across ARMember versions */
body.sgr-signup-active .arm_setup_form h1,
body.sgr-signup-active .arm_setup_form h2,
body.sgr-signup-active .arm_setup_form h3,
body.sgr-signup-active .arm_setup_form h4,
body.sgr-signup-active .arm_setup_form h5,
body.sgr-signup-active .arm_setup_form h6,
body.sgr-signup-active .arm_setup_form legend,
body.sgr-signup-active .arm_setup_plan_main_wrapper > *:first-child,
body.sgr-signup-active .arm_setup_plan_wrapper > *:first-child,
body.sgr-signup-active [class*="_plan_title"],
body.sgr-signup-active [class*="_plan_section_title"],
body.sgr-signup-active [class*="_choose_plan"],
body.sgr-signup-active .arm_setup_main_title,
body.sgr-signup-active .arm_setup_choose_plan_title,
body.sgr-signup-active .arm_module_plans_title,
body.sgr-signup-active .arm_setup_plan_title,
body.sgr-signup-active .arm_module_section_title,
body.sgr-signup-active .arm_form_field_title_label,
body.sgr-signup-active .arm_form_field_label,
body.sgr-signup-active .arm_form_label_normal,
body.sgr-signup-active .arm_form_label_container_normal,
body.sgr-signup-active .arm-df__form-field-title,
body.sgr-signup-active .arm-df__form-field-label {
    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;
    opacity: 1 !important;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

/* Section dividers */
body.sgr-signup-active .arm_setup_gatewaybox_main_wrapper,
body.sgr-signup-active .arm_payment_mode_main_wrapper,
body.sgr-signup-active .arm_setup_summary_text_container {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--sgr-divider) !important;
}

/* Section breathing room */
body.sgr-signup-active .arm_setup_plan_main_wrapper,
body.sgr-signup-active .arm_setup_plan_wrapper,
body.sgr-signup-active .arm_module_plans_container,
body.sgr-signup-active .arm_module_plans_main_container,
body.sgr-signup-active .arm_setup_gatewaybox_main_wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
}


/* ===============================================================
   7.  PLAN / GATEWAY LIST RESETS
   =============================================================== */
body.sgr-signup-active .arm_module_plans_ul,
body.sgr-signup-active .arm_module_gateways_ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

body.sgr-signup-active .arm_module_plans_ul > li,
body.sgr-signup-active .arm_module_gateways_ul > li,
body.sgr-signup-active .arm_setup_column_item {
    list-style: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ===============================================================
   8.  PLAN GRID
   =============================================================== */
body.sgr-signup-active .arm_module_plans_ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    margin-top: 4px !important;
}


/* ===============================================================
   9.  PLAN CARD  — base, hover, selected
   =============================================================== */
body.sgr-signup-active .arm_module_plan_option {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 170px !important;
    height: auto !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    padding: 18px !important;
    border-radius: 26px !important;
    border: 1px solid var(--sgr-border-soft) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        var(--sgr-card-dark) !important;
    color: var(--sgr-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 12px 28px rgba(0, 0, 0, 0.18) !important;

    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    transition: all .24s ease !important;
}

body.sgr-signup-active .arm_module_plan_option:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 38px rgba(0, 0, 0, 0.26) !important;
}

/* Selected plan — gold-dust background */
body.sgr-signup-active .arm_setup_column_item.arm_active .arm_module_plan_option,
body.sgr-signup-active .arm_setup_column_item.tv-plan-selected .arm_module_plan_option {
    border-color: rgba(245, 242, 95, 0.55) !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(245, 242, 95, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 22%, rgba(245, 242, 95, 0.25) 0 1.5px, transparent 3px),
        radial-gradient(circle at 44% 64%, rgba(245, 242, 95, 0.20) 0 1.5px, transparent 3px),
        radial-gradient(circle at 83% 78%, rgba(245, 242, 95, 0.22) 0 1.5px, transparent 3px),
        linear-gradient(180deg, rgba(245, 242, 95, 0.17), rgba(255, 255, 255, 0.025)),
        var(--sgr-card-deep) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 20px 46px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(245, 242, 95, 0.14) !important;
}

/* Selected plan — gold shimmer overlay */
body.sgr-signup-active .arm_setup_column_item.arm_active .arm_module_plan_option::after,
body.sgr-signup-active .arm_setup_column_item.tv-plan-selected .arm_module_plan_option::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.75;
    background:
        radial-gradient(circle at 20% 30%, rgba(245, 242, 95, 0.30), transparent 8%),
        radial-gradient(circle at 80% 70%, rgba(245, 242, 95, 0.16), transparent 10%),
        linear-gradient(135deg, rgba(245, 242, 95, 0.08), transparent 42%);
}


/* ===============================================================
   10. PLAN CARD CONTENT  (name, price, type)
   =============================================================== */
body.sgr-signup-active .arm_module_plan_name,
body.sgr-signup-active .arm_module_plan_price,
body.sgr-signup-active .arm_module_plan_price_type,
body.sgr-signup-active .arm_module_plan_cycle_price,
body.sgr-signup-active .arm_module_plan_description,
body.sgr-signup-active .arm_module_gateway_span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    color: var(--sgr-text) !important;
    -webkit-text-fill-color: var(--sgr-text) !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

/* Force left-aligned, LTR text on plan card content. Some mobile
   themes / ARMember versions inherit right-alignment via RTL hooks. */
body.sgr-signup-active .arm_module_plan_option,
body.sgr-signup-active .arm_module_plan_option *,
body.sgr-signup-active .arm_module_plan_name,
body.sgr-signup-active .arm_module_plan_price,
body.sgr-signup-active .arm_module_plan_price_type,
body.sgr-signup-active .arm_module_plan_cycle_price,
body.sgr-signup-active .arm_module_plan_description {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: left !important;
    align-self: stretch !important;
}

body.sgr-signup-active .arm_module_plan_name {
    font-size: 16px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 6px 0 0 !important;
    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;
}

body.sgr-signup-active .arm_module_plan_price_type {
    width: 100% !important;
    margin-top: 14px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--sgr-divider) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.sgr-signup-active .arm_module_plan_price,
body.sgr-signup-active .arm_module_plan_cycle_price {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    width: 100% !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;
    white-space: nowrap !important;
}

body.sgr-signup-active .arm_module_plan_price span,
body.sgr-signup-active .arm_module_plan_cycle_price span {
    color: var(--sgr-muted) !important;
}

/* Selected card: brighten plan text */
body.sgr-signup-active .arm_setup_column_item.arm_active .arm_module_plan_name,
body.sgr-signup-active .arm_setup_column_item.tv-plan-selected .arm_module_plan_name,
body.sgr-signup-active .arm_setup_column_item.arm_active .arm_module_plan_price,
body.sgr-signup-active .arm_setup_column_item.tv-plan-selected .arm_module_plan_price,
body.sgr-signup-active .arm_setup_column_item.arm_active .arm_module_plan_cycle_price,
body.sgr-signup-active .arm_setup_column_item.tv-plan-selected .arm_module_plan_cycle_price {
    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;
}


/* ===============================================================
   11. CHECK CIRCLES
   =============================================================== */
body.sgr-signup-active .arm_setup_check_circle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.26) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 12px !important;
    box-shadow: none !important;
}

/* Selected — yellow fill, black check */
body.sgr-signup-active .arm_active .arm_setup_check_circle,
body.sgr-signup-active .tv-plan-selected .arm_setup_check_circle {
    background: var(--sgr-yellow) !important;
    border-color: var(--sgr-yellow) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    font-weight: 900 !important;
    box-shadow: 0 0 18px rgba(245, 242, 95, 0.35) !important;
}

/* Unselected — empty yellow ring */
body.sgr-signup-active .arm_setup_column_item:not(.arm_active):not(.tv-plan-selected) .arm_setup_check_circle {
    background: transparent !important;
    border-color: rgba(245, 242, 95, 0.65) !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}


/* ===============================================================
   12. PAYMENT GATEWAY OPTIONS
   =============================================================== */
body.sgr-signup-active .arm_module_gateways_ul,
body.sgr-signup-active .arm_module_gateways_ul > li {
    display: block !important;
    width: 100% !important;
}

body.sgr-signup-active .arm_module_gateway_option {
    width: min(100%, 390px) !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    padding: 0 22px !important;
    text-align: center !important;

    background:
        radial-gradient(circle at 12% 50%, rgba(245, 242, 95, 0.18), transparent 14%),
        linear-gradient(180deg, rgba(245, 242, 95, 0.10), rgba(255, 255, 255, 0.025)),
        var(--sgr-card-deep) !important;
    border: 1px solid var(--sgr-yellow-strong) !important;
    border-radius: var(--sgr-radius-lg) !important;
    color: var(--sgr-text-strong) !important;
    box-shadow: var(--sgr-shadow-card) !important;
    transition: all .22s ease !important;
}

body.sgr-signup-active .arm_module_gateway_option:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 242, 95, 0.68) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 38px rgba(0, 0, 0, 0.36),
        0 0 34px rgba(245, 242, 95, 0.14) !important;
}

body.sgr-signup-active .arm_module_gateway_span {
    width: auto !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

body.sgr-signup-active .arm_module_gateway_option .arm_setup_check_circle {
    margin: 0 !important;
    flex: 0 0 auto !important;
}


/* ===============================================================
   13. PAYMENT SUMMARY BOX
   =============================================================== */
body.sgr-signup-active .arm_setup_summary_text_container,
body.sgr-signup-active .arm_setup_summary_text {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important;
    border: 1px solid var(--sgr-border-soft) !important;
    border-radius: var(--sgr-radius-lg) !important;
    padding: 20px !important;
    color: var(--sgr-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

body.sgr-signup-active .arm_setup_summary_text * {
    font-size: 15px !important;
    line-height: 1.45 !important;
}

body.sgr-signup-active .arm_setup_summary_text strong,
body.sgr-signup-active .arm_setup_summary_text_container strong {
    color: var(--sgr-yellow) !important;
    font-weight: 900 !important;
}


/* ===============================================================
   14. FORM INPUTS
   =============================================================== */
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="text"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="email"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="password"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="tel"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="number"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active select,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active textarea {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: var(--sgr-radius-md) !important;
    color: var(--sgr-text-strong) !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    outline: none !important;
}

body.sgr-signup-active.sgr-signup-active.sgr-signup-active input::placeholder,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active textarea::placeholder {
    color: rgba(255, 255, 255, 0.40) !important;
}

body.sgr-signup-active input:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active select:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active textarea:focus {
    border-color: rgba(245, 242, 95, 0.44) !important;
    box-shadow: 0 0 0 4px rgba(245, 242, 95, 0.10) !important;
}


/* ===============================================================
   15. SUBMIT BUTTON  (matches gateway-card style)
   The .sgr-submit-wrap element is injected by sgr-signup.js so the
   yellow check icon is a real DOM node (not a pseudo) and stays on
   top of the button. All interactive states use the SAME background
   - clicks must NOT flash to a different color.
   =============================================================== */

/* Submit wrappers (JS-injected + ARMember native wrappers) */
body.sgr-signup-active .sgr-submit-wrap,
body.sgr-signup-active .arm_form_field_submit,
body.sgr-signup-active .arm_form_field_submit_wrapper,
body.sgr-signup-active .arm-df__form-field-submit,
body.sgr-signup-active .arm_setup_submit_btn_wrapper,
body.sgr-signup-active .tv-submit-final {
    position: relative !important;
    width: min(100%, 390px) !important;
    margin: 26px auto 0 !important;
    z-index: 1;
    isolation: isolate;
}

/* Real DOM check icon (injected by JS) - always above the button */
body.sgr-signup-active .sgr-submit-check {
    position: absolute;
    top: 50%;
    left: 50%;
    /* sit just to the left of the centered "Submit" label */
    transform: translate(calc(-50% - 52px), -50%);
    z-index: 20;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sgr-yellow) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 22px rgba(245, 242, 95, 0.45);
    pointer-events: none;
}

/* Fallback ::before check on ARMember-native wrappers
   (suppressed once our JS has wrapped the submit) */
body.sgr-signup-active .arm_form_field_submit:not(.sgr-has-icon)::before,
body.sgr-signup-active .arm_form_field_submit_wrapper:not(.sgr-has-icon)::before,
body.sgr-signup-active .arm-df__form-field-submit:not(.sgr-has-icon)::before,
body.sgr-signup-active .arm_setup_submit_btn_wrapper:not(.sgr-has-icon)::before,
body.sgr-signup-active .tv-submit-final:not(.sgr-has-icon)::before {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 52px), -50%);
    z-index: 20;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sgr-yellow) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 22px rgba(245, 242, 95, 0.45);
    pointer-events: none;
}

/* Submit button - every interactive state shares the SAME background.
   No color flash on click / focus / active. */
body.sgr-signup-active input[type="submit"],
body.sgr-signup-active input[type="submit"]:hover,
body.sgr-signup-active input[type="submit"]:focus,
body.sgr-signup-active input[type="submit"]:active,
body.sgr-signup-active input[type="submit"]:visited,
body.sgr-signup-active button[type="submit"],
body.sgr-signup-active button[type="submit"]:hover,
body.sgr-signup-active button[type="submit"]:focus,
body.sgr-signup-active button[type="submit"]:active,
body.sgr-signup-active .arm_form_field_submit_button,
body.sgr-signup-active .arm_form_field_submit_button:hover,
body.sgr-signup-active .arm_form_field_submit_button:focus,
body.sgr-signup-active .arm_form_field_submit_button:active,
body.sgr-signup-active .arm-df__form-field-submit input,
body.sgr-signup-active .arm-df__form-field-submit input:hover,
body.sgr-signup-active .arm-df__form-field-submit input:focus,
body.sgr-signup-active .arm-df__form-field-submit input:active,
body.sgr-signup-active .sgr-submit-wrap input[type="submit"],
body.sgr-signup-active .sgr-submit-wrap input[type="submit"]:hover,
body.sgr-signup-active .sgr-submit-wrap input[type="submit"]:focus,
body.sgr-signup-active .sgr-submit-wrap input[type="submit"]:active,
body.sgr-signup-active .sgr-submit-wrap button,
body.sgr-signup-active .sgr-submit-wrap button:hover,
body.sgr-signup-active .sgr-submit-wrap button:focus,
body.sgr-signup-active .sgr-submit-wrap button:active,
body.sgr-signup-active .tv-submit-final input[type="submit"],
body.sgr-signup-active .tv-submit-final button {
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
    padding: 0 24px !important;
    position: relative !important;
    z-index: 1 !important;                      /* below the check icon */

    background:
        radial-gradient(circle at 12% 50%, rgba(245, 242, 95, 0.18), transparent 14%),
        linear-gradient(180deg, rgba(245, 242, 95, 0.10), rgba(255, 255, 255, 0.025)),
        var(--sgr-card-deep) !important;
    background-color: transparent !important;   /* nukes browser default :active fill */

    border: 1px solid var(--sgr-yellow-strong) !important;
    border-radius: var(--sgr-radius-lg) !important;

    color: var(--sgr-text-strong) !important;
    -webkit-text-fill-color: var(--sgr-text-strong) !important;

    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;

    box-shadow: var(--sgr-shadow-card) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
    cursor: pointer !important;
    outline: none !important;
}

/* Only motion + glow change on hover - colors stay the same */
body.sgr-signup-active input[type="submit"]:hover,
body.sgr-signup-active button[type="submit"]:hover,
body.sgr-signup-active .arm_form_field_submit_button:hover,
body.sgr-signup-active .sgr-submit-wrap input[type="submit"]:hover,
body.sgr-signup-active .sgr-submit-wrap button:hover,
body.sgr-signup-active .tv-submit-final input[type="submit"]:hover,
body.sgr-signup-active .tv-submit-final button:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(245, 242, 95, 0.70) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(245, 242, 95, 0.16) !important;
}

/* Active state - keep colors, just press the button slightly */
body.sgr-signup-active input[type="submit"]:active,
body.sgr-signup-active button[type="submit"]:active,
body.sgr-signup-active .arm_form_field_submit_button:active,
body.sgr-signup-active .sgr-submit-wrap input[type="submit"]:active,
body.sgr-signup-active .sgr-submit-wrap button:active {
    transform: translateY(0) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 20px rgba(0, 0, 0, 0.30) !important;
}


/* ===============================================================
   16. JS-INJECTED INTRO / STEP DOTS / PLAN NOTES
   =============================================================== */
body.sgr-signup-active .tv-join-intro {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--sgr-divider);
}

body.sgr-signup-active .tv-join-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--sgr-yellow-soft);
    border: 1px solid rgba(245, 242, 95, 0.30);
    color: var(--sgr-yellow);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.sgr-signup-active .tv-join-heading {
    color: var(--sgr-text-strong);
    font-size: 27px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 8px;
}

body.sgr-signup-active .tv-join-copy {
    max-width: 440px;
    color: var(--sgr-muted);
    font-size: 14px;
    line-height: 1.55;
}

body.sgr-signup-active .tv-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 50%;
    background: rgba(245, 242, 95, 0.12);
    border: 1px solid rgba(245, 242, 95, 0.30);
    color: var(--sgr-yellow);
    font-size: 13px;
    font-weight: 900;
    vertical-align: middle;
}

body.sgr-signup-active .tv-plan-note {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.sgr-signup-active .arm_setup_column_item.arm_active .tv-plan-note,
body.sgr-signup-active .arm_setup_column_item.tv-plan-selected .tv-plan-note {
    background: var(--sgr-yellow-soft);
    border-color: rgba(245, 242, 95, 0.28);
    color: var(--sgr-yellow);
}


/* ===============================================================
   16.5  ARMEMBER SIGNUP FORM PANEL  (Please Signup / fields)
   Force the standalone signup form into the same dark glass theme.
   Without this, ARMember renders a white panel that overflows the
   dark page background on mobile.
   =============================================================== */
body.sgr-signup-active [id^="arm_form_"],
body.sgr-signup-active [class*="arm_form_1"],
body.sgr-signup-active .arm_form_field_group,
body.sgr-signup-active .arm_main_form_container,
body.sgr-signup-active .arm-df__form,
body.sgr-signup-active .arm-df__form-container {
    background: var(--sgr-panel) !important;
    background-color: transparent !important;
    color: var(--sgr-text) !important;
    border-radius: var(--sgr-radius-xl) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

body.sgr-signup-active .arm_main_form_container,
body.sgr-signup-active [id^="arm_form_"] {
    padding: 22px !important;
    margin: 0 auto !important;
    border: 1px solid var(--sgr-border) !important;
    box-shadow: var(--sgr-shadow) !important;
}

/* Field rows and labels */
body.sgr-signup-active .arm_form_field,
body.sgr-signup-active .arm_form_field_container,
body.sgr-signup-active .arm_form_field_inner_container {
    color: var(--sgr-text) !important;
    background-color: transparent !important;
}

/* "Please Signup" / form title — bright white.
   Body class chained 3x to outrank ARMember's nested selectors,
   plus broader class coverage for the various title classes used
   across ARMember versions. */
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_form_field_title,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_form_field_title *,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_form_field_form_title,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_form_field_form_title *,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_form_title,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_form_title *,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_form_field_label_text,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_form_field_main_container .arm_form_field_label,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_main_form_container > h1,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_main_form_container > h2,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_main_form_container > h3,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_main_form_container > h4,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_main_form_container > .arm_form_field:first-child h1,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_main_form_container > .arm_form_field:first-child h2,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active .arm_main_form_container > .arm_form_field:first-child h3,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active [id^="arm_form_"] h1,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active [id^="arm_form_"] h2,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active [id^="arm_form_"] h3,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active [id^="arm_form_"] h4,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active [id^="arm_form_"] > .arm_form_field:first-child h1,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active [id^="arm_form_"] > .arm_form_field:first-child h2,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active [id^="arm_form_"] > .arm_form_field:first-child h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    background-color: transparent !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
}

/* Field labels (Username, First Name, etc.) - bright white on dark page */
body.sgr-signup-active .arm_form_field_label,
body.sgr-signup-active .arm_form_field_label *,
body.sgr-signup-active .arm_form_field_label_text,
body.sgr-signup-active .arm_form_field_label_text *,
body.sgr-signup-active .arm_form_label_normal,
body.sgr-signup-active .arm_form_label_container_normal,
body.sgr-signup-active .arm_main_form_container label,
body.sgr-signup-active .arm_main_form_container label *,
body.sgr-signup-active [id^="arm_form_"] label,
body.sgr-signup-active [id^="arm_form_"] label * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

/* Input fields - SOLID BLACK pill background, WHITE text inside.
   Body class chained 3x to outrank ARMember's nested class selectors
   on the resting (non-focus) state. */
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="text"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="email"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="password"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="tel"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="number"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="url"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="search"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="date"],
body.sgr-signup-active.sgr-signup-active.sgr-signup-active select,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active textarea {
    background: #0a0a0c !important;
    background-color: #0a0a0c !important;
    background-image: none !important;
    border: 1px solid rgba(245, 242, 95, 0.35) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    border-radius: 999px !important;
    padding: 14px 22px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45) !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Multi-line textareas keep rounded-square corners, not pill */
body.sgr-signup-active.sgr-signup-active.sgr-signup-active textarea {
    border-radius: 18px !important;
    min-height: 100px !important;
}

/* Yellow focus ring */
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="text"]:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="email"]:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="password"]:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="tel"]:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="number"]:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="url"]:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="search"]:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input[type="date"]:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active select:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active textarea:focus {
    background: #0a0a0c !important;
    color: #ffffff !important;
    border-color: var(--sgr-yellow) !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.45),
        0 0 0 4px rgba(245, 242, 95, 0.30) !important;
}

/* Placeholder — visible but lower priority than typed text */
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input::placeholder,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active textarea::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
    opacity: 1 !important;
}

/* Defeat browser autofill — keep black bg + white text */
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input:-webkit-autofill,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input:-webkit-autofill:hover,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active input:-webkit-autofill:focus,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active textarea:-webkit-autofill,
body.sgr-signup-active.sgr-signup-active.sgr-signup-active select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0a0a0c inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    border-color: rgba(245, 242, 95, 0.35) !important;
}

/* Native select dropdown chevron (yellow) */
body.sgr-signup-active.sgr-signup-active.sgr-signup-active select {
    background-image:
        linear-gradient(45deg, transparent 50%, #f5f25f 50%),
        linear-gradient(135deg, #f5f25f 50%, transparent 50%) !important;
    background-position: right 22px center, right 16px center !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    padding-right: 38px !important;
}

/* Password-strength bar text + show/hide eye icon */
body.sgr-signup-active .arm_pass_strength_text,
body.sgr-signup-active .arm_pass_strength_label {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* File-drop zone (Avatar) */
body.sgr-signup-active .arm_form_field_file_upload,
body.sgr-signup-active .arm_form_field_upload_container,
body.sgr-signup-active .arm-df__file-dropzone,
body.sgr-signup-active .arm_form_field input[type="file"] + * {
    background: rgba(255,255,255,0.04) !important;
    border: 1.5px dashed rgba(245,242,95,0.45) !important;
    color: var(--sgr-muted) !important;
    border-radius: var(--sgr-radius-md) !important;
}


/* ===============================================================
   17. RESPONSIVE — MOBILE
   =============================================================== */
@media (max-width: 700px) {
    body.sgr-signup-active .arm_setup_form,
    body.sgr-signup-active [id^="arm_form_"],
    body.sgr-signup-active .arm_main_form_container,
    body.sgr-signup-active .arm-df__form-container {
        max-width: calc(100vw - 28px) !important;
        width: calc(100vw - 28px) !important;
        padding: 18px !important;
        border-radius: 22px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.sgr-signup-active .arm_form_field,
    body.sgr-signup-active .arm_form_field_container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.sgr-signup-active .arm_module_plans_ul {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.sgr-signup-active .arm_module_plan_option {
        min-height: 145px !important;
    }

    body.sgr-signup-active .arm_module_plan_price,
    body.sgr-signup-active .arm_module_plan_cycle_price {
        font-size: 24px !important;
    }

    body.sgr-signup-active .arm_setup_section_title_wrapper {
        font-size: 17px !important;
    }

    /* Belt-and-suspenders: never wider than the viewport, never RTL */
    body.sgr-signup-active,
    body.sgr-signup-active .arm_setup_form,
    body.sgr-signup-active .arm_module_plan_option {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body.sgr-signup-active .arm_module_plan_option,
    body.sgr-signup-active .arm_module_plan_option * {
        text-align: left !important;
        direction: ltr !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
}


/* ===============================================================
   18. ADD-ON: SGR ARTIST ONBOARDING FORM
   (force white text in dark form fields)
   =============================================================== */
.sgr-artist-onboarding-wrap input,
.sgr-artist-onboarding-wrap textarea,
.sgr-artist-onboarding-wrap select {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
}


/* ===============================================================
   19. ADD-ON: PLUGNMEET LOGIN FORM
   (separate scope — kept intact, deduped)
   =============================================================== */
.pnm-container form.login-form label.input {
    display: flex;
    align-items: center;
    width: calc(90% - 10px);
    margin: 10px;
    position: relative;
}

.pnm-container form.login-form label.input span {
    min-width: 100px;
    font-size: 16px;
    margin-right: 10px;
    pointer-events: none;
    color: #ffffff;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.pnm-container form.login-form label.input:hover span {
    opacity: 1;
    transform: translateX(5px);
}

.pnm-container form.login-form label.input input {
    flex: 1;
    height: 45px;
    min-width: 200px;
    padding: 8px 15px;
    font-size: 16px;
    color: #ffffff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition: all 0.3s ease;
}

.pnm-container form.login-form label.input input:hover {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.pnm-container form.login-form label.input input:focus {
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    outline: none;
}

.pnm-container form.login-form label.input input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    transition: opacity 0.3s ease;
}

.pnm-container form.login-form label.input input:focus::placeholder {
    opacity: 0.7;
}

.pnm-container form.login-form .btns {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 20px;
}

.pnm-container form.login-form .btns button {
    width: calc(100% - 10px);
    margin: 10px;
    position: relative;
    overflow: hidden;
    color: #000000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(45deg, #ffff00, #cccc00);
    border: 2px solid #ffff00;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
    transition: all 0.3s ease;
}

.pnm-container form.login-form .btns button:hover {
    transform: translateY(-2px);
    background: linear-gradient(45deg, #cccc00, #ffff00);
    box-shadow: 0 0 30px rgba(255, 255, 0, 0.5);
}

.pnm-container form.login-form .btns button:active {
    transform: translateY(1px);
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.4);
}

.pnm-container form.login-form .btns button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.5s ease;
}

.pnm-container form.login-form .btns button:hover::after {
    left: 100%;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .pnm-container form.login-form label.input {
        width: 100%;
    }
}



/* ===============================================================
   20. USER-PROVIDED RULES  (incorporated per request)
   These were positional / hover adjustments from the original
   Tribe-Vibez signup page. Kept in their own section so they can
   be tweaked or removed without touching the rest of the stylesheet.
   Notes:
     - The negative-left nudges on plan name / price assume LEFT
       alignment. If you set "Content alignment" to Center or Right
       in the admin, these may push content off-center.
     - The h3 offset of 131px is wrapped in a desktop-only media
       query so it doesn't shove the heading off-screen on phones.
   =============================================================== */

/* Gateway label - hover background */
body.sgr-signup-active .arm_module_gateways_ul .arm_setup_column_item label:hover {
    background-color: rgba(64, 64, 63, 0.92) !important;
}

/* Setup submit - reset transform */
body.sgr-signup-active #arm_setup_form_input_container1 .arm_setup_submit_btn {
    transform: translateX(0px) translateY(0px);
}

/* Setup submit - hover background */
body.sgr-signup-active #arm_setup_form_input_container1 .arm_setup_submit_btn:hover {
    background-color: rgba(97, 97, 75, 0.92) !important;
}

/* Plan name - horizontal nudge */
body.sgr-signup-active .arm_module_plans_ul .arm_plan_name_box .arm_module_plan_name {
    position: relative;
    left: -25px;
}

/* Plan price - horizontal nudge */
body.sgr-signup-active .arm_module_plans_ul .arm_setup_column_item .arm_module_plan_price {
    position: relative;
    left: -12px;
}

/* Hide the italic tag inside plan name box */
body.sgr-signup-active .arm_module_plans_ul .arm_plan_name_box i {
    position: relative;
    right: -4px;
    display: none !important;
}

/* Plan label - keep transform reset (prevents inherited shifts) */
body.sgr-signup-active .arm_module_plans_ul .arm_setup_column_item label {
    transform: translateX(0px) translateY(0px) !important;
}

/* Setup form heading offset - desktop only (131px is too far for mobile) */
@media (min-width: 700px) {
    body.sgr-signup-active .elementor-shortcode .arm_membership_setup_form h3 {
        position: relative;
        left: 131px;
    }
}