/* ---------------------------------------------------------------------------
   Fatoura - public landing page.

   Self-contained: it does not load the app's stylesheet, because the app CSS is
   built for a signed-in shell with a sidebar and does not need shipping to
   visitors. The palette and the radii are copied from app.css deliberately so
   the sign-in page a visitor clicks through to is recognisably the same product.

   Everything directional uses logical properties (inline-start/end, margin-inline)
   so the Arabic RTL rendering needs no overrides of its own.
--------------------------------------------------------------------------- */

:root {
    --brand:      #0f9d63;
    --brand-2:    #12b981;
    --brand-glow: rgba(18, 185, 129, .30);

    --ink-on-dark:       #eef5f2;
    --ink-on-dark-soft:  rgba(238, 245, 242, .72);
    --ink-on-dark-faint: rgba(238, 245, 242, .48);

    --glass:    rgba(255, 255, 255, .07);
    --glass-2:  rgba(255, 255, 255, .11);
    --edge:     rgba(255, 255, 255, .14);
    --blur:     saturate(150%) blur(16px);

    --r:     14px;
    --r-lg:  20px;
    --r-xl:  26px;

    --shell: 1080px;
}

* { box-sizing: border-box; }

.lp-body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink-on-dark);
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;

    /* Same wash as the sign-in screen. Fixed attachment keeps the glow put
       while the page scrolls, which is what makes the glass panels read. */
    background-color: #0b1220;
    background-image:
        radial-gradient(760px 560px at 14% 6%,  rgba(18, 185, 129, .30), transparent 62%),
        radial-gradient(660px 520px at 88% 24%, rgba(59, 130, 246, .24), transparent 60%),
        radial-gradient(720px 560px at 60% 98%, rgba(168, 85, 247, .14), transparent 62%),
        linear-gradient(150deg, #0b1220 0%, #10352a 55%, #0d2a3a 100%);
    background-attachment: fixed;
}

img { max-width: 100%; }

/* ------------------------------------------------------------------- nav --- */

.lp-nav {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
}

.lp-mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(140deg, var(--brand-2), var(--brand));
    box-shadow: 0 8px 24px var(--brand-glow);
    flex: 0 0 auto;
}

.lp-brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

.lp-nav-right { display: inline-flex; align-items: center; gap: 18px; }

.lp-locale a {
    color: var(--ink-on-dark-faint);
    text-decoration: none;
    font-size: 13px;
    margin-inline: 6px;
}
.lp-locale a.is-active,
.lp-locale a:hover { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------- buttons --- */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
    white-space: nowrap;
}
.lp-btn i { font-size: 15px; }

.lp-btn-solid {
    color: #04231a;
    background: linear-gradient(140deg, #3ddca4, var(--brand-2));
    box-shadow: 0 10px 30px var(--brand-glow);
}
.lp-btn-solid:hover,
.lp-btn-solid:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 40px var(--brand-glow); }

.lp-btn-ghost {
    color: var(--ink-on-dark);
    background: var(--glass);
    border-color: var(--edge);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}
.lp-btn-ghost:hover,
.lp-btn-ghost:focus-visible { background: var(--glass-2); }

.lp-btn:focus-visible { outline: 2px solid #7ff0c4; outline-offset: 3px; }

/* ------------------------------------------------------------------ hero --- */

.lp-hero {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 56px 24px 12px;
    text-align: center;
}

.lp-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6ee7b7;
}

.lp-title {
    margin: 0 auto 18px;
    max-width: 17ch;
    font-size: clamp(34px, 6vw, 58px);
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: -.03em;
}

.lp-lead {
    margin: 0 auto;
    max-width: 58ch;
    font-size: clamp(15px, 1.7vw, 18px);
    color: var(--ink-on-dark-soft);
}

.lp-cta {
    margin: 30px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lp-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.lp-cta .lp-btn-solid { padding: 14px 30px; font-size: 15px; }
.lp-cta .lp-btn-ghost { padding: 14px 26px; font-size: 15px; }
.lp-cta-note { font-size: 13px; color: var(--ink-on-dark-faint); }

/* ----------------------------------------------------------------- glass --- */

.lp-glass {
    background: var(--glass);
    border: 1px solid var(--edge);
    border-radius: var(--r-xl);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

/* ------------------------------------------------- the suggested till ------ */

.lp-mock {
    margin: 54px auto 0;
    max-width: 560px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(4, 12, 24, .5);
}

.lp-mock-bar {
    display: flex;
    gap: 7px;
    padding: 13px 18px;
    border-block-end: 1px solid var(--edge);
    background: rgba(255, 255, 255, .04);
}
.lp-mock-bar span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.lp-mock-bar span:first-child { background: rgba(61, 220, 164, .55); }

.lp-mock-body { padding: 22px 20px 24px; }

.lp-mock-lines { display: grid; gap: 13px; }

.lp-mock-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.lp-mock-line em,
.lp-mock-line b {
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    display: block;
}
.lp-mock-line b { background: rgba(255, 255, 255, .26); }

.lp-mock-total {
    margin-block-start: 22px;
    padding-block-start: 18px;
    border-block-start: 1px dashed var(--edge);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lp-mock-total-label {
    width: 88px; height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}
.lp-mock-total-value {
    width: 124px; height: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(61, 220, 164, .85), rgba(18, 185, 129, .5));
}

/* -------------------------------------------------------------- sections --- */

.lp-section {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 72px 24px 0;
}

.lp-h2 {
    margin: 0 0 30px;
    text-align: center;
    font-size: clamp(23px, 3vw, 31px);
    font-weight: 720;
    letter-spacing: -.02em;
}

.lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 18px;
}

.lp-card { padding: 26px 24px; }

.lp-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: #6ee7b7;
    background: rgba(18, 185, 129, .14);
    border: 1px solid rgba(110, 231, 183, .22);
    margin-block-end: 15px;
}

.lp-card h3 {
    margin: 0 0 7px;
    font-size: 16px;
    font-weight: 680;
    letter-spacing: -.01em;
}
.lp-card p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-on-dark-soft);
}

/* ------------------------------------------------------------------- faq --- */

.lp-faq {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin-inline: auto;
}

.lp-faq-item { padding: 0; overflow: hidden; }

.lp-faq-item summary {
    padding: 20px 22px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 640;
    letter-spacing: -.01em;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
/* Safari draws its own marker unless this is cleared too. */
.lp-faq-item summary::-webkit-details-marker { display: none; }

.lp-faq-item summary::after {
    content: '\f4fe';                  /* bootstrap-icons plus */
    font-family: 'bootstrap-icons';
    font-weight: 400;
    font-size: 15px;
    color: #6ee7b7;
    flex: 0 0 auto;
    transition: transform .18s ease;
}
.lp-faq-item[open] summary::after { transform: rotate(45deg); }

.lp-faq-item summary:hover { background: rgba(255, 255, 255, .04); }
.lp-faq-item summary:focus-visible { outline: 2px solid #7ff0c4; outline-offset: -3px; }

.lp-faq-item p {
    margin: 0;
    padding: 0 22px 21px;
    font-size: 14px;
    color: var(--ink-on-dark-soft);
}

/* --------------------------------------------------------------- contact --- */

/* Latin text - an address, a dialling code - sitting inside an Arabic page.
   Isolate it so the bidirectional algorithm treats it as one neutral run and
   leaves its internal order alone; without this a number renders reversed. */
.lp-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.lp-section-lead {
    margin: -18px auto 30px;
    max-width: 56ch;
    text-align: center;
    color: var(--ink-on-dark-soft);
}

.lp-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 18px;
}

.lp-contact-card {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, background-color .16s ease;
}
.lp-contact-card:hover,
.lp-contact-card:focus-visible {
    transform: translateY(-2px);
    background: var(--glass-2);
}
.lp-contact-card:focus-visible { outline: 2px solid #7ff0c4; outline-offset: 3px; }

.lp-contact-label {
    font-size: 13px;
    color: var(--ink-on-dark-faint);
    margin-block-end: 4px;
}

.lp-contact-value {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
    /* An address is long and must not push the card wider than its column. */
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- closing --- */

.lp-closing { padding-block-end: 8px; }

.lp-closing-card {
    padding: 44px 32px;
    text-align: center;
}
.lp-closing-card h2 {
    margin: 0 0 12px;
    font-size: clamp(22px, 3vw, 29px);
    font-weight: 730;
    letter-spacing: -.02em;
}
.lp-closing-card p {
    margin: 0 auto 26px;
    max-width: 52ch;
    color: var(--ink-on-dark-soft);
}

/* ---------------------------------------------------------------- footer --- */

.lp-foot {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-on-dark-faint);
}
.lp-foot-domain { font-weight: 600; color: var(--ink-on-dark-soft); }

.lp-foot-contact {
    display: inline-flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.lp-foot-contact a {
    color: var(--ink-on-dark-soft);
    text-decoration: none;
}
.lp-foot-contact a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------- floating WhatsApp --- */

/* Deliberately pinned to the physical right in both languages rather than the
   inline end: this widget sits in the same corner on every site a shopkeeper
   has ever used, and moving it in Arabic would only make it harder to find.
   The footer gets extra bottom padding so the button never covers the last line. */
.lp-wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 50;

    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;

    font-size: 28px;
    color: #fff;
    text-decoration: none;
    background: #25d366;
    box-shadow: 0 10px 28px rgba(37, 211, 102, .42), 0 2px 8px rgba(4, 12, 24, .3);
    transition: transform .16s ease, box-shadow .16s ease;
}
.lp-wa:hover,
.lp-wa:focus-visible {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 16px 36px rgba(37, 211, 102, .5), 0 2px 8px rgba(4, 12, 24, .3);
}
.lp-wa:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* A quiet pulse, once the page has settled, to catch the eye without nagging. */
.lp-wa::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .6);
    animation: lp-wa-pulse 2.6s ease-out infinite;
}

@keyframes lp-wa-pulse {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* ----------------------------------------------------------------- small --- */

@media (max-width: 560px) {
    .lp-nav { padding-block: 16px; }
    .lp-hero { padding-block-start: 34px; }
    .lp-section { padding-block-start: 54px; }
    .lp-closing-card { padding: 34px 22px; }
    .lp-foot { justify-content: center; text-align: center; }

    /* Keep clear of the floating button in the corner. */
    .lp-foot { padding-block-end: 92px; }
    .lp-wa { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn,
    .lp-contact-card,
    .lp-wa { transition: none; }
    .lp-btn-solid:hover,
    .lp-contact-card:hover,
    .lp-wa:hover { transform: none; }
    .lp-wa::after { animation: none; }
}