/**
 * TG + Passkey + GitHub — scoped styles only.
 * Targets injected auth buttons and Settings sign-in methods panel.
 * Does NOT restyle HostBill login modal, navbar, or global layout.
 */

/* --- Login: social divider + button row --- */
.hb-auth-social-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.hb-auth-social-divider__line {
  flex: 1;
  height: 1px;
  background: #eceef2;
}

.hb-auth-social-divider__text {
  font-size: 12px;
  color: #9aa0aa;
  white-space: nowrap;
}

.hb-auth-social-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.hb-auth-social-row > * {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}

.hb-google-oauth-btn,
.hb-github-oauth-btn,
.hb-passkey-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  min-height: 44px;
  min-width: 0;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.hb-google-oauth-btn:hover,
.hb-github-oauth-btn:hover,
.hb-passkey-btn:hover,
.hb-google-oauth-btn:focus,
.hb-github-oauth-btn:focus,
.hb-passkey-btn:focus {
  border-color: #d1d5db;
  background: #fafbfc;
  text-decoration: none;
  outline: none;
}

.hb-passkey-btn__icon {
  line-height: 1;
  font-size: 18px;
}

.hb-google-oauth-btn__icon,
.hb-github-oauth-btn__icon {
  display: inline-flex;
  line-height: 0;
  flex-shrink: 0;
}

.hb-google-oauth-btn__label,
.hb-telegram-login-label {
  display: none !important;
}

/* --- Login: Telegram button --- */
.hb-telegram-login-wrap,
.hb-passkey-login-wrap {
  flex: 1;
  min-width: 0;
}

.hb-telegram-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #54a9eb, #2f8fdb);
  min-height: 44px;
}

.hb-telegram-login-wrap--compact {
  position: relative;
  padding: 12px 8px;
  border: none;
  height: 44px;
  max-height: 44px;
  overflow: hidden !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  box-sizing: border-box;
}

.hb-telegram-login-btn {
  flex: 1;
  min-width: 0;
}

.hb-telegram-login-btn:hover,
.hb-telegram-login-btn:focus {
  filter: brightness(1.05);
  outline: none;
}

.hb-telegram-login-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
}

.hb-telegram-login-wrap:not(.hb-telegram-login-wrap--compact) iframe {
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  height: 44px !important;
}

/* --- Signup: GitHub full-width button --- */
.section-signup .hb-github-oauth-wrap {
  width: 100%;
  margin-top: 10px;
}

.section-signup .hb-github-oauth-btn--full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 100px;
  background: #fff;
  color: #372f2d;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
  box-sizing: border-box;
}

.section-signup .hb-github-oauth-btn--full:hover,
.section-signup .hb-github-oauth-btn--full:focus {
  border-color: #24292f;
  color: #24292f;
  text-decoration: none;
  outline: none;
}

/* --- Settings: Sign-in methods panel --- */
.hb-security-panel {
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
  padding: 24px 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #ffffff;
  border-radius: 18px;
  margin: 20px 0 0 0;
}

.hb-security-panel__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #14161a;
  letter-spacing: -0.01em;
}

.hb-security-panel__lead {
  margin: 6px 0 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b7280;
}

.hb-signin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #f0f1f4;
}

.hb-signin-row--highlight {
  box-shadow: 0 0 0 2px rgba(84, 169, 235, 0.45);
  border-radius: 12px;
}

.hb-signin-row__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hb-signin-row__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hb-signin-row__icon--telegram {
  background: linear-gradient(135deg, #54a9eb, #2f8fdb);
}

.hb-signin-row__icon--passkey {
  background: #1c1e21;
}

.hb-signin-row__icon--github {
  background: linear-gradient(135deg, #24292f, #1b1f23);
}

.hb-signin-row__title {
  font-size: 14.5px;
  font-weight: 700;
  color: #14161a;
}

.hb-signin-row__desc {
  font-size: 12.5px;
  color: #8a8f98;
  margin-top: 1px;
}

.hb-github-action,
.hb-passkey-action,
.hb-telegram-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.hb-github-action__name,
.hb-passkey-action__name,
.hb-telegram-action__name {
  font-size: 13px;
  font-weight: 600;
  color: #14161a;
}

.hb-github-connect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #24292f, #1b1f23);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.hb-github-connect:hover,
.hb-github-connect:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.92;
  outline: none;
}

.hb-telegram-connect-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.hb-telegram-connect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #54a9eb, #2f8fdb);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: none;
}

.hb-telegram-widget-slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 2;
}

.hb-telegram-widget-slot iframe,
.hb-telegram-widget-slot > * {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  opacity: 0.01;
  cursor: pointer;
}

.hb-signin-remove {
  background: none;
  border: none;
  color: #ff6d5a;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.hb-signin-remove:hover,
.hb-signin-remove:focus {
  color: #e85a48;
  text-decoration: underline;
  outline: none;
}

.hb-signin-row--passkey-add {
  justify-content: flex-end;
}

.hb-add-passkey {
  padding: 11px 22px;
  border-radius: 22px;
  border: none;
  background: #ff6d5a;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.hb-add-passkey:hover,
.hb-add-passkey:focus {
  background: #e85a48;
  color: #fff;
  outline: none;
}

@media (max-width: 768px) {
  .hb-google-oauth-btn,
  .hb-github-oauth-btn,
  .hb-passkey-btn,
  .hb-telegram-login-wrap {
    min-height: 48px;
  }

  .section-signup .hb-github-oauth-btn--full {
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .hb-security-panel {
    padding: 18px 16px;
  }

  .hb-signin-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
  }

  .hb-telegram-connect-wrap,
  .hb-telegram-connect,
  .hb-github-connect,
  .hb-add-passkey,
  .hb-signin-row--passkey-add .hb-add-passkey {
    width: 100%;
  }

  .hb-passkey-action,
  .hb-telegram-action {
    width: 100%;
    justify-content: space-between;
  }
}