/* ==========================================================================
   Arab Therapy — POC flow
   Source: Figma "DraftS" / page "POC" (node 78:372)
   Mobile only — reference frame 393 x 852
   ========================================================================== */

/* ==========================================================================
   1. BRAND CONFIGURATION
   --------------------------------------------------------------------------
   Everything you will swap for real Arab Therapy assets lives in this block.
   Two ways to replace an image:
     a) Keep the path — just overwrite the file in /assets with the same name.
     b) Change the path here — it updates every screen at once.
   See README.md for the full checklist.
   ========================================================================== */

:root {
  /* ---- Brand — REPLACE THESE TWO SVG FILES (keep the same filenames), or
     repoint the paths below; every screen updates automatically. -----------
       logo:     the icon. Shown centred on the login screen, and used as the
                 browser-tab favicon (each .html links assets/logo.svg).
       wordmark: the "Arab Therapy" wordmark. Shown in the login footer and in
                 the app bar of every profile screen. ----------------------- */
  --brand-logo:     url('../assets/logo.svg');
  --brand-wordmark: url('../assets/wordmark.svg');

  /* ---- Other imagery (all placeholders) ---------------------------------- */
  --user-avatar:         url('../assets/avatar.svg');       /* salma_y's photo */
  --verify-illustration: url('../assets/verify-illustration.png');

  /* ---- Icons ------------------------------------------------------------- */
  /* NOTE: each SVG carries its own stroke colour, so recolour inside the file. */
  --icon-back:   url('../assets/icon-back.svg');
  --icon-close:  url('../assets/icon-close.svg');
  --icon-check:  url('../assets/icon-check.svg');
  --icon-more:   url('../assets/icon-more.svg');
  --icon-grid:   url('../assets/icon-grid.svg');
  --icon-tagged: url('../assets/icon-tagged.svg');

  /* ---- Brand colours ----------------------------------------------------- */
  --blue-500:   #2f89ff;   /* primary buttons (login + verify) */
  --blue-300:   #4997ff;   /* inline links on dark blue screens */
  --indigo-500: #4050f8;   /* primary buttons (profile) */
  --indigo-400: #4a5cf8;   /* primary button (modal) */
  --indigo-200: #829af4;   /* inline links on the profile */

  /* ---- Typeface ---------------------------------------------------------- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. Design tokens (from Figma — you should rarely need to touch these)
   ========================================================================== */

:root {
  /* Neutrals */
  --neutral-0:   #ffffff;
  --neutral-100: #f3f4f6;
  --neutral-250: #dae0e7;
  --neutral-550: #808080;

  /* Surfaces */
  --bg-login:      #1c2b34;
  --bg-verify:     #1c2b33;
  --bg-profile:    #0c1013;
  --surface-card:  #212327;

  /* Form fields — one shared style across login and verify */
  --field-bg:            #1c282f;
  --field-border:        #484c52;
  --field-border-focus:  var(--blue-500);

  /* Error / validation */
  --danger-500: #ff5a5f;   /* field border + icon */
  --danger-300: #ff9b9e;   /* message text */
  --danger-bg:  rgba(255, 90, 95, 0.08);

  /* Text */
  --text-strong:  #f5f7f9;
  --text-body:    #f4f6f6;
  --text-bio:     #f1f5f9;
  --text-verify:  #f2f3f6;
  --text-private: #f4f6f8;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  /* Per-page classes below override this; the fallback shows only as the
     letterbox on screens wider than the 393px frame. */
  background: #000;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  /* Pad by the device safe areas (notch, status bar, home indicator). These
     are 0 in a normal browser tab and on desktop, so nothing shifts there;
     in a fullscreen / home-screen web app they keep content clear of those
     zones while the body's own background colour bleeds behind them. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Each page paints its own colour on the body so the safe-area insets (and any
   letterbox) fill with the page colour instead of black — edge-to-edge look. */
body.theme-login   { background: var(--bg-login); }
body.theme-verify  { background: var(--bg-verify); }
body.theme-profile { background: var(--bg-profile); }

/* The 393 x 852 mobile frame */
.screen {
  position: relative;
  width: 100%;
  max-width: 393px;
  min-height: 100vh;
  /* Fill the viewport minus the safe-area padding on <body>, so the frame fits
     exactly with no rubber-band scroll on notched devices. */
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
}

a { text-decoration: none; }

button {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* ==========================================================================
   4. Image + icon primitives
   --------------------------------------------------------------------------
   Every logo/icon is a sized box painted by one of the variables above,
   so replacing artwork never means touching the HTML.
   ========================================================================== */

.img {
  display: block;
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Brand images — two swappable SVGs (see BRAND CONFIGURATION at the top).
   .brand-logo     = the icon (login screen, centred)
   .brand-wordmark = the "Arab Therapy" wordmark (login footer + profile bars)
   Both inherit `.img` (contain, centred), so any SVG shape fits its box. */
.brand-logo     { background-image: var(--brand-logo); }
.brand-wordmark { background-image: var(--brand-wordmark); }

/* Login screen — the logo alone, centred. Adjust the size here. */
.login__logo .brand-logo { width: 48px; height: 48px; }

/* Login footer — small wordmark after the word "from". */
.login__footer .brand-wordmark {
  width: 110px;
  height: 80px;
  background-position: left center;
}

/* Profile / follow app bar — wordmark on the left. */
.appbar .brand-wordmark {
  width: 200px;
  height: 80px;
  background-position: left center;
}

/* Gate (first screen) app bar — wordmark on the left. */
.gate__bar .brand-wordmark {
  width: 200px;
  height: 80px;
  background-position: left center;
}

.avatar {
  background-image: var(--user-avatar);
  background-size: cover;          /* so a real photo fills the circle */
  border-radius: 50%;
}

.icon-back   { background-image: var(--icon-back);   }
.icon-close  { background-image: var(--icon-close);  }
.icon-check  { background-image: var(--icon-check);  }
.icon-more   { background-image: var(--icon-more);   }
.icon-grid   { background-image: var(--icon-grid);   }
.icon-tagged { background-image: var(--icon-tagged); }

/* ==========================================================================
   5. Shared components
   ========================================================================== */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 12px;
  font-weight: 600;
  text-align: center;
}

.btn--primary {
  height: 51px;
  background: var(--blue-500);
  color: var(--neutral-0);
  font-size: 16px;
}

.btn--outline {
  height: 48px;
  border: 1.5px solid var(--blue-500);
  color: var(--blue-500);
  font-size: 15px;
}

.btn:disabled { cursor: default; }

/* Loading state — swaps the label for a spinner without resizing the button */
.btn__spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--neutral-0);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label   { display: none; }
.btn.is-loading .btn__spinner { display: block; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn__spinner { animation-duration: 2s; }
}

/* Text fields — shared by the login screen and the OTP screen */
.field {
  width: 100%;
  height: 52px;
  border-radius: 12px;
  padding: 0 15px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  font-family: inherit;
  /* 16px is the minimum that stops iOS Safari from zooming in on focus.
     The design is 15px, but the 1px difference is imperceptible and this is
     the standard, accessibility-safe way to avoid the focus zoom. */
  font-size: 16px;
  font-weight: 400;
  color: var(--neutral-0);
  outline: none;
}

.field::placeholder { color: var(--neutral-550); }

.field:focus { border-color: var(--field-border-focus); }

/* --------------------------------------------------------------------------
   Field error state
   --------------------------------------------------------------------------
   Markup:
     <div class="field-group">
       <input class="field" ...>
       <p class="field-error"><span class="field-error__icon"></span>Message</p>
     </div>
   JS adds .is-error on the group and aria-invalid on the input.
   -------------------------------------------------------------------------- */

.field-group { display: block; }

.field[aria-invalid="true"] {
  border-color: var(--danger-500);
  background: var(--danger-bg);
}

.field[aria-invalid="true"]:focus { border-color: var(--danger-500); }

.field-error {
  display: none;
  margin: 6px 0 0;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  color: var(--danger-300);
}

.field-group.is-error .field-error { display: flex; }

/* Small "!" badge, drawn in CSS so there is no icon file to swap */
.field-error__icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1.5px;
  border-radius: 50%;
  background: var(--danger-500);
  color: #1c282f;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.field-error__icon::before { content: "!"; }

@media (prefers-reduced-motion: no-preference) {
  .field-group.is-error .field { animation: field-shake 0.3s ease; }
}

@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ==========================================================================
   6. SCREEN — Login  (Figma 78:522)
   ========================================================================== */

.screen--login {
  background: var(--bg-login);
  display: flex;
  flex-direction: column;
  padding: 197px 24px 25px;
}

.login__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}

.login__form {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login__forgot {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-300);
  line-height: 16px;
}

.login__bottom { margin-top: auto; }

.login__footer {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  line-height: 15px;
}

.login__footer .from  { font-weight: 400; color: var(--neutral-250); }

/* ==========================================================================
   7. SCREEN — Verify code  (Figma 78:585)
   ========================================================================== */

.screen--verify {
  background: var(--bg-verify);
  padding: 18px 24px 0;
}

.verify__nav {
  height: 44px;
  display: flex;
  align-items: flex-start;
}

.verify__nav .img { width: 24px; height: 24px; }

.verify__eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-verify);
  line-height: 16px;
}

.verify__title {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-verify);
  line-height: 29px;
}

.verify__lede {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-verify);
  line-height: 22px;
}

.verify__illustration {
  margin-top: 24px;
  width: 100%;
  height: 180px;
  border-radius: 16px;
  background-image: var(--verify-illustration);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.verify__form { margin-top: 20px; }

.verify__trust {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Native checkbox drives the state; it is visually replaced by the box below */
.verify__trust-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.verify__checkbox {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: transparent;
  border: 1.5px solid var(--field-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.verify__checkbox .img { opacity: 0; transition: opacity 0.15s ease; }

.verify__trust-input:checked + .verify__checkbox {
  background: var(--blue-500);
  border-color: var(--blue-500);
}

.verify__trust-input:checked + .verify__checkbox .img { opacity: 1; }

.verify__trust-input:focus-visible + .verify__checkbox {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
}

.verify__checkbox .img { width: 14px; height: 14px; }

.verify__trust span {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-verify);
  line-height: 18px;
}

.verify__alt {
  margin: 0;
  height: 33px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.verify__alt a {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-300);
  line-height: 17px;
}

/* ==========================================================================
   8. SCREEN — Profile  (Figma 78:543)
   ========================================================================== */

.screen--profile { background: var(--bg-profile); }

.appbar {
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--neutral-250);
}

.appbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn--open {
  padding: 0 20px;
  height: 32px;
  border-radius: 8px;
  background: var(--indigo-500);
  color: var(--neutral-0);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile__content { padding: 18px 16px 0; }

.profile__header {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  min-height: 80px;   /* grows for the multi-line decorative handle */
}

.profile__header .avatar { width: 80px; height: 80px; }

.profile__info { padding-top: 9px; }

.profile__handle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 22px;
}

.profile__name {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-body);
  line-height: 17px;
}

.profile__stats {
  margin-top: 3px;
  display: flex;
  gap: 14px;
  font-size: 14px;
  line-height: 17px;
}

.profile__stats .stat  { width: 90px; }
.profile__stats .count { font-weight: 600; color: var(--text-strong); }
.profile__stats .label { font-weight: 400; color: var(--text-body); }

.profile__bio {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-bio);
  line-height: 19px;
}

.tabs {
  margin-top: 14px;
  display: flex;
}

.tab {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  border-bottom: 2px solid transparent;
}

.tab .img { width: 22px; height: 22px; }
.tab--active { border-bottom-color: var(--text-strong); }

.private {
  margin-top: 14px;
  padding-top: 102px;
  text-align: center;
}

.private__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-private);
  line-height: 24px;
}

.private__text {
  margin: 5px auto 0;
  width: 260px;
  font-size: 13px;
  font-weight: 400;
  color: var(--neutral-550);
  line-height: 19px;
}

.private__btn {
  margin: 10px auto 0;
  width: 176px;
  height: 41px;
  border-radius: 10px;
  background: var(--indigo-500);
  color: var(--neutral-0);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.private__signup {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--indigo-200);
  line-height: 17px;
}

/* Follow CTA (post-login profile) — Figma 361 x 41, indigo, 10px radius.
   Toggles to a muted "Requested" state on click (front end only). */
.btn--follow {
  display: block;
  width: 100%;
  margin-top: 27px;
  height: 41px;
  border-radius: 10px;
  background: var(--indigo-500);
  color: var(--neutral-0);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--follow.is-requested {
  background: transparent;
  border: 1.5px solid var(--field-border);
  color: var(--neutral-250);
}

/* Tabs sit flush under the Follow button on the post-login profile. */
.tabs--flush { margin-top: 0; }

/* ==========================================================================
   9. SCREEN — See full profile / login gate  (Figma 78:607)
   ========================================================================== */

.screen--gate { background: var(--bg-profile); }

/* ---- backdrop: the profile the modal sits on top of ---- */

.gate__bar {
  height: 76px;
  padding: 5px 10px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--neutral-0);
}

.gate__bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gate__open {
  padding: 0 20px;
  height: 34px;
  border-radius: 8px;
  background: var(--blue-500);
  color: var(--neutral-0);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate__profile {
  padding: 27px 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.gate__profile .avatar { width: 84px; height: 84px; }

.gate__info { padding-top: 8px; flex: 1; }

.gate__handle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-0);
  line-height: 22px;
}

.gate__name {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-250);
  line-height: 17px;
}

.gate__stats {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--neutral-250);
  line-height: 16px;
  white-space: pre;
}

.gate__more { width: 20px; height: 20px; margin-top: 8px; }

.gate__bio {
  margin: 22px 0 0;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--neutral-0);
  line-height: 19px;
}

.gate__grid {
  margin-top: 22px;
  padding: 0 20px;
  display: flex;
  gap: 8px;
}

.gate__tile {
  width: 112px;
  height: 112px;
  flex: none;
}

.gate__tile--light { background: var(--neutral-0); }

/* ---- modal ---- */

.gate__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
}

.gate__close {
  position: absolute;
  top: 26px;
  right: 19px;
  width: 22px;
  height: 22px;
}

.gate__card {
  margin: 205px auto 24px;
  width: 326px;
  max-width: calc(100% - 34px);
  background: var(--surface-card);
  border-radius: 20px;
  padding: 28px 24px 24px;
  text-align: center;
}

.gate__card .avatar { width: 84px; height: 84px; margin: 0 auto; }

.gate__card-title {
  margin: 20px 0 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-0);
  line-height: 30px;
}

.gate__card-text {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-250);
  line-height: 20px;
}

.gate__card-btn {
  margin-top: 20px;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  background: var(--indigo-400);
  color: var(--neutral-0);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate__card-signup {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--indigo-400);
  line-height: 18px;
}