/* plantora.info web account pages (signup / login / account) — 2026-10.
 * Loaded after site.css, so it only adds what the marketing pages do not have:
 * a form card, fields, a code-entry panel and status messages. Uses the same
 * tokens, so it follows the rest of the site. */

.acct{padding-block:clamp(36px,6vw,72px)}
.acct-card{
  max-width:520px;margin-inline:auto;background:var(--white);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,36px);box-shadow:var(--shadow-card);
}
.acct-card h2{font-size:clamp(1.3rem,2.6vw,1.6rem);font-weight:800;margin-bottom:6px}
.acct-card .sub{color:var(--ink-600);font-size:.97rem;margin-bottom:22px}
.acct [hidden]{display:none !important}

.field{margin-bottom:16px}
.field label,.field .lbl{display:block;font-weight:700;font-size:.9rem;color:var(--ink-900);margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=password],
.field input[type=tel],.field input[type=number],.field select{
  width:100%;min-height:46px;padding:10px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--hairline);background:var(--mint-050);color:var(--ink-900);
  font:inherit;font-size:1rem;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--forest-400);background:#fff}
.field input[aria-invalid=true]{border-color:var(--terracotta-500)}
.field .hint{font-size:.85rem;color:var(--ink-400);margin-top:5px}
.field .hint.ok{color:var(--forest-500);font-weight:700}
.field .hint.bad{color:var(--terracotta-500);font-weight:700}
.field .hint.taken{color:#b3261e;font-weight:700}
.field .hint.taken a{color:inherit;text-decoration:underline;font-weight:800}
.field-row{display:flex;gap:10px}
.field-row select{flex:0 0 42%}
.field-row input{flex:1}
.pw{position:relative}
.pw input[type=password],.pw input[type=text]{padding-left:14px;padding-right:80px}
/* The password box stays left-to-right in Arabic (see below), so the Show button sits on its right edge in both languages;
   the field's own padding rule is more specific than a plain `.pw input`, which is why the dots ran under the button. */
.pw button{
  position:absolute;right:8px;left:auto;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--forest-500);font:inherit;font-weight:700;
  font-size:.88rem;cursor:pointer;padding:6px 8px;border-radius:8px;
}
.pw button:hover{background:var(--mint-100)}

.check{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;margin:6px 0 18px;color:var(--ink-600)}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--forest-500)}
.check a{color:var(--forest-500);font-weight:700;text-underline-offset:3px}

.acct-card .btn{width:100%;justify-content:center;min-height:48px;cursor:pointer}
.acct-card .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-google{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:48px;padding:10px 18px;border-radius:var(--r-pill);
  background:#fff;border:1.5px solid var(--hairline);color:var(--ink-900);
  font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn-google:hover{background:var(--mint-050);border-color:var(--mint-400)}
.btn-google[disabled]{opacity:.55;cursor:not-allowed}
.btn-google svg{width:20px;height:20px;flex:none}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-400);font-size:.85rem;margin:18px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--hairline)}

.linkbtn{
  background:none;border:0;color:var(--forest-500);font:inherit;font-weight:700;
  cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px;
}
.linkbtn[disabled]{color:var(--ink-400);cursor:default;text-decoration:none}
.below{margin-top:18px;text-align:center;font-size:.95rem}
.below a{color:var(--forest-500);font-weight:700;text-underline-offset:3px}
.actions-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}

.code-input{
  letter-spacing:.5em;text-align:center;font-size:1.5rem !important;font-weight:800;
}

.status{
  margin:0 0 16px;padding:12px 14px;border-radius:var(--r-sm);font-size:.94rem;font-weight:600;
}
.status[hidden]{display:none}
.status.error{background:var(--terracotta-100);border:1px solid rgba(217,122,86,.3);color:#7a3a1f}
.status.info{background:var(--mint-100);border:1px solid var(--hairline);color:var(--forest-700)}

.who{display:grid;gap:10px;margin:6px 0 22px}
.who div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.who dt{font-weight:700;color:var(--ink-900)}
.who dd{margin:0;color:var(--ink-600);text-align:end;overflow-wrap:anywhere}
.stack{display:grid;gap:10px}

.noapp-check{font-size:.9rem;color:var(--ink-400)}

/* Latin-script inputs stay left-to-right on the Arabic page. */
.field input[type=email],.field input[type=tel],.field input[type=password],
.field input#f-username,.field input#f-username2{direction:ltr;text-align:start}

.forgot-row{text-align:end;margin:-6px 0 14px}

/* A "Loading..." box only appears if the wait is longer than a moment (standing rule: pages are fast; no flash of a
 * loading box). The page content normally replaces it before it ever shows. */
#card-loading { opacity: 0; animation: plt-appear .01s linear .4s forwards; }
@keyframes plt-appear { to { opacity: 1; } }

/* the line under the terms checkbox: news and offers by email are on at sign-up (2026-10) */
.mk-note{font-size:.88rem;line-height:1.5;color:var(--ink-600);margin:-4px 0 18px}

/* ---- the three-step signup (2026-10) ---- */
.steps{max-width:520px;margin:0 auto 14px}
.steps[hidden]{display:none}
.steps-track{height:8px;border-radius:99px;background:var(--mint-100);overflow:hidden}
.steps-track span{display:block;height:100%;width:33.3%;border-radius:99px;background:var(--forest-500);transition:width .3s var(--ease)}
.steps-label{margin:8px 0 0;font-size:.88rem;font-weight:700;color:var(--ink-600)}

/* a button that is working shows a spinner and cannot be pressed twice */
.acct-card .btn[aria-busy=true],.btn-google[aria-busy=true],.linkbtn[aria-busy=true]{position:relative;pointer-events:none}
.acct-card .btn[aria-busy=true]::after,.btn-google[aria-busy=true]::after,.linkbtn[aria-busy=true]::after{
  content:"";width:16px;height:16px;margin-inline-start:10px;flex:none;border-radius:50%;
  border:2.5px solid currentColor;border-inline-end-color:transparent;display:inline-block;animation:plt-spin .7s linear infinite;
}
@keyframes plt-spin{to{transform:rotate(360deg)}}

.opt{font-weight:600;color:var(--ink-400)}
.addr-form{margin-top:12px}
.addr-form .field-row>.field{flex:1;min-width:0}
.terms-line a{color:var(--forest-500);font-weight:700;text-underline-offset:3px}

/* the country-code picker: closed it shows only "+965 v"; open it is a searchable list (flag, name, code) */
.dial{position:relative;flex:0 0 auto}
.dial-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--hairline);background:var(--mint-050);color:var(--ink-900);font:inherit;font-size:1rem;cursor:pointer;
  direction:ltr;
}
.dial-btn:focus-visible,.dial-btn[aria-expanded=true]{outline:none;border-color:var(--forest-400);background:#fff}
.dial-pop{
  position:absolute;z-index:30;inset-inline-start:0;top:calc(100% + 6px);width:min(340px,86vw);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md,14px);box-shadow:var(--shadow-card);padding:10px;
}
.dial-pop[hidden]{display:none}
.dial-pop input[type=search]{
  width:100%;min-height:42px;padding:8px 12px;border-radius:var(--r-sm);border:1.5px solid var(--hairline);
  background:var(--mint-050);font:inherit;font-size:1rem;margin-bottom:6px;
}
.dial-pop ul{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.dial-pop li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer}
.dial-pop li:hover,.dial-pop li.is-active{background:var(--mint-100)}
.dial-pop li[aria-selected=true]{font-weight:800}
.dial-flag{font-size:1.25rem;width:1.6em;text-align:center;flex:none}
.dial-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dial-num{color:var(--ink-600);direction:ltr;unicode-bidi:isolate}
.dial-none{margin:8px 4px;color:var(--ink-400);font-size:.92rem}
.field-row.mob{align-items:stretch}
.field-row.mob input{flex:1;min-width:0}

/* Login and signup (all steps, the code screen too): no hero header, only the navigation bar. The form card is centred in the window
 * and sits clear of the fixed navigation bar, so on desktop and phone it is fully visible without scrolling (the longest step, 3, may
 * scroll on a very small phone). */
body.auth-page main{min-height:100vh;min-height:100dvh;display:flex;align-items:center}
body.auth-page .acct{width:100%;padding-block:92px 28px}
body.auth-page .acct-card{margin-block:auto}
@media (max-width:480px){body.auth-page .acct{padding-block:84px 20px}}
.acct-card .sub.sub--spam{font-size:.85rem;color:var(--ink-400);margin-top:-14px;margin-bottom:20px}

/* Small phones / short windows: tighter spacing so the card still fits (login step, the code screen and signup step 1 fit 640 px). */
@media (max-width:480px),(max-height:700px){
  body.auth-page .acct{padding-block:80px 12px}
  body.auth-page .acct-card{padding:16px 18px 14px}
  body.auth-page .acct-card h2{margin-bottom:2px;font-size:1.2rem}
  body.auth-page .acct-card .sub{margin-bottom:10px;font-size:.9rem;line-height:1.4}
  body.auth-page .steps{margin-bottom:8px}
  body.auth-page .field label{margin-bottom:4px}
  body.auth-page .field .hint{margin-top:3px;font-size:.8rem;line-height:1.35}
  body.auth-page .acct-card .sub.sub--spam{margin-top:-8px;margin-bottom:12px}
  body.auth-page .field{margin-bottom:10px}
  body.auth-page .acct-card .btn,body.auth-page .btn-google{min-height:44px}
  body.auth-page .field input[type=text],body.auth-page .field input[type=email],body.auth-page .field input[type=password],body.auth-page .field input[type=tel]{min-height:42px;padding-block:8px}
}

/* No hero behind the bar on these pages: give it the solid dark tone it has once scrolled, so it reads the same as everywhere else. */
body.auth-page .nav{background:rgba(18,40,28,.92);box-shadow:0 10px 34px rgba(9,26,17,.22)}

/* Shop staff (2026-10): the invitation page (/staff-invite) */
.invite-access-h { margin: 14px 0 6px; font-weight: 700; }
.invite-access { margin: 0 0 14px; padding-inline-start: 20px; line-height: 1.7; }
.invite-access li strong { font-weight: 800; }
#invite-card .btn + .btn { margin-inline-start: 8px; } /* only the invitation page puts two buttons side by side; on /account they are a full-width stack */
/* The "Shop dashboard" button sits in a .below row, whose link colour (forest green) made its text the same colour as the button: white text on it. */
.acct-card .below .btn{color:#fff;text-decoration:none;margin-top:0}
.acct-card .below .btn--forest:hover{color:#fff}
.acct-card .small { font-size: 13px; opacity: .8; }