@import url("comfortaa-font.css");

/* Webdeveloper.lk Customer Auth UI */
.auth-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:18px;
}
.auth-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 17px;
  border-radius:14px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  border:1px solid #dfe7f8;
  background:#fff;
  color:#10204a;
}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(13,31,89,.10)}
.auth-btn.signup{
  color:#fff;
  border:none;
  background:linear-gradient(135deg,#ff3131,#1d5cff);
  box-shadow:0 15px 30px rgba(44,83,210,.22);
}
.auth-profile-3d{
  width:52px;
  height:52px;
  border:none;
  border-radius:18px;
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#f8fbff,#dfe8ff);
  box-shadow:8px 8px 18px rgba(30,57,124,.16), -8px -8px 18px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.7);
  transition:transform .3s ease, box-shadow .3s ease;
}
.auth-profile-3d:hover{transform:translateY(-3px) rotateX(7deg) rotateY(-7deg)}
.auth-profile-3d .head{
  position:absolute;
  top:11px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(180deg,#1d5cff,#72a2ff);
  box-shadow:0 8px 12px rgba(29,92,255,.22);
}
.auth-profile-3d .body{
  position:absolute;
  bottom:10px;
  width:28px;
  height:17px;
  border-radius:18px 18px 10px 10px;
  background:linear-gradient(180deg,#ff4b4b,#e51616);
  box-shadow:0 8px 14px rgba(255,49,49,.22);
}
.auth-profile-3d.active:after{
  content:"";
  position:absolute;
  right:8px;
  top:8px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#15a34a;
  box-shadow:0 0 0 4px rgba(21,163,74,.15);
}
.auth-user-pill{
  display:none;
  align-items:center;
  gap:10px;
  padding:7px 12px 7px 7px;
  border-radius:18px;
  background:#fff;
  border:1px solid #dfe7f8;
  box-shadow:0 12px 28px rgba(13,31,89,.08);
  color:#10204a;
  font-weight:800;
  text-decoration:none;
}
.auth-user-pill .mini-avatar{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#1d5cff,#ff3131);
  font-size:14px;
}
.auth-user-pill span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-actions.logged .auth-btn.login,
.auth-actions.logged .auth-btn.signup{display:none}
.auth-actions.logged .auth-user-pill{display:flex}

.auth-modal-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(6,14,40,.62);
  backdrop-filter:blur(10px);
  z-index:9999;
}
.auth-modal-backdrop.show{display:flex}
.auth-modal{
  position:relative;
  width:min(520px,100%);
  background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid #dfe7f8;
  border-radius:28px;
  box-shadow:0 36px 90px rgba(0,0,0,.22);
  padding:30px;
  overflow:hidden;
}
.auth-modal:before{
  content:"";
  position:absolute;
  right:-60px;
  top:-70px;
  width:210px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(29,92,255,.18),rgba(29,92,255,0) 68%);
}
.auth-modal:after{
  content:"";
  position:absolute;
  left:-70px;
  bottom:-90px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,49,49,.14),rgba(255,49,49,0) 68%);
}
.auth-modal-content{position:relative;z-index:1}
.auth-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.auth-modal h2{margin:0 0 8px;font-size:30px;letter-spacing:-.5px;color:#081339}
.auth-modal p{margin:0;color:#5b6986;line-height:1.5}
.auth-close{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:#eef3ff;
  color:#112657;
  font-size:24px;
  cursor:pointer;
}
.auth-form{display:grid;gap:14px}
.auth-field label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:#142450;
  font-size:14px;
}
.auth-field input{
  width:100%;
  height:52px;
  border:1px solid #d7e1f6;
  border-radius:14px;
  outline:none;
  padding:0 15px;
  background:#fff;
  transition:.25s;
}
.auth-field input:focus{border-color:#1d5cff;box-shadow:0 0 0 4px rgba(29,92,255,.1)}
.auth-submit{
  height:56px;
  border:none;
  border-radius:16px;
  color:#fff;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  background:linear-gradient(135deg,#1d5cff,#ff3131);
  box-shadow:0 18px 34px rgba(44,83,210,.24);
}
.auth-helper{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:6px;
  color:#5f6d88;
  font-size:14px;
}
.auth-helper button{
  border:none;
  background:transparent;
  color:#1d5cff;
  font-weight:900;
  cursor:pointer;
}
.auth-error{min-height:20px;color:#ff3131;font-weight:700;text-align:center;margin:0}
.auth-success{min-height:20px;color:#159947;font-weight:800;text-align:center;margin:0}

@media(max-width:980px){
  .auth-actions{gap:8px;margin-left:0}
  .auth-btn{height:42px;padding:0 12px;font-size:13px}
  .auth-profile-3d{width:46px;height:46px}
}
@media(max-width:760px){
  .auth-actions{width:100%;justify-content:flex-end;flex-wrap:wrap;margin-top:10px}
  .header-wrap,.flow-header-inner{flex-wrap:wrap}
  .auth-user-pill span{max-width:100px}
}


/* V46 colorful live 3D profile icon */
.auth-profile-3d{
  width:58px;
  height:58px;
  border:none;
  border-radius:20px;
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.78), transparent 26%),
    linear-gradient(145deg, #1d5cff 0%, #56ccf2 30%, #8b5cf6 60%, #ff4f7b 100%);
  box-shadow:
    0 16px 28px rgba(29,92,255,.28),
    0 22px 42px rgba(255,79,123,.16),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -12px 28px rgba(5,11,30,.18);
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
  overflow:hidden;
  isolation:isolate;
}
.auth-profile-3d::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.22), transparent 26%),
    linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 56%, rgba(255,255,255,.08));
  z-index:0;
}
.auth-profile-3d::after{
  content:"";
  position:absolute;
  width:80%;
  height:80%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 62%);
  filter:blur(12px);
  z-index:0;
}
.auth-profile-3d:hover{
  transform:translateY(-3px) rotate(-3deg) scale(1.03);
  box-shadow:
    0 22px 38px rgba(29,92,255,.32),
    0 28px 48px rgba(255,79,123,.22),
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -14px 30px rgba(5,11,30,.16);
  filter:saturate(1.1);
}
.auth-profile-3d .profile-glow,
.auth-profile-3d .profile-ring,
.auth-profile-3d .head,
.auth-profile-3d .body,
.auth-profile-3d .spark{
  position:absolute;
  pointer-events:none;
}
.auth-profile-3d .profile-glow{
  border-radius:50%;
  filter:blur(10px);
  opacity:.7;
  z-index:1;
  animation: profileGlowPulse 4.2s ease-in-out infinite;
}
.auth-profile-3d .glow-a{
  width:26px;height:26px;left:8px;top:8px;
  background:rgba(86,204,242,.55);
}
.auth-profile-3d .glow-b{
  width:24px;height:24px;right:8px;bottom:9px;
  background:rgba(255,79,123,.48);
  animation-delay:-2s;
}
.auth-profile-3d .profile-ring{
  border-radius:50%;
  border:1px solid rgba(255,255,255,.42);
  z-index:2;
}
.auth-profile-3d .ring-a{
  width:38px;height:38px;top:8px;left:10px;opacity:.38;
  animation: profileRingOrbit 5s linear infinite;
}
.auth-profile-3d .ring-b{
  width:30px;height:30px;top:16px;left:18px;opacity:.26;
  animation: profileRingOrbitReverse 4.2s linear infinite;
}
.auth-profile-3d .head{
  width:16px;
  height:16px;
  top:13px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg,#fff7e7,#ffd5c4);
  box-shadow:0 2px 0 rgba(255,255,255,.48) inset, 0 6px 16px rgba(6,16,52,.16);
  z-index:4;
}
.auth-profile-3d .head::before{
  content:"";
  position:absolute;
  inset:-2px auto auto -2px;
  width:20px;height:10px;
  border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg,#2f3572,#111a42);
}
.auth-profile-3d .body{
  width:28px;
  height:20px;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  border-radius:14px 14px 11px 11px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(180deg,#ffffff,#dce7ff 36%, #8fb4ff 36%, #1d5cff 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.36) inset, 0 8px 18px rgba(6,16,52,.22);
  z-index:4;
}
.auth-profile-3d .body::before{
  content:"";
  position:absolute;
  width:14px;
  height:6px;
  border-radius:0 0 8px 8px;
  background:#ff4f7b;
  left:50%;
  top:5px;
  transform:translateX(-50%);
  box-shadow:0 0 10px rgba(255,79,123,.28);
}
.auth-profile-3d .spark{
  width:5px;height:5px;border-radius:50%;
  background:#fff;
  z-index:5;
  box-shadow:0 0 10px currentColor, 0 0 18px currentColor;
}
.auth-profile-3d .spark-a{ top:10px; right:12px; color:#56ccf2; animation: sparkTwinkle 2.4s ease-in-out infinite; }
.auth-profile-3d .spark-b{ bottom:10px; left:11px; color:#ff4f7b; animation: sparkTwinkle 2.8s ease-in-out infinite -.9s; }
.auth-profile-3d .spark-c{ top:25px; left:8px; color:#ffd166; animation: sparkTwinkle 2.2s ease-in-out infinite -1.3s; }

@keyframes profileGlowPulse{
  0%,100%{transform:scale(1);opacity:.65}
  50%{transform:scale(1.16);opacity:.9}
}
@keyframes profileRingOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes profileRingOrbitReverse{
  from{transform:rotate(360deg)}
  to{transform:rotate(0deg)}
}
@keyframes sparkTwinkle{
  0%,100%{transform:scale(.8);opacity:.4}
  50%{transform:scale(1.35);opacity:1}
}
@media(max-width:640px){
  .auth-profile-3d{width:54px;height:54px;border-radius:18px}
}

/* V56 final auth profile icon */
.auth-actions{gap:10px}
.auth-btn{height:42px;padding:0 14px;border-radius:14px}
.auth-btn.signin{background:linear-gradient(135deg,#1d5cff,#0c43d8);color:#fff;border-color:transparent}
.auth-btn.signup{background:linear-gradient(135deg,#ff4c4c,#ff2323);color:#fff;border-color:transparent}
.auth-btn.signin:hover{background:linear-gradient(135deg,#ff4c4c,#ff2323)}
.auth-btn.signup:hover{background:linear-gradient(135deg,#1d5cff,#0c43d8)}
.auth-user-pill{padding:6px 12px 6px 6px}
.auth-user-pill .mini-avatar.image-avatar{
  width:38px;height:38px;border-radius:50%;padding:0;background:transparent;box-shadow:none;overflow:hidden;display:inline-flex;
}
.auth-user-pill .mini-avatar.image-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.auth-profile-3d{
  width:52px!important;height:52px!important;border:none!important;background:transparent!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  filter:drop-shadow(0 18px 30px rgba(126,31,255,.24));
}
.auth-profile-3d .profile-icon-image{
  width:52px;height:52px;display:block;object-fit:contain;transition:transform .28s ease,filter .28s ease;
}
.auth-profile-3d:hover .profile-icon-image{transform:translateY(-2px) scale(1.05);filter:brightness(1.08) saturate(1.08)}
.auth-profile-3d span{display:none!important}
@media(max-width:900px){
  .auth-btn{height:40px;padding:0 12px;font-size:13px}
  .auth-profile-3d,.auth-profile-3d .profile-icon-image{width:46px!important;height:46px!important}
}