form {
display:inline
}
/* travele_assets:bundled by the SDK CSS compiler after css.css. Plain rules only (no quoted url(../../../design/default/plugins/travele_assets/css/),no data:). */
/* star ratings driven by the numeric rating field:<span class="r-[[rating]]"></span> */
.rating-start .r-0{width:0}
.rating-start .r-1{width:20%}
.rating-start .r-2{width:40%}
.rating-start .r-3{width:60%}
.rating-start .r-4{width:80%}
.rating-start .r-5{width:100%}
/* forms:honeypot,consent row,success state */
.hp{position:absolute;
opacity:0;
height:0;
width:0;
overflow:hidden;
pointer-events:none}
.consent-row{display:flex;
align-items:flex-start;
gap:8px;
font-size:13px;
line-height:1.5;
margin:10px 0;
cursor:pointer}
.consent-row input{margin-top:4px;
flex:0 0 auto;
width:auto;
height:auto}
.consent-row a{text-decoration:underline}
.section-heading-white .consent-row,.footer-primary .consent-row{color:#fff}
.form-success{background:#0791BE;
color:#fff;
padding:14px 18px;
border-radius:4px;
font-size:15px;
margin:12px 0}
.newslatter-form input[type=submit]{width:100%}
/* hero */
.banner-subtitle{display:block;
color:#fff;
font-size:16px;
letter-spacing:1px;
margin-bottom:12px;
font-weight:600}
/* hebrew rhythm */
body{line-height:1.7}
.section-heading h2,.banner-title,.inner-banner-content h1{line-height:1.25}
.header-contact-info li{margin-left:22px;
margin-right:0}
.header-contact-info li:last-child{margin-left:0}
.navigation ul li a{font-weight:600}
/* uniform destination grid on the home page (single loop,four equal cards) */
.destination-three-column .desti-item{margin-bottom:30px}
/* footer */
.footer-social ul{list-style:none;
padding:0;
margin:14px 0 0;
display:flex;
gap:14px}
.footer-social a{color:#fff;
font-size:15px}
.widget_destinations li a i{margin-left:8px;
color:#F56960}
.copy-right.text-right{text-align:left}
/* info pages (task C hooks) */
.faq-category{display:inline-block;
font-size:12px;
color:#0791BE;
background:rgba(7,145,190,.08);
border-radius:3px;
padding:2px 8px;
margin-bottom:8px}
.consent-line{display:flex;
align-items:flex-start;
gap:8px;
font-size:13px;
line-height:1.5;
margin:10px 0}
.consent-line input{margin-top:4px;
width:auto;
height:auto}
.contact-thanks{margin-bottom:20px}
.whatsapp-cta{display:inline-flex;
align-items:center;
gap:8px;
background:#25D366;
color:#fff;
padding:10px 18px;
border-radius:4px;
font-weight:600}
.whatsapp-cta:hover{color:#fff;
background:#1ebe5b}
.career-steps{list-style:none;
padding:0;
margin:0 0 20px;
counter-reset:step}
.career-steps li{position:relative;
padding-right:36px;
margin-bottom:12px;
counter-increment:step}
.career-steps li:before{content:counter(step);
position:absolute;
right:0;
top:0;
width:26px;
height:26px;
border-radius:50%;
background:#F56960;
color:#fff;
font-size:13px;
text-align:center;
line-height:26px}
.job-missing{text-align:center;
padding:40px 0}
/* client logos ship as white line icons (meant for dark bands);
make them visible on the white slider */
.client-slider img{filter:invert(1) opacity(.55);
transition:opacity .3s}
.client-slider img:hover{opacity:1}
/* consent labels:block flow so the text never collapses to one glyph per line inside narrow widgets */
.consent-row,.consent-line{display:block;
width:100%;
font-size:13px;
line-height:1.5;
margin:10px 0;
cursor:pointer}
.consent-row input,.consent-line input{display:inline-block;
width:auto;
height:auto;
margin:0 0 0 6px;
vertical-align:middle}
.consent-row span,.consent-line span{display:inline}
/* WhatsApp CTA:the <p> is just a spacer,the green belongs to the button inside it */
.whatsapp-cta{display:block;
background:none;
padding:0;
margin:20px 0}
.whatsapp-cta a.button-primary{background:#25D366;
border:0;
color:#fff}
.whatsapp-cta a.button-primary:hover{background:#1ebe5b;
color:#fff}
/* Responsive:two template rules overshoot by the scrollbar width on browsers with classic scrollbars
(no visible effect on phones with overlay scrollbars,but they add a horizontal scroll on desktop/tablet).
- .callback-img full-bleed uses calc(-50vw + 50%) below 992px;
100vw includes the scrollbar -> clip at the section
- .service-page-section .row gets -20px gutters from 768px while the (fluid up to 1170px) container only pads 15px */
@media screen and (max-width:991px){ .callback-section{overflow-x:hidden} }
@media screen and (min-width:768px){ .service-page-section .container{padding-left:20px;
padding-right:20px} }
@media screen and (min-width:992px){ .service-page-section .container{padding-left:40px;
padding-right:40px} }  /* row gutters grow to -40px here */
/* Counters (home callback block):on phones the 2-up boxes leave ~46px for "1250+" and it wraps per digit.
Stack icon over number and keep the figure on one line. */
@media screen and (max-width:575px){
.callback-counter-wrap .counter-item{flex-direction:column;
align-items:center;
text-align:center;
padding:20px 10px}
.callback-counter-wrap .counter-icon{margin:0 0 10px}
.callback-counter-wrap .counter-content{padding:0}
.callback-counter-wrap .counter-no{white-space:nowrap;
font-size:28px}
}
/* ---- People Leads sales banner + modal (content/parts/pl_banner.php) ---- */
.pl-banner{position:fixed;
right:0;
left:0;
bottom:0;
z-index:9990;
background:#14163d;
color:#fff;
transform:translateY(100%);
transition:transform .3s ease;
box-shadow:0 -6px 24px rgba(0,0,0,.18);
font-family:"Assistant","Arial Hebrew",Arial,sans-serif}
.pl-banner.is-in{transform:none}
.pl-banner-inner{position:relative;
max-width:1170px;
margin:0 auto;
padding:10px 16px 10px 56px;
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
justify-content:center}
.pl-brand{display:inline-block;
background:#F56960;
color:#fff;
font-weight:700;
font-size:12px;
letter-spacing:.5px;
padding:3px 8px;
border-radius:3px;
text-transform:uppercase;
line-height:1.4}
.pl-banner-text{margin:0;
font-size:16px;
line-height:1.4;
flex:1 1 320px;
text-align:right;
color:#fff}
.pl-btn{background:#F56960;
color:#fff;
border:0;
border-radius:4px;
padding:10px 22px;
font-size:15px;
font-weight:700;
cursor:pointer;
font-family:inherit;
white-space:nowrap;
line-height:1.3}
.pl-btn:hover,.pl-btn:focus{background:#e0554c;
color:#fff}
.pl-close{position:absolute;
top:8px;
left:12px;
background:none;
border:0;
color:inherit;
font-size:28px;
line-height:1;
cursor:pointer;
opacity:.75;
padding:2px 6px}
.pl-close:hover,.pl-close:focus{opacity:1}
body.pl-on{padding-bottom:calc(var(--pl-h,64px) + 8px)}
@media (max-width:767px){body.pl-on .accessibility_menu{bottom:calc(var(--pl-h,64px) + 14px)!important}}  /* a11y button sits at bottom:75px on phones */
.pl-modal{position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:9995;
background:rgba(20,22,61,.72);
display:flex;
align-items:center;
justify-content:center;
padding:16px;
overflow:auto}
.pl-modal[hidden]{display:none}
.pl-modal-box{position:relative;
background:#fff;
color:#14163d;
max-width:560px;
width:100%;
border-radius:8px;
padding:30px 28px 26px;
box-shadow:0 20px 60px rgba(0,0,0,.35);
text-align:right;
font-family:"Assistant","Arial Hebrew",Arial,sans-serif}
.pl-modal-box .pl-close{color:#14163d}
.pl-modal-box h3{font-family:"Heebo","Arial Hebrew",Arial,sans-serif;
font-size:26px;
line-height:1.25;
margin:12px 0 8px;
color:#14163d}
.pl-modal-box p{margin:0 0 18px;
font-size:15px;
line-height:1.55;
color:#3a3c5a}
.pl-modal-box a{color:#F56960;
text-decoration:underline}
.pl-form .pl-row{display:flex;
gap:10px;
margin-bottom:10px}
.pl-form input:not([type=checkbox]),.pl-form textarea{display:block;
width:100%;
height:auto;
border:1px solid #d9dbe6;
border-radius:4px;
padding:10px 12px;
margin:0;
font:inherit;
font-size:15px;
line-height:1.4;
background:#fff;
color:#14163d;
box-shadow:none}
.pl-form input:focus,.pl-form textarea:focus{border-color:#F56960;
outline:0}
.pl-form textarea{margin-bottom:10px;
resize:vertical;
min-height:80px}
.pl-consent{display:block;
font-size:13px;
line-height:1.45;
margin:0 0 16px;
color:#3a3c5a;
cursor:pointer}
.pl-consent input{display:inline-block;
width:auto;
height:auto;
margin:0 0 0 6px;
vertical-align:middle}
.pl-form .pl-btn{width:100%;
padding:12px 22px;
font-size:16px}
body.pl-modal-open{overflow:hidden}
body.pl-modal-open .accessibility_menu{visibility:hidden}  /* its z-index is the int max;
it would float over the dialog */
@media (max-width:575px){
.pl-banner-inner{padding:12px 12px 12px 40px;
gap:10px}
.pl-banner-text{font-size:14px;
flex-basis:100%;
text-align:center}
.pl-banner .pl-btn{width:100%}
.pl-form .pl-row{flex-direction:column;
gap:0}
.pl-form .pl-row input{margin-bottom:10px}
.pl-modal-box{padding:26px 18px 20px}
}
.accessibility_menu{
position:fixed;
top:20px;
left:20px;
width:60px;
height:60px;
background:#1a73e8;
border-radius:50%;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
overflow:visible;
color:white;
font-size:18px;
font-weight:bold;
z-index:10000;
text-align:center;
padding:0;
cursor:pointer;
display:block;
transition:transform 0.3s ease
}
.accessibility_menu:hover { transform:scale(1.05)
}
.accessibility_menu:focus{outline:none
}
.accessibility_menu_btn{
background:none;
border:0;
padding:0;
cursor:pointer;
width:100%;
height:100%;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center
}
.accessibility_menu_btn img { width:36px;
height:36px
}
.accessibility_menu_btn:focus,.a11y-action:focus{outline:3px solid #ffbf47;
outline-offset:3px
}
.a11y-action{display:flex;
align-items:center;
gap:12px;
background:none;
border:0;
width:100%;
text-align:right;
padding:10px 15px;
cursor:pointer;
border-radius:6px;
transition:background 0.2s
}
.a11y-action:hover { background:rgba(255,255,255,0.1)
}
.a11y-action span{font-size:16px;
font-weight:500
}
.accessibility_menu .arrw{ display:none
}
.accessibility_menu_title{
width:100%;
text-align:center;
font-size:20px;
color:white;
margin:15px 0;
padding-bottom:10px;
border-bottom:1px solid rgba(255,255,255,0.1);
display:block
}
.active .accessibility_menu_title{
margin:0 0 10px 0;
height:auto
}
.outer_holder{
position:absolute;
top:70px;
left:0;
right:auto;
background:#2d2d2d;
padding:15px;
width:300px;
display:none;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
opacity:0;
transform:translateY(-10px);
transition:opacity 0.3s,transform 0.3s
}
.active.outer_holder{
display:block;
opacity:1;
transform:translateY(0)
}
.accessibility_menu .items_holder{
display:none;
float:none;
width:100%;
padding:0;
background:transparent;
margin:0
}
.accessibility_menu .items_holder .item{
float:none;
width:100%;
font-size:16px !important;
border-bottom:1px solid rgba(255,255,255,0.05);
margin:0;
padding:2px 0
}
.accessibility_menu .items_holder .item:last-child { border-bottom:none
}
.accessibility_menu .items_holder .item img{
float:none;
width:24px;
height:24px;
border:none;
padding:0;
filter:brightness(0) invert(1)
}
.accessibility_menu .items_holder .item span{
float:none;
margin:0;
font-size:16px !important;
color:#e0e0e0 !important;
background:transparent !important
}
.credit{
float:none;
display:block;
width:100%;
text-align:center;
font-size:12px;
color:#888;
margin-top:15px
}
/* Root-based text sizing classes */
html.a11y-text-lg { font-size:18px
}
html.a11y-text-xl { font-size:20px
}
html.a11y-text-base { font-size:16px
}
/* Readable Font */
body.a11y-readable * { font-family:Arial,Helvetica,sans-serif !important
}
/* Highlight Links */
body.a11y-links-highlight a { 
background:#ffeb3b !important;
color:#000 !important;
text-decoration:underline !important;
outline:2px solid #000 !important;
font-weight:bold !important
}
/* Big Cursor */
body.a11y-big-cursor,body.a11y-big-cursor * { 
cursor:url(../../../design/default/plugins/accessibility_plugin/css/data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=64 height=64 viewBox=0 0 24 24 fill=black stroke=white stroke-width=2%3E%3Cpath d=M7 2l12 11.2-5.8.5 3.3 7.3-2.2.9-3.2-7.4-4.4 4.6z/%3E%3C/svg%3E) 0 0,auto !important
}
/* Reading Guide */
#a11y-reading-guide {
position:fixed;
left:0;
width:100%;
height:20px;
background:rgba(255,255,0,0.2);
border-top:2px solid #ff0000;
border-bottom:2px solid #ff0000;
pointer-events:none;
z-index:2147483647;
display:none;
box-shadow:0 0 0 9999px rgba(0,0,0,0.5)
}
body.a11y-guide-on #a11y-reading-guide { display:block
}
/* High contrast theme (AA) */
body.a11y-contrast {
--a11y-bg:#000;
--a11y-fg:#fff;
--a11y-border:#fff;
--a11y-focus:#ffbf47;
/* high-visibility focus */
--a11y-link:#00afff
}
body.a11y-contrast,body.a11y-contrast * {
background-color:var(--a11y-bg) !important;
color:var(--a11y-fg) !important
}
body.a11y-contrast a { color:var(--a11y-link) !important;
text-decoration:underline
}
body.a11y-contrast .a11y-action,body.a11y-contrast button,body.a11y-contrast input,body.a11y-contrast select,body.a11y-contrast textarea {
border:2px solid var(--a11y-border) !important
}
body.a11y-contrast .accessibility_menu_btn:focus,body.a11y-contrast .a11y-action:focus,body.a11y-contrast .skip-to-content:focus {
outline:3px solid var(--a11y-focus) !important;
outline-offset:3px !important
}
.a11y-underline a { text-decoration:underline
}
/* Dark mode theme (AA compliant) */
body.a11y-dark {
--a11y-dark-bg:#1a1a1a;
--a11y-dark-fg:#e8e8e8;
--a11y-dark-link:#60b0ff;
--a11y-dark-border:#606060;
background-color:var(--a11y-dark-bg);
color:var(--a11y-dark-fg)
}
body.a11y-dark a { color:var(--a11y-dark-link)
}
body.a11y-dark input,body.a11y-dark textarea,body.a11y-dark select,body.a11y-dark button {
background-color:#2a2a2a;
color:var(--a11y-dark-fg);
border:1px solid var(--a11y-dark-border)
}
/* Skip to content link */
.skip-to-content{
position:absolute;
top:-1000px;
right:10px;
background:#fff;
color:#000;
padding:10px 14px;
border:2px solid #1a73e8;
z-index:2000
}
.skip-to-content:focus{ top:10px;
outline:3px solid #1a73e8
}
/* Live region offscreen styling */
.a11y-live-region{ position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(1px,1px,1px,1px);
white-space:nowrap
}
/* Error summary styles */
.a11y-error-summary { border:3px solid #ba1c1c;
padding:12px;
background:#fff3f3;
color:#222
}
.a11y-error-summary h2 { margin:0 0 8px;
font-size:18px
}
.a11y-error-summary ul { margin:0;
padding-inline-start:20px
}
/* Motion safeguards */
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important
}
}
body.a11y-reduce-motion *,body.a11y-reduce-motion *::before,body.a11y-reduce-motion *::after {
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important
}
@media (max-width:767px){
.accessibility_menu {
width:58px;
height:59px;
bottom:75px;
top:auto
}
.accessibility_menu .accessibility_menu_btn {
width:58px;
height:59px
}
.accessibility_menu .items_holder {
margin:31px 0 0 0
}
}
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
/* ============================================================
MagmaSDK 15.1 · admin design tokens — CANONICAL,GLOBAL HOME.
This file is concatenated into every admin CSS bundle by the
per-plugin css.css loop in css/content/parts/header.php,so the
:root tokens below are in scope for every admin document:the
admin panel (admin.panel.css) AND the on-page editor context
(ifs/oper.css,wysiwyg connected.css) AND the plugin maker.
Single source of truth — change a value here and every admin
surface that consumes var(--mg-*) moves with it.
Neutral gray ramp is faintly cool so it harmonizes with the
indigo accent without visibly bluing any gray (ad-hoc grays
across the admin were snapped to the nearest step). Accent
chosen on WCAG grounds:#4f46e5 = 6.29:1 on white (passes AA);
the legacy cyan hue would fail AA. See magmasdk-15-1-box memory.
============================================================ */
:root {
--mg-accent:#4f46e5;
/* house UI accent (Indigo) */
--mg-accent-weak:#ecebfb;
/* faint accent fill — active tabs/buttons on white */
--mg-accent-strong:#3b34c4;
/* darker accent — filled-button hover/pressed */
--mg-gray-50:#f7f8fa;
--mg-gray-100:#ececef;
--mg-gray-200:#e2e2e6;
--mg-gray-300:#d5d5da;
--mg-gray-400:#b6b6bb;
--mg-gray-500:#8b8b90;
--mg-gray-600:#6f6f75;
--mg-gray-700:#47474c;
--mg-gray-800:#303034;
--mg-gray-900:#1f1f23;
/* radius scale (consolidates the scattered 4/5/7/10px radii) */
--mg-radius-sm:4px;
--mg-radius:8px;
--mg-radius-lg:12px;
--mg-radius-pill:999px;
/* elevation — flat & modern;
replaces the stacked skeuomorphic
inset "bevel" shadows the admin chrome used to fake 3D depth */
--mg-shadow-sm:0 1px 2px rgba(17,17,26,.06);
--mg-shadow:0 2px 6px rgba(17,17,26,.10);
--mg-shadow-md:0 4px 12px rgba(17,17,26,.12);
--mg-shadow-lg:0 10px 30px rgba(17,17,26,.16);
/* spacing scale (defined for the system;
consumed incrementally) */
--mg-space-1:4px;
--mg-space-2:8px;
--mg-space-3:12px;
--mg-space-4:16px;
--mg-space-6:24px
}
/* 15.1 · visible keyboard focus (WCAG 2.4.7). Uses the house accent.
!important defeats the legacy `outline:0` scattered through the admin,
so keyboard users can always see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline:2px solid var(--mg-accent) !important;
outline-offset:2px !important
}
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}