/* ── Cleanvengers Global Styles ─────────────────────────────────── */
:root {
  --cv-dark:  #024B3E;
  --cv-green: #3CA200;
  --cv-mid:   #009b72;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }

/* Footer gradient */
.footer-gradient {
  background: linear-gradient(158deg, #024B3E 0%, #3CA200 100%);
}

/* Nav */
#cv-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid #f0f0f0; padding: 1rem 1.5rem; }

/* Service / Product Cards */
.service-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -12px rgba(2,75,62,0.18); }
.service-card:hover .icon-box { background-color: #024B3E; color: white; }
.service-card:hover .book-btn { background-color: #024B3E; color: white; border-color: #024B3E; }

.product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -12px rgba(2,75,62,0.18); }

/* Price card */
.price-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }

/* Blog card */
.blog-card .blog-img { transition: transform 0.6s ease; }
.blog-card:hover .blog-img { transform: scale(1.06); }

/* Hero section fade-in */
@keyframes fadeUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
.animate-fade-up { animation: fadeUp 0.6s ease forwards; }

/* Details / FAQ */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary i[data-lucide="chevron-down"] { transform: rotate(180deg); }

/* Range slider */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; height: 22px; width: 22px; border-radius: 50%;
  background: #3CA200; cursor: pointer; margin-top: -9px;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%; height: 4px; cursor: pointer; background: #e5e7eb; border-radius: 2px;
}

/* ── Mobile Responsiveness ────────────────────────────────────── */
@media (max-width: 768px) {
  /* KPI grids: 4-col → 2-col on mobile */
  .grid[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Complex grids: multi-col → 1-col on mobile */
  .grid[style*="2fr 1fr 1fr"],
  .grid[style*="2fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Modals: full-width with padding on mobile */
  .modal-box { margin: 0.5rem !important; max-width: calc(100vw - 1rem) !important; border-radius: 0.75rem !important; }
  /* Buttons: minimum 44px touch target */
  .btn-sm { min-height: 36px; padding: 8px 14px !important; font-size: 0.8125rem !important; }
  .btn-primary, .btn-green, .btn-red, .btn-outline { min-height: 44px; }
  /* Tables: always scrollable */
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Admin search */
  input[style*="width:220px"] { width: 100% !important; max-width: 220px; }
  /* Notification dropdown */
  #notifDropdown { width: calc(100vw - 2rem) !important; max-width: 320px; right: 0.5rem !important; }
  /* Admin sidebar compact */
  .nav-item span { font-size: 0.8125rem; }
  /* Cards: tighter padding on mobile */
  .card { padding: 1rem !important; }
  /* Section titles */
  .section-title { font-size: 1.25rem !important; }
  /* Stat cards: smaller text */
  .stat-card h3, .stat-card .text-2xl { font-size: 1.25rem !important; }
}

@media (max-width: 480px) {
  /* KPI grids: 2-col → 1-col on very small screens */
  .grid[style*="repeat(4"] { grid-template-columns: 1fr !important; }
  /* Booking step wizard buttons: stack vertically */
  .step-actions { flex-direction: column; gap: 0.5rem; }
  .step-actions button { width: 100%; font-size: 0.8rem; padding: 0.75rem; }
  /* Cleaner cards: single column */
  .cleaner-card { max-width: 100% !important; }
  /* Smaller text on mobile */
  .btn-primary, .btn-green, .btn-outline { font-size: 0.8rem; padding: 0.75rem; }
}

/* ── RTL (Arabic) ─────────────────────────────────────────────── */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] #cv-nav { direction: rtl; }
[dir="rtl"] .slide-arrow.prev { left: auto; right: 12px; }
[dir="rtl"] .slide-arrow.next { right: auto; left: 12px; }
[dir="rtl"] .slide-dots { direction: ltr; }
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; }
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .space-x-2 > :not(:first-child) { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .space-x-3 > :not(:first-child) { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .space-x-4 > :not(:first-child) { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .gap-2, [dir="rtl"] .gap-3, [dir="rtl"] .gap-4, [dir="rtl"] .gap-5, [dir="rtl"] .gap-6 { direction: rtl; }
[dir="rtl"] details summary { direction: rtl; }