/**
 * Authentication Pages Styles (Login & Register)
 * Styles based on Figma design with exact values
 *
 * Desktop: 1440px - Container width 438px, Button width 135px
 * Mobile: 375px - Container width 343px, Button full width
 *
 * @package Bonevents
 */

/* ============================================
   AUTH PAGE CONTAINER
   ============================================ */

.auth-page {
  min-height: calc(100vh - 122px); /* Subtract header height */
  background: #fcfdff; /* Per Figma */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.auth-page__container {
  width: 100%;
  max-width: 438px; /* Per Figma - Desktop */
  margin: 0 auto;
}

/* ============================================
   AUTH FORM WRAPPER
   ============================================ */

.auth-form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* Per Figma */
}

/* ============================================
   FORM HEADER
   ============================================ */

.auth-form__header {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Per Figma */
  text-align: center;
  width: 100%;
}

.auth-form__title {
  font-family: var(--font-primary); /* Outfit */
  font-size: 36px; /* Per Figma - H2 */
  font-weight: 400; /* Regular */
  line-height: 1.28; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  margin: 0;
}

.auth-form__subtitle {
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma - Paragraph */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  opacity: 0.8; /* Per Figma */
  margin: 0;
}

/* ============================================
   FORM
   ============================================ */

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px; /* Gap between fields group and button */
}

.auth-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Per Figma - gap between inputs */
}

/* ============================================
   INPUT FIELDS
   ============================================ */

.auth-input {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.auth-input__label {
  font-family: var(--font-primary); /* Outfit */
  font-size: 10px; /* Per Figma */
  font-weight: 400; /* Regular */
  line-height: 2; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  opacity: 0.5; /* Per Figma */
  margin-bottom: 0;
}

.auth-input__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px; /* Gap for icon */
  padding: 4px 0; /* Per Figma - py-[4px] */
  border-bottom: 0.5px solid #2c2c34; /* Per Figma - only bottom border, 0.5px */
  transition: border-color 0.3s ease;
}

.auth-input__wrapper:focus-within {
  border-bottom-color: rgba(44, 44, 52, 0.8); /* Darker on focus */
}

.auth-input__field {
  flex: 1;
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
}

.auth-input__field::placeholder {
  color: rgba(44, 44, 52, 0.5);
}

/* Password Field with Toggle */
.auth-input__wrapper--password {
  position: relative;
}

.auth-input__toggle-password {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #2c2c34;
  font-size: 14px; /* Per Figma */
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.auth-input__toggle-password:hover {
  opacity: 0.7;
}

/* Input Group (for password + forgot link) */
.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Per Figma */
}

/* ============================================
   FORGOT PASSWORD LINK
   ============================================ */

.auth-form__forgot-link {
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  text-decoration: underline; /* Per Figma */
  align-self: flex-end;
  transition: opacity 0.3s ease;
}

.auth-form__forgot-link:hover {
  opacity: 0.7;
  color: #2c2c34;
}

/* ============================================
   CHECKBOX (Privacy Policy)
   ============================================ */

.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 16px; /* Per Figma */
}

.auth-checkbox__input {
  appearance: none;
  width: 22px; /* Per Figma */
  height: 22px; /* Per Figma */
  border: 1px solid #2c2c34; /* Per Figma */
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.auth-checkbox__input:checked {
  background: #2c2c34; /* Per Figma */
  border-color: #2c2c34;
}

.auth-checkbox__input:checked::before {
  content: '\f00c'; /* Font Awesome check icon */
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300; /* Light */
  font-size: 14px; /* Per Figma */
  color: #fcfdff; /* Per Figma */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.auth-checkbox__label {
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: rgba(44, 44, 52, 0.8); /* Per Figma */
  margin: 0;
  cursor: pointer;
}

.auth-checkbox__link {
  color: #2c2c34; /* Per Figma */
  text-decoration: underline; /* Per Figma */
  font-weight: 300; /* Light */
  transition: opacity 0.3s ease;
}

.auth-checkbox__link:hover {
  opacity: 0.7;
  color: #2c2c34;
}

/* ============================================
   SUBMIT BUTTON
   ============================================ */

.auth-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 135px; /* Per Figma - Desktop */
  padding: 4px 24px; /* Per Figma */
  background: #2c2c34; /* Per Figma */
  color: #fcfdff; /* Per Figma */
  font-family: var(--font-primary); /* Outfit */
  font-size: 16px; /* Per Figma - Buttons */
  font-weight: 400; /* Regular */
  line-height: 2; /* Per Figma */
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  align-self: center; /* Center button */
}

.auth-form__submit:hover {
  background: #1a1a1f; /* Darker on hover */
  color: #fcfdff;
}

/* ============================================
   FORM FOOTER (Sign up/Sign in links)
   ============================================ */

.auth-form__footer {
  display: flex;
  align-items: center;
  gap: 4px; /* Per Figma */
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
}

.auth-form__footer-text {
  color: #2c2c34; /* Per Figma */
  opacity: 0.8; /* Per Figma */
}

.auth-form__footer-link {
  color: #2c2c34; /* Per Figma */
  text-decoration: underline; /* Per Figma */
  transition: opacity 0.3s ease;
}

.auth-form__footer-link:hover {
  opacity: 0.7;
  color: #2c2c34;
}

/* ============================================
   NOTES (for password generation message)
   ============================================ */

.auth-form__note {
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: rgba(44, 44, 52, 0.8); /* Per Figma */
  margin: 0;
}

/* ============================================
   WOOCOMMERCE MESSAGES (Errors, Success)
   ============================================ */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 0;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
}

.woocommerce-error {
  background: rgba(184, 45, 45, 0.1);
  color: #b82d2d;
  border: 1px solid rgba(184, 45, 45, 0.2);
}

.woocommerce-message {
  background: rgba(52, 184, 45, 0.1);
  color: #34b82d;
  border: 1px solid rgba(52, 184, 45, 0.2);
}

.woocommerce-info {
  background: rgba(44, 44, 52, 0.05);
  color: #2c2c34;
  border: 1px solid rgba(44, 44, 52, 0.15);
}

/* ============================================
   FORGOT PASSWORD SPECIFIC STYLES
   ============================================ */

/* Forgot password button stays 135px on all breakpoints per Figma */
.auth-form--forgot .auth-form__submit {
  width: 135px; /* Per Figma - stays 135px on mobile too */
}

/* ============================================
   MOBILE RESPONSIVE (375px)
   ============================================ */

@media (max-width: 767px) {
  .auth-page {
    padding: 32px 16px;
  }

  .auth-page__container {
    max-width: 343px; /* Per Figma - Mobile */
  }

  .auth-form__submit {
    width: 100%; /* Per Figma - Mobile full width for login/register */
  }

  /* Forgot password button exception - stays 135px */
  .auth-form--forgot .auth-form__submit {
    width: 135px; /* Per Figma - specific for forgot password */
  }
}

/* ============================================
   DESKTOP LARGE (1440px+)
   ============================================ */

@media (min-width: 768px) {
  .auth-page {
    padding: 120px 48px; /* More space on desktop */
  }
}