/* ------------------------------------------------------------------
 * «التسجيل مجاني لفترة محدودة» and the honest product badges
 * (App\Support\EarlyAccess, App\Support\ProductFomo). Loaded by the
 * storefront layout, because the header's button and the product card
 * render on many pages and the header partial carries no styles of its own.
 *
 * Every rule is qualified with `body`: the storefront's Tailwind bundle loads
 * after this file and its preflight zeroes headings and button backgrounds.
 * ------------------------------------------------------------------ */

/* ---------- the offer card (register, /account-free) ---------- */
body .fomo-offer {
    position: relative; overflow: hidden;
    margin: 0 0 16px; padding: 18px 18px 16px;
    border: 1px solid var(--brand); border-radius: var(--r-lg);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(12, 210, 115, .16) 0%, rgba(12, 210, 115, 0) 60%),
        linear-gradient(180deg, var(--brand-soft) 0%, var(--surface) 100%);
    box-shadow: var(--shadow-sm);
    text-align: start;
}
body .fomo-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 99px;
    background: var(--ink); color: #fff;
    font-size: var(--fs-caption); font-weight: var(--w-semi); line-height: 1.6;
}
body .fomo-tag .icon { width: 14px; height: 14px; color: var(--brand); }
body .fomo-title { margin: 10px 0 0; font-size: 21px; font-weight: var(--w-bold); line-height: 1.45; color: var(--ink); letter-spacing: -.01em; }

/* the struck future price: plain text in an <s>, never inside a <bdi> (ui.css makes every
   bdi an inline-block, and a line-through does not reach into an inline-block child) */
body .fomo-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; }
body .fomo-was {
    font-size: 19px; font-weight: var(--w-bold); color: var(--muted-2);
    text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--danger);
    unicode-bidi: isolate;
}
body .fomo-now { font-size: 30px; font-weight: var(--w-bold); color: var(--brand-900); letter-spacing: -.02em; line-height: 1.2; }

body .fomo-promise {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 12px 0 0; padding: 10px 12px;
    border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--brand-700);
    font-size: var(--fs-small); line-height: 1.8; color: var(--ink);
}
body .fomo-promise .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--brand-700); }
body .fomo-promise b { color: var(--brand-900); }

/* the real countdown: only when the owner set a last day */
body .fomo-count { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
body .fomo-count-cell {
    display: grid; justify-items: center; min-width: 58px; padding: 6px 8px;
    border-radius: var(--r-md); background: var(--ink); color: #fff;
}
body .fomo-count-cell b { font-size: 22px; font-weight: var(--w-bold); line-height: 1.2; font-variant-numeric: tabular-nums; }
body .fomo-count-cell span { font-size: 11px; color: rgba(255, 255, 255, .78); line-height: 1.4; }
body .fomo-count-end { margin: 0; font-size: var(--fs-caption); color: var(--muted); line-height: 1.7; }
body .fomo-count-end strong { color: var(--ink); font-weight: var(--w-semi); }

/* the real cap: early members so far of the seats set */
body .fomo-cap { margin: 14px 0 0; }
body .fomo-bar { height: 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
body .fomo-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-700), var(--brand)); }
body .fomo-cap p { margin: 6px 0 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--muted); }
body .fomo-cap p strong { color: var(--ink); font-weight: var(--w-semi); }

/* «انضم X مسوّق الشهر ده»: only from real sign-ups, only from the floor up */
body .fomo-proof { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: var(--fs-small); color: var(--ink-2); }
body .fomo-proof .icon { width: 18px; height: 18px; color: var(--brand-700); }
body .fomo-proof b { font-weight: var(--w-bold); color: var(--ink); }

body .fomo-cta { width: 100%; margin-top: 14px; background-color: var(--ink); border-color: var(--ink); color: #fff; }
body .fomo-cta:hover { background-color: var(--brand-900); border-color: var(--brand-900); color: #fff; }

/* ---------- the home hero's short version ---------- */
body .fomo-offer.is-hero { margin: 18px 0 0; padding: 14px 16px; max-width: 560px; }
body .fomo-offer.is-hero .fomo-title { margin-top: 8px; font-size: 18px; }
body .fomo-offer.is-hero .fomo-now { font-size: 24px; }
body .fomo-offer.is-hero .fomo-promise { margin-top: 10px; }
body .fomo-offer.is-hero .fomo-cta { width: auto; }

/* ---------- the header's button ---------- */
body .fomo-h-btn { gap: 6px; }
body .fomo-h-btn .icon { width: 14px; height: 14px; color: var(--brand); }
/* a phone's bar has the logo in its middle: «سجّل» and the flame, the offer itself is on the page */
@media (max-width: 480px) { body .fomo-h-more { display: none; } }

/* ---------- «عضو مؤسس» ---------- */
body .fomo-member {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    margin: 10px 0 0; padding: 6px 6px 6px 12px;
    border-radius: 14px; border: 1px solid var(--brand); background: var(--brand-soft);
    font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.6;
}
body .fomo-member-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 99px;
    background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); color: #fff;
    font-weight: var(--w-semi);
}
body .fomo-member-pill .icon { width: 14px; height: 14px; color: #FFE08A; }

/* ---------- product badges (cards and the product page) ---------- */
/* on a card: stacked in the photo's top corner, across from the quick view's eye. Along the
   bottom edge two of them ran into each other and over «بدون صورة» on a phone's card */
body .pcard-media .fomo-badges, body .fomo-badges.is-card {
    position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2;
    max-width: calc(100% - 62px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none;
}
body .fomo-badges.is-card .fomo-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* a phone's card moves the eye to the photo's bottom corner (Product_Card), so the badges
   take the top edge whole */
@supports (top: 1cqw) {
    @media (max-width: 600px) {
        body .pcard .fomo-badges.is-card { max-width: calc(100% - 16px); }
    }
}
/* no photo: «بدون صورة» goes to the bottom, out of the badges' way */
body .pcard-media.is-empty.has-badges .pcard-media-empty { align-content: end; padding-bottom: 10px; }
body .fomo-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 99px;
    font-size: 11.5px; font-weight: var(--w-semi); line-height: 1.6; white-space: nowrap;
    background: rgba(255, 255, 255, .94); color: var(--ink); border: 1px solid var(--line-strong);
    box-shadow: 0 4px 12px rgba(7, 23, 16, .08);
}
body .fomo-badge .icon { width: 13px; height: 13px; }
body .fomo-badge.is-trend { background: var(--ink); color: #fff; border-color: var(--ink); }
body .fomo-badge.is-trend .icon { color: #FFB547; }
body .fomo-badge.is-sold .icon { color: var(--brand-700); }
body .fomo-badge.is-low { background: #FFF4E5; color: #8A4B00; border-color: #F3D2A2; }
body .fomo-badge.is-low .icon { color: #C96A00; }
body .fomo-short { display: none; }
body .fomo-badges.is-inline { display: flex; position: static; flex-direction: row; flex-wrap: wrap; margin: 10px 0 0; pointer-events: auto; }
body .fomo-badges.is-inline .fomo-badge { font-size: var(--fs-caption); padding: 4px 11px; }

@media (max-width: 600px) {
    body .fomo-offer { padding: 16px 14px 14px; }
    body .fomo-title { font-size: 19px; }
    body .fomo-now { font-size: 26px; }
    body .fomo-offer.is-hero .fomo-cta { width: 100%; }
    body .fomo-badge { font-size: 11px; padding: 2px 8px; }
    /* a phone's card is half the screen: the short wording («اتباع 9 الأسبوع ده») */
    body .fomo-badges.is-card .fomo-long { display: none; }
    body .fomo-badges.is-card .fomo-short { display: inline; }
}