/* Clean, modern login styles for Hayy POS */
:root{
  --bg-1: #f4f7ff;
  --bg-2: #e8f0ff;
  --card-bg: #ffffff;
  --accent: #2F80ED; /* blue accent */
  --muted: #6b7280;
  --radius: 12px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, #edf2ff 0%, #f8fbff 100%);
  color: #111827;
}
.topbar{width:100%;padding:12px 20px;display:flex;justify-content:flex-end}
.topbar-inner{max-width:1150px;margin:0 auto;width:100%;display:flex;justify-content:flex-end}
.language-select select{min-width:140px}

.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px}
.auth-card{display:flex;flex-direction:row;background:var(--card-bg);border-radius:var(--radius);box-shadow:0 10px 30px rgba(17,24,39,0.08);overflow:hidden;max-width:980px;width:100%}
.brand{background:linear-gradient(180deg,#eef6ff 0%,#ffffff 100%);padding:40px 36px;display:flex;align-items:center;justify-content:center;flex:0 0 320px}
.brand-image{max-width:100%;height:auto;object-fit:contain}
.auth-form{flex:1;padding:34px 38px}
.logo-wrap{text-align:center;margin-bottom:8px}
.logo-img{height:56px;object-fit:contain}
.auth-title{text-align:center;font-size:1.05rem;margin:10px 0 20px;color:var(--muted)}

.brand-tagline{font-size:0.9rem;color:var(--muted);text-align:center;margin-top:6px;margin-bottom:14px}

.input-with-icon:focus-within{border-color:var(--accent);box-shadow:0 6px 20px rgba(47,128,237,0.12)}
.input-with-icon input:focus{outline:none}

.btn-primary:focus{box-shadow:0 6px 18px rgba(47,128,237,0.18);outline:none}

/* subtle entry animation */
.auth-card{animation:fadeInUp .45s ease both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* language radio group styles */
.lang-radio-group{display:flex;gap:10px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.lang-radio{display:inline-flex;align-items:center;background:#f5f7fb;border:1px solid #e6e9ef;padding:6px 10px;border-radius:999px;cursor:pointer;transition:all .18s ease}
.lang-radio input{display:none}
.lang-radio{transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.lang-radio .lang-label{font-size:0.9rem;color:var(--muted);display:inline-block;padding:4px 6px;border-radius:999px}
/* style the label text when its radio is checked */
.lang-radio input:checked + .lang-label{color:var(--accent);font-weight:600;background:rgba(47,128,237,0.08)}
.lang-radio.selected{background:rgba(47,128,237,0.12);border-color:var(--accent);box-shadow:none}
.lang-radio.selected .lang-label{color:var(--accent);font-weight:700;background:transparent}
.lang-radio:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(17,24,39,0.03)}

.input-with-icon{display:flex;align-items:center;border:1px solid #e6e9ef;border-radius:8px;padding:8px 12px;background:#fff}
/* icon circle */
.input-with-icon span.fa{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#f6f9ff;margin-right:12px;font-size:16px}
/* per-icon colors */
.input-with-icon .fa-user{color:var(--accent)}
.input-with-icon .fa-eye,.input-with-icon .fa-eye-slash{color:var(--muted)}
.input-with-icon .fa-list{color:#F59E0B}
.input-with-icon .fa-language{color:#10B981}
/* remove internal borders from bootstrap form controls inside the input group */
.input-with-icon .form-control{border:0!important;box-shadow:none!important;background:transparent!important;padding:6px 0;margin:0}
.input-with-icon input{border:0;outline:0;width:100%;font-size:1rem;padding:6px 0;color:inherit;background:transparent}
.input-with-icon select{border:0;background:transparent;width:100%;padding:6px 0}

/* make native select match pill/button visuals */
.input-with-icon select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right:28px; /* room for arrow */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'><path fill='%236b7280' d='M7 10L0 0h14z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* ensure option popup uses white background where supported */
select option{background:#fff;color:#111827}

/* outer wrapper shows focus when select is focused */
.input-with-icon select:focus{outline:none}
.input-with-icon:focus-within{border-color:var(--accent);box-shadow:0 6px 20px rgba(47,128,237,0.08)}

/* small-select specific adjustments (for company/language selects) */
.small-select .form-control{min-height:40px;padding-left:8px}

/* keep native small selects visible; style the closed select to match pills */
.small-select select{display:block}
.toggle-pass{cursor:pointer}

.form-group{margin-bottom:14px}
.selects-row{margin-top:6px}
.small-select .fa{margin-right:8px}

.btn-primary{background:var(--accent);border-color:var(--accent);padding:10px 14px;border-radius:8px;font-weight:600}
.btn-primary:hover{background:#245fbb;border-color:#245fbb}

/* Icon spacing inside buttons */
.btn .fa{margin-right:8px;display:inline-block;vertical-align:middle}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px}

.alert{margin-bottom:12px}
.support{margin-top:18px;color:var(--muted);font-size:0.9rem;text-align:center}

/* Responsive */
@media (max-width: 900px){
  .auth-card{flex-direction:column;max-width:520px}
  .brand{flex:0 0 auto;padding:24px}
}

@media (max-width: 480px){
  .auth-form{padding:22px}
  .brand{display:none}
}

/* small utility */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}