/*--------------------------------------------------------------
  DARK THEME — Aya Elfeky portfolio
  ---------------------------------------------------------------
  Loaded last, after style.css / custom.css / rtl.css, and scoped to
  html[data-theme="dark"] so every rule outranks the light original it
  replaces without touching the source sheets.

  The approach is surface-first: the neutral layers (page, cards, borders,
  text) invert, while the three brand fields — purple #5533d8, pink #fa7bd4,
  blue #69c6f1 — stay saturated so the site still reads as itself. The brand
  fields are only dimmed enough that they do not glare against a dark page,
  and their existing text colours (white on purple, ink on pink/blue) keep
  working untouched.

  TABLE OF CONTENTS
    1.  Tokens
    2.  Base — page, type, links, selection
    3.  Header, navigation, drawer, bottom bar
    4.  Theme toggle control
    5.  Buttons, pills, chips
    6.  Generic surfaces — cards, tiles, panels
    7.  Brand-field sections
    8.  Hero
    9.  Forms and inputs
    10. Blog and article
    11. Portfolio, services, pricing
    12. Footer
    13. Media, shapes, decorations
    14. Reduced transparency / print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  1. TOKENS
--------------------------------------------------------------*/
html[data-theme="dark"] {
  /* neutral ladder — page sits darkest, cards lift off it */
  --cs-d-bg: #100f18;
  --cs-d-bg-2: #16151f;      /* tinted section band (was #f7f5fd) */
  --cs-d-surface: #191827;   /* cards, drawer, sticky header */
  --cs-d-surface-2: #221f33; /* inputs, raised chips, hover fills */
  --cs-d-surface-3: #2b2740; /* borders on artwork, dividers on cards */

  --cs-d-line: rgba(236, 234, 247, 0.12);
  --cs-d-line-2: rgba(236, 234, 247, 0.22);

  --cs-d-ink: #ece9f7;                      /* headings, strong text */
  --cs-d-ink-2: rgba(236, 233, 247, 0.74);  /* body copy */
  --cs-d-ink-3: rgba(236, 233, 247, 0.55);  /* captions, meta */

  /* Brand purple splits three ways in the dark. As *type* #5533d8 fails
     against the page, so it lifts. As a full-bleed field it glares at full
     strength — a band that size is most of the screen — so it drops well
     below the light value. Buttons go the other way: they are small, they
     have to win attention, so they stay near the original. */
  --cs-d-brand: #9b81ff;
  --cs-d-brand-soft: rgba(155, 129, 255, 0.14);
  --cs-d-brand-line: rgba(155, 129, 255, 0.32);
  --cs-d-brand-fill: #33207f;    /* sections, footer, large panels */
  --cs-d-brand-fill-2: #251761; /* gradient partner, deepest end */
  --cs-d-brand-btn: #5b39e0;     /* buttons, badges, pills */
  --cs-d-brand-btn-hover: #6c4bf0;

  --cs-d-pink: #fa7bd4;
  --cs-d-blue: #69c6f1;

  --cs-d-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --cs-d-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/*--------------------------------------------------------------
  2. BASE
--------------------------------------------------------------*/
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--cs-d-bg);
  color: var(--cs-d-ink-2);
}

/* Headings that carry no explicit colour utility. The :not() guard matters:
   the hero wordmark is .cs_focus_color_2 pink and several panels run
   .cs_white_color, and a bare h1..h6 rule here outranks both. */
html[data-theme="dark"] h1:not([class*="_color"]),
html[data-theme="dark"] h2:not([class*="_color"]),
html[data-theme="dark"] h3:not([class*="_color"]),
html[data-theme="dark"] h4:not([class*="_color"]),
html[data-theme="dark"] h5:not([class*="_color"]),
html[data-theme="dark"] h6:not([class*="_color"]) {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_primary_color,
html[data-theme="dark"] .cs_primary_color_hover:hover {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_primary_bg,
html[data-theme="dark"] .cs_primary_bg_hover:hover {
  background-color: var(--cs-d-surface);
}

/* .cs_secondary_bg / .cs_white_bg are the light "paper" fields. */
html[data-theme="dark"] .cs_secondary_bg,
html[data-theme="dark"] .cs_secondary_bg_hover:hover,
html[data-theme="dark"] .cs_white_bg,
html[data-theme="dark"] .cs_white_bg_hover:hover {
  background-color: var(--cs-d-surface);
}

/* .cs_focus_color is brand purple used as *type*, which needs lifting. */
html[data-theme="dark"] .cs_focus_color,
html[data-theme="dark"] .cs_focus_color_hover:hover {
  color: var(--cs-d-brand);
}

html[data-theme="dark"] a:hover {
  color: var(--cs-d-brand);
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .cs_divider,
html[data-theme="dark"] .cs_height_divider {
  border-color: var(--cs-d-line);
  background-color: var(--cs-d-line);
}

html[data-theme="dark"] ::selection {
  background-color: rgba(155, 129, 255, 0.35);
  color: #fffcfc;
}

html[data-theme="dark"] table th {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] table td,
html[data-theme="dark"] table th {
  border-color: var(--cs-d-line);
}

html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] kbd {
  background-color: var(--cs-d-surface-2);
  border-color: var(--cs-d-line);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] blockquote {
  color: var(--cs-d-ink);
  border-color: var(--cs-d-brand-line);
}

/*--------------------------------------------------------------
  3. HEADER, NAV, DRAWER, BOTTOM BAR
--------------------------------------------------------------*/
html[data-theme="dark"] .cs_site_header.cs_style_1.cs_sticky-active,
html[data-theme="dark"] .cs_gescout_sticky {
  background-color: rgba(16, 15, 24, 0.92);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

html[data-theme="dark"] .cs_site_header.cs_style_1.cs_color_1 {
  background: var(--cs-d-bg);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .cs_nav,
html[data-theme="dark"] .cs_nav .cs_nav_list > li > a {
  color: var(--cs-d-ink-2);
}

html[data-theme="dark"] .cs_nav .cs_nav_list > li > a:hover,
html[data-theme="dark"] .cs_nav .cs_nav_list > li.active > a {
  color: var(--cs-d-brand);
}

/* Dropdowns were near-black panels on a white page; on a dark page they need
   to lift instead, or they vanish into the header behind them. */
html[data-theme="dark"] .cs_nav .cs_nav_list ul {
  background: var(--cs-d-surface-2);
  border: 1px solid var(--cs-d-line);
  box-shadow: var(--cs-d-shadow);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_nav .cs_nav_list ul li a {
  color: var(--cs-d-ink-2);
}

html[data-theme="dark"] .cs_nav .cs_nav_list ul li a:hover {
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_menu_toggle span,
html[data-theme="dark"] .cs_menu_toggle span:before,
html[data-theme="dark"] .cs_menu_toggle span:after {
  background-color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_toggle_active span {
  background-color: transparent;
}

html[data-theme="dark"] .cs_main_header_right .cs_lang_switch,
html[data-theme="dark"] .cs_lang_switch {
  border-color: var(--cs-d-line-2);
  background-color: var(--cs-d-surface-2);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_main_header_right .cs_lang_switch:hover,
html[data-theme="dark"] .cs_lang_switch:hover {
  background-color: var(--cs-d-brand-btn);
  border-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

/*  Off-canvas drawer  */
html[data-theme="dark"] .cs_oc_trigger {
  border-color: var(--cs-d-line-2);
  background-color: var(--cs-d-surface-2);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_oc_trigger:hover {
  background-color: var(--cs-d-brand-btn);
  border-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

html[data-theme="dark"] .cs_oc_backdrop {
  background-color: rgba(0, 0, 0, 0.68);
}

html[data-theme="dark"] .cs_oc_drawer {
  background-color: var(--cs-d-surface);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"][dir="rtl"] .cs_oc_drawer,
html[data-theme="dark"] [dir="rtl"] .cs_oc_drawer {
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .cs_oc_head {
  border-color: var(--cs-d-line);
}

html[data-theme="dark"] .cs_oc_close {
  border-color: var(--cs-d-line-2);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_oc_close:hover {
  background-color: var(--cs-d-ink);
  color: var(--cs-d-bg);
}

html[data-theme="dark"] .cs_oc_nav a {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_oc_nav a:hover,
html[data-theme="dark"] .cs_oc_nav li.active > a {
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_oc_nav ul ul a {
  color: var(--cs-d-ink-3);
}

html[data-theme="dark"] .cs_oc_nav li + li,
html[data-theme="dark"] .cs_oc_nav ul ul {
  border-color: var(--cs-d-line);
}

html[data-theme="dark"] .cs_oc_sub_toggle {
  background-color: var(--cs-d-brand-soft);
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_oc_foot {
  background: linear-gradient(150deg, var(--cs-d-brand-fill) 0%, var(--cs-d-brand-fill-2) 100%);
}

/*  Mobile bottom bar  */
html[data-theme="dark"] .cs_bottom_bar {
  background-color: rgba(22, 21, 31, 0.96);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-top: 1px solid var(--cs-d-line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .cs_bottom_bar a {
  color: var(--cs-d-ink-3);
}

html[data-theme="dark"] .cs_bottom_bar a.cs_active {
  color: var(--cs-d-brand);
  background-color: var(--cs-d-brand-soft);
}

/*--------------------------------------------------------------
  4. THEME TOGGLE CONTROL
  Shared by both themes — the light values live here too so the button has
  one home. It mirrors the language pill next to it.
--------------------------------------------------------------*/
.cs_theme_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 50px;
  background-color: rgba(32, 32, 32, 0.03);
  color: #202020;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease, transform 0.3s ease;
}

.cs_theme_toggle:hover {
  background-color: #202020;
  border-color: #202020;
  color: #fffcfc;
  transform: translateY(-2px);
}

.cs_theme_toggle:focus-visible {
  outline: 2px solid #5533d8;
  outline-offset: 2px;
}

/* Two glyphs live in the button; the active theme decides which shows, so
   the icon is the state rather than a label that has to be translated. */
.cs_theme_toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

.cs_theme_toggle .cs_icon_moon { display: block; }
.cs_theme_toggle .cs_icon_sun { display: none; }

html[data-theme="dark"] .cs_theme_toggle .cs_icon_moon { display: none; }
html[data-theme="dark"] .cs_theme_toggle .cs_icon_sun { display: block; }

html[data-theme="dark"] .cs_theme_toggle {
  border-color: var(--cs-d-line-2);
  background-color: var(--cs-d-surface-2);
  color: #ffd479;
}

html[data-theme="dark"] .cs_theme_toggle:hover {
  background-color: var(--cs-d-brand-btn);
  border-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

/* In the drawer foot and the footer the control sits on a purple field, so
   it borrows the light-on-colour treatment the language pill uses there. */
.cs_oc_foot .cs_theme_toggle,
.cs_footer .cs_theme_toggle {
  border-color: rgba(255, 252, 252, 0.4);
  background-color: rgba(255, 252, 252, 0.12);
  color: #fffcfc;
}

.cs_oc_foot .cs_theme_toggle:hover,
.cs_footer .cs_theme_toggle:hover {
  background-color: #fffcfc;
  border-color: #fffcfc;
  color: #5533d8;
}

@media (prefers-reduced-motion: reduce) {
  .cs_theme_toggle { transition: none; }
  .cs_theme_toggle:hover { transform: none; }
}

/*--------------------------------------------------------------
  5. BUTTONS, PILLS, CHIPS
--------------------------------------------------------------*/
html[data-theme="dark"] .cs_btn.cs_style_1.cs_focus_1,
html[data-theme="dark"] .cs_hero .cs_hero_actions .cs_btn {
  background-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

html[data-theme="dark"] .cs_btn.cs_style_1.cs_focus_1:hover,
html[data-theme="dark"] .cs_hero .cs_hero_actions .cs_btn:hover {
  background-color: var(--cs-d-brand-btn-hover);
}

html[data-theme="dark"] .cs_main_header_right .cs_btn.cs_style_1 {
  box-shadow: 0 8px 22px rgba(91, 57, 224, 0.45);
}

html[data-theme="dark"] .cs_btn.cs_style_1.cs_border_btn {
  color: var(--cs-d-ink);
  border-color: var(--cs-d-line-2);
}

html[data-theme="dark"] .cs_btn.cs_style_1.cs_border_btn:hover {
  background-color: var(--cs-d-ink);
  color: var(--cs-d-bg);
}

html[data-theme="dark"] .cs_btn.cs_style_2.cs_focus_1 {
  color: var(--cs-d-brand);
  border-color: var(--cs-d-brand-line);
}

html[data-theme="dark"] .cs_btn.cs_style_2.cs_focus_1:hover {
  color: #fffcfc;
  background: var(--cs-d-brand-btn);
}

html[data-theme="dark"] .cs_btn_ghost {
  border-color: var(--cs-d-line-2);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_btn_ghost:hover {
  background-color: var(--cs-d-ink);
  border-color: var(--cs-d-ink);
  color: var(--cs-d-bg);
}

html[data-theme="dark"] .cs_chip_list li,
html[data-theme="dark"] .cs_topic,
html[data-theme="dark"] .cs_tag_list.cs_style_1 .cs_tag,
html[data-theme="dark"] .cs_blog_details.cs_style_1 .cs_tag_wrap .cs_tag,
html[data-theme="dark"] .cs_portfolio.cs_style_3 .cs_tag {
  border-color: var(--cs-d-line-2);
  color: var(--cs-d-ink-2);
  background-color: transparent;
}

html[data-theme="dark"] .cs_chip_list li:hover,
html[data-theme="dark"] .cs_topic:hover,
html[data-theme="dark"] .cs_tag_list.cs_style_1 .cs_tag:hover,
html[data-theme="dark"] .cs_blog_details.cs_style_1 .cs_tag_wrap .cs_tag:hover {
  background-color: var(--cs-d-brand-btn);
  border-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

html[data-theme="dark"] .cs_topic.is-active {
  background-color: var(--cs-d-brand-btn);
  border-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

html[data-theme="dark"] .cs_link_list.cs_style_1 a {
  border-color: var(--cs-d-line-2);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_link_list.cs_style_1 a:hover {
  background-color: var(--cs-d-ink);
  color: var(--cs-d-bg);
}

html[data-theme="dark"] .cs_link_list.cs_style_2 li,
html[data-theme="dark"] .cs_icon_wrap.cs_style_2 > * .cs_icon_text {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_text_btn_1,
html[data-theme="dark"] .cs_read_link,
html[data-theme="dark"] .cs_pnav_label,
html[data-theme="dark"] .cs_fact_label,
html[data-theme="dark"] .cs_stat_num,
html[data-theme="dark"] .cs_svc_num,
html[data-theme="dark"] .cs_step::before,
html[data-theme="dark"] .cs_form_note,
html[data-theme="dark"] .cs_isotop_filter.cs_style_1 .active a {
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_social.cs_style_1.cs_type_1 a,
html[data-theme="dark"] .cs_social.cs_style_1.cs_type_2 a {
  border-color: var(--cs-d-line-2);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_social.cs_style_1.cs_type_1 a:hover,
html[data-theme="dark"] .cs_social.cs_style_1.cs_type_2 a:hover {
  background-color: var(--cs-d-brand-btn);
  border-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

/*--------------------------------------------------------------
  6. GENERIC SURFACES
  Everything that was a white card on a white-ish page.
--------------------------------------------------------------*/
html[data-theme="dark"] .cs_step,
html[data-theme="dark"] .cs_stat,
html[data-theme="dark"] .cs_feature,
html[data-theme="dark"] .cs_tool,
html[data-theme="dark"] .cs_plan,
html[data-theme="dark"] .cs_svc_card,
html[data-theme="dark"] .cs_post_card,
html[data-theme="dark"] .cs_feat_post,
html[data-theme="dark"] .cs_pnav_card,
html[data-theme="dark"] .cs_card.cs_style_1,
html[data-theme="dark"] .cs_iconbox,
html[data-theme="dark"] .cs_price.cs_style_1 {
  background-color: var(--cs-d-surface);
  border-color: var(--cs-d-line);
  color: var(--cs-d-ink-2);
}

html[data-theme="dark"] .cs_step:hover,
html[data-theme="dark"] .cs_stat:hover,
html[data-theme="dark"] .cs_plan:hover,
html[data-theme="dark"] .cs_svc_card:hover,
html[data-theme="dark"] .cs_post_card:hover,
html[data-theme="dark"] .cs_feat_post:hover,
html[data-theme="dark"] .cs_tool:hover,
html[data-theme="dark"] .cs_pnav_card:hover {
  border-color: var(--cs-d-brand-line);
  box-shadow: var(--cs-d-shadow);
}

html[data-theme="dark"] .cs_step_title,
html[data-theme="dark"] .cs_step h3,
html[data-theme="dark"] .cs_feature h3,
html[data-theme="dark"] .cs_sec_title,
html[data-theme="dark"] .cs_fact_value,
html[data-theme="dark"] .cs_plan_name,
html[data-theme="dark"] .cs_pnav_cat,
html[data-theme="dark"] .cs_faq summary,
html[data-theme="dark"] .cs_svc_title a,
html[data-theme="dark"] .cs_post_title a,
html[data-theme="dark"] .cs_feat_title a,
html[data-theme="dark"] .cs_pnav_card {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_svc_title a:hover,
html[data-theme="dark"] .cs_post_title a:hover,
html[data-theme="dark"] .cs_feat_title a:hover,
html[data-theme="dark"] .cs_faq summary:hover,
html[data-theme="dark"] .cs_faq[open] summary,
html[data-theme="dark"] .cs_topic:hover {
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_step_text,
html[data-theme="dark"] .cs_svc_desc,
html[data-theme="dark"] .cs_svc_list li,
html[data-theme="dark"] .cs_plan_sub,
html[data-theme="dark"] .cs_plan_list li,
html[data-theme="dark"] .cs_plan_note,
html[data-theme="dark"] .cs_trust_strip li,
html[data-theme="dark"] .cs_tool_group_title,
html[data-theme="dark"] .cs_section_head .cs_section_subtitle,
html[data-theme="dark"] .cs_shorting.cs_style_1 select,
html[data-theme="dark"] .cs_pagenation.cs_style_1 li a {
  color: var(--cs-d-ink-2);
}

html[data-theme="dark"] .cs_pagenation.cs_style_1 li a:hover,
html[data-theme="dark"] .cs_pagenation.cs_style_1 li.active a {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_svc_list svg,
html[data-theme="dark"] .cs_plan_list svg {
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_feature_tick,
html[data-theme="dark"] .cs_pnav_arrow,
html[data-theme="dark"] .cs_post_cat {
  background-color: var(--cs-d-brand-soft);
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_pnav_card:hover .cs_pnav_arrow {
  background-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

html[data-theme="dark"] .cs_sec.cs_sec_tint {
  background-color: var(--cs-d-bg-2);
}

html[data-theme="dark"] .cs_sec_eyebrow,
html[data-theme="dark"] .cs_eyebrow {
  border-color: var(--cs-d-brand-line);
  background-color: var(--cs-d-brand-soft);
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_avatar_round {
  background-color: var(--cs-d-surface-2);
}

html[data-theme="dark"] .cs_accordians.cs_style_1.cs_type_1 .cs_accordian {
  border-color: var(--cs-d-line);
}

html[data-theme="dark"] .cs_accordians.cs_style_1.cs_type_1 .cs_accordian_toggle::before,
html[data-theme="dark"] .cs_accordians.cs_style_1.cs_type_1 .cs_accordian_toggle::after {
  background-color: var(--cs-d-ink-3);
}

html[data-theme="dark"] .cs_accordians.cs_style_1.cs_type_1 .cs_accordian.active .cs_accordian_toggle::before,
html[data-theme="dark"] .cs_accordians.cs_style_1.cs_type_1 .cs_accordian.active .cs_accordian_toggle::after {
  background-color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_faq,
html[data-theme="dark"] .cs_step_col:not(:last-child) .cs_step::after {
  border-color: var(--cs-d-line);
}

html[data-theme="dark"] .cs_step_col:not(:last-child) .cs_step::after {
  background-color: var(--cs-d-brand-line);
}

html[data-theme="dark"] .cs_cta.cs_style_3.cs_type_1 {
  border-color: var(--cs-d-line-2);
}

html[data-theme="dark"] .cs_pagination.cs_style_1 ul li {
  background-color: var(--cs-d-line-2);
}

/* The tile placeholder shows through while artwork loads. */
html[data-theme="dark"] {
  --cs-tile-placeholder: #221f33;
}

/*--------------------------------------------------------------
  7. BRAND-FIELD SECTIONS
  These stay coloured — they are the site's punctuation — but the purple is
  taken down a step so it sits on the dark page instead of glowing off it.
--------------------------------------------------------------*/
html[data-theme="dark"] .cs_focus_bg,
html[data-theme="dark"] .cs_focus_bg_hover:hover {
  background-color: var(--cs-d-brand-fill);
}

html[data-theme="dark"] .cs_service_wrap_2::before,
html[data-theme="dark"] .cs_portfolio.cs_style_3 .cs_portfolio_thumbnail::before,
html[data-theme="dark"] .cs_blog.cs_style_4 .cs_blog_top::before {
  background-color: rgba(51, 32, 127, 0.94);
}

html[data-theme="dark"] .cs_blog.cs_style_1 .cs_blog_info {
  background-color: var(--cs-d-brand-fill);
}

html[data-theme="dark"] .cs_blog.cs_style_1:hover .cs_blog_info {
  background-color: rgba(51, 32, 127, 0.82);
}

html[data-theme="dark"] .cs_price.cs_style_1.cs_type_1:hover {
  background-color: var(--cs-d-brand-fill);
}

html[data-theme="dark"] .cs_project_cta_in {
  background:
    radial-gradient(120% 140% at 15% 0%, #4b2eb8 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, #8f3579 0%, transparent 50%),
    var(--cs-d-brand-fill);
}

html[data-theme="dark"] .cs_step_num,
html[data-theme="dark"] .cs_post_tag,
html[data-theme="dark"] .cs_plan_badge,
html[data-theme="dark"] .cs_badge_about {
  background: var(--cs-d-brand-btn);
  color: #fffcfc;
}

html[data-theme="dark"] .cs_step_num {
  background: linear-gradient(150deg, var(--cs-d-brand-btn) 0%, #8b6bff 100%);
}

html[data-theme="dark"] .cs_plan_featured {
  border-color: var(--cs-d-brand);
  box-shadow: 0 18px 44px rgba(91, 57, 224, 0.3);
}

html[data-theme="dark"] .cs_plan_cta {
  border-color: var(--cs-d-brand);
  color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_plan_cta:hover,
html[data-theme="dark"] .cs_plan_featured .cs_plan_cta {
  background-color: var(--cs-d-brand-btn);
  border-color: var(--cs-d-brand-btn);
  color: #fffcfc;
}

/* Panels that already carried light-on-colour content need nothing except a
   softer purple; the pink and blue fields keep their ink-on-colour pairing
   and are left at full strength. */
html[data-theme="dark"] .cs_focus_bg .cs_section_head .cs_section_subtitle,
html[data-theme="dark"] .cs_focus_bg .cs_chip_list li,
html[data-theme="dark"] .cs_focus_bg .cs_btn_ghost,
html[data-theme="dark"] .cs_focus_bg .cs_trust_strip li {
  color: rgba(255, 252, 252, 0.78);
  border-color: rgba(255, 252, 252, 0.32);
}

html[data-theme="dark"] .cs_focus_bg .cs_chip_list li:hover {
  background-color: var(--cs-d-pink);
  border-color: var(--cs-d-pink);
  color: #202020;
}

html[data-theme="dark"] .cs_price.cs_style_1 .cs_price_cta {
  background-color: #fffcfc;
  color: #18181b;
}

html[data-theme="dark"] .cs_price.cs_style_1 .cs_price_cta:hover {
  background-color: #18181b;
  color: #fffcfc;
}

/*--------------------------------------------------------------
  8. HERO
--------------------------------------------------------------*/
html[data-theme="dark"] .cs_hero_text,
html[data-theme="dark"] .cs_hero_subtitle {
  color: var(--cs-d-ink-2);
}

html[data-theme="dark"] .cs_hero.cs_style_1 .cs_imagebox_in {
  background: linear-gradient(160deg, #241f3d 0%, #1a2338 100%);
}

/* The showcase cards are framed in paper white so the storefront art reads
   as a printed card. On a dark page that frame becomes the raised surface
   instead, or three white slabs float unattached. */
html[data-theme="dark"] .cs_show_card,
html[data-theme="dark"] .cs_strip_card,
html[data-theme="dark"] .cs_stack_front,
html[data-theme="dark"] .cs_stack_back,
html[data-theme="dark"] .cs_cta_shot {
  background-color: var(--cs-d-surface-3);
  border-color: var(--cs-d-surface-3);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.62);
}

html[data-theme="dark"] .cs_show_card figcaption,
html[data-theme="dark"] .cs_strip_card figcaption {
  background-color: rgba(25, 24, 39, 0.94);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_post_cat.cs_on_media {
  background-color: rgba(25, 24, 39, 0.94);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_hero.cs_style_3 .cs_btn {
  border-color: var(--cs-d-brand);
}

html[data-theme="dark"] .cs_logo_strip .cs_brand {
  border-color: rgba(255, 252, 252, 0.14);
  background-color: rgba(255, 252, 252, 0.05);
}

/*--------------------------------------------------------------
  9. FORMS
--------------------------------------------------------------*/
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
  background-color: var(--cs-d-surface-2);
  border-color: var(--cs-d-line);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-control::placeholder {
  color: var(--cs-d-ink-3);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--cs-d-brand);
  box-shadow: 0 0 0 3px rgba(155, 129, 255, 0.18);
}

html[data-theme="dark"] .cs_contact_form.cs_style_1 select.form-control option {
  color: var(--cs-d-ink);
  background-color: var(--cs-d-surface-2);
}

html[data-theme="dark"] .cs_search.cs_style_1 input {
  border-color: var(--cs-d-line-2);
  background-color: var(--cs-d-surface-2);
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_search.cs_style_1 input::placeholder {
  color: var(--cs-d-ink-3);
}

html[data-theme="dark"] .cs_blog_search {
  border-color: var(--cs-d-line-2);
  background-color: var(--cs-d-surface-2);
}

html[data-theme="dark"] .cs_blog_search input {
  color: var(--cs-d-ink);
  background-color: transparent;
}

html[data-theme="dark"] .cs_blog_search:focus-within {
  border-color: var(--cs-d-brand);
  color: var(--cs-d-brand);
}

/* Forms that sit inside a purple field already style themselves for
   light-on-colour; the generic input rule above would undo that. */
html[data-theme="dark"] .cs_focus_bg input,
html[data-theme="dark"] .cs_focus_bg textarea,
html[data-theme="dark"] .cs_focus_bg select,
html[data-theme="dark"] .cs_focus_bg .form-control,
html[data-theme="dark"] .cs_newsletter.cs_style_1 input,
html[data-theme="dark"] .cs_comment.cs_style_1 .form-control {
  background-color: rgba(255, 252, 252, 0.08);
  border-color: rgba(255, 252, 252, 0.35);
  color: #fffcfc;
}

html[data-theme="dark"] .cs_focus_bg input::placeholder,
html[data-theme="dark"] .cs_focus_bg .form-control::placeholder,
html[data-theme="dark"] .cs_newsletter.cs_style_1 input::placeholder,
html[data-theme="dark"] .cs_comment.cs_style_1 .form-control::placeholder {
  color: rgba(255, 252, 252, 0.55);
}

/*--------------------------------------------------------------
  10. BLOG AND ARTICLE
--------------------------------------------------------------*/
html[data-theme="dark"] .cs_blog_details.cs_style_1,
html[data-theme="dark"] .cs_blog_details.cs_style_1 p,
html[data-theme="dark"] .cs_blog_details.cs_style_1 li {
  color: var(--cs-d-ink-2);
}

html[data-theme="dark"] .cs_blog_details.cs_style_1 h2,
html[data-theme="dark"] .cs_blog_details.cs_style_1 h3,
html[data-theme="dark"] .cs_blog_details.cs_style_1 h4 {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_catagory.cs_style_1 .cs_catagory_list li a {
  color: var(--cs-d-ink-2);
}

html[data-theme="dark"] .cs_catagory.cs_style_1 .cs_catagory_list li:hover a,
html[data-theme="dark"] .cs_catagory.cs_style_1 .cs_catagory_list li.active a {
  color: var(--cs-d-pink);
}

html[data-theme="dark"] .cs_catagory.cs_style_1 .cs_icon {
  border-color: var(--cs-d-line-2);
}

/*--------------------------------------------------------------
  11. PORTFOLIO, SERVICES, PRICING
--------------------------------------------------------------*/
html[data-theme="dark"] .cs_portfolio.cs_style_3 .cs_portfolio_thumbnail,
html[data-theme="dark"] .cs_gallery.cs_style_1,
html[data-theme="dark"] .cs_blog.cs_style_4 .cs_blog_thumbnail,
html[data-theme="dark"] .cs_award .cs_award_thumbnail {
  box-shadow: var(--cs-d-shadow-sm);
}

html[data-theme="dark"] .cs_portfolio.cs_style_3:hover .cs_portfolio_thumbnail,
html[data-theme="dark"] .cs_gallery.cs_style_1:hover,
html[data-theme="dark"] .cs_blog.cs_style_4:hover .cs_blog_thumbnail,
html[data-theme="dark"] .cs_award:hover .cs_award_thumbnail {
  box-shadow: var(--cs-d-shadow);
}

html[data-theme="dark"] .cs_service.cs_style_1 .cs_service_thumbnail,
html[data-theme="dark"] .cs_service.cs_style_3 .cs_service_thumbnail {
  border-color: var(--cs-d-surface-3);
}

html[data-theme="dark"] .cs_service.cs_style_1 .cs_service_title,
html[data-theme="dark"] .cs_service.cs_style_1 .cs_service_icon {
  color: rgba(236, 233, 247, 0.62);
}

html[data-theme="dark"] .cs_service.cs_style_1:hover .cs_service_title,
html[data-theme="dark"] .cs_service.cs_style_1:hover .cs_service_icon {
  color: var(--cs-d-ink);
}

html[data-theme="dark"] .cs_portfolio.cs_style_4 .cs_btn {
  border-color: var(--cs-d-line-2);
}

html[data-theme="dark"] .cs_service_wrap_4_outer_border::after {
  background: linear-gradient(180deg, transparent, var(--cs-d-bg));
}

/*--------------------------------------------------------------
  12. FOOTER
  The footer already runs .cs_focus_bg, so §7 takes it down a step. Only the
  bits that assumed the brighter purple need a nudge.
--------------------------------------------------------------*/
html[data-theme="dark"] .cs_footer.cs_style_1 {
  border-top: 1px solid rgba(255, 252, 252, 0.08);
}

html[data-theme="dark"] .cs_footer .cs_lang_switch {
  border-color: rgba(255, 252, 252, 0.35);
  background-color: rgba(255, 252, 252, 0.08);
  color: #fffcfc;
}

html[data-theme="dark"] .cs_footer .cs_lang_switch:hover {
  background-color: #fffcfc;
  border-color: #fffcfc;
  color: var(--cs-d-brand-fill);
}

/*--------------------------------------------------------------
  13. MEDIA, SHAPES, DECORATIONS
--------------------------------------------------------------*/
/* The wordmark is dark ink on transparent; the site already ships a light
   variant for the footer, so dark mode borrows it. Swapping via content:
   keeps it a pure CSS concern — paths resolve against this file, so every
   page depth gets the same URL. */
html[data-theme="dark"] .cs_site_header .cs_site_branding img,
html[data-theme="dark"] .cs_oc_logo img {
  content: url("../img/logo_light.svg");
}

html[data-theme="dark"][lang^="ar"] .cs_site_header .cs_site_branding img,
html[data-theme="dark"][lang^="ar"] .cs_oc_logo img {
  content: url("../img/logo_ar_light.svg");
}

html[data-theme="dark"] .cs_preloader {
  background-color: var(--cs-d-bg);
}

/* Screenshots and photographs keep their own light backgrounds on purpose —
   they are the work. Only the flat line-art shapes, which are drawn in ink,
   get lifted so they stay visible. */
html[data-theme="dark"] .cs_half_circle_shape,
html[data-theme="dark"] .cs_circle_shape,
html[data-theme="dark"] .cs_sprin_animation {
  opacity: 0.85;
}

html[data-theme="dark"] .cs_wa_float {
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35);
}

/*--------------------------------------------------------------
  14. PRINT
  Paper is white whatever the screen was set to.
--------------------------------------------------------------*/
@media print {
  html[data-theme="dark"],
  html[data-theme="dark"] body {
    background: #fff;
    color: #000;
  }

  .cs_theme_toggle { display: none !important; }
}