/* ==========================================================================
   The Plug — base layer: font faces + design tokens.
   Loaded before every other plugin stylesheet (TPCF-styles depends on it),
   including on the HyperPay order-pay page.

   Fonts (report F1-F6): one family, "TP Sans" = Montserrat for Latin and
   Cairo for Arabic, served from the plugin itself. The old sources could not
   load on this domain: Elementor's cached Google fonts point at
   staging-live.theplug.inc (no CORS) and the Cairo custom fonts at
   http://164.92.89.179 (mixed content).

   Faces are declared Arabic first and Latin last on purpose: the Arabic range
   includes U+2010-2011, which the Latin range also covers, and the last
   matching face wins, so hyphens keep the Latin design.
   ========================================================================== */

/* --- TP Sans ------------------------------------------------------------ */
@font-face { font-family: "TP Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cairo-400.ttf") format("truetype");
  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: "TP Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cairo-500.ttf") format("truetype");
  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: "TP Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cairo-600.ttf") format("truetype");
  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: "TP Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/cairo-700.ttf") format("truetype");
  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: "TP Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "TP Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-latin.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; }

/* --- Temporary aliases (F4a) -------------------------------------------
   ~500 existing rules and Elementor widgets name "Montserrat" or one of the
   four "Cairo *" families. The aliases make all of them render correctly
   today; they go away once every rule uses var(--tp-font-sans) (F10).
   "Montserrat" = the full TP Sans set, so Arabic text in a Montserrat rule
   gets Cairo instead of a system fallback.                                */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cairo-400.ttf") format("truetype"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cairo-500.ttf") format("truetype"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cairo-600.ttf") format("truetype"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cairo-700.ttf") format("truetype"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin.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; }

/* The four Cairo names are pinned to their own weight whatever weight a rule
   asks for (100-900 range), which is how they were designed to render and
   stops the faux-bold of 'Cairo Medium' set at 600 (T12). Whether Arabic
   moves to real weights is the F8 decision, still pending sign-off.      */
@font-face { font-family: "Cairo Regular";  font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/cairo-400.ttf") format("truetype"); }
@font-face { font-family: "Cairo Medium";   font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/cairo-500.ttf") format("truetype"); }
@font-face { font-family: "Cairo Semibold"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/cairo-600.ttf") format("truetype"); }
@font-face { font-family: "Cairo Bold";     font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/cairo-700.ttf") format("truetype"); }

/* --- Tokens (report §3 and the type scale in §2) ---------------------- */
:root {
  --tp-font-sans: "TP Sans", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;

  /* Kit colour roles — ids and values unchanged (primary = yellow, secondary = light blue) */
  --tp-primary: #F8FF66;
  --tp-primary-hover: #DFE65C;
  --tp-secondary: #8FC6E4;
  --tp-secondary-hover: #6FB0D6;
  --tp-ink: #324550;
  --tp-on-fill: #000;
  --tp-tint: #EEF6FB;
  --tp-text: #1d1e1e;
  --tp-text-2: #6b6b6b;
  --tp-line: #D9D9D9;
  --tp-field-border: #767676;
  --tp-panel: #F7FAFC;
  --tp-error: #8A2A26;   --tp-error-bg: #FDF3F3;   --tp-error-line: #F0CFCE;
  --tp-success: #24603A; --tp-success-bg: #F1F8F2; --tp-success-line: #CFE5D3;
  --tp-danger: #A80202;
  --tp-disabled-bg: #E6E5E5; --tp-disabled-text: #7A7A7A;

  /* Shape and size */
  --tp-radius-sm: 4px;   /* buttons, options */
  --tp-radius: 8px;      /* fields, panels, notices, swatches */
  --tp-h-field: 48px;    /* fields and Commit buttons */
  --tp-h-compact: 44px;  /* header/filter controls; minimum touch target */
  --tp-focus-outline: 2px solid #324550;
  --tp-focus-offset: 2px;
  --tp-focus-ring: 0 0 0 3px rgba(143, 198, 228, .45);
  --tp-shadow-panel: 0 8px 24px rgba(50, 69, 80, .14);

  /* Layers (L3) */
  --tp-z-dropdown: 1000;
  --tp-z-header: 1100;
  --tp-z-drawer: 1200;
  --tp-z-modal: 2000;
  --tp-z-overlay: 2100;

  /* Type scale — desktop */
  --tp-fs-display-1: 80px; --tp-fs-display-2: 64px; --tp-fs-title: 40px;
  --tp-fs-h1: 32px; --tp-fs-h2: 24px; --tp-fs-h3: 20px; --tp-fs-h4: 16px;
  --tp-fs-body-lg: 18px; --tp-fs-body: 16px; --tp-fs-body-sm: 14px; --tp-fs-caption: 12px;
  --tp-fs-label: 14px; --tp-fs-input: 16px; --tp-fs-button: 16px; --tp-fs-button-sm: 14px;
  --tp-fs-nav: 16px; --tp-fs-nav-sub: 14px;
  --tp-fs-price-lg: 24px; --tp-fs-price: 16px; --tp-fs-price-sm: 14px;
  --tp-lh-display: 1.1; --tp-lh-title: 1.2; --tp-lh-h1: 1.25; --tp-lh-h2: 1.3; --tp-lh-h3: 1.35; --tp-lh-h4: 1.4;
  --tp-lh-body-lg: 1.6; --tp-lh-body: 1.5; --tp-lh-body-sm: 1.45; --tp-lh-caption: 1.35; --tp-lh-label: 1.3; --tp-lh-control: 1.25;
}
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --tp-fs-display-1: 60px; --tp-fs-display-2: 48px; --tp-fs-title: 32px; --tp-fs-h1: 28px; --tp-fs-h2: 22px; --tp-fs-h3: 18px; }
}
@media (max-width: 767px) {
  :root { --tp-fs-display-1: 36px; --tp-fs-display-2: 32px; --tp-fs-title: 24px; --tp-fs-h1: 24px; --tp-fs-h2: 20px; --tp-fs-h3: 18px; --tp-fs-price-lg: 20px; }
}
/* Arabic: same sizes and weights, +0.2 leading, no tracking or caps (§2) */
[dir="rtl"] {
  --tp-lh-display: 1.3; --tp-lh-title: 1.4; --tp-lh-h1: 1.4; --tp-lh-h2: 1.45; --tp-lh-h3: 1.5; --tp-lh-h4: 1.6;
  --tp-lh-body-lg: 1.8; --tp-lh-body: 1.7; --tp-lh-body-sm: 1.65; --tp-lh-caption: 1.5; --tp-lh-label: 1.5;
}

/* F6: the few Arabic strings on English pages (language switcher labels, the
   price currency sign, and WooCommerce's hidden "Price range: ر.س …" text for
   screen readers) use the system Arabic font, so English pages never
   download the Cairo file for three words. */
html:not([dir="rtl"]) .wpml-ls-native[lang="ar"],
html:not([dir="rtl"]) .plg_language_switcher .wpml-ls-item-ar > a::before,
html:not([dir="rtl"]) .plg_mobile_language_switcher .wpml-ls-item-ar > a::before,
html:not([dir="rtl"]) .woocommerce-Price-currencySymbol,
html:not([dir="rtl"]) .price .screen-reader-text {
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}