/* Sign in / sign up / password screens on the marketing look (D-105). Loads after site.css; every rule is
   scoped to body.pg-auth so nothing here can reach the site or the panel. */

.pg-auth{ background:var(--paper); }
.pg-auth .auth-top-act{ margin-inline-start:auto; }
.pg-auth .top-in{ justify-content:space-between; }

.auth-main{ position:relative; isolation:isolate; overflow:hidden; min-height:calc(100vh - 68px); padding:clamp(28px, 6vw, 72px) 0 72px; }
/* Three soft blooms of the booked-day colours behind the card: alive, never loud. */
.auth-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(560px 400px at 12% 8%, rgba(79,182,247,.18), transparent 70%),
    radial-gradient(480px 360px at 88% 18%, rgba(143,120,255,.13), transparent 70%),
    radial-gradient(520px 380px at 70% 100%, rgba(255,166,107,.12), transparent 70%); }

.auth-grid{ display:grid; grid-template-columns:minmax(0, 470px) minmax(0, 400px); gap:36px; justify-content:center; align-items:start; }

/* The form card */
.pg-auth .auth-card{ background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:28px; padding:36px 34px 30px;
  box-shadow:0 1px 2px rgba(21,21,26,.04), 0 16px 36px -28px rgba(21,21,26,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.pg-auth .auth-card h1{ font-size:clamp(26px, 3.4vw, 32px); letter-spacing:-.025em; }
.pg-auth .auth-card .lede{ margin:10px 0 26px; font-size:16px; line-height:1.55; color:var(--ink-2); max-width:none; }

.pg-auth .field{ margin-bottom:16px; }
.pg-auth .field label{ display:block; margin-bottom:7px; font-size:14px; font-weight:700; color:var(--ink); }
.pg-auth .field input[type=text], .pg-auth .field input[type=email], .pg-auth .field input[type=password],
.pg-auth .field input[type=tel], .pg-auth .field input[type=number], .pg-auth .field select, .pg-auth .field textarea{
  width:100%; min-height:50px; padding:0 16px; border:1.5px solid var(--line-2); border-radius:14px; background:var(--white);
  color:var(--ink); font:500 16px/1.4 var(--sans); /* 16px: iOS does not zoom the page on focus */
  transition:border-color .2s, box-shadow .2s; }
.pg-auth .field textarea{ padding:12px 16px; min-height:110px; }
.pg-auth .field select{ appearance:none; -webkit-appearance:none; padding-inline-end:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }
html[dir="rtl"] .pg-auth .field select{ background-position:left 16px center; }
.pg-auth .field input:hover, .pg-auth .field select:hover{ border-color:#c3bdae; }
.pg-auth .field input:focus, .pg-auth .field select:focus, .pg-auth .field textarea:focus{
  outline:none; border-color:var(--brand-600); box-shadow:0 0 0 4px rgba(3,100,237,.14); }
.pg-auth .field .hint{ display:block; margin-top:6px; font-size:13px; line-height:1.45; color:var(--ink-3); }
.pg-auth .field .err{ display:block; margin-top:6px; font-size:13px; font-weight:600; color:#b42318; }
.pg-auth .field input.has-err, .pg-auth .field select.has-err{ border-color:#d92d20; }
.pg-auth .field input.has-err:focus{ box-shadow:0 0 0 4px rgba(217,45,32,.12); }

.pg-auth .check{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 20px; font-size:14px; line-height:1.55; color:var(--ink-2); }
.pg-auth .check input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--brand-600); }
.pg-auth .check a, .pg-auth .social-terms a, .pg-auth .auth-alt a{ color:var(--link); font-weight:700; text-decoration:none; }
.pg-auth .check a:hover, .pg-auth .social-terms a:hover, .pg-auth .auth-alt a:hover{ text-decoration:underline; }

/* Buttons: views use plain .btn for the main action */
.pg-auth .auth-card .btn{ width:100%; min-height:52px; background:var(--brand-grad); color:#fff; border:0; font-size:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -10px rgba(3,86,214,.55); }
.pg-auth .auth-card .btn:hover{ background:linear-gradient(135deg, #0364ed 0%, #0352d0 50%, #0b44b0 100%); }
.pg-auth .auth-card .btn + .btn{ margin-top:12px; }
.pg-auth .auth-card .btn-ghost{ box-shadow:none; background:transparent; color:var(--ink); border:1.5px solid var(--line-2); }
.pg-auth .auth-card .btn-ghost:hover{ background:var(--paper); border-color:var(--ink); }
.pg-auth .auth-card .btn-social{ box-shadow:none; background:#fff; color:var(--ink); border:1.5px solid var(--line-2); gap:10px; font-weight:700; }
.pg-auth .auth-card .btn-social:hover{ background:var(--paper); border-color:#c3bdae; }

.pg-auth .social-split{ display:flex; align-items:center; gap:12px; margin:24px 0 16px; }
.pg-auth .social-split::before, .pg-auth .social-split::after{ content:''; flex:1; height:1px; background:var(--line); }
.pg-auth .social-split span{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
html[lang="ar"] .pg-auth .social-split span{ letter-spacing:0; }
.pg-auth .social-terms{ margin-top:12px; text-align:center; font-size:12.5px; line-height:1.6; color:var(--ink-3); }
.pg-auth .telegram-row{ display:flex; justify-content:center; margin-top:14px; min-height:40px; }
.pg-auth .turnstile-row{ margin:0 0 18px; display:flex; justify-content:center; min-height:65px; }
.pg-auth .turnstile-row:empty{ display:none; margin:0; min-height:0; }

.pg-auth .auth-alt{ margin-top:10px; text-align:center; font-size:14.5px; color:var(--ink-2); }
.pg-auth .auth-sep{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }

.pg-auth .flash{ margin-bottom:20px; padding:12px 14px; border-radius:14px; font-size:14px; line-height:1.5; border:1px solid; }
.pg-auth .flash-notice{ color:var(--mint-ink); background:var(--mint); border-color:rgba(6,96,111,.15); }
.pg-auth .flash-warning{ color:var(--rose-ink); background:var(--rose); border-color:rgba(140,26,67,.15); }

/* Trust panel */
.auth-side{ min-height:0; padding:30px; gap:0; align-self:center; }
.auth-side .eyebrow{ margin-bottom:18px; background:rgba(255,255,255,.7); }
.auth-promises{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.auth-promises li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--mint-ink); }
.auth-promises b{ display:block; font-size:16px; font-weight:800; margin-bottom:2px; }
.auth-promises .tick{ background:rgba(255,255,255,.75); }
.auth-demo{ display:inline-flex; gap:6px; margin-top:22px; font-weight:800; color:var(--mint-ink); text-decoration:none; }
.auth-demo:hover{ text-decoration:underline; }
html[dir="rtl"] .auth-demo span{ display:inline-block; transform:scaleX(-1); }

@media (max-width:900px){
  .auth-grid{ grid-template-columns:minmax(0, 520px); }
  .auth-side{ display:none; }
}
@media (max-width:560px){
  .auth-main{ padding:18px 0 48px; }
  .pg-auth .auth-card{ padding:26px 20px 22px; border-radius:22px; }
  /* Turnstile has a hard 300px minimum: scale it so it never widens the page on small phones (playbook). */
  .pg-auth .turnstile-row{ transform:scale(.92); transform-origin:50% 0; }
}
@media (max-width:359px){ .pg-auth .turnstile-row{ transform:scale(.84); } }

/* app.css carried this; keep it so any auth view can use the hidden attribute safely. */
.pg-auth [hidden]{ display:none !important; }

/* The site hides the wordmark on phones to make room for its menu; the auth header has room, so keep it. */
@media (max-width:560px){ .pg-auth .top .brand span{ display:inline; } }