/* =========================================================
   اوليكس مصر v1.2 – layout-safe polish + color harmony
   Does not override Listivo flex/grid structure
   ========================================================= */

:root,
.elementor-kit-5644 {
  --olx-ink: #1e2f3d;
  --olx-slate: #5a6b78;
  --olx-action: #ff6b4a;
  --olx-action-hover: #e85d2a;
  --olx-soft: #f4f7fa;
  --olx-line: rgba(30, 47, 61, 0.1);
  --olx-font: "Cairo", system-ui, sans-serif;

  /* Listivo semantic colors – primary1=action, primary2=ink */
  --e-global-color-lprimary1: #ff6b4a;
  --e-global-color-lprimary2: #1e2f3d;
  --e-global-color-lcolor1: #1e2f3d;
  --e-global-color-lcolor2: #5a6b78;
  --e-global-color-lcolor3: #d9e4ee;
  --e-global-color-lcolor4: #eef3f7;
  --e-global-color-lcolor5: #ffffff;
  --e-global-color-lsectionbg: #f4f7fa;

  --e-global-typography-lheading1-font-family: "Cairo";
  --e-global-typography-lheading2-font-family: "Cairo";
  --e-global-typography-lheading3-font-family: "Cairo";
  --e-global-typography-lheading4-font-family: "Cairo";
  --e-global-typography-llabel-font-family: "Cairo";
  --e-global-typography-ltext1-font-family: "Cairo";
}

body.olx-modern {
  font-family: var(--olx-font);
  color: var(--olx-ink);
  background-color: var(--olx-soft);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(255, 107, 74, 0.2);
}

.olx-skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -48px;
  z-index: 100000;
  background: var(--olx-ink);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.olx-skip-link:focus {
  top: 12px;
}

h1, h2, h3, h4, h5, h6,
.listivo-heading-v2__text,
.elementor-heading-title,
.listivo-button {
  font-family: var(--olx-font);
}

.listivo-heading-v2__text span,
.listivo-heading-v2__text b,
.listivo-heading-v2__text strong {
  color: var(--olx-action) !important;
}

/* ---------- Color harmony: buttons ---------- */
/* primary-1 = filled action (search, etc.) */
.listivo-button--primary-1,
.listivo-search-form-v2 .listivo-button--primary-1 {
  background-color: var(--olx-action) !important;
  color: #fff !important;
  border-color: var(--olx-action) !important;
}

.listivo-button--primary-1 path,
.listivo-button--primary-1 rect,
.listivo-search-form-v2 .listivo-button--primary-1 path {
  fill: #fff !important;
}

.listivo-button--primary-1:hover {
  background-color: var(--olx-action-hover) !important;
  color: #fff !important;
}

/* primary-2 / menu CTA = same action family for consistency */
.listivo-menu-v2__button .listivo-button--primary-2,
.listivo-menu-mobile-v2__button .listivo-button--primary-2,
a.listivo-button.listivo-button--primary-2 {
  background-color: var(--olx-action) !important;
  color: #fff !important;
  border-color: var(--olx-action) !important;
}

.listivo-menu-v2__button .listivo-button--primary-2 path,
.listivo-menu-mobile-v2__button .listivo-button--primary-2 path,
a.listivo-button.listivo-button--primary-2 path {
  fill: #fff !important;
}

.listivo-menu-v2__button .listivo-button--primary-2:hover,
a.listivo-button.listivo-button--primary-2:hover {
  background-color: var(--olx-action-hover) !important;
  color: #fff !important;
}

/* Never stretch site-wide CTAs */
.listivo-menu-v2__button .listivo-button,
.listivo-menu-v2__cta .listivo-button,
.elementor-widget-lst_listing_list_with_tabs .listivo-button,
a.listivo-button.listivo-button--primary-1 {
  width: auto !important;
  max-width: none !important;
}

/* ---------- Search form: contain fields cleanly ---------- */
.listivo-search-form-v2 {
  border-radius: 18px;
  border: 1px solid var(--olx-line);
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 47, 61, 0.08);
  padding: 12px !important;
  box-sizing: border-box;
}

.listivo-search-form-v2__inner {
  align-items: center !important;
  gap: 10px;
}

.listivo-search-form-v2 .listivo-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 140px;
  border-radius: 999px !important;
}

/* ---------- Cards ---------- */
.listivo-listing-card-v4 {
  border-radius: 16px;
  border: 1px solid var(--olx-line);
  background: #fff;
  box-shadow: 0 4px 16px rgba(30, 47, 61, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.listivo-listing-card-v4:hover {
  box-shadow: 0 12px 28px rgba(30, 47, 61, 0.1);
  border-color: rgba(255, 107, 74, 0.35);
}

.listivo-listing-card-v4 h3,
.listivo-listing-card-v4__name {
  color: var(--olx-ink);
  font-weight: 700;
  line-height: 1.45;
}

/* ---------- Category chips contrast ---------- */
.listivo-tabs-v2__tab,
.listivo-term-tabs a,
.listivo-simple-term-list a,
.listivo-search-form-v2__term,
a.listivo-pill,
.listivo-pill {
  color: var(--olx-ink) !important;
  background: #e8eef3 !important;
  border: 1px solid var(--olx-line);
}

.listivo-tabs-v2__tab--active,
.listivo-tabs-v2__tab.is-active,
.listivo-term-tabs a.is-active,
.listivo-pill--active {
  background: var(--olx-action) !important;
  color: #fff !important;
  border-color: var(--olx-action) !important;
}

/* ---------- Header scroll hint ---------- */
body.olx-scrolled .listivo-menu-v2 {
  box-shadow: 0 6px 20px rgba(30, 47, 61, 0.08);
}

/* ---------- Mobile CTA ---------- */
.olx-mobile-cta {
  display: none !important;
}

@media (max-width: 767px) {
  .olx-mobile-cta {
    display: flex !important;
    position: fixed;
    inset-inline: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 99990;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--olx-action);
    color: #fff !important;
    font-family: var(--olx-font);
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 12px 28px rgba(232, 93, 42, 0.35);
  }

  .listivo-search-form-v2 .listivo-button {
    width: 100% !important;
    min-width: 0;
  }

  .listivo-heading-v2__text {
    font-size: clamp(22px, 6.5vw, 32px);
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}