/* Shared landing-page CSS. Includes:
   - phone bezel + screens
   - app-store / google-play download badges
   - common landing utility classes (nav, button, etc.)
   Imported AFTER colors_and_type.css. */

* { box-sizing: border-box; }

.landing {
  font-family: "Expo Arabic", system-ui, sans-serif;
  color: var(--wine-900);
  background: #fff;
  overflow: hidden;
}
.landing.dir-ltr { direction: ltr; }
.landing.dir-rtl { direction: rtl; }

/* ─── Nav bar ─── */
.lnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 56px;
  position: relative; z-index: 10;
}
.lnav .brand {
  font: 300 38px/1 "Expo Arabic";
  color: var(--pink-500);
}
.lnav .actions {
  display: flex; align-items: center; gap: 16px;
}
.lnav .link {
  font: 500 15px/1 "Expo Arabic";
  color: var(--wine-900);
  text-decoration: none;
  cursor: pointer;
}
.lnav .lang-toggle {
  display: flex; padding: 4px;
  background: rgba(77,8,37,0.05);
  border-radius: 999px;
  font-family: "Expo Arabic";
}
.lnav .lang-toggle button {
  border: 0; background: transparent;
  padding: 6px 14px; border-radius: 999px;
  font: 700 13px/1 "Expo Arabic";
  color: var(--neutral-400); cursor: pointer;
  letter-spacing: 0.2px;
}
.lnav .lang-toggle button.on {
  background: #fff;
  color: var(--wine-900);
  box-shadow: 0 2px 8px rgba(77,8,37,0.08);
}
.lnav .role-toggle {
  display: flex; padding: 5px;
  background: rgba(232,66,135,0.08);
  border-radius: 999px;
  font-family: "Expo Arabic";
}
.lnav .role-toggle button {
  border: 0; background: transparent;
  padding: 8px 18px; border-radius: 999px;
  font: 700 14px/1 "Expo Arabic";
  color: var(--pink-500); cursor: pointer;
}
.lnav .role-toggle button.on {
  background: var(--pink-500); color: #fff;
  box-shadow: 0 0 14px 0 rgba(232,66,135,0.4);
}

/* ─── Buttons ─── */
.l-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 32px;
  border: 0; border-radius: 16px;
  background: var(--pink-500);
  color: #fff;
  font: 700 18px/1 "Expo Arabic";
  box-shadow: 0 0 24px 0 rgba(232,66,135,0.32);
  cursor: pointer;
  text-decoration: none;
}
.l-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 60px; padding: 0 28px;
  border: 1.5px solid var(--wine-900);
  border-radius: 16px;
  background: transparent;
  color: var(--wine-900);
  font: 700 17px/1 "Expo Arabic";
  cursor: pointer;
  text-decoration: none;
}

/* ─── App-store / Google-play badge ─── */
.store-badge {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  line-height: 0;
}
.store-badge img {
  /* height/width controlled by JS crop logic in StoreBadge component */
  display: block;
}
.store-badge .glyph { display: none; }
.store-badge .stack { display: none; }
.store-badge.light {
  background: transparent;
}

/* ─── Footer ─── */
.lfoot {
  background: var(--wine-900);
  color: #fff;
  padding: 64px 56px 36px;
}
.lfoot .grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.lfoot .brand { font: 300 48px/1 "Expo Arabic"; color: var(--pink-500); }
.lfoot .tagline { font: 400 16px/1.5 "Expo Arabic"; color: rgba(255,255,255,0.75); margin: 12px 0 0; max-width: 260px; }
.lfoot h4 { font: 700 14px/1 "Expo Arabic"; color: #fff; margin: 0 0 18px; }
.lfoot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lfoot li { font: 400 14px/1.4 "Expo Arabic"; color: rgba(255,255,255,0.78); cursor: pointer; }
.lfoot .end {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; align-items: center;
  font: 400 13px/1 "Expo Arabic"; color: rgba(255,255,255,0.55);
}

/* ─── Phone mockup (shared) ─── */
.phone-mockup {
  width: 320px;
  height: 660px;
  border-radius: 48px;
  background: #4D0825;
  padding: 0;
  box-shadow:
    0 60px 120px -40px rgba(77,8,37,0.55),
    0 30px 60px -20px rgba(232,66,135,0.35);
  position: relative;
  flex-shrink: 0;
}
/* notch removed — screenshots include status bar */
.phone-mockup .scrn {
  width: 100%; height: 100%;
  border-radius: 38px;
  background: #fff;
  overflow: hidden;
  position: relative;
  direction: rtl;
  font-family: "Expo Arabic";
  color: var(--wine-900);
}
.phone-mockup .status {
  height: 44px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  font: 700 14px/1 "Expo Arabic"; color: var(--wine-900);
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
}
.phone-mockup .status .ind { display: flex; gap: 4px; align-items: center; }
.phone-mockup .status .ind span { width: 4px; border-radius: 1px; background: var(--wine-900); }
.phone-mockup.dark-status .status, .phone-mockup.dark-status .status .ind span { color: #fff; background: #fff; }
.phone-mockup.dark-status .status { color: #fff; }
.phone-mockup.dark-status .status .ind span { background: #fff; }

/* phone screen — client home */
.scr-hero {
  background: var(--pink-500);
  padding: 60px 16px 24px;
  margin: 0 -2px;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 0 80px 0 rgba(232,66,135,0.5);
}
.scr-hero .top { display: flex; justify-content: space-between; align-items: center; }
.scr-hero .top .chip {
  width: 36px; height: 36px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 12px 0 rgba(232,66,135,0.5);
  display: flex; align-items: center; justify-content: center;
}
.scr-hero .top .chip svg { width: 18px; height: 18px; color: var(--neutral-300); }
.scr-hero .top .greet { text-align: center; color: #fff; }
.scr-hero .top .greet .name { font: 700 16px/1 "Expo Arabic"; }
.scr-hero .top .greet .sub { font: 500 12px/1 "Expo Arabic"; color: rgba(255,255,255,0.78); margin-top: 4px; }
.scr-hero .search {
  margin-top: 18px; background: #fff;
  height: 44px; border-radius: 12px;
  display: flex; align-items: center; padding: 0 16px; gap: 10px;
  font: 400 13px/1 "Expo Arabic"; color: var(--neutral-300);
  justify-content: flex-end; direction: rtl;
  box-shadow: 0 0 18px 0 rgba(232,66,135,0.3);
}
.scr-hero .search svg { width: 16px; height: 16px; color: var(--neutral-300); }
.scr-body {
  padding: 22px 14px;
  display: flex; flex-direction: column; gap: 20px;
}
.scr-cats { display: flex; gap: 10px; }
.scr-cat {
  flex: 1; height: 90px; border-radius: 16px;
  background: linear-gradient(180deg, #F3347F 0%, #E84287 100%);
  box-shadow: 0 0 10px 0 rgba(232,66,135,0.25);
  position: relative; overflow: hidden;
  padding: 12px;
  font: 700 13px/1 "Expo Arabic"; color: #fff; text-align: center;
}
.scr-cat img {
  position: absolute; bottom: -10px; right: -8px;
  width: 70px; height: auto;
}
.scr-section-title {
  display: flex; justify-content: space-between; align-items: center;
}
.scr-section-title .t { font: 700 14px/1 "Expo Arabic"; color: var(--wine-900); }
.scr-section-title .a { font: 700 11px/1 "Expo Arabic"; color: var(--pink-500); }
.scr-booking {
  background: #fff; border-radius: 16px;
  border: 1.5px solid var(--pink-500);
  box-shadow: 0 0 10px 0 rgba(232,66,135,0.2);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.scr-booking .row { display: flex; justify-content: space-between; align-items: center; }
.scr-booking .pill {
  font: 700 10px/1 "Expo Arabic";
  background: #E7F9EE; color: var(--success-500);
  padding: 4px 8px; border-radius: 999px;
  display: inline-flex; gap: 4px; align-items: center;
}
.scr-booking .pill .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--success-500); }
.scr-booking .time { font: 500 11px/1 "Expo Arabic"; color: var(--neutral-300); display: flex; gap: 6px; }
.scr-booking .time .day { color: var(--pink-500); font-weight: 700; }
.scr-booking .name { font: 700 14px/1 "Expo Arabic"; color: var(--pink-500); text-align: right; }
.scr-booking .svc { font: 500 11px/1 "Expo Arabic"; color: var(--pink-500); display: flex; justify-content: flex-end; gap: 4px; align-items: center; }
.scr-booking .svc svg { width: 12px; height: 12px; }

.scr-artist-strip { display: flex; gap: 8px; overflow: hidden; }
.scr-artist-card {
  width: 130px; flex-shrink: 0;
  background: #fff; border-radius: 14px;
  border: 1px solid rgba(213,199,205,0.4);
  padding: 4px 4px 8px;
  box-shadow: 0 4px 16px -8px rgba(77,8,37,0.15);
}
.scr-artist-card .ph {
  height: 90px; border-radius: 12px;
  background-size: cover; background-position: center;
}
.scr-artist-card .lbl { padding: 6px 6px 0; }
.scr-artist-card .lbl .nm { font: 700 11px/1 "Expo Arabic"; color: var(--wine-900); text-align: right; }
.scr-artist-card .lbl .rt {
  display: flex; justify-content: space-between; align-items: center; margin-top: 4px;
  font: 700 10px/1 "Expo Arabic"; color: var(--wine-900);
}
.scr-artist-card .lbl .rt .star { color: var(--warn-500); }

/* artist KPI strip */
.scr-kpi-row {
  display: flex; gap: 6px; margin-top: 16px;
}
.scr-kpi {
  flex: 1; background: #fff; border-radius: 14px;
  box-shadow: 0 4px 16px -6px rgba(77,8,37,0.15);
  padding: 8px 6px; text-align: center;
}
.scr-kpi .l { font: 500 9px/1 "Expo Arabic"; color: var(--wine-900); }
.scr-kpi .v { font: 700 16px/1 "Expo Arabic"; color: var(--pink-500); margin-top: 4px; }
.scr-kpi .v.green { color: var(--success-500); }

/* English versions strip out RTL on the phone */
.scr-en .scr-section-title .t, .scr-en .scr-booking .name { text-align: left; }
.scr-en .search { justify-content: flex-start; direction: ltr; }
.scr-en .scr-booking .svc { justify-content: flex-start; }
.scr-en .scr-booking .name { text-align: left; }
.scr-en { direction: ltr !important; }
.scr-en .scr-kpi .l, .scr-en .scr-kpi .v { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }