/* Elite Pharma Services — site styles. Bootstrap is vendor/bootstrap(.rtl).min.css, linked from index.html.
   Every design (components/*.ep) reads the --ep-* tokens below. Plain CSS: no build step.
   The old website's colours and fonts: teal #00B4A5 / #009688, navy text #1A2B4A, IBM Plex Sans Arabic and Inter.
   Light and dark themes (the moon / sun button in the header): [data-theme="dark"] on <html>. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/inter/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("vendor/fonts/inter/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/plex-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/plex-arabic/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/plex-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("vendor/fonts/plex-arabic/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/plex-arabic/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/plex-arabic/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/plex-arabic/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("vendor/fonts/plex-arabic/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --ep-primary: #00b4a5;
  --ep-primary-dark: #009688;
  --ep-primary-light: #00d4c4;
  --ep-primary-soft: rgba(0, 180, 165, 0.1);
  --ep-bg: #f8fafb;
  --ep-bg-alt: #ffffff;
  --ep-card: #ffffff;
  --ep-text: #1a2b4a;
  --ep-muted: #5a6b7d;
  --ep-border: #e2e8f0;
  --ep-footer: #1a2b4a;
  --ep-shadow: 0 1px 4px rgba(26, 43, 74, 0.04);
  --ep-shadow-lg: 0 2px 10px rgba(26, 43, 74, 0.06);
  --ep-header: rgba(255, 255, 255, 0.95);
  --ep-radius: 4px;
  --ep-radius-lg: 6px;
  --ep-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ep-font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ep-space: 56px;
  --bs-body-font-family: var(--ep-font);
  --bs-body-color: var(--ep-text);
  --bs-body-bg: var(--ep-bg);
  --bs-link-color: var(--ep-primary);
  --bs-link-hover-color: var(--ep-primary-dark);
  --bs-primary: var(--ep-primary);
  --bs-primary-rgb: 0, 180, 165;
  color-scheme: light;
}
:root:lang(ar) { --ep-font: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
:root[data-theme="dark"] {
  --ep-bg: #0d1117;
  --ep-bg-alt: #161b22;
  --ep-card: #1c2128;
  --ep-text: #e6edf3;
  --ep-muted: #8b949e;
  --ep-border: #30363d;
  --ep-footer: #010409;
  --ep-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  --ep-shadow-lg: 0 2px 10px rgba(0, 0, 0, 0.2);
  --ep-header: rgba(13, 17, 23, 0.95);
  color-scheme: dark;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--ep-font); background: var(--ep-bg); color: var(--ep-text); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background 0.3s var(--ep-ease), color 0.3s var(--ep-ease); }
h1, h2, h3, h4, h5, h6 { color: inherit; font-family: inherit; }
img, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ep-primary); color: #fff; }
:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: 3px; }

/* Page width: 1140px, 96% of the screen on phones (as on the old website). */
.ep-wrap { width: min(1140px, 96vw); margin-inline: auto; }
.ep-sec { padding: var(--ep-space) 0; background: var(--ep-bg); }
.ep-sec--alt { background: var(--ep-bg-alt); }
@media (max-width: 768px) { .ep-sec { padding: 40px 0; } }

/* Section heading: small teal label, title, one line. */
.ep-head { max-width: 640px; margin: 0 auto 1.5rem; text-align: center; }
.ep-tag { display: inline-block; margin-bottom: 0.5rem; color: var(--ep-primary); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
:lang(ar) .ep-tag { letter-spacing: 0; }
.ep-title { margin: 0 0 0.65rem; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.25; }
.ep-title span { color: var(--ep-primary); }
.ep-desc { margin: 0; color: var(--ep-muted); font-size: 1.05rem; }

/* Icon boxes (the soft teal squares). */
.ep-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ep-radius); background: var(--ep-primary-soft); color: var(--ep-primary); }
.ep-ico svg { width: 22px; height: 22px; }

/* Buttons. */
.ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.35rem; border: none; border-radius: var(--ep-radius); background: var(--ep-primary); color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.5; cursor: pointer; transition: all 0.3s var(--ep-ease); }
.ep-btn:hover { background: var(--ep-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 180, 165, 0.15); }
.ep-btn--outline { border: 2px solid var(--ep-primary); background: transparent; color: var(--ep-primary); }
.ep-btn--outline:hover { background: var(--ep-primary); color: #fff; }

/* Appearing on scroll (designs mark elements with data-ep-in). */
[data-ep-in] { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-ep-in].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-ep-in] { opacity: 1; transform: none; transition: none; }
}

/* First load. */
.ep-boot { display: grid; place-items: center; min-height: 100vh; background: var(--ep-bg); }
.ep-boot__mark { width: 2.75rem; height: 2.75rem; border: 3px solid var(--ep-primary-soft); border-top-color: var(--ep-primary); border-radius: 50%; animation: ep-spin 0.9s linear infinite; }
@keyframes ep-spin { to { transform: rotate(360deg); } }

/* Builder forms (form.ep gives the frame; these are the fields, as on the old website). */
.cms-form { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0; }
.cms-form > [class*="col-"] { margin-bottom: 0.85rem; }
.cms-form .cms-form-label { display: block; margin-bottom: 0.5rem; color: var(--ep-text); font-size: 0.85rem; font-weight: 600; }
.cms-form .form-control, .cms-form .form-select { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--ep-border); border-radius: var(--ep-radius); background-color: var(--ep-bg); color: var(--ep-text); font-family: inherit; font-size: 0.95rem; box-shadow: none; transition: border-color 0.3s var(--ep-ease); }
.cms-form .form-select { padding-inline-end: 2.25rem; }
.cms-form textarea.form-control { min-height: 96px; resize: vertical; }
.cms-form .form-control::placeholder { color: var(--ep-muted); opacity: 0.7; }
.cms-form .form-control:focus, .cms-form .form-select:focus { border-color: var(--ep-primary); background-color: var(--ep-bg); color: var(--ep-text); box-shadow: none; }
.cms-form-optional { color: var(--ep-muted); font-weight: 400; }
.cms-form .cms-form-actions { margin-bottom: 0; }
.cms-form-submit { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.35rem; border: 0; border-radius: var(--ep-radius); background: var(--ep-primary) !important; color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 600; transition: all 0.3s var(--ep-ease); }
.cms-form-submit:hover { background: var(--ep-primary-dark) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 180, 165, 0.15); }
.cms-form-status { margin: 0.9rem 0 0; color: var(--ep-primary); font-weight: 600; }
.cms-form-status:empty { display: none; }
.cms-form .form-check-input:checked { background-color: var(--ep-primary); border-color: var(--ep-primary); }
[data-theme="dark"] .cms-form .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

/* In-page links stop below the fixed header. */
section[id] { scroll-margin-top: 64px; }
#main > .container.py-5 { min-height: 50vh; padding-top: 8rem !important; }