:root{

      --mx-brand:#0e3a46;

      --mx-text:#1f2a2a;

      --mx-white:#fff;

      --mx-glass-bg: rgba(255,255,255,0.42);

      --mx-glass-brd: rgba(255,255,255,0.55);

      --mx-overlay: rgba(0,0,0,0.25);

      --mx-shadow: 0 20px 60px rgba(0,0,0,0.22);

      --mx-radius: 16px;

    }

    *{box-sizing:border-box}

    body.public-shell{ margin:0; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue"; color:var(--mx-text); background:#000; }

    a{ color:var(--mx-white); text-decoration:none }

    a:hover{ text-decoration:underline }



    /* ========== БЛОК 2.0 – Фонова картинка ========== */

    #mx-bg{ position:fixed; inset:0; background:#0b0f10 center/cover no-repeat; z-index:-1; }

    #mx-bg::before{ content:""; position:absolute; inset:0; background:var(--mx-img, none) center/cover no-repeat; }

    #mx-bg::after{ content:""; position:absolute; inset:0; background:var(--mx-overlay); }



    /* ========== БЛОК 3.0 – Контроли за музика (прозрачен „хедър“) ========== */

    #mx-header{ position:relative; z-index:10; background:transparent; border:0; }



    /* Бутоните: ON (вляво) → OFF (вдясно) → volume със 🔈 и 🔊; стиловете са по подадения файл. */ /* :contentReference[oaicite:1]{index=1} */

    .bgm-wrap {

      --bg: #e9ecef;

      --shadow-dark: rgba(0, 0, 0, 0.20);

      --shadow-light: rgba(255, 255, 255, 0.9);

      --accent: #3e4c40;

      --text: #6b7280;

      --radius-xl: 999px;



      display: flex;

      gap: 12px;

      align-items: center;

      justify-content: center;

      user-select: none;

      -webkit-tap-highlight-color: transparent;

      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;



      position: absolute;

      top: 40px;                 /* фиксирано на 60px под горния ръб */

      left: 50%;

      transform: translateX(-50%);

      z-index: 9999;

    }

    .bgm-toggle {

      display: grid;

      grid-template-columns: 1fr 1fr;

      width: 100px;

      height: 30px;

      padding: 4px;

      border-radius: var(--radius-xl);

      background: rgba(255, 255, 255, 0.6);

      backdrop-filter: blur(12px);

      -webkit-backdrop-filter: blur(12px);

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    }

    .bgm-seg {

      border: 0; cursor: pointer; margin: 0;

      border-radius: calc(var(--radius-xl) - 4px);

      background: linear-gradient(180deg, #f7f9fb, #e9edf1);

      box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08), inset -1px -1px 2px rgba(255,255,255,0.9);

      transition: transform .15s ease, background .2s ease, opacity .2s ease;

      display: grid; place-items: center;

      font-size: 16px; color: var(--text); outline: none;

    }

    .bgm-seg:focus { box-shadow: 0 0 0 2px #fff inset; }

    .bgm-seg.is-active { background: linear-gradient(180deg, #ffffff, #eef2f6); color: var(--accent); }

    .bgm-seg:not(.is-active) { opacity: .6; }



    .bgm-volume {

      display: grid; grid-template-columns: auto 1fr auto; /* 🔈 [range] 🔊 */

      align-items: center; gap: 6px;

      width: 180px; height: 30px; padding: 6px 10px;

      border-radius: var(--radius-xl);

      background: rgba(255, 255, 255, 0.6);

      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

      font-size: 12px;

    }

    .bgm-volume .vol-icon{ line-height:1; font-size:14px; }

    .bgm-volume input[type="range"]{ width: 100%; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; }

    .bgm-volume input[type="range"]::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:linear-gradient(90deg,#ccc,#888); }

    .bgm-volume input[type="range"]::-moz-range-track{ height:4px; border-radius:2px; background:linear-gradient(90deg,#ccc,#888); }

    .bgm-volume input[type="range"]::-webkit-slider-thumb{

      -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%;

      background:#fff; border:1px solid #bbb; box-shadow:1px 1px 3px rgba(0,0,0,0.3); margin-top:-4px;

    }

    .bgm-volume input[type="range"]::-moz-range-thumb{

      width:12px; height:12px; border-radius:50%;

      background:#fff; border:1px solid #bbb; box-shadow:1px 1px 3px rgba(0,0,0,0.3);

    }



    /* ========== БЛОК 4.0 – Съдържание и стъклен ефект (центриране) ========== */

#mx-content{

  min-height:100vh;

  display:grid;

  place-items:center;

  padding:24px;

}



/* Палитра за glass (лесно за донагласяне) */

:root{

  --mx-glass-bg: rgba(255,255,255,0.16);

  --mx-glass-brd: rgba(255,255,255,0.35);

  --mx-glass-blur: 12px;

  --mx-brand: #3e4c40;   /* бутоните */

  --mx-text:  #ffffff;   /* основен текст върху тъмен фон */

}



/* 4.1 – Стъклени обвивки (само реалните форми, не кореновия .pmpro) */

:is(

  .pmpro_login_wrap,

  .pmpro_checkout,

  .pmpro_levels,

  .pmpro_account,

  .pmpro_confirmation, .pmpro_confirmation_wrap,

  .pmpro_billing, .pmpro_billing_wrap, .pmpro_billing_output,

  .pmpro_member_profile_edit_wrap,

  .pmpro_form                              /* fallback за някои шаблони */

){

  position: relative;

  padding: clamp(16px, 2.5vw, 32px) !important;

  border-radius: 20px;

}



/* 4.2 – Стъклена плоча (::before) — също само за горните обвивки  */

:is(

  .pmpro_login_wrap,

  .pmpro_checkout,

  .pmpro_levels,

  .pmpro_account,

  .pmpro_confirmation, .pmpro_confirmation_wrap,

  .pmpro_billing, .pmpro_billing_wrap, .pmpro_billing_output,

  .pmpro_member_profile_edit_wrap,

  .pmpro_form

)::before{

  content: "";

  position: absolute; inset: 0;

  background: var(--mx-glass-bg);

  backdrop-filter: blur(var(--mx-glass-blur));

  -webkit-backdrop-filter: blur(var(--mx-glass-blur));

  border-radius: inherit;

  box-shadow: 0 8px 32px rgba(0,0,0,0.25);

  z-index: 0;

}



/* всичко вътре остава над стъклото */

:is(

  .pmpro_login_wrap,

  .pmpro_checkout,

  .pmpro_levels,

  .pmpro_account,

  .pmpro_confirmation, .pmpro_confirmation_wrap,

  .pmpro_billing, .pmpro_billing_wrap, .pmpro_billing_output,

  .pmpro_member_profile_edit_wrap,

  .pmpro_form

) > *{ position: relative; z-index: 1; }



/* всичко вътре да е над стъклото */

:is(

  .pmpro,

  .pmpro_login_wrap,

  .pmpro_checkout,

  .pmpro_levels,

  .pmpro_account,

  .pmpro_confirmation, .pmpro_confirmation_wrap,

  .pmpro_billing, .pmpro_billing_wrap, .pmpro_billing_output,

  .pmpro_member_profile_edit_wrap,

  .pmpro_form

) > *{ position:relative; z-index:1; }



/* 4.3 – Нулиране на “белите карти” вътре в PMPro блоковете */

:is(

  .pmpro,

  .pmpro_login_wrap,

  .pmpro_checkout,

  .pmpro_levels,

  .pmpro_account,

  .pmpro_confirmation, .pmpro_confirmation_wrap,

  .pmpro_billing, .pmpro_billing_wrap, .pmpro_billing_output,

  .pmpro_member_profile_edit_wrap,

  .pmpro_form

) :is(

  .pmpro_card, .pmpro_actions_nav, .pmpro_message,

  .pmpro_section, .pmpro_table, fieldset, legend

){

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

}



/* 4.4 – Четимост на тъмен фон */

:is(

  .pmpro, .pmpro_login_wrap, .pmpro_checkout, .pmpro_levels,

  .pmpro_account, .pmpro_confirmation, .pmpro_confirmation_wrap,

  .pmpro_billing, .pmpro_billing_wrap, .pmpro_billing_output,

  .pmpro_member_profile_edit_wrap, .pmpro_form

) :is(h1,h2,h3,label,.pmpro_lost_password a,.pmpro_actions_nav a,

      .pmpro_show_password_wrap, .pmpro_show_password_wrap label){

  color: var(--mx-text) !important;

}



/* 4.5 – Полета */

:is(

  .pmpro, .pmpro_login_wrap, .pmpro_checkout, .pmpro_levels,

  .pmpro_account, .pmpro_confirmation, .pmpro_confirmation_wrap,

  .pmpro_billing, .pmpro_billing_wrap, .pmpro_billing_output,

  .pmpro_member_profile_edit_wrap, .pmpro_form

) :is(input[type="text"], input[type="email"], input[type="password"],

      input[type="tel"], input[type="number"], select, textarea){

  background: rgba(255,255,255,0.22) !important;

  border:1px solid var(--mx-glass-brd) !important;

  color: var(--mx-text) !important;

}

:is(.pmpro, .pmpro_login_wrap, .pmpro_checkout, .pmpro_form)

  input::placeholder{ color: rgba(255,255,255,0.85) !important; }



/* 4.6 – Бутони (primary) — без „Покажи паролата“ */

:is(.pmpro, .pmpro_login_wrap, .pmpro_checkout, .pmpro_form)

  :is(

    input[type="submit"],

    button[type="submit"],

    .pmpro_btn

  )

  :not(.wp-hide-pw)

  :not(.pmpro_show_password_button)

  :not(.pmpro_btn-show-password)

  :not([type="button"])

  :not(.button-secondary){

  background: var(--mx-brand) !important;

  border: 0 !important;

  color: #fff !important;

  padding: 12px 20px !important;

  border-radius: 10px !important;

  transition: transform .15s ease, opacity .15s ease;

}



:is(.pmpro, .pmpro_login_wrap, .pmpro_checkout, .pmpro_form)

  :is(

    input[type="submit"],

    button[type="submit"],

    .pmpro_btn

  )

  :not(.wp-hide-pw)

  :not(.pmpro_show_password_button)

  :not(.pmpro_btn-show-password)

  :not([type="button"])

  :not(.button-secondary):hover{

  transform: translateY(-1px);

  opacity: .95;

}



/* 4.6.1 – Show Password: прозрачен бутон + син акцент */

.pmpro_show_password_wrap button,

.pmpro_show_password_wrap .button,

.pmpro_show_password_wrap .pmpro_btn,

button.wp-hide-pw,

.pmpro_login_wrap button.wp-hide-pw,

.pmpro_form button.wp-hide-pw{

  background: transparent !important;

  background-color: transparent !important; /* за всеки случай */

  color: var(--mx-accent, #0ea5ff) !important;

  border: 0 !important;

  box-shadow: none !important;

  padding: 0 !important;

  line-height: 1;

}



.pmpro_show_password_wrap label{

  color: var(--mx-accent, #0ea5ff) !important;

}



.pmpro_show_password_wrap button:focus,

button.wp-hide-pw:focus{

  outline: 2px solid currentColor;

  outline-offset: 2px;

}





/* 4.7 – Линк “Регистрация” (ако го показваш под login) */

#pmpro-register-link{ margin-top:20px; text-align:center; }

#pmpro-register-link .pmpro-register-btn{

  display:block; width:100%; max-width:100%; padding:12px 0; border-radius:10px;

  font-weight:600; text-align:center; text-decoration:none;

  background:rgba(255,255,255,0.7); color:#000;

  border:1px solid rgba(255,255,255,0.8);

  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);

  box-shadow:0 6px 18px rgba(0,0,0,0.15); transition: all .2s ease;

}

#pmpro-register-link .pmpro-register-btn:hover{

  background: rgba(255,255,255,0.9);

  box-shadow: 0 10px 25px rgba(0,0,0,0.2);

}



/* 4.8 – Опционален “kill switch”: добави body клас .pmpro-glass-off за изключване */

.pmpro-glass-off

  :is(.pmpro, .pmpro_login_wrap, .pmpro_checkout, .pmpro_levels,

      .pmpro_account, .pmpro_confirmation, .pmpro_confirmation_wrap,

      .pmpro_billing, .pmpro_billing_wrap, .pmpro_billing_output,

      .pmpro_member_profile_edit_wrap, .pmpro_form)::before{

  display:none !important;

}



    /* ========== БЛОК 5.0 – Футър ========== */

    #mx-footer{ text-align:center; padding:80px; background:transparent; border:0; font-size:22px;}

    #mx-footer .mx-foot-inner{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }

    #mx-footer, #mx-footer a{ color:#fff; }

    #mx-footer a{ text-decoration:none; }

    #mx-footer a:hover{ text-decoration:underline; }



    /* ========== Респонсив корекции (мобилен изглед) ========== */

    @media (max-width: 768px){

      /* Контролите влизат в потока, за да не застъпват формата */

      #mx-header { padding: 10px 12px 0; }

      .bgm-wrap{

        position: static;    /* вместо absolute */

        top: auto; left: auto; transform: none;

        flex-wrap: wrap;     /* ако няма място – пренасяне */

        gap: 10px 12px;

      }

      /* Центриране и дишане около формата */

      #mx-content{

        min-height: calc(100vh - 100px);   /* отстъп за хедъра/контролите */

        padding: 24px 16px 24px;

        place-items: center;

      }

      /* Футър: трите линка един под друг */

      #mx-footer .mx-foot-inner{

        flex-direction: column;

        gap: 8px;

        align-items: center;

      }

    }