/* ============================================================
   Atelier — editorial split-screen sign-in for BookingInTime.
   Scoped to body.atelier so it only affects the auth pages and
   is trivially reversible (drop the class + this stylesheet).
   ============================================================ */
:root{
  --atelier-serif:'Hoefler Text','Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,serif;
  --atelier-ink:#2a2320;
  --atelier-ivory:#f6efe7;
  --atelier-gold:#b98d45;
  --atelier-gold-2:#caa35d;
  --atelier-link:#a5763f;
}

body.atelier{ margin:0; background:var(--atelier-ivory); color:var(--atelier-ink); }
/* Neutralise the old centered-card background layers if present */
body.atelier .custom-login,
body.atelier .login-bg-img,
body.atelier .bg-login{ all:unset; }

.atelier-split{ display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; }
@media (max-width:860px){ .atelier-split{ grid-template-columns:1fr; } }

/* ---------- Left: brand panel ---------- */
.atelier-brand{
  position:relative; overflow:hidden; color:#f4ece2;
  padding:48px 52px; display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  background:
    radial-gradient(120% 90% at 85% 12%, rgba(201,163,92,.34), transparent 55%),
    radial-gradient(90% 80% at 8% 100%, rgba(217,163,160,.26), transparent 55%),
    linear-gradient(158deg,#3a2a2a 0%,#2b211d 46%,#432d39 100%);
}
.atelier-brand::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:4px 4px;
}
/* On phones the split stacks; keep the brand a slim logo bar so the sign-in
   form is visible on the first screen instead of below a tall hero panel. */
@media (max-width:860px){
  .atelier-brand{
    min-height:0; padding:16px 24px;
    flex-direction:row; align-items:center; justify-content:center; gap:0;
  }
  .atelier-brand .atelier-strands,
  .atelier-brand .atelier-tagline,
  .atelier-brand .atelier-features{ display:none; }
  .atelier-logo img{ max-height:34px; }
}
.atelier-strands{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.atelier-brand > *{ position:relative; z-index:1; }
.atelier-logo{ display:inline-flex; align-items:center; }
.atelier-logo img{ max-height:42px; width:auto; }
.atelier-tagline{
  font-family:var(--atelier-serif); font-weight:500; font-size:clamp(26px,3vw,38px); line-height:1.12;
  margin:0; max-width:17ch; text-wrap:balance;
}
.atelier-tagline em{ font-style:italic; color:#e6c48a; }
.atelier-features{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; border-top:1px solid rgba(255,255,255,.14); padding-top:20px; }
.atelier-features span{ position:relative; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#cbb7a6; }
.atelier-features span:not(:last-child)::after{ content:"·"; margin-left:14px; color:#8a7360; }

/* ---------- Right: form panel ---------- */
.atelier-panel{ display:flex; flex-direction:column; min-height:100vh; background:var(--atelier-ivory); }
@media (max-width:860px){ .atelier-panel{ min-height:auto; } }
.atelier-top{ display:flex; justify-content:flex-end; align-items:center; padding:20px 34px 0; min-height:38px; }
.atelier-top .navbar-nav{ display:flex; flex-direction:row; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.atelier-top .dash-head-link{ color:var(--atelier-ink); }
.atelier-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 34px 8px; }

/* the yielded form sits in a .card > .card-body — strip its chrome */
.atelier-main .card{ border:none; background:transparent; box-shadow:none; width:100%; max-width:430px; margin:0; }
.atelier-main .card-body{ background:transparent; padding:0; }
.atelier-main h2{ font-family:var(--atelier-serif); font-weight:500; font-size:30px; color:var(--atelier-ink); }

/* form controls (scoped, so only auth pages change) */
body.atelier .form-label{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:#7a6b5f; margin-bottom:6px; }
body.atelier .form-control{ padding:13px 15px; border-radius:11px; border:1px solid #e0d3c4; background:#fffdf9; color:var(--atelier-ink); }
body.atelier .form-control:focus{ border-color:var(--atelier-gold-2); box-shadow:0 0 0 3px rgba(201,163,92,.18); }
body.atelier .btn-primary{
  background:linear-gradient(180deg,var(--atelier-gold-2),var(--atelier-gold)); border:none; color:#2b211d;
  border-radius:11px; padding:13px 18px; font-weight:600; letter-spacing:.01em;
  box-shadow:0 12px 24px -12px rgba(185,141,69,.85); transition:filter .15s ease, transform .15s ease;
}
body.atelier .btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); color:#2b211d; }
body.atelier .btn-primary:focus-visible{ outline:3px solid rgba(185,141,69,.45); outline-offset:2px; }
body.atelier .text-primary{ color:var(--atelier-link)!important; }
body.atelier a{ color:var(--atelier-link); }
body.atelier .form-check-input:checked{ background-color:var(--atelier-gold); border-color:var(--atelier-gold); }
body.atelier .form-check-input:focus{ border-color:var(--atelier-gold-2); box-shadow:0 0 0 3px rgba(201,163,92,.18); }

.atelier-foot{ padding:14px 34px 26px; color:#9c8d7f; font-size:12.5px; text-align:center; }
.atelier-foot span{ color:#9c8d7f; }

@media (prefers-reduced-motion:reduce){
  body.atelier .btn-primary{ transition:none; }
}