@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ============================================
   BOOKZZY NAVBAR — scoped with .bkz- prefix
   Zero impact on other page areas
   ============================================ */
   body{
    font-family: "Inter", sans-serif;
    margin:0;
    padding:0;
   }
.bkz-wrap *{margin:0;padding:0;box-sizing:border-box;}
.bkz-wrap{
  font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  width:100%;
  position:relative;
  z-index:999;
}
.bkz-wrap a{text-decoration:none;}

/* ---------- TOP UTILITY BAR ---------- */
.bkz-topbar{
  background:#fff;
  color:#000000;
  font-size:13px;
  border-bottom: 1px solid #00000010;
}
.bkz-topbar-in{
  max-width:1400px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.bkz-toplinks{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.bkz-toplinks a{
     color: #000000;
    opacity: 0.6;
  transition:color .2s ease;
  font-size:13px;
  font-weight:400;
}
.bkz-toplinks a:hover{color:#ff4d2e; opacity:1;}
.bkz-topdot{
  color:#9a9a9a;
  margin:0 6px 0 2px;
}
.bkz-topcontact{
  display:flex;
  align-items:center;
  gap:22px;
}
.bkz-topcontact a{
  color:#000000;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:color .2s ease;
  font-size:14px;
  font-weight:500;
  letter-spacing:0.5px;
}
.bkz-topcontact a:hover{color:#ff4d2e;}
.bkz-topcontact svg{
  width:15px;
  height:15px;
  flex:0 0 auto;
}

/* ---------- MAIN NAVBAR ---------- */
.bkz-navbar{
  background:#ffffff;
  border-bottom:1px solid #f0f0f0;
  position:relative; /* mobile panel + sticky anchor */
}

/* ---------- STICKY STATE (added by JS on scroll) ---------- */
.bkz-navbar.bkz-sticky{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1100;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  animation:bkzStickIn .35s ease;
}
@keyframes bkzStickIn{
  from{transform:translateY(-100%);}
  to{transform:translateY(0);}
}
.bkz-nav-in{
  max-width:1400px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Logo */
.bkz-logo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.bkz-logo-icon{
  width:34px;
  height:34px;
  border-radius:9px;
  background:linear-gradient(135deg,#ff8a3d 0%,#ff4d2e 100%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.bkz-logo-icon svg{
  width:18px;
  height:18px;
}
.bkz-logo-text{
  font-size:23px;
  font-weight:800;
  color:#121212;
  letter-spacing:-0.3px;
}

/* Center menu */
.bkz-menu{
  display:flex;
  align-items:center;
  gap:36px;
  list-style:none;
}
.bkz-menu a{
  color:#000000;
  font-size:16px;
  font-weight:500;
  transition:color .2s ease;
  white-space:nowrap;
}
.bkz-menu a:hover{color:#ff4d2e;}
.bkz-menu a.bkz-active{color:#ff4d2e;}

/* ---------- PRODUCTS DROPDOWN (scoped .bkz-dd-*) ---------- */
.bkz-dd{position:relative;}
.bkz-dd-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.bkz-dd-caret{
  width:14px;
  height:14px;
  flex:0 0 auto;
  transition:transform .25s ease;
}
.bkz-dd-menu{
  list-style:none;
}

/* Desktop: hover dropdown */
@media (min-width: 1025px){
  .bkz-dd-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%) translateY(8px);
    min-width:230px;
    background:#ffffff;
    border:1px solid #f0f0f0;
    border-radius:12px;
    box-shadow:0 16px 36px rgba(0,0,0,.10);
    padding:8px 0;
    margin-top:14px;
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    z-index:1000;
  }
  /* invisible hover bridge so the menu doesn't close crossing the gap */
  .bkz-dd-menu::before{
    content:"";
    position:absolute;
    top:-14px;
    left:0;
    right:0;
    height:14px;
  }
  .bkz-dd:hover .bkz-dd-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  .bkz-dd:hover .bkz-dd-caret{transform:rotate(180deg);}
  .bkz-dd-menu a{
    display:block;
    padding:10px 20px;
    font-size:14.5px;
    font-weight:600;
    color:#121212;
    white-space:nowrap;
    transition:color .2s ease, background .2s ease;
  }
  .bkz-dd-menu a:hover{
    color:#ff481f;
    background:#fff5f2;
  }
}

/* Right actions */
.bkz-actions{
  display:flex;
  align-items:center;
  gap:22px;
  flex:0 0 auto;
}
.bkz-login{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#000000;
  font-size:16px;
  font-weight:600;
  transition:color .2s ease;
}
.bkz-login:hover{color:#ff481f;}
.bkz-login svg{
  width:15px;
  height:15px;
}
.bkz-signup{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:1.5px solid #ff481f;
  border-radius:999px;
  padding:5px 6px 5px 22px;
  color:#ff481f;
  font-size:15.5px;
  font-weight:600;
  background:#ffffff;
  transition:box-shadow .25s ease, transform .25s ease;
}
.bkz-signup:hover{
  box-shadow:0 6px 18px rgba(255,77,46,.25);
  transform:translateY(-1px);
}
.bkz-signup-text{
 /* background:linear-gradient(135deg,#f9a41b 0%,#ff2d55 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;*/
  color:#ff481f;
  font-size:16px;
}
.bkz-signup-arrow{
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,#f9a41b 0%,#ed1d6b 100%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.bkz-signup-arrow svg{
  width:16px;
  height:16px;
}

/* Hamburger (hidden on desktop) */
.bkz-burger{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  padding:6px;
  flex:0 0 auto;
}
.bkz-burger span{
  display:block;
  width:24px;
  height:2.5px;
  background:#121212;
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.bkz-burger span + span{margin-top:5px;}
.bkz-burger.bkz-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.bkz-burger.bkz-open span:nth-child(2){opacity:0;}
.bkz-burger.bkz-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ---------- MOBILE ---------- */
@media (max-width: 1024px){
  .bkz-topbar-in{
    padding:8px 16px;
    flex-direction:column;
    align-items:center;   /* centered on mobile */
    gap:6px;
  }
  .bkz-toplinks{justify-content:center;}
  .bkz-topcontact{gap:16px;flex-wrap:wrap;justify-content:center;}

  .bkz-nav-in{padding:12px 16px;}

  /* logo stays left, burger goes right */
  .bkz-burger{display:block;}

  /* collapsible panel: menu items + login/signup inside */
  .bkz-panel{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#ffffff;
    border-bottom:1px solid #eee;
    box-shadow:0 14px 30px rgba(0,0,0,.08);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .bkz-panel.bkz-open{max-height:480px;}

  .bkz-menu{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:6px 0;
  }
  .bkz-menu li{width:100%;}
  .bkz-menu a{
    display:block;
    padding:13px 20px;
    border-bottom:1px solid #f4f4f4;
    font-size:16px;
  }

  /* Mobile dropdown: tap-to-expand accordion inside the panel */
  .bkz-dd-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }
  .bkz-dd-caret{margin-left:10px;}
  .bkz-dd.bkz-dd-open .bkz-dd-caret{transform:rotate(180deg);}
  .bkz-dd-menu{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    background:#fafafa;
  }
  .bkz-dd.bkz-dd-open .bkz-dd-menu{max-height:300px;}
  .bkz-dd-menu a{
    padding:12px 20px 12px 34px;
    font-size:15px;
    font-weight:500;
    border-bottom:1px solid #f1f1f1;
  }
  .bkz-dd-menu li:last-child a{border-bottom:0;}

  /* buttons BELOW menu items, inside the hamburger panel */
  .bkz-actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:16px 20px 20px;
  }
  .bkz-login{
    justify-content:center;
    border:1.5px solid #e8e8e8;
    border-radius:999px;
    padding:11px 20px;
  }
  .bkz-signup{
    justify-content:space-between;
    padding:5px 6px 5px 22px;
  }
}

/* Desktop: logo left | menu center | CTAs right
   .bkz-panel becomes a passthrough (display:contents) so
   .bkz-nav-in's justify-content:space-between spaces the
   three regions: logo — menu — actions */
@media (min-width: 1025px){
  .bkz-panel{display:contents;}

  /* Signup: arrow sits slightly outside the pill, as in the design */
  .bkz-signup{
    position:relative;
    padding:10px 26px;
    margin-right:18px; /* reserve room for the detached arrow */
  }
  .bkz-signup-arrow{
    position:absolute;
    right:-19px;
    top:50%;
    transform:translateY(-50%);
   /* box-shadow:0 4px 12px rgba(255,45,85,.35);*/
  }
}