/* ------------------------------------------------------------------
   The Lipo Lab — right-to-left overrides for the Arabic pages

   Generated from styles-3NsPV3Sb.css. Every rule in that stylesheet
   that does something directional is mirrored here and scoped to
   [dir="rtl"], so this file does nothing on the English pages and
   the original stylesheet is never modified.

   Load it after the main stylesheet on Arabic pages only.
   ------------------------------------------------------------------ */

@layer components; @layer utilities {
  [dir="rtl"] .article-body ul {
    margin-top:1.25rem;
    padding-right:1.25rem;
    padding-left:0;
    list-style:none;
  }
  [dir="rtl"] .article-body li:before {
    content:"";
    background:var(--rose);
    border-radius:999px;
    width:6px;
    height:6px;
    position:absolute;
    top:.85em;
    right:-1.1rem;
    left:auto;
  }
  [dir="rtl"] .-right-6 {
    left:calc(var(--spacing) * -6);
    right:auto;
  }
  [dir="rtl"] .-right-10 {
    left:calc(var(--spacing) * -10);
    right:auto;
  }
  [dir="rtl"] .-right-16 {
    left:calc(var(--spacing) * -16);
    right:auto;
  }
  [dir="rtl"] .-right-20 {
    left:calc(var(--spacing) * -20);
    right:auto;
  }
  [dir="rtl"] .-right-24 {
    left:calc(var(--spacing) * -24);
    right:auto;
  }
  [dir="rtl"] .-right-32 {
    left:calc(var(--spacing) * -32);
    right:auto;
  }
  [dir="rtl"] .right-3 {
    left:calc(var(--spacing) * 3);
    right:auto;
  }
  [dir="rtl"] .right-4 {
    left:calc(var(--spacing) * 4);
    right:auto;
  }
  [dir="rtl"] .-left-6 {
    right:calc(var(--spacing) * -6);
    left:auto;
  }
  [dir="rtl"] .-left-8 {
    right:calc(var(--spacing) * -8);
    left:auto;
  }
  [dir="rtl"] .-left-10 {
    right:calc(var(--spacing) * -10);
    left:auto;
  }
  [dir="rtl"] .-left-24 {
    right:calc(var(--spacing) * -24);
    left:auto;
  }
  [dir="rtl"] .left-0 {
    right:0;
    left:auto;
  }
  [dir="rtl"] .left-1\/2 {
    right:50%;
    left:auto;
  }
  [dir="rtl"] .left-3 {
    right:calc(var(--spacing) * 3);
    left:auto;
  }
  [dir="rtl"] .left-4 {
    right:calc(var(--spacing) * 4);
    left:auto;
  }
  [dir="rtl"] .ml-10 {
    margin-right:calc(var(--spacing) * 10);
    margin-left:0;
  }
  [dir="rtl"] .origin-left {
    transform-origin:100%;
  }
  [dir="rtl"] .-translate-x-1\/2 {
    --tw-translate-x:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y);
  }
  [dir="rtl"] .text-left {
    text-align:right;
  }
  [dir="rtl"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *) {
    left:calc(var(--sidebar-width) * -1);
    right:auto;
  }
  [dir="rtl"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *) {
    right:calc(var(--sidebar-width) * -1);
    left:auto;
  }
  [dir="rtl"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible=offcanvas] *) {
    --tw-translate-x:-0px;
    translate:var(--tw-translate-x) var(--tw-translate-y);
  }
  [dir="rtl"] .group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side=left] *) {
    left:calc(var(--spacing) * -4);
    right:auto;
  }
  [dir="rtl"] .group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side=left] *) {
    border-left-style:var(--tw-border-style);
    border-right-style:none;
    border-left-width:1px;
    border-right-width:0;
  }
  [dir="rtl"] .group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side=right] *) {
    right:0;
    left:auto;
  }
  [dir="rtl"] .group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side=right] *) {
    border-right-style:var(--tw-border-style);
    border-left-style:none;
    border-right-width:1px;
    border-left-width:0;
  }
  [dir="rtl"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible=offcanvas] *):after {
    content:var(--tw-content);
    right:100%;
    left:auto;
  }
}

@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
  [dir="rtl"] *, [dir="rtl"] :before, [dir="rtl"] :after, [dir="rtl"] ::backdrop {
    --tw-translate-x:0;
    --tw-translate-y:0;
    --tw-translate-z:0;
    --tw-scale-x:1;
    --tw-scale-y:1;
    --tw-scale-z:1;
    --tw-rotate-x:initial;
    --tw-rotate-y:initial;
    --tw-rotate-z:initial;
    --tw-skew-x:initial;
    --tw-skew-y:initial;
    --tw-pan-x:initial;
    --tw-pan-y:initial;
    --tw-pinch-zoom:initial;
    --tw-scroll-snap-strictness:proximity;
    --tw-space-y-reverse:0;
    --tw-space-x-reverse:0;
    --tw-border-style:solid;
    --tw-gradient-position:initial;
    --tw-gradient-from:#0000;
    --tw-gradient-via:#0000;
    --tw-gradient-to:#0000;
    --tw-gradient-stops:initial;
    --tw-gradient-via-stops:initial;
    --tw-gradient-from-position:0%;
    --tw-gradient-via-position:50%;
    --tw-gradient-to-position:100%;
    --tw-leading:initial;
    --tw-font-weight:initial;
    --tw-tracking:initial;
    --tw-ordinal:initial;
    --tw-slashed-zero:initial;
    --tw-numeric-figure:initial;
    --tw-numeric-spacing:initial;
    --tw-numeric-fraction:initial;
    --tw-shadow:0 0 #0000;
    --tw-shadow-color:initial;
    --tw-shadow-alpha:100%;
    --tw-inset-shadow:0 0 #0000;
    --tw-inset-shadow-color:initial;
    --tw-inset-shadow-alpha:100%;
    --tw-ring-color:initial;
    --tw-ring-shadow:0 0 #0000;
    --tw-inset-ring-color:initial;
    --tw-inset-ring-shadow:0 0 #0000;
    --tw-ring-inset:initial;
    --tw-ring-offset-width:0px;
    --tw-ring-offset-color:#fff;
    --tw-ring-offset-shadow:0 0 #0000;
    --tw-outline-style:solid;
    --tw-blur:initial;
    --tw-brightness:initial;
    --tw-contrast:initial;
    --tw-grayscale:initial;
    --tw-hue-rotate:initial;
    --tw-invert:initial;
    --tw-opacity:initial;
    --tw-saturate:initial;
    --tw-sepia:initial;
    --tw-drop-shadow:initial;
    --tw-drop-shadow-color:initial;
    --tw-drop-shadow-alpha:100%;
    --tw-drop-shadow-size:initial;
    --tw-backdrop-blur:initial;
    --tw-backdrop-brightness:initial;
    --tw-backdrop-contrast:initial;
    --tw-backdrop-grayscale:initial;
    --tw-backdrop-hue-rotate:initial;
    --tw-backdrop-invert:initial;
    --tw-backdrop-opacity:initial;
    --tw-backdrop-saturate:initial;
    --tw-backdrop-sepia:initial;
    --tw-duration:initial;
    --tw-ease:initial;
    --tw-content:"";
    --tw-animation-delay:0s;
    --tw-animation-direction:normal;
    --tw-animation-duration:initial;
    --tw-animation-fill-mode:none;
    --tw-animation-iteration-count:1;
    --tw-enter-blur:0;
    --tw-enter-opacity:1;
    --tw-enter-rotate:0;
    --tw-enter-scale:1;
    --tw-enter-translate-x:0;
    --tw-enter-translate-y:0;
    --tw-exit-blur:0;
    --tw-exit-opacity:1;
    --tw-exit-rotate:0;
    --tw-exit-scale:1;
    --tw-exit-translate-x:0;
    --tw-exit-translate-y:0;
  }
}

@layer components; @layer utilities {
  @media (width>=48rem) {
    [dir="rtl"] .md\:right-0 {
      left:0;
      right:auto;
    }
    [dir="rtl"] .md\:left-0 {
      right:0;
      left:auto;
    }
    [dir="rtl"] .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant=inset]~*) {
      margin-right:0;
      margin-left:0;
    }
    [dir="rtl"] .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state=collapsed]~*):is(:where(.peer)[data-variant=inset]~*) {
      margin-right:calc(var(--spacing) * 2);
      margin-left:0;
    }
  }
}

@layer components; @layer utilities {
  @media (width>=64rem) {
    [dir="rtl"] .lg\:text-left {
      text-align:right;
    }
    [dir="rtl"] .lg\:text-right {
      text-align:left;
    }
  }
}


/* ------------------------------------------------------------------
   ARABIC TYPOGRAPHY

   The whole stylesheet draws its faces from three custom properties, so
   redefining them here swaps the typography of every rule at once rather
   than restating hundreds of selectors.

   The Latin faces have no Arabic glyphs at all, so without this the
   Arabic pages would fall back to whatever the device happened to have.
   Amiri is the closest Arabic answer to Cormorant Garamond, an elegant
   naskh with the same editorial feel; Tajawal is geometric and has the
   light weight that matches Jost. Parisienne has no Arabic equivalent,
   so the script accents use Amiri at a smaller size instead.

   The faces load from Google Fonts via the link in each Arabic page's
   head. To self-host them like the Latin ones, drop the woff2 files into
   assets/, replace that link with @font-face rules here, and nothing
   else needs to change.
   ------------------------------------------------------------------ */
[dir="rtl"] {
  --font-serif:"Amiri", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;
  --font-sans:"Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-script:"Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;
}

/* Arabic is cursive: letter-spacing pulls joined letterforms apart and
   makes the word look broken, and casing does not exist, so the two
   effects the Latin labels rely on are removed rather than inherited. */
[dir="rtl"] .btn-label,
[dir="rtl"] .nav-link,
[dir="rtl"] .eyebrow {
  text-transform:none;
  letter-spacing:normal;
}

/* Parisienne runs large because a script face needs the size; Amiri at
   the same size would overpower the heading beneath it. */
[dir="rtl"] .eyebrow {
  font-size:1.25rem;
  line-height:1.5;
}

/* Arabic sits on a taller body with ascenders, descenders and
   diacritics, so it needs more room between lines than the Latin text. */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] li {
  line-height:1.9;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  line-height:1.5;
}

/* Western digits throughout: phone numbers, prices and measurements are
   written this way across the Gulf, and the clinic's number has to stay
   dialable. */
[dir="rtl"] {
  font-variant-numeric:lining-nums;
}

/* The before and after sliders position their handle and clip their
   image in physical pixels from the left, but a range input flips its
   own axis under RTL, which would send the handle one way and the image
   the other. Holding the control itself to LTR keeps the two in step.
   The markup carries dir="ltr" on these inputs; this is the backstop. */
[dir="rtl"] input[type="range"][aria-label] {
  direction:ltr;
}