:root{
  --rukn-orange:#ff7a18;
  --rukn-orange-dark:#e66a15;

  /* NOTE: mockup defines green twice; keep the hero/request green */
  --rukn-green:#10b981;

  --slate-900:#0f172a;
  --slate-800:#1e293b;
  --slate-500:#64748b;
  --slate-100:#f1f5f9;

  --rukn-dark:#0f172a;
  --text-gray:#94a3b8;
  --card-dark:#1e293b;

  --rukn-orange-light:#fff5ed;

  --muted:#6b7280;
  --border:#e5e7eb;
  --transition: all .3s ease;
}

body{
  font-family:'Cairo',sans-serif;
  background-color:#fff;
  color:var(--slate-800);
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* utility */
.pro-shadow{ box-shadow:0 25px 60px -15px rgba(0,0,0,.08); }
.orange-gradient{ background:linear-gradient(135deg,#ff7a18 0%,#ff9d52 100%); }
.green-gradient{ background:linear-gradient(135deg,#10b981 0%,#34d399 100%); }
.bg-mesh{
  background-image:
    radial-gradient(at 0% 0%, rgba(255,122,24,0.03) 0, transparent 50%),
    radial-gradient(at 50% 0%, rgba(16,185,129,0.02) 0, transparent 50%);
}

/* =================== BILLBOARD =================== */
.billboard-container{
  height: clamp(220px, 30vw, 500px);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}
@media (max-width:768px){
  .billboard-container{ border-radius:25px; }
}

/* Swiper bullets like mockup */
.swiper-pagination-bullet{ background:#fff; opacity:.5; }
.swiper-pagination-bullet-active{ opacity:1; background:var(--rukn-orange); }

/* =================== SECTION BACKGROUNDS =================== */
.section-ads { background:#fff7ed; display:block !important; visibility:visible !important; opacity:1 !important; }
.section-requests{ background:#f0fdf4; }
.section-trending{ background:#ffffff; }
.section-stores{ background:#f8fafc; }

/* spacing */
section{ margin-bottom:2rem; }
@media (min-width:768px){ section{ margin-bottom:3rem; } }

/* =================== HORIZONTAL ROWS (IMPORTANT) =================== */
/* Fix hover clipping + make cards “float” like mockup */
#storesRow,
#trendingRow{
  overflow-y: visible !important;
  padding-top: 26px;     /* ✅ prevents top border clipping */
  padding-bottom: 20px;
  user-select: none;
}
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* =================== TRENDING (MOCKUP EXACT) =================== */
.trending-wrap{
  border-radius: 2rem;
  overflow: visible !important;
  transition: .35s ease;
  background: transparent;
  margin-top: 6px;
  padding: 8px;
}
.trending-wrap,
.trending-wrap:hover{ box-shadow:none !important; }

.trending-wrap{ transition: transform .25s ease, border-color .25s ease; }
.trending-wrap:hover{ transform: translateY(-6px); }

.trending-card{
  border-radius: 2rem;
  overflow: hidden;
  transform: translateZ(0);
}

/* Hide scroll arrows on mobile, show on desktop */
#storesLeft, #storesRight,
#trendingLeft, #trendingRight {
  display: none;
}
@media (min-width:768px){
  #storesLeft, #storesRight,
  #trendingLeft, #trendingRight {
    display: flex !important;
  }
}
@media (max-width:767px){
  #trendingRow,
  #storesRow{
    padding-top: 0 !important;
  }
}

/* =================== HERO (MOBILE LAYOUT FIX - mockup) =================== */
@media (max-width:640px){
  .hero-actions{
    display:grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:12px !important;
  }
  .hero-actions .hero-btn{
    padding:16px !important;
    border-radius:22px !important;
  }
  .hero-actions .store-btn{
    grid-column: 1 / -1 !important;
  }
  .hero-actions .hero-btn h3{
    font-size:16px !important;
    margin-bottom:6px !important;
  }
  .hero-actions .hero-btn p{
    font-size:12px !important;
    line-height:1.6 !important;
  }
}

/* =================== SECTION HEADER BUTTONS (MOBILE) =================== */
@media (max-width:640px){
  .section-header-buttons{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
  }
  .section-header-buttons a,
  .section-header-buttons button{
    width:100% !important;
    padding:12px 10px !important;
    border-radius:18px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    text-align:center !important;
  }
}

/* =================== ACCESSIBILITY / PERF =================== */
button:focus,a:focus{
  outline:2px solid var(--rukn-orange);
  outline-offset:2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible){ outline:none; }

img{ max-width:100%; height:auto; display:block; }
.swiper-slide img{ object-fit:cover; }

/* print */
@media print{
  .swiper-button-next,.swiper-button-prev,
  #storesLeft,#storesRight,#trendingLeft,#trendingRight,
  #loadMoreAdsBtn,#loadMoreRequestsBtn{ display:none !important; }
}

/* =================== TIP CHOOSER (LOGGED-IN SECTION) =================== */
/* tip-card: just a semantic hook — styling is all Tailwind */
.tip-card{ cursor: pointer; }

/* Smooth tip text transition (JS uses inline styles, this is a fallback) */
#tipText{
  transition: opacity 0.18s ease, transform 0.18s ease;
}