/* ===== KaniKian Rent · login paneli ===== */
:root{
  --brand:#f97316;
  --text:#ffffff;
  --muted:rgba(255,255,255,.70);
  --cardL:rgba(255,255,255,.05);
  --cardR:rgba(10,12,16,.55);
  --border:rgba(255,255,255,.12);
}

html,body{height:100%}

/* Sfond pa “magacin-angle” — i njëtrajtshëm me brend ATV */
body.auth-atv-login{
  background:
    radial-gradient(ellipse 120% 80% at 80% 20%, rgba(249,115,22,.35), transparent 55%),
    radial-gradient(ellipse 90% 60% at 10% 80%, rgba(15,118,110,.28), transparent 50%),
    linear-gradient(165deg,#0f172a 0%,#0c0a09 48%,#1c1410 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* top-left brand always visible */
.login-topbar{
  position:fixed;
  top:18px;
  left:22px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:50;
  user-select:none;
}
.login-topbar .dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 6px rgba(255,96,96,.15);
}
.login-topbar .name{
  font-weight:900;
  letter-spacing:.3px;
  color:#fff;
}

/* Centered shell but with margins (NOT fullscreen look) */
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 22px 38px;
  box-sizing:border-box;
}

/* Card like your reference */
.login-card{
  width:min(860px, 100%);
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.20);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
}

/* Left panel (info) */
.login-left{
  padding:30px 30px 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.login-left h1{
  margin:0 0 8px;
  font-size:26px;
  font-weight:900;
}
.login-left p{
  margin:0 0 14px;
  color:rgba(255,255,255,.72);
  line-height:1.6;
}
.login-left .mini{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.login-left .pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size:13px;
}
.login-left .pill b{color:var(--brand);}

/* Right panel (form) */
.login-right{
  padding:30px 30px 26px;
  background: var(--cardR);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.login-right .title{
  text-align:center;
  font-size:22px;
  font-weight:900;
  margin:0 0 6px;
}
.login-right .sub{
  text-align:center;
  color:rgba(255,255,255,.65);
  font-size:13px;
  margin:0 0 18px;
}

.form-label{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.70);
  margin:12px 0 6px;
}
.input{
  width:100%;
  border-radius:12px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:#fff;
  outline:none;
  box-sizing:border-box;
}
.input:focus{
  border-color: rgba(255,96,96,.75);
  box-shadow: 0 0 0 4px rgba(255,96,96,.14);
}

.row-inline{display:flex; gap:10px; align-items:center;}
.btn-eye{
  min-width:96px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:900;
}
.btn-eye:hover{border-color:rgba(255,96,96,.55);}

.btn-login{
  margin-top:16px;
  width:100%;
  height:46px;
  border:0;
  border-radius:14px;
  background: var(--brand);
  color:#fff;
  font-weight:900;
  letter-spacing:.6px;
  box-shadow: 0 12px 30px rgba(255,96,96,.25);
}
.btn-login:hover{filter:brightness(1.02);}

.help{
  margin-top:12px;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.55);
}
.help a{color:var(--brand); text-decoration:none; font-weight:900;}
.help a:hover{text-decoration:underline;}

.login-error{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,96,96,.12);
  border:1px solid rgba(255,96,96,.35);
  color:#fff;
  font-weight:900;
  font-size:13px;
}

/* Responsive (phone like your second image: stacked) */
@media (max-width: 920px){
  .login-card{grid-template-columns:1fr;}
  .login-shell{padding-top:92px;}
  .login-left{padding:24px 20px;}
  .login-right{padding:24px 20px;}
  .login-left h1{font-size:22px;}
}

/* ===== END ===== */



/* =========================================================
   AUTH MARKUP FIX (login.php perdor auth-* klasa)
   - Web: teksti ne panelin e majte qendron ne MES (vertikalisht)
   - Mobile: mos u shfaq teksti, shfaqet vetem logo siper
   ========================================================= */

.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px 22px 38px; box-sizing:border-box; }
.auth-card{
  width:min(860px, 100%);
  border-radius:22px;
  overflow:hidden;
  border:5px solid #ff6060;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.20);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
}

/* LEFT */
.auth-visual{
  padding:30px 30px 26px;
  background: linear-gradient(
  to top,
  #606264,
  rgba(255, 96, 96, 1)
);
}
.auth-visual-inner{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;   /* <-- kjo e mban krejt pjesen me shkrim ne MES */
  align-items:flex-start;
}
.auth-logo{ max-width:170px; height:auto; display:block; margin:0 0 18px 0; margin-left: auto; margin-right: auto; }
.auth-visual-title{ margin:0 0 8px; font-size:26px; font-weight:900; color: #ffffff;}
.auth-visual-sub{ margin:0 0 12px; color:rgba(255,255,255,.72); line-height:1.6; }

/* RIGHT */
.auth-panel{
  padding:30px 30px 26px;
  background: #ffffff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* MOBILE: fsheh tekstin e majte, lene vetem logon siper */
@media (max-width: 920px){
  .auth-card{ grid-template-columns:1fr; }
  .auth-wrap{ padding-top:92px; }

  .auth-visual{ padding:18px 20px 14px; }
  .auth-visual-inner{ justify-content:flex-start; align-items:center; }
  .auth-logo{ margin:0; max-width:160px; }

  .auth-visual-title,
  .auth-visual-sub,
  .auth-visual-extra{ display:none !important; }

  .auth-panel{ padding:24px 20px 24px; }
}


/* =========================================================
   ONLY RIGHT SIDE (auth-panel) - input & buttons redesign
   (Mos prek anen e majte)
   ========================================================= */

/* Login page specific styles - namespace to avoid conflicts */
body.auth-page .auth-panel form{ width:100%; }
body.auth-page .auth-panel label{
  display:block;
  margin:12px 0 6px;
  font-weight:700;
  color: #333333;
  letter-spacing:.2px;
}

/* Override any legacy .input class styling */
body.auth-page .auth-panel .input,
body.auth-page .auth-panel input[type="text"],
body.auth-page .auth-panel input[type="password"],
body.auth-page .auth-panel input[type="email"]{
  width:100%;
  height:46px;
  border-radius:8px;
  border:1px solid #e2e5e9;
  background: #ffffff;
  color:#000000;
  -webkit-text-fill-color:#000000;
  padding:0 14px;
  outline:none;
  box-sizing:border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-size:16px;
}

body.auth-page .auth-panel input::placeholder{ 
  color: #999999;
  opacity:1;
}

body.auth-page .auth-panel input:focus{
  border-color: #ff6060;
  box-shadow: 0 0 0 2px rgba(255,96,96,.15);
  background: #ffffff;
  color:#000000;
  -webkit-text-fill-color:#000000;
}

/* Chrome autofill fix */
body.auth-page .auth-panel input:-webkit-autofill,
body.auth-page .auth-panel input:-webkit-autofill:hover,
body.auth-page .auth-panel input:-webkit-autofill:focus,
body.auth-page .auth-panel input:-webkit-autofill:active {
  -webkit-text-fill-color:#000000;
  -webkit-box-shadow: 0 0 0 30px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Spacing fixes */
body.auth-page .auth-panel .form-group,
body.auth-page .auth-panel .field,
body.auth-page .auth-panel .form-row{ margin-bottom:12px; }

/* Main submit button (HYR) */
body.auth-page .auth-panel button[type="submit"],
body.auth-page .auth-panel .btn-login,
body.auth-page .auth-panel .btn-primary{
  width:100%;
  height:46px;
  border:0;
  border-radius:12px;
  background: linear-gradient(180deg, #ff7a7a, #ff6060);
  color:#fff;
  font-weight:900;
  letter-spacing:.8px;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(255,96,96,.22);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  margin-top:16px;
}

body.auth-page .auth-panel button[type="submit"]:hover,
body.auth-page .auth-panel .btn-login:hover,
body.auth-page .auth-panel .btn-primary:hover{
  filter: brightness(0.98);
  box-shadow: 0 8px 22px rgba(255,96,96,.28);
}

body.auth-page .auth-panel button[type="submit"]:active,
body.auth-page .auth-panel .btn-login:active,
body.auth-page .auth-panel .btn-primary:active{
  transform: translateY(1px);
}

/* Password show button (Shfaq)  i vogel, modern */
body.auth-page .auth-panel button[type="button"],
body.auth-page .auth-panel .btn-show,
body.auth-page .auth-panel .toggle-password,
body.auth-page .auth-panel .toggle-pass,
body.auth-page .auth-panel .password-toggle{
  height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid #e0e0e0;
  background: #f8f9fa;
  color: #333333;
  font-weight:800;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

body.auth-page .auth-panel button[type="button"]:hover,
body.auth-page .auth-panel .btn-show:hover,
body.auth-page .auth-panel .toggle-password:hover,
body.auth-page .auth-panel .toggle-pass:hover,
body.auth-page .auth-panel .password-toggle:hover{
  background: #f0f0f0;
  border-color: #d0d0d0;
}
body.auth-page .auth-panel button[type="button"]:active,
body.auth-page .auth-panel .btn-show:active,
body.auth-page .auth-panel .toggle-password:active,
body.auth-page .auth-panel .toggle-pass:active,
body.auth-page .auth-panel .password-toggle:active{
  transform: translateY(1px);
}

/* Nese butoni Shfaq eshte brenda nje wrapper-i afer password-it, rregullo layout-in */
body.auth-page .auth-panel .password-wrap,
body.auth-page .auth-panel .password-row,
body.auth-page .auth-panel .input-wrap,
body.auth-page .auth-panel .input-with-button{
  display:flex;
  gap:10px;
  align-items:center;
}
body.auth-page .auth-panel .password-wrap input,
body.auth-page .auth-panel .password-row input,
body.auth-page .auth-panel .input-wrap input,
body.auth-page .auth-panel .input-with-button input{
  flex:1;
}

/* Link poshte */
body.auth-page .auth-panel a{ color:#ff6060; font-weight:800; text-decoration:none; }
body.auth-page .auth-panel a:hover{ text-decoration:underline; }

/* Auth panel head (title/subtitle on right) */
body.auth-page .auth-panel .auth-head{
  margin:0 0 20px;
  text-align:center;
}
body.auth-page .auth-panel .auth-head > div:first-child{
  font-size:22px;
  font-weight:900;
  color:#333333;
  margin:0;
}
body.auth-page .auth-panel .auth-head > div:last-child{
  font-size:13px;
  color:#999999;
  margin:6px 0 0;
}

/* Error message styling */
body.auth-page .auth-panel .error,
body.auth-page .auth-panel .help {
  color:#666666;
}
body.auth-page .auth-panel .error {
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:10px;
  background: #ffebee;
  border:1px solid #ffcdd2;
  color:#c62828;
  font-weight:700;
  font-size:13px;
}

body.auth-page .auth-panel .help {
  margin-top:14px;
  text-align:center;
  font-size:12px;
  color:#999999;
}

/* Mobile polish */
@media (max-width: 920px){
  body.auth-page .auth-panel{ text-align:left; }
  body.auth-page .auth-panel label{ margin-top:10px; }
  
  body.auth-page .auth-panel input[type="text"],
  body.auth-page .auth-panel input[type="password"],
  body.auth-page .auth-panel input[type="email"]{
    font-size:16px;
    color:#000000;
    -webkit-text-fill-color:#000000;
    background: #ffffff;
    border:1px solid #e2e5e9;
    border-radius:8px;
  }
  
  body.auth-page .auth-panel input::placeholder{
    color: #999999;
    opacity:1;
  }
}