/* SSO Button Styles for Google and Microsoft */

/* General OIDC button styling - Compact horizontal layout */
button[name="provider"][value="google"],
button[name="provider"][value="microsoft"],
.ory-oidc-button[data-provider="google"],
.ory-oidc-button[data-provider="microsoft"] {
  font-family: "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-weight: 400 !important;
  font-size: 12px !important; /* Smaller for side-by-side */
  height: 38px !important;
  min-height: 38px !important;
  padding: 6px 12px !important;
  border-radius: 19px !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative;
  background-color: #fefeff !important;
  color: rgba(24, 24, 24, 0.8) !important;
  letter-spacing: 0;
  line-height: 1.2;
  box-shadow: inset 0px 0px 10px 0px rgba(19, 19, 19, 0.05) !important;
  text-align: center !important;
  overflow: hidden !important;
}

/* Button text span - don't expand, stay with icon */
button[name="provider"] span,
.ory-oidc-button span {
  flex: none !important;
  text-align: left !important;
  display: inline !important;
  white-space: nowrap !important;
}

/* Position provider icon inline - grouped with text, centered */
button[name="provider"] img,
button[name="provider"] svg,
button[name="provider"] i.fa-brands:first-of-type,
.ory-oidc-button img,
.ory-oidc-button svg,
.ory-oidc-button i.fa-brands:first-of-type {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
}

/* Hide ALL duplicate/balance icons (Ory adds two icons - one visible, one hidden for balance) */
button[name="provider"] i.fa-brands:not(:first-of-type),
button[name="provider"] i[style*="hidden"],
button[name="provider"] i[style*="opacity"],
.ory-oidc-button i.fa-brands:not(:first-of-type),
.ory-oidc-button i[style*="hidden"],
.ory-oidc-button i[style*="opacity"] {
  display: none !important;
}

/* Remove padding from icon classes */
button[name="provider"] [class*="button_social"],
.ory-oidc-button [class*="button_social"] {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide arrow icon for compact layout */
button[name="provider"]::after,
.ory-oidc-button::after {
  display: none !important;
}

/* Google Button - Figma Design */
button[name="provider"][value="google"],
.ory-oidc-button[data-provider="google"] {
  background-color: #fefeff !important; /* Updated background */
  color: rgba(24, 24, 24, 0.8) !important; /* Figma: rgba(24,24,24,0.8) */
  border: none !important;
}

button[name="provider"][value="google"]:hover,
.ory-oidc-button[data-provider="google"]:hover {
  background-color: #eeeeee !important; /* Slightly lighter on hover */
  box-shadow: inset 0px 0px 10px 0px rgba(19, 19, 19, 0.08) !important;
  transform: translateY(-1px);
}

button[name="provider"][value="google"]:active,
.ory-oidc-button[data-provider="google"]:active {
  background-color: #e5e5e5 !important;
  transform: translateY(0);
  box-shadow: inset 0px 0px 10px 0px rgba(19, 19, 19, 0.1) !important;
}

/* Microsoft Button - Figma Design */
button[name="provider"][value="microsoft"],
.ory-oidc-button[data-provider="microsoft"] {
  background-color: #fefeff !important; /* Updated background */
  color: rgba(24, 24, 24, 0.8) !important; /* Figma: rgba(24,24,24,0.8) */
  border: none !important;
}

button[name="provider"][value="microsoft"]:hover,
.ory-oidc-button[data-provider="microsoft"]:hover {
  background-color: #eeeeee !important; /* Slightly lighter on hover */
  box-shadow: inset 0px 0px 10px 0px rgba(19, 19, 19, 0.08) !important;
  transform: translateY(-1px);
}

button[name="provider"][value="microsoft"]:active,
.ory-oidc-button[data-provider="microsoft"]:active {
  background-color: #e5e5e5 !important;
  transform: translateY(0);
  box-shadow: inset 0px 0px 10px 0px rgba(19, 19, 19, 0.1) !important;
}

/* SSO Divider - "Or" separator */
.sso-divider,
[data-testid="divider"] {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  margin: 24px 0 !important; /* 24px margin as specified */
  font-family: "Matter", sans-serif;
}

.sso-divider::before,
[data-testid="divider"]::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sso-divider::after,
[data-testid="divider"]::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Or text */
.sso-divider span,
[data-testid="divider"] span {
  padding: 0 0.75rem; /* Slightly more padding */
  font-size: 0.75rem;
  text-transform: uppercase;
  color: hsl(0, 0%, 20%, 0.5);
  background: var(--card-bg);
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: "Matter", sans-serif;
}

/* Ory Elements specific overrides */
[data-testid="node/group/oidc"] {
  margin-bottom: 0 !important; /* No margin, controlled by parent */
  display: flex !important;
  flex-direction: row !important; /* Side by side */
  gap: 12px !important; /* 12px between google and microsoft buttons */
  flex-wrap: wrap !important; /* Wrap on small screens */
}

/* Make SSO buttons take equal width when side by side */
[data-testid="node/group/oidc"] button {
  flex: 1 !important; /* Equal width */
  min-width: 150px !important; /* Minimum width for readability */
}

[data-testid="node/group/oidc"] button {
  margin-bottom: 0 !important; /* No margin, controlled by parent gap */
}

[data-testid="node/group/oidc"] button:last-child {
  margin-bottom: 0 !important;
}

/* Additional button text styling - Figma Design */
button[name="provider"] span,
.ory-oidc-button span,
button[name="provider"],
.ory-oidc-button {
  font-weight: 400 !important; /* Regular, not medium */
  letter-spacing: 0 !important;
  color: rgba(24, 24, 24, 0.8) !important; /* Figma: rgba(24,24,24,0.8) */
  font-family: "Matter", sans-serif;
}

/* Focus states for accessibility */
button[name="provider"]:focus,
.ory-oidc-button:focus {
  outline: none !important;
  outline-offset: 0;
  background-color: #ffffff !important; /* White on focus */
}

/* Disabled state */
button[name="provider"]:disabled,
.ory-oidc-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 480px) {
  button[name="provider"],
  .ory-oidc-button {
    font-size: 13px;
    padding: 10px 20px;
  }
}

/* ================================================
   Custom Typography & Button Styling
   ================================================ */

/* Main Titles - text-2xl font-twk */
h1:not(.auth-brand),
.auth-card-heading,
[data-testid="ui/message/heading"],
.card-heading,
h2 {
  font-size: 1.75rem !important; /* Larger: 28px */
  line-height: 1.2;
  font-family: "SeasonMix", "TWKEverett", "TT Commons", sans-serif;
  font-weight: 600;
  color: hsl(0, 0%, 20%);
  text-align: center;
  letter-spacing: -0.02em; /* Tighter for modern look */
  margin-bottom: 1.5rem !important;
}

/* Descriptions - text-primary/70 */
p,
.description,
[data-testid="ui/message/text"],
.card-description,
.message-text {
  color: hsl(0, 0%, 20%, 0.7); /* text-primary/70 */
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: "Matter", sans-serif;
}

/* Helper text - text-sm text-primary/70 */
small,
.helper-text,
[data-testid="ui/message/info"],
.form-helper,
label,
.input-label {
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.25rem;
  color: hsl(0, 0%, 20%, 0.7); /* text-primary/70 */
  font-family: "Matter", sans-serif;
}

/* Primary Buttons - w-full h-12 font-medium */
button[type="submit"],
button[value="password"],
.primary-button,
[data-testid*="submit"],
button[name="method"][value="password"] {
  width: 100% !important; /* w-full */
  height: 3rem !important; /* h-12 = 48px */
  min-height: 3rem !important;
  font-weight: 400 !important; /* font-normal */
  font-size: 0.9375rem; /* 15px - consistent sizing */
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
}

/* Secondary/Outline Buttons - variant="outline" */
button[type="button"],
.secondary-button,
.outline-button,
button[name="provider"] {
  width: 100% !important;
  height: 3rem !important; /* h-12 */
  min-height: 3rem !important;
  font-weight: 500 !important;
  background-color: #ffffff !important;
  border: 1px solid hsl(0, 0%, 20%, 0.1) !important;
  color: hsl(0, 0%, 20%) !important;
  border-radius: 0.5rem; /* 8px */
  transition: all 0.2s ease;
}

button[type="button"]:hover,
.secondary-button:hover,
.outline-button:hover,
button[name="provider"]:hover {
  background-color: hsl(0, 0%, 20%, 0.05) !important;
  border-color: hsl(0, 0%, 20%, 0.2) !important;
}

/* SSO Buttons specific adjustments */
button[name="provider"][value="google"],
button[name="provider"][value="microsoft"] {
  height: 3rem !important;
  min-height: 3rem !important;
  font-weight: 500 !important;
  padding: 0.75rem 1.5rem;
}

/* Input fields - h-12 (backup styles in case primary ones don't apply) */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  height: 3rem; /* h-12 = 48px */
  padding: 0.75rem 1rem;
  border-radius: calc(0.5rem - 2px); /* 6px */
  border: 1px solid hsl(41, 20%, 64%);
  background-color: #ffffff;
  font-size: 0.9375rem; /* 15px */
  color: hsl(0, 0%, 20%);
  transition: all 0.2s ease;
  width: 100%;
  font-family: "Matter", sans-serif;
}

input::placeholder {
  color: hsl(0, 0%, 20%, 0.5);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: hsl(14, 70%, 50%); /* Brand orange */
  box-shadow: 0 0 0 3px hsla(14, 70%, 50%, 0.1); /* Subtle orange focus ring */
}

/* Card container - No card styling, completely transparent */
.auth-card,
[data-testid="ui/card"],
.card {
  max-width: 400px !important; /* Constrain width */
  padding: 0 !important; /* No padding */
  border-radius: 0 !important; /* No rounded corners */
  background-color: transparent !important; /* Transparent */
  border: none !important; /* No border */
  box-shadow: none !important; /* No shadow */
}

/* Card header spacing */
[data-testid="card-header"],
.card-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Links */
a {
  color: hsl(14, 70%, 50%); /* Brand orange color */
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.15s ease;
  font-family: "Matter", sans-serif;
}

a:hover {
  color: hsl(14, 80%, 45%); /* Darker orange on hover */
  text-decoration: underline;
}

/* Sign up/Sign in footer links - more prominent */
.auth-card footer a,
[data-testid="ui/card"] footer a,
.card-footer a {
  color: hsl(14, 70%, 50%); /* Brand orange */
  font-weight: 500;
}

/* Form spacing - Custom per requirements */
form {
  display: flex;
  flex-direction: column;
  gap: 12px !important; /* 12px between email and password fields */
}

.form-section {
  margin-bottom: 0 !important; /* No margin, controlled by form gap */
}

form > div,
.form-group,
[data-testid*="node"] {
  margin-bottom: 0 !important; /* Reset since we use gap */
}

/* Header spacing - space-y-4 */
.auth-header {
  gap: 1rem; /* space-y-4 = 16px */
}

/* Sign up / Sign in link section - cleaner styling without border */
.auth-card footer,
[data-testid="ui/card"] footer,
.card-footer,
[data-testid="card-footer"],
div[class*="message"] {
  text-align: center;
  font-size: 0.875rem;
  margin-top: 1rem; /* Reduced spacing */
  color: rgba(24, 24, 24, 0.6) !important; /* Subtle gray */
}

.auth-card footer a,
[data-testid="ui/card"] footer a,
.card-footer a,
div[class*="message"] a {
  color: rgba(24, 24, 24, 0.8) !important; /* Darker gray for link */
  font-weight: 400;
  text-decoration: underline;
}

.auth-card footer a:hover,
[data-testid="ui/card"] footer a:hover,
.card-footer a:hover,
div[class*="message"] a:hover {
  color: rgba(24, 24, 24, 1) !important; /* Full black on hover */
  text-decoration: underline;
}

/* Additional links (forgot password, etc.) */
.auth-links,
[data-testid="auth-links"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.auth-links a {
  font-size: 0.875rem;
  color: hsl(14, 70%, 50%); /* Brand orange */
}

.auth-links a:hover {
  color: hsl(14, 80%, 45%); /* Darker on hover */
}

/* ==============================================
   HELPFUL PRODUCT MESSAGING
   ============================================== */

/* Card descriptions and helper text */
.card-description,
[data-testid="card-description"] {
  color: hsl(0, 0%, 20%, 0.7);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

/* Empty state messages */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: hsl(0, 0%, 20%, 0.6);
}

.empty-state-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.empty-state-text {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Success confirmation */
.success-checkmark {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: hsl(142, 76%, 90%);
  color: hsl(142, 76%, 35%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}

/* Inline validation messages */
.field-error {
  color: hsl(0, 72%, 50%);
  font-size: 0.8125rem;
  margin-top: 0.375rem;
  display: block;
}

.field-success {
  color: hsl(142, 76%, 35%);
  font-size: 0.8125rem;
  margin-top: 0.375rem;
  display: block;
}

/* Step indicators for multi-step flows */
.auth-steps {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.auth-step {
  width: 2rem;
  height: 0.25rem;
  background-color: hsl(0, 0%, 20%, 0.15);
  border-radius: 0.125rem;
  transition: background-color 0.2s ease;
}

.auth-step.active {
  background-color: var(--primary);
}

.auth-step.completed {
  background-color: hsl(142, 76%, 45%);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  h1:not(.auth-brand),
  .auth-card-heading,
  h2 {
    font-size: 1.25rem !important; /* Slightly smaller on mobile */
  }

  .auth-card,
  [data-testid="ui/card"],
  .card {
    padding: 1.5rem;
  }

  .card-description {
    font-size: 0.8125rem;
  }
}