/* New Sign-In Page Styles */
.signin-container {
  max-width: 450px;
  margin: 50px auto;
  padding: 40px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.signin-provider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
  padding: 12px;
  margin: 15px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}

.signin-provider-btn:hover {
  background-color: #f7f7f7;
  border-color: #ccc;
}

.signin-provider-btn svg {
  width: 24px;
  height: 24px;
}

/* === Sign-In Page Enhancements === */
.signin-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 1000px); /* Adjust based on header/footer height */
}

.signin-card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.signin-card .section-title {
  font-size: 24px;
  font-weight: 700;
  color: #202124;
  margin-bottom: 8px;
}

.signin-card p {
  color: #5f6368;
  margin-bottom: 24px;
}

.login-providers {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.btn-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.provider-icon {
  width: 20px;
  height: 20px;
}

/* Google Button */
.btn-google {
  background-color: #4285f4;
  color: #fff;
  border-color: #dadce0;
}

.btn-google:hover {
  background-color: var(--google-blue);
  border-color: #c6c9ce;
}

.btn-google:active {
  background-color: #f1f3f4;
}

/* GitHub Button */
.btn-github {
  background-color: #24292e;
  color: #ffffff;
}

.btn-github:hover {
  background-color: #333a42;
  color: #ffffff;
}

.btn-github .provider-icon path {
  fill: #ffffff;
}

/* LinkedIn Button */
.btn-linkedin {
  background-color: #0a66c2;
  color: #ffffff;
}

.btn-linkedin:hover {
  background-color: #084c91; /* Darker shade for hover */
}

.btn-linkedin .provider-icon path {
  fill: #ffffff;
}

/* Twitter Button */
.btn-twitter {
  background-color: #1da1f2;
  color: #ffffff;
}

.btn-twitter:hover {
  background-color: #1a8cd8; /* Darker shade for hover */
}

.btn-twitter .provider-icon path {
  fill: #ffffff;
}

/* Google Button - Ensure white text on hover */
.btn-google:hover {
  background-color: var(--google-blue);
  border-color: #c6c9ce;
  color: white;
}

/* Explanation section */
.oauth-explanation {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
  text-align: left;
}

.explanation-title {
  font-size: 16px;
  font-weight: 500;
  color: #202124;
  margin-bottom: 12px;
  text-align: center;
}

.explanation-text {
  font-size: 14px;
  color: #5f6368;
  line-height: 1.5;
  margin-bottom: 12px !important; /* Override the generic p margin in signin-card */
}