| , callouts) just fill width. */
.gd-cpage .textArea table[style*="width"],.gd-cpage .responsive-table[style*="width"]{width:100% !important}
.gd-cpage .textArea table td[style*="width"],.gd-cpage .responsive-table td{width:auto !important}
}
/* primary CTA inside content intro (avoid blue-on-blue: solid + shadow) */
.gd-cpage .blue-button{display:inline-flex;align-items:center;gap:10px;background:var(--grad);color:#fff;padding:17px 42px;border-radius:999px;font-weight:800;font-size:1.18rem;box-shadow:0 16px 34px rgba(43,179,230,.38)}
.gd-cpage .blue-button:hover{transform:translateY(-2px);color:#fff;box-shadow:0 22px 44px rgba(43,179,230,.48)}
/* phones: the desktop CTA size (1.18rem / 17px 42px) turns long labels (e.g. the FlyMoney CTA) into a
near-full-bleed banner on narrow screens. Compact centered pill instead: fit-content + a hard viewport
cap so it can NEVER poke past the screen; extreme labels wrap inside the pill instead of overflowing.
:not(.mybutton) keeps the small "קרא עוד" listing pills untouched. */
@media(max-width:600px){
.gd-cpage .blue-button:not(.mybutton){display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:min(100%,calc(100vw - 24px));box-sizing:border-box;margin-left:auto;margin-right:auto;justify-content:center;text-align:center;padding:12px 18px;font-size:1rem;gap:8px;box-shadow:0 10px 22px rgba(43,179,230,.28)}
/* callback forms ([contact-fast] card + bottom contact band): full-width centered submit instead of a
small side-hugging pill - reads like a proper form CTA on a phone. */
.gd-cpage .fastContact .goform .mybutton,.gd-cpage .contact-band-form .mybutton{display:flex;width:100%;justify-content:center;margin-top:6px}
}
/* phone / contact RTL */
.gd-cpage .leftContact center,.gd-cpage center{text-align:center}
.gd-cpage [dir=ltr]{display:inline-block}
/* sidebar cards */
.gd-cpage .block,.gd-cpage .leftContact,.gd-cpage .leftBlocks .leftContact{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 44px rgba(20,90,150,.09);padding:26px 24px;margin-bottom:22px}
.gd-cpage .leftContact{background:linear-gradient(160deg,#f3fafe,#fff 60%);border-color:rgba(44,161,218,.16)}
.gd-cpage .leftContact br{display:none}
.gd-cpage .leftContact>b{display:block;font-size:1.22rem;font-weight:800;color:var(--ink);margin-bottom:2px}
.gd-cpage .leftContact>span{display:block;color:var(--slate);margin-bottom:18px}
.gd-cpage .leftContact .mybutton{margin-top:4px}
.gd-cpage .leftContact .note_text,.gd-cpage .leftContact .approve,.gd-cpage .leftContact .custom-checkbox{margin-top:14px}
.gd-cpage .leftContact center,.gd-cpage center{margin-top:18px;font-size:1.05rem;color:var(--slate)}
.gd-cpage .leftContact center a,.gd-cpage center a[href^="tel"]{color:var(--blue-d);font-weight:800;font-size:1.12rem}
.gd-cpage .block_header b,.gd-cpage .block_header{font-weight:800;color:var(--ink);font-size:1.1rem;margin-bottom:10px;display:block}
.gd-cpage .block .list,.gd-cpage .block ul{list-style:none;margin:0;padding:0}
.gd-cpage .block li{border-top:1px solid var(--soft);padding:0}
.gd-cpage .block li a{display:block;padding:11px 0;color:var(--slate);font-weight:600}
.gd-cpage .block li a:hover{color:var(--blue-d)}
.gd-cpage .leftContact .mybutton{width:100%}
.gd-cpage .leftContact input:not([type=checkbox]),.gd-cpage .leftContact textarea,.gd-cpage .goform input:not([type=checkbox]),.gd-cpage .goform textarea{width:100%;border:1.5px solid #c9daeb;border-radius:14px;padding:14px 16px;margin-bottom:12px;font-size:1rem;color:var(--ink);background:#fff;box-shadow:0 2px 6px rgba(20,90,150,.05);transition:border-color .15s,box-shadow .15s;direction:rtl;text-align:right}
.gd-cpage .goform input::placeholder,.gd-cpage .leftContact input::placeholder{text-align:right;color:#93a9be}
.gd-cpage .goform input:not([type=checkbox]):hover,.gd-cpage .leftContact input:not([type=checkbox]):hover{border-color:#a9c6e0}
/* [contact-fast] callback card: page-wide it reads as endless full-width lines on desktop with a tiny
side-hugging pill button. Constrain + center the card (sidebar-form proportions), full-width submit,
tidy consent row - on every screen size. */
.gd-cpage .fastContact{max-width:640px;margin-left:auto;margin-right:auto}
/* the .smallWrap/.wrap container classes zero the card's padding (they are page-section sizers) - force
real inner padding so the fields never sit flush against the card frame. */
.gd-cpage .fastContact.smallWrap.wrap{padding:30px !important}
.gd-cpage .fastContact .goform .mybutton{display:flex;width:100%;align-items:center;justify-content:center;margin-top:10px}
.gd-cpage .fastContact .goform .note_text{margin-top:14px}
@media(max-width:600px){.gd-cpage .fastContact.smallWrap.wrap{padding:22px 16px !important}}
/* consent checkbox: the V flush to the right of the text (RTL) */
.gd-cpage .note_text,.gd-cpage .approve,.gd-cpage .custom-checkbox{display:block;position:relative;padding-right:28px;text-align:right;line-height:1.6;font-size:.86rem;color:var(--slate)}
/* opacity:1 + appearance:none !important so the consent checkbox SHOWS on the compare page too:
main.css (loaded only there) has `.custom-checkbox input{opacity:0}` (legacy hides the real box and
shows a .checkmark span, which refresh hides) -> without this both vanish and the form looks
different from every other page. This restores ONE uniform custom checkbox everywhere. */
.gd-cpage .note_text input[type=checkbox],.gd-cpage .approve input[type=checkbox],.gd-cpage .custom-checkbox input[type=checkbox]{position:absolute;right:0;top:2px;width:18px;height:18px;margin:0;opacity:1!important;-webkit-appearance:none!important;appearance:none!important}
.gd-cpage .note_text .checkmark,.gd-cpage .approve .checkmark,.gd-cpage .custom-checkbox .checkmark{display:none}
.gd-cpage .leftContact .note_text,.gd-cpage .leftContact .approve{font-size:.82rem;color:var(--slate);display:block;margin-top:8px}
@media(max-width:900px){.gd-cpage .flexWrap{flex-direction:column}.gd-cpage .leftBlocks{flex:0 0 auto;width:100%;position:static}.gd-cpage .smallTextArea.inline{flex-direction:column;text-align:center}.gd-cpage .smallTextArea.inline img{order:-1;flex:0 0 auto;max-width:200px}
/* mobile: sidebar contact form already shows (stacked) -> hide the duplicate bottom contact-band. NB: .contact-band is a SIBLING of main.gd-cpage (not a descendant) so it must NOT be prefixed with .gd-cpage or the rule never matches */
.contact-band.cpage-mod{display:none}
.gd-cpage .smallTextArea.inline>div:not(.mobile_buy){align-items:center}}
/* ===== magazine article: author/social box + related-article cards (standalone) ===== */
.gd-cpage article{margin:0}
.gd-cpage #writerBox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:32px;padding:20px 22px;background:var(--soft);border:1px solid var(--line);border-radius:18px}
.gd-cpage #writerBox .info{display:flex;align-items:center;gap:14px}
.gd-cpage #writerBox .info img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid #fff;box-shadow:0 4px 12px rgba(20,90,150,.12)}
.gd-cpage #writerBox .info .texts b{display:block;font-weight:800;color:var(--ink)}
.gd-cpage #writerBox .info .texts span{color:var(--slate);font-size:.92rem}
.gd-cpage #writerBox .social{display:flex;align-items:center;gap:10px}
.gd-cpage #writerBox .social>span{font-weight:800;color:var(--ink)}
.gd-cpage #writerBox .social .links{display:flex;gap:8px}
.gd-cpage #writerBox .social .links a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1rem;transition:transform .15s ease}
.gd-cpage #writerBox .social .links a:hover{transform:translateY(-2px);color:#fff}
.gd-cpage #writerBox .social .whatsapp{background:#25d366}
.gd-cpage #writerBox .social .twitter{background:#1da1f2}
.gd-cpage #writerBox .social .facebook{background:#1877f2}
.gd-cpage .banner_link{display:block;max-width:100%;height:auto;border-radius:14px;margin:18px 0}
.gd-cpage #articlesBoxes .items{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;padding:0;margin:34px 0 0}
.gd-cpage #articlesBoxes .items .item_box{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(20,90,150,.08);transition:transform .2s ease,box-shadow .2s ease}
.gd-cpage #articlesBoxes .items .item_box:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(20,90,150,.14)}
.gd-cpage #articlesBoxes .items .item_box>img{width:100%;height:160px;object-fit:cover}
.gd-cpage #articlesBoxes .items .item_text{padding:16px 18px;flex:1;display:flex;flex-direction:column}
.gd-cpage #articlesBoxes .items time{color:var(--blue-d);font-size:.82rem;font-weight:700}
.gd-cpage #articlesBoxes .items h3{font-size:1.08rem;font-weight:800;margin:6px 0 8px;line-height:1.3;border:0;padding:0}
.gd-cpage #articlesBoxes .items h3 a{color:var(--ink)}
.gd-cpage #articlesBoxes .items .item_text .textArea{color:var(--slate);font-size:.92rem;line-height:1.6;margin-bottom:14px}
.gd-cpage #articlesBoxes .items .mybutton{margin:0 18px 18px;align-self:flex-start;padding:9px 22px;font-size:.9rem}
/* magazine category-listing: filter pills (a.secondaryButton in .categories) + pagination */
.gd-cpage .categories{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 26px}
.gd-cpage .categories .secondaryButton{display:inline-flex;align-items:center;padding:9px 20px;border-radius:999px;background:#fff;border:1.5px solid var(--line);color:var(--blue-d);font-weight:700;font-size:.95rem;transition:.15s ease}
.gd-cpage .categories .secondaryButton:hover{border-color:var(--blue);background:var(--soft)}
.gd-cpage .categories .secondaryButton.active{background:var(--grad);color:#fff;border-color:transparent}
.gd-cpage .pagination,.gd-cpage .pages{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;padding:0;margin:30px 0 0}
.gd-cpage .pagination a,.gd-cpage .pagination span,.gd-cpage .pages a,.gd-cpage .pages span{display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--blue-d);font-weight:700;transition:.15s ease}
.gd-cpage .pagination a:hover,.gd-cpage .pages a:hover{border-color:var(--blue);background:var(--soft)}
.gd-cpage .pagination .active,.gd-cpage .pagination .current,.gd-cpage .pages .active,.gd-cpage .pages .current{background:var(--grad);color:#fff;border-color:transparent}
@media(max-width:980px){.gd-cpage #articlesBoxes .items{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gd-cpage #articlesBoxes .items{grid-template-columns:1fr}}
/* ===== content-page bottom modules (reviews + contact) - compact (smaller than half) ===== */
.cpage-mod{padding:30px 0}
.cpage-mod .sec-head{margin-bottom:16px}
.cpage-mod .sec-head h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:0}
.reviews.cpage-mod{background:linear-gradient(180deg,#fff,var(--soft))}
/* shrink the review cards on content pages */
.reviews.cpage-mod .rev-track{padding:8px 0}
.reviews.cpage-mod .rev-rail{gap:16px}
.reviews.cpage-mod .rev{flex:0 0 270px;padding:18px 18px}
.reviews.cpage-mod .rev .top{gap:10px;margin-bottom:8px}
.reviews.cpage-mod .rev .ava{width:42px;height:42px}
.reviews.cpage-mod .rev p{font-size:.9rem;line-height:1.55}
.reviews.cpage-mod .rev .q{font-size:2.2rem}
.reviews.cpage-mod .rev-arrows{margin-top:10px}
.reviews.cpage-mod .rev-foot{margin-top:10px}
.contact-band{background:linear-gradient(135deg,#eaf6fd,#f7fbff)}
.contact-band .sec-head p{color:var(--slate);margin-top:6px;font-size:1rem}
.contact-band .sec-head p a{color:var(--blue-d);font-weight:800}
.contact-band-form{max-width:720px;margin:0 auto}
.contact-band-form .goform{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:center}
.contact-band-form fieldset{border:0;margin:0;padding:0;flex:1 1 210px;min-width:0}
.contact-band-form .inputArea{width:100%}
.contact-band-form input[type=text],.contact-band-form input[type=tel]{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;font-size:1rem;background:#fff;direction:rtl;text-align:right}
.contact-band-form .mybutton{flex:0 0 auto;background:var(--grad);color:#fff;border:0;border-radius:999px;padding:13px 38px;font-weight:800;font-size:1.05rem;cursor:pointer;white-space:nowrap;box-shadow:0 12px 26px rgba(43,179,230,.32);transition:transform .18s}
.contact-band-form .mybutton:hover{transform:translateY(-2px)}
/* consent: keep checkbox inline-right with the (block- ) text, vertically centered, one row */ .contact-band-form .note_text{flex-basis:100%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:7px;font-size:.8rem;color:var(--slate);text-align:right;margin-top:4px} .contact-band-form .note_text p{display:inline;margin:0} .contact-band-form .note_text a{color:var(--blue-d)} .contact-band-form .note_text input[type=checkbox]{flex:0 0 auto;position:relative;width:18px;height:18px;margin:0} @media(max-width:600px){.cpage-mod{padding:24px 0}.contact-band-form .goform{flex-direction:column}} /* =================================================================== COMPARISON PAGE (.gd-compare) - it loads main.css for the #pricesCompare module; main.css's legacy content layout (.page/.flexWrap as flex) then explodes the article wrappers to ~2.1M px inside the new chrome, and slick double-initialises the .prices_list carousel. Re-constrain the legacy content to a single mobile-safe column and tame the broken slick track. Scoped to .gd-compare so other gd-cpages are untouched. =================================================================== */ /* tame ONLY the legacy #pricesCompare wizard's OWN inner wrapper (main.css flex would explode it); the content-section .flexWrap + .innerWrap are intentionally LEFT to the standard .gd-cpage two-column rules, so the left-sidebar contact form renders here exactly like on /מחירון. */ .gd-compare .page,.gd-compare .contactWrap,.gd-compare .smallContentWrap,.gd-compare #pricesCompare .innerWrap{display:block!important;width:auto!important;max-width:100%!important;min-width:0!important;float:none!important} .gd-compare .textArea{max-width:100%!important;min-width:0!important;width:auto!important} .gd-compare .textArea table:has(th),.gd-compare .responsive-table{display:table!important;width:100%!important;table-layout:auto!important} /* main.css (compare-only) also restyles the sidebar contact form differently from every other content page: centers the text, enlarges the subtitle to 1.4rem so it WRAPS to 2 lines, makes the form display:flex w/ padding, and grows the input/button via line-height. Reset to the refresh sidebar form so it is IDENTICAL to /מחירון and the rest. */ .gd-compare .leftContact{text-align:start!important} .gd-compare .leftContact>span{font-size:1rem!important;line-height:1.6!important} .gd-compare .leftContact form{display:block!important;margin:0!important;padding:0!important} .gd-compare .leftContact input:not([type=checkbox]){line-height:normal!important} .gd-compare .leftContact .mybutton{line-height:1.2!important;height:auto!important} /* ============ COMPARE WIZARD top ============ */ /* full-bleed the wizard's bluish radial background to the screen edges (was inset to the content column width -> looked cut on the left). body has overflow-x:clip so 100vw can't add h-scroll. */ .gd-compare #pricesCompare{width:100vw!important;max-width:100vw!important;margin-inline:calc(50% - 50vw)!important;box-sizing:border-box;background:none!important} .gd-compare #pricesCompare>.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px;box-sizing:border-box} /* ONE seamless full-width soft-blue->white wash over the whole top (hero + wizard). The wizard used to paint its OWN white/radial bg on top of the page gradient -> a hard "stripe" seam (top + left edges). Now #pricesCompare bg is removed and this single gradient (on the full-width main) flows through cleanly behind everything. Scoped to .gd-compare so other pages keep the standard wash. */ .gd-cpage.gd-compare{background:linear-gradient(180deg,rgba(44,161,218,.12) 0,rgba(44,161,218,.06) 540px,#fff 1120px)!important} /* compare page: center the H1 + subtitle over the centered stepper (scoped by .pageTitle/.subTitle classes so the article content H2s below keep their normal start alignment; desktop-only to leave mobile exactly as the site ships it). */ @media(min-width:769px){.gd-compare .pageTitle,.gd-compare .subTitle{text-align:center!important}} /* DESKTOP-ONLY stepper - same language as the homepage "how it works" section: big ICON circles that go light->gradient as you progress, a small number badge, a dashed connector that FILLS blue up to the current step, and a glow+scale on the active circle. Per-step icons are injected into each .step-num by the stepper observer JS. Mobile stepper deliberately untouched (user: "במובייל אל תיגע"). */ @media(min-width:769px){ /* kill the legacy backdrop-filter:blur(10px) on the card - Chrome blurs the card's OWN descendant text (the small badge numbers worst of all) when backdrop-filter is set. Use a clean opaque-white card instead so numbers/labels/icons render crisp, like the homepage (which has no backdrop blur). */ .gd-compare #pricesCompare .steps{grid-template-columns:repeat(4,1fr)!important;align-items:start;padding-top:10px!important;background:#fff!important;isolation:auto!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* BADGE-BLUR ROOT FIX (real-GPU compositing, not reproducible in headless): legacy main.css forces the card onto its own GPU layer via isolation:isolate!important, and forces .step-num onto a fractional transform (position:absolute;left/top:50%;translate(-50%,-50%)!important) + transition:transform - both rasterize the tiny number badge blurry on real Chrome. Neutralize: opaque card + isolation:auto, and put the circle in normal flow with NO transform. "html body" raises specificity to beat the legacy !important rules (1,2,0). Desktop-only block, so mobile stays exactly as the site renders it. */ html body .gd-compare #pricesCompare .steps{background:#fff!important;isolation:auto!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} html body .gd-compare #pricesCompare .steps a .step-num{position:relative!important;left:auto!important;top:auto!important;transform:none!important;transition:background .4s ease,box-shadow .45s ease,border-color .4s!important} /* dashed grey connector + dashed blue fill (width driven by --fill-w from the observer; :has() does not reliably re-invalidate a ::before when the wizard toggles .current) */ /* NO solid bar - only dashed lines. Hide the legacy .step_bar entirely. */ .gd-compare #pricesCompare .wrap .steps .step_bar,.gd-compare #pricesCompare .wrap .steps .step_bar::after,.gd-compare #pricesCompare .wrap .steps .step_bar:after{display:none!important;background:none!important} /* faint grey dashed track (full) + a BLUE dashed fill that grows SLOWLY to the current step (width=--fill-w from the observer; slow transition so the user actually watches it advance). */ .gd-compare #pricesCompare .steps::before{content:"";position:absolute;top:55px;height:3px;right:13%;left:13%;background:repeating-linear-gradient(90deg,#cfdae6 0 8px,transparent 8px 16px);z-index:1} .gd-compare #pricesCompare .steps::after{content:"";position:absolute;top:55px;height:3px;right:13%;width:var(--fill-w,0);max-width:74%;background:repeating-linear-gradient(90deg,var(--blue) 0 8px,transparent 8px 16px);z-index:2;transition:width 1.4s cubic-bezier(.45,.05,.25,1)} .gd-compare #pricesCompare .steps a{position:relative;z-index:3;color:#9bb3c4!important;font-weight:700;font-size:1.02rem!important} /* icon circle */ .gd-compare #pricesCompare .steps a .step-num{display:grid!important;place-items:center;box-sizing:content-box!important;width:80px!important;height:80px!important;margin:0 auto 16px!important;border-radius:50%!important;background:#fff!important;border:6px solid #fff!important;box-shadow:0 10px 26px rgba(31,107,160,.16);font-size:0!important;font-style:normal;position:relative;transition:transform .45s cubic-bezier(.2,.85,.25,1),background .4s ease,box-shadow .45s ease,border-color .4s} .gd-compare #pricesCompare .steps a .step-num svg{width:42px;height:42px;fill:none;stroke:#79a9cb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s ease} .gd-compare #pricesCompare .steps a .step-num .stp-badge{position:absolute!important;top:-6px!important;right:-6px!important;left:auto!important;bottom:auto!important;width:30px!important;height:30px!important;border-radius:50%!important;background:#fff!important;color:var(--blue-d)!important;font-weight:800!important;font-size:.95rem!important;line-height:30px!important;display:block!important;text-align:center!important;box-shadow:0 5px 16px rgba(15,40,80,.14)!important;border:2px solid #e3f0fa!important;transition:.4s} .gd-compare #pricesCompare .steps a>span{display:none!important} /* done + current: gradient fill, white icon + white-ring badge */ .gd-compare #pricesCompare .steps a.gd-done .step-num,.gd-compare #pricesCompare .steps a.current .step-num{background:var(--grad)!important;border-color:#fff!important;box-shadow:0 14px 32px rgba(43,179,230,.34)} .gd-compare #pricesCompare .steps a.gd-done .step-num svg,.gd-compare #pricesCompare .steps a.current .step-num svg{stroke:#fff} .gd-compare #pricesCompare .steps a.gd-done .step-num .stp-badge,.gd-compare #pricesCompare .steps a.current .step-num .stp-badge{background:#fff!important;color:var(--blue-d)!important;border-color:#fff!important} /* active circle: a STATIC stronger glow (no transform, no animation - both rasterize the circle into a compositing layer that blurs the descendant number badge; homepage uses neither). */ .gd-compare #pricesCompare .steps a.current .step-num{box-shadow:0 16px 38px rgba(43,179,230,.42)!important} .gd-compare #pricesCompare .steps a.current,.gd-compare #pricesCompare .steps a.gd-done{color:var(--blue-d)!important;font-weight:800} } /* MOBILE: the observer injects the icon SVG + number badge into .step-num on every width, but the icon-circle styling is desktop-only - so on phones HIDE the icon and render the badge as the plain number (restores the original untouched mobile stepper, per "במובייל אל תיגע"). */ @media(max-width:768px){ .gd-compare #pricesCompare .steps a .step-num svg{display:none!important} .gd-compare #pricesCompare .steps a .step-num .stp-badge{position:static!important;inset:auto!important;top:auto!important;right:auto!important;background:none!important;box-shadow:none!important;border:0!important;width:auto!important;height:auto!important;color:inherit!important;font:inherit!important} } /* ============================================================================ CLEAN homepage-clone stepper (DESKTOP only). The legacy #pricesCompare .steps markup carries ~40 conflicting legacy !important rules (#pricesCompare .wrap .steps a span ... forcing the number to fractional box sizes + border rings) that rasterize the tiny number blurry on real-GPU Chrome. Rather than keep patching it, we build a FRESH stepper with brand-new .gdh-* classes that NO legacy selector matches (verified by audit), render the number as plain native text, and mirror the wizard's active step. Legacy .steps stays in the DOM (the wizard drives it) but is visually clipped on desktop once the clone mounts (.gdh-on). Colors hardcoded to dodge the inherited #pricesCompare var cascade. Mobile builds no clone -> native legacy stepper renders exactly as shipped. */ @media(min-width:769px){ .gd-compare.gdh-on #pricesCompare .steps,.gd-compare.gdh-on #pricesCompare .wrap .steps{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} .gdh-stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;margin:6px auto 30px;max-width:1000px;direction:rtl;background:#fff;border:1px solid #e7eef6;border-radius:22px;box-shadow:0 16px 44px rgba(31,107,160,.10);padding:30px 26px 26px} .gdh-stepper .gdh-conn{position:absolute;top:74px;right:17%;left:17%;height:3px;background:repeating-linear-gradient(90deg,#cfd9e3 0 9px,transparent 9px 18px)} /* blue fill = a FULL-box dashed line in the SAME box as the grey track, revealed by clip-path (homepage pattern). Same box + same gradient => the blue dashes land EXACTLY on the grey ones (no "line on line"). RTL: reveal from the right, clip from the left. */ .gdh-stepper .gdh-conn-fill{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#1b9fda 0 9px,transparent 9px 18px);clip-path:inset(0 0 0 100%);transition:clip-path 1.1s cubic-bezier(.4,.1,.3,1)} .gdh-stp{position:relative;z-index:1;text-align:center;padding:0 8px;cursor:pointer} .gdh-circle{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#dce9f3 0%,#cfe0ee 100%);display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 10px 24px rgba(31,107,160,.14);border:6px solid #fff;position:relative;transition:background .4s ease,box-shadow .45s ease} .gdh-circle svg{width:40px;height:40px;fill:none;stroke:#79a9cb;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s ease} .gdh-num{position:absolute;top:-6px;right:-6px;width:30px;height:30px;border-radius:50%;background:#fff;color:#0E7CB8;font-weight:800;font-size:.95rem;line-height:30px;display:block;text-align:center;border:2px solid #eaf6fd;box-shadow:0 4px 12px rgba(15,40,80,.10)} /* label uses a DIV (not h3) + !important font-size so the legacy "#pricesCompare h3" rule (which blew the label up to ~34px) cannot reach it. */ .gdh-t{font-size:.92rem!important;font-weight:700!important;color:#5d6e82;margin:0!important;line-height:1.35;transition:color .35s ease} .gdh-stp.gdh-done .gdh-circle,.gdh-stp.gdh-cur .gdh-circle{background:linear-gradient(135deg,#41c2ef 0%,#1b9fda 100%);border-color:#fff;box-shadow:0 14px 30px rgba(43,179,230,.32)} .gdh-stp.gdh-done .gdh-circle svg,.gdh-stp.gdh-cur .gdh-circle svg{stroke:#fff} .gdh-stp.gdh-done .gdh-num,.gdh-stp.gdh-cur .gdh-num{color:#0E7CB8;background:#fff;border-color:#fff} .gdh-stp.gdh-cur .gdh-circle{box-shadow:0 16px 36px rgba(43,179,230,.40)} .gdh-stp.gdh-cur .gdh-t,.gdh-stp.gdh-done .gdh-t{color:#0E7CB8} } /* prices module on the compare page: the refresh JS carousel now runs here too (general.js's slick is suppressed on .gd-cpage preview pages via a main.gd-cpage guard), so the compare page uses the SAME .pl-wrap slider + .pl-buy "רכישה מהירה" button + red discount pill as every other content page (מחירון etc.). No compare-specific prices rules - fully uniform. */ /* =================================================================== MOBILE - legacy content modules (.textArea/.innerWrap/.page/.flexWrap) and wide price tables overflow/cut on phones across ALL content pages. Force a single safe column + make the price tables fit the screen. Mobile-only (max-width) so desktop multi-column layouts stay intact. =================================================================== */ @media(max-width:768px){ .gd-cpage .page,.gd-cpage .flexWrap,.gd-cpage .contactWrap,.gd-cpage .innerWrap,.gd-cpage .smallContentWrap{display:block!important;width:auto!important;max-width:100%!important;min-width:0!important;float:none!important} .gd-cpage .textArea{max-width:100%!important;min-width:0!important} /* tables become horizontal-scroll / finger-swipe containers (NOT crammed): narrow tables fit, wide multi-company comparison tables scroll inside their box instead of being cut off. */ .gd-cpage .textArea table:has(th),.gd-cpage .responsive-table{display:table!important;width:100%!important;table-layout:auto!important} /* nowrap ONLY on real DATA tables (have | ) + .responsive-table, so number columns stay aligned and the table swipes; tip/CTA/layout tables (no | ) keep wrapping = reflow responsively, never a scroller. */ .gd-cpage .textArea table:has(th) th,.gd-cpage .responsive-table th{white-space:normal!important} .gd-cpage .textArea table:has(th) td,.gd-cpage .responsive-table td{white-space:nowrap!important} /* tip "טיפ קטן" card (inline table w/ a.thirdButton): always reflow, never scroll */ .gd-cpage .textArea table:has(a.thirdButton),.gd-cpage .textArea table:has(a.thirdButton) td{white-space:normal!important;overflow:visible!important} /* allow the last column to wrap - it's usually a sentence-length notes/description column (e.g. כלל extensions table); price/number columns are short so wrapping is a no-op for them. */ .gd-cpage .responsive-table td:last-child,.gd-cpage .textArea table:has(th) td:last-child{white-space:normal!important;overflow-wrap:break-word} } @media(max-width:600px){ /* mild compaction so most price tables fit without needing a swipe; wider ones still swipe via overflow-x */ .gd-cpage .responsive-table th,.gd-cpage .textArea table:has(th) th{padding:10px 8px!important;font-size:.82rem!important} .gd-cpage .responsive-table td,.gd-cpage .textArea table:has(th) td{padding:9px 8px!important;font-size:.84rem!important} } /* horizontally-scrollable tables get a PURE-VISUAL left-edge fade (RTL: 'more content' is to the left). NO text label - just the soft gradient affordance. JS (gd_chrome) wraps scrollable DATA tables in .gd-tscroll and toggles .gd-atend (fade hidden) when fully scrolled. */ .gd-tscroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .gd-tscroll::after{content:"";position:absolute;top:0;bottom:0;left:0;width:46px;pointer-events:none;background:linear-gradient(to left,rgba(15,45,80,0),rgba(15,45,80,.20));opacity:1;transition:opacity .25s;border-radius:0 16px 16px 0;z-index:2} .gd-tscroll.gd-atend::after{opacity:0} /* neutralise leftover legacy pastel highlights pasted into CMS content (#FFFFE0 yellow / #F0FFF0 green) so highlighted spans match the soft-blue palette instead of clashing with the new design. */ .gd-cpage [style*="#FFFFE0"],.gd-cpage [style*="#ffffe0"],.gd-cpage [style*="#F0FFF0"],.gd-cpage [style*="#f0fff0"]{background-color:var(--soft2)!important} |
|---|