/* =========================================================
   ACCUPHARMA – CUSTOM LOGIN UI (FRAPPE v15)
   ========================================================= */

   html, body { height: 100%; }

   body.accu-login{
     min-height: 100vh !important;
     background: linear-gradient(90deg, #64BCBF 0%, #EC006F 100%) !important;
     overflow: hidden;
   }
   
   /* Hide Website chrome */
   body.accu-login .navbar,
   body.accu-login header,
   body.accu-login footer,
   body.accu-login .web-footer,
   body.accu-login .page-head {
     display: none !important;
   }
   
   /* Remove default container constraints on login */
   body.accu-login #page-login main.container,
   body.accu-login #page-login main.container.my-4,
   body.accu-login #page-login .page_content,
   body.accu-login #page-login .page-content-wrapper {
     max-width: none !important;
     width: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
   }
   
   /* Overlay */
   body.accu-login::before{
     content:"";
     position: fixed;
     inset: 0;
     background: rgba(5, 11, 29, 0.18);
     pointer-events: none;
     z-index: 0;
   }
   
   /* =========================================================
      SHELL
      ========================================================= */
   body.accu-login .accu-login-shell{
     position: relative;
     z-index: 1;
     min-height: 100vh;
     width: 100%;
     display: flex;
     flex-direction: column;
   }
   
   /* Topbar */
   body.accu-login .accu-login-topbar{
     display:flex;
     justify-content:flex-end;
     gap: 10px;
     padding: 18px 22px;
   }
   
   body.accu-login .accu-icon-btn{
     width:40px;height:40px;
     border-radius:10px;
     border:1px solid rgba(255,255,255,.55);
     background: rgba(255,255,255,.12);
     color:#fff;
     cursor:pointer;
   }
   
   body.accu-login .accu-lang{
     height:40px;
     border-radius:10px;
     padding:0 12px;
     border:1px solid rgba(255,255,255,.55);
     background: rgba(255,255,255,.12);
     color:#fff;
   }
   body.accu-login .accu-lang option{ color:#000; }
   
   /* Grid */
   body.accu-login .accu-login-grid{
     flex: 1;
     display: grid;
     grid-template-columns: 1.15fr 0.85fr;
     align-items: center;
     gap: 40px;
   
     max-width: 1320px;
     margin: 0 auto;
     width: 100%;
   
     padding: 24px 48px 56px;
   }
   
   /* Left */
   body.accu-login .accu-left,
   body.accu-login .accu-left .accu-sub,
   body.accu-login .accu-left .accu-sub span{
     color: #fff !important;
   }
   
   body.accu-login .accu-left{
     max-width: 620px;
   }
   body.accu-login .accu-left h1{
     font-size: clamp(44px, 5vw, 74px);
     line-height: .95;
     margin: 0 0 14px;
     font-weight: 800;
   }
   body.accu-login .accu-left .accu-sub{
     font-size: 15px;
     opacity: .85;
   }
   
   /* Right */
   body.accu-login .accu-right{
     display:flex;
     justify-content: flex-end;
     align-items: center;
   }
   
   /* IMPORTANT: now sections are INSIDE right, don't force 100vh */
   body.accu-login .accu-right section.for-login,
   body.accu-login .accu-right section.for-login-with-email-link,
   body.accu-login .accu-right section.for-forgot,
   body.accu-login .accu-right section.for-signup{
     min-height: auto !important;
     width: auto !important;
     margin: 0 !important;
     padding: 0 !important;
     background: transparent !important;
   }
   
   /* =========================================================
      LOGIN CARD
      ========================================================= */
   body.accu-login .login-content.page-card{
     width: 520px !important;
     max-width: 520px !important;
     min-width: 520px !important;
   
     height: auto !important;
     min-height: 400px !important;
   
     margin: 0 !important;
     border: 0 !important;
     border-radius: 18px !important;
   
     background: rgba(255,255,255,0.96) !important;
     box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
   
     padding: 0 !important;
   
     display: flex !important;
     flex-direction: column !important;
     justify-content: center !important;
     overflow: hidden;
   }
   
   /* Forms full width */
   body.accu-login .login-content.page-card form.form-login,
   body.accu-login .login-content.page-card form.form-signin,
   body.accu-login .login-content.page-card form.form-login.form-signin{
     width: 100% !important;
     max-width: 100% !important;
     margin: 0 !important;
   }
   
   /* Header when moved inside card */
   body.accu-login .login-content.page-card .page-card-head.accu-in-card-head{
     width: 459px !important;
     max-width: 100% !important;
     margin: 0 auto !important;
     padding: 18px 0 6px !important;
     text-align: left !important;
   }
   body.accu-login .login-content.page-card .page-card-head.accu-in-card-head h4{
     font-size: 30px !important;
     font-weight: 800 !important;
     margin: 0 !important;
     line-height: 1.1 !important;
   }
   
   /* Body */
   body.accu-login .login-content.page-card .page-card-body{
     width: 100% !important;
     max-width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     box-sizing: border-box !important;
     display: block !important;
   }
   body.accu-login .login-content.page-card .page-card-body::before{
     content: "";
     display: block;
     height: 10px;
   }
   body.accu-login .login-content.page-card .page-card-body > *{
     width: 459px !important;
     max-width: 100% !important;
     margin-left: auto !important;
     margin-right: auto !important;
     box-sizing: border-box !important;
   }
   
   /* Inputs */
   body.accu-login .login-content.page-card input.form-control{
     background: #E6ECFF !important;
     border: 0 !important;
     border-radius: 10px !important;
     height: 46px !important;
   }
   
   /* spacing */
   body.accu-login .login-content.page-card .form-group,
   body.accu-login .login-content.page-card .field{
     margin-bottom: 14px !important;
   }
   
   /* input-group */
   body.accu-login .login-content.page-card .input-group{ width: 100% !important; }
   body.accu-login .login-content.page-card .input-group-addon,
   body.accu-login .login-content.page-card .form-control-feedback{
     background: transparent !important;
     border: 0 !important;
   }
   
   /* =========================================================
      ACTIONS (CENTER + FIXED WIDTH 459)
      ========================================================= */
   body.accu-login .login-content.page-card .page-card-actions{
     width: 100% !important;
     max-width: 100% !important;
     margin-top: 16px !important;
     padding-bottom: 10px !important;
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
   }
   
   body.accu-login .login-content.page-card .page-card-actions > *{
     width: 459px !important;
     max-width: 100% !important;
     margin-left: auto !important;
     margin-right: auto !important;
     box-sizing: border-box !important;
   }
   
   /* Force all action buttons to be centered like Login */
   body.accu-login .login-content.page-card .page-card-actions .btn{
     display: block !important;
     width: 459px !important;   
     max-width: 100% !important;
     margin: 0 auto !important;
   }
   
   /* Primary buttons style (Login / Reset / Send Link) */
   body.accu-login .login-content.page-card .btn-primary,
   body.accu-login .login-content.page-card .btn-login,
   body.accu-login .login-content.page-card .btn-forgot,
   body.accu-login .login-content.page-card .btn-login-with-email-link{
     display: block !important;
     width: 459px !important;
     max-width: 100% !important;
     margin: 0 auto !important;
   
     background: #0D1B46 !important;
     border-color: #0D1B46 !important;
     height: 48px !important;
     border-radius: 12px !important;
     font-weight: 700 !important;
     margin-top: 6px !important;
   }
   
   body.accu-login .login-content.page-card .btn-primary:hover,
   body.accu-login .login-content.page-card .btn-login:hover,
   body.accu-login .login-content.page-card .btn-forgot:hover,
   body.accu-login .login-content.page-card .btn-login-with-email-link:hover{
     background: #08112B !important;
     border-color: #08112B !important;
   }
   
   /* =========================================================
      SOCIAL LOGINS / EMAIL LINK BUTTON ALIGNMENT
      ========================================================= */
   body.accu-login .login-content.page-card .social-logins{
     width: 459px !important;
     max-width: 100% !important;
     margin: 10px auto 0 !important;
     padding: 0 !important;
     text-align: center !important;
   }
   
   body.accu-login .login-content.page-card .login-with-email-link.social-login-buttons{
     width: 459px !important;
     max-width: 100% !important;
     margin: 0 auto !important;
     padding: 0 !important;
     display: flex !important;
     justify-content: center !important;
   }
   
   body.accu-login .login-content.page-card
   .login-with-email-link.social-login-buttons .login-button-wrapper{
     width: 100% !important;
   }
   
   body.accu-login .login-content.page-card
   .login-with-email-link.social-login-buttons .btn{
     width: 459px !important;
     max-width: 100% !important;
     margin-bottom: 30px !important;
     /* margin: 0 auto !important; */
     display: block !important;
   }
   
   /* =========================================================
      Fixed logo
      ========================================================= */
   body.accu-login .accu-brand-fixed{
     position: fixed;
     top: 22px;
     left: 26px;
     z-index: 10;
   }
   body.accu-login .accu-brand-fixed img{
     width: 220px !important;
     height: 52px !important;
     object-fit: contain;
     display: block;
   }
   
   /* Responsive */
   @media (max-width: 980px){
     body.accu-login .accu-login-grid{
       grid-template-columns: 1fr;
       gap: 18px;
       padding: 16px 16px 28px;
     }
     body.accu-login .accu-right{ justify-content: center; }
   
     body.accu-login .login-content.page-card{
       width: min(520px, 100%) !important;
       max-width: 520px !important;
       min-width: 0 !important;
       min-height: 0 !important;
     }
   
     body.accu-login .accu-brand-fixed{ top: 14px; left: 14px; }
   
     body.accu-login .login-content.page-card .page-card-body > *,
     body.accu-login .login-content.page-card .page-card-actions > *,
     body.accu-login .login-content.page-card .page-card-head.accu-in-card-head,
     body.accu-login .login-content.page-card .social-logins,
     body.accu-login .login-content.page-card .page-card-actions .btn,
     body.accu-login .login-content.page-card
     .login-with-email-link.social-login-buttons{
       width: 100% !important;
     }
   }
   
   /* Dark mode */
   body.accu-login.accu-dark::before { background: rgba(0,0,0,0.45) !important; }
   
   body.accu-login.accu-dark .login-content.page-card{
     background: rgba(12, 18, 36, 0.92) !important;
   }
   body.accu-login.accu-dark .login-content.page-card,
   body.accu-login.accu-dark .login-content.page-card *{
     color: #fff !important;
   }
   body.accu-login.accu-dark .login-content.page-card input.form-control{
     background: rgba(255,255,255,0.10) !important;
     color: #fff !important;
   }
   body.accu-login.accu-dark .login-content.page-card input.form-control::placeholder{
     color: rgba(255,255,255,0.70) !important;
   }
   


   /* ============================
   ICON + INPUT SPACING FIX
   ============================ */

/* Wrap icon and input properly */
body.accu-login .login-content.page-card .form-group {
  position: relative;
}

/* Style the icon */
body.accu-login .login-content.page-card svg.field-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: #6b6b6b;
  pointer-events: none;
}

/* Add padding to input so text doesn’t collide with icon */
body.accu-login .login-content.page-card input.form-control {
  padding-left: 44px !important;
  transition: padding 0.2s ease;
  font-size: 15px !important;
  color: #333;
}

/* Optional: subtle focus style */
body.accu-login .login-content.page-card input.form-control:focus {
  padding-left: 44px !important;
  box-shadow: 0 0 0 2px rgba(13,27,70,0.15) !important;
  border: 1px solid #0D1B46 !important;
}

/* Smooth vertical alignment for icon + input in dark mode */
body.accu-login.accu-dark .login-content.page-card svg.field-icon {
  fill: rgba(255,255,255,0.7);
}