/* Quick'N'Fresh — sign-in page.
   Calm, Arabic-first. Loaded after the theme so it wins without editing
   vendor stylesheets, which makes a template upgrade survivable. */

:root {
  --qnf-green: #0F7A4F;
  --qnf-green-deep: #0B5C3B;
  --qnf-ink: #16241D;
  --qnf-muted: #6A7B72;
  --qnf-surface: #F6F8F7;
  --qnf-line: #E2E9E5;
}

/* ---- the brand half -------------------------------------------------- */
/* Was a stock photo of a phone, a notepad and a cactus. */
.auth-wrapper-left {
  background: linear-gradient(155deg, var(--qnf-green) 0%, var(--qnf-green-deep) 100%) !important;
  position: relative;
  overflow: hidden;
}

/* A quiet motif rather than a photograph: two soft circles, barely there. */
.auth-wrapper-left::before,
.auth-wrapper-left::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
}
.auth-wrapper-left::before { width: 520px; height: 520px; top: -160px; inset-inline-start: -140px; }
.auth-wrapper-left::after  { width: 340px; height: 340px; bottom: -120px; inset-inline-end: -90px; }

.auth-wrapper-left .auth-left-cont {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
  max-width: 30rem;
}

.auth-wrapper-left .auth-left-cont .qnf-mark {
  width: min(260px, 62%);
  height: auto;
  margin-inline: auto;
  display: block;
}

.auth-wrapper-left .auth-left-cont .qnf-line {
  margin-top: 2.25rem;
  color: #fff;
  font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.9;
  opacity: .92;
}

.auth-wrapper-left .auth-left-cont .qnf-sub {
  margin-top: .85rem;
  color: rgba(255, 255, 255, .68);
  font-size: .95rem;
  font-weight: 300;
}

/* ---- the form half --------------------------------------------------- */
.auth-wrapper-right { background: var(--qnf-surface); }

.auth-wrapper-form { width: 100%; max-width: 26rem; }

.auth-wrapper-form .auth-header .title {
  color: var(--qnf-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: .4rem;
}
.auth-wrapper-form .auth-header > div > div { color: var(--qnf-muted); font-weight: 300; }

/* The small logo shown instead of the brand half on a phone. */
.qnf-mark-compact { width: 132px; height: auto; }

.auth-wrapper-form .form-control {
  border-color: var(--qnf-line);
  background: #fff;
  min-height: 48px;
  border-radius: 10px;
}
.auth-wrapper-form .form-control:focus {
  border-color: var(--qnf-green);
  box-shadow: 0 0 0 3px rgba(15, 122, 79, .12);
}

.auth-wrapper-form .btn-primary {
  background: var(--qnf-green);
  border-color: var(--qnf-green);
  min-height: 48px;
  border-radius: 10px;
  font-weight: 700;
}
.auth-wrapper-form .btn-primary:hover,
.auth-wrapper-form .btn-primary:focus {
  background: var(--qnf-green-deep);
  border-color: var(--qnf-green-deep);
}

/* The version chip: useful to an operator, but it should not shout. */
.__login-badge {
  background: transparent !important;
  color: var(--qnf-muted) !important;
  border: 1px solid var(--qnf-line);
  font-weight: 400;
}

@media (max-width: 575.98px) {
  .auth-wrapper-right { padding-top: 2rem; }
}

/* The role sits above the title as a quiet label. Putting it inside the
   heading made it wrap onto a second line and read as a broken phrase. */
.auth-wrapper-form .qnf-role {
  display: inline-block;
  margin-bottom: .55rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(15, 122, 79, .09);
  color: var(--qnf-green-deep);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
}