/* Wasla landing — project overrides. Loaded AFTER platform.css so it wins.
   Hardcoded fallbacks (var(--x, #hex)) guarantee clear buttons even if a
   token file ever fails to load. */

/* ── Buttons: always clearly coloured ── */
.pf .pf-btn--brand {
    background: var(--brand, #f97316);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(249, 115, 22, .35);
}
.pf .pf-btn--brand:hover { background: var(--brand-dark, #ea6c10); color: #fff; }
.pf .pf-btn--light { background: #fff; color: var(--slate-900, #0f172a); border-color: #fff; }
.pf .pf-btn--light:hover { background: var(--slate-100, #f1f5f9); color: var(--slate-900, #0f172a); }
.pf .pf-btn--ghost { color: var(--text-strong, #111827); border-color: var(--border-strong, #d1d5db); }
.pf .pf-btn--ghost:hover { background: var(--surface-sunken, #f3f4f6); }

/* ── Nav auth actions: make "Sign in" clearly visible ── */
.pf .pf-nav__signin {
    color: var(--text-strong, #111827);
    font-weight: 600;
    border: 1.5px solid var(--border-strong, #d1d5db);
    border-radius: 8px;
    padding: .45rem .9rem;
}
.pf .pf-nav__signin:hover { color: var(--brand, #f97316); border-color: var(--brand, #f97316); }
.pf .pf-nav__right .pf-btn--brand { padding: .55rem 1.1rem; }

/* ── Auth aside: lift the Arabic wordmark on the dark panel ── */
.pf .auth__aside .pf-brand__ar { color: var(--slate-300, #cbd5e1); }

/* ── Modern segmented language toggle (EN / عربي) ── */
.pf .lang-toggle {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--surface-sunken, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px; padding: 3px;
}
.pf .lang-toggle__opt {
    font-family: var(--font-ui, sans-serif); font-size: .8rem; font-weight: 700;
    min-width: 38px; text-align: center; padding: .32rem .7rem; line-height: 1;
    border-radius: 999px; color: var(--text-muted, #6b7280);
    transition: background var(--transition-fast, .14s ease), color var(--transition-fast, .14s ease);
}
.pf .lang-toggle__opt:hover { color: var(--text-strong, #111827); }
.pf .lang-toggle__opt.is-active {
    background: var(--brand, #f97316); color: #fff;
    box-shadow: 0 2px 6px rgba(249, 115, 22, .35);
}
.pf .lang-toggle__opt.is-active:hover { color: #fff; }
/* dark variant — footer */
.pf .lang-toggle--dark { background: rgba(255, 255, 255, .06); border-color: var(--slate-700, #334155); }
.pf .lang-toggle--dark .lang-toggle__opt { color: var(--slate-400, #94a3b8); }
.pf .lang-toggle--dark .lang-toggle__opt:hover { color: #fff; }
.pf .lang-toggle--dark .lang-toggle__opt.is-active { background: var(--brand, #f97316); color: #fff; }

/* ── Social proof heading (decorated with side rules) ── */
.pf .social {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding-top: 48px;
}
.pf .social__rule { height: 1px; width: 36px; background: var(--border-strong, #d1d5db); }

/* ── Stats: elevated panel with per-stat icons + dividers ── */
.pf .stats {
    margin-top: 26px;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: linear-gradient(180deg, #fff, var(--surface-page, #f9fafb));
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-2xl, 16px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    padding: 22px 8px;
}
.pf .stats__lbl { text-align: center; padding: 18px 10px; position: relative; }
.pf .stats__ic {
    width: 44px; height: 44px; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px; font-size: 1.2rem;
    background: var(--brand-light, #fff7ed); color: var(--brand, #f97316);
}
.pf .stats__n {
    font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--text-strong, #111827); line-height: 1.1;
}
.pf .stats__t { font-size: .86rem; color: var(--text-muted, #6b7280); margin-top: 5px; }
/* dividers — mobile (2-col): vertical between columns + horizontal under first row */
.pf .stats__lbl::after {
    content: ''; position: absolute; inset-inline-end: 0; top: 18px; bottom: 18px;
    width: 1px; background: var(--border, #e5e7eb);
}
.pf .stats__lbl:nth-child(even)::after { display: none; }
.pf .stats__lbl:nth-child(-n+2)::before {
    content: ''; position: absolute; inset-inline: 10px; bottom: 0;
    height: 1px; background: var(--border, #e5e7eb);
}
/* desktop (4-col single row): centered vertical dividers, none after the last */
@media (min-width: 700px) {
    .pf .stats { grid-template-columns: repeat(4, 1fr); padding: 26px 8px; }
    .pf .stats__lbl:nth-child(-n+2)::before { display: none; }
    .pf .stats__lbl::after { top: 50%; bottom: auto; transform: translateY(-50%); height: 52px; }
    .pf .stats__lbl:nth-child(even)::after { display: block; }
    .pf .stats__lbl:last-child::after { display: none; }
}

/* ── Mock store cards: real (dummy) product images ── */
.pf .mock__ph { padding: 0; overflow: hidden; height: 64px; }
.pf .mock__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }