/* ============================================================
   FIXEO V5 — MASTER BUG-FIX & UX/UI PATCH
   fixeo_v5_fixes.css  — loaded LAST for highest priority
   Tasks: 1-Hero · 2-Featured · 3-Portfolio · 4-Notifs
          5-Pricing · 6-General UX/UI
   All !important used deliberately to win the cascade.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   TASK 1 — HERO: Center headline, visible on load,
            below navbar, full responsiveness
   ════════════════════════════════════════════════════════════ */

.hero {
  display:            flex          !important;
  flex-direction:     column        !important;
  align-items:        center        !important;
  justify-content:    flex-start    !important;
  text-align:         center        !important;
  position:           relative      !important;
  overflow:           hidden        !important;
  min-height:         100vh         !important;
  /* Push content clear of fixed navbar + breathing room */
  padding-top:        calc(var(--navbar-height, 70px) + 40px) !important;
  padding-bottom:     64px          !important;
  padding-left:       24px          !important;
  padding-right:      24px          !important;
  box-sizing:         border-box    !important;
}

.hero-content {
  display:            flex          !important;
  flex-direction:     column        !important;
  align-items:        center        !important;
  width:              100%          !important;
  max-width:          780px         !important;
  margin-left:        auto          !important;
  margin-right:       auto          !important;
  margin-top:         0             !important;
  padding:            0 16px        !important;
  box-sizing:         border-box    !important;
  text-align:         center        !important;
  position:           relative      !important;
  z-index:            4             !important;
}

/* ── Main H1 headline ── */
.hero-content h1 {
  text-align:         center        !important;
  width:              100%          !important;
  margin-left:        auto          !important;
  margin-right:       auto          !important;
  margin-top:         0             !important;
  margin-bottom:      18px          !important;
  line-height:        1.15          !important;
}

/* ── Hero badge pill ── */
.hero-badge {
  display:            inline-flex   !important;
  align-items:        center        !important;
  margin-left:        auto          !important;
  margin-right:       auto          !important;
  margin-bottom:      18px          !important;
}

/* ── Hero subtitle ── */
.hero-subtitle {
  text-align:         center        !important;
  margin-left:        auto          !important;
  margin-right:       auto          !important;
  margin-bottom:      28px          !important;
  max-width:          600px         !important;
}

/* ── Search bar wrap + unified bar ── */
.search-bar-wrap {
  width:              100%          !important;
  max-width:          820px         !important;
  margin-left:        auto          !important;
  margin-right:       auto          !important;
  margin-bottom:      26px          !important;
  text-align:         center        !important;
}

.search-bar-unified {
  width:              100%          !important;
  max-width:          820px         !important;
  margin-left:        auto          !important;
  margin-right:       auto          !important;
  display:            flex          !important;
  align-items:        center        !important;
  flex-wrap:          nowrap        !important;
  overflow:           hidden        !important;
}

/* ── Hero CTA actions ── */
.hero-actions {
  display:            flex          !important;
  align-items:        center        !important;
  justify-content:    center        !important;
  flex-wrap:          wrap          !important;
  gap:                14px          !important;
  width:              100%          !important;
  margin-bottom:      32px          !important;
}

/* ── Hero stats ── */
.hero-stats {
  display:            flex          !important;
  align-items:        center        !important;
  justify-content:    center        !important;
  flex-wrap:          wrap          !important;
  gap:                32px          !important;
  width:              100%          !important;
}

/* ── Z-index stack ── */
.hero-overlay  { z-index: 1 !important; }
.hero-bubble,
.hero-blob     { z-index: 0 !important; }
.hero-float    { z-index: 2 !important; pointer-events: none !important; }
.hero-content  { z-index: 4 !important; }

/* ── Float card positions ── */
.float-1 { top: 22% !important; left:  40px !important; right: auto !important; bottom: auto !important; }
.float-2 { top: 22% !important; right: 40px !important; left:  auto !important; bottom: auto !important; }
.float-3 { top: 160px !important; right: 40px !important; left: auto !important; bottom: auto !important; min-width: 190px !important; }

@media (min-width: 769px) and (max-width: 1024px) {
  .float-1 { left:  16px !important; }
  .float-2,
  .float-3 { right: 16px !important; }
  .float-3 { top: 140px !important; }
  .hero-float { max-width: 170px !important; }
}

@media (max-width: 768px) {
  .hero-float { display: none !important; }
  .hero {
    padding-top:    calc(var(--navbar-height, 70px) + 20px) !important;
    padding-left:   16px !important;
    padding-right:  16px !important;
    padding-bottom: 50px !important;
  }
  .hero-content {
    max-width: 100% !important;
    padding:   0 8px !important;
  }
  .hero-stats { gap: 18px !important; }
  .hero-stat .value { font-size: 1.6rem !important; }
  .search-bar-unified {
    flex-wrap: wrap !important;
    border-radius: 18px !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  .search-bar-unified select,
  .search-bar-unified input {
    max-width: 100% !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding: 8px 12px !important;
  }
  .search-bar-unified input#hero-search-input {
    border-top: none !important;
  }
  .search-bar-unified .btn-search {
    width: 100% !important;
    margin: 2px 0 0 !important;
  }
}

@media (max-width: 480px) {
  .search-bar-wrap    { max-width: 100% !important; }
  .search-bar-unified { max-width: 100% !important; }
  .hero-actions { gap: 10px !important; }
  .hero-actions .btn-lg {
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
  }
}


/* ════════════════════════════════════════════════════════════
   TASK 2 — FEATURED ARTISANS:
   2 rows × 8 cards max, aligned grid, working buttons
   ════════════════════════════════════════════════════════════ */

#featured-artisans-section {
  margin-top:    40px  !important;
  padding-top:   28px  !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  overflow:      visible !important;
}

.featured-artisans-header {
  display:         flex          !important;
  align-items:     center        !important;
  justify-content: space-between !important;
  margin-bottom:   20px          !important;
  flex-wrap:       wrap          !important;
  gap:             10px          !important;
}

/* Grid: exactly 5 columns = 2 rows of 5 artisans vedettes */
.featured-grid {
  display:               grid                    !important;
  grid-template-columns: repeat(5, 1fr)          !important;
  gap:                   18px 16px               !important;
  max-height:            none                    !important;
  overflow:              visible                 !important;
  align-items:           stretch                 !important;
}

/* Cap to 2 rows (16 cards) visually via JS — CSS allows all to show */
.featured-card {
  background:    rgba(255,255,255,0.055)  !important;
  border:        1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px   !important;
  padding:       0      !important;
  overflow:      hidden !important;
  cursor:        pointer !important;
  transition:    all .25s ease !important;
  display:       flex   !important;
  flex-direction:column !important;
}

.featured-card:hover {
  transform:    translateY(-5px) !important;
  border-color: rgba(225,48,108,0.4) !important;
  box-shadow:   0 12px 30px rgba(225,48,108,0.15) !important;
}

.featured-card-cover {
  height:   70px    !important;
  position: relative !important;
  overflow: hidden  !important;
  flex-shrink: 0    !important;
}

.featured-card-body {
  padding:        0 12px 14px !important;
  display:        flex        !important;
  flex-direction: column      !important;
  flex:           1           !important;
}

.featured-avatar-wrap {
  margin-top:    -22px !important;
  margin-bottom: 6px   !important;
  position:      relative    !important;
  display:       inline-block !important;
}

.featured-avatar {
  width:         48px  !important;
  height:        48px  !important;
  border-radius: 50%   !important;
  border:        3px solid #1a1a2e !important;
  display:       flex  !important;
  align-items:   center !important;
  justify-content: center !important;
  font-weight:   800   !important;
  font-size:     0.95rem !important;
  color:         #fff  !important;
}

.featured-name {
  font-weight:   700     !important;
  font-size:     0.88rem !important;
  color:         #fff    !important;
  margin-bottom: 2px     !important;
  line-height:   1.2     !important;
}

.featured-category {
  font-size:     0.70rem !important;
  color:         rgba(255,255,255,0.5) !important;
  margin-bottom: 5px     !important;
}

.featured-trust-row {
  display:        flex          !important;
  flex-direction: column        !important;
  gap:            3px           !important;
  margin-bottom:  6px           !important;
}

.featured-trust-score {
  display:     inline-flex !important;
  align-items: center      !important;
  gap:         4px         !important;
  font-size:   0.72rem     !important;
  font-weight: 600         !important;
  color:       #FFD700     !important;
  background:  rgba(255,215,0,0.08) !important;
  border:      1px solid rgba(255,215,0,0.2) !important;
  border-radius: 6px       !important;
  padding:     2px 7px     !important;
  width:       fit-content !important;
}

.featured-response-time {
  display:     inline-flex !important;
  align-items: center      !important;
  gap:         4px         !important;
  font-size:   0.70rem     !important;
  color:       rgba(32,201,151,0.9) !important;
  background:  rgba(32,201,151,0.08) !important;
  border:      1px solid rgba(32,201,151,0.2) !important;
  border-radius: 6px       !important;
  padding:     2px 7px     !important;
  width:       fit-content !important;
}

.featured-rating {
  display:       flex  !important;
  align-items:   center !important;
  gap:           4px   !important;
  font-size:     0.76rem !important;
  color:         rgba(255,255,255,0.75) !important;
  margin-bottom: 8px   !important;
}

.featured-footer {
  display:         flex          !important;
  align-items:     center        !important;
  justify-content: space-between !important;
  gap:             6px           !important;
  margin-top:      auto          !important;
  flex-wrap:       wrap          !important;
}

.featured-price {
  font-weight: 700      !important;
  font-size:   0.82rem  !important;
  color:       #fff     !important;
  white-space: nowrap   !important;
}

/* ── Reserve & Express buttons — fully clickable ── */
.btn-featured-reserve,
.btn-featured-express {
  flex:           1            !important;
  text-align:     center       !important;
  padding:        5px 8px      !important;
  font-size:      0.70rem      !important;
  font-weight:    700          !important;
  border-radius:  8px          !important;
  cursor:         pointer      !important;
  border:         none         !important;
  transition:     all 0.2s ease !important;
  white-space:    nowrap       !important;
  display:        inline-flex  !important;
  align-items:    center       !important;
  justify-content:center       !important;
  gap:            3px          !important;
  pointer-events: all          !important;
  position:       relative     !important;
  z-index:        10           !important;
}

.btn-featured-reserve {
  background: linear-gradient(135deg, #E1306C, #833AB4) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(225,48,108,0.3) !important;
}

.btn-featured-reserve:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(225,48,108,0.5) !important;
  opacity: 1 !important;
}

.btn-featured-express {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.88) !important;
}

.btn-featured-express:hover {
  background: rgba(255,165,2,0.15) !important;
  border-color: rgba(255,165,2,0.4) !important;
  color: #FCAF45 !important;
}

/* Availability dot */
.featured-avail-dot {
  position:      absolute  !important;
  bottom:        2px       !important;
  right:         2px       !important;
  width:         11px      !important;
  height:        11px      !important;
  border-radius: 50%       !important;
  border:        2px solid #1a1a2e !important;
}
.featured-avail-dot.available { background: #20c997 !important; }
.featured-avail-dot.busy      { background: #ffa502 !important; }
.featured-avail-dot.offline   { background: #6c757d !important; }

/* ── See More button wrapper ── */
#featured-see-more-wrap {
  display:         flex          !important;
  justify-content: center        !important;
  align-items:     center        !important;
  margin-top:      28px          !important;
  padding-bottom:  8px           !important;
  transition:      opacity 0.28s ease, transform 0.28s ease !important;
}

/* ── Hidden cards: initially invisible but still in DOM ── */
.featured-card--hidden {
  display:    none !important;
  visibility: hidden !important;
  opacity:    0 !important;
  pointer-events: none !important;
}

/* ── Reveal animation: fade + slide up ── */
@keyframes featuredCardReveal {
  from {
    opacity:   0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity:   1;
    transform: translateY(0) scale(1);
  }
}

.featured-card--reveal {
  display:    flex      !important;
  visibility: visible   !important;
  opacity:    1         !important;
  pointer-events: all  !important;
  animation: featuredCardReveal 0.42s cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

/* ── Count badge inside See More button ── */
.featured-see-more-count {
  display:         inline-flex    !important;
  align-items:     center         !important;
  justify-content: center         !important;
  background:      linear-gradient(135deg, rgba(225,48,108,0.25), rgba(131,58,180,0.25)) !important;
  border:          1px solid rgba(225,48,108,0.4) !important;
  color:           #E1306C        !important;
  font-size:       0.75rem        !important;
  font-weight:     800            !important;
  border-radius:   999px          !important;
  padding:         1px 7px        !important;
  min-width:       24px           !important;
  letter-spacing:  0              !important;
}

.btn-featured-see-more {
  display:         inline-flex   !important;
  align-items:     center        !important;
  justify-content: center        !important;
  gap:             8px           !important;
  background:      rgba(255,255,255,0.07) !important;
  border:          1px solid rgba(225,48,108,0.35) !important;
  color:           rgba(255,255,255,0.9) !important;
  font-family:     inherit        !important;
  font-size:       0.88rem        !important;
  font-weight:     700            !important;
  padding:         10px 28px      !important;
  border-radius:   999px          !important;
  cursor:          pointer        !important;
  transition:      all 0.25s ease !important;
  letter-spacing:  0.3px          !important;
  position:        relative       !important;
  overflow:        hidden         !important;
}

.btn-featured-see-more::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       linear-gradient(135deg, rgba(225,48,108,0.12), rgba(131,58,180,0.12));
  opacity:          0;
  transition:       opacity 0.25s ease;
}

.btn-featured-see-more:hover {
  border-color:    rgba(225,48,108,0.7)   !important;
  color:           #fff                   !important;
  box-shadow:      0 6px 24px rgba(225,48,108,0.25) !important;
  transform:       translateY(-2px)       !important;
}

.btn-featured-see-more:hover::before {
  opacity: 1 !important;
}

.btn-featured-see-more .see-more-arrow {
  display:        inline-block;
  font-style:     normal;
  transition:     transform 0.25s ease;
}

.btn-featured-see-more:hover .see-more-arrow {
  transform: translateX(4px) !important;
}

/* ── Responsive breakpoints for featured grid ── */
@media (max-width: 1200px) {
  .featured-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 900px) {
  .featured-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 650px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 380px) {
  .featured-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 10px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   TASK 3 — PORTFOLIO / BEFORE-AFTER:
   Grid alignment fix, "Voir plus" button, responsive images
   ════════════════════════════════════════════════════════════ */

/* Feed section */
#feed-section .section-header {
  margin-bottom: 32px !important;
}

/* Feed grid: 3 cols → 2 → 1 */
.feed-grid {
  display:               grid  !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap:                   22px  !important;
  align-items:           start !important;
}

.feed-card {
  background:     rgba(255,255,255,0.05) !important;
  border:         1px solid rgba(255,255,255,0.1) !important;
  border-radius:  16px   !important;
  overflow:       hidden !important;
  position:       relative !important;
  display:        flex   !important;
  flex-direction: column !important;
  transition:     all .25s ease !important;
}

.feed-card:hover {
  transform:    translateY(-4px) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:   0 12px 30px rgba(225,48,108,0.12), var(--card-shadow, 0 4px 20px rgba(0,0,0,.3)) !important;
}

/* Card header & footer always on top */
.feed-card-header {
  display:         flex    !important;
  align-items:     center  !important;
  gap:             10px    !important;
  padding:         12px 16px !important;
  border-bottom:   1px solid rgba(255,255,255,0.08) !important;
  position:        relative !important;
  z-index:         10     !important;
  background:      rgba(13,13,26,0.88) !important;
  backdrop-filter: blur(8px) !important;
  border-radius:   16px 16px 0 0 !important;
  flex-shrink:     0 !important;
}

.feed-card-footer {
  display:         flex    !important;
  align-items:     center  !important;
  gap:             8px     !important;
  padding:         10px 16px !important;
  border-top:      1px solid rgba(255,255,255,0.08) !important;
  position:        relative !important;
  z-index:         10     !important;
  background:      rgba(13,13,26,0.88) !important;
  backdrop-filter: blur(8px) !important;
  border-radius:   0 0 16px 16px !important;
  flex-shrink:     0 !important;
  flex-wrap:       wrap !important;
}

/* Before/after slider */
.before-after-slider {
  position:    relative   !important;
  height:      220px      !important;
  overflow:    hidden     !important;
  cursor:      ew-resize  !important;
  user-select: none       !important;
  z-index:     1          !important;
  border-radius: 0        !important;
}

/* Images in slider must cover their area */
.before-after-slider > div[id^="before-"],
.before-after-slider > div[id^="after-"] {
  background-size:     cover !important;
  background-position: center !important;
  background-repeat:   no-repeat !important;
}

/* "Voir plus de projets" button — always visible */
#feed-see-more-wrap {
  text-align: center  !important;
  margin-top: 32px    !important;
}

#feed-see-more-btn {
  display:         inline-flex !important;
  align-items:     center      !important;
  gap:             8px         !important;
  padding:         12px 28px   !important;
  background:      rgba(255,255,255,0.08) !important;
  border:          1px solid rgba(255,255,255,0.2) !important;
  border-radius:   50px        !important;
  color:           #fff        !important;
  font-size:       0.9rem      !important;
  font-weight:     600         !important;
  cursor:          pointer     !important;
  transition:      all 0.25s ease !important;
  font-family:     inherit     !important;
}

#feed-see-more-btn:hover {
  background:   rgba(225,48,108,0.15) !important;
  border-color: rgba(225,48,108,0.45) !important;
  transform:    translateY(-2px)      !important;
}

@media (max-width: 768px) {
  .feed-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .feed-grid { gap: 14px !important; }
}


/* ════════════════════════════════════════════════════════════
   TASK 4 — NOTIFICATIONS:
   No overlap, clean positioning, no hidden items
   ════════════════════════════════════════════════════════════ */

/* Toast container: top-right, never under navbar */
.toast-container {
  position:       fixed  !important;
  top:            calc(var(--navbar-height, 70px) + 12px) !important;
  right:          18px   !important;
  z-index:        9999   !important;
  display:        flex   !important;
  flex-direction: column !important;
  gap:            8px    !important;
  max-width:      320px  !important;
  width:          320px  !important;
  pointer-events: none   !important;
}

/* Individual toast */
.toast {
  background:      rgba(18,18,36,0.97) !important;
  backdrop-filter: blur(20px)  !important;
  border:          1px solid rgba(255,255,255,0.14) !important;
  border-radius:   14px  !important;
  padding:         12px 14px  !important;
  display:         flex  !important;
  align-items:     flex-start !important;
  gap:             10px  !important;
  box-shadow:      0 6px 24px rgba(0,0,0,0.45) !important;
  pointer-events:  all   !important;
  max-width:       320px !important;
  width:           100%  !important;
  min-width:       0     !important;
  position:        relative !important;
  overflow:        hidden !important;
  animation:       fixeoToastIn 0.35s cubic-bezier(.21,1.02,.73,1) forwards !important;
}

@keyframes fixeoToastIn {
  from { opacity: 0; transform: translateX(30px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.toast.success { border-left: 3px solid #20c997 !important; }
.toast.error   { border-left: 3px solid #ff4757 !important; }
.toast.warning { border-left: 3px solid #ffa502 !important; }
.toast.info    { border-left: 3px solid #3742fa !important; }

.toast-icon {
  font-size:  1.05rem !important;
  flex-shrink: 0      !important;
  margin-top:  1px    !important;
}

.toast-content {
  flex:      1     !important;
  min-width: 0     !important;
}

.toast-title {
  font-weight:  700      !important;
  font-size:    0.82rem  !important;
  margin-bottom: 2px     !important;
  color:        #fff     !important;
  white-space:  normal   !important;
  word-break:   break-word !important;
  line-height:  1.3      !important;
}

.toast-msg {
  font-size:   0.74rem   !important;
  color:       rgba(255,255,255,0.6) !important;
  line-height: 1.35      !important;
  word-break:  break-word !important;
}

.toast-close {
  background:  none      !important;
  border:      none      !important;
  color:       rgba(255,255,255,0.4) !important;
  cursor:      pointer   !important;
  font-size:   0.9rem    !important;
  flex-shrink: 0         !important;
  padding:     0         !important;
  line-height: 1         !important;
  margin-top:  -1px      !important;
}
.toast-close:hover { color: #fff !important; }

.toast-progress {
  position:     absolute !important;
  bottom:       0        !important;
  left:         0        !important;
  height:       2px      !important;
  border-radius: 0 0 14px 14px !important;
  animation:    fixeoToastBar 4s linear forwards !important;
}
@keyframes fixeoToastBar {
  from { width: 100%; }
  to   { width: 0%; }
}
.toast.success .toast-progress { background: #20c997 !important; }
.toast.error   .toast-progress { background: #ff4757 !important; }
.toast.warning .toast-progress { background: #ffa502 !important; }
.toast.info    .toast-progress { background: #3742fa !important; }

/* Notification panel */
.notif-panel {
  position:        fixed     !important;
  top:             calc(var(--navbar-height, 70px) + 10px) !important;
  right:           16px      !important;
  width:           min(360px, calc(100vw - 32px)) !important;
  max-height:      min(520px, calc(100vh - 100px)) !important;
  background:      rgba(14,14,32,0.98) !important;
  backdrop-filter: blur(24px) !important;
  border:          1px solid rgba(255,255,255,0.14) !important;
  border-radius:   16px     !important;
  z-index:         9990     !important;
  overflow:        hidden   !important;
  display:         none     !important;
  flex-direction:  column   !important;
  box-shadow:      0 12px 40px rgba(0,0,0,0.55) !important;
}

.notif-panel.open {
  display: flex !important;
}

.notif-panel-header {
  padding:     14px 16px   !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  flex-shrink: 0           !important;
  display:     flex        !important;
  align-items: center      !important;
  justify-content: space-between !important;
}

.notif-panel-body {
  overflow-y: auto    !important;
  flex:       1       !important;
  min-height: 0       !important;
  max-height: 380px   !important;
}

/* Notif items inside panel */
.notif-item {
  padding:     12px 16px  !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  display:     flex       !important;
  gap:         10px       !important;
  align-items: flex-start !important;
  transition:  background .2s !important;
}

.notif-item:last-child { border-bottom: none !important; }
.notif-item:hover { background: rgba(255,255,255,0.04) !important; }

.notif-item.unread {
  border-left: 3px solid var(--accent-red, #E1306C) !important;
  padding-left: 13px !important;
}

/* Mobile toast: full width */
@media (max-width: 480px) {
  .toast-container {
    left:      10px      !important;
    right:     10px      !important;
    max-width: none      !important;
    width:     auto      !important;
  }
  .toast { max-width: none !important; }
  .notif-panel {
    right: 8px  !important;
    left:  8px  !important;
    width: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════
   TASK 5 — PRICING / SUBSCRIPTION PAGE:
   Buttons open modals correctly, visual state, responsive
   ════════════════════════════════════════════════════════════ */

/* Pricing hero centering */
.pricing-hero {
  padding-top:    calc(var(--navbar-height, 70px) + 40px) !important;
  text-align:     center !important;
  min-height:     auto   !important;
}

.pricing-hero-inner {
  max-width:    680px   !important;
  margin:       0 auto  !important;
  text-align:   center  !important;
}

/* Pricing cards grid */
.pricing-grid {
  display:               grid  !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap:                   24px  !important;
  align-items:           start !important;
}

/* Plan card */
.pricing-card {
  background:     rgba(255,255,255,0.05) !important;
  border:         1px solid rgba(255,255,255,0.12) !important;
  border-radius:  20px   !important;
  padding:        28px   !important;
  position:       relative !important;
  overflow:       hidden  !important;
  transition:     all .3s ease !important;
}

.pricing-card:hover {
  border-color: rgba(225,48,108,0.4) !important;
  transform:    translateY(-4px)     !important;
}

/* Selected state */
.pricing-card.selected {
  border-color: rgba(225,48,108,0.7) !important;
  box-shadow:   0 0 0 3px rgba(225,48,108,0.15), 0 12px 32px rgba(225,48,108,0.2) !important;
}

/* Plan buttons — all fully clickable */
.plan-btn {
  display:         flex        !important;
  align-items:     center      !important;
  justify-content: center      !important;
  width:           100%        !important;
  padding:         13px 20px   !important;
  border-radius:   12px        !important;
  font-size:       0.95rem     !important;
  font-weight:     700         !important;
  cursor:          pointer     !important;
  border:          none        !important;
  transition:      all .25s ease !important;
  pointer-events:  all         !important;
  position:        relative    !important;
  z-index:         5           !important;
}

.plan-btn:hover { transform: translateY(-2px) !important; }

/* Payment modal backdrop + overlay */
.modal-backdrop-overlay {
  position:   fixed  !important;
  inset:      0      !important;
  background: rgba(0,0,0,0.6) !important;
  z-index:    9980   !important;
  backdrop-filter: blur(4px) !important;
}

/* Payment modal itself */
#payment-modal {
  z-index: 9990 !important;
}

#payment-modal .modal-dialog {
  max-width:  640px   !important;
  width:      calc(100vw - 32px) !important;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto    !important;
  margin:     16px auto !important;
}

/* Billing toggle */
.billing-toggle {
  display:     flex       !important;
  align-items: center     !important;
  justify-content: center !important;
  gap:         14px       !important;
  margin-top:  20px       !important;
}

.billing-label {
  font-size:   0.9rem  !important;
  font-weight: 600     !important;
  cursor:      pointer !important;
  color:       rgba(255,255,255,0.5) !important;
  transition:  color .2s !important;
}
.billing-label.active { color: #fff !important; }

/* FAQ accordion */
.faq-item { cursor: pointer !important; }
.faq-a    { display: none !important; }
.faq-item.open .faq-a { display: block !important; }

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
  .pricing-hero {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   TASK 6 — GENERAL UX/UI:
   Margins, spacing, alignment, interactive element fixes
   ════════════════════════════════════════════════════════════ */

/* ── Prevent horizontal overflow globally ── */
html, body { overflow-x: hidden !important; }
.hero, #services, #artisans-section, #feed-section, .section {
  overflow-x: hidden !important;
}

/* ── Container max-width + safe padding ── */
.container {
  max-width:   1200px !important;
  margin-left:  auto  !important;
  margin-right: auto  !important;
  padding-left: 24px  !important;
  padding-right: 24px !important;
  box-sizing:   border-box !important;
}

@media (max-width: 600px) {
  .container {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }
}

/* ── Section header centering ── */
.section-header {
  text-align:     center  !important;
  margin-bottom:  44px    !important;
}
.section-header h2 {
  margin-bottom: 10px !important;
}
.section-header p {
  max-width:    560px   !important;
  margin-left:  auto    !important;
  margin-right: auto    !important;
}

/* ── Artisan cards grid ── */
.artisans-grid {
  display:               grid  !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap:                   20px  !important;
}

.artisan-card {
  background:     rgba(255,255,255,0.05) !important;
  border:         1px solid rgba(255,255,255,0.1) !important;
  border-radius:  16px   !important;
  overflow:       hidden !important;
  cursor:         pointer !important;
  transition:     all .25s ease !important;
}

.artisan-card:hover {
  transform:    translateY(-6px) !important;
  border-color: rgba(255,255,255,0.2) !important;
  box-shadow:   0 0 20px rgba(225,48,108,0.25), 0 8px 24px rgba(0,0,0,0.3) !important;
}

@media (max-width: 768px) {
  .artisans-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .artisans-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Category chips ── */
.category-chips {
  display:         flex    !important;
  flex-wrap:       wrap    !important;
  gap:             10px    !important;
  justify-content: center  !important;
  align-items:     center  !important;
  padding:         4px 0   !important;
}

.chip {
  display:         inline-flex !important;
  align-items:     center      !important;
  gap:             6px         !important;
  padding:         9px 18px    !important;
  border-radius:   999px       !important;
  font-size:       0.85rem     !important;
  font-weight:     500         !important;
  white-space:     nowrap      !important;
  cursor:          pointer     !important;
  transition:      all .2s ease !important;
}

.chip:hover   { transform: translateY(-2px) !important; }
.chip.active  { font-weight: 700 !important; }

/* ── Search filters bar ── */
.search-filters {
  display:   flex     !important;
  gap:       10px     !important;
  flex-wrap: wrap     !important;
  margin-bottom: 20px !important;
  align-items: center !important;
}

.filter-input {
  color: #fff !important;
}

.filter-input option {
  background: #1a1a2e !important;
  color:      #fff    !important;
}

/* ── Results header ── */
.results-header {
  display:         flex           !important;
  align-items:     center         !important;
  justify-content: space-between  !important;
  margin-bottom:   16px           !important;
  flex-wrap:       wrap           !important;
  gap:             8px            !important;
}

/* ── Modals ── */
.modal {
  display:         none   !important;
  position:        fixed  !important;
  inset:           0      !important;
  z-index:         9100   !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         16px   !important;
}

.modal.open {
  display: flex !important;
}

.modal-backdrop {
  position:   fixed  !important;
  inset:      0      !important;
  background: rgba(0,0,0,0.55) !important;
  z-index:    9000   !important;
  display:    none   !important;
  backdrop-filter: blur(3px) !important;
}

.modal-backdrop.open { display: block !important; }

.modal-dialog {
  background:      rgba(14,14,32,0.98) !important;
  border:          1px solid rgba(255,255,255,0.15) !important;
  border-radius:   20px  !important;
  max-width:       560px !important;
  width:           100%  !important;
  max-height:      calc(100vh - 48px) !important;
  overflow-y:      auto  !important;
  position:        relative !important;
  z-index:         9100  !important;
}

.modal-header {
  display:         flex          !important;
  align-items:     center        !important;
  justify-content: space-between !important;
  padding:         18px 20px     !important;
  border-bottom:   1px solid rgba(255,255,255,0.1) !important;
  flex-shrink:     0             !important;
}

.modal-close {
  width:       32px    !important;
  height:      32px    !important;
  border-radius: 50%   !important;
  background:  rgba(255,255,255,0.07) !important;
  border:      none    !important;
  color:       rgba(255,255,255,0.6) !important;
  cursor:      pointer !important;
  font-size:   0.9rem  !important;
  display:     flex    !important;
  align-items: center  !important;
  justify-content: center !important;
  transition:  background .2s !important;
  flex-shrink: 0       !important;
}

.modal-close:hover {
  background: rgba(255,255,255,0.14) !important;
  color:      #fff     !important;
}

/* ── Artisan modal wider in compare mode ── */
#artisan-modal[data-mode="compare"] {
  max-width: 860px !important;
  width:     calc(100% - 32px) !important;
}

@media (max-width: 768px) {
  #artisan-modal[data-mode="compare"] {
    max-width: calc(100% - 20px) !important;
    overflow-x: auto !important;
  }
}

/* ── Map container ── */
.map-container {
  height:        400px  !important;
  border-radius: 16px   !important;
  overflow:      hidden !important;
  border:        1px solid rgba(255,255,255,0.1) !important;
  margin-bottom: 0      !important;
}

/* ── Steps grid ── */
.steps-grid {
  display:               grid  !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:                   24px  !important;
}

/* ── Buttons: ensure all interactive elements clickable ── */
.btn, .btn-primary, .btn-secondary, .btn-express,
.btn-nav, .btn-nav-primary, .btn-nav-outline,
.btn-search, .btn-sm, .btn-lg,
.plan-btn, .btn-featured-reserve, .btn-featured-express,
button, [role="button"] {
  cursor:         pointer     !important;
  pointer-events: all         !important;
  position:       relative    !important;
}

/* Ensure tabs work */
.profile-tab, .chart-tab, .notif-tab, .pay-tab, .filter-chip {
  cursor:         pointer     !important;
  pointer-events: all         !important;
}

/* ── Service artisans mini grid ── */
.service-mini-grid {
  display:               grid  !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap:                   14px  !important;
}

@media (max-width: 600px) {
  .service-mini-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Comparator bar ── */
.comparator-bar {
  position:        fixed  !important;
  bottom:          0      !important;
  left:            0      !important;
  right:           0      !important;
  z-index:         8000   !important;
  background:      rgba(14,14,32,0.97) !important;
  backdrop-filter: blur(20px) !important;
  border-top:      1px solid rgba(255,255,255,0.12) !important;
  padding:         12px 24px  !important;
  display:         none   !important;
  align-items:     center !important;
  gap:             12px   !important;
  flex-wrap:       wrap   !important;
}
.comparator-bar.visible { display: flex !important; }

/* ── Back to top button ── */
.back-to-top {
  position:    fixed   !important;
  bottom:      28px    !important;
  right:       90px    !important;
  z-index:     7000    !important;
  opacity:     0       !important;
  pointer-events: none !important;
  transition:  opacity .3s, transform .3s !important;
  transform:   translateY(10px) !important;
}
.back-to-top.visible {
  opacity:        1    !important;
  pointer-events: all  !important;
  transform:      translateY(0) !important;
}

/* ── Chat widget ── */
.chat-widget {
  position:    fixed  !important;
  bottom:      24px   !important;
  right:       24px   !important;
  z-index:     7500   !important;
}

/* ── Navbar fixes ── */
.navbar {
  position:        fixed   !important;
  top:             0       !important;
  left:            0       !important;
  right:           0       !important;
  z-index:         var(--z-fixed, 1000) !important;
  height:          var(--navbar-height, 70px) !important;
}

/* Mobile navbar */
@media (max-width: 768px) {
  .navbar-nav { display: none !important; }
  .hamburger  { display: flex !important; }
  .nav-actions .btn-nav { display: none !important; }
  .nav-actions .btn-nav-primary { display: none !important; }
}

@media (min-width: 769px) {
  .hamburger  { display: none !important; }
  .mobile-nav { display: none !important; pointer-events: none !important; }
}

/* ── Section divider ── */
.section-divider {
  height: 1px !important;
  background: rgba(255,255,255,0.06) !important;
  margin: 0 !important;
}

/* ── scrollbar (global) ── */
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.04) !important; border-radius: 6px !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#E1306C,#833AB4) !important;
  border-radius: 6px !important;
  border: 2px solid rgba(255,255,255,0.04) !important;
  min-height: 36px !important;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#C13584,#405DE6) !important; }

/* ── Dashboard table mobile ── */
@media (max-width: 768px) {
  .table-responsive { overflow-x: auto !important; }
  .comparison-table-wrap { overflow-x: auto !important; }
}

/* ── Auth page centering ── */
.auth-container, .auth-card {
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* ════════════════════════════════════════════════════════════
   FEATURED ARTISTS — UNIFORM CARD HEIGHT (2 rows × 5)
   Ensures all cards in the same row align perfectly
   ════════════════════════════════════════════════════════════ */

/* Force uniform card height within each grid row */
.featured-grid {
  grid-auto-rows: 1fr !important;
}

.featured-card {
  min-height:     260px  !important;
  height:         100%   !important;
}

.featured-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Push footer to bottom of every card */
.featured-footer {
  margin-top: auto !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

/* Ensure button row never wraps awkwardly */
.featured-footer > div:last-child {
  display:  flex      !important;
  gap:      5px       !important;
  flex-wrap:nowrap    !important;
  flex:     1         !important;
  justify-content: flex-end !important;
}

.btn-featured-reserve,
.btn-featured-express {
  flex:       1       !important;
  min-width:  0       !important;
  max-width:  80px    !important;
}

/* Section spacing */
#featured-artisans-section {
  padding-bottom: 8px !important;
}


/* ═══════════════════════════════════════════════════════════
   FIXEO V6 — NEW FIXES CSS
   Fix 3: Simplified search bar
   Fix 4: Trust indicators
   Fix 5: Map controls
   ═══════════════════════════════════════════════════════════ */

/* ── Fix 3: Simplified Hero Search Bar ─────────────────────── */
.search-bar-simplified {
  display:         flex         !important;
  align-items:     center       !important;
  gap:             8px          !important;
  flex-wrap:       wrap         !important;
  justify-content: center       !important;
  padding:         8px 10px     !important;
}
.search-bar-simplified select {
  flex:            1            !important;
  min-width:       140px        !important;
  max-width:       220px        !important;
  padding:         11px 14px   !important;
  background:      rgba(255,255,255,0.08) !important;
  border:          1px solid rgba(255,255,255,0.14) !important;
  border-radius:   10px         !important;
  color:           #fff         !important;
  font-size:       .88rem       !important;
  font-family:     'Cairo', sans-serif !important;
  cursor:          pointer      !important;
  appearance:      none         !important;
  -webkit-appearance: none      !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat   !important;
  background-position: right 12px center !important;
  padding-right:   36px !important;
  transition:      all 0.2s      !important;
}
.search-bar-simplified select:focus,
.search-bar-simplified select:hover {
  border-color:    rgba(225,48,108,0.5) !important;
  background-color: rgba(255,255,255,0.12) !important;
  outline:         none !important;
}
.search-bar-simplified select option {
  background:      #1a1a2e !important;
  color:           #fff    !important;
}
.search-bar-simplified .btn-search {
  flex-shrink:     0      !important;
  padding:         11px 24px !important;
  font-size:       .9rem  !important;
  border-radius:   10px   !important;
  white-space:     nowrap !important;
}
@media (max-width: 600px) {
  .search-bar-simplified select { min-width: 100% !important; max-width: 100% !important; }
  .search-bar-simplified .btn-search { width: 100% !important; }
}

/* ── Fix 4: Hero Trust Indicators ─────────────────────────── */
.hero-trust-indicators {
  display:         flex         !important;
  align-items:     center       !important;
  justify-content: center       !important;
  gap:             20px         !important;
  margin:          12px 0 6px   !important;
  flex-wrap:       wrap         !important;
}
.trust-item {
  display:         flex         !important;
  align-items:     center       !important;
  gap:             7px          !important;
  font-size:       .88rem       !important;
  color:           rgba(255,255,255,0.85) !important;
}
.trust-check {
  display:         flex         !important;
  align-items:     center       !important;
  justify-content: center       !important;
  width:           22px         !important;
  height:          22px         !important;
  background:      linear-gradient(135deg, #20c997, #1aaf82) !important;
  border-radius:   50%          !important;
  color:           #fff         !important;
  font-size:       .75rem       !important;
  font-weight:     800          !important;
  flex-shrink:     0            !important;
  box-shadow:      0 2px 8px rgba(32,201,151,0.4) !important;
}
.trust-text {
  font-weight:     500          !important;
  letter-spacing:  0.01em       !important;
}
.trust-text strong {
  color:           #fff         !important;
  font-weight:     800          !important;
}
.trust-separator {
  color:           rgba(255,255,255,0.2) !important;
  font-size:       1.1rem       !important;
  font-weight:     300          !important;
  line-height:     1            !important;
}
@media (max-width: 480px) {
  .trust-separator { display: none !important; }
  .hero-trust-indicators { gap: 12px !important; }
}

/* ── Fix 5: Map Controls Overlay ──────────────────────────── */
.map-controls {
  position:        absolute    !important;
  top:             12px        !important;
  left:            12px        !important;
  z-index:         1000        !important;
  display:         flex        !important;
  align-items:     center      !important;
  gap:             8px         !important;
  flex-wrap:       wrap        !important;
  pointer-events:  all         !important;
}
.map-ctrl-btn {
  padding:         8px 14px    !important;
  background:      rgba(13,13,26,0.9) !important;
  border:          1px solid rgba(255,255,255,0.2) !important;
  border-radius:   8px         !important;
  color:           #fff        !important;
  font-size:       .82rem      !important;
  font-family:     'Cairo', sans-serif !important;
  font-weight:     600         !important;
  cursor:          pointer     !important;
  transition:      all 0.2s    !important;
  white-space:     nowrap      !important;
  backdrop-filter: blur(8px)   !important;
  box-shadow:      0 2px 10px rgba(0,0,0,0.4) !important;
  pointer-events:  all         !important;
}
.map-ctrl-btn:hover {
  background:      rgba(225,48,108,0.85) !important;
  border-color:    rgba(225,48,108,0.9) !important;
}
.map-ctrl-btn:disabled {
  opacity:         0.7         !important;
  cursor:          wait        !important;
}
.map-ctrl-select {
  padding:         8px 12px    !important;
  background:      rgba(13,13,26,0.9) !important;
  border:          1px solid rgba(255,255,255,0.2) !important;
  border-radius:   8px         !important;
  color:           #fff        !important;
  font-size:       .82rem      !important;
  font-family:     'Cairo', sans-serif !important;
  cursor:          pointer     !important;
  backdrop-filter: blur(8px)   !important;
  box-shadow:      0 2px 10px rgba(0,0,0,0.4) !important;
  pointer-events:  all         !important;
  appearance:      none        !important;
}
.map-ctrl-select option {
  background: #1a1a2e !important;
  color: #fff !important;
}
/* Map popup Réserver button style */
.leaflet-popup-content button {
  pointer-events: all !important;
  cursor: pointer !important;
}
/* Map wrapper positioning */
.map-container {
  position:   relative !important;
  overflow:   visible  !important;
}
#artisan-map {
  height:        420px !important;
  width:         100%  !important;
  border-radius: 16px  !important;
  z-index:       1     !important;
}
@media (max-width: 768px) {
  #artisan-map { height: 300px !important; }
  .map-controls { top: 8px !important; left: 8px !important; gap: 6px !important; }
  .map-ctrl-btn  { padding: 6px 10px !important; font-size: .76rem !important; }
  .map-ctrl-select { font-size: .76rem !important; }
}