.oba{--oba-navy:#14074f;--oba-dot:#f1ff3b;--oba-lime:#e6ff55;font-family:Heebo,sans-serif;direction:rtl}
.oba [hidden]{display:none!important}

/* כפתור לפני / אחרי – פרופורציות מ-Figma (545×215) */
.oba-toggle{display:flex;font-size:2.0833vw;width:11.6em;max-width:100%;aspect-ratio:545/215;margin:0 auto 2.2em;background:var(--oba-navy);border-radius:999px;position:relative;transition:background .35s;box-shadow:inset 0 0 14px 2px rgba(0,0,0,.28)}
.oba[data-state="after"] .oba-toggle{background:var(--oba-lime)}
.oba-toggle button{position:relative;z-index:2;flex:1;display:grid;place-items:center;border:0;background:none;padding:0;margin:0;border-radius:999px;color:#fff;font:400 1em Heebo,sans-serif;cursor:pointer;transition:color .3s}
.oba-toggle button[aria-selected="true"],.oba[data-state="after"] .oba-toggle button{color:var(--oba-navy)}
/* ביטול כל hover/focus/active של הערכה על הכפתור */
.oba .oba-toggle button,.oba .oba-toggle button:hover,.oba .oba-toggle button:focus,.oba .oba-toggle button:focus-visible,.oba .oba-toggle button:active{background:none;box-shadow:none;outline:none;border:0;text-decoration:none;-webkit-tap-highlight-color:transparent}
.oba .oba-toggle button,.oba .oba-toggle button:hover,.oba .oba-toggle button:focus,.oba .oba-toggle button:active{color:#fff}
.oba .oba-toggle button[aria-selected="true"],.oba .oba-toggle button[aria-selected="true"]:hover,.oba[data-state="after"] .oba-toggle button,.oba[data-state="after"] .oba-toggle button:hover,.oba[data-state="after"] .oba-toggle button:focus,.oba[data-state="after"] .oba-toggle button:active{color:var(--oba-navy)}
.oba-pill{position:absolute;z-index:1;top:11.6%;bottom:11.6%;width:47.1%;left:50%;background:#fff;border-radius:999px;transition:left .35s cubic-bezier(.6,.1,.2,1)}
.oba[data-state="after"] .oba-pill{left:2.9%}

/* גריד תמונות */
/* כל הגריד נכנס במסך אחד: היחס קבוע (לפי Figma) והרוחב מוגבל לפי גובה המסך */
.oba-grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:20px;direction:ltr;aspect-ratio:1740/760;width:min(100%,1740px,calc(91vh * 1740 / 760));margin:0 auto}
.oba-g{position:relative;border-radius:8px;overflow:hidden;animation:oba-fade .5s;min-height:0}
.oba-g:first-child{grid-row:1/3}
.oba-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@keyframes oba-fade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* נקודות חמות */
.oba-hs{position:absolute;box-sizing:border-box;width:46.95px;height:46.95px;margin:-23.475px 0 0 -23.475px;padding:0;border-radius:50%;background:var(--oba-dot);border:12px solid var(--oba-navy);box-shadow:0 0 11.1px 4px #fff;cursor:pointer;transition:transform .2s}
.oba .oba-hs,.oba .oba-hs:hover,.oba .oba-hs:focus,.oba .oba-hs:active{background:var(--oba-dot);border-color:var(--oba-navy);box-shadow:0 0 11.1px 4px #fff;outline:none}
.oba-hs:hover,.oba-hs.is-open{transform:scale(1.18)}
.oba-tip{position:absolute;z-index:5;--oba-gap:34px;transform:translate(calc(-50% + var(--oba-sx,0px)),calc(-100% - var(--oba-gap)));background:var(--oba-navy);color:#fff;border-radius:12px;padding:10px 16px;font:500 17px/1.35 Heebo,sans-serif;direction:rtl;width:max-content;max-width:240px;pointer-events:none;opacity:0;transition:opacity .2s}
.oba-tip.is-open{opacity:1}
.oba-tip.below{transform:translate(calc(-50% + var(--oba-sx,0px)),var(--oba-gap))}
.oba-tip.below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--oba-navy)}
.oba-tip:after{content:"";position:absolute;top:100%;left:var(--oba-arrow,50%);margin-left:-8px;border:8px solid transparent;border-top-color:var(--oba-navy)}

/* טאבלט */
@media(max-width:1024px){
	.oba-toggle{font-size:max(18px,2.0833vw)}
	.oba-grid{gap:14px}
	.oba-hs{width:38px;height:38px;margin:-19px 0 0 -19px;border-width:9px}
	.oba-tip{font-size:15px;padding:8px 14px;--oba-gap:28px}
}
/* נייד: תמונה מתחת לתמונה. שומרים על אותו יחס לכל משבצת כמו בדסקטופ, כדי שהנקודות יישארו בדיוק על המקום שסומן */
@media(max-width:700px){
	.oba-toggle{font-size:20px;margin-bottom:1.4em}
	.oba-grid{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto;width:100%;gap:12px}
	.oba-g:first-child{grid-row:auto;aspect-ratio:938/760}
	.oba-g:not(:first-child){aspect-ratio:782/370}
	.oba-hs{width:32px;height:32px;margin:-16px 0 0 -16px;border-width:8px;box-shadow:0 0 8px 3px #fff}
	.oba .oba-hs,.oba .oba-hs:hover,.oba .oba-hs:focus,.oba .oba-hs:active{box-shadow:0 0 8px 3px #fff}
	.oba-tip{font-size:14px;padding:7px 12px;max-width:62vw;--oba-gap:24px}
}