{% set _id = module.instance_id %}
{% set BORDER = '#003b68' %}
{% set BG     = '#ffffff' %}
{% set TEXT   = '#003b68' %}

/* ==============================
   Right Side Nav (rsn) - FULL CSS (EN)
   - Open: toggle sits left of panel
   - Closed: toggle moves to right edge (panel slides out)
   - Do NOT use display:none for animation parts
============================== */

#rsn-{
  --rsn-border: ;
  --rsn-bg: ;
  --rsn-text: ;
  --rsn-row-bg: #fff;
  --rsn-row-bg-alt: #eef3f7;
  --rsn-shadow: 0 6px 18px rgba(0,0,0,.12);

  /* measured by JS */
  --panel-w: 300px;

  --gap: 10px;

  position: fixed;
  right: 0;
  top: 30%;
  transform: translateY(-30%);
  z-index: 2147483000;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif;
}

/* Disable animation during init to avoid jitter */
#rsn-.is-init,
#rsn-.is-init *{
  transition: none !important;
}

/* Panel */
#rsn- .rsn__panel{
  position: absolute;
  right: 12px;
  top: 0;

  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  will-change: transform, opacity;
  transition: transform .28s ease, opacity .18s ease;
  transform: translateX(0);
  opacity: 1;
}

#rsn-.is-collapsed .rsn__panel{
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
  display: block !important;
}

/* Toggle (vertical tab) */
#rsn- .rsn__toggle{
  position: absolute;
  top: 0;
  right: calc(var(--panel-w) + var(--gap) + 12px);
  writing-mode: vertical-rl;

  background:#e60012;
  color:#fff;
  border:none;
  border-radius:8px 0 0 8px;

  padding: 14px 10px;
  font-size: 16px;
  line-height: 1.15;

  cursor:pointer;
  box-shadow:var(--rsn-shadow);
  font-weight:800;
  white-space:nowrap;

  will-change: right;
  transition: right .28s ease;
}

#rsn-.is-collapsed .rsn__toggle{
  right: 0;
}

#rsn- .rsn__toggle-label{display:inline-block;}
#rsn- .rsn__toggle-open{display:none;}
#rsn-.is-collapsed .rsn__toggle-close{display:none;}
#rsn-.is-collapsed .rsn__toggle-open{display:inline-block;}

@media (max-width:900px){
  #rsn- .rsn__toggle{ display:none; }
}

/* Lists */
#rsn- .rsn__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
#rsn- .rsn__sublist{
  list-style:none;
  margin:8px 0 0 0;
  padding:0;
  display:grid;
  gap:8px;
}

/* Row */
#rsn- .rsn__row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  min-width:260px;
  padding:12px 14px;

  background:var(--rsn-row-bg);
  color:var(--rsn-text);
  border:2px solid var(--rsn-border);
  border-radius:10px;

  font-size:15px;
  font-weight:700;
  text-decoration:none;

  box-shadow:var(--rsn-shadow);
  transition:background .15s ease, transform .08s ease, box-shadow .15s ease;
}
#rsn- .rsn__row:hover{
  background:#f3f7fc;
  transform:translateY(-1px);
}
#rsn- .rsn__row:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* Indent sublist rows */
#rsn- .rsn__sublist--indent .rsn__row{
  width: calc(100% - 20px);
  margin-left: 20px;
}
#rsn- .rsn__sublist--indent .rsn__row--sub{
  min-width: 170px;
  padding: 9px 11px;
  font-size: 13.5px;
  margin-left: 18px;
  width: calc(100% - 18px);
  box-sizing: border-box;
}

/* Sub rows */
#rsn- .rsn__row--sub{
  background:var(--rsn-row-bg-alt);
  border-color:#c9d2dc;
  font-weight:600;
  min-width:auto;
  padding: 9px 11px;
  font-size: 13.5px;
}

/* Accordion */
#rsn- .rsn__acc{
  width:100%;
  cursor:pointer;
  border-style:solid;
  background:var(--rsn-row-bg);
}
#rsn- .rsn__chev{
  margin-left:14px;
  transition: transform .15s ease;
}
#rsn- .rsn__item--acc.is-open > .rsn__acc .rsn__chev{
  transform: rotate(90deg);
}

/* External icon */
#rsn- .rsn__ext{
  margin-left:.4em;
  opacity:.7;
}

/* Current page dim */
#rsn- .is-active{
  background:#eceff3 !important;
  color:#7a8794 !important;
  border-color:#c9d2dc !important;
  pointer-events:none;
  cursor:default;
}

/* Hide on small screens */
@media (max-width:767px){
  #rsn-{ display:none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #rsn- .rsn__panel,
  #rsn- .rsn__toggle{
    transition: none !important;
  }
}