/* Brand colours = the two logo colours (purple to pink), measured from the logo file and the top bar. Each maps 1:1 to a kit global colour. */
:root {
  --c-purple: #7E22A1;         /* logo purple (left end of the logo gradient) */
  --c-primary: #E32368;        /* logo pink (right end): buttons, prices, active states */
  --c-primary-deep: #B91A55;   /* pressed/hover shade of the pink */
  --c-purple-soft: #7E22A1;    /* alias kept for icon colours */
  --c-pink-bright: #E32368;
  --grad-brand: linear-gradient(to right, #7E22A1, #E32368);              /* top bar, buttons, offers, footer accents */
  --grad-brand-deep: linear-gradient(100deg, #6A1C8A 0%, #A5278C 48%, #D41F63 100%); /* footer: same two colours, slightly deeper for text contrast */
  --c-bg-soft: #FBF1F7;        /* soft tint between the two brand colours (hero/bands) */
  --c-bg-soft-2: #F6E6F1;      /* icon discs and hover surfaces */
  --c-tint-purple: #F4EAF9;
  --c-tint-pink: #FDEBF2;
  --c-white: #FFFFFF;
  --c-ink: #1F1530;            /* headings and body text (a very dark purple) */
  --c-text-muted: #6E6479;
  --c-line: #EADFEA;
  --c-whatsapp: #25D366;
  --c-star: #F5A623;

  --font: "Tajawal", sans-serif;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 18px rgba(126, 34, 161, .09);
  --shadow-pop: 0 16px 40px rgba(126, 34, 161, .2);

  --container: 1200px;
  --gutter: 24px;
  --section-pad: 80px;         /* desktop; 56 tablet; 40 phone */
}
@media (max-width: 1024px) { :root { --section-pad: 56px; } }
@media (max-width: 767px)  { :root { --section-pad: 40px; --gutter: 16px; } }

/* brand safety net: Hello Elementor's own hover colours (#336 links, #c36 buttons) never show; every explicit component rule is more specific and wins */
a:hover,a:focus-visible{color:var(--c-primary)}
button:hover,button:focus-visible,[type=button]:hover,[type=button]:focus-visible,[type=submit]:hover,[type=submit]:focus-visible{background-color:var(--c-tint-pink);color:var(--c-primary);border-color:var(--c-primary)}

/* selects: no black focus frame anywhere (owner rule); focus = the normal brand border */
select:focus,select:focus-visible,.woocommerce select:focus,.elementor select:focus,.orderby:focus,.safy-products select:focus{outline:0!important;box-shadow:none!important;border-color:var(--c-primary)!important}

/* ===== dropdown lists (every <select> on the site): the open list and the hovered / selected row use the brand colours, not the system grey.
   Browsers with customisable selects (Chrome / Edge 135+) draw the list in-page, so it can be styled; others keep their native list. ===== */
@supports (appearance: base-select) {
  select,select::picker(select){-webkit-appearance:base-select!important;appearance:base-select!important}
  select{display:flex!important;align-items:center;justify-content:space-between;gap:8px;background-image:none!important;padding-inline-end:14px!important}
  select::picker-icon{content:"";width:16px;height:16px;margin-inline-start:auto;background:var(--c-text-muted);-webkit-mask:var(--ico-chevd) center/contain no-repeat;mask:var(--ico-chevd) center/contain no-repeat;transition:transform .2s}
  select:open::picker-icon{transform:rotate(180deg)}
  select::picker(select){margin-top:6px;padding:6px;border:1px solid var(--c-line);border-radius:12px;background:var(--c-white);box-shadow:var(--shadow-pop);font-family:Tajawal,sans-serif}
  select option{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--c-white);border-radius:8px;background:transparent;color:var(--c-ink);font-size:14px;cursor:pointer}
  select option:hover,select option:focus-visible{background:var(--c-tint-pink);color:var(--c-primary);outline:0}
  select option:checked,select option:checked:hover{background:linear-gradient(to right,var(--c-tint-pink),var(--c-tint-purple));color:var(--c-primary);font-weight:700}
  select option::checkmark{display:none}
}

/* The Elementor kit paints every heading with the primary pink and its per-page CSS loads after ours: our heading colours are pinned */
.safy-footer-columns .elementor-heading-title{color:var(--c-white)!important}
.safy-benefits .elementor-heading-title,.safy-page-title .elementor-heading-title,.safy-widget-title .elementor-heading-title,.safy-cart-empty__title .elementor-heading-title,.safy-call-popup .elementor-widget-heading .elementor-heading-title,.safy-drawer-popup .elementor-widget-heading .elementor-heading-title,.safy-call-card .elementor-heading-title,.safy-call-support .elementor-heading-title{color:var(--c-ink)!important}

/* every price reads number first, then the currency (80 جنيه): in this right-to-left page the number sits on the right of the word */
.woocommerce-Price-amount bdi{direction:rtl;unicode-bidi:isolate}