/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #3652ab; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #cbd0e2;
    --neutral-400: #8594c6;
    --neutral-500: #4159aa;
    --neutral-600: #3652ab;
    --neutral-700: #2c428a;
    --neutral-800: #1e2d5f;
    --neutral-900: #162044;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #d4620f;
    --success-lifted: #a94d0c;
    --success-accented: #a94d0c;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #f37623;
    --notice-lifted: #f37623;
    --notice-accented: #d4620f;

    /* Warning colors */
    --warning: #f37623;
    --warning-lifted: #d4620f;
    --warning-accented: #d4620f;

    /* Error colors */
    --error: #f37623;
    --error-lifted: #d4620f;
    --error-accented: #d4620f;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fcd0ac;
    --yellow-300: #f37623;
    --teal-300: #f9a15c;
    --teal-400: #d4620f;
    --emerald-300: #f9a15c;
    --pink-400: #f9a15c;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* EgWeb brand fixes: logo proportions */
.menu-wrap .logo-menu, .logo-menu { width: auto !important; height: auto !important; max-height: 58px !important; }
.footer img.logo-footer:not(.logo-bg) { width: auto !important; height: auto !important; max-width: 220px; max-height: 70px; object-fit: contain; }

.menu-wrap .main-menu > li { margin-inline-start: 28px !important; }
.cd-top { bottom: 92px !important; }

/* Arabic client area: Cairo (icon fonts untouched) */
body.egw-rtl,
body.egw-rtl :is(h1, h2, h3, h4, h5, h6, p, a, li, span, div, input, button, textarea, select, td, th, label, small, b, strong, sup, em) {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
}

/* page titles in brand orange */
.top-header .heading, .top-header h1 { color: #f37623 !important; }
/* knowledge base articles: readable text on the dark card */
.kb-article-content, .kb-article-content p, .kb-article-content li, .kb-article-content td { color: #dbe3fa !important; font-size: 16px; line-height: 1.9; }
.kb-article-content h4 { color: #f37623 !important; margin: 26px 0 10px; font-size: 20px; }
.kb-article-content a { color: #f37623 !important; text-decoration: underline !important; }
.kb-article-content strong { color: #fff; }
.kb-article-content code { background: rgba(255,255,255,.10); color: #ffd2b0; padding: 2px 7px; border-radius: 6px; font-size: 14px; direction: ltr; unicode-bidi: embed; }
.kb-article-content ol, .kb-article-content ul { padding-inline-start: 26px; margin: 10px 0 18px; }
.kb-article-content li { margin-bottom: 9px; }
.article-content h2 { font-size: 30px !important; line-height: 1.3 !important; }
/* hide the empty sub-category box */
div:has(> .kbcategories > .know-bgbox-container:not(:has(*))) { display: none !important; }
/* compact page banner in the client area / cart */
.top-header { padding-top: 158px !important; padding-bottom: 30px !important; }
.product .header-content header { padding-top: 26px !important; }
#order-standard_cart .products .product .header-content .product-name { height: auto !important; }
.top-header .wrapper .heading { font-size: 38px !important; line-height: 1.2 !important; margin: 0 !important; }
.top-header .wrapper .subheading { font-size: 16px !important; line-height: 24px !important; margin: 4px 0 0 !important; }
.section-heading { font-size: 32px !important; }
.section-subheading { font-size: 16px !important; margin-bottom: 8px !important; }
/* product feature lists in the cart: compact rows */
#order-standard_cart .products .product div.product-desc, .product .product-desc { padding: 18px 26px 22px !important; line-height: 22px !important; }
#order-standard_cart .product-desc li, .product .product-desc li { margin: 0 0 5px 0 !important; line-height: 1.45 !important; }
#order-standard_cart .product-desc ul, .product .product-desc ul { margin: 0 !important; }
.product-desc .prod-desc-ul li { margin: 0 !important; padding: 4px 0 !important; line-height: 1.35 !important; }
.product-desc .prod-desc-ul li .feature-value { display: block; line-height: 1.35 !important; font-weight: 600; }
.product-desc .prod-desc-ul li .feature-value br { display: none; }
.product .product-desc.list-info { padding: 14px 24px 18px !important; margin-top: 0 !important; }
#order-standard_cart .header-lined { margin: 0 0 6px 0 !important; padding: 0 !important; border: 0 !important; }
#order-standard_cart .header-lined h2, #order-standard_cart .header-lined h1 { margin: 0 0 6px 0 !important; padding: 0 !important; }
#order-standard_cart .header-lined p { margin: 0 0 8px 0 !important; }
#order-standard_cart .products { margin-top: 0 !important; }
#order-standard_cart .products .row { margin-top: 0 !important; }
#order-standard_cart .products .product { margin-top: 0 !important; margin-bottom: 20px !important; }
/* cart / checkout / forms: tighter, even vertical rhythm */
.wrapper.sec-normal { padding-top: 28px !important; padding-bottom: 48px !important; }
#order-standard_cart .mt-80, .wrapper.sec-normal .mt-80 { margin-top: 24px !important; }
#order-standard_cart .mb-80, .wrapper.sec-normal .mb-80 { margin-bottom: 24px !important; }
#order-standard_cart .pt-80, .wrapper.sec-normal .pt-80 { padding-top: 24px !important; }
#order-standard_cart .pb-80, .wrapper.sec-normal .pb-80 { padding-bottom: 24px !important; }
#order-standard_cart .prepend-icon .field { margin-bottom: 0 !important; }
form .form-group, #order-standard_cart form .form-group { margin-bottom: 16px !important; }
#order-standard_cart .products { margin-top: 24px; }
#order-standard_cart .field-container { padding: 24px; }
.section-heading { margin-bottom: 14px !important; }
.egw-lang { display: inline-block; padding: 1px 12px; margin: 0 8px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; border: 1px solid #f37623; }
.egw-lang:hover { background: #f37623; color: #fff; }

/* Mobile header: one tidy row in the top bar, and the open menu starts below the logo */
@media (max-width: 767px) {
  .infonews .news { display: none !important; }
  .infonews .link { flex: 0 0 100%; max-width: 100%; }
  .infonews .infonews-nav { float: none !important; display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 12px; }
  .infonews .infonews-nav > * { flex: 0 0 auto; margin: 0 !important; }
  .infonews .infonews-nav .cur-switch { display: inline-flex; gap: 6px; }
  .infonews .infonews-nav .tabphone { display: none !important; }
  .menu-wrap.mobile .main-menu { padding-top: 150px !important; box-sizing: border-box; }
  .menu-wrap.mobile .main-menu .menu-item { margin-bottom: 4px; }
  .menu-wrap.mobile .main-menu .cur-switch a, .menu-wrap.mobile .main-menu .egw-lang { display: inline-block; margin: 0 6px; }
}

/* Brand headings: Comfortaa (SIL Open Font License), self-hosted - close to the rounded geometry of the logo. English pages only; Arabic keeps Cairo. */
@font-face { font-family: 'Comfortaa'; src: url('/egweb-assets/fonts/comfortaa/Comfortaa-Latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
html:not([lang="ar"]):not([dir="rtl"]) :is(.top-header .heading, .section-heading, .slider-content h1, h1.heading, .egw-clients-title) {
  font-family: 'Comfortaa', 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* Order form: readable text on the dark background */
#order-standard_cart .product-info p, #order-standard_cart .product-info li, #order-standard_cart .product-info ul,
#order-standard_cart .product-info .mergecolor, #order-standard_cart .product-info div { color: #d6def7 !important; }
#order-standard_cart label, #order-standard_cart .field-container label, #order-standard_cart .sub-heading + p,
#order-standard_cart .field-help-text, #order-standard_cart .form-text, #order-standard_cart .text-muted, #order-standard_cart .help-block { color: #c9d3f2 !important; }
#order-standard_cart .form-control::placeholder { color: #8e9bc7 !important; opacity: 1; }
#frmConfigureProduct label, #productConfigurableOptions label, #productConfigurableOptions .form-group label { color: #c9d3f2 !important; }

/* Store product cards: one spec row per feature (label at the start, value at the end) */
.product-desc .prod-desc-ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.product-desc .prod-desc-ul li { display: flex !important; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0 !important; margin: 0 !important; font-size: 14px; line-height: 1.4 !important; border-bottom: 1px solid rgba(255,255,255,.18); text-align: start; }
.product-desc .prod-desc-ul li:last-child { border-bottom: 0; }
.product-desc .prod-desc-ul li::before, .product-desc .prod-desc-ul li::after { display: none !important; content: none !important; }
.product-desc .prod-desc-ul li .feature-value { display: inline !important; font-weight: 700; white-space: nowrap; }

/* Top menu: real button feel (padding, hover pill, chevron on dropdowns) */
@media (min-width: 992px) {
  .nav-menu .main-menu > .menu-item > a:not(.pe-0) { padding: 9px 14px !important; margin: 0 2px !important; border-radius: 12px; transition: background .2s; }
  .nav-menu .main-menu > .menu-item > a:not(.pe-0):hover, .nav-menu .main-menu > .menu-item:hover > a:not(.pe-0) { background: rgba(255,255,255,.1) !important; }
  .nav-menu .main-menu > .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-inline-start: 8px; position: relative; top: -2px; opacity: .7; }
}
@media (min-width: 992px) and (max-width: 1199px) { .nav-menu .main-menu > .menu-item > a:not(.pe-0) { padding: 8px 10px !important; font-size: 15px; } }

/* Store product cards: readable plan name, tidy header */
.product .header-content header .title { font-size: 24px !important; line-height: 1.3 !important; margin-bottom: 8px; display: inline-block; }
.product .header-content { padding: 26px 26px 22px !important; }
.product .header-content .product-pricing { margin: 4px 0 14px; }
.product .header-content .product-pricing .price { font-size: 34px; }
.product .header-content .product-pricing .period { font-size: 15px !important; opacity: .8; }
.product .header-content .product-pricing .period { display: block !important; margin: 2px 0 0 !important; }
.product .header-content .product-pricing .price { display: inline-block; }
/* Arabic and English share exactly the same spacing and weights */
.product .header-content header { margin-bottom: 10px !important; }
.product .header-content .btn-order-now { margin-top: 20px !important; }
.product .header-content header .title { font-weight: 700 !important; }
html[dir="rtl"] .product .header-content, html[dir="rtl"] .product .product-desc { text-align: start; }
/* One hover effect only: drop the theme's vertical stroke and the theme's item background */
.nav-menu .main-menu a.v-stroke::before, .nav-menu .main-menu a.v-stroke::after, .nav-menu .main-menu a.h-stroke::before, .nav-menu .main-menu a.h-stroke::after { content: none !important; display: none !important; }
.nav-menu .main-menu > .menu-item:hover, .nav-menu .main-menu > .menu-item:hover:last-child, .menu-wrap.fixed .nav-menu .main-menu > .menu-item:hover { background: transparent !important; }
@media (min-width: 992px) {
  .nav-menu .main-menu > .menu-item-has-children > a::after { display: inline-block !important; content: "" !important; width: 6px !important; height: 6px !important; position: relative !important; top: -2px !important; left: auto !important; right: auto !important; bottom: auto !important; background: none !important; }
}

/* Language switch (English / Arabic only), same on every page */
.loginpage .login-page-header .egw-lang { position: absolute; right: 74px; top: 38px; margin: 0; z-index: 3; }
html[dir="rtl"] .loginpage .login-page-header .egw-lang { right: auto; left: 74px; }
.lang-drop { display: none !important; }