/* דרורית ראובן — mobile drawer (#drm, ≤1024px) — see mobile-menu.php. Ported from ck-yasmin (same lessons), petrol + gold (round 21). */
html.dr-locked{overflow:hidden}
@media (max-width:1024px){.dr-nav .elementor-nav-menu--dropdown{display:none!important}}

.drm{position:fixed;inset:0;z-index:100100;display:flex;flex-direction:column;direction:rtl;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;color:#FFFFFF;
	background:radial-gradient(90% 46% at 100% 0,rgba(202,171,117,.2),transparent 62%),radial-gradient(70% 40% at 0 100%,rgba(202,171,117,.12),transparent 60%),#173A47;
	transform:translate3d(100%,0,0);transition:transform .4s cubic-bezier(.22,.8,.24,1);padding-bottom:env(safe-area-inset-bottom);font-family:"Assistant",system-ui,sans-serif}
.drm.is-open{transform:translate3d(0,0,0)}
.drm:focus{outline:none}
/* the dove of the logo, faint, in the corner */
.drm::after{content:"";position:absolute;left:-30px;bottom:150px;width:260px;height:230px;opacity:.09;pointer-events:none;background:url("dove-light.png") center/contain no-repeat}

.drm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(226,201,148,.2)}
.drm-logo{display:flex;align-items:center;line-height:0}
.drm-logo img{width:200px;height:auto}
.drm-x{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;transition:background-color .25s,transform .4s cubic-bezier(.34,1.3,.64,1)}
.drm-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

.drm-nav{position:relative;z-index:1;display:flex;flex-direction:column;padding:6px 0;flex:1 0 auto}
.drm-i{display:flex;align-items:baseline;gap:16px;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.08);color:#FFFFFF!important;text-decoration:none;
	opacity:0;transform:translateX(34px);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.drm.is-open .drm-i{animation:drm-in .4s cubic-bezier(.22,.8,.24,1) var(--d,0ms) forwards}
@keyframes drm-in{to{opacity:1;transform:none}}
.drm-n{flex:0 0 auto;font:600 12px/1 "Assistant",sans-serif;letter-spacing:.16em;color:#9CCAD8;direction:ltr}
.drm-t{flex:1;font:400 27px/1.15 "Assistant",sans-serif}
.drm-arr{flex:0 0 22px;width:22px;height:22px;align-self:center;fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,.8,.24,1),stroke .3s}
.drm-i:active,.drm-i:focus-visible{background:rgba(255,255,255,.05);outline:none}
@media (hover:hover){.drm-i:hover{background:rgba(255,255,255,.04)}.drm-i:hover .drm-arr{stroke:#E2C994;transform:translateX(-5px)}}

.drm-cta{position:relative;z-index:1;display:grid;gap:10px;padding:18px 18px 22px;border-top:1px solid rgba(226,201,148,.2);opacity:0}
.drm.is-open .drm-cta{animation:drm-fade .38s ease .2s forwards}
@keyframes drm-fade{to{opacity:1}}
.drm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drm-btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 14px;border-radius:2px;border:1px solid rgba(255,255,255,.26);color:#FFFFFF!important;font:500 15px/1 "Assistant",sans-serif;text-decoration:none;touch-action:manipulation;transition:background-color .25s}
.drm-btn[href^="tel"]{direction:ltr}
.drm-btn:active{background:rgba(255,255,255,.08)}
.drm-btn--main{background:#CAAB75;border-color:#CAAB75;color:#173A47!important;font-weight:700;font-size:16px}
.drm-btn--main:active{background:#D4B886}
.drm-foot{display:flex;justify-content:center;padding:10px 4px 0;font:300 17px/1 "Assistant",sans-serif;color:#E2C994}

@media (min-width:1025px){.drm{display:none!important}}
@media (max-height:640px){.drm-i{padding-top:10px;padding-bottom:10px}.drm-t{font-size:22px}}
@media (prefers-reduced-motion:reduce){
	.drm{opacity:0;transition:opacity .28s ease,transform 0s linear .28s}
	.drm.is-open{opacity:1;transform:translate3d(0,0,0);transition:opacity .28s ease,transform 0s}
	.drm.is-open .drm-i,.drm.is-open .drm-cta{animation:drm-fade .3s ease var(--d,0ms) forwards;transform:none}
}
/* the kit's global button styles (.elementor-kit-N button) and Hello's reset outrank plain classes — restate with the id */
#drm .drm-x{padding:0!important;border-radius:50%!important;min-width:0;line-height:0;border:1px solid rgba(255,255,255,.24)!important;background:rgba(255,255,255,.06)!important;color:#FFFFFF!important}
#drm .drm-x:hover,#drm .drm-x:focus-visible{background:rgba(255,255,255,.14)!important;transform:rotate(90deg)}
#drm button:focus{outline:none}
#drm button:focus-visible,#drm a:focus-visible{outline:2px solid #E2C994;outline-offset:2px}
html.dr-locked .dr-fab{visibility:hidden}

/* ---- round 18 (20.10, Shaked: "בלחיצה על השירותים שלי יפתח התפריט משתנה"): panels. "השירותים שלי" slides in its own panel
   (in RTL the deeper level comes from the left, the main one leaves to the right); both panels share one grid cell (since 21.10
   only the one on screen sets its height — see the end of the file). The hidden panel is inert (no focus, no taps). The nine services
   are no longer listed under their parent, so the rows go back to the comfortable size of round 5. */
.drm-nav{display:grid;padding:0;overflow:hidden}
.drm-panel{grid-area:1/1;display:flex;flex-direction:column;padding:6px 0;min-width:0;transition:transform .42s cubic-bezier(.22,.8,.24,1),opacity .32s ease,visibility 0s linear .42s}
.drm-panel--sub{transform:translate3d(-100%,0,0);opacity:0;visibility:hidden}
.drm.is-sub .drm-panel--main{transform:translate3d(100%,0,0);opacity:0;visibility:hidden}
.drm.is-sub .drm-panel--sub.is-active{transform:none;opacity:1;visibility:visible;transition:transform .42s cubic-bezier(.22,.8,.24,1),opacity .32s ease,visibility 0s}
.drm:not(.is-sub) .drm-panel--main{transition:transform .42s cubic-bezier(.22,.8,.24,1),opacity .32s ease,visibility 0s}
.drm-i{padding-top:14px;padding-bottom:14px}
.drm-t{font-size:27px}
/* the parent row is a <button>: the kit's global button styles and Hello's reset outrank plain classes — restated with the id */
#drm .drm-i--parent{width:100%;margin:0;padding:14px 22px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#FFFFFF!important;text-align:right;font:inherit;cursor:pointer}
#drm .drm-i--parent .drm-arr{stroke:#E2C994}
#drm .drm-back{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin:10px 12px 0;padding:8px 10px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#E2C994!important;font:500 14px/1 "Assistant",sans-serif;letter-spacing:.14em;cursor:pointer}
#drm .drm-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drm-ptitle{margin:0;padding:6px 22px 14px;font:400 32px/1.1 "Assistant",sans-serif;color:#FFFFFF;border-bottom:1px solid rgba(226,201,148,.22)}
/* the services rows: their own entrance when the panel opens (not the drawer's — they are not on screen then) */
.drm.is-open .drm-panel--sub .drm-i{animation:none;opacity:0;transform:translateX(-22px);transition:opacity .35s ease var(--d,0ms),transform .42s cubic-bezier(.22,.8,.24,1) var(--d,0ms)}
.drm-panel--sub.is-active .drm-i{opacity:1!important;transform:none!important}
.drm-i--svc{padding-top:11px;padding-bottom:11px}
.drm-i--svc .drm-t{font-size:21px}
.drm-i--all .drm-t{font:500 16px/1.2 "Assistant",sans-serif;letter-spacing:.06em;color:#E2C994}
.drm-i--all .drm-arr{stroke:#E2C994}
@media (max-height:640px){.drm-i--svc{padding-top:8px;padding-bottom:8px}.drm-i--svc .drm-t{font-size:19px}.drm-ptitle{font-size:26px}}
@media (prefers-reduced-motion:reduce){.drm-panel,.drm-panel--sub .drm-i{transition:none!important}}

/* ---- 21.10 (Shaked: "את הכפתורים לשים יותר למעלה שלא יהיה צורך לגלול כדי להגיע אליהם"): the buttons follow the items.
   The shared grid cell took the height of the taller panel (the nine services) and .drm-nav grew to fill the drawer, so on a
   375×812 phone the buttons started 283px under the last item and ended below the screen. Now only the panel on screen sets the
   height (the hidden one is out of the flow; the nav clips it while it slides away) and the nav no longer stretches. */
.drm-nav{position:relative;flex:0 0 auto}
.drm-panel--sub,.drm.is-sub .drm-panel--main{position:absolute;inset:0 0 auto 0}
.drm.is-sub .drm-panel--sub.is-active{position:relative}