/* style2.css - Instagramログイン風スタイル */
/* すべてのスタイルをこのファイルに集約 */

/* ===== 浮き上がるラベル ===== */
.login-input-container {
  position: relative;
  padding: 10px 16px !important;
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid rgb(203, 210, 217) !important;
  transition: border-color 0.15s ease;
}

.login-input-container:focus-within {
  border-color: #a8a8a8 !important;
  box-shadow: none !important;
}

.floating-label-wrapper {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.15s cubic-bezier(0.12, 0.8, 0.32, 1);
  opacity: 1;
  background: transparent;
  padding: 0 2px;
  transform-origin: left center;
  color: #8e8e8e !important;
}

.login-input-container:focus-within .floating-label-wrapper,
.login-input-container .floating-label-wrapper.is-floating {
  top: 2px;
  transform: translateY(0) scale(0.75);
  opacity: 1;
  color: #8e8e8e !important;
  font-size: 12px;
  background: transparent;
}

.login-input-container:focus-within .floating-label-wrapper {
  color: #0095f6 !important;
}

.login-input-container input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 14px 0 2px 0 !important;
  font-size: 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: #262626 !important;
  width: 100%;
  height: 100%;
  min-height: 28px;
  line-height: 1.3;
  caret-color: #262626;
  margin: 0;
  box-sizing: border-box;
}

.login-input-container input::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}
.login-input-container input::-webkit-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}
.login-input-container input:-ms-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/* ===== 入力欄の右側アイコン ===== */
.input-right-icon {
  pointer-events: auto;
  flex-shrink: 0;
  margin-left: 12px;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: #8e8e8e;
  font-size: 14px;
  font-weight: 600;
}

.input-right-icon.visible {
  visibility: visible;
  opacity: 1;
}

.input-right-icon:hover {
  color: #262626;
}

.input-right-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== ログインボタン ===== */
/* インラインスタイルで指定されているので、ここでは特に何もしない */

/* ===== パスワード忘れた・新規作成（青） ===== */
[role="button"][aria-label="パスワードを忘れた場合"] span,
[role="button"][aria-label="新しいアカウントを作成"] span {
  color: #0095f6 !important;
  font-weight: 600 !important;
}
[role="button"][aria-label="パスワードを忘れた場合"]:hover span {
  color: #00376b !important;
}
[role="button"][aria-label="新しいアカウントを作成"]:hover span {
  color: #00376b !important;
}

/* 新規作成ボタンのボーダー */
[aria-label="新しいアカウントを作成"] > div {
  border-color: #0095f6 !important;
}
[aria-label="新しいアカウントを作成"]:hover > div {
  border-color: #1877f2 !important;
}

/* ===== Metaロゴ画像 ===== */
.meta-logo-img {
  height: 100%;
  width: 100%;
  pointer-events: inherit;
  object-fit: contain;
  overflow: hidden;
}

/* ===== スマホ対応 ===== */
@media (max-width: 480px) {
  .login-input-container {
    padding: 8px 14px !important;
  }
  .floating-label-wrapper {
    left: 14px;
  }
}