/* =========================================================================
   Dubai Free Classified — Theme (v2, professional/flat)
   Single accent (brick-red, for CTAs) on a deep navy-teal header/hero,
   white content surface, light-gray page background. No gradients on
   cards, no decorative clipping — clean, scannable, marketplace-standard.
   ========================================================================= */

:root{
  /* --- Color tokens --- */
  --dfc-navy-900:#0E211C;
  --dfc-navy-800:#123027;
  --dfc-teal-800:#0F4A3C;
  --dfc-teal-700:#146B54;
  --dfc-teal-600:#1B7A5F;
  --dfc-teal-500:#1F8A6A;
  --dfc-teal-100:#E6F2ED;

  --dfc-accent-700:#B6301F;
  --dfc-accent-600:#D6402E;
  --dfc-accent-500:#E4543F;
  --dfc-accent-100:#FDEAE7;

  --dfc-bg:#F6F7F6;
  --dfc-white:#FFFFFF;
  --dfc-border:#E6E9E7;
  --dfc-border-strong:#D7DCD9;

  --dfc-ink-900:#182420;
  --dfc-ink-700:#3B463F;
  --dfc-ink-500:#67716B;
  --dfc-ink-300:#9AA39D;

  /* --- Type --- */
  --dfc-font-display:'Cairo', 'Segoe UI', sans-serif;
  --dfc-font-body:'Inter', 'Segoe UI', sans-serif;

  /* --- Radii / shadow --- */
  --dfc-radius-sm:8px;
  --dfc-radius-md:10px;
  --dfc-radius-lg:14px;
  --dfc-shadow-sm:0 1px 3px rgba(14,33,28,0.06), 0 1px 2px rgba(14,33,28,0.04);
  --dfc-shadow-md:0 8px 20px rgba(14,33,28,0.10);

  /* legacy aliases kept so dfc-login.css (which references these names)
     stays visually in sync without needing its own rewrite */
  --dfc-teal-900:var(--dfc-navy-900);
  --dfc-gold-600:var(--dfc-accent-600);
  --dfc-gold-500:var(--dfc-accent-500);
  --dfc-gold-300:var(--dfc-accent-500);
  --dfc-sand-50:var(--dfc-bg);
  --dfc-sand-100:var(--dfc-white);
  --dfc-sand-200:var(--dfc-border);
}

/* =========================================================================
   Base
   ========================================================================= */

body{
  font-family:var(--dfc-font-body);
  color:var(--dfc-ink-900);
  background:var(--dfc-bg);
  font-size:14.5px;
  overflow-x:hidden;
}

.dfc-body-bg{ background:var(--dfc-bg); }

/* Safety net: content rendered from PHP variables ($recent_ads, $category_*)
   is outside our control — make sure any image inside it can't force
   horizontal scroll on narrow screens. */
.dfc-body-bg img{ max-width:100%; height:auto; }

/* iOS Safari zooms the page in when a focused text input has a font-size
   under 16px. Keep all typed inputs at 16px so focusing the search box
   or a form field doesn't trigger that zoom on mobile. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"]{
  font-size:16px;
}
@media (min-width:600px){
  .dfc-search-row input[type="text"]{ font-size:14.5px; }
}

h1,h2,h3,.dfc-display{
  font-family:var(--dfc-font-display);
  font-weight:700;
  color:var(--dfc-navy-900);
  letter-spacing:-0.01em;
}

a{ color:var(--dfc-teal-700); text-decoration:none; }
a:hover{ color:var(--dfc-accent-600); text-decoration:none; }

/* =========================================================================
   Motion — single restrained entrance pass only
   ========================================================================= */

@keyframes dfcFadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.dfc-fade-in{ animation:dfcFadeUp .5s ease both; }
.dfc-fade-in.dfc-d1{ animation-delay:.08s; }
.dfc-fade-in.dfc-d2{ animation-delay:.16s; }
.dfc-fade-in.dfc-d3{ animation-delay:.24s; }

@media (prefers-reduced-motion: reduce){ .dfc-fade-in{ animation:none !important; } }

/* =========================================================================
   Hero — search-first, like a classifieds marketplace homepage
   ========================================================================= */

.dfc-hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--dfc-radius-lg);
  background:var(--dfc-navy-900); /* fallback while the SVG scene loads */
  padding:38px 32px 34px;
  margin-bottom:20px;
}

/* =========================================================================
   Hero background scene — an original vector illustration of a Dubai
   skyline at dusk (not a photo): gradient sky, moon + twinkling stars,
   a tall tapering spire tower, a sail-shaped waterfront building, mid/low
   -rise silhouettes, drifting clouds, pulsing window lights, and a dhow
   boat on the water. Fills the whole hero (not just a bottom strip).
   Colors are hardcoded to match the theme tokens above (SVG gradient
   stops don't reliably take var() across browsers) — see main_view.php
   for the markup, which uses classes here to color/animate each part.
   ========================================================================= */

.dfc-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  animation:dfcSceneReveal .9s ease-out both;
}

/* Readability overlay — sits above the scene, below the content, so the
   search card and headline stay legible over any part of the skyline. */
.dfc-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(14,33,28,0.62) 0%, rgba(14,33,28,0.28) 45%, rgba(20,107,84,0.42) 100%);
  pointer-events:none;
}

.dfc-hero-inner{ position:relative; z-index:2; max-width:780px; margin:0 auto; text-align:center; }

/* --- scene part colors --- */
.dfc-scene-buildings-far{ fill:#0A1712; opacity:0.55; }
.dfc-scene-buildings-mid{ fill:#0D251D; }
.dfc-scene-buildings-near{ fill:#081310; }
.dfc-scene-spire{ fill:#081310; }
.dfc-scene-sail{ fill:#0A1712; }
.dfc-scene-water{ fill:#0A1712; }
.dfc-scene-boat{ fill:#081310; stroke:#081310; }
.dfc-scene-moon{ fill:var(--dfc-accent-100); }
.dfc-scene-cloud{ fill:var(--dfc-white); opacity:0.08; }
.dfc-scene-star,
.dfc-scene-light{ fill:var(--dfc-accent-500); }
.dfc-scene-waterline{ stroke:var(--dfc-teal-500); opacity:0.3; }

/* --- ambient motion: quiet, continuous, never distracting --- */
.dfc-scene-star{ animation:dfcTwinkle 3.2s ease-in-out infinite; }
.dfc-scene-light{ animation:dfcTwinkle 4.5s ease-in-out infinite; }
.dfc-scene-cloud{ animation:dfcDrift 50s linear infinite; }
.dfc-scene-cloud.dfc-cloud-2{ animation-duration:65s; animation-direction:reverse; }
.dfc-scene-boat{ animation:dfcBob 4s ease-in-out infinite; transform-origin:center; }

@keyframes dfcSceneReveal{
  from{ opacity:0; transform:scale(1.02); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes dfcTwinkle{
  0%, 100%{ opacity:0.85; }
  50%{ opacity:0.25; }
}
@keyframes dfcDrift{
  from{ transform:translateX(-6%); }
  to{ transform:translateX(6%); }
}
@keyframes dfcBob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
@media (prefers-reduced-motion: reduce){
  .dfc-hero-bg,
  .dfc-scene-star,
  .dfc-scene-light,
  .dfc-scene-cloud,
  .dfc-scene-boat{ animation:none !important; }
}

.dfc-hero h1{
  color:var(--dfc-white);
  font-size:clamp(22px,3.2vw,30px);
  margin:0 0 22px;
  font-weight:700;
}

/* Search bar */
.dfc-search{
  background:var(--dfc-white);
  border-radius:var(--dfc-radius-md);
  box-shadow:var(--dfc-shadow-md);
  padding:14px;
  text-align:left;
}
.dfc-search-tabs{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:12px;
}
.dfc-search-tabs button{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--dfc-border);
  background:var(--dfc-white);
  color:var(--dfc-ink-700);
  font-size:12.5px; font-weight:600;
  padding:9px 15px 9px 12px;
  min-height:38px;
  border-radius:20px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dfc-search-tabs button .fa{
  font-size:13px; color:var(--dfc-teal-600); transition:color .15s ease;
}
.dfc-search-tabs button.is-active{
  background:var(--dfc-accent-600); border-color:var(--dfc-accent-600); color:var(--dfc-white);
  box-shadow:0 3px 10px rgba(214,64,46,0.28);
}
.dfc-search-tabs button.is-active .fa{ color:var(--dfc-white); }
.dfc-search-tabs button:hover:not(.is-active){ border-color:var(--dfc-accent-500); color:var(--dfc-accent-600); }
.dfc-search-tabs button:hover:not(.is-active) .fa{ color:var(--dfc-accent-500); }

.dfc-search-row{ display:flex; gap:10px; }
.dfc-search-row input[type="text"]{
  flex:1;
  height:46px;
  border:1px solid var(--dfc-border-strong);
  border-radius:var(--dfc-radius-sm);
  padding:0 16px;
  font-size:14.5px;
  color:var(--dfc-ink-900);
}
.dfc-search-row input[type="text"]:focus{
  outline:none; border-color:var(--dfc-teal-600);
  box-shadow:0 0 0 3px var(--dfc-teal-100);
}
.dfc-search-row button{
  height:46px; padding:0 26px;
  border:none; border-radius:var(--dfc-radius-sm);
  background:var(--dfc-accent-600); color:var(--dfc-white);
  font-weight:700; font-size:14.5px; cursor:pointer;
  transition:background .15s ease;
}
.dfc-search-row button:hover{ background:var(--dfc-accent-700); }

.dfc-hero-links{
  margin-top:16px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
}
.dfc-hero-links a{
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.82);
}
.dfc-hero-links a:hover{ color:var(--dfc-white); }

@media (max-width:600px){
  .dfc-search-row{ flex-direction:column; }
  .dfc-search-row button{ width:100%; }
}

/* =========================================================================
   Promo strip — two flat cards
   ========================================================================= */

.dfc-promo-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.dfc-promo-card{
  background:var(--dfc-white);
  border:1px solid var(--dfc-border);
  border-radius:var(--dfc-radius-md);
  padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.dfc-promo-card .dfc-promo-icon{
  width:42px; height:42px; border-radius:10px;
  background:var(--dfc-teal-100); color:var(--dfc-teal-700);
  display:flex; align-items:center; justify-content:center; font-size:17px;
  flex-shrink:0;
}
.dfc-promo-card h3{ font-size:15px; margin:0 0 3px; }
.dfc-promo-card p{ font-size:13px; color:var(--dfc-ink-500); margin:0; }
.dfc-promo-card .dfc-promo-cta{
  font-size:12.5px; font-weight:700; color:var(--dfc-teal-700);
  white-space:nowrap;
}
@media (max-width:700px){ .dfc-promo-row{ grid-template-columns:1fr; } }

/* =========================================================================
   Trust banner
   ========================================================================= */

.dfc-trust-banner{
  background:var(--dfc-teal-700);
  border-radius:var(--dfc-radius-md);
  padding:14px 22px;
  display:flex; align-items:center; flex-wrap:wrap; gap:18px;
  margin-bottom:22px;
}
.dfc-trust-banner span{
  color:var(--dfc-white); font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
}
.dfc-trust-banner .fa{ color:var(--dfc-accent-500); }

/* =========================================================================
   Section shell
   ========================================================================= */

.dfc-panel{
  background:var(--dfc-white);
  border:1px solid var(--dfc-border);
  border-radius:var(--dfc-radius-lg);
  padding:22px;
  margin-bottom:22px;
}

.dfc-panel-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px; margin-bottom:16px;
}
.dfc-panel-head h2{ font-size:18px; margin:0; }
.dfc-panel-head .dfc-panel-nav{ display:flex; gap:6px; }

.dfc-new-pill{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.03em;
  color:var(--dfc-accent-700); background:var(--dfc-accent-100);
  padding:3px 8px; border-radius:6px; vertical-align:middle; margin-left:8px;
}

/* Carousel nav — kept as .carousel-nav / #nextItem / #prevItem so existing JS still binds */
.carousel-nav{
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--dfc-bg); border:1px solid var(--dfc-border);
  color:var(--dfc-ink-700) !important;
  margin-left:6px;
  transition:background .15s ease, border-color .15s ease;
}
.carousel-nav:hover{ background:var(--dfc-accent-100); border-color:var(--dfc-accent-500); color:var(--dfc-accent-700) !important; }

/* Listing cards — flat, dubizzle-style: image, then whatever the ad
   partial renders (title/price/specs). Generic hooks in case your ad
   partial markup includes these classes; harmless if it doesn't. */
.item-carousel{ padding-top:2px; }
.item-carousel .item,
.item-carousel > div{
  background:var(--dfc-white);
  border:1px solid var(--dfc-border);
  border-radius:var(--dfc-radius-md);
  overflow:hidden;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.item-carousel .item:hover,
.item-carousel > div:hover{
  box-shadow:var(--dfc-shadow-md);
  border-color:var(--dfc-border-strong);
}
.item-carousel img{ width:100%; display:block; border-radius:0; aspect-ratio:4/3; object-fit:cover; }
.item-carousel .dfc-ad-price{ color:var(--dfc-accent-600); font-weight:700; font-size:15px; }
.item-carousel .dfc-ad-title{ color:var(--dfc-ink-900); font-size:13.5px; font-weight:600; }
.item-carousel .dfc-ad-meta{ color:var(--dfc-ink-500); font-size:12px; }

/* Banner ad tiles */
.dfc-banner-tile{
  border-radius:var(--dfc-radius-md);
  overflow:hidden;
  border:1px solid var(--dfc-border);
  display:block;
  transition:box-shadow .15s ease;
  margin-bottom:16px;
}
.dfc-banner-tile:hover{ box-shadow:var(--dfc-shadow-md); }
.dfc-banner-tile img{ width:100%; display:block; }

/* Category grid — icon + label list, dubizzle-style columns */
.dfc-cat-col{ padding:4px 4px 4px 0; }
.dfc-cat-col-head{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--dfc-navy-900);
  margin-bottom:10px;
}
.dfc-cat-col-head .dfc-cat-dot{
  width:8px; height:8px; border-radius:50%; background:var(--dfc-accent-600); display:inline-block;
}
#cat-col1 ul, #cat-col2 ul, #cat-col3 ul{ list-style:none; padding-left:0; margin:0; }
#cat-col1 li, #cat-col2 li, #cat-col3 li{
  padding:7px 0; border-bottom:1px solid var(--dfc-border); font-size:13.5px;
}
#cat-col1 li:last-child, #cat-col2 li:last-child, #cat-col3 li:last-child{ border-bottom:none; }
#cat-col1 a, #cat-col2 a, #cat-col3 a{ color:var(--dfc-ink-700); }
#cat-col1 a:hover, #cat-col2 a:hover, #cat-col3 a:hover{ color:var(--dfc-accent-600); }

/* Ad slot wrapper — purely cosmetic framing, does not touch the ad markup itself */
.dfc-ad-slot{
  border-radius:var(--dfc-radius-md);
  background:var(--dfc-white);
  border:1px solid var(--dfc-border);
  padding:10px;
  margin-bottom:20px;
  text-align:center;
  overflow-x:hidden;
}
.dfc-ad-slot ins.adsbygoogle{ max-width:100%; }
.dfc-ad-slot .dfc-ad-label{
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dfc-ink-300); margin-bottom:6px; display:block;
}

/* "Why choose us" cards */
.dfc-why-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:12px; margin-top:14px;
}
.dfc-why-card{
  background:var(--dfc-bg);
  border:1px solid var(--dfc-border);
  border-radius:var(--dfc-radius-md);
  padding:16px;
}
.dfc-why-card .dfc-why-icon{
  width:34px; height:34px; border-radius:8px;
  background:var(--dfc-teal-100); color:var(--dfc-teal-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px; font-size:14px;
}
.dfc-why-card h4{ font-size:14px; font-weight:700; margin:0 0 4px; color:var(--dfc-ink-900); }
.dfc-why-card p{ font-size:12.5px; color:var(--dfc-ink-500); margin:0; line-height:1.5; }

/* Sidebar / SEO copy panel */
.dfc-sidebar-copy p{ font-size:13.5px; line-height:1.75; color:var(--dfc-ink-700); }
.dfc-sidebar-copy h3{ font-size:15px; margin-top:20px; }

@media (max-width:767px){
  .dfc-hero{ padding:28px 18px 24px; border-radius:10px; }
  .dfc-panel{ padding:18px 16px; }

  /* Bootstrap collapses .col-md-4/.col-sm-4 to full width here — give the
     three stacked category columns breathing room and a visible seam. */
  .dfc-cat-col{
    padding:14px 0;
    border-bottom:1px solid var(--dfc-border);
  }
  #dfc-categories .col-md-4:last-child .dfc-cat-col{ border-bottom:none; }

  .dfc-trust-banner{
    padding:14px 16px;
    gap:10px 16px;
    justify-content:flex-start;
  }
  .dfc-trust-banner span{ font-size:12.5px; }

  .dfc-promo-card{ padding:16px; }

  .dfc-panel-head h2{ font-size:16.5px; }

  /* Ads sized "auto" by Google can still request more width than the
     viewport on some devices — clip at the slot rather than let the
     page scroll sideways. */
  .dfc-ad-slot{ max-width:100%; }
}

@media (max-width:420px){
  .dfc-search-tabs button{ padding:8px 12px; font-size:12px; }
  .dfc-hero h1{ margin-bottom:18px; }
  .dfc-trust-banner{ flex-direction:column; align-items:flex-start; gap:10px; }
}