/* ==========================================================================
   NeonLock — ARMember form skin
   Overrides the plugin's own light styling. Nothing in ARMember is edited, so
   plugin updates stay safe. !important is used where ARMember's form editor
   writes inline or high-specificity rules.
   ========================================================================== */

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

   ARMember's own CSS paints the OUTER element white:
     .arm-default-form:not(.arm_admin_member_form){background-color:#fff}
   and the per-form "form_bg_color" option defaults to #FFFFFF as well. The
   neon card therefore has to live on .arm-default-form, with the inner
   .arm-df-wrapper left transparent, or you get a dark card inside a white one.
   -------------------------------------------------------------------------- */
@property --nl-arm-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.arm-default-form,
.arm_front_side_form{
  color:var(--nl-text,#F4EEFF);
  font-family:var(--nl-body,'Inter',system-ui,sans-serif);
}

.arm-default-form:not(.arm_admin_member_form){
  width:min(560px,100%);
  margin-inline:auto !important;
  border-radius:var(--nl-radius,20px) !important;
  border:1px solid transparent !important;
  background:
    linear-gradient(180deg,#120A1F,#09040F) padding-box,
    conic-gradient(from var(--nl-arm-angle),var(--nl-c1,#FF2E88),var(--nl-c2,#A24BFF),var(--nl-c3,#22E4FF),var(--nl-c1,#FF2E88)) border-box !important;
  background-color:transparent !important;
  animation:nl-arm-spin 7s linear infinite;
  box-shadow:0 30px 80px -40px #000, 0 0 60px -34px var(--nl-c2,#A24BFF) !important;
  overflow:hidden;
}
@keyframes nl-arm-spin{to{--nl-arm-angle:360deg}}

/* every wrapper between the card and the fields must be see-through */
.arm-df-wrapper,
.arm-df__fields-wrapper,
.arm_module_forms_container,
.arm_module_plans_container,
.arm_module_gateways_container,
.arm_module_note_container,
.arm-form-container,
.arm_form_container{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.arm-df-wrapper{padding:34px 32px !important;border-radius:var(--nl-radius,20px) !important}

/* catch any other white box the plugin or a form setting wraps around the card */
:is(div,section,form):has(> .arm-default-form),
:is(div,section,form):has(> div > .arm-default-form){
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* wide forms: edit profile, account details */
.arm_account_detail_wrapper .arm-default-form,
.arm-df__fields-wrapper_edit_profile{width:100%}

/* --------------------------------------------------------------------------
   Setup pages (plans + signup on one page)

   The [arm_setup] shortcode wraps every module in a single .arm-default-form:

     <form class="arm-default-form">
       <div class="arm_module_plans_main_container"> ... plans ... </div>
       <div class="arm_module_forms_main_container">
         <div class="arm_module_forms_container"> ... the signup fields ... </div>
       <div class="arm_module_note_container"> payment summary </div>
       ... submit ...
     </form>

   Carding that outer form puts a neon box around the whole page. On these
   pages the outer form goes flat and only the fields module becomes a card.
   -------------------------------------------------------------------------- */
body.nl-arm-setup .arm-default-form,
.arm-default-form:has(.arm_module_plans_container),
.arm-default-form.nl-arm-setup-form{
  width:100% !important;
  max-width:none !important;
  background:none !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  animation:none !important;
  padding:0 !important;
  overflow:visible;
}

body.nl-arm-setup .arm_module_forms_container,
.arm-default-form:has(.arm_module_plans_container) .arm_module_forms_container,
.arm-default-form.nl-arm-setup-form .arm_module_forms_container{
  width:min(560px,100%);
  margin:26px auto 0 !important;
  padding:30px 28px !important;
  border-radius:var(--nl-radius,20px) !important;
  border:1px solid transparent !important;
  background:
    linear-gradient(180deg,#120A1F,#09040F) padding-box,
    conic-gradient(from var(--nl-arm-angle),var(--nl-c1,#FF2E88),var(--nl-c2,#A24BFF),var(--nl-c3,#22E4FF),var(--nl-c1,#FF2E88)) border-box !important;
  animation:nl-arm-spin 7s linear infinite;
  box-shadow:0 30px 80px -40px #000, 0 0 60px -34px var(--nl-c2,#A24BFF) !important;
}
body.nl-arm-setup .arm_module_forms_container .arm-df-wrapper{padding:0 !important}

/* module titles the plugin prints, e.g. "Plans" */
.arm_module_box > label,
.arm_module_plans_main_container > label,
.arm_setup_form_title,
.arm_module_plans_main_container > div:first-child:not([class]){
  display:block;
  font-family:var(--nl-display,'Sora',sans-serif) !important;
  font-weight:700 !important;font-size:15px !important;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--nl-muted,#A292C0) !important;
  margin:0 0 14px !important;
}

/* payment summary */
.arm_module_note_container{
  width:min(560px,100%);
  margin:24px auto 0 !important;
  padding:18px 22px !important;
  border-radius:16px !important;
  border:1px solid var(--nl-line,rgba(190,150,255,.14)) !important;
  background:rgba(255,255,255,.03) !important;
  color:#CFC2E6 !important;
  text-align:center;
  font-size:14px;
}
.arm_module_note_container,
.arm_module_note_container *{color:#CFC2E6 !important;-webkit-text-fill-color:#CFC2E6}
.arm_module_note_container div:first-child,
.arm_module_note_container > div:first-of-type{
  font-family:var(--nl-display,'Sora',sans-serif);
  font-weight:700;font-size:15px;
  color:var(--nl-text,#F4EEFF) !important;-webkit-text-fill-color:var(--nl-text,#F4EEFF);
  margin-bottom:8px;
}
.arm_module_note_container br{display:none}
.arm_module_note_container strong{
  color:var(--nl-c3,#22E4FF) !important;-webkit-text-fill-color:var(--nl-c3,#22E4FF);font-weight:700;
}

/* the submit button should not stretch the width of the page */
body.nl-arm-setup .arm-df__form-control-submit-btn,
.arm-default-form:has(.arm_module_plans_container) .arm-df__form-control-submit-btn{
  display:block;width:min(560px,100%) !important;margin:26px auto 0 !important;
}
body.nl-arm-setup .arm-df__register-link,
.arm-default-form:has(.arm_module_plans_container) .arm-df__register-link{text-align:center}

/* plans above the signup form, whatever order the plugin prints them in */
/* Module order is left to ARMember.
   Two attempts to reorder it here failed: flex `order` scrambled the page
   because the plugin nests modules at different depths, and moving the plans
   node in the DOM broke the plugin's own column layout, squeezing the signup
   fields into a narrow strip. The order of plans and form is a plugin
   setting, not something the theme should override. */

/* Guard rails: the fields must always fill their module, whatever the
   plugin's column classes do around them. */
.arm_module_forms_container,
.arm_module_forms_main_container{
  float:none !important;
  display:block !important;
  box-sizing:border-box;
}
.arm_module_forms_container .arm-default-form,
.arm_module_forms_container .arm-df-wrapper,
.arm_module_forms_container .arm-df__fields-wrapper,
.arm-default-form .arm-df__form-group,
.arm-default-form .arm-df__form-field-wrap,
.arm-default-form .arm-df__form-field{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  position:relative;
}

/* the plan shown first, set by ID in the Customizer */
.arm_module_plans_ul > li.nl-first-plan{order:-1}

/* --------------------------------------------------------------------------
   Headings and labels
   -------------------------------------------------------------------------- */
.arm-df__heading{text-align:center;margin-bottom:24px}
.arm-df__heading-text,
.arm-df__heading-tex{
  font-family:var(--nl-display,'Sora',sans-serif) !important;
  font-weight:700 !important;
  font-size:24px !important;
  letter-spacing:-.02em;
  color:var(--nl-text,#F4EEFF) !important;
}
.arm-df__label-text,
.arm-df__label-tex,
.arm-form-table-label{
  color:var(--nl-muted,#A292C0) !important;
  font-size:13px !important;
  font-weight:500 !important;
}
.arm-df__label-asterisk{color:var(--nl-c1,#FF2E88) !important}
.arm_df__helper-description{color:var(--nl-muted,#A292C0) !important;font-size:12.5px}

/* section headings that ARMember prints between modules */
.arm_module_plans_main_container > h2,
.arm_module_plans_main_container > h3,
.arm_module_title{
  font-family:var(--nl-display,'Sora',sans-serif);
  font-weight:700;font-size:19px;letter-spacing:-.01em;
  margin:44px 0 18px;padding-left:14px;position:relative;
  color:var(--nl-text,#F4EEFF);
}
.arm_module_plans_main_container > h2::before,
.arm_module_plans_main_container > h3::before,
.arm_module_title::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--nl-c1,#FF2E88),var(--nl-c3,#22E4FF));
  box-shadow:0 0 12px -2px var(--nl-c1,#FF2E88);
}

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */
.arm-df__form-control,
.arm-df__dropdown-control,
.arm-default-form input[type="text"],
.arm-default-form input[type="email"],
.arm-default-form input[type="password"],
.arm-default-form input[type="tel"],
.arm-default-form input[type="number"],
.arm-default-form input[type="url"],
.arm-default-form textarea,
.arm-default-form select{
  width:100%;
  padding:13px 16px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--nl-line,rgba(190,150,255,.14)) !important;
  color:var(--nl-text,#F4EEFF) !important;
  font-family:inherit !important;
  font-size:15px !important;
  box-shadow:none !important;
  transition:border-color .18s ease,box-shadow .22s ease,background .18s ease;
}
.arm-df__form-control::placeholder,
.arm-default-form textarea::placeholder{color:#7C6C99 !important;opacity:1}

.arm-df__form-control:focus,
.arm-df__dropdown-control:focus,
.arm-default-form input:focus,
.arm-default-form textarea:focus,
.arm-default-form select:focus{
  outline:none !important;
  background:rgba(255,255,255,.07) !important;
  border-color:color-mix(in srgb,var(--nl-c2,#A24BFF) 70%,transparent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--nl-c2,#A24BFF) 22%,transparent),
             0 0 24px -6px var(--nl-c2,#A24BFF) !important;
}

/* browser autofill keeps its own white background without this */
.arm-default-form input:-webkit-autofill,
.arm-default-form input:-webkit-autofill:hover,
.arm-default-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--nl-text,#F4EEFF);
  -webkit-box-shadow:0 0 0 1000px #150C24 inset;
  caret-color:var(--nl-text,#F4EEFF);
}

/* ARMember's material skin draws its own outline; hide it under our border */
.arm-notched-outline,
.arm-notched-outline__leading,
.arm-notched-outline__notch,
.arm-notched-outline__trailing{border-color:transparent !important;background:none !important}

.arm-df__fc-icon,
.arm-df__fc-icon.--arm-suffix,
.arm-df__fc-icon.--arm-prefix{color:var(--nl-muted,#A292C0) !important}

/* --------------------------------------------------------------------------
   Password strength meter
   -------------------------------------------------------------------------- */
.arm_strength_meter_block_container{display:flex !important;gap:5px;margin-top:9px}
.arm_strength_meter_block_container > *{
  height:4px !important;flex:1;border-radius:3px;
  background:rgba(255,255,255,.09) !important;border:0 !important;
}
.arm_strength_meter_block_container > .arm_strength_meter_active,
.arm_strength_meter_block_container > .active{
  background:linear-gradient(90deg,var(--nl-c1,#FF2E88),var(--nl-c2,#A24BFF)) !important;
  box-shadow:0 0 10px -2px var(--nl-c1,#FF2E88);
}
.arm_strength_meter_label{color:var(--nl-muted,#A292C0) !important;font-size:12px !important}

/* --------------------------------------------------------------------------
   Checkboxes, radios, links
   -------------------------------------------------------------------------- */
.arm-df__fc-checkbox,
.arm-df__form-control--is-checkbox,
.arm-df__form-control--is-radio{color:var(--nl-muted,#A292C0) !important}

.arm-default-form input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;border-radius:6px;position:relative;cursor:pointer;
  border:1px solid var(--nl-line,rgba(190,150,255,.14)) !important;
  background:rgba(255,255,255,.05) !important;
  padding:0 !important;
}
.arm-default-form input[type="checkbox"]:checked{
  background:linear-gradient(120deg,var(--nl-c2,#A24BFF),var(--nl-c3,#22E4FF)) !important;
  border-color:transparent !important;
}
.arm-default-form input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #0A0512;border-width:0 2px 2px 0;transform:rotate(45deg);
}

.arm-df__fc-checkbox--label,
.arm-df__fc-radio--label{color:var(--nl-muted,#A292C0) !important;font-size:14px !important}

/* remember me + forgot password sit on one tidy row */
.arm-df__form-field-wrap_rememberme{
  display:flex !important;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;position:static !important;
}
.arm-df__forgot-pass-link,
.arm-df__form-group_forgot_link,
.arm_forgotpassword_link{
  position:static !important;float:none !important;
  margin:0 !important;text-align:right;white-space:nowrap;
}
.arm-df__forgot-pass-link a,
.arm_forgotpassword_link a,
.arm-df__register-link .arm-rl__link,
.arm-default-form a{color:var(--nl-c3,#22E4FF) !important;text-decoration:none}
.arm-df__register-link .arm-rl__text{color:var(--nl-muted,#A292C0) !important}
.arm_forgotpassword_link a:hover,
.arm-default-form a:hover{color:var(--nl-text,#F4EEFF) !important}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.arm-df__form-control-submit-btn,
.arm_form_popup_button,
.arm-default-form button[type="submit"],
.arm-default-form input[type="submit"],
.arm_membership_setup_wrapper button[type="submit"]{
  width:100%;
  padding:14px 22px !important;
  border:0 !important;
  border-radius:999px !important;
  cursor:pointer;
  font-family:var(--nl-display,'Sora',sans-serif) !important;
  font-weight:700 !important;
  font-size:15px !important;
  color:#0A0512 !important;
  text-transform:none !important;
  background:linear-gradient(100deg,var(--nl-c1,#FF2E88),var(--nl-c2,#A24BFF) 55%,var(--nl-c3,#22E4FF)) !important;
  box-shadow:0 8px 30px -10px var(--nl-c1,#FF2E88) !important;
  transition:filter .18s ease,box-shadow .22s ease,transform .16s ease;
}
.arm-df__form-control-submit-btn:hover,
.arm-default-form button[type="submit"]:hover,
.arm-default-form input[type="submit"]:hover{filter:brightness(1.08)}
.arm-df__form-control-submit-btn:active{transform:translateY(1px)}

/* --------------------------------------------------------------------------
   Validation
   -------------------------------------------------------------------------- */
.arm-df__fc--validation__text,
.arm-df__fc--validation__wrap,
.arm_error_msg{color:#FF6B8A !important;font-size:12.5px !important}
.arm-df__fc--validation .arm-df__form-control,
.arm-df__form-control.arm_error{
  border-color:#FF3355 !important;
  box-shadow:0 0 0 3px rgba(255,51,85,.18) !important;
}
.arm_success_msg{color:var(--nl-green,#2BFFA6) !important}

/* --------------------------------------------------------------------------
   Plans

   Front-end markup ARMember prints:
   <ul class="arm_module_plans_ul arm_column_3">
     <li class="arm_plan_default_skin arm_setup_column_item arm_active">
       <label class="arm_module_plan_option" id="arm_subscription_plan_option_12">
         <span class="arm_setup_check_circle"><i class="armfa armfa-check"></i></span>
         <input type="radio" class="arm_module_plan_input" value="12">
         <span class="arm_module_plan_name">VIP Monthly</span>
         <div class="arm_module_plan_price_type"><span class="arm_module_plan_price">$9.99</span></div>
         <div class="arm_module_plan_description">...</div>
   -------------------------------------------------------------------------- */
.arm_module_plans_main_container,
.arm_module_plans_container{background:none !important;border:0 !important;padding:0 !important}

.arm_module_plans_ul{
  list-style:none !important;margin:0 auto !important;padding:0 !important;
  display:grid !important;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  max-width:900px;
}
.arm_module_plans_ul.arm_column_1{max-width:440px}
.arm_module_plans_ul.arm_column_2{max-width:760px}

.arm_module_plans_ul > li,
.arm_module_plans_ul > li.arm_plan_default_skin,
.arm_module_plans_ul > li.arm_plan_skin1,
.arm_module_plans_ul > li.arm_plan_skin2,
.arm_module_plans_ul > li.arm_plan_skin3,
.arm_module_plans_ul > li.arm_plan_skin5,
.arm_module_plans_ul > li.arm_plan_skin6{
  position:relative;
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  border-radius:var(--nl-radius,20px) !important;
  background:linear-gradient(180deg,rgba(28,16,48,.8),rgba(13,7,22,.92)) !important;
  border:1px solid var(--nl-line,rgba(190,150,255,.14)) !important;
  box-shadow:none;
  transition:transform .22s ease,border-color .22s ease,box-shadow .28s ease;
}
.arm_module_plans_ul > li:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--nl-c1,#FF2E88) 45%,transparent) !important;
  box-shadow:0 20px 50px -24px var(--nl-c1,#FF2E88) !important;
}

/* the whole card is the label, so the whole card is clickable */
.arm_module_plans_ul > li .arm_module_plan_option{
  display:block !important;
  position:relative;
  margin:0 !important;
  padding:26px 24px !important;
  cursor:pointer;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--nl-text,#F4EEFF) !important;
  text-align:left !important;
}

/* selected plan, and the plan highlighted in the Customizer */
.arm_module_plans_ul > li.arm_active,
.arm_module_plans_ul > li.nl-highlight-plan{
  border:1px solid transparent !important;
  background:
    linear-gradient(180deg,#1B1030,#0C0617) padding-box,
    conic-gradient(from var(--nl-arm-angle),var(--nl-c1,#FF2E88),var(--nl-c2,#A24BFF),var(--nl-c3,#22E4FF),var(--nl-c1,#FF2E88)) border-box !important;
  animation:nl-arm-spin 7s linear infinite;
  box-shadow:0 0 50px -20px var(--nl-c1,#FF2E88) !important;
}

/* ARMember's own check indicator.
   The plugin styles it with .arm_module_plan_option .arm_setup_check_circle
   (two classes) and positions it with `left`, so these rules have to match
   that specificity and reset left explicitly. */
.arm_module_plans_ul > li .arm_module_plan_option .arm_setup_check_circle{
  position:absolute !important;
  top:20px !important;right:20px !important;left:auto !important;bottom:auto !important;
  width:24px !important;height:24px !important;min-width:24px !important;
  margin:0 !important;padding:0 !important;
  display:grid !important;place-items:center;
  border-radius:50% !important;
  border:1px solid var(--nl-line,rgba(190,150,255,.14)) !important;
  background:rgba(255,255,255,.04) !important;
  color:transparent !important;
  transition:background .2s ease,box-shadow .22s ease;
}
.arm_module_plans_ul > li .arm_module_plan_option .arm_setup_check_circle i,
.arm_module_plans_ul > li .arm_module_plan_option .arm_setup_check_circle .armfa{
  display:block !important;
  font-size:12px !important;line-height:1 !important;padding:0 !important;margin:0 !important;
  color:transparent !important;
}
.arm_module_plans_ul > li.arm_active .arm_module_plan_option .arm_setup_check_circle{
  border-color:transparent !important;
  background:linear-gradient(120deg,var(--nl-c2,#A24BFF),var(--nl-c3,#22E4FF)) !important;
  box-shadow:0 0 16px -3px var(--nl-c3,#22E4FF) !important;
}
.arm_module_plans_ul > li.arm_active .arm_module_plan_option .arm_setup_check_circle i,
.arm_module_plans_ul > li.arm_active .arm_module_plan_option .arm_setup_check_circle .armfa{
  color:#0A0512 !important;
}

/* the native radio stays reachable by keyboard but invisible */
.arm_module_plan_input{
  position:absolute !important;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
.arm_module_plan_input:focus-visible + .arm_module_plan_name{
  outline:2px solid var(--nl-c3,#22E4FF);outline-offset:3px;border-radius:4px;
}

.arm_module_plans_ul > li,
.arm_module_plans_ul > li *{opacity:1 !important}

/* the plugin colours plan names grey when unselected and blue when selected */
.arm_module_plans_ul > li .arm_module_plan_name,
.arm_module_plans_ul > li label .arm_module_plan_name,
.arm_module_plans_ul > li.arm_active .arm_module_plan_name{
  color:var(--nl-text,#F4EEFF) !important;
  -webkit-text-fill-color:var(--nl-text,#F4EEFF) !important;
}

.arm_module_plan_name,
.arm_module_plans_ul > li .arm_module_plan_name{
  display:block !important;
  font-family:var(--nl-display,'Sora',sans-serif) !important;
  font-weight:700 !important;font-size:18px !important;
  color:var(--nl-text,#F4EEFF) !important;
  margin:0 0 2px !important;padding-right:36px;
}
.arm_module_plan_price_type{
  margin:12px 0 2px !important;
  color:var(--nl-muted,#A292C0) !important;
  background:none !important;border:0 !important;padding:0 !important;
}
.arm_module_plan_price,
.arm_module_plan_price *,
.arm_plan_amount_text{
  font-family:var(--nl-display,'Sora',sans-serif) !important;
  font-weight:800 !important;font-size:32px !important;letter-spacing:-.03em;
  color:var(--nl-c3,#22E4FF) !important;
  -webkit-text-fill-color:var(--nl-c3,#22E4FF) !important;
  background:none !important;text-decoration:none !important;
}
.arm_plan_cycle_name_text,
.arm_module_plan_price .arm_plan_cycle_name_text{
  font-family:var(--nl-body,'Inter',sans-serif) !important;
  color:var(--nl-muted,#A292C0) !important;
  -webkit-text-fill-color:var(--nl-muted,#A292C0) !important;
  font-size:14px !important;font-weight:500 !important;
}

/* description: bullets, whether typed as lines or written as real HTML lists */
.arm_module_plan_description{margin:16px 0 0 !important;color:#CFC2E6 !important;font-size:14px !important}
.arm_module_plan_description ul{list-style:none !important;margin:0 !important;padding:0 !important;display:grid;gap:9px}
.arm_module_plan_description li{
  display:flex;gap:9px;align-items:flex-start;line-height:1.5;margin:0 !important;
  color:#CFC2E6 !important;list-style:none !important;
}
.arm_module_plan_description li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  background-color:color-mix(in srgb,var(--nl-c3,#22E4FF) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--nl-c3,#22E4FF) 55%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322E4FF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}

/* "Most popular" flag on the highlighted plan */
.arm_module_plans_ul > li.nl-highlight-plan::before{
  content:attr(data-nl-flag);
  position:absolute;top:-11px;left:22px;z-index:2;
  padding:4px 12px;border-radius:999px;
  font-family:var(--nl-display,'Sora',sans-serif);font-size:11px;font-weight:700;color:#0A0512;
  background:linear-gradient(100deg,var(--nl-c1,#FF2E88),var(--nl-c2,#A24BFF));
  box-shadow:0 0 20px -4px var(--nl-c1,#FF2E88);
  white-space:nowrap;
}
.arm_module_plans_ul > li.nl-highlight-plan[data-nl-flag=""]::before{content:none}

/* payment cycle and gateway lists get the same card treatment */
.arm_module_payment_cycle_ul,
.arm_module_gateways_ul{
  list-style:none !important;margin:20px auto 0 !important;padding:0 !important;
  display:grid !important;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:900px;
}
.arm_module_payment_cycle_ul > li,
.arm_module_gateways_ul > li{
  border-radius:14px !important;padding:14px 16px !important;margin:0 !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--nl-line,rgba(190,150,255,.14)) !important;
  color:var(--nl-text,#F4EEFF) !important;
}
.arm_module_payment_cycle_ul > li.arm_active,
.arm_module_gateways_ul > li.arm_active{
  border-color:color-mix(in srgb,var(--nl-c2,#A24BFF) 70%,transparent) !important;
  box-shadow:0 0 22px -10px var(--nl-c2,#A24BFF) !important;
}

/* --------------------------------------------------------------------------
   Account pages and member panel
   -------------------------------------------------------------------------- */
.arm_account_detail_wrapper,
.arm_member_panel_wrapper,
.arm_front_dashboard_wrapper{
  color:var(--nl-text,#F4EEFF);
  background:none !important;
}
.arm_account_detail_tab_links{border-bottom:1px solid var(--nl-line,rgba(190,150,255,.14)) !important}
.arm_account_detail_tab_links a{color:var(--nl-muted,#A292C0) !important}
.arm_account_detail_tab_links a:hover,
.arm_account_detail_tab_links .arm_account_tab_active a{color:var(--nl-text,#F4EEFF) !important}
.arm_account_detail_tab_heading{
  font-family:var(--nl-display,'Sora',sans-serif) !important;
  color:var(--nl-text,#F4EEFF) !important;
}
.arm_account_detail_wrapper table,
.arm_member_panel_wrapper table{border-color:var(--nl-line,rgba(190,150,255,.14)) !important}
.arm_account_detail_wrapper th,
.arm_account_detail_wrapper td{
  border-color:var(--nl-line,rgba(190,150,255,.14)) !important;
  color:var(--nl-text,#F4EEFF) !important;
  background:none !important;
}

@media (prefers-reduced-motion:reduce){
  .arm-df-wrapper,
  .arm_module_plans_ul > li.arm_active,
  .arm_module_plans_ul > li.nl-highlight-plan{animation:none !important}
}

/* --------------------------------------------------------------------------
   Mobile

   ARMember ships this at <=480px, three classes deep and !important:
     .arm_module_forms_container .arm-default-form .arm-df-wrapper{
       padding-left:5px!important;padding-right:5px!important}
   which would jam the fields against the edge of the card, so it is matched
   and overridden below.
   -------------------------------------------------------------------------- */
@media(max-width:600px){
  .arm-default-form:not(.arm_admin_member_form){width:100% !important}

  .arm-df-wrapper{padding:24px 18px !important}

  body.nl-arm-setup .arm_module_forms_container,
  form.nl-arm-setup-form .arm_module_forms_container,
  .arm-default-form:has(.arm_module_plans_container) .arm_module_forms_container{
    width:100%;
    padding:24px 18px !important;
    margin-top:20px !important;
  }

  .arm-df__heading-text{font-size:21px !important}
  .arm-df__form-group{margin-bottom:18px !important}
  .arm-df__form-control{font-size:16px !important} /* 16px stops iOS zooming on focus */

  .arm_module_plans_ul,
  .arm_module_payment_cycle_ul,
  .arm_module_gateways_ul{grid-template-columns:1fr !important;gap:14px;max-width:100%}

  .arm_module_plans_ul > li .arm_module_plan_option{padding:22px 18px !important}
  .arm_module_plans_ul > li .arm_module_plan_option .arm_setup_check_circle{top:16px !important;right:16px !important}
  .arm_module_plan_price,
  .arm_module_plan_price *,
  .arm_plan_amount_text{font-size:28px !important}
  .arm_module_plan_name{font-size:17px !important}

  .arm_module_note_container{padding:16px 16px !important;font-size:13.5px}

  .arm-df__form-field-wrap_rememberme{gap:10px}
  .arm-df__forgot-pass-link,
  .arm_forgotpassword_link{white-space:normal;text-align:left}

  body.nl-arm-setup .arm-df__form-control-submit-btn,
  form.nl-arm-setup-form .arm-df__form-control-submit-btn{width:100% !important;margin-top:20px !important}
}

/* beat the plugin's 5px padding rule at its own specificity */
@media(max-width:480px){
  .arm_module_forms_container .arm-default-form .arm-df-wrapper,
  .arm_module_forms_container .arm-default-form .arm-df__fields-wrapper,
  .arm-default-form .arm-df-wrapper{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .nl-highlight-plan::before{left:16px;font-size:10px;padding:3px 10px}
}

/* nothing in an ARMember block may push the page sideways */
.arm-default-form,
.arm_module_plans_ul,
.arm_module_plans_ul > li,
.arm_module_note_container,
.arm_module_forms_container{max-width:100%;box-sizing:border-box}
.arm_module_plans_ul > li .arm_module_plan_option{box-sizing:border-box;word-break:break-word}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  .arm_module_plans_ul{grid-template-columns:1fr !important;gap:14px;max-width:100%}
  .arm_module_plans_ul > li .arm_module_plan_option{padding:20px 18px !important}
  .arm_module_plan_price,
  .arm_module_plan_price *,
  .arm_plan_amount_text{font-size:28px !important}
  .arm_module_plan_name,
  .arm_module_plans_ul > li .arm_module_plan_name{font-size:17px !important;padding-right:40px}
  .arm_module_plans_ul > li .arm_module_plan_option .arm_setup_check_circle{top:18px !important;right:16px !important}

  body.nl-arm-setup .arm_module_forms_container,
  .arm-default-form.nl-arm-setup-form .arm_module_forms_container{
    padding:24px 18px !important;margin-top:20px !important;
  }
  .arm_module_note_container{padding:16px 16px !important;font-size:13.5px}
  .arm_module_note_container strong{display:inline-block}

  .arm-default-form:not(.arm_admin_member_form){border-radius:16px !important}
  .arm-df-wrapper{padding:24px 18px !important}
  .arm-df__heading-text,
  .arm-df__heading-tex{font-size:20px !important}
  .arm-df__form-group{margin-bottom:18px !important}
  .arm-df__form-control,
  .arm-default-form input[type="text"],
  .arm-default-form input[type="email"],
  .arm-default-form input[type="password"]{
    font-size:16px !important; /* under 16px iOS zooms the page on focus */
    padding:12px 14px !important;
  }
  .arm-df__form-control-submit-btn{padding:13px 18px !important;font-size:14.5px !important}

  /* the remember-me row stacks rather than squeezing */
  .arm-df__form-field-wrap_rememberme{gap:8px}
  .arm-df__forgot-pass-link,
  .arm_forgotpassword_link{white-space:normal;text-align:left}

  /* the flag would collide with the card corner on narrow screens */
  .arm_module_plans_ul > li.nl-highlight-plan::before{left:16px;font-size:10.5px}
}

@media(max-width:420px){
  .arm_module_plan_price,
  .arm_module_plan_price *,
  .arm_plan_amount_text{font-size:25px !important}
  .arm-df-wrapper{padding:20px 14px !important}
}