/* MasarFX UX v3 — public site, sign-in pages and plans. Display only. */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

:root { --mfx-fab-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }

/* ---------- one help button ---------- */
.mfx-help-fab {
    position: fixed;
    left: 16px;
    bottom: var(--mfx-fab-bottom);
    z-index: 99995;
    height: 48px;
    padding: 0 16px 0 14px;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(0, 231, 160, .4);
    border-radius: 999px;
    color: #03231a;
    font: 900 13px/1 'Cairo', sans-serif;
    background: linear-gradient(135deg, #20f0b0, #18cef8);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 22px rgba(0, 231, 160, .2);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s;
    -webkit-tap-highlight-color: transparent;
}
.mfx-help-fab svg { width: 20px; height: 20px; }
.mfx-help-fab__x { display: none; }
body.mfx-help-open .mfx-help-fab__q { display: none; }
body.mfx-help-open .mfx-help-fab__x { display: inline; }
.mfx-help-fab:active { transform: scale(.95); }

body.mfx-has-fab .masar-whatsapp-float,
body.mfx-has-fab .mx-ai-support__launcher {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.9);
    transition: opacity .2s, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .22s;
}
body.mfx-has-fab.mfx-help-open .masar-whatsapp-float,
body.mfx-has-fab.mfx-help-open .mx-ai-support__launcher {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .2s, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
body.mfx-has-fab .mx-ai-support { left: 16px !important; bottom: calc(var(--mfx-fab-bottom) + 60px) !important; }
body.mfx-has-fab .masar-whatsapp-float { left: 16px !important; bottom: calc(var(--mfx-fab-bottom) + 122px) !important; }
body.mfx-has-fab .masar-whatsapp-float__label { display: none !important; }
body.mfx-has-fab .mobile-trial-bar__whatsapp { display: none !important; }

/* never cover a field the user is typing in */
body.mfx-typing .mfx-help-fab,
body.mfx-typing .masar-whatsapp-float,
body.mfx-typing .mx-ai-support__launcher,
body.mfx-typing .mobile-trial-bar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

@media (max-width: 768px) {
    /* the sign-up bar sits at the bottom of the home page */
    body:has(.mobile-trial-bar) { --mfx-fab-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
    body.mfx-has-fab .mobile-trial-bar { grid-template-columns: 46px minmax(0, 1fr) 128px !important; }
    body.mfx-has-fab .mobile-trial-bar__content strong { font-size: 13px; }
}

/* ---------- home: Premium plans ---------- */
.mfx-home-plans { margin: 34px 0 10px; }
.mfx-home-plans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.mfx-plan {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 22px 20px 20px;
    border-radius: 22px;
    border: 1px solid rgba(105, 203, 255, .18);
    background: linear-gradient(165deg, rgba(10, 34, 56, .9), rgba(4, 16, 29, .95));
    color: #f4f9ff;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s;
}
.mfx-plan:hover { transform: translateY(-3px); border-color: rgba(0, 231, 160, .4); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.mfx-plan--featured { border-color: rgba(167, 116, 255, .5); background: linear-gradient(165deg, rgba(42, 20, 82, .85), rgba(6, 16, 32, .96) 65%); box-shadow: 0 0 0 1px rgba(167, 116, 255, .15), 0 22px 50px rgba(60, 20, 120, .25); }
.mfx-plan h3 { margin: 0; font-size: 20px; font-weight: 900; }
.mfx-plan__badge { align-self: flex-start; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #e6d9ff; background: rgba(167, 116, 255, .22); border: 1px solid rgba(167, 116, 255, .4); }
.mfx-plan__badge--blue { color: #bff1ff; background: rgba(30, 216, 255, .14); border-color: rgba(30, 216, 255, .35); }
.mfx-plan__price { display: flex; align-items: baseline; gap: 6px; }
.mfx-plan__price b { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mfx-plan__price span { font-size: 13px; color: #8ea6b9; }
.mfx-plan ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 7px; font-size: 14px; color: #cfe0ec; }
.mfx-plan li { display: flex; gap: 8px; align-items: flex-start; }
.mfx-plan li::before { content: "✓"; color: #00e7a0; font-weight: 900; }
.mfx-plan .mx-button { margin-top: auto; justify-content: center; }
.mfx-home-plans__free { margin: 14px 0 0; text-align: center; font-size: 14px; color: #8ea6b9; }
.mfx-home-plans__free a { color: #00e7a0; font-weight: 800; }
@media (max-width: 720px) { .mfx-home-plans__grid { grid-template-columns: 1fr; } }

/* ---------- plans page: monthly first, then broker, then free ---------- */
.mfx-plan-grid > .plan-paid { order: 1; }
.mfx-plan-grid > .plan-broker { order: 2; }
.mfx-plan-grid > .plan-trial { order: 3; }
.mfx-plan-grid > .mfx-plan-featured { box-shadow: 0 0 0 1px rgba(167, 116, 255, .35), 0 24px 50px rgba(60, 20, 120, .28); }
.mfx-plan-price { font-size: 26px !important; font-weight: 900; color: #fff !important; font-variant-numeric: tabular-nums; }
.mfx-plan-price small { font-size: 13px; font-weight: 600; color: #8ea6b9; }

/* ---------- feel ---------- */
.mx-button, .plan-button, .mx-broker-card, .mfx-plan .mx-button { -webkit-tap-highlight-color: transparent; transition: transform .14s cubic-bezier(.2, .8, .2, 1), filter .14s, box-shadow .2s; }
.mx-button:active, .plan-button:active, .mx-broker-card:active { transform: scale(.97); filter: brightness(1.08); }
a:focus-visible, button:focus-visible { outline: 2px solid #1ed8ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .mfx-plan, .mfx-help-fab, .masar-whatsapp-float, .mx-ai-support__launcher { transition: none !important; }
}

/* home hero (mobile): keep the phone preview from sliding over the sign-up buttons */
@media (max-width: 760px) {
    .mx-landing .mx-hero-visual { grid-row: 1 / 2; min-height: 250px; }
    .mfx-help-fab { width: 50px; height: 50px; padding: 0; justify-content: center; }
    .mfx-help-fab span { display: none; }
}
@media (max-width: 390px) {
    .mx-landing .mx-hero-visual { min-height: 236px; }
}