/*
 * Fundro design tokens.
 *
 * Cairo is the typeface used by the supplied mobile references and by the
 * production fundro.ae surface.  The checked-in WOFF2 files are the official
 * Google Fonts v31 variable subsets, so the UI does not depend on a third-party
 * font request at runtime.
 */
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/cairo/cairo-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
        U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F,
        U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/cairo/cairo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/cairo/cairo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
        U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Typography */
    --fd-font-family: "Cairo", "Segoe UI", sans-serif;
    --fd-font-size-2xs: 0.625rem;
    --fd-font-size-xs: 0.75rem;
    --fd-font-size-sm: 0.875rem;
    --fd-font-size-md: 1rem;
    --fd-font-size-lg: 1.25rem;
    --fd-font-size-xl: 1.75rem;

    /* Brand and semantic colours sampled from the supplied references. */
    --fd-green: #00ad78;
    --fd-bright: #20d795;
    --fd-dark: #007c55;
    --fd-cream: #fffbed;
    --fd-mint: #edfff6;
    --fd-yellow: #ffc83d;
    --fd-blue: #edf3ff;
    --fd-text: #101411;
    --fd-muted: #78817d;
    --fd-gray: #939ba8;
    --fd-line: #dfe6e2;
    --fd-surface: #f7f9f8;
    --fd-danger: #d84b4b;
    --fd-success: #008f62;
    --fd-splash-bg: #1b1f22;

    /* Shared component geometry. */
    --fd-space-1: 0.25rem;
    --fd-space-2: 0.5rem;
    --fd-space-3: 0.75rem;
    --fd-space-4: 1rem;
    --fd-space-5: 1.25rem;
    --fd-space-6: 1.5rem;
    --fd-space-8: 2rem;
    --fd-radius-xs: 0.3125rem;
    --fd-radius-sm: 0.5rem;
    --fd-radius-md: 0.75rem;
    --fd-radius-lg: 1rem;
    --fd-radius-xl: 1.5rem;
    --fd-radius-pill: 999px;
    --fd-shadow-card: 0 0.1875rem 0.75rem rgb(0 65 43 / 9%);
    --fd-shadow-sheet: 0 -0.875rem 2.625rem rgb(0 0 0 / 20%);
    --fd-mobile-width: 23.4375rem;
    --fd-mobile-wide: 26.875rem;

    /* Compatibility aliases used by the established Laravel views. */
    --primary: var(--fd-green);
    --primary-dark: var(--fd-dark);
    --green-light: var(--fd-bright);
    --green: var(--fd-green);
    --mint: var(--fd-mint);
    --cream: var(--fd-cream);
    --yellow: var(--fd-yellow);
    --ink: var(--fd-text);
    --muted: var(--fd-muted);
    --surface: var(--fd-surface);
    --line: var(--fd-line);
    --shadow: var(--fd-shadow-card);
}

/* System indicators are drawn in CSS so their shape stays consistent across fonts. */
.fd-system-status em {
  position: relative;
  width: 15px;
  height: 11px;
  margin: 0 3px;
  transform: none;
  border: 1.7px solid currentColor;
  border-color: currentColor transparent transparent currentColor;
  border-radius: 50% 0 0;
  rotate: 45deg;
}

.fd-system-status em::before,
.fd-system-status em::after {
  position: absolute;
  content: "";
  border: 1.7px solid currentColor;
  border-color: currentColor transparent transparent currentColor;
  border-radius: 50% 0 0;
}

.fd-system-status em::before { inset: 3px; }
.fd-system-status em::after { inset: 6px; }

@media (max-width: 430px) {
  html,
  body {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

.fd-ac-menu > a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  color: inherit;
  text-decoration: none;
}

.fd-ac-menu > a i {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #fff4d4;
  color: var(--fd-green);
  font-style: normal;
}

.fd-ac-menu > a b { flex: 1; }
.fd-ac-menu > a span { color: var(--fd-gray); font-size: 24px; }
.fd-account-mobile .fd-ac-rank { margin: 16px 17px 8px; }
.fd-account-mobile a.fd-ac-delete {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.fd-ac-delete-confirm textarea {
  width: 100%;
  min-height: 72px;
  margin: 10px 0;
  padding: 10px;
  resize: vertical;
  border: 1px solid var(--fd-line);
  border-radius: 8px;
  font: inherit;
}

.fd-answer-form { padding-bottom: 24px; }
.fd-answer-list label { display: block; cursor: pointer; }
.fd-answer-list label > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.fd-answer-list label > span {
  display: flex;
  min-height: 46px;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--fd-yellow);
  border-radius: 8px;
  background: #f8fffc;
  color: #68717f;
  font-size: 16px;
}
.fd-answer-list label > input:checked + span {
  border-color: var(--fd-green);
  background: var(--fd-mint);
  color: var(--fd-dark);
  box-shadow: 0 0 0 2px rgb(0 173 120 / 12%);
}
.fd-answer-list label > input:focus-visible + span {
  outline: 3px solid rgb(0 173 120 / 28%);
  outline-offset: 2px;
}
.fd-answer-form > button,
.fd-step-form > button {
  width: 100%;
  min-height: 46px;
  margin-top: 22px;
}
.fd-input-list select,
.fd-input-list textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--fd-yellow);
  border-radius: 8px;
  background: #f8fffc;
  color: inherit;
  font: inherit;
}
.fd-input-list textarea { min-height: 96px; resize: vertical; }
.fd-work-wizard .fd-review-table > div { grid-template-columns: 1fr 1.25fr; gap: 8px; }
.fd-work-wizard .fd-review-submit {
  position: static;
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
}
.fd-work-wizard .fd-review-submit label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.fd-news-screen > nav a:first-child { background: #fff; }
.fd-news-screen > nav a.active {
  background: var(--fd-mint);
  color: var(--fd-dark);
  font-weight: 700;
}
.fd-news-list article.is-unread { background: linear-gradient(90deg, transparent, rgb(0 173 120 / 5%)); }
.fd-news-list article > form { margin-top: 8px; text-align: end; }
.fd-news-list article > form button {
  border: 0;
  background: transparent;
  color: var(--fd-green);
  font: 700 11px var(--fd-font-family);
  cursor: pointer;
}

.fd-wallet-flow .fd-chips button {
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid var(--fd-green);
  border-radius: 7px;
  background: #fff;
  color: var(--fd-dark);
  font: 700 11px var(--fd-font-family);
  cursor: pointer;
}
.fd-wallet-flow .fd-wallet-form select {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--fd-yellow);
  border-radius: 8px;
  background: #f8fffc;
  font: inherit;
}

.fd-ov-head-actions > a {
  position: relative;
  width: 39px;
  height: 39px;
  border: 1.5px solid var(--fd-green);
  border-radius: 50%;
  background: #fff;
}
.fd-chart-data {
  height: 260px;
  margin-top: 14px;
  padding: 18px 8px 0;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  background: repeating-linear-gradient(0deg, transparent 0 49px, #dde2e7 50px);
}
.fd-chart-data > i {
  flex: 1;
  min-width: 4px;
  max-width: 22px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--fd-bright), var(--fd-dark));
}
.fd-chart-data > span { margin: auto; color: var(--fd-muted); font-size: 12px; }
.fd-chart-selects > a {
  display: grid;
  min-height: 46px;
  place-items: center;
  border: 1px solid #a7b6c9;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}
.fd-ov-opportunities h3 a { color: inherit; text-decoration: none; }
.fd-ov-transaction-list { margin: 0 15px 16px; }
.fd-ov-transaction-list > article {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--fd-line);
}
.fd-ov-transaction-list > article > i { color: var(--fd-green); font-style: normal; font-size: 22px; }
.fd-ov-transaction-list > article div { display: grid; }
.fd-ov-transaction-list > article small,
.fd-ov-transaction-list > article span { color: var(--fd-muted); font-size: 9px; }
.fd-ov-transaction-list > article span { grid-column: 3; }
.fd-ov-learn > a {
  flex: 0 0 260px;
  min-height: 140px;
  padding: 40px 35px;
  border-radius: 10px;
  background: #00946a;
  color: #fff;
  text-decoration: none;
}
.fd-ov-bottom a { color: inherit; text-decoration: none; }

html,
body,
button,
input,
select,
textarea {
    font-family: var(--fd-font-family);
}

:focus-visible {
    outline: 0.1875rem solid color-mix(in srgb, var(--fd-green) 75%, white);
    outline-offset: 0.125rem;
}

/* Suitability flow: one component renders intro, questions, review, and result. */
.fd-suitability-flow{width:min(100%,45rem);min-height:40rem;margin-inline:auto;overflow:hidden;border:1px solid var(--fd-line);border-radius:var(--fd-radius-xl);background:#fff;box-shadow:var(--fd-shadow-card);color:var(--fd-text)}
.fd-suitability-header{display:grid;grid-template-columns:2.5rem 1fr 2.5rem;min-height:4rem;align-items:center;padding-inline:var(--fd-space-4);border-bottom:1px solid var(--fd-line)}
.fd-suitability-header a,.fd-suitability-header span{color:var(--fd-dark);font-size:1.75rem;text-align:center}.fd-suitability-header strong{font-size:var(--fd-font-size-lg);text-align:center}
.fd-suitability-intro,.fd-suitability-question,.fd-suitability-review,.fd-suitability-result{padding:clamp(1.5rem,6vw,3rem)}.fd-suitability-intro,.fd-suitability-result{text-align:center}
.fd-suitability-symbol,.fd-suitability-check{display:grid;width:4.75rem;height:4.75rem;margin:0 auto var(--fd-space-4);place-items:center;border-radius:50%;background:var(--fd-mint);color:var(--fd-green);font-size:2.625rem}.fd-suitability-check{background:var(--fd-green);color:#fff}
.fd-suitability-kicker{margin:0 0 var(--fd-space-2);color:var(--fd-dark);font-size:var(--fd-font-size-sm);font-weight:700}.fd-suitability-flow h1,.fd-suitability-flow legend{margin:0 0 var(--fd-space-3);color:var(--fd-dark);font-size:clamp(1.375rem,4vw,1.875rem);font-weight:700;line-height:1.45}.fd-suitability-flow p,.fd-suitability-flow small{color:var(--fd-muted);line-height:1.8}
.fd-suitability-intro ol{display:grid;gap:var(--fd-space-3);margin:var(--fd-space-6) 0;padding:0;list-style:none;text-align:start}.fd-suitability-intro li,.fd-suitability-duration{display:flex;align-items:center;gap:var(--fd-space-3);padding:var(--fd-space-3);border-radius:var(--fd-radius-md);background:var(--fd-surface)}.fd-suitability-intro li b{display:grid;flex:0 0 2.375rem;height:2.375rem;place-items:center;border-radius:50%;background:#fff4cf;color:#735400}.fd-suitability-intro li span,.fd-suitability-intro li strong,.fd-suitability-intro li small,.fd-suitability-duration div,.fd-suitability-duration strong,.fd-suitability-duration small{display:block}.fd-suitability-duration{margin-block:var(--fd-space-4);text-align:start}.fd-suitability-duration>span{color:var(--fd-green);font-size:1.75rem}
.fd-suitability-progress{height:.375rem;margin-bottom:var(--fd-space-6);overflow:hidden;border-radius:var(--fd-radius-pill);background:var(--fd-line)}.fd-suitability-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--fd-dark),var(--fd-green))}
.fd-suitability-question fieldset{min-width:0;margin:0;padding:0;border:0}.fd-suitability-options{display:grid;gap:var(--fd-space-3);margin-block:var(--fd-space-5)}.fd-suitability-options label{position:relative;display:grid;grid-template-columns:1fr 1.5rem;min-height:3.25rem;align-items:center;gap:var(--fd-space-3);padding:var(--fd-space-3) var(--fd-space-4);border:1px solid var(--fd-yellow);border-radius:var(--fd-radius-md);background:#fbfffd;cursor:pointer}.fd-suitability-options input{position:absolute;opacity:0;pointer-events:none}.fd-suitability-options label i{display:grid;width:1.375rem;height:1.375rem;place-items:center;border:1px solid #aeb8b3;border-radius:50%;color:transparent;font-style:normal}.fd-suitability-options label:has(input:checked){border-color:var(--fd-green);background:var(--fd-mint);box-shadow:0 0 0 .125rem color-mix(in srgb,var(--fd-green) 15%,transparent)}.fd-suitability-options label:has(input:checked) i{border-color:var(--fd-green);background:var(--fd-green);color:#fff}.fd-suitability-options label:has(input:focus-visible){outline:.1875rem solid color-mix(in srgb,var(--fd-green) 42%,transparent);outline-offset:.1875rem}
.fd-suitability-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--fd-space-3)}.fd-suitability-actions a,.fd-suitability-secondary{padding:var(--fd-space-3);color:var(--fd-dark);font-weight:600}.fd-suitability-note{padding:var(--fd-space-3);border-inline-start:.1875rem solid var(--fd-yellow);border-radius:var(--fd-radius-sm);background:#fff9e4;text-align:start}
.fd-suitability-review dl{display:grid;gap:var(--fd-space-2);margin-block:var(--fd-space-5)}.fd-suitability-review dl>div{display:grid;grid-template-columns:1fr auto;gap:var(--fd-space-1) var(--fd-space-3);padding:var(--fd-space-3);border-bottom:1px solid var(--fd-line)}.fd-suitability-review dt{grid-column:1/-1;color:var(--fd-muted);font-size:var(--fd-font-size-xs)}.fd-suitability-review dd{margin:0;font-weight:600}.fd-suitability-review dl a{color:var(--fd-dark);font-size:var(--fd-font-size-xs)}.fd-suitability-consent{display:grid;grid-template-columns:1.375rem 1fr;align-items:start;gap:var(--fd-space-3);margin-block:var(--fd-space-4);line-height:1.8}.fd-suitability-consent input{width:1.25rem;height:1.25rem;margin-top:.1875rem;accent-color:var(--fd-green)}
.fd-suitability-score{display:grid;gap:var(--fd-space-1);margin:var(--fd-space-6) 0;padding:var(--fd-space-5);border-radius:var(--fd-radius-lg);background:linear-gradient(145deg,var(--fd-mint),#fff9e4)}.fd-suitability-score strong{color:var(--fd-dark);font-size:2.625rem}.fd-suitability-result .fd-suitability-secondary{display:block;margin-top:var(--fd-space-2)}

@media(max-width:700px){.app-portal:has(.fd-suitability-flow) .portal-hero,.app-portal:has(.fd-suitability-flow) .fd-app-header,.app-portal:has(.fd-suitability-flow) .portal-tabs,.app-portal:has(.fd-suitability-flow) .mobile-nav,.app-portal:has(.fd-suitability-flow) footer{display:none!important}.app-portal:has(.fd-suitability-flow) .section.portal,.app-portal:has(.fd-suitability-flow) .section.portal>.container{padding:0;background:#fff}.fd-suitability-flow{width:100%;min-height:100dvh;border:0;border-radius:0;box-shadow:none}.fd-suitability-intro,.fd-suitability-question,.fd-suitability-review,.fd-suitability-result{padding:var(--fd-space-6) var(--fd-space-4) 2rem}}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}