/* =========================================================
   KW ACCOUNT MENU - OPTIMIZED FULL CSS (CURRYS STYLE)
   Responsive: Desktop centered + Mobile compact
========================================================= */

/* ===== ROOT ===== */
.kw-am-wrap{position:relative !important; display:inline-block !important;}
.kw-am-wrap *{box-sizing:border-box !important;}
html.kw-am-noscroll, body.kw-am-noscroll{overflow:hidden !important;}

/* ===== PROFILE BUTTON ===== */
.kw-am-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:6px 10px !important;
  cursor:pointer !important;
  color:#111 !important;
}
.kw-am-btn:focus{outline:none !important;}
.kw-am-icon{
  position:relative !important;
  width:28px !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#111 !important;
  font-size:20px !important;
  line-height:1 !important;
}
.kw-am-name{font-size:12px !important; line-height:1 !important; color:#111 !important;}

/* Tick */
.kw-am-tick{
  position:absolute !important;
  top:-4px !important;
  right:-7px !important;
  width:16px !important;
  height:16px !important;
  border-radius:999px !important;
  background:#2f6bff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.kw-am-tick svg{
  width:11px !important;
  height:11px !important;
  fill:none !important;
  stroke:#fff !important;
  stroke-width:3 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* ===== ALERTS ===== */
.kw-am-alert{
  padding:10px 12px !important;
  border-radius:10px !important;
  margin:0 0 14px !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
.kw-am-alert-error{background:#fff3f3 !important; border:1px solid #ffd3d3 !important; color:#a10000 !important;}
.kw-am-alert-ok{background:#f3fff6 !important; border:1px solid #cfeedd !important; color:#0b6b2a !important;}

/* =========================================================
   DRAWER (LOGGED IN)
========================================================= */
.kw-am-overlay{
  position:fixed !important; inset:0 !important;
  background:rgba(0,0,0,.45) !important;
  z-index:9998 !important;
  display:none !important;
}
.kw-am-drawer{
  position:fixed !important; top:0 !important; right:0 !important;
  width:var(--kw-am-drawer-w, 360px) !important;
  height:100vh !important;
  background:#fff !important;
  border-left:1px solid #e9e9e9 !important;
  box-shadow:-10px 0 30px rgba(0,0,0,.12) !important;
  z-index:9999 !important;
  transform:translateX(100%) !important;
  transition:transform .22s ease !important;
  display:flex !important; flex-direction:column !important;
}
.kw-am-drawer-head{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:14px 16px !important;
  border-bottom:1px solid #eee !important;
}
.kw-am-drawer-title{font-weight:800 !important; font-size:15px !important; color:#111 !important;}
.kw-am-close{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; cursor:pointer !important; color:#111 !important;
  font-size:22px !important; line-height:1 !important;
}
.kw-am-drawer-body{padding:8px 0 !important; overflow:auto !important; -webkit-overflow-scrolling:touch !important;}
.kw-am-item{
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:12px 16px !important;
  text-decoration:none !important;
  color:#111 !important;
  font-size:14px !important;
}
.kw-am-item:hover{background:#f7f7f7 !important;}
.kw-am-item-ico{width:22px !important; text-align:center !important; opacity:.95 !important;}
.kw-am-sep{height:1px !important; background:#eee !important; margin:10px 0 !important;}

/* =========================================================
   MODAL (GUEST) - CENTERED + RESPONSIVE
========================================================= */
.kw-am-modal-overlay{
  position:fixed !important; inset:0 !important;
  background:rgba(0,0,0,.55) !important;
  z-index:10050 !important;
  display:none !important;
}
.kw-am-modal{
  position:fixed !important; inset:0 !important;
  display:none !important;
  z-index:10060 !important;
  padding:22px 14px !important;
  overflow:auto !important;                  /* mobile scroll */
  -webkit-overflow-scrolling:touch !important;
}

/* Modal Box */
.kw-am-modal-inner{
  width:min(980px, 100%) !important;
  margin:0 auto !important;
  background:#fff !important;
  border-radius:12px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.25) !important;
  overflow:hidden !important;
  max-height: calc(100vh - 60px) !important;
  display:flex !important;
  flex-direction:column !important;
}

.kw-am-modal-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:16px 18px !important;
  border-bottom:1px solid #e9e9e9 !important;
}
.kw-am-modal-title{font-size:20px !important; font-weight:800 !important; color:#111 !important;}
.kw-am-modal-close{
  width:40px !important; height:40px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:#fff !important;
  border:2px solid #4c2bd6 !important;
  color:#111 !important;
  cursor:pointer !important;
  font-size:18px !important;
}

/* Content area */
.kw-am-modal-grid{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.kw-am-modal-left,
.kw-am-modal-right{
  min-height:0 !important;
  overflow:auto !important;                  /* DESKTOP scroll inside */
  -webkit-overflow-scrolling:touch !important;
  padding:18px !important;
}

.kw-am-modal-right{
  border-left:1px solid #eee !important;
}

/* =========================================================
   FORMS
========================================================= */
.kw-am-login-form{width:100% !important; max-width:420px !important;}

/* Inputs (placeholder based) */
.kw-am-login-form input[type="text"],
.kw-am-login-form input[type="password"],
.kw-am-login-form input[type="email"]{
  width:100% !important;
  padding:14px 14px !important;
  border:1px solid #d5dbe5 !important;
  border-radius:6px !important;
  font-size:14px !important;
  outline:none !important;
  background:#fff !important;
  margin:0 0 14px 0 !important;
  box-shadow:none !important;
}
.kw-am-login-form input::placeholder{color:#6b7280 !important; font-weight:500 !important;}

/* Row */
.kw-am-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin:0 0 10px 0 !important;
}

/* Checkbox */
.kw-am-check{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  font-size:14px !important;
  color:#111 !important;
}
.kw-am-check input{width:20px !important; height:20px !important;}

/* What is this */
.kw-am-what-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  cursor:pointer !important;
  color:#4c2bd6 !important;
  font-size:14px !important;
  font-weight:600 !important;
}
.kw-am-what-btn i{font-size:12px !important; transition:transform .2s ease !important;}

.kw-am-what-box{
  border:1px solid #d5dbe5 !important;
  border-radius:6px !important;
  padding:12px !important;
  font-size:13px !important;
  color:#333 !important;
  line-height:1.35 !important;
  margin:10px 0 14px 0 !important;
  background:#fff !important;

  max-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  transition:max-height .25s ease, opacity .2s ease !important;
}
.kw-am-wrap.kw-am-what-open .kw-am-what-box{max-height:220px !important; opacity:1 !important;}
.kw-am-wrap.kw-am-what-open .kw-am-what-btn i{transform:rotate(180deg) !important;}

/* Buttons */
.kw-am-primary-btn{
  width:100% !important;
  padding:14px 16px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#4c2bd6 !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:15px !important;
  cursor:pointer !important;
}
.kw-am-primary-btn:hover{opacity:.95 !important;}

.kw-am-outline-btn{
  width:100% !important;
  padding:14px 16px !important;
  border-radius:999px !important;
  border:2px solid #4c2bd6 !important;
  color:#4c2bd6 !important;
  background:#fff !important;
  font-weight:800 !important;
  font-size:15px !important;
  cursor:pointer !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.kw-am-outline-btn:hover{opacity:.95 !important;}

/* Forgot under button */
.kw-am-forgot-wrap{text-align:center !important; margin:14px 0 18px 0 !important;}
.kw-am-link{font-size:14px !important; color:#4c2bd6 !important; text-decoration:none !important;}
.kw-am-link:hover{text-decoration:underline !important;}
.kw-am-forgot{text-decoration:underline !important;}

/* Not a member text */
.kw-am-not-member{
  font-size:22px !important;
  font-weight:400 !important;
  color:#111 !important;
  margin:8px 0 12px 0 !important;
}

/* Register bottom switch */
.kw-am-switch-register{
  margin-top:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-size:14px !important;
  color:#111 !important;
}
.kw-am-switch-register .kw-am-switch-btn{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  color:#4c2bd6 !important;
  font-weight:800 !important;
  cursor:pointer !important;
}
.kw-am-switch-register .kw-am-switch-btn:hover{text-decoration:underline !important;}

/* =========================================================
   REGISTER PERKS / ACCORDIONS
========================================================= */
.kw-am-perks{margin-top:6px !important;}
.kw-am-perks-title{font-size:16px !important; font-weight:800 !important; margin:8px 0 8px !important; color:#111 !important;}
.kw-am-perks-text{font-size:13.5px !important; color:#333 !important; line-height:1.4 !important; margin:0 0 12px !important;}

.kw-am-acc-btn{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  background:transparent !important;
  border:0 !important;
  padding:10px 0 !important;
  cursor:pointer !important;
  color:#111 !important;
  font-size:14px !important;
  font-weight:700 !important;
  text-decoration:underline !important;
}
.kw-am-acc-btn i{font-size:12px !important; transition:transform .2s ease !important;}

.kw-am-acc-panel{
  display:none !important;
  border:1px solid #d5dbe5 !important;
  border-radius:6px !important;
  padding:12px !important;
  font-size:13px !important;
  color:#333 !important;
  line-height:1.35 !important;
  margin:6px 0 12px !important;
  background:#fff !important;
}
.kw-am-acc-panel p{margin:0 0 10px 0 !important;}
.kw-am-acc-panel p:last-child{margin-bottom:0 !important;}
.kw-am-inline-link{color:#4c2bd6 !important; text-decoration:underline !important;}

.kw-am-wrap.kw-am-acc-open-terms .kw-am-acc-panel[data-kwam-panel="terms"]{display:block !important;}
.kw-am-wrap.kw-am-acc-open-terms .kw-am-acc-btn[data-kwam-acc="terms"] i{transform:rotate(180deg) !important;}
.kw-am-wrap.kw-am-acc-open-privacy .kw-am-acc-panel[data-kwam-panel="privacy"]{display:block !important;}
.kw-am-wrap.kw-am-acc-open-privacy .kw-am-acc-btn[data-kwam-acc="privacy"] i{transform:rotate(180deg) !important;}

.kw-am-contact-q{font-size:14px !important; margin:10px 0 10px !important; color:#111 !important;}
.kw-am-contact-row{display:flex !important; gap:18px !important; align-items:center !important; margin:0 0 8px !important;}
.kw-am-note{font-size:12px !important; color:#111 !important; margin:6px 0 10px !important;}

/* reCAPTCHA */
.kw-am-recaptcha{margin:14px 0 14px !important;}
.kw-am-recaptcha .g-recaptcha{transform-origin:0 0 !important;}
@media (max-width:420px){
  .kw-am-recaptcha .g-recaptcha{transform:scale(.92) !important;}
}

/* =========================================================
   BENEFITS (RIGHT SIDE)
========================================================= */
.kw-am-benefits-title{font-size:18px !important; font-weight:800 !important; color:#111 !important; margin:6px 0 14px !important;}
.kw-am-benefit{margin:0 0 16px !important;}
.kw-am-benefit-h{font-weight:800 !important; color:#4c2bd6 !important; margin:0 0 4px !important; font-size:14px !important;}
.kw-am-benefit-p{color:#333 !important; font-size:13.5px !important; line-height:1.4 !important; margin:0 !important;}

/* =========================================================
   OPEN STATES
========================================================= */
.kw-am-wrap.kw-am-open .kw-am-overlay{display:block !important;}
.kw-am-wrap.kw-am-open .kw-am-drawer{transform:translateX(0) !important;}
.kw-am-wrap.kw-am-modal-open .kw-am-modal-overlay{display:block !important;}
.kw-am-wrap.kw-am-modal-open .kw-am-modal{display:block !important;}

/* =========================================================
   MOBILE OPTIMIZATION
========================================================= */
@media (max-width:900px){
  .kw-am-modal-inner{max-height: calc(100vh - 40px) !important;}
  .kw-am-modal-grid{grid-template-columns:1fr !important;}
  .kw-am-modal-right{
    border-left:0 !important;
    border-top:1px solid #eee !important;
    overflow:visible !important;       /* below section */
  }
  .kw-am-modal-left{overflow:visible !important;}
  .kw-am-modal-title{font-size:18px !important;}
  .kw-am-login-form input{padding:13px 13px !important; font-size:14px !important;}
  .kw-am-primary-btn, .kw-am-outline-btn{padding:13px 14px !important; font-size:14.5px !important;}
  .kw-am-not-member{font-size:20px !important;}
}

@media (max-width:480px){
  .kw-am-modal{padding:14px 10px !important;}
  .kw-am-modal-top{padding:14px 14px !important;}
  .kw-am-modal-left, .kw-am-modal-right{padding:14px !important;}
  .kw-am-check{font-size:13.5px !important;}
  .kw-am-what-btn{font-size:13.5px !important;}
}

/* =========================================================
   STANDALONE PAGES (optional)
========================================================= */
.kw-am-page{max-width:980px !important; margin:30px auto !important; padding:0 16px !important;}
.kw-am-page-card{
  background:#fff !important;
  border:1px solid #eee !important;
  border-radius:14px !important;
  padding:22px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.06) !important;
}
.kw-am-page-title{font-size:22px !important; font-weight:800 !important; margin:0 0 16px !important; color:#111 !important;}
/* Already have an account?  Sign in (Register bottom switch) */
.kw-am-switch{
  margin-top:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;  /* center */
  gap:10px !important;
  font-size:14px !important;
  color:#111 !important;
  flex-wrap:wrap !important;
}

.kw-am-switch span{
  display:inline-block !important;
  color:#111 !important;
  font-size:14px !important;
}

.kw-am-switch-btn{
  display:inline-block !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  color:#4c2bd6 !important;
  font-weight:800 !important;
  font-size:14px !important;
  cursor:pointer !important;
  line-height:1.1 !important;
}

.kw-am-switch-btn:hover{
  text-decoration:underline !important;
}
/* =========================================================
   MOBILE FIX PATCH (ADD AT END) - DON'T REMOVE EXISTING CSS
   Fix: mobile scroll + layout stacking + no overlap
========================================================= */

@media (max-width: 900px){

  /* Modal outer should NOT scroll, inner content should */
  .kw-am-modal{
    overflow:hidden !important;
    padding:12px 10px !important;
  }

  /* Make modal box fixed height inside viewport */
  .kw-am-modal-inner{
    max-height:none !important;
    height:calc(100vh - 24px) !important;
    width:min(520px, 100%) !important;
  }

  /* Replace grid with column stack on mobile + make it the scroller */
  .kw-am-modal-grid{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;

    overflow:auto !important;                 /* ✅ SCROLL HERE */
    -webkit-overflow-scrolling:touch !important;
  }

  /* Keep header visible while scrolling (optional but nice) */
  .kw-am-modal-top{
    position:sticky !important;
    top:0 !important;
    z-index:10 !important;
    background:#fff !important;
  }

  /* Left/Right should NOT have their own scroll on mobile */
  .kw-am-modal-left,
  .kw-am-modal-right{
    overflow:visible !important;
    min-height:auto !important;
    padding:14px !important;
  }

  /* Benefits section goes BELOW with clear separation */
  .kw-am-modal-right{
    border-left:0 !important;
    border-top:1px solid #eee !important;
    margin-top:10px !important;
    padding-top:16px !important;
  }

  /* Small cleanup spacing so nothing overlaps */
  .kw-am-perks,
  .kw-am-benefits-title,
  .kw-am-benefit{
    position:relative !important;
    z-index:1 !important;
  }
}

@media (max-width: 480px){

  .kw-am-modal-inner{
    width:min(420px, 100%) !important;
    border-radius:10px !important;
  }

  .kw-am-modal-title{
    font-size:18px !important;
  }

  /* Make form more compact on very small screens */
  .kw-am-login-form input[type="text"],
  .kw-am-login-form input[type="password"],
  .kw-am-login-form input[type="email"]{
    padding:12px 12px !important;
    margin:0 0 12px 0 !important;
    font-size:14px !important;
  }

  .kw-am-primary-btn,
  .kw-am-outline-btn{
    padding:12px 14px !important;
    font-size:14px !important;
  }

  .kw-am-not-member{
    font-size:18px !important;
  }

  /* Reduce benefits text size a bit */
  .kw-am-benefits-title{font-size:16px !important;}
  .kw-am-benefit-h{font-size:13.5px !important;}
  .kw-am-benefit-p{font-size:13px !important;}
}