/* ===========================
   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) ===== */
.login-container{
  position:relative;z-index:1;height:100vh;width:100%;max-width:var(--max-width);margin:0 auto;padding:1.5rem;
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
}

/* 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%;max-width:520px;background:var(--white);padding:2rem;border-radius:20px;box-shadow:var(--shadow-xl);
  position:relative;animation:slide-up 0.6s ease-out;overflow:hidden;
}
.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:1.9rem;font-weight:700;color:var(--brew-text);margin-bottom:0.35rem;
}
.form-header p{font-size:0.92rem;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.875rem 0.875rem 0.875rem 3.1rem;font-size:0.95rem;color:var(--brew-text);
  background:var(--brew-surface);border:2px solid var(--brew-line);border-radius:12px;transition:all 0.2s ease;outline:none;font-family:'Poppins',sans-serif;
}

/* 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.9rem;font-size:1rem;font-weight:600;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 6px 20px rgba(198,124,78,0.22);margin-bottom:1rem
}
.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{padding:2.25rem;border-radius:20px}
}

/* Desktop / small-laptop range */
@media (min-width:1025px) and (max-width:1199px){
  .login-container{align-items:flex-start;padding-top:2rem;padding-bottom:2rem}
  .login-form-container{max-width:600px;padding:1.6rem 1.8rem}
  .form-header h2{font-size:1.7rem}
}

/* Large desktops (wide screens) — make the form feel proportionate and balanced */
@media (min-width:1200px) and (max-width:1599px){
  .login-container{align-items:center;justify-content:center;padding-top:2.5rem;padding-bottom:2.5rem;min-height:calc(100vh - 5rem)}
  .login-form-container{max-width:640px;padding:2rem 2.2rem;border-radius:20px;box-shadow:var(--shadow-lg)}
  .form-header h2{font-size:1.9rem}
  .form-header p{font-size:0.9rem}
}

/* Ultra-wide / very large monitors */
@media (min-width:1600px){
  .login-container{align-items:center;padding-top:3rem;padding-bottom:3rem}
  .login-form-container{max-width:720px}
}

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

@media (max-width:768px){
  body{overflow:auto}
  .login-container{padding:.75rem;height:100vh;align-items:flex-start;justify-content:center}
  .login-form-container{max-width:100%;padding:1.2rem;border-radius:14px;margin-top:2rem;margin-bottom:2rem}
  .form-header h2{font-size:1.45rem}
  .divider span{font-size:.78rem;padding:0 .6rem}
  .btn-login{padding:.78rem;font-size:.95rem}
  .social-login{gap:.5rem;margin-bottom:.75rem}
  .btn-social{padding:.65rem;font-size:.88rem;border-radius:10px}
  .coffee-bean{width:26px;height:36px;opacity:0.06}
}

@media (max-width:480px){
  .login-form-container{padding:1rem;border-radius:12px}
  .form-header h2{font-size:1.25rem;margin-bottom:.2rem}
  .form-header p{font-size:.78rem}
  /* smaller screen input padding to fit the icon */
  .form-group input{padding:.65rem .65rem .65rem 2.6rem;font-size:.86rem;border-radius:10px}
  .toggle-password{right:.7rem;font-size:1rem;padding:.35rem}
}

/* ===== 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 ===== */