/* ===========================================================================
   freesbe משכנתאות — שני סקשנים חדשים לעמוד הבית
   מאנדי: mortgages | Community Highlights Section + mortgages | Add Testimonials Section

   הקובץ הזה נטען מעל העמוד החי ולא נוגע בשום מחלקה שלו.
   כל השמות בתחילית fx- כדי שלא תהיה התנגשות עם ה-CSS של האתר.
   הערכים נמדדו מ-freesbe.com/mortgages-advisors.
   =========================================================================== */

.fx-sec{
  /* טוקנים שנמדדו מהעמוד החי */
  --fx-teal:#00D6D1;
  --fx-teal-deep:#0D4B4A;   /* השכבה הכהה שהאתר שם על תצלומים */
  --fx-teal-tint:#F0FCFC;
  --fx-ink:#262626;
  --fx-ink-2:#595959;
  --fx-ink-3:#737373;
  --fx-line:#D8D8D8;
  --fx-grey:#F5F5F5;
  --fx-grey-2:#F5F8F9;
  --fx-ff:EricaSansFOT, GillSans, Assistant, sans-serif;
  --fx-shadow:0 6px 28px rgba(0,0,0,.08);
  --fx-r:8px;      /* רדיוס משטחים גדולים באתר */
  --fx-r-md:16px;
  --fx-r-lg:24px;

  font-family:var(--fx-ff);
  color:var(--fx-ink);
  direction:rtl;
  text-align:right;
  padding:100px 0;              /* פדינג הסקשנים של העמוד החי */
  box-sizing:border-box;
}
.fx-sec *,.fx-sec *::before,.fx-sec *::after{box-sizing:border-box}

.fx-wrap{max-width:1036px;margin:0 auto;padding:0 40px}

.fx-h{font-family:var(--fx-ff);font-size:48px;font-weight:800;line-height:1.4;margin:0 0 8px;text-align:center;color:var(--fx-ink)}
.fx-sub{font-size:38px;font-weight:400;line-height:1.5;margin:0 auto 48px;max-width:860px;text-align:center;color:var(--fx-ink)}
.fx-note{font-size:14px;color:var(--fx-ink-3);text-align:center;margin:16px 0 0}

.fx-btn{display:inline-flex;align-items:center;justify-content:center;min-width:226px;height:52px;padding:8px 28px;border-radius:50px;border:0;
        background:var(--fx-teal);color:var(--fx-ink);font-family:var(--fx-ff);font-size:18px;font-weight:700;text-decoration:none;cursor:pointer;
        transition:background .2s ease,transform .15s ease}
.fx-btn:hover{background:#00C2BE}
.fx-btn:active{transform:scale(.98)}
.fx-sec a:focus-visible,.fx-sec button:focus-visible{outline:3px solid var(--fx-ink);outline-offset:3px;border-radius:4px}

.fx-cta{text-align:center;margin-top:48px}
.fx-cta p{font-size:22px;font-weight:700;margin:0 0 16px}

/* ===========================================================================
   רכיב 1 — קהילת יועצי המשכנתאות
   =========================================================================== */
.fx-community{background:#fff}
.fx-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px}
.fx-tile{position:relative;border:0;padding:0;margin:0;border-radius:var(--fx-r-md);overflow:hidden;cursor:pointer;background:var(--fx-grey);
         font-family:var(--fx-ff);display:block;width:100%;aspect-ratio:16/10}
.fx-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.fx-tile::after{content:"";position:absolute;inset:0;pointer-events:none;
                background:linear-gradient(180deg,rgba(13,75,74,0) 38%,rgba(13,75,74,.88) 100%)}
.fx-tile:hover img{transform:scale(1.04)}
.fx-video{grid-row:1 / span 2;aspect-ratio:auto}
.fx-cap{position:absolute;z-index:2;inset-inline:20px;bottom:16px;color:#fff;text-align:start;font-size:17px;font-weight:700;line-height:1.3;pointer-events:none}
.fx-cap small{display:block;font-size:14px;font-weight:400;opacity:.92;margin-top:2px}
.fx-video .fx-cap{font-size:22px}
.fx-play{position:absolute;z-index:2;top:50%;inset-inline-start:50%;transform:translate(50%,-50%);width:80px;height:80px;border-radius:50%;
         background:var(--fx-teal);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .2s ease}
.fx-video:hover .fx-play{transform:translate(50%,-50%) scale(1.07)}

/* הנגן שמתנגן בתוך הסקשן, לא בלייטבוקס */
.fx-player{position:absolute;inset:0;z-index:3;display:none;background:#000;border-radius:inherit;overflow:hidden}
.fx-player video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.fx-ph{position:absolute;inset:0;overflow:hidden}
.fx-ph img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);animation:fxpan 18s ease-in-out infinite alternate}
.fx-ph-tag{position:absolute;top:50%;inset-inline-start:50%;transform:translate(50%,-50%);background:rgba(255,255,255,.92);color:var(--fx-ink);
           font-size:17px;font-weight:700;padding:12px 22px;border-radius:50px;white-space:nowrap}
@keyframes fxpan{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.fx-close{position:absolute;z-index:4;top:12px;inset-inline-end:12px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
          background:rgba(255,255,255,.16);color:#fff;display:none;align-items:center;justify-content:center;font-size:17px}
.fx-close:hover{background:rgba(255,255,255,.3)}
.fx-grid.is-playing{grid-template-columns:repeat(4,1fr)}
.fx-grid.is-playing .fx-video{grid-column:1 / -1;grid-row:1;aspect-ratio:16/9;cursor:default}
.fx-grid.is-playing .fx-video .fx-player,
.fx-grid.is-playing .fx-video .fx-close{display:flex}
.fx-grid.is-playing .fx-video > img,
.fx-grid.is-playing .fx-video .fx-play,
.fx-grid.is-playing .fx-video .fx-cap,
.fx-grid.is-playing .fx-video::after{opacity:0;visibility:hidden}

/* ===========================================================================
   רכיב 2 — מה היועצים אומרים
   =========================================================================== */
.fx-quotes{background:var(--fx-grey-2)}
.fx-tst{display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:center;background:#fff;border-radius:var(--fx-r-lg);
        box-shadow:var(--fx-shadow);padding:48px 56px;position:relative;touch-action:pan-y}
.fx-tst-media{position:relative;width:340px;height:400px;justify-self:center}
.fx-tst-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:var(--fx-r-md);
              transition:opacity .45s ease,transform .45s ease}
/* עיגול טורקיז עם אייקון לבן — צורת ההדגשה של האתר */
.fx-tst-ring{position:absolute;top:-14px;inset-inline-start:-14px;width:76px;height:76px;border-radius:50%;background:var(--fx-teal);
             display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,214,209,.35);z-index:2}
.fx-tst-head{margin:0 0 10px;font-size:20px;font-weight:700;color:#007A77}
.fx-tst-q{margin:0 0 28px;font-size:30px;line-height:1.5;font-weight:400;color:var(--fx-ink);transition:opacity .35s ease,transform .35s ease}
.fx-fade{opacity:0;transform:translateY(8px)}
.fx-tst-who b{display:block;font-size:20px}
.fx-tst-who span{font-size:16px;color:var(--fx-ink-2)}
.fx-tst-nav{display:flex;align-items:center;gap:14px;margin-top:36px}
.fx-picks{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:4px}
.fx-picks::-webkit-scrollbar{display:none}
.fx-pick{position:relative;flex:0 0 auto;width:60px;height:60px;border-radius:50%;padding:0;border:0;background:none;cursor:pointer}
.fx-pick img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 25%;filter:grayscale(1);opacity:.6;
             transition:filter .25s ease,opacity .25s ease,transform .25s ease}
.fx-pick:hover img{opacity:.9}
.fx-pick[aria-selected="true"] img{filter:none;opacity:1;transform:scale(1.06)}
.fx-pick svg{position:absolute;inset:-5px;width:70px;height:70px;transform:rotate(-90deg);pointer-events:none}
.fx-pick circle{fill:none;stroke:var(--fx-teal);stroke-width:3;stroke-dasharray:201;stroke-dashoffset:201}
.fx-pick[aria-selected="true"] circle{animation:fxring var(--fx-dur,7s) linear forwards}
.fx-tst.is-paused .fx-pick[aria-selected="true"] circle,
.fx-tst.is-static .fx-pick[aria-selected="true"] circle{animation:none;stroke-dashoffset:0}
@keyframes fxring{to{stroke-dashoffset:0}}
.fx-pause{margin-inline-start:auto;flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--fx-line);background:#fff;cursor:pointer;
          display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background .2s ease}
.fx-pause:hover{border-color:var(--fx-teal);background:var(--fx-teal-tint)}
.fx-pause .i-play{display:none}
.fx-pause[aria-pressed="true"] .i-pause{display:none}
.fx-pause[aria-pressed="true"] .i-play{display:block}

/* ===========================================================================
   לייטבוקס לתמונות הקהילה
   =========================================================================== */
.fx-lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,12,12,.9);
       font-family:var(--fx-ff);direction:rtl}
.fx-lb.is-open{display:flex}
.fx-lb-box{position:relative;width:min(1100px,100%)}
.fx-lb-box img{width:100%;max-height:calc(100vh - 160px);object-fit:contain;border-radius:var(--fx-r-md);display:block;background:#000}
.fx-lb-cap{color:#fff;font-size:17px;margin-top:12px;display:flex;justify-content:space-between;gap:16px}
.fx-lb-cap span{opacity:.75;direction:ltr}
.fx-lb button{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
              background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.fx-lb button:hover{background:rgba(255,255,255,.3)}
.fx-lb .fx-lb-prev{inset-inline-end:-64px}
.fx-lb .fx-lb-next{inset-inline-start:-64px}
.fx-lb .fx-lb-x{top:-56px;inset-inline-start:0;transform:none}
.fx-lb button:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===========================================================================
   טאבלט 768–1199
   =========================================================================== */
@media (max-width:1199.98px){
  .fx-sec{padding:80px 0}
  .fx-wrap{padding:0 28px}
  .fx-h{font-size:38px}
  .fx-sub{font-size:28px;margin-bottom:40px}
  .fx-grid,.fx-grid.is-playing{grid-template-columns:repeat(2,1fr)}
  .fx-video{grid-column:1 / -1;grid-row:auto;aspect-ratio:16/9}
  .fx-tile:not(.fx-video){aspect-ratio:1/1}
  .fx-play{width:64px;height:64px}
  .fx-cap{font-size:15px;inset-inline:14px;bottom:12px}
  .fx-video .fx-cap{font-size:19px}
  .fx-tst{grid-template-columns:1fr;gap:32px;padding:40px 32px;text-align:center}
  .fx-tst-media{width:260px;height:300px}
  .fx-tst-ring{width:62px;height:62px;top:-12px;inset-inline-start:-12px}
  .fx-tst-q{font-size:24px}
  .fx-tst-nav{justify-content:center}
  .fx-picks{justify-content:center;max-width:100%}
  .fx-pause{margin-inline-start:0}
  .fx-lb .fx-lb-prev{inset-inline-end:8px}
  .fx-lb .fx-lb-next{inset-inline-start:8px}
}
@media (min-width:900px) and (max-width:1199.98px){
  .fx-grid,.fx-grid.is-playing{grid-template-columns:repeat(4,1fr)}
}

/* ===========================================================================
   מובייל עד 767.98
   =========================================================================== */
@media (max-width:767.98px){
  .fx-sec{padding:56px 0}
  .fx-wrap{padding:0 20px}
  .fx-h{font-size:30px}
  .fx-sub{font-size:22px;margin-bottom:32px}
  .fx-btn{width:100%;min-width:0}
  .fx-grid,.fx-grid.is-playing{grid-template-columns:1fr 1fr;gap:12px}
  .fx-video{grid-column:1 / -1}
  .fx-play{width:56px;height:56px}
  .fx-play svg{width:22px;height:22px}
  .fx-cap{font-size:14px;inset-inline:12px;bottom:10px}
  .fx-video .fx-cap{font-size:17px}
  .fx-tst{padding:28px 20px 24px;border-radius:var(--fx-r-md);gap:24px}
  .fx-tst-media{width:200px;height:236px}
  .fx-tst-ring{width:52px;height:52px}
  .fx-tst-ring svg{width:24px;height:24px}
  .fx-tst-q{font-size:20px;margin-bottom:20px}
  .fx-tst-nav{flex-direction:column;gap:16px;margin-top:24px}
  .fx-cta p{font-size:19px}
  .fx-lb{padding:16px}
  .fx-lb .fx-lb-x{top:-48px}
}

@media (prefers-reduced-motion:reduce){
  .fx-sec *,.fx-lb *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* "לפני" — העמוד החי בלי שני הסקשנים. נשלט מפאנל השינויים. */
html[data-fx="off"] .fx-sec{display:none}

/* ===========================================================================
   פאנל שינויים (כלי עבודה פנימי, לא חלק מהעמוד)
   =========================================================================== */
.fx-panel{position:fixed;z-index:3000;inset-inline-start:16px;bottom:16px;width:min(380px,calc(100vw - 32px));max-height:min(72vh,680px);
          background:#fff;border:1px solid #D8D8D8;border-radius:18px;box-shadow:0 18px 48px rgba(0,0,0,.14);
          font-family:EricaSansFOT, GillSans, Assistant, sans-serif;font-size:14px;display:flex;flex-direction:column;overflow:hidden;direction:rtl}
.fx-panel-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#00D6D1;color:#262626;font-weight:700;flex:0 0 auto}
.fx-panel-top b{flex:1;font-size:15px}
.fx-panel-top button{width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;font-size:17px;line-height:1;font-family:inherit}
.fx-panel-body{padding:14px;overflow:auto;display:grid;gap:14px}
.fx-panel.is-min .fx-panel-body{display:none}
.fx-panel h4{font-size:14px;margin:0 0 6px}
.fx-panel ul{margin:0;padding-inline-start:18px;display:grid;gap:6px;color:#595959;line-height:1.5}
.fx-panel .grp{border:1px solid #D8D8D8;border-radius:12px;padding:12px}
.fx-panel .seg{display:flex;gap:4px;background:#F5F5F5;border-radius:50px;padding:4px}
.fx-panel .seg button{flex:1;border:0;background:transparent;border-radius:50px;height:32px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:#595959}
.fx-panel .seg button[aria-pressed="true"]{background:#00D6D1;color:#262626}
.fx-panel .sw{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.fx-panel .sw input{inline-size:38px;block-size:22px;accent-color:#00D6D1;margin:0}
.fx-panel .stamp{font-size:12px;color:#737373;direction:ltr;text-align:start}
.fx-panel .hint{font-size:12px;color:#737373;margin:6px 0 0}
.fx-panel .q{color:#B45309;font-weight:700}
#fx-devnotes{display:none}
#fx-devnotes.is-on{display:block}
@media (max-width:767.98px){.fx-panel{inset-inline-start:8px;bottom:8px;width:calc(100vw - 16px);max-height:60vh}}