/* Groweber — interface languages (switch in the header, Arabic right to left) */

/* page hidden while it is translated (never more than 2.5 s, even without the script) */
html.gw-i18n-wait body { opacity: 0; animation: gw-i18n-show 0s 2.5s forwards; }
@keyframes gw-i18n-show { to { opacity: 1; } }

/* ---------- switch ---------- */
/* round flag + code of the current language, centred between "Contact us" and the account button (same gaps on both sides) */
.gw-lang-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 11px; margin-inline: 8px 0; border: 0; border-radius: 10px; background: transparent; color: var(--fg-131311, #131311); font: 700 12.5px/1 Satoshi, "Satoshi Placeholder", system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; flex: none; transition: border-color .15s, background .15s; }
.gw-lang-btn:hover, .gw-lang-btn[aria-expanded="true"] { opacity: .75; }
.gw-lang-btn img { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.gw-lang-btn + .gw-acc-desk { margin: 0; margin-inline-start: 8px; }   /* 13px on both sides of the switch, also right to left */
/* mobile: the switch and the account icon together on the burger side */
.gw-lang-btn.is-mob { height: 34px; padding: 0 9px; gap: 5px; margin: 0; margin-inline-start: auto; }
.gw-lang-btn.is-mob + .gw-acc-mob { margin: 0; margin-inline: 8px 14px; }
.gw-lang-menu { position: fixed; z-index: 2147483000; min-width: 178px; padding: 6px; border: 1px solid var(--bd-131311-a10, rgba(19, 19, 17, 0.1)); border-radius: 14px; background: var(--bg-ffffff, #ffffff); box-shadow: 0 18px 44px var(--sh-131311-a16, rgba(19, 19, 17, 0.16)); animation: gw-lang-in .16s ease-out; }
@keyframes gw-lang-in { from { opacity: 0; transform: translateY(-4px); } }
.gw-lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--fg-131311, #131311); font: 600 14.5px/1.2 Satoshi, "Tajawal", system-ui, sans-serif; cursor: pointer; text-align: start; }
.gw-lang-menu button img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.gw-lang-menu button span { flex: 1; }
.gw-lang-menu button b { font: 700 11px/1 Satoshi, system-ui, sans-serif; letter-spacing: .06em; color: var(--fg-8a8a85, #8a8a85); }
.gw-lang-menu button:hover, .gw-lang-menu button:focus-visible { background: var(--bg-f3f3ef, #f3f3ef); outline: none; }
.gw-lang-menu button[aria-checked="true"] { background: var(--bg-c6fd50, #c6fd50);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-lang-menu button[aria-checked="true"] b { color: var(--fg-131311, #131311); }
.gw-lang-menu button[lang="ar"] span { font-family: "Tajawal", system-ui, sans-serif; font-weight: 700; }

/* ---------- Arabic ---------- */
html[lang="ar"] body, html[lang="ar"] body *:not(svg):not(svg *):not(.gw-lang-menu b) { font-family: Satoshi, "Tajawal", "Satoshi Placeholder", system-ui, sans-serif !important; letter-spacing: 0 !important; }
/* Arabic letters are taller than Latin ones: the tight English line heights would make the lines overlap */
/* texts aligned on the left in English start on the right */
html[dir="rtl"] [style*="--framer-text-alignment:left"], html[dir="rtl"] [style*="--framer-text-alignment: left"] { --framer-text-alignment: right !important; }
html[dir="rtl"] .framer-text { text-align: var(--framer-text-alignment, start); }
/* moving strips (logos, reviews) keep running left to right */
html[dir="rtl"] [data-framer-name="Ticker"], html[dir="rtl"] .framer-ticker, html[dir="rtl"] ul[style*="will-change"] { direction: ltr; }
/* numbers, emails, links and codes stay left to right inside Arabic text */
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"], html[dir="rtl"] .gw-bf-domain { direction: ltr; text-align: right; }
/* project brief (forms): "Next" stays on the right, "Back" on the left, as in English */
html[dir="rtl"] .gw-bf-nav { direction: ltr; }
html[dir="rtl"] .gw-bf-nav .gw-bf-tip { unicode-bidi: plaintext; }
/* project brief: the example browsers (shop, Services page, domain) keep the English layout; Arabic words read right to left */
html[dir="rtl"] .gw-bf-mk { direction: ltr; }
html[dir="rtl"] .gw-bf-mk :is(span, b, small, em, u, p, strong, figcaption) { unicode-bidi: plaintext; }
/* buttons with an arrow / icon keep the English order (text, then arrow); their Arabic words still read right to left */
html[dir="rtl"] :has(> [data-framer-name="Arrow Icon"]), html[dir="rtl"] :is(.gw-bf-next, .gw-bf-back, .gw-rsv-btn, .gw-demo-btn) { direction: ltr; }
html[dir="rtl"] :has(> [data-framer-name="Arrow Icon"]) p, html[dir="rtl"] :is(.gw-bf-next, .gw-bf-back, .gw-rsv-btn, .gw-demo-btn) span { unicode-bidi: plaintext; }
/* "Meet Groweber.com": the brand stays "Groweber.com" (never ".com Groweber") */
html[dir="rtl"] [data-framer-name="Project One Con"] { direction: ltr; }
/* home: the two plans keep their order (Plan 1, then Plan 2), each card reads right to left */
html[dir="rtl"] .framer-v24l8a { direction: ltr; }
html[dir="rtl"] .framer-v24l8a > * { direction: rtl; }
/* the "-50%" badge row of the plans: same layout as in English (the label next to it would slide under the badge) */
html[dir="rtl"] :has(> [data-framer-name="Care Price"]) { direction: ltr; }
/* comparison table: mirrored (criteria on the right, then Groweber, Shopify…), so it is swiped from the right */
html[dir="rtl"] [data-framer-name="Comp Content"] { scale: -1 1; }
html[dir="rtl"] [data-framer-name="Comp Content"] > * { scale: -1 1; }
/* "Meet Groweber.com" timeline: mirrored (Day 1 on the right … Day 5 on the left), so on phones it is swiped from the
   right (the scrolling box itself is not mirrored, only what it holds); texts, cards and labels are turned back */
html[dir="rtl"] [data-framer-name="Timeline Table"] { scale: -1 1; }
html[dir="rtl"] [data-framer-name="Timeline Table"] :is(.gw-day, [data-framer-name="Timeline Tab"], [data-framer-name="Timeline Card"]) { scale: -1 1; }
/* the "All this in 5 days!" note (desktop) moves to the other side and its arrow still points at Day 5 */
html[dir="rtl"] [data-framer-name="Timeline Cards Wrapper"] > [data-framer-name="Annotation"] { left: 100px !important; right: auto !important; scale: -1 1; }
html[dir="rtl"] [data-framer-name="Timeline Cards Wrapper"] > [data-framer-name="Annotation"] [data-framer-name="Anno Text"] { scale: -1 1; }
/* "Powered by Hostinger" (footer, pricing): the logo after the Arabic words, read right to left */
html[dir="rtl"] .gw-powered-footer, html[dir="rtl"] .gw-powered-eyebrow { direction: rtl; }
/* small labels with a positioned dot (e.g. "got questions?") keep the English layout */
html[dir="rtl"] [data-framer-name="Eyebrow Container"] { direction: ltr; }
html[dir="rtl"] [data-framer-name="Eyebrow Container"] p { unicode-bidi: plaintext; }
/* the footer keeps the English layout; its Arabic texts still read right to left inside their own box */
html[dir="rtl"] :is([data-framer-name="Footer BG"], [data-framer-name="Footer Top"], [data-framer-name="Footer Content"], [data-framer-name="Footer Bottom"]) { direction: ltr; }
html[dir="rtl"] :is([data-framer-name="Footer BG"], [data-framer-name="Footer Top"], [data-framer-name="Footer Content"], [data-framer-name="Footer Bottom"]) :is(p, h1, h2, h3, h4, h5, h6, li, a, span) { unicode-bidi: plaintext; }
html[dir="rtl"] :is([data-framer-name="Footer BG"], [data-framer-name="Footer Top"], [data-framer-name="Footer Content"], [data-framer-name="Footer Bottom"]) [style*="--framer-text-alignment:left"] { --framer-text-alignment: left !important; }
/* Tajawal is taller than Satoshi at "normal" line height: texts without their own line height keep the English one */
html[lang="ar"] body { line-height: 1.3; }
html[lang="ar"] h1.framer-text, html[lang="ar"] h2.framer-text, html[lang="ar"] h3.framer-text { --framer-line-height: 1.15em !important; }

/* ---------- language change: the page fades out, then reloads in the new language ---------- */
html.gw-lang-leaving body { opacity: 0; transition: opacity .12s ease; }

/* ---------- first visit of the home page: language pop-up (3 choices side by side, with flags) ---------- */
.gw-lang-pop { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; padding: 16px; background: var(--bg-131311-a55, rgba(19, 19, 17, 0.55)); opacity: 0; transition: opacity .18s ease; }
.gw-lang-pop.is-open { opacity: 1; }
.gw-lang-pop-card { width: min(360px, 100%); padding: 20px 18px 18px; border-radius: 18px; background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); text-align: center; box-shadow: 0 30px 80px var(--sh-000000-a30, rgba(0, 0, 0, 0.3)); transform: translateY(8px); transition: transform .18s ease; font-family: Satoshi, "Satoshi Placeholder", "Tajawal", system-ui, sans-serif; }
.gw-lang-pop.is-open .gw-lang-pop-card { transform: none; }
.gw-lang-pop-ic { display: none; }
.gw-lang-pop-card h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; line-height: 1.25; }
.gw-lang-pop-card p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.4; color: var(--fg-6b6b66, #6b6b66); }
.gw-lang-pop-list { direction: ltr; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.gw-lang-pop-list button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 6px 10px; border: 1.5px solid var(--bd-e4e4df, #e4e4df); border-radius: 12px; background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); font: 700 13px/1.2 Satoshi, "Satoshi Placeholder", "Tajawal", system-ui, sans-serif; cursor: pointer; transition: border-color .15s, background .15s; }
.gw-lang-pop-list button:hover { border-color: var(--bd-131311, #131311); }
.gw-lang-pop-list button[aria-checked="true"] { border-color: var(--bd-131311, #131311); background: var(--bg-f7fee7, #f7fee7); }
.gw-lang-pop-list img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.gw-lang-pop-list span { white-space: nowrap; }
.gw-lang-pop-list i { width: 14px; height: 14px; border: 2px solid var(--bd-b9b9b3, #b9b9b3); border-radius: 50%; }
.gw-lang-pop-list button[aria-checked="true"] i { border: 4.5px solid var(--bd-131311, #131311); }
.gw-lang-pop-list em { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: var(--bg-c6fd50, #c6fd50); font: 700 9.5px/1.3 Satoshi, "Satoshi Placeholder", "Tajawal", system-ui, sans-serif; font-style: normal; letter-spacing: .02em; white-space: nowrap;--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-lang-pop-go { width: 100%; height: 42px; border: 0; border-radius: 11px; background: var(--bg-131311, #131311); color: var(--fg-ffffff, #ffffff); font: 700 14px/1 Satoshi, "Satoshi Placeholder", "Tajawal", system-ui, sans-serif; cursor: pointer; }
.gw-lang-pop-go:hover { background: var(--bg-2a2a27, #2a2a27); }


/* "Choose your language" pop-up: same style as the other pop-up windows (lime card, small "Groweber" label,
   big bold title, square button centred). Same colours in light and dark mode. */
.gw-lang-pop .gw-lang-pop-card { width: min(400px, 100%); padding: 26px 26px 24px; border-radius: 24px; background: var(--gw-pop); color: var(--gw-pop-text); box-shadow: 0 30px 70px var(--gw-shadow); }
.gw-lang-pop .gw-lang-pop-card::before { content: "Groweber"; display: block; margin-bottom: 16px; font-size: 14px; font-weight: 700; text-align: start; }
.gw-lang-pop .gw-lang-pop-card h2 { margin: 0 0 10px; font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--gw-pop-text); }
.gw-lang-pop .gw-lang-pop-card p { margin: 0 0 22px; font-size: 14.5px; font-weight: 500; color: var(--gw-pop-text); opacity: .8; }
.gw-lang-pop .gw-lang-pop-list { gap: 10px; margin-bottom: 22px; }
.gw-lang-pop .gw-lang-pop-list button { border: 2px solid transparent; border-radius: 14px; background: var(--gw-on-ink); color: var(--gw-pop-text); }
.gw-lang-pop .gw-lang-pop-list button:hover { border-color: color-mix(in srgb, var(--gw-pop-text) 35%, transparent); }
.gw-lang-pop .gw-lang-pop-list button[aria-checked="true"] { border-color: var(--gw-pop-text); background: var(--gw-on-ink); }
.gw-lang-pop .gw-lang-pop-list i { border-color: color-mix(in srgb, var(--gw-pop-text) 35%, transparent); }
.gw-lang-pop .gw-lang-pop-list button[aria-checked="true"] i { border-color: var(--gw-pop-text); }
.gw-lang-pop .gw-lang-pop-list em { background: var(--gw-pop-text); color: var(--gw-pop); }
.gw-lang-pop .gw-lang-pop-go { display: block; width: auto; min-width: 160px; height: 48px; margin: 0 auto; padding: 0 30px; border-radius: 10px; background: var(--gw-pop-text); color: var(--gw-on-ink); font-size: 15px; font-weight: 800; transition: transform .15s ease; }
.gw-lang-pop .gw-lang-pop-go:hover { background: var(--gw-pop-text); transform: translateY(-1px); }
/* language pop-up: less height, and the same size whatever the language picked (texts on one line, fixed heights) */
.gw-lang-pop .gw-lang-pop-card { padding: 20px 24px 20px; }
.gw-lang-pop .gw-lang-pop-card::before { margin-bottom: 10px; text-align: left; direction: ltr; }
.gw-lang-pop .gw-lang-pop-card h2 { height: 30px; margin: 0 0 4px; font-size: 24px; line-height: 30px; white-space: nowrap; }
.gw-lang-pop .gw-lang-pop-card p { height: 20px; margin: 0 0 16px; font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-lang-pop .gw-lang-pop-list { margin-bottom: 16px; }
.gw-lang-pop .gw-lang-pop-list button { height: 92px; padding: 12px 6px 8px; gap: 5px; }
.gw-lang-pop .gw-lang-pop-list img { width: 30px; height: 30px; }
.gw-lang-pop .gw-lang-pop-list span { height: 18px; line-height: 18px; }
.gw-lang-pop .gw-lang-pop-go { height: 44px; }
@media (max-width: 480px) {
  .gw-lang-pop .gw-lang-pop-card { max-width: calc(100vw - 32px); min-width: 0; }
  .gw-lang-pop .gw-lang-pop-card h2 { font-size: min(24px, 6vw); }
  .gw-lang-pop .gw-lang-pop-card p { font-size: min(13px, 3.1vw); }
}

/* Arabic: the header bar keeps the same places as in English (logo on the left, buttons on the right);
   only its texts are written right to left */
html[dir="rtl"] nav.framer-yYde2 { direction: ltr; }
html[dir="rtl"] nav.framer-yYde2 :is(p, a, span, h1, h2, h3, li) { unicode-bidi: plaintext; }
html[dir="rtl"] nav.framer-yYde2 .gw-bell { margin: 0 6px 0 0; }
html[dir="rtl"] nav.framer-yYde2 .gw-bell em { right: 0; left: auto; }
@media (max-width: 809.98px) { html[dir="rtl"] nav.framer-yYde2 .gw-bell { margin: 0 2px 0 0; } }
@media (min-width: 810px) { html[dir="rtl"] nav.framer-yYde2 .gw-bell { margin: 0; } }