/* ============================================================
   skinspecialist.cz / bioby.cz — ss-login-1.css — v1
   PRODUCTION CSS for Shoptet /login/ page

   DESIGN: V3 "Editorial atmospheric" — 45/55 split
     - Left: full-bleed photo (login-hero-C.webp) with overlays
       (eyebrow frame top, italic quote + author bottom)
     - Right: cream/white background with form area
       (eyebrow + heading + sub + Shoptet form + dual register paths)

   DETECTION:
     - body.in-login is set by Shoptet on /login/ page (verified)
     - Native chrome (#content-wrapper) hidden when body has .ss-login-loaded

   ARCHITECTURE — REPLACE PATTERN (matches ss-404-1):
     - JS builds .ss-login-root with V3 layout
     - JS moves Shoptet's #formLogin form into right column
     - JS adds body.ss-login-loaded class → CSS hides native chrome
     - CSS scopes all styling to .ss-login-root for isolation

   DEPLOY:
     1. Upload this file to /user/documents/upload/
     2. Upload preview-assets/login-hero-C.webp to /user/documents/upload/
     3. In Záhlaví HTML kódy add:
        <link rel="stylesheet" href="/user/documents/upload/ss-login-1.css?v=1">
     4. In Zápatí HTML kódy add:
        <script src="/user/documents/upload/ss-login-1.js?v=1" defer></script>
   ============================================================ */

/* ============================================================
   KILL NATIVE — only when body has ss-login-loaded class.
   If JS fails (graceful degradation), native chrome stays visible.
   ============================================================ */
body.in-login.ss-login-loaded #content-wrapper,
body.in-login.ss-login-loaded .breadcrumbs-wrapper {
  display: none !important;
}

/* Body BG matches our cream so any gap renders cream not white */
body.in-login.ss-login-loaded {
  background: var(--ss-canvas, #F2EBDB) !important;
}


/* ============================================================
   ROOT — full-width V3 layout, anchored after header
   ============================================================ */
.ss-login-root {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--ss-canvas, #F2EBDB);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 40px 32px 80px;
  min-height: calc(100vh - 168px); /* viewport minus header */
  font-family: var(--ss-sans, 'Manrope', sans-serif);
  color: var(--ss-black, #0F0F0F);
}


/* ============================================================
   CARD — 45/55 split, max 1200px, 4px rounded corners
   ============================================================ */
.ss-login-card {
  display: grid;
  grid-template-columns: 45% 55%;
  width: 100%;
  max-width: 1200px;
  min-height: 680px;
  background: var(--ss-white, #FFFFFF);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 15, 15, .12);
}


/* ============================================================
   LEFT — ATMOSPHERIC IMAGE with text overlays
   ============================================================ */
.ss-login-image {
  position: relative;
  /* v1.2: Shoptet transformoval filename (strips diakritiku/em-dash). */
  background-image: url('/user/documents/upload/Vase-pece-vas-ceka-prihlaseni-k-uctu-skinspecialist.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 44px;
  color: var(--ss-white, #FFFFFF);
  min-height: 680px;
}

/* Top/bottom gradient overlay for text contrast on photo */
.ss-login-image::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 15, 15, .42) 0%,
    rgba(15, 15, 15, .08) 22%,
    rgba(15, 15, 15, .08) 55%,
    rgba(15, 15, 15, .70) 100%
  );
  pointer-events: none;
}
.ss-login-image > * { position: relative; z-index: 1; }

/* Bottom funkcni copy + author (v1.3 — kratky funkcni statement, ne quote) */
.ss-login-image-quote {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.35;
  max-width: 420px;
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.ss-login-image-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ss-login-image-author .name {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.ss-login-image-author .role {
  font-family: var(--ss-sans, sans-serif);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .82;
  font-weight: 600;
  line-height: 1.4;
}


/* ============================================================
   RIGHT — FORM AREA on white
   ============================================================ */
.ss-login-form {
  padding: 80px 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ss-white, #FFFFFF);
}

.ss-login-form-inner {
  max-width: 400px;
  width: 100%;
}

.ss-login-eyebrow {
  font-family: var(--ss-sans, sans-serif);
  font-size: 10.5px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ss-sage-deep, #5A7E78);
  font-weight: 600;
  margin: 0 0 18px;
}

.ss-login-h {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-size: clamp(40px, 4vw, 52px);
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0 0 10px;
  color: var(--ss-black, #0F0F0F);
}
.ss-login-h em { font-style: italic; }

.ss-login-sub {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: 0 0 36px;
}


/* ============================================================
   FORM — restyle Shoptet's #formLogin moved into our right column
   ============================================================ */
.ss-login-form .formLogin {
  display: flex;
  flex-direction: column;
}

.ss-login-form .formLogin fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Override Shoptet's .form-group position:relative (breaks any abs children) */
.ss-login-form .formLogin .form-group {
  position: static !important;
  margin-bottom: 12px;
  min-width: 0 !important;
}
.ss-login-form .formLogin .input-wrapper { position: relative; }

.ss-login-form .formLogin .form-control {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 14px;
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .14));
  border-radius: 4px;
  outline: 0;
  color: var(--ss-black, #0F0F0F);
  transition: border-color .25s cubic-bezier(.4, 0, .2, 1);
}
.ss-login-form .formLogin .form-control:focus {
  border-color: var(--ss-sage, #6B8B85);
}

/* v1.4: Login wrapper — column stack, submit nahore, helper pod (centered) */
.ss-login-form .formLogin .login-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin-top: 8px !important;
}

/* Submit button — full width SAGE green (brand primary) */
.ss-login-form .formLogin .btn-login,
.ss-login-form .formLogin button[type="submit"] {
  float: none !important;
  width: 100% !important;
  padding: 16px !important;
  background: var(--ss-sage, #6B8B85) !important;
  color: var(--ss-white, #FFFFFF) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1);
}
.ss-login-form .formLogin .btn-login:hover,
.ss-login-form .formLogin button[type="submit"]:hover {
  background: var(--ss-sage-deep, #5A7E78) !important;
}

/* Password helper — pod buttonem, centered */
.ss-login-form .formLogin .password-helper {
  float: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
}
.ss-login-form .formLogin .password-helper a {
  color: var(--ss-terracotta-deep, #7E6248) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
  padding-bottom: 1px;
  align-self: center !important;
}
/* Hide "Nová registrace" link — right column has dedicated paths */
.ss-login-form .formLogin .password-helper a[href*="registrace"],
.ss-login-form .formLogin .password-helper a[href*="register"] {
  display: none !important;
}


/* ============================================================
   REGISTER PATHS — bottom of form column
   ============================================================ */
.ss-login-divider {
  margin: 36px 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
}
.ss-login-divider::before,
.ss-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ss-border, rgba(15, 15, 15, .14));
}

.ss-login-register-paths {
  display: flex;
  gap: 12px;
}
.ss-login-register-paths a {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .14));
  border-radius: 4px;
  text-decoration: none !important;
  color: var(--ss-black, #0F0F0F);
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: border-color .25s, background .25s;
}
.ss-login-register-paths a:hover {
  border-color: var(--ss-sage, #6B8B85);
  background: rgba(107, 139, 133, .06);
}
.ss-login-register-paths a.b2b:hover {
  border-color: var(--ss-terracotta, #9A7A5F);
  background: rgba(154, 122, 95, .06);
}


/* ============================================================
   RESPONSIVE — pod 900px stack do jednoho sloupce
   ============================================================ */
@media (max-width: 900px) {
  .ss-login-root {
    padding: 24px 16px 60px;
  }
  .ss-login-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ss-login-image {
    min-height: 360px;
    padding: 28px 24px;
  }
  .ss-login-image-quote {
    font-size: 19px;
    max-width: 280px;
    margin-bottom: 12px;
  }
  /* Strengthen bottom darkening on mobile for quote legibility */
  .ss-login-image::before {
    background: linear-gradient(
      180deg,
      rgba(15, 15, 15, .50) 0%,
      rgba(15, 15, 15, .10) 25%,
      rgba(15, 15, 15, .10) 50%,
      rgba(15, 15, 15, .78) 100%
    );
  }
  .ss-login-form {
    padding: 40px 28px 40px;
  }
  .ss-login-form-inner { max-width: 100%; }
  .ss-login-h { font-size: clamp(32px, 8vw, 40px); }
  .ss-login-sub { margin-bottom: 28px; }
  /* Mobile: layout zustava stejny (submit nahore, helper centered pod) */
  .ss-login-form .formLogin .btn-login,
  .ss-login-form .formLogin button[type="submit"] {
    padding: 16px !important;
  }
  .ss-login-register-paths {
    flex-direction: column;
  }
}