/* ════════ Zafa — design system ════════ */
:root{
  --rose:#F6B0C6;          /* primary / CTA */
  --rose-200:#FBE0E9;
  --rose-100:#FCEFF3;
  --rose-soft:#FCF4F7;
  --rose-deep:#C8607E;     /* rose text on light */
  --rose-press:#EE96B2;
  --ink:#1B1418;           /* near-black, warm */
  --ink-2:#5A4F54;         /* secondary text */
  --muted:#938990;         /* tertiary */
  --line:#EAE1DE;          /* hairlines */
  --line-2:#EDE8E1;
  --stroke:#EDE8E1;        /* card / tile stroke */
  --bg:#FFFFFF;            /* app background — white */
  --card:#FFFFFF;
  --gold:#C8A24A;          /* elite + rating stars */
  --ink-soft:#2A2227;

  --r-lg:28px; --r-md:22px; --r-sm:14px; --r-pill:999px; --r-arch:150px;
  --sh-sm:0 2px 8px rgba(27,20,24,.05);
  --sh:0 8px 28px rgba(27,20,24,.08);
  --sh-lg:0 18px 50px rgba(27,20,24,.14);

  --serif:'Playfair Display', Georgia, serif;
  --sans:'Montserrat', -apple-system, system-ui, sans-serif;
}
[dir="rtl"]{ --serif:'Amiri','Playfair Display',serif; --sans:'Tajawal','Montserrat',sans-serif; }

*{ box-sizing:border-box; }
/* native form controls don't inherit font-family — force the app sans (Montserrat) everywhere */
.z-app, .z-app input, .z-app button, .z-app textarea, .z-app select, .z-app optgroup, .z-app option{ font-family:var(--sans); }
.z-app{ font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; }
.z-app ::selection{ background:var(--rose-200); }

/* scroll area inside the phone */
.z-scroll{ height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.z-scroll::-webkit-scrollbar{ width:0; height:0; }
.no-bar::-webkit-scrollbar{ display:none; }
.no-bar{ scrollbar-width:none; }

/* type */
.serif{ font-family:var(--serif); }
.h1{ font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.12; letter-spacing:-.01em; }
.h2{ font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.15; }
.h3{ font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.2; }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-deep); }
.lbl{ font-size:13px; font-weight:600; color:var(--ink-2); }
.muted{ color:var(--muted); }
.sec{ color:var(--ink-2); }

/* buttons */
.z-btn{ font-family:var(--sans); font-weight:600; font-size:16px; border:none; border-radius:var(--r-sm);
  height:54px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease; width:100%; }
.z-btn:active{ transform:scale(.975); }
.z-btn--rose{ background:var(--rose); color:var(--ink); box-shadow:0 8px 20px rgba(246,176,198,.5); }
.z-btn--rose:hover{ background:var(--rose-press); }
.z-btn--ink{ background:var(--ink); color:#fff; }
.z-btn--ink:hover{ background:#000; }
.z-btn--outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.z-btn--ghost{ background:var(--rose-100); color:var(--rose-deep); }
.z-btn--sm{ height:42px; font-size:14px; border-radius:12px; width:auto; padding:0 16px; }
.z-btn[disabled]{ opacity:.45; pointer-events:none; }

/* chips / pills */
.z-chip{ font-family:var(--sans); font-weight:600; font-size:13.5px; border-radius:var(--r-pill);
  padding:9px 16px; white-space:nowrap; border:1.5px solid var(--line); background:#fff; color:var(--ink-2);
  cursor:pointer; transition:all .15s ease; display:inline-flex; align-items:center; gap:7px; }
.z-chip:hover{ border-color:var(--rose); }
.z-chip--on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.z-chip--rose{ background:var(--rose); color:var(--ink); border-color:var(--rose); }

/* cards — flat: solid white, stroke, no shadow */
.z-card{ background:var(--card); border-radius:var(--r-md); box-shadow:none;
  border:1px solid var(--stroke); overflow:hidden; }

/* level badges */
.z-badge{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px 3px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:4px; }
.z-badge--grey{ background:#F1EDEF; color:#7B7177; }
.z-badge--rose{ background:var(--rose-200); color:var(--rose-deep); }
.z-badge--ink{ background:var(--ink); color:#fff; }
.z-badge--gold{ background:#F1E3BE; color:#7A5E1C; }

/* inputs */
.z-input{ width:100%; height:56px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  background:#fff; padding:0 16px; font-family:var(--sans); font-size:16px; color:var(--ink);
  outline:none; transition:border-color .15s, box-shadow .15s; }
.z-input:focus{ border-color:var(--rose); box-shadow:0 0 0 4px var(--rose-100); }
.z-input::placeholder{ color:var(--muted); }

/* image slots */
image-slot{ display:block; background:var(--rose-soft); }
image-slot::part(frame){ background:#F4EFEA; }

/* divider */
.z-hr{ height:1px; background:var(--line); border:none; margin:0; }

/* sheets / overlays */
.z-overlay{ position:absolute; inset:0; background:rgba(20,14,17,.34); backdrop-filter:blur(2px);
  z-index:80; display:flex; align-items:flex-end; }
.z-sheet{ background:#fff; width:100%; border-radius:26px 26px 0 0; padding:8px 20px 28px;
  box-shadow:0 -10px 40px rgba(0,0,0,.18); animation:sheetUp .32s cubic-bezier(.2,.8,.2,1); max-height:88%; overflow-y:auto; }
.z-grab{ width:38px; height:5px; border-radius:99px; background:var(--line); margin:8px auto 14px; }

/* animations */
@keyframes sheetUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
@keyframes fadeUp{ from{ transform:translateY(12px);} to{ transform:translateY(0);} }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes pop{ 0%{ transform:scale(.4);} 60%{ transform:scale(1.08);} 100%{ transform:scale(1);} }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes shimmer{ 100%{ background-position:200% 0;} }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(246,176,198,.55);} 70%{ box-shadow:0 0 0 16px rgba(246,176,198,0);} 100%{ box-shadow:0 0 0 0 rgba(246,176,198,0);} }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
@keyframes dot{ 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-5px); opacity:1;} }

/* entrance animates TRANSFORM ONLY (never opacity) so a throttled/frozen
   engine can never trap content at an invisible start frame. */
.fade-up{ animation:fadeUp .5s ease; }
.fade-in{ animation:fadeUp .4s ease; }
@media (prefers-reduced-motion: reduce){ .fade-up,.fade-in{ animation:none; } }

.z-spin{ width:22px; height:22px; border-radius:50%; border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff; animation:spin .7s linear infinite; }
.z-spin--ink{ border-color:var(--rose-200); border-top-color:var(--rose-deep); }

.skel{ background:#F0EBE6; animation:skelPulse 1.2s infinite ease-in-out; }
@keyframes skelPulse{ 0%,100%{ opacity:1;} 50%{ opacity:.55;} }

/* tab bar */
.z-tabbar{ display:flex; justify-content:space-around; align-items:flex-end; padding:9px 8px 6px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--line); }
.z-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0;
  color:var(--muted); cursor:pointer; transition:color .15s; }
.z-tab--on{ color:var(--ink); }
.z-tab span{ font-size:10.5px; font-weight:600; letter-spacing:.01em; }

/* directional mirror for RTL */
[dir="rtl"] .flip-x{ transform:scaleX(-1); }

/* ════════ creative redesign additions ════════ */

/* floating dock nav — overlays content, hovering as a detached pill */
.z-dock-wrap{ position:absolute; inset-inline:0; bottom:0; padding:0 22px 24px; background:transparent; z-index:50; pointer-events:none; }
.z-dock{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; pointer-events:auto;
  background:#FFFFFF; border:1px solid var(--stroke);
  border-radius:var(--r-pill); padding:8px 12px 9px; box-shadow:0 18px 40px rgba(27,20,24,.22), 0 4px 14px rgba(27,20,24,.10); }

/* clearance so tab-screen content isn't hidden behind the floating dock */
.z-app.dock-on > div > div > .z-scroll{ padding-bottom:108px; }
.z-dock-item{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:4px 0; cursor:pointer; color:var(--muted); transition:color .18s; background:none; border:none; }
.z-dock-item:hover, .z-dock-item:hover span, .z-dock-item:hover svg{ color:#F6B0C6 !important; }
.z-dock-item--on, .z-dock-item--on span, .z-dock-item--on svg{ color:#F6B0C6 !important; }
.z-dock-item span{ font-size:9.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.z-dock-fab{ width:54px; height:54px; margin-top:-26px; border-radius:50%;
  background:var(--rose); display:flex; align-items:center; justify-content:center;
  color:var(--ink); border:4px solid #fff; box-shadow:0 8px 18px rgba(246,176,198,.55); position:relative; transition:background .18s; }
.z-dock-ai{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:4px 0; cursor:pointer; background:none; border:none; color:var(--muted); transition:color .18s; }
.z-dock-ai:hover, .z-dock-ai.on{ color:var(--rose); }
.z-dock-ai:hover .z-dock-fab, .z-dock-ai.on .z-dock-fab{ background:var(--rose-press); }
.z-dock-ai span{ font-size:9.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.z-dock-fab::after{ content:''; position:absolute; inset:-4px; border-radius:50%; animation:pulseRing 2.6s infinite; }

/* arch frame */
.arch{ border-radius:var(--r-arch) var(--r-arch) 22px 22px; overflow:hidden; }

/* creative search bar */
.z-searchbar{ display:flex; align-items:center; gap:10px; height:56px; padding:6px 6px 6px 18px;
  background:#fff; border-radius:var(--r-pill); border:1px solid var(--stroke);
  box-shadow:none; cursor:text; position:relative; overflow:hidden; }
.z-searchbar .ph{ flex:1; min-width:0; font-size:15px; color:var(--muted); position:relative; height:22px; overflow:hidden; }
.z-searchbar .ph b{ position:absolute; left:0; top:0; display:flex; flex-direction:column; font-weight:500; animation:rollPh 9s infinite; }
.z-searchbar .ph b i{ height:22px; line-height:22px; display:flex; align-items:center; white-space:nowrap; font-style:normal; }
.z-spark-btn{ width:44px; height:44px; border-radius:50%; flex-shrink:0; border:none; cursor:pointer;
  background:var(--rose); color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(246,176,198,.45); }
@keyframes rollPh{
  0%,26%{ transform:translateY(0); } 33%,59%{ transform:translateY(-22px); }
  66%,92%{ transform:translateY(-44px); } 100%{ transform:translateY(-66px); }
}

/* persona / option card */
.z-persona{ display:flex; align-items:center; gap:15px; padding:16px; background:#fff;
  border-radius:var(--r-md); border:1.5px solid var(--line); cursor:pointer; transition:all .18s; width:100%; text-align:start; }
.z-persona:hover{ border-color:var(--rose); transform:translateY(-1px); }
.z-persona--on{ border-color:var(--ink); box-shadow:none; }
/* hover fills the radio (no tick) */
.z-persona:not(.z-persona--on):hover .z-persona-radio{ border-color:var(--ink); }

/* segmented control */
.z-seg{ display:flex; gap:5px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:5px; }
.z-seg button{ flex:1; height:42px; border:none; border-radius:10px; cursor:pointer; background:transparent;
  font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink-2); transition:all .15s; }
.z-seg button.on{ background:var(--rose); color:var(--ink); }
.z-seg--dark button.on{ background:#000000; color:#fff; }

/* onboarding dots */
.z-dots{ display:flex; gap:7px; align-items:center; }
.z-dots i{ width:7px; height:7px; border-radius:99px; background:var(--line); transition:all .25s; }
.z-dots i.on{ width:22px; background:var(--rose); }

/* glass icon button on imagery */
.z-glass{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--ink); box-shadow:var(--sh-sm); }

/* home floral header band — full-width decorative backdrop at the top */
.home-topbg{ position:absolute; top:0; inset-inline:0; height:260px; z-index:0; pointer-events:none; user-select:none;
  background:url('assets/bg-floral.png') no-repeat; background-position:top -8px right -28px; background-size:175px auto; opacity:.55; }
[dir="rtl"] .home-topbg{ background-position:top -10px left -36px; transform:scaleX(-1); }