/* Bunny English 4.3.13 — mobile three-destination bottom navigation. */
.mobile-bottom-nav{display:none}

@media (max-width:900px){
  body{
    padding-bottom:calc(94px + env(safe-area-inset-bottom,0px));
  }

  .mobile-bottom-nav{
    position:fixed;
    z-index:9800;
    right:50%;
    bottom:max(8px,env(safe-area-inset-bottom,0px));
    display:block;
    width:min(520px,calc(100% - 20px));
    transform:translateX(50%);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    pointer-events:none;
  }

  .mobile-bottom-nav__bar{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:end;
    min-height:68px;
    padding:7px 10px 6px;
    border:1px solid rgba(84,107,132,.17);
    border-radius:24px;
    background:rgba(255,255,255,.94);
    box-shadow:0 16px 42px rgba(38,52,78,.18);
    backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
    pointer-events:auto;
  }

  .mobile-bottom-nav__item{
    position:relative;
    display:grid;
    grid-template-rows:30px 18px;
    align-items:center;
    justify-items:center;
    min-width:0;
    min-height:54px;
    padding:3px 6px 1px;
    border-radius:17px;
    color:#697b8d;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:color .18s ease,background .18s ease,transform .18s ease;
  }

  .mobile-bottom-nav__icon{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
  }

  .mobile-bottom-nav__icon .bunny-icon{
    width:24px;
    height:24px;
  }

  .mobile-bottom-nav__label{
    max-width:100%;
    overflow:hidden;
    font-size:11px;
    font-weight:780;
    line-height:18px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-bottom-nav__item:not(.mobile-bottom-nav__item--primary).is-active{
    color:#8f4f72;
    background:#fff1f6;
  }

  .mobile-bottom-nav__item--primary{
    grid-template-rows:50px 18px;
    min-height:68px;
    margin-top:-17px;
    color:#7d4d6a;
  }

  .mobile-bottom-nav__item--primary .mobile-bottom-nav__icon{
    width:50px;
    height:50px;
    border:4px solid rgba(255,255,255,.96);
    border-radius:50%;
    background:linear-gradient(145deg,#f4a9c5,#d783aa);
    color:#fff;
    box-shadow:0 9px 22px rgba(174,88,130,.28);
  }

  .mobile-bottom-nav__item--primary .mobile-bottom-nav__icon .bunny-icon{
    width:27px;
    height:27px;
  }

  .mobile-bottom-nav__item--primary .mobile-bottom-nav__label{
    color:#70455f;
    font-weight:900;
  }

  .mobile-bottom-nav__item--primary.is-active .mobile-bottom-nav__icon{
    background:linear-gradient(145deg,#e88eb3,#b96491);
    box-shadow:0 10px 25px rgba(157,74,116,.36),0 0 0 4px rgba(236,154,188,.13);
  }

  .mobile-bottom-nav__item:active{
    transform:scale(.96);
  }

  .mobile-bottom-nav__item:focus-visible{
    outline:3px solid rgba(104,142,180,.34);
    outline-offset:2px;
  }

  body.menu-open .mobile-bottom-nav{
    opacity:0;
    visibility:hidden;
    transform:translateX(50%) translateY(16px);
    pointer-events:none;
  }

  html.bny-plyr-fullscreen-open .mobile-bottom-nav,
  body.bny-plyr-fullscreen-open .mobile-bottom-nav{
    display:none!important;
  }

  html[data-bunny-theme="dark"] .mobile-bottom-nav__bar{
    border-color:#34475f;
    background:rgba(20,32,49,.95);
    box-shadow:0 18px 46px rgba(0,0,0,.38);
  }

  html[data-bunny-theme="dark"] .mobile-bottom-nav__item{
    color:#9eafc1;
  }

  html[data-bunny-theme="dark"] .mobile-bottom-nav__item:not(.mobile-bottom-nav__item--primary).is-active{
    color:#f0b4cd;
    background:#30202d;
  }

  html[data-bunny-theme="dark"] .mobile-bottom-nav__item--primary{
    color:#e4b2ca;
  }

  html[data-bunny-theme="dark"] .mobile-bottom-nav__item--primary .mobile-bottom-nav__icon{
    border-color:#142031;
    background:linear-gradient(145deg,#c86d98,#8f4b72);
    box-shadow:0 10px 24px rgba(0,0,0,.4);
  }

  html[data-bunny-theme="dark"] .mobile-bottom-nav__item--primary .mobile-bottom-nav__label{
    color:#efbdd3;
  }
}

@media (max-width:380px){
  .mobile-bottom-nav{
    bottom:max(5px,env(safe-area-inset-bottom,0px));
    width:calc(100% - 12px);
  }
  .mobile-bottom-nav__bar{
    padding-inline:5px;
    border-radius:21px;
  }
  .mobile-bottom-nav__label{font-size:10.5px}
}

@media (max-height:480px) and (orientation:landscape){
  body{padding-bottom:0}
  .mobile-bottom-nav{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mobile-bottom-nav,
  .mobile-bottom-nav__item{transition:none}
}

/* Bunny English 4.3.14 — clean mobile header and jump-free drawer */
@media (max-width:1020px){
  body.menu-open{
    padding-right:var(--bunny-scrollbar-compensation,0px);
    overscroll-behavior:none;
  }

  /* Account and continue actions already live inside the hamburger menu. */
  .header-actions > .header-login,
  .header-actions > .header-cta{
    display:none!important;
  }

  /* Fixed control width prevents the logo and toggle from shifting. */
  .header-actions{
    flex:0 0 auto!important;
    min-width:95px;
    justify-content:flex-end;
    gap:7px!important;
  }
  .header-actions > .theme-toggle,
  .header-actions > .menu-toggle{
    flex:0 0 44px!important;
  }
  .menu-toggle{
    display:flex!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }

  /* Fade the drawer without moving its box, so opening feels stable. */
  .primary-nav{
    max-height:calc(100dvh - 82px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:none!important;
    will-change:opacity;
    transition:opacity .18s ease,visibility 0s linear .18s!important;
  }
  .primary-nav.is-open{
    transform:none!important;
    transition:opacity .18s ease,visibility 0s!important;
  }
}

@media (max-width:620px){
  .header-actions{min-width:95px}
  .primary-nav{max-height:calc(100dvh - 78px)}
}


/* Bunny English 4.3.15 — fade-only mobile menu with zero page shift */
@media (max-width:1020px){
  /* Keep the page scrollbar and width unchanged while the menu is open. */
  body.menu-open{
    overflow:visible!important;
    padding-right:0!important;
    overscroll-behavior:auto!important;
  }

  /* The menu box never moves; only opacity changes. */
  .primary-nav{
    transform:none!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease,visibility 0s linear .16s!important;
    will-change:opacity;
  }
  .primary-nav.is-open{
    transform:none!important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .16s ease,visibility 0s linear 0s!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .primary-nav,
  .primary-nav.is-open{transition:none!important}
}


/* Bunny English 4.3.16 — component-only fade menu and horizontal viewport guard */
@media (max-width:1020px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
  }

  @supports not (overflow:clip){
    html,
    body{overflow-x:hidden!important}
  }

  /* A stale or third-party menu-open rule must never move the Bunny page. */
  body.menu-open{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-right:0!important;
    transform:none!important;
    overflow-x:clip!important;
  }

  .site-header,
  .site-main,
  .site-footer{
    width:100%;
    max-width:100%;
  }

  /* The drawer is a viewport overlay and has no participation in page layout. */
  .primary-nav{
    position:fixed!important;
    right:11px!important;
    left:11px!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 22px)!important;
    margin:0!important;
    box-sizing:border-box!important;
    transform:none!important;
    translate:none!important;
    contain:layout paint;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease,visibility 0s linear .16s!important;
    will-change:opacity;
  }

  .primary-nav.is-open{
    transform:none!important;
    translate:none!important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .16s ease,visibility 0s linear 0s!important;
  }

  /* Hide only the bottom-nav component; no class is written to body/html. */
  .mobile-bottom-nav.is-menu-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .primary-nav,
  .primary-nav.is-open{transition:none!important}
}

/* Bunny English 4.3.17 — hide the website footer on mobile. */
@media (max-width:900px){
  .site-footer{
    display:none!important;
  }

  /* Keep the final content clear of the fixed bottom navigation. */
  .site-main{
    padding-bottom:max(18px,env(safe-area-inset-bottom,0px));
  }
}