/* ================================
   1911 Addicts Login – styles.css
   Clean + Pixel-match
==================================*/

/* ======= Design tokens ======= */
:root{
  --brand:#8B2D2D;
  --brand-hover:#A63C3C;
  --brand-active:#782323;

  --text:#2B2B2B;
  --muted:#6B6B6B;

  --bg:#F3F3F3;
  --card:#FFFFFF;

  --border:#E5E5E5;
  --hair:#E9E9E9;

  --focus: rgba(139,45,45,.28);

  --r-xs:6px;
  --r-sm:10px;
  --r-md:12px;
  --r-lg:14px;

  --s-4:4px;
  --s-6:6px;
  --s-8:8px;
  --s-10:10px;
  --s-12:12px;
  --s-14:14px;
  --s-16:16px;
  --s-18:18px;
  --s-20:20px;
  --s-24:24px;
}

/* ======= Base ======= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ======= Layout ======= */
.container{ padding:var(--s-8); max-width:960px; margin:0 auto; }
.card{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:12px;
  padding:var(--s-20);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
}

/* ======= Banner + Header ======= */
.banner{ position:relative; width:100%; overflow:hidden; }
.banner img{ width:100%; display:block; }

.header-bar{
  position:sticky; top:0; z-index:1000;
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(120%) blur(2px);
}
/* Overlap banner only on desktop to mimic site */
@media (min-width:1024px){
  .banner{ height:160px; }
  .header-bar{ margin-top:-56px; }
  .header-bar .logo{ margin-left: 32px; }
}

.header-bar__inner{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-24);
  padding:6px 10px; color:#fff;
}
.header-bar .logo{ display:flex; align-items:center; gap:6px; }
.header-bar .logo img{ margin-left:16px; height:45px; }

/* Search */
.header-bar .header-search{ flex:1 1 420px; max-width:none; margin:0 var(--s-8); }
/* FIX: sensible desktop width (was 10px) */
@media (min-width:1024px){
  .header-bar .header-search{ flex-basis:500px; max-width:500px; }
}
.header-bar .search{
  background:#3A3A3A; display:flex; align-items:center; overflow:hidden; 
}
.header-bar .search input{
  flex:1; background:transparent; border:0; padding:10px 10px; color:#D0D0D0; font-size:14px; font-weight:600;
}
.header-bar .search button{
  background:none; border:0; padding:0 8px; cursor:pointer; display:flex; align-items:center;
}
/* Ensure the icon is visible on all screen sizes */
.header-bar .search button svg{
  visibility: visible;  /* Make sure it is not hidden by any display property */
  width: 20px; /* Adjust to preferred size */
  height: 25px; /* Adjust to preferred size */
  /* color: white; */
}
.header-bar .search input:focus,
.header-bar .search button:focus{
  outline:none; border-radius:8px; /* no colored box-shadow */
}

/* Nav */
.nav-items{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:12px; margin-right:24px; 
  
}
.nav-link{
  color:#fff; text-decoration:none; display:flex; align-items:center;
  gap:8px; padding:4px 8px; border-radius:var(--r-sm);
  transition: color 0.3s ease, background 0.3s ease;
}
/* FIX: remove colored focus ring */
.nav-link:focus{ outline:none; background:rgba(255,255,255,.08); }
.nav-link svg{ width:20px; height:20px; fill:#fff; }
.nav-text{ font-weight:600; font-size:16px; line-height:1; }
/* --- Nav links: remove bold and darken font on hover --- */
.nav-link:hover {
  font-weight: 600;  /* Keep the font weight the same */
  color: rgba(255, 255, 255, 0.8);  /* Darken the font color */
}



/* Tablet: icons only */
@media (min-width:768px) and (max-width:1023px){
  .nav-text{ display:none; }
  .header-bar .header-search{ flex-basis:420px; }
}
/* Mobile header (<=767px) */
@media (max-width:767px){
  .banner{ display:none; }
  .header-bar{ margin-top:0; background:#0d0d0d; }
  .header-bar__inner{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  }
  .header-bar .logo img{ margin-left:0; height:28px;}
  .nav-items{ order:1; margin-left:auto; margin-right:0; gap:10px; flex-wrap:nowrap; }
  .nav-items li{ flex:0 0 auto; white-space:nowrap; }
  .nav-text{ display:none; }
  .nav-link{ padding:4px; }
  .nav-link svg{ width:20px; height:20px; }
  .header-search{ order:2; width:100%; flex:1 0 100%; margin:8px 0 2px; }
  .header-bar .search input{ padding:8px 10px; font-size:14px; }
}
/* Narrow (≤375 / ≤320) */
@media (max-width:375px){
  .header-bar .logo img{ height:24px; }
  .nav-items{ gap:8px; margin-right:0; }
}
@media (max-width:320px){
  .header-bar .logo img{ height:20px; }
  .nav-items{ gap:6px; }
  .header-search input{ font-size:13px; padding:6px 10px; height:34px; }
  .header-bar .search button svg{ width:16px; height:16px; }
}

/* ======= Breadcrumb ======= */
.breadcrumb{
  background:#fff; width:100%; margin:0; padding:8px 16px;
}
/* 1024–1399px: match the reference feel (shorter) */
@media (min-width:1024px) and (max-width:1399px){
  .header-bar .header-search{
    flex-basis: 500px;
    max-width: 300px; /* FIX: was 300px conflicting */
  }
  .nav-items { margin-right: 45px;}
}
@media (min-width:768px){ .breadcrumb{ padding:8px 24px; } }
@media (min-width:1024px){ .breadcrumb{ padding:8px 50px; } }
.breadcrumb .crumb-back{
  color:#000; text-decoration:none; font-weight:600; font-size:12px;
}
/* FIX: remove colored focus ring */
.breadcrumb .crumb-back:focus{ outline:none; }

 /* ======= Login ======= */
h2{ color:#404040; font-size:22px; font-weight:700; margin:0 0 12px; }

.login-card{ padding:18px 20px; }
.login-container{ display:flex; flex-direction:column; gap:var(--s-10); }

/* Social logins */
.social-logins{
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.btn{
  border-radius:var(--r-md); padding:12px 14px;
  border:1px solid #DADADA; background:#fff; cursor:pointer;
}
/* .btn:focus{ outline:none; box-shadow:0 0 0 3px var(--focus); } */
.btn-social {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* centers the text */
  padding: 10px 12px;
  width: 100%;
  font-size: 14px;
  border-radius: 8px;
}
.btn-social span {
  flex: 1;
  text-align: center;       /* force the label to the center */
}
.btn-social svg,
.btn-social img {
  position: absolute;
  left: 12px;               /* keep icon visually aligned */
}
.btn-social:hover{ background:#e5e5e5; }

/* Divider */
.login-divider{
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-weight:600; gap:12px;
}
.login-divider::before, .login-divider::after{
  content:''; height:1px; flex:1; background: var(--border); /* FIX: add missing bg */
}
.login-divider span{
  padding:0 12px; background:#fff; border-radius:var(--r-sm);
}

/* Form */
.login-form{ display:grid; gap:var(--s-10); }
input[type='text'], input[type='password']{
  width:100%; background:#F2F2F2; border:1px solid var(--border);
  border-radius:3px; padding:10px 12px; font-size:15px;
}
input[type='text']:focus, input[type='password']:focus{
  outline:none;
}

.password-wrap{ position:relative; }
.password-wrap input{ width:100%; padding-right:44px; }
.show-btn{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  display:flex; align-items:center; gap:4px;
  background:none; border:none; padding:0; cursor:pointer; font-size:12px; color:#444;
}
.show-btn:focus{ outline:none; border-radius:var(--r-xs); }
.show-btn svg{ width:16px; height:16px; }

.checkbox{ display:flex; align-items:center; gap:8px; font-size:14px; color:#3a3a3a; }
.checkbox input{ color:black; }

.muted{ color:var(--muted); }
.small{ font-size:12px; }

.login-form .link, .recaptcha .link, .signup .link{
  color:var(--brand); text-decoration:none;
}
.login-form .link:hover, .recaptcha .link:hover, .signup .link:hover{ text-decoration:underline; }

.btn-primary{
  background:var(--brand); color:#fff; border:0; border-radius:12px;
  padding:10px 14px; font-weight:700; transition:background-color .2s ease;
}
.btn-primary:hover{ background:var(--brand-hover); }
.btn-primary:active{ background:var(--brand-active); }

.recaptcha, .signup{ text-align:center; margin-top:14px; }
.signup{ font-size:15px;}

/* Desktop split layout for login (≈46 / 8 / 46) */
@media (min-width:768px){
  .login-container{ flex-direction:row; gap:var(--s-24); align-items:flex-start; }
  .login-form{ order:0; width:46%; padding-right:12px; }
  .login-divider{
    order:1; flex-direction:column; width:1.5px; align-self:stretch; background:var(--border);
  }
  .login-divider::before, .login-divider::after{ width:1px; height:auto; flex:1; }
  .login-divider span{ background:#fff; margin:8px 0; padding:2px 8px; }
  .social-logins{ order:2; width:46%; padding-left:12px; }
}

/* ======= Footer ======= */
.site-footer{ background:#0d0d0d; color:#fff; }
.site-footer .footer-inner{ max-width:1280px; margin:0 auto; padding:26px; }
.footer-links{
  list-style:none; margin:0 10px; padding:0;
  display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center;
}
.footer-links a{ color:#fff; text-decoration:none; font-weight:600; font-size:14px; }
.footer-links a:hover{ text-decoration:underline; }
.footer-links .vline{ width:1px; height:16px; background:#3a3a3a; }
.disclaimer{ color:#cfcfcf; font-size:13px; margin:14px 0 0; line-height:1.5; }
.footer-logos{ display:flex; justify-content:flex-end; gap:14px; align-items:center; margin-top:10px; }
.footer-logo{ height:28px; width:auto; display:block; }

/* Balance the right cluster a bit (your override kept) */
.nav-items{ gap: 15px; }