/* ==========================================================================
   Golha Login — Full CSS
   - Chef image increased on desktop/tablet for stronger presence
   - Mobile behavior adjusted to prevent chef image from overlapping form on scroll
   - Reduced top spacing in mobile for better layout
   - Chef image moved slightly higher in mobile
   - Club image preserved and hidden on mobile
   ========================================================================== */

/* Container Background */
.container-xxl {
  background-color: #422171;
}

@media (min-width: 1400px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 100vw !important;
  }
}

/* Button Styling */
.btn-danger {
  color: #fff !important;
  background-color: #ed1c24 !important;
  border-color: #ed1c24 !important;
  box-shadow: none !important;
}

/* Authentication Wrapper (page-level) */
.authentication-wrapper {
  display: flex;
  flex-basis: 100%;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: visible; /* اطمینان از نمایش تصویر بدون برش */
}

/* Page-level decorative slot for mobile chef (hidden by default) */
.authentication-wrapper::after {
  content: "";
  display: none;
  position: absolute; /* absolute برای کنترل بهتر در موبایل */
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px; /* فاصله مناسب از پایین */
  z-index: 1; /* پشت فرم */
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

/* Inner form container */
.authentication-wrapper .authentication-inner {
  width: 100%;
  max-width: 25rem;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Two layout modes */
.authentication-wrapper.authentication-basic {
  align-items: flex-start; /* شروع از بالا */
  justify-content: flex-start; /* شروع از بالا */
}

.authentication-wrapper.authentication-cover {
  align-items: flex-start;
}

.authentication-wrapper.authentication-cover .authentication-inner {
  height: 100vh;
}

/* Card Styling */
.authentication-wrapper.authentication-basic .authentication-inner .card {
  z-index: 4;
  background-color: #5b3393;
  border-radius: 25px;
  overflow: visible;
}

.authentication-wrapper.authentication-basic .authentication-inner .card .app-brand {
  margin-bottom: 2.5rem;
}

/* Inputs */
.authentication-wrapper .auth-input-wrapper .auth-input {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 150%;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Cover Image Margin */
.authentication-cover-img {
  margin-bottom: 1rem;
}

@media (min-height: 737px) {
  .authentication-cover-img {
    margin-bottom: 3rem;
  }
}

/* Form Validation */
#twoStepsForm .fv-plugins-bootstrap5-row-invalid .form-control {
  border-color: #ff5b5c;
}

/* Theme Backgrounds */
.light-style .authentication-wrapper .authentication-bg {
  background-color: #fff;
}

.dark-style .authentication-wrapper .authentication-bg {
  background-color: #283144;
}

/* ==========================================================================
   Decorative images: chef (primary) and club (secondary)
   - Chef desktop increased in visual size via wider clamp
   - Desktop chef remains fixed and may overflow intentionally to the right
   - Mobile chef uses wrapper::after (absolute) and remains below form
   ========================================================================== */

/* Base defaults for pseudo-elements inside .authentication-inner */
.authentication-wrapper.authentication-basic .authentication-inner::before,
.authentication-wrapper.authentication-basic .authentication-inner::after {
  content: "";
  position: fixed;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---------------------------
   Chef (desktop/tablet) - primary decorative
   - Increased size: stronger presence on large screens
   - Controlled overflow to the right for composition
   --------------------------- */

/* LTR desktop/tablet chef — larger and pushed off-screen */
html:not([dir=rtl]) .authentication-wrapper.authentication-basic .authentication-inner::before {
  bottom: 0;
  right: -60px; /* strong overflow */
  left: auto;
  width: clamp(400px, 42vw, 820px); /* bold desktop size */
  height: auto;
  min-height: 320px;
  background-image: url("../../../img/pages/chef.png");
  background-size: contain;
}

/* RTL desktop/tablet chef — same overflow for symmetry */
[dir=rtl] .authentication-wrapper.authentication-basic .authentication-inner::before {
  bottom: 0;
  right: -160px;
  left: auto;
  width: clamp(500px, 42vw, 820px);
  height: auto;
  min-height: 320px;
  background-image: url("../../../img/pages/chef.png");
  background-size: contain;
}

/* ---------------------------
   Club (secondary) - fixed; moderate up/left nudge
   - Hidden on smaller screens
   --------------------------- */
html:not([dir=rtl]) .authentication-wrapper.authentication-basic .authentication-inner::after {
  bottom: 18%;
  right: 8%;
  width: clamp(220px, 28vw, 360px);
  height: clamp(160px, 20vw, 260px);
  background-image: url("../../../img/pages/Club.png");
  background-size: contain;
}

[dir=rtl] .authentication-wrapper.authentication-basic .authentication-inner::after {
  bottom: 18%;
  left: 8%;
  width: clamp(220px, 28vw, 360px);
  height: clamp(160px, 20vw, 260px);
  background-image: url("../../../img/pages/Club.png");
  background-size: contain;
}

/* Hide club image on narrower screens */
@media (max-width: 991.98px) {
  .authentication-wrapper.authentication-basic .authentication-inner::after {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile layout tweaks (max-width: 576px)
   - Key goals:
     1) top-to-bottom: logo, form (near top), chef (below form, slightly higher)
     2) chef must not overlap form on scroll and must be fully visible
     3) reduced top spacing for better layout
   ========================================================================== */

@media (max-width: 576px) {
  /* مخفی کردن تصویر chef دسکتاپ در موبایل */
  .authentication-wrapper.authentication-basic .authentication-inner::before {
    display: none !important;
  }

  /* نمایش تصویر chef در موبایل با استفاده از wrapper pseudo-element */
  .authentication-wrapper::after {
    display: block;
    background-image: url("../../../img/pages/chef.png");
    width: clamp(260px, 85vw, 400px); /* عرض مناسب برای نمایش بزرگ‌تر */
    height: auto;
    min-height: 180px; /* ارتفاع مناسب */
    bottom: 40px; /* بالا آوردن تصویر برای نزدیکی به فرم */
    left: 50%;
    transform: translateX(-50%);
    background-position: center bottom;
    background-size: contain;
    z-index: 1; /* پشت فرم */
    position: absolute; /* جلوگیری از تداخل با اسکرول */
    pointer-events: none;
  }

  /* اطمینان از نمایش فرم بدون تداخل */
  .authentication-wrapper {
    overflow: visible;
    position: relative;
    min-height: 100vh; /* پر کردن صفحه */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* شروع از بالا */
  }

  /* متمرکز کردن فرم با فاصله کم از بالا */
  .authentication-wrapper.authentication-basic {
    align-items: flex-start; /* شروع از بالا */
    justify-content: flex-start;
    padding-top: 20px; /* فاصله کم از بالا */
    padding-bottom: 100px; /* کاهش فضای پایین برای نزدیکی به تصویر */
    box-sizing: border-box;
  }

  .authentication-wrapper.authentication-basic .authentication-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* شروع از بالا */
    padding: 1rem; /* کاهش padding کلی */
    padding-bottom: 20px; /* فاصله کم برای نزدیکی به تصویر */
    gap: 0.5rem;
    box-sizing: border-box;
    z-index: 3;
    width: 100%;
    max-width: 25rem;
  }

  /* تنظیم z-index کارت لاگین */
  .authentication-wrapper.authentication-basic .authentication-inner .card {
    z-index: 4; /* بالاتر از تصویر chef */
    margin-bottom: 1rem; /* فاصله متعادل */
    background-color: #5b3393;
    border-radius: 25px;
  }

  /* تنظیم فاصله لوگو */
  .authentication-wrapper.authentication-basic .authentication-inner .app-brand {
    margin-bottom: 0.75rem;
  }

  /* تنظیم اندازه فونت ورودی‌ها */
  .authentication-wrapper .auth-input-wrapper .auth-input {
    font-size: 1.125rem;
  }

  /* مخفی کردن تصویر کلاب در موبایل */
  .authentication-wrapper.authentication-basic .authentication-inner::after {
    display: none !important;
  }
}

/* Medium screens adjustments for decorative sizes */
@media (min-width: 577px) and (max-width: 1199.98px) {
  html:not([dir=rtl]) .authentication-wrapper.authentication-basic .authentication-inner::before,
  [dir=rtl] .authentication-wrapper.authentication-basic .authentication-inner::before {
    width: clamp(280px, 36vw, 640px);
    bottom: 0;
    right: -80px;
    left: auto;
    min-height: 260px;
  }

  html:not([dir=rtl]) .authentication-wrapper.authentication-basic .authentication-inner::after,
  [dir=rtl] .authentication-wrapper.authentication-basic .authentication-inner::after {
    width: clamp(200px, 26vw, 320px);
    bottom: 16%;
  }
}

/* Utility: quickly remove decorations if needed */
.no-decorations .authentication-wrapper::after,
.no-decorations .authentication-wrapper.authentication-basic .authentication-inner::before,
.no-decorations .authentication-wrapper.authentication-basic .authentication-inner::after {
  display: none !important;
}