/* ====================================================
   AVISION-001-LOGIN-POPUP
   テーマ CSS との競合に強くするため重要箇所は !important
   ==================================================== */

/* ===== フローティングトリガーボタン（右下） ===== */
.avision-trigger{
  position:fixed !important;
  bottom:20px !important;
  right:20px !important;
  z-index:99998 !important;
  display:flex !important;
  align-items:center;
  gap:6px;
  padding:12px 18px !important;
  background:#1C5BFF !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  font:500 14px/1 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif !important;
  box-shadow:0 4px 12px rgba(28,91,255,.4) !important;
  cursor:pointer !important;
  animation:avision-trigger-pulse 2s ease-in-out infinite;
  text-decoration:none !important;
}
.avision-trigger:hover{ background:#0C447C !important; }
.avision-trigger.avision-hidden{ display:none !important; }
.avision-trigger-arrow{ font-size:9px !important; color:#fff !important; }
.avision-trigger-label{ color:#fff !important; }
@keyframes avision-trigger-pulse{
  0%,100%{ box-shadow:0 4px 12px rgba(28,91,255,.4); }
  50%{ box-shadow:0 4px 22px rgba(28,91,255,.8); }
}

/* ===== オーバーレイ ===== */
.avision-overlay{
  position:fixed !important;
  inset:0 !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  z-index:99999 !important;
  background:rgba(0,0,0,.6) !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:14px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif !important;
  -webkit-overflow-scrolling:touch;
  overflow-y:auto;
  animation:avision-fadein .2s ease-out;
}
.avision-overlay.avision-hidden{ display:none !important; }
@keyframes avision-fadein{ from{opacity:0} to{opacity:1} }

/* ===== モーダル本体 ===== */
.avision-modal{
  background:#fff !important;
  width:100%;
  max-width:380px;
  border:2px solid #b5d4f4 !important;
  border-radius:14px !important;
  overflow:hidden;
  box-shadow:0 12px 50px rgba(0,0,0,.4);
  animation:avision-popin .25s ease-out;
}
@keyframes avision-popin{
  from{ transform:scale(.92); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

.avision-modal-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 18px 10px;
  font:500 14px/1.4 inherit;
  color:#185fa5 !important;
  border-bottom:1px solid #ccc;
}
.avision-mh-line{
  width:14px; height:2px; background:#185fa5;
}
.avision-mh-text{ color:#185fa5 !important; }

.avision-modal-body{ padding:18px 16px !important; }

/* ===== LOGIN 大型ボタン + 目立つアニメーション ===== */
.avision-btn-wrap{ position:relative; margin-bottom:6px; }
.avision-btn-wrap::before,
.avision-btn-wrap::after{
  content:""; position:absolute; inset:0;
  border-radius:14px; border:3px solid #1C5BFF;
  pointer-events:none;
}
.avision-btn-wrap::before{ animation:avision-ring 2.2s ease-out infinite; }
.avision-btn-wrap::after{ animation:avision-ring 2.2s ease-out infinite; animation-delay:1.1s; }
@keyframes avision-ring{
  0%   { transform:scale(1);    opacity:.7; }
  80%  { opacity:0; }
  100% { transform:scale(1.18); opacity:0; }
}

.avision-btn-login{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
  padding:18px 16px !important;
  background:#185fa5 !important;
  color:#fff !important;
  border:3px solid #378add !important;
  border-radius:14px !important;
  text-decoration:none !important;
  cursor:pointer !important;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(24,95,165,.35);
  animation:avision-login-pulse 1.8s ease-in-out infinite;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  font-family:inherit !important;
}
@keyframes avision-login-pulse{
  0%,100%{ transform:scale(1); box-shadow:0 4px 14px rgba(24,95,165,.35); }
  50%    { transform:scale(1.025); box-shadow:0 6px 22px rgba(24,95,165,.6); }
}
.avision-btn-login:hover{
  background:#0C447C !important;
  animation-play-state:paused;
  transform:scale(1.03);
}
.avision-btn-login:active{
  transform:scale(0.99);
  box-shadow:0 2px 8px rgba(24,95,165,.4);
  animation-play-state:paused;
}
/* シマー（光が左→右に流れる） */
.avision-btn-login::after{
  content:"";
  position:absolute; top:0; left:-100%;
  width:50%; height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  animation:avision-shimmer 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes avision-shimmer{
  0%,30%   { left:-100%; }
  60%,100% { left:200%; }
}
.avision-btn-login .avision-text{
  display:flex; flex-direction:column; align-items:center;
  gap:3px; line-height:1;
  position:relative; z-index:1;
}
.avision-btn-login .avision-tag{
  font-size:10px !important; color:#85b7eb !important;
  letter-spacing:.15em; font-weight:500;
}
.avision-btn-login .avision-big{
  font-size:32px !important; font-weight:500 !important;
  letter-spacing:.1em; color:#fff !important;
}
.avision-btn-login .avision-sub{
  background:#fff !important; color:#185fa5 !important;
  font-size:11px !important; padding:3px 10px;
  border-radius:4px; margin-top:4px; font-weight:500;
}
.avision-btn-login .avision-power{
  flex-shrink:0;
  width:42px; height:42px;
  border:3px solid #5dcaa5;
  border-radius:50%;
  background:#1d9e75;
  position:relative;
  z-index:1;
}
.avision-btn-login .avision-power::before{
  content:""; position:absolute;
  top:6px; left:50%; transform:translateX(-50%);
  width:3px; height:14px; background:#fff; border-radius:2px;
}
.avision-btn-login .avision-power::after{
  content:""; position:absolute;
  top:9px; left:50%; transform:translateX(-50%);
  width:18px; height:18px;
  border:3px solid #fff; border-radius:50%; border-top-color:transparent;
}

.avision-tap-hint{
  text-align:center;
  font-size:11px !important;
  color:#185fa5 !important;
  margin:8px 0 14px !important;
  font-weight:500;
  animation:avision-hint-bob 1.4s ease-in-out infinite;
}
@keyframes avision-hint-bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-2px); }
}

.avision-desc{
  font-size:12px !important;
  color:#333 !important;
  line-height:1.7;
  padding:6px 4px 14px !important;
  text-align:left;
  margin:0 !important;
}

/* ===== LOGOUT 大型ボタン ===== */
.avision-btn-logout{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
  padding:16px 14px !important;
  background:#a32d2d !important;
  color:#fff !important;
  border:3px solid #e24b4a !important;
  border-radius:14px !important;
  text-decoration:none !important;
  cursor:pointer !important;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(163,45,45,.35);
  margin-bottom:14px;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  font-family:inherit !important;
}
.avision-btn-logout:hover{
  background:#791F1F !important;
  box-shadow:0 6px 18px rgba(163,45,45,.5);
}
.avision-btn-logout:active{
  transform:translateY(2px);
  box-shadow:0 2px 8px rgba(163,45,45,.4);
}
.avision-btn-logout .avision-text{
  display:flex; flex-direction:column; align-items:center;
  gap:3px; line-height:1.1;
}
.avision-btn-logout .avision-tag2{
  font-size:10px !important; color:#f7c1c1 !important;
  font-weight:500; letter-spacing:.05em;
}
.avision-btn-logout .avision-big{
  font-size:28px !important; font-weight:500 !important;
  letter-spacing:.1em; margin-top:2px; color:#fff !important;
}
.avision-btn-logout .avision-power{
  flex-shrink:0;
  width:38px; height:38px;
  border:2px solid #f7c1c1;
  border-radius:50%;
  background:#e24b4a;
  position:relative;
}
.avision-btn-logout .avision-power::before{
  content:""; position:absolute;
  top:6px; left:50%; transform:translateX(-50%);
  width:2.5px; height:11px; background:#fff; border-radius:2px;
}
.avision-btn-logout .avision-power::after{
  content:""; position:absolute;
  top:8px; left:50%; transform:translateX(-50%);
  width:14px; height:14px;
  border:2.5px solid #fff; border-radius:50%; border-top-color:transparent;
}

/* ===== 閉じる 大型ボタン（テーマCSSに負けないよう厳格に強制） ===== */
.avision-btn-close,
button.avision-btn-close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
  padding:14px !important;
  background:#3a3a3a !important;
  background-color:#3a3a3a !important;
  background-image:none !important;
  color:#ffffff !important;
  border:3px solid #888 !important;
  border-radius:14px !important;
  font:500 18px/1 inherit !important;
  letter-spacing:.1em !important;
  cursor:pointer !important;
  text-shadow:none !important;
  text-transform:none !important;
  box-shadow:0 3px 10px rgba(0,0,0,.25) !important;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease !important;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  text-decoration:none !important;
  outline:none !important;
}
.avision-btn-close:hover,
button.avision-btn-close:hover{
  background:#222 !important;
  background-color:#222 !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(0,0,0,.35) !important;
}
.avision-btn-close:active,
button.avision-btn-close:active{
  transform:translateY(2px) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
}
.avision-btn-close .avision-x,
button.avision-btn-close .avision-x{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  font-size:18px !important;
  font-weight:500 !important;
  line-height:1 !important;
  color:#ffffff !important;
}
.avision-btn-close .avision-close-label,
button.avision-btn-close .avision-close-label{
  color:#ffffff !important;
  font-weight:500 !important;
  font-size:18px !important;
  letter-spacing:.1em !important;
}

/* ===== スマホ調整 ===== */
@media (max-width:480px){
  .avision-modal{ max-width:100%; }
  .avision-trigger{
    padding:10px 14px !important;
    font-size:13px !important;
    bottom:14px !important;
    right:14px !important;
  }
  .avision-btn-login .avision-big{ font-size:28px !important; }
  .avision-btn-logout .avision-big{ font-size:24px !important; }
  .avision-btn-close{ font-size:16px !important; }
}

/* ===== モーション軽減設定（OS設定で動きを減らしたいユーザー向け） ===== */
@media (prefers-reduced-motion: reduce){
  .avision-trigger,
  .avision-btn-login,
  .avision-btn-wrap::before,
  .avision-btn-wrap::after,
  .avision-btn-login::after,
  .avision-tap-hint,
  .avision-overlay,
  .avision-modal{
    animation:none !important;
  }
}
