/* HUD containers */
.yn-hud {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
  }
  
  /* Notes / warnings */
  .yn-hud-note {
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
  }
  
  .yn-hud-note__title {
    margin: 0 0 6px;
    font-weight: 800;
    font-size: 14px;
    color: #ffde17;
    letter-spacing: 0.2px;
  }
  
  .yn-hud-note__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
  }
  
  /* Form fields */
  .yn-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .yn-field--full {
    width: 100%;
  }
  
  /* Read-only (safer) */
  .yn-readonly {
    opacity: 0.75;
  }
  
  .yn-readonly input,
  .yn-readonly select,
  .yn-readonly textarea,
  .yn-readonly button {
    pointer-events: none;
  }
  
  .yn-readonly a {
    pointer-events: auto;
  }
  
  /* Grids */
  .yn-grid-2 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  
  .yn-grid-3 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  
  /* Glow / focus states */
  .yn-glow {
    transition: box-shadow 120ms ease, transform 120ms ease;
    box-shadow: 0 0 0 2px rgba(255, 222, 23, 0.35), 0 10px 22px rgba(0, 0, 0, 0.35);
  }
  
  .yn-glow:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px #ffde17, 0 12px 26px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
  }
  /* Step header variant */
.yn-hud-note--header{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,222,23,0.22);
    background: linear-gradient(180deg, rgba(255,222,23,0.10), rgba(0,0,0,0.78));
    box-shadow: 0 12px 26px rgba(0,0,0,0.35);
  }
  
  .yn-hud-note__kicker{
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.65);
    margin: 0 0 6px;
  }
  
  .yn-hud-note--header:before{
    content:"";
    position:absolute;
    inset:-2px;
    background: radial-gradient(closest-side, rgba(255,222,23,0.22), transparent 60%);
    opacity: .8;
    pointer-events:none;
    animation: ynPulseGlow 2.8s ease-in-out infinite;
  }
  
  @keyframes ynPulseGlow{
    0%,100%{ transform: translateY(0); opacity:.55; }
    50%{ transform: translateY(-6px); opacity:.95; }
  }

  :root{
    --yn-bg:#0b0b0b;
    --yn-accent:#ffde17;
    --yn-accent-dim: rgba(255,222,23,.35);
    --yn-stroke: rgba(255,222,23,.55);
    --yn-stroke-soft: rgba(255,255,255,.10);
    --yn-glow: 0 0 0 2px rgba(255,222,23,.22), 0 18px 40px rgba(0,0,0,.55);
  }
  
  /* ===== HUD PANEL ===== */
  .yn-panel{
    position: relative;
    padding: 16px 16px;
    border: 1px solid var(--yn-stroke-soft);
    background: rgba(0,0,0,.65);
    border-radius: 16px;
    box-shadow: var(--yn-glow);
    overflow: hidden;
  }
  
  /* beveled corners via clipped inner stroke */
  .yn-panel::before{
    content:"";
    position:absolute; inset:10px;
    border: 1px solid var(--yn-stroke);
    border-radius: 14px;
    clip-path: polygon(
      14px 0, calc(100% - 14px) 0, 100% 14px,
      100% calc(100% - 14px), calc(100% - 14px) 100%,
      14px 100%, 0 calc(100% - 14px), 0 14px
    );
    opacity:.9;
    pointer-events:none;
  }
  
  .yn-panel--sm{ padding: 12px; border-radius: 14px; }
  .yn-panel--lg{ padding: 20px; border-radius: 18px; }
  
  /* subtle top accent bar */
  .yn-panel__accent{
    height: 2px;
    width: 140px;
    background: linear-gradient(90deg, transparent, var(--yn-accent), transparent);
    opacity:.9;
    margin: 0 0 10px;
  }
  
  /* ===== HUD TITLE ===== */
  .yn-hud-title{
    margin: 0 0 2px;
    font-weight: 900;
    letter-spacing:.2px;
    color: var(--yn-accent);
    font-size: 16px;
  }
  .yn-hud-sub{
    margin: 0;
    color: rgba(255,255,255,.75);
    font-size: 13px;
    line-height: 1.4;
  }
  
  /* ===== RINGS ===== */
  .yn-ring{
    width: 140px; height: 140px;
    border-radius: 50%;
    position: relative;
    border: 2px solid rgba(255,222,23,.25);
    box-shadow: 0 0 0 2px rgba(255,222,23,.12);
  }
  .yn-ring::before{
    content:"";
    position:absolute; inset:10px;
    border-radius:50%;
    border: 1px dashed rgba(255,222,23,.45);
    opacity:.8;
  }
  .yn-ring--sm{ width: 96px; height: 96px; }
  .yn-ring--lg{ width: 180px; height: 180px; }
  
  /* partial arc (looks like “gauge”) */
  .yn-ring-arc{
    width: 160px; height: 160px;
    border-radius: 50%;
    background:
      conic-gradient(from 220deg,
        rgba(255,222,23,.95) 0 70deg,
        rgba(255,222,23,.20) 70deg 320deg,
        rgba(255,222,23,.95) 320deg 360deg);
    -webkit-mask: radial-gradient(circle at center, transparent 55%, #000 56%);
            mask: radial-gradient(circle at center, transparent 55%, #000 56%);
    filter: drop-shadow(0 0 10px rgba(255,222,23,.15));
  }
  
  /* ===== DIVIDERS ===== */
  .yn-divider{
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(255,222,23,.55),
      transparent);
    opacity:.8;
  }
  
  /* ===== NODES / CONNECTORS ===== */
  .yn-node{
    display:inline-block;
    width:10px; height:10px;
    border-radius:50%;
    background: rgba(255,222,23,.85);
    box-shadow: 0 0 12px rgba(255,222,23,.25);
  }
  .yn-connector{
    height:1px;
    width:120px;
    background: rgba(255,222,23,.45);
    position: relative;
  }
  .yn-connector::before, .yn-connector::after{
    content:"";
    position:absolute; top:-4px;
    width:10px; height:10px;
    border-radius:50%;
    background: rgba(255,222,23,.85);
  }
  .yn-connector::before{ left:-2px; }
  .yn-connector::after{ right:-2px; }
  
  /* optional scanline */
  .yn-scan::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg,
      transparent,
      rgba(255,222,23,.07),
      transparent);
    animation: ynScan 3.2s linear infinite;
    pointer-events:none;
    opacity:.35;
  }
  @keyframes ynScan{
    0%{ transform: translateY(-100%); }
    100%{ transform: translateY(100%); }
  }

  .yn-hud-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .yn-hud-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }
  
  .yn-hud-value {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }

/* ===== Mobile density (keep 2 columns) ===== */
@media (max-width: 768px){

    /* Keep overall profile panels dense */
    .yn-profile-hud{
      gap: 10px;
      padding: 0 10px;
    }
  
    /* Make panels tighter */
    .yn-profile-hud .hud-panel--md,
    .yn-profile-hud .hud-panel--lg{
      padding: 14px 14px;
    }
  
    /* Keep field grids 2-up on mobile */
    .yn-grid-2{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
  
    .yn-grid-3{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
  
    /* Full-width elements still span both columns */
    .yn-profile-hud .yn-hud-field--full,
    .yn-profile-hud .yn-field--full{
      grid-column: 1 / -1;
    }
  
    /* Smaller typography so it fits */
    .yn-profile-hud .yn-hud-label{
      font-size: 10px;
      letter-spacing: .12em;
      margin-bottom: 6px;
    }
  
    .yn-profile-hud .yn-hud-value{
      font-size: 14px;
      font-weight: 800;
    }
  
    /* Notes less tall */
    .yn-hud-note{
      padding: 10px 12px;
      border-radius: 12px;
    }
  
    .yn-hud-note__title{ font-size: 13px; }
    .yn-hud-note__text{ font-size: 12px; }
  
    /* Optional: make long email wrap nicer */
    .yn-profile-hud .yn-hud-value{
      word-break: break-word;
    }
  }

  /* Panels layout: 2 columns */
.yn-profile-hud{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  
  /* On very small screens keep 2 cols, just tighter */
  @media (max-width: 520px){
    .yn-profile-hud{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
  }

  /* Keep email readable: single line + ellipsis */
.yn-profile-hud .yn-hud-value--email{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
  }

  /* Profile HUD polish */
.yn-profile-hud{
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .yn-profile-hud .yn-hud-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height: 56px;
  }
  
  .yn-profile-hud .yn-hud-label{
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
  }
  
  .yn-profile-hud .yn-hud-value{
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    word-break: break-word;
  }
  
  /* Panels feel like actual modules */
  .yn-profile-hud .hud-panel--md,
  .yn-profile-hud .hud-panel--lg{
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
  }
  /* Profile HUD text styling */
.yn-profile-hud .yn-hud-label{
    display:block;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,0.45);
    margin-bottom:8px;
  }
  
  .yn-profile-hud .yn-hud-value{
    display:block;
    font-size:18px;
    font-weight:800;
    color:rgba(255,255,255,0.9);
  }
  
  .yn-profile-hud .yn-hud-field{
    padding: 10px 4px 0;
  }
  
  .yn-profile-hud .yn-hud-field--full{
    grid-column: 1 / -1;
  }
  
  /* =========================================================
   WHY NOT — Profile HUD (Page 1727) — Compact 1-screen layout
   ========================================================= */
.page-id-1727 .yn-profile-hud{
    max-width: 1200px;
    margin: 0 auto;
    gap: 18px;
  }
  
  /* Make the whole HUD 2 columns on desktop */
  @media (min-width: 1024px){
    .page-id-1727 .yn-profile-hud{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }
  
  /* Panels: reduce padding + height + shadow so they stack tighter */
  .page-id-1727 .yn-profile-hud .hud-panel--md,
  .page-id-1727 .yn-profile-hud .hud-panel--lg{
    padding: 14px 16px !important;
    min-height: unset !important;
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(0,0,0,.35) !important;
  }
  
  /* Titlebar: slimmer */
  .page-id-1727 .yn-profile-hud .hud-titlebar{
    margin: 0 0 10px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    line-height: 1.1;
  }
  
  /* Notes: slimmer */
  .page-id-1727 .yn-profile-hud .yn-hud-note{
    padding: 10px 12px !important;
    border-radius: 14px;
    margin: 0 0 10px;
  }
  
  /* Grids inside panels: tighter gaps */
  .page-id-1727 .yn-profile-hud .yn-grid-2,
  .page-id-1727 .yn-profile-hud .yn-grid-3{
    gap: 12px !important;
  }
  
  /* Labels + values: denser (more “HUD”) */
  .page-id-1727 .yn-profile-hud .yn-hud-field{
    padding: 6px 0 0 !important;
    min-height: unset !important;
    gap: 6px;
  }
  
  .page-id-1727 .yn-profile-hud .yn-hud-label{
    font-size: 11px !important;
    letter-spacing: .18em !important;
    margin-bottom: 2px !important;
    color: rgba(255,255,255,.45);
  }
  
  .page-id-1727 .yn-profile-hud .yn-hud-value{
    font-size: 16px !important;
    font-weight: 800 !important;
  }
  
  /* Make big text like emails wrap nicely without widening the panel */
  .page-id-1727 .yn-profile-hud .yn-hud-value{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  
  /* CTA: keep it compact and aligned */
  .page-id-1727 .yn-profile-hud .yn-hud-cta{
    padding: 12px 14px !important;
  }
  
  /* Mobile: still 1-column, but tighter vertical rhythm */
  @media (max-width: 768px){
    .page-id-1727 .yn-profile-hud{
      gap: 14px;
    }
    .page-id-1727 .yn-profile-hud .hud-titlebar{
      padding: 10px 12px !important;
    }
  }

  /* ===========================================================
   Profile page (1727) — neutralize theme background-fixed
   =========================================================== */
.page-id-1727 html.js.background-fixed,
.page-id-1727 body {
  background: #0b0b0b !important;
}

/* If the theme draws an overlay/panel via pseudo elements */
.page-id-1727 html.js.background-fixed::before,
.page-id-1727 html.js.background-fixed::after,
.page-id-1727 body::before,
.page-id-1727 body::after {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 0 !important;
}

/* If the "card" feeling is coming from the content wrappers */
.page-id-1727 #page,
.page-id-1727 #content,
.page-id-1727 .site-content,
.page-id-1727 .site-content-contain,
.page-id-1727 .inner-wrap,
.page-id-1727 .entry-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ===========================================================
   Profile page — force readable text inside ARMember form
   =========================================================== */
   .page-id-1727 .arm_form_container,
   .page-id-1727 .arm_form_container * {
     color: rgba(255,255,255,.92);
   }
   
   /* Labels / small text */
   .page-id-1727 .arm_form_container label,
   .page-id-1727 .arm_form_container .arm_field_label,
   .page-id-1727 .arm_form_container .arm_form_label {
     color: rgba(255,255,255,.70) !important;
   }   

   /* ===========================================================
   ARMember Profile Edit (page 1727) — force dark theme vars
   =========================================================== */
.page-id-1727 {
    /* Theme vars (Inspiro) */
    --inspiro-color-background-body: #0b0b0b;
    --inspiro-light-grey-color: rgba(255,255,255,.10);
  
    /* WP preset vars (block theme presets leak everywhere) */
    --wp--preset--color--background: #0b0b0b;
    --wp--preset--color--foreground: #ffffff;
  
    background: #0b0b0b !important;
  }
  
  /* Make sure the actual html/body are dark on this page */
  .page-id-1727 html,
  .page-id-1727 body {
    background: #0b0b0b !important;
  }
  
  /* Kill any theme wrapper backgrounds/panels */
  .page-id-1727 #page,
  .page-id-1727 #content,
  .page-id-1727 .site-content,
  .page-id-1727 .site-content-contain,
  .page-id-1727 .inner-wrap,
  .page-id-1727 .entry-content {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* ===========================================================
   ARMember container: remove any panel backgrounds
   =========================================================== */
.page-id-1727 .arm-form-container,
.page-id-1727 .arm_form_container,
.page-id-1727 .arm_form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Optional: keep the form nicely sized + centered */
.page-id-1727 .arm-form-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ===========================================================
   Make the ARMember form look like a HUD module
   =========================================================== */
   .page-id-1727 .arm_form.arm_form_105 {
    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.55) !important;
    padding: 22px !important;
  }

  /* ===========================================================
   ARMember Edit Profile Form (ID 105) — kill light card skin
   Page: 1727
   =========================================================== */

.page-id-1727 .arm_module_forms_container .arm_form_105,
.page-id-1727 .arm-form-container .arm_form_105.arm-default-form:not(.arm_admin_member_form),
.page-id-1727 .arm_update_card_form_container .arm_form_105,
.page-id-1727 .arm_admin_member_form .arm_editor_form_fileds_wrapper{
  background: rgba(0,0,0,.55) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.55) !important;
  border-radius: 18px !important;
}

.page-id-1727 .arm-form-container .arm_form_wrapper,
.page-id-1727 .arm-form-container .arm_form_inner_container,
.page-id-1727 .arm-form-container .arm_form_fields_wrapper,
.page-id-1727 .arm-form-container .arm-form-message-container{
  background: transparent !important;
}

/* BUT: restore inputs/fields background so they stay readable */
.page-id-1727 .arm-form-container input,
.page-id-1727 .arm-form-container select,
.page-id-1727 .arm-form-container textarea{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Labels + section headers */
.page-id-1727 .arm-form-container label,
.page-id-1727 .arm-form-container .arm_form_field_label_text,
.page-id-1727 .arm-form-container .arm_form_label,
.page-id-1727 .arm-form-container .arm_profile_heading,
.page-id-1727 .arm-form-container .arm_profile_editor_heading{
  color: rgba(255,255,255,.75) !important;
}

/* Accent links + primary buttons */
.page-id-1727 .arm-form-container a,
.page-id-1727 .arm-form-container .arm_color_link{
  color: #ffde17 !important;
}

.page-id-1727 .arm-form-container .arm_form_btn,
.page-id-1727 .arm-form-container button[type="submit"],
.page-id-1727 .arm-form-container input[type="submit"]{
  background: #ffde17 !important;
  color: #0b0b0b !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}

/* ===========================================================
   Inspiro Mobile Nav — prevent horizontal overflow
   =========================================================== */

/* Never allow the off-canvas nav DOM to expand layout width */
html, body {
    overflow-x: hidden;
  }
  
  /* Hard clamp for off-canvas elements that can exceed viewport */
  .side-nav,
  .side-nav__wrap,
  .side-nav__scrollable-container,
  .mobile-menu-wrapper,
  #menu-menu-1 {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure menu lists don't force width */
  #menu-menu-1,
  #menu-menu-1 ul {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Sometimes translate/positioning causes the “right” overflow.
     This keeps it visually off-canvas but not layout-breaking. */
  .side-nav {
    right: 0 !important;
    left: auto !important;
  }
  
  /* Close button sometimes sits outside wrapper */
  .side-nav__close-button {
    max-width: 100vw !important;
  }

  /* ===========================================================
   Global — prevent off-canvas menus from creating horizontal overflow
   =========================================================== */
html, body {
    overflow-x: hidden !important;
  }
  
  /* Hard limit off-canvas wrappers to viewport width */
  .side-nav,
  .side-nav__wrap,
  .side-nav__scrollable-container,
  .mobile-menu-wrapper,
  .navbar-nav,
  #menu-menu-1 {
    max-width: 100vw !important;
  }

  /* ================================
   EDIT PROFILE – FULL WIDTH
   ================================ */

body.page-edit_profile .inner-wrap,
body.page-edit_profile .site-content,
body.page-edit_profile .content-area {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
body.page-dashboard .inner-wrap,
body.page-dashboard .site-content,
body.page-dashboard .content-area {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  body.page-edit_profile .inner-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* EDIT PROFILE (page-id-1696) — remove Inspiro side padding */
.page-id-1696 .inner-wrap,
.page-id-1696 .wrap,
.page-id-1696 .page-entry-content,
.page-id-1696 .entry-footer,
.page-id-1696 .entry-header,
.page-id-1696 .sidebar-right,
.page-id-1696 .inner-wrap .wp-block-group__inner-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
.page-id-1696 .inner-wrap,
.page-id-1696 .wrap {
  max-width: none !important;
}
/* Hide Woo My Account nav everywhere */
.woocommerce-account nav.woocommerce-MyAccount-navigation{
  display:none !important;
}

/* Make content full width */
.woocommerce-account .woocommerce-MyAccount-content{
  width:100% !important;
  float:none !important;
}
/* Hide Woo dashboard text block */
.woocommerce-account.woocommerce-dashboard 
.woocommerce-MyAccount-content > p {
  display: none !important;
}
/* Mobile side-nav: hide submenus by default */
#side-nav .menu-item-has-children > .sub-menu {
  display: none;
}

/* Show submenu when we toggle it open */
#side-nav .menu-item-has-children.is-open > .sub-menu {
  display: block;
}
#side-nav .sub-menu { padding-left: 14px; }
#side-nav .menu-item-has-children > a { cursor: pointer; }