/* ============================================================
   Sign-in modal (.ys-sm__*)
   Tokens used: --navy, --gold, --paper, --ff
   ============================================================ */
.ys-sm__backdrop{
  position:fixed; inset:0; z-index:1000;
  background:rgba(26,45,90,.55);
  backdrop-filter:blur(4px);
  display:grid; place-items:center;
  padding:24px;
  animation:ys-sm-fade .15s ease-out;
}
.ys-sm__card{
  width:100%; max-width:440px;
  background:#fff; border-radius:20px;
  padding:28px 28px 24px;
  box-shadow:0 24px 64px -12px rgba(15,29,64,.35);
  font-family:var(--ff,"Cairo","Inter Tight",sans-serif);
  color:var(--navy,#1a2d5a);
  animation:ys-sm-pop .18s cubic-bezier(.2,.8,.2,1);
  max-height:calc(100vh - 48px); overflow-y:auto;
}
@keyframes ys-sm-fade{from{opacity:0}to{opacity:1}}
@keyframes ys-sm-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ys-sm__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.ys-sm__title{
  font-size:22px; font-weight:800; margin:0;
  color:var(--navy);
}
.ys-sm__close{
  width:36px; height:36px; border-radius:50%;
  background:#F1F3FA; color:var(--navy);
  border:0; cursor:pointer;
  display:grid; place-items:center;
  transition:background .15s;
}
.ys-sm__close:hover{background:#E5E8F2}

.ys-sm__tabs{
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid #E5E8F2;
  margin-bottom:22px;
}
.ys-sm__tab{
  background:none; border:0; cursor:pointer;
  padding:12px 8px; font:inherit; font-weight:600; font-size:14px;
  color:#8A93A6;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s, border-color .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.ys-sm__tab.is-active{
  color:var(--navy); border-bottom-color:var(--gold,#F5C518); font-weight:700;
}

.ys-sm__body{display:flex; flex-direction:column; gap:12px}
.ys-sm__label{
  font-size:13px; font-weight:600; color:var(--navy);
  margin-top:4px;
}
.ys-sm__field{
  position:relative;
  background:#F1F3FA; border-radius:12px;
  height:52px; display:flex; align-items:center;
  padding:0 16px;
}
.ys-sm__field--grow{flex:1}
.ys-sm__input{
  width:100%; height:100%; background:transparent; border:0; outline:0;
  font:inherit; font-size:15px; color:var(--navy); text-align:right;
}
.ys-sm__input::placeholder{color:#8A93A6}

.ys-sm__field--pw{padding-left:48px}
.ys-sm__eye{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background:transparent; border:0; cursor:pointer;
  color:#6B7490; display:grid; place-items:center;
}
.ys-sm__eye:hover{background:#E5E8F2; color:var(--navy)}

.ys-sm__phone-row{display:flex; gap:8px; align-items:stretch}

.ys-sm__cc{position:relative}
.ys-sm__cc-btn{
  background:#F1F3FA; border:0; border-radius:12px;
  height:52px; padding:0 12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-weight:600; color:var(--navy);
  min-width:96px;
}
.ys-sm__cc-flag{font-size:18px; line-height:1}
.ys-sm__cc-dial{font-size:14px}
.ys-sm__cc-chev{font-size:10px; color:#8A93A6; margin-right:2px}
.ys-sm__cc-list{
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:220px; max-height:260px; overflow-y:auto;
  background:#fff; border:1px solid #E5E8F2; border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(15,29,64,.2);
  padding:6px; list-style:none; margin:0;
  z-index:10;
}
.ys-sm__cc-item{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  font:inherit; font-size:14px; color:var(--navy);
  text-align:right;
}
.ys-sm__cc-item:hover{background:#F1F3FA}
.ys-sm__cc-item.is-active{background:#FEF8DC; font-weight:700}
.ys-sm__cc-name{flex:1; text-align:right}
.ys-sm__cc-dial-s{color:#8A93A6; font-size:13px}

.ys-sm__primary{
  margin-top:8px;
  width:100%; height:52px; border:0; border-radius:14px;
  background:var(--gold,#F5C518); color:var(--navy);
  font:inherit; font-weight:800; font-size:16px; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s, opacity .15s;
}
.ys-sm__primary:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 20px -6px rgba(245,197,24,.55);
}
.ys-sm__primary:disabled{cursor:not-allowed}
.ys-sm__primary.is-soft{opacity:.6}

.ys-sm__link-center{
  background:none; border:0; cursor:pointer;
  color:var(--gold,#F5C518); font:inherit; font-size:13px; font-weight:600;
  padding:6px; margin:0 auto;
}
.ys-sm__link-center:hover{text-decoration:underline}

.ys-sm__hint{
  font-size:13px; color:#6B7490; text-align:center; margin:4px 0 0;
}

.ys-sm__divider{
  display:flex; align-items:center; gap:12px;
  color:#8A93A6; font-size:13px;
  margin:8px 0 4px;
}
.ys-sm__divider::before, .ys-sm__divider::after{
  content:""; flex:1; height:1px; background:#E5E8F2;
}

.ys-sm__google{
  width:100%; height:52px;
  background:#fff; border:1px solid #E5E8F2; border-radius:14px;
  cursor:pointer; font:inherit; font-weight:600; font-size:15px;
  color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:border-color .15s, box-shadow .15s;
}
.ys-sm__google:hover{
  border-color:#C8CEDB;
  box-shadow:0 4px 14px rgba(15,29,64,.06);
}

.ys-sm__footer{
  text-align:center; font-size:13px; color:#6B7490;
  margin:12px 0 0;
}
.ys-sm__link-inline{
  background:none; border:0; cursor:pointer;
  color:var(--gold,#F5C518); font:inherit; font-weight:700;
  padding:0;
}
.ys-sm__link-inline:hover{text-decoration:underline}

.ys-sm__error{
  color:#C53030; font-size:13px; margin:4px 0 0; font-weight:500;
}

/* Small screens */
@media (max-width:480px){
  .ys-sm__backdrop{padding:12px}
  .ys-sm__card{padding:20px 20px 18px; border-radius:18px}
  .ys-sm__title{font-size:20px}
  .ys-sm__field, .ys-sm__cc-btn, .ys-sm__primary, .ys-sm__google{height:48px}
}