/* ==========================================================================
   EventInn — Auth Pages CSS  (ei-auth-pages.css)
   Giriş yap + Kayıt Ol sayfaları/modal için site-uyumlu stil katmanı.
   Token-first: tüm renkler --ei-* değişkenleri kullanır.

   NOT: Social login buton stilleri EventInn_Social_Login_UI (v7.0.0)
   tarafından inline CSS olarak yönetilir. Bu dosya sadece sayfa/form
   düzenini, branding'i ve genel UX katmanını sağlar.

   v1.0.0 — 2026-04-18  (v7.1.0 entegrasyonu)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKEN ALIASES (auth-specific)
   -------------------------------------------------------------------------- */
:root {
  --ei-auth-form-width       : min(520px, 92vw);
  --ei-auth-modal-width      : min(540px, 94vw);
  --ei-auth-card-bg           : var(--ei-color-white, #fff);
  --ei-auth-card-radius       : var(--ei-radius-lg, 12px);
  --ei-auth-card-shadow       : 0 4px 24px rgba(15, 118, 110, 0.08);
  --ei-auth-card-border       : 1px solid var(--ei-color-border, #D1E7E5);
  --ei-auth-divider-color     : var(--ei-color-border, #D1E7E5);
  --ei-auth-hero-grad         : linear-gradient(135deg, var(--ei-color-void, #FAFCFB) 0%, var(--ei-color-linen, #F5FAF9) 100%);
}

/* --------------------------------------------------------------------------
   1. LOGIN PAGE — /account/login/
      HivePress renders: .hp-page > .hp-row > .hp-col-sm-4 > form.hp-form--user-login
   -------------------------------------------------------------------------- */

/* Widen the container from 4-col (33%) to something comfortable */
.hp-form--user-login {
  max-width: var(--ei-auth-form-width) !important;
  width: 100% !important;
  margin-inline: auto;
  padding: var(--ei-space-7, 48px) var(--ei-space-6, 32px) var(--ei-space-6, 32px);
  background: var(--ei-auth-card-bg);
  border: var(--ei-auth-card-border);
  border-radius: var(--ei-auth-card-radius);
  box-shadow: var(--ei-auth-card-shadow);
}

/* Make the parent grid column full-width so the card itself controls width */
.hp-page__content:has(.hp-form--user-login) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  display: flex;
  justify-content: center;
  padding-block: var(--ei-space-7, 48px);
}

/* The row above also needs to be flexible */
.hp-row:has(.hp-form--user-login) {
  justify-content: center;
}

/* Override the HivePress --narrow constraint */
.hp-form--narrow.hp-form--user-login,
.hp-form--narrow.hp-form--user-register {
  max-width: var(--ei-auth-form-width) !important;
}

/* --------------------------------------------------------------------------
   1a. LOGIN PAGE — Header / Branding (injected via CSS ::before)
   -------------------------------------------------------------------------- */
.hp-form--user-login::before {
  content: "EventInn'e Hoş Geldiniz";
  display: block;
  font-family: var(--ei-font-serif, 'Fraunces', Georgia, serif);
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  font-weight: 700;
  color: var(--ei-color-primary, #0F766E);
  text-align: center;
  margin-bottom: var(--ei-space-2, 8px);
  line-height: var(--ei-lh-heading, 1.12);
}

.hp-form--user-login::after {
  content: "Etkinlik mekanınızı teknik veriyle keşfedin.";
  display: block;
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif);
  font-size: var(--ei-text-base, 0.9375rem);
  color: var(--ei-color-ink-3, #3D6B69);
  text-align: center;
  margin-bottom: var(--ei-space-5, 24px);
  order: -1;
}

/* Reorder: branding first, then fields */
.hp-form--user-login {
  display: flex;
  flex-direction: column;
}
.hp-form--user-login::before { order: -2; }
.hp-form--user-login::after  { order: -1; }
.hp-form--user-login .hp-form__messages { order: 0; }
.hp-form--user-login .hp-form__fields   { order: 1; }
.hp-form--user-login .ei-social-login   { order: 2; }
.hp-form--user-login .hp-form__footer   { order: 3; }

/* --------------------------------------------------------------------------
   1b. LOGIN PAGE — Page title override
   -------------------------------------------------------------------------- */
/* Hide the generic "Giriş yap" H2/H3 since we have our own branding.
   v7.1.3 FIX: DOM'da .hp-page__title'ın kardeşi doğrudan .hp-form,
   arada .hp-page__content wrapper yok. Fallback: body class ile hedefle. */
.hp-page__title:has(+ .hp-form--user-login),
.ei-page-login .hp-page__title,
.hp-page .entry-title {
  font-size: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

/* --------------------------------------------------------------------------
   2. REGISTRATION MODAL — Fancybox popup
      HivePress renders: .hp-modal > form.hp-form--user-register
   -------------------------------------------------------------------------- */

/* Widen the Fancybox modal */
.hp-modal:has(.hp-form--user-register) {
  max-width: var(--ei-auth-modal-width) !important;
  width: var(--ei-auth-modal-width) !important;
  border-radius: var(--ei-auth-card-radius) !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Style the register form inside modal */
.hp-modal .hp-form--user-register {
  max-width: 100% !important;
  padding: var(--ei-space-7, 48px) var(--ei-space-6, 32px) var(--ei-space-6, 32px);
  display: flex;
  flex-direction: column;
}

/* Branding header for register modal */
.hp-modal .hp-form--user-register::before {
  content: "EventInn'e Katılın";
  display: block;
  font-family: var(--ei-font-serif, 'Fraunces', Georgia, serif);
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
  font-weight: 700;
  color: var(--ei-color-primary, #0F766E);
  text-align: center;
  margin-bottom: var(--ei-space-2, 8px);
  line-height: var(--ei-lh-heading, 1.12);
  order: -2;
}

.hp-modal .hp-form--user-register::after {
  content: "Türkiye'nin en doğrulanmış etkinlik altyapı ağına ücretsiz erişin.";
  display: block;
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif);
  font-size: var(--ei-text-sm, 0.8125rem);
  color: var(--ei-color-ink-3, #3D6B69);
  text-align: center;
  margin-bottom: var(--ei-space-5, 24px);
  order: -1;
}

/* Reorder register form elements */
.hp-modal .hp-form--user-register .hp-form__messages { order: 0; }
.hp-modal .hp-form--user-register .hp-form__fields   { order: 1; }
.hp-modal .hp-form--user-register .ei-social-login   { order: 2; }
.hp-modal .hp-form--user-register .hp-form__footer   { order: 3; }

/* --------------------------------------------------------------------------
   2a. HIDE Pro Upsell from Registration Form
   -------------------------------------------------------------------------- */
.hp-form--user-register .hp-form__field--plan,
.hp-form--user-register [class*="membership"],
.hp-form--user-register [class*="plan"],
.hp-form--user-register .hp-field--select-plan {
  display: none !important;
}

/* v7.1.3 FIX: EventInn'in kendi .eventinn-advanced-gate upsell bileşeni */
.hp-form--user-register .eventinn-advanced-gate,
.hp-modal .eventinn-advanced-gate {
  display: none !important;
}

/* If Pro upsell is in a generic field wrapper, target by content */
.hp-form--user-register .hp-form__fields > div:has(a[href*="pro"]),
.hp-form--user-register .hp-form__fields > div:has(a[href*="upgrade"]),
.hp-form--user-register .hp-form__fields > div:has(a[href*="membership"]) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. FORM FIELDS — Shared styling for login & register
   -------------------------------------------------------------------------- */

/* Labels */
.hp-form--user-login .hp-field__label,
.hp-form--user-register .hp-field__label {
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif);
  font-weight: 600;
  font-size: var(--ei-text-sm, 0.8125rem);
  color: var(--ei-color-ink-2, #1A4744);
  letter-spacing: 0.01em;
  margin-bottom: var(--ei-space-1, 4px);
}

/* Input fields */
.hp-form--user-login input[type="text"],
.hp-form--user-login input[type="email"],
.hp-form--user-login input[type="password"],
.hp-form--user-register input[type="text"],
.hp-form--user-register input[type="email"],
.hp-form--user-register input[type="password"] {
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif);
  font-size: var(--ei-text-base, 0.9375rem);
  color: var(--ei-color-ink, #134E4A);
  background: var(--ei-color-white, #fff);
  border: 1.5px solid var(--ei-color-border, #D1E7E5);
  border-radius: var(--ei-radius-md, 8px);
  padding: var(--ei-space-3, 12px) var(--ei-space-4, 16px);
  width: 100%;
  transition: border-color var(--ei-motion-fast, .15s) var(--ei-ease-out, ease),
              box-shadow var(--ei-motion-fast, .15s) var(--ei-ease-out, ease);
}

.hp-form--user-login input:focus,
.hp-form--user-register input:focus {
  outline: none;
  border-color: var(--ei-color-primary, #0F766E);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* Primary submit button */
.hp-form--user-login .hp-form__button,
.hp-form--user-register .hp-form__button {
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif);
  font-weight: 600;
  font-size: var(--ei-text-base, 0.9375rem);
  background: var(--ei-color-ink, #134E4A);
  color: var(--ei-color-white, #fff);
  border: none;
  border-radius: var(--ei-radius-md, 8px);
  padding: var(--ei-space-3, 12px) var(--ei-space-5, 24px);
  width: 100%;
  cursor: pointer;
  transition: background var(--ei-motion-fast, .15s) var(--ei-ease-out, ease),
              transform var(--ei-motion-fast, .15s) var(--ei-ease-out, ease);
}

.hp-form--user-login .hp-form__button:hover,
.hp-form--user-register .hp-form__button:hover {
  background: var(--ei-color-primary, #0F766E);
  transform: translateY(-1px);
}

/* Secondary links (Kayıt Ol, Giriş Yap, Şifre unuttum) */
.hp-form--user-login .hp-form__action a,
.hp-form--user-register .hp-form__action a,
.hp-form--user-login .hp-form__footer a,
.hp-form--user-register .hp-form__footer a {
  color: var(--ei-color-primary, #0F766E);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ei-motion-fast, .15s) var(--ei-ease-out, ease);
}

.hp-form--user-login .hp-form__footer a:hover,
.hp-form--user-register .hp-form__footer a:hover {
  color: var(--ei-color-primary-hover, #0D9488);
  text-decoration: underline;
}

/* Footer text */
.hp-form--user-login .hp-form__footer,
.hp-form--user-register .hp-form__footer {
  text-align: center;
  font-size: var(--ei-text-sm, 0.8125rem);
  color: var(--ei-color-ink-muted, #6B9896);
  margin-top: var(--ei-space-4, 16px);
}

/* --------------------------------------------------------------------------
   4. SOCIAL LOGIN — Token-harmonized overrides for Social_Login_UI
      Social_Login_UI (v7.0.0) handles injection + base styling inline.
      Here we align its output with EventInn design tokens.
   -------------------------------------------------------------------------- */

/* Use EventInn token colors for separator text */
.ei-social-login__separator span {
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif);
  color: var(--ei-color-ink-muted, #6B9896);
}

.ei-social-login__separator::before,
.ei-social-login__separator::after {
  background: var(--ei-auth-divider-color) !important;
}

/* Harmonize Nextend button with auth form token palette */
.ei-social-login__buttons .nsl-button {
  border-color: var(--ei-color-border, #D1E7E5) !important;
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif) !important;
  color: var(--ei-color-ink, #134E4A) !important;
}

.ei-social-login__buttons .nsl-button:hover {
  border-color: var(--ei-color-primary, #0F766E) !important;
  background: var(--ei-color-linen, #F5FAF9) !important;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08) !important;
}

/* --------------------------------------------------------------------------
   5. FANCYBOX OVERLAY — softer, EventInn-branded
   -------------------------------------------------------------------------- */

.fancybox-bg {
  background: rgba(19, 78, 74, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Close button styling */
.fancybox-button--close,
.fancybox-close-small {
  color: var(--ei-color-ink-muted, #6B9896) !important;
  opacity: 1 !important;
  transition: color var(--ei-motion-fast, .15s) var(--ei-ease-out, ease);
}

.fancybox-button--close:hover,
.fancybox-close-small:hover {
  color: var(--ei-color-ink, #134E4A) !important;
}

/* --------------------------------------------------------------------------
   6. PAGE BACKGROUND — Login/Register pages
   -------------------------------------------------------------------------- */

/* Add subtle gradient background to the account pages */
body.hivepress-account .site-content,
body[class*="login"] .site-content {
  background: var(--ei-auth-hero-grad);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. TRUST SIGNALS — Subtle footer note
   -------------------------------------------------------------------------- */

.hp-form--user-login .hp-form__footer::after,
.hp-modal .hp-form--user-register .hp-form__footer::after {
  content: "\1F512 Bilgileriniz güvende. Asla paylaşılmaz.";
  display: block;
  font-size: 11px;
  color: var(--ei-color-ink-muted, #6B9896);
  margin-top: var(--ei-space-4, 16px);
  text-align: center;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   8. LOGOUT MENU ITEM — Account sidebar
   -------------------------------------------------------------------------- */

/* v7.1.3 FIX: Doğru class .hp-menu--user-account (eski: .hp-menu--account) */
.hp-menu--user-account a[href*="logout"],
.hp-page__sidebar .hp-menu a[href*="logout"] {
  color: var(--ei-color-accent, #B45309) !important;
  border-top: 1px solid var(--ei-color-border, #D1E7E5);
  margin-top: var(--ei-space-2, 8px);
  padding-top: var(--ei-space-3, 12px) !important;
  display: block;
}

.hp-menu--user-account a[href*="logout"]:hover,
.hp-page__sidebar .hp-menu a[href*="logout"]:hover {
  color: #991B1B !important;
  background: rgba(153, 27, 27, 0.04);
}

/* --------------------------------------------------------------------------
   8b. HEADER NAV — Hide "Giriş" link when user is logged in
   v7.1.3: Anasayfa header'da kullanıcı giriş yapmışken "Giriş" görünüyor
   -------------------------------------------------------------------------- */
body.logged-in .ei-nlinks a[href$="/account/"],
body.logged-in .ei-nlinks a[href*="/account/login"],
body.logged-in .ei-mobile-menu a[href$="/account/"],
body.logged-in .ei-mobile-menu a[href*="/account/login"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8c. HEADER ACCOUNT LINK — Logged-in user nav on homepage
   v7.2.0: "Giriş" linki gizlendiğinde yerine kullanıcı hesap menüsü
   -------------------------------------------------------------------------- */
.ei-user-account-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: var(--ei-color-ink, #134E4A) !important;
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif);
  font-weight: 600;
  font-size: var(--ei-text-sm, 0.8125rem);
  text-decoration: none !important;
  padding: 4px 12px;
  border-radius: var(--ei-radius-md, 8px);
  border: 1.5px solid var(--ei-color-border, #D1E7E5);
  transition: border-color var(--ei-motion-fast, .15s) var(--ei-ease-out, ease),
              background var(--ei-motion-fast, .15s) var(--ei-ease-out, ease);
}

.ei-user-account-link:hover {
  border-color: var(--ei-color-primary, #0F766E) !important;
  background: var(--ei-color-linen, #F5FAF9);
  color: var(--ei-color-primary, #0F766E) !important;
}

.ei-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ei-color-border, #D1E7E5);
}

.ei-user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile: hide avatar, show only name */
@media (max-width: 768px) {
  .ei-user-avatar {
    display: none;
  }
  .ei-user-account-link {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   8d. ACCOUNT SIDEBAR — Universal account menu on all account pages
   v7.2.0: Tüm hesap sayfalarına sidebar menü (v7.1.3'ten genişletildi)
   -------------------------------------------------------------------------- */
.ei-workspace-sidebar {
  min-width: 220px;
  max-width: 260px;
  flex-shrink: 0;
  padding-right: var(--ei-space-5, 24px);
  border-right: 1px solid var(--ei-color-border, #D1E7E5);
}

.ei-workspace-sidebar .hp-menu a {
  display: block;
  padding: var(--ei-space-2, 8px) var(--ei-space-3, 12px);
  color: var(--ei-color-ink-2, #1A4744);
  font-family: var(--ei-font-sans, 'DM Sans', sans-serif);
  font-size: var(--ei-text-sm, 0.8125rem);
  text-decoration: none;
  border-radius: var(--ei-radius-sm, 6px);
  transition: background var(--ei-motion-fast, .15s) var(--ei-ease-out, ease),
              color var(--ei-motion-fast, .15s) var(--ei-ease-out, ease);
}

.ei-workspace-sidebar .hp-menu a:hover {
  background: var(--ei-color-linen, #F5FAF9);
  color: var(--ei-color-primary, #0F766E);
}

.ei-workspace-sidebar .hp-menu .hp-menu__item--current > a,
.ei-workspace-sidebar .hp-menu a[aria-current="page"] {
  background: var(--ei-color-linen, #F5FAF9);
  color: var(--ei-color-primary, #0F766E);
  font-weight: 600;
}

/* Parent container: side-by-side layout */
.ei-has-sidebar {
  display: flex !important;
  gap: var(--ei-space-6, 32px);
  align-items: flex-start;
}

.ei-has-sidebar > .hp-page__content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .ei-workspace-sidebar {
    display: none; /* Mobilde sidebar gizle, header dropdown yeterli */
  }
  .ei-has-sidebar {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .hp-form--user-login,
  .hp-modal .hp-form--user-register {
    padding: var(--ei-space-5, 24px) var(--ei-space-4, 16px);
  }

  .hp-form--user-login::before,
  .hp-modal .hp-form--user-register::before {
    font-size: 1.25rem;
  }

  .hp-modal:has(.hp-form--user-register) {
    max-width: 96vw !important;
    width: 96vw !important;
    margin: var(--ei-space-2, 8px);
  }
}

/* --------------------------------------------------------------------------
   10. ANIMATION — Subtle entrance
   -------------------------------------------------------------------------- */

@keyframes ei-auth-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hp-form--user-login {
  animation: ei-auth-slide-up var(--ei-motion-normal, .25s) var(--ei-ease-out, ease) both;
}

.hp-modal .hp-form--user-register {
  animation: ei-auth-slide-up var(--ei-motion-normal, .25s) var(--ei-ease-out, ease) both;
}