/* Off-canvas */
.iw-offcanvas-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 1004;
}
.iw-offcanvas-backdrop.is-open { opacity: 1; pointer-events: auto; }
.iw-offcanvas-backdrop[hidden] { display: none !important; }

.iw-offcanvas {
  position: fixed; top: 0; right: 0; height: 100dvh; width: var(--iw-offcanvas-width);
  background: #000; color: #fff; transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 1005;
  display: none; flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.12);
  max-width: 100%;
  overflow-x: hidden;
  visibility: hidden;
  pointer-events: none;
  contain: layout paint;
}
.iw-offcanvas[aria-hidden="true"] { display: none; }
.iw-offcanvas.is-open { display: flex; transform: translateX(0); visibility: visible; pointer-events: auto; }

/* Optional: slide-in from left by adding class .iw-offcanvas--left */
.iw-offcanvas--left { left: 0; right: auto; transform: translateX(-100%); }
.iw-offcanvas--left.is-open { transform: translateX(0); }

.iw-offcanvas__header {
  display:flex; align-items:center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.iw-offcanvas__logo img { height: 36px; width: auto; display: block; }
@media (min-width:480px){ .iw-offcanvas__logo img { height: 40px; } }
.iw-close {
  display:inline-flex; align-items:center; justify-content:center;
  width: 52px; height: 52px; border-radius: 14px;
  background: transparent !important; color: #fff; border: 1px solid rgba(255,255,255,.15); cursor: pointer;
}
.iw-close:hover { border-color: var(--brand-pink); background: rgba(255,255,255,.06); box-shadow: 0 0 0 2px rgba(213,0,105,.25) inset; }
.iw-close:active { background: rgba(255,255,255,.1); }

/* Search overlay */
.iw-lock{ overflow: hidden; }
.iw-search{
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.iw-search.is-open{ opacity: 1; pointer-events: auto; }
.iw-search__backdrop{
  position: absolute; inset: 0;
  background: rgba(5,8,15,.78);
  backdrop-filter: blur(4px);
}
.iw-search__panel{
  position: relative; z-index: 1;
  width: min(720px, calc(100% - 32px));
  background: #0b1429; color: #fff;
  border-radius: 18px; padding: 28px 28px 32px;
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
  transform: translateY(-8px); transition: transform .2s ease;
  border: 1px solid rgba(255,255,255,.12);
}
.iw-search.is-open .iw-search__panel{ transform: translateY(0); }
.iw-search__close{
  position: absolute; top: 16px; right: 16px;
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.08) !important; color: #fff; border: 1px solid rgba(255,255,255,.2);
  cursor: pointer;
}
.iw-search__close:hover{ border-color: var(--brand-pink); box-shadow: 0 0 0 2px rgba(213,0,105,.25) inset; }
.iw-search__title{ margin: 0 0 16px; font-size: 1.4rem; font-weight: 800; }
.iw-search .search-form{ display: block; }
.iw-search .search-form label{ display: block; }
.iw-search .search-field{
  width: 100%; padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; font-size: 1.05rem;
}
.iw-search .search-field::placeholder{ color: rgba(255,255,255,.65); }
.iw-search__results{ margin-top: 16px; }
.iw-search__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.iw-search__list a{
  display:block; padding:12px 14px; border-radius:12px; text-decoration:none;
  color:#fff; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.iw-search__list a:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.iw-search__empty{ color: rgba(255,255,255,.7); font-size: .95rem; }
@media (max-width: 600px){
  .iw-search__panel{ padding: 24px 20px 26px; }
}

/* Mobilnav list-styles */
.iw-nav ul, .iw-nav li, .iw-menu, .iw-menu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.iw-nav--mobile .iw-menu--mobile {
  display: flex; flex-direction: column; gap: 0; padding: .9rem 20px 1.3rem;
}
.iw-nav--mobile .iw-menu--mobile > li { position: relative; margin: 2px 0; }
.iw-nav--mobile .iw-menu--mobile a {
  display:flex; align-items:center; min-height: 48px; padding: 0 56px 0 16px; text-decoration:none;
  color:#fff; opacity:.95; border-bottom: none;
  font-size: 1.05rem;
  border-radius: 12px;
  background: transparent;
  position: relative;
}
.iw-nav--mobile .iw-menu--mobile a:hover { opacity: 1; color: #fff; background: rgba(255,255,255,.06); }
.iw-nav--mobile .iw-menu--mobile .current-menu-item > a { color: var(--brand-pink); }
.iw-nav--mobile .iw-menu--mobile .current-menu-item > a,
.iw-nav--mobile .iw-menu--mobile .current-menu-ancestor > a { background: rgba(255,255,255,.08); }

/* Mobile submenu toggle & states */
.iw-nav--mobile .iw-menu--mobile li { position: relative; }
.iw-nav--mobile .iw-menu--mobile .sub-menu {
  display: block; overflow: hidden; max-height: 0; padding-left: .75rem;
  transition: max-height .25s ease;
}
.iw-nav--mobile .iw-menu--mobile li.is-open > .sub-menu { max-height: 800px; }
.iw-nav--mobile .iw-menu--mobile .sub-menu { padding-left: 24px; }
.iw-nav--mobile .iw-menu--mobile .sub-menu a { min-height: 44px; border-radius: 10px; padding-right: 56px; padding-left: 16px; }
.iw-nav--mobile .iw-menu--mobile .sub-menu a:hover { background: rgba(255,255,255,.06); }
.iw-nav--mobile .submenu-toggle {
  position: absolute; right: 20px; top: 8px; bottom: 8px; margin: auto 0;
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #fff;
  z-index: 2;
}
.iw-nav--mobile li.is-open > .submenu-toggle { background: transparent; }
.iw-nav--mobile .submenu-toggle:hover { background: transparent; }
.iw-nav--mobile li.is-open > .submenu-toggle svg { transform: rotate(180deg); }
.iw-nav--mobile .submenu-toggle svg { transition: transform .2s ease; opacity: .95; width: 34px !important; height: 34px !important; }

