/* ===========================
   Bean & Brew — Login CSS (full)
   Overwrites/hard-resets left-branding, preserves JS hooks & form behavior.
   Add Bootstrap Icons in <head>:
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
   =========================== */

/* ===== CSS VARIABLES ===== */
:root{
  --brew-primary:#C67C4E;
  --brew-primary-light:#D69A6F;
  --brew-primary-dark:#A86839;
  --brew-primary-10:#EDD6C8;
  --brew-line:#E3E3E3;
  --brew-surface:#F9F2ED;
  --brew-text:#2F2D2C;
  --brew-text-light:#7E7D7C;
  --white:#FFFFFF;
  --shadow-sm:0 2px 8px rgba(46,45,44,0.08);
  --shadow-md:0 4px 16px rgba(46,45,44,0.12);
  --shadow-lg:0 8px 32px rgba(46,45,44,0.16);
  --shadow-xl:0 16px 48px rgba(198,124,78,0.2);
  --max-width:1400px;
}


/* ===== Login-like focus/typing + addon tint ===== */
/* Make input-group behave like the login input-wrapper when focused/has value */
.input-group.focused .input-group-text,
.input-group:focus-within .input-group-text {
  color: var(--brew-primary-dark) !important;
  background: var(--white) !important;
  border-color: var(--brew-primary) !important;
}

/* When input has focus or contains text, make input background white and border primary */
.input-group.focused .form-control,
.input-group:focus-within .form-control {
  background: var(--white) !important;
  border-color: var(--brew-primary) !important;
  box-shadow: 0 0 0 6px rgba(198,124,78,0.06) !important;
  color: var(--brew-text) !important;
  caret-color: var(--brew-text) !important;
}

/* Tint the toggle button when focused */
.input-group.focused .btn-toggle,
.input-group:focus-within .btn-toggle {
  border-color: var(--brew-primary) !important;
  color: var(--brew-primary-dark) !important;
  background: var(--white) !important;
}

/* ensure icon color inherits */
.input-group.focused .input-group-text i,
.input-group:focus-within .input-group-text i,
.input-group.focused .btn-toggle i,
.input-group:focus-within .btn-toggle i {
  color: inherit !important;
  fill: currentColor !important;
}

/* Reduce overlap with browser autofill popup by ensuring toggle sits visually above it */
.btn-toggle { position: relative; z-index: 10; }

/* Force consistent padding so toggle and browser overlay don't visually cut into text while typing */
.input-group .form-control,
.input-wrapper input {
  padding-right: 3.8rem; /* space for toggle; prevents overlap */
}

/* ensure placeholder & typed text are correct color */
.input-group .form-control::placeholder,
.input-wrapper input::placeholder {
  color: var(--brew-text-light) !important;
}
.input-group .form-control,
.input-wrapper input {
  color: var(--brew-text) !important;
}

/* If autofill still applies, prefer white background on focus (keeps login style) */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--white) inset !important;
  box-shadow: 0 0 0px 1000px var(--white) inset !important;
}


/* ===== Reset & Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Poppins',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:linear-gradient(135deg,var(--brew-surface) 0%,var(--brew-primary-10) 100%);
  color:var(--brew-text);
  min-height:100vh;
  position:relative;
  overflow:auto;
}

/* ===== Background animation (kept) ===== */
.background-animation{
  position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0;
}
.coffee-bean{
  position:absolute;width:40px;height:50px;
  background:radial-gradient(ellipse at center,var(--brew-primary-dark) 0%,var(--brew-primary) 50%,var(--brew-primary-light) 100%);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  opacity:0.08; animation:float 20s infinite ease-in-out;
}
.coffee-bean::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:60%;background:rgba(255,255,255,0.25);border-radius:2px;
}
.bean-1{top:10%;left:10%;animation-duration:18s}
.bean-2{top:60%;left:20%;animation-duration:22s;animation-delay:2s}
.bean-3{top:30%;left:80%;animation-duration:20s;animation-delay:4s}
.bean-4{top:80%;left:70%;animation-duration:19s;animation-delay:1s}
.bean-5{top:50%;left:50%;animation-duration:24s;animation-delay:3s}
.bean-6{top:20%;left:60%;animation-duration:21s;animation-delay:5s}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-30px) rotate(5deg)}
  50%{transform:translateY(-50px) rotate(-5deg)}
  75%{transform:translateY(-30px) rotate(3deg)}
}

.steam-container{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);pointer-events:none}
.steam{position:absolute;bottom:0;width:6px;height:80px;background:linear-gradient(to top,rgba(198,124,78,0.3),transparent);border-radius:50%;animation:steam-rise 4s infinite ease-in-out;opacity:0.4}
.steam-1{left:-20px;animation-delay:0s}.steam-2{left:0;animation-delay:1s}.steam-3{left:20px;animation-delay:2s}.steam-4{left:40px;animation-delay:0.5s}
@keyframes steam-rise{0%{transform:translateY(0) scaleX(1);opacity:0.4}50%{transform:translateY(-40px) scaleX(1.2);opacity:0.6}100%{transform:translateY(-80px) scaleX(0.8);opacity:0}}

/* ===== Main container (centered single column) ===== */
/* ===== Main container (centered single column) ===== */
.login-container{
  position:relative;
  z-index:1;
  min-height:100vh;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  /* larger top/bottom padding + large side gutters to center a narrow card on wide screens */
  padding:4.5rem 10vw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  overflow:visible;
}



/* Hide branding markup visually (keeps DOM unchanged) */
.login-brand, .brand-content, .brand-decoration, .brand-features, .coffee-cup { display:none !important }

/* ===== Form wrapper & card ===== */
.login-form-wrapper{display:flex;align-items:center;justify-content:center;padding:1rem;width:100%;z-index:2}
.login-form-container{
  width: 100%;
  /* larger card width so content fits comfortably on large displays */
  width: min(960px, 66vw);
  max-width: 960px;                    /* new larger cap */
  background: var(--white);
  padding: 3.25rem 3rem;               /* more horizontal room for inputs/buttons */
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(46,45,44,0.12), 0 12px 28px rgba(198,124,78,0.10);
  position:relative;
  animation:slide-up 0.6s ease-out;
  box-sizing: border-box;
  overflow: visible; /* ensure page scrolls not card */
}



/* decorative top accent (thin warm strip) */
.login-form-container::before{
  content:'';
  position:absolute;
  top:-8px;
  left:18px;
  right:18px;
  height:8px;
  border-radius:10px 10px 0 0;
  background: linear-gradient(90deg, var(--brew-primary-dark), var(--brew-primary));
  box-shadow: 0 4px 12px rgba(198,124,78,0.08);
  z-index:3;
}

/* Add a subtle warm outline to help card pop on wide background */
.login-form-container{
  outline: 1px solid rgba(198,124,78,0.03);
  outline-offset: 6px;
}


.login-form-container::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--brew-primary),var(--brew-primary-light));border-radius:20px 20px 0 0}
@keyframes slide-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ===== Form header ===== */
.form-header{text-align:center;margin-bottom:1.2rem}
.form-header h2{
  font-family:'Playfair Display',serif;
  font-size:2.2rem; /* larger heading like screenshot */
  font-weight:700;
  color:var(--brew-text);
  margin-bottom:0.25rem;
  text-align:center;
  letter-spacing:0.2px;
}
.form-header p{
  text-align:center;
  font-size:1rem; /* slightly larger subheading */
  color:var(--brew-text-light);
  margin:0;
}

/* ===== Alerts ===== */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;font-size:0.95rem;animation:slideIn 0.25s ease-out}
.alert i{margin-right:10px;font-size:1.1rem}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
.alert-info{background:#cce7ff;color:#004085;border:1px solid #b3d7ff}
.alert-warning{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ===== Form groups & labels & icons ===== */
.form-group{margin-bottom:1rem;transition:all 0.25s ease}
.form-group label{
  display:inline-flex;align-items:center;gap:0.6rem;font-size:0.92rem;font-weight:600;color:var(--brew-text);
  margin-bottom:0.45rem;cursor:text;
}
.form-group label .bi{font-size:1.05rem;color:var(--brew-primary);line-height:1;display:inline-block;vertical-align:middle}

/* When input inside the group is focused, tint the label icon (keyboard users) */
/* Use focus-within for broad compatibility */
.form-group:focus-within label .bi{color:var(--brew-primary-dark)}

/* ===== Inputs ===== */
/* input-wrapper kept (icon is inside the input box) */
.input-wrapper{position:relative;display:flex;align-items:center;width:100%}

/* ICON INSIDE INPUT (left) */
.input-icon{
  position:absolute;
  left:12px;                 /* distance from left edge of input box */
  z-index:3;
  font-size:1.05rem;
  color:var(--brew-primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;       /* icon doesn't intercept clicks */
}

/* ensure input padding-left accounts for the icon (space for icon) */
.form-group input[type="email"], .form-group input[type="password"], .form-group input{
  width:100%;
  padding:0.95rem 1rem 0.95rem 3.1rem; /* taller inputs */
  font-size:0.98rem;
  color:var(--brew-text);
  background:var(--brew-surface);
  border:2px solid var(--brew-line);
  border-radius:12px;
  transition:all 0.18s ease;
  outline:none;
  font-family:'Poppins',sans-serif;
  height:52px; /* consistent tall control */
  box-sizing:border-box;
}

/* Focus state */
.form-group input:focus{background:var(--white);border-color:var(--brew-primary);box-shadow:0 0 0 6px rgba(198,124,78,0.06)}
.form-group input::placeholder{color:var(--brew-text-light)}

/* Toggle password (keeps your JS hook) */
.toggle-password{position:absolute;right:12px;background:none;border:none;font-size:1.15rem;cursor:pointer;padding:0.45rem;transition:transform .12s;z-index:4}
.toggle-password:hover{transform:scale(1.06)}

/* When input has focus, darken the icon */
.form-group:focus-within .input-icon{color:var(--brew-primary-dark)}

/* ===== Form options ===== */
.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.forgot-link{font-size:0.9rem;color:var(--brew-primary);text-decoration:none;font-weight:500}
.forgot-link:hover{color:var(--brew-primary-dark);text-decoration:underline}

/* ===== Primary login button ===== */
.btn-login{
  width:100%;
  padding:0.95rem;
  font-size:1.02rem;
  font-weight:700;
  color:var(--white);
  background:linear-gradient(135deg,var(--brew-primary),var(--brew-primary-light));
  border:none;
  border-radius:12px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .18s,box-shadow .18s;
  box-shadow: 0 18px 40px rgba(198,124,78,0.14), 0 6px 18px rgba(46,45,44,0.06);
  margin-bottom:1rem;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-login span{display:inline-block}

.btn-login:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(198,124,78,0.28)}
.btn-login:active{transform:translateY(0)}
.btn-shine{position:absolute;top:0;left:-120%;width:120%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);transition:left .55s}
.btn-login:hover .btn-shine{left:120%}
.btn-login.loading{pointer-events:none;opacity:0.85}

/* ===== Divider ===== */
.divider{position:relative;text-align:center;margin:1rem 0}
.divider::before,.divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--brew-line)}
.divider::before{left:0}.divider::after{right:0}
.divider span{display:inline-block;padding:0 1rem;font-size:0.85rem;color:var(--brew-text-light);background:transparent;position:relative;font-weight:600}

/* ===== Social login (Google only) ===== */
.social-login{display:grid;grid-template-columns:1fr;gap:0.75rem;margin-bottom:1rem}
.btn-social{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.75rem;font-size:.95rem;font-weight:600;color:var(--brew-text);background:var(--white);border:2px solid var(--brew-line);border-radius:10px;cursor:pointer;transition:all .18s;font-family:'Poppins',sans-serif}
.btn-social:hover{border-color:var(--brew-primary);background:var(--brew-surface);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-social svg{width:20px;height:20px;flex-shrink:0}
.btn-social.google{width:100%;background:linear-gradient(90deg,rgba(66,133,244,0.04),rgba(198,124,78,0.01));border:1px solid var(--brew-line);color:var(--brew-text)}
.btn-social.facebook{display:none} /* in case facebook markup remains, hide visually */

/* ===== Signup & Back links ===== */
.signup-prompt{ text-align:center;padding-top:1rem;border-top:1px solid var(--brew-line);margin-top:0.5rem }
.signup-prompt p{font-size:0.9rem;color:var(--brew-text-light)}
.signup-link{color:var(--brew-primary);text-decoration:none;font-weight:600}
.signup-link:hover{color:var(--brew-primary-dark);text-decoration:underline}

.back-link{text-align:center;margin-top:0.75rem}
.back-link a{display:inline-flex;align-items:center;gap:.5rem;font-size:0.9rem;color:var(--brew-text-light);text-decoration:none;transition:all .18s}
.back-link a:hover{color:var(--brew-primary);gap:.75rem}

.toggle-password i.bi {
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}


/* ===== Responsive adjustments ===== */
@media (min-width:1025px){
  .login-container{padding:2rem}
  .login-form-container{
    max-width:960px;    /* match the new desktop cap */
    padding:3.25rem 3rem; /* larger breathing room on desktop */
    border-radius:20px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}


@media (max-width:1024px){
  .login-container{padding:1rem;min-height:100vh}
  .login-form-container{max-width:560px;padding:1.6rem}
  .login-brand{display:none!important}
}

@media (max-width:768px){
  /* let the page scroll normally on small screens */
  body{overflow:auto}

  .login-container{
    padding:0.75rem 0.6rem;
    min-height:100vh;
    align-items:flex-start;
    justify-content:center;
  }

  .login-form-container{
    /* allow the card to still scale down smoothly on tablets/phones */
    width: clamp(340px, 86vw, 920px);
    max-width: 920px;
    background: var(--white);
    padding: 2rem 1.1rem; /* slightly reduced horizontal padding on smaller screens */
    border-radius:16px;
    box-shadow: 0 26px 60px rgba(46,45,44,0.10), 0 10px 22px rgba(198,124,78,0.08);
    position:relative;
    animation:slide-up 0.6s ease-out;
    box-sizing: border-box;
    overflow: visible;
  }

  .form-header{margin-bottom:0.9rem}
  .form-header h2{font-size:1.5rem}
  .form-group{margin-bottom:1rem}
  .divider{margin:0.8rem 0}
  .divider span{font-size:.8rem;padding:0 .6rem}
  .btn-login{padding:.7rem;font-size:.9rem;height:44px}
  .social-login{gap:.4rem;margin-bottom:.5rem}
  .btn-social{padding:.6rem;font-size:.85rem;border-radius:10px}
  .login-prompt{margin-top:0.8rem}
  .back-link{margin-top:0.5rem}
  .coffee-bean{width:20px;height:28px;opacity:0.06}
}



@media (max-width:480px){
  .login-form-container{
    padding:.7rem;
    border-radius:12px;
    width: calc(100% - 0.5rem);
    max-width: 100%;
    box-sizing: border-box;
  }
  .form-header h2{font-size:1.2rem;margin-bottom:.15rem}
  .form-header p{font-size:.75rem}
  .form-group{margin-bottom:0.9rem}
  .form-group input{padding:.65rem .6rem .65rem 2.3rem;font-size:.88rem;border-radius:10px;height:42px}
  .toggle-password{right:.55rem;font-size:.95rem;padding:.3rem}
  .btn-login{height:42px;font-size:.9rem;padding:.65rem}
  .divider{margin:0.7rem 0}
  .social-login{margin-bottom:.4rem}
  .login-prompt{margin-top:0.7rem;font-size:.85rem}
  .back-link{margin-top:0.4rem}
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Focus outlines for keyboard users */
.btn-social:focus, .btn-login:focus, input:focus, .forgot-link:focus, .signup-link:focus, .back-link a:focus{
  outline:3px solid rgba(198,124,78,0.12);outline-offset:2px;
}

/* ===== End of file ===== */