/* BêTráp — Components */

/* CARD */
.card{background:white;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform var(--t-normal),box-shadow var(--t-normal)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card-body{padding:var(--sp-lg)}
.card-img{width:100%;height:200px;object-fit:cover}
.card-dark{background:var(--dark-2);color:var(--text-light)}
.card-glass{background:rgba(255,255,255,.08);backdrop-filter:blur(16px);border:1px solid rgba(212,175,55,.15);color:var(--text-light)}

/* SERVICE CARD */
.service-card{background:white;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--t-normal);border:1px solid rgba(212,175,55,.15);cursor:pointer}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(212,175,55,.4)}
.service-card img{transition:transform var(--t-slow)}
.service-card:hover img{transform:scale(1.08)}
.service-card-img{width:100%;height:220px;object-fit:cover;position:relative;overflow:hidden}
.service-card-img .category-badge{position:absolute;top:12px;left:12px;background:var(--grad-primary);color:white;padding:4px 12px;border-radius:var(--r-full);font-size:.75rem;font-weight:700}
.service-card-body{padding:var(--sp-md) var(--sp-lg) var(--sp-lg)}
.service-card-title{font-size:1.05rem;font-weight:700;color:var(--text-dark);margin-bottom:var(--sp-xs)}
.service-card-provider{font-size:.8rem;color:var(--text-muted);margin-bottom:var(--sp-sm)}
.service-card-price{font-family:var(--font-h);font-size:1.3rem;font-weight:700;color:var(--gold)}
.service-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid rgba(200,16,46,.08)}

/* CATEGORY CARD */
.cat-card{border-radius:var(--r-xl);overflow:hidden;position:relative;cursor:pointer;transition:all var(--t-normal);height:280px;box-shadow:var(--shadow-sm)}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.cat-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--t-slow)}
.cat-card:hover .cat-card-bg{transform:scale(1.08)}
.cat-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(252,249,242,.9) 0%,rgba(252,249,242,.4) 60%,transparent 100%)}
.cat-card-content{position:absolute;bottom:0;left:0;right:0;padding:var(--sp-lg)}
.cat-card-icon{width:52px;height:52px;background:var(--grad-primary);border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:white;margin-bottom:var(--sp-md);box-shadow:var(--shadow-md)}
.cat-card-title{font-family:var(--font-h);font-size:1.3rem;font-weight:700;color:var(--text-dark)}
.cat-card-count{font-size:.8rem;color:var(--text-muted);margin-top:var(--sp-xs)}

/* STATS CARD */
.stat-card{background:white;border-radius:var(--r-lg);padding:var(--sp-xl);box-shadow:var(--shadow-xs);display:flex;align-items:center;gap:var(--sp-lg);transition:all var(--t-normal);border:1px solid rgba(0,0,0,.03)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:rgba(212,175,55,.2)}
.stat-icon{width:64px;height:64px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0}
.stat-icon.gold{background:rgba(212,175,55,.12);color:var(--gold)}
.stat-icon.red{background:rgba(200,16,46,.12);color:var(--red-light)}
.stat-icon.green{background:rgba(39,174,96,.12);color:var(--success)}
.stat-icon.blue{background:rgba(41,128,185,.12);color:var(--info)}
.stat-value{font-family:var(--font-h);font-size:1.8rem;font-weight:700;color:var(--text-dark);line-height:1}
.stat-label{font-size:.8rem;color:var(--text-muted);margin-top:2px}
.stat-change{font-size:.75rem;font-weight:600;margin-top:var(--sp-xs)}
.stat-change.up{color:var(--success)} .stat-change.down{color:var(--error)}

/* GRID LAYOUTS */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-lg)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-lg)}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

/* CHAT */
.chat-layout{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - var(--nav-h));overflow:hidden}
.chat-sidebar{border-right:1px solid rgba(200,16,46,.1);overflow-y:auto;background:white}
.chat-sidebar-header{padding:var(--sp-lg);border-bottom:1px solid rgba(200,16,46,.1);background:var(--cream)}
.chat-item{display:flex;align-items:center;gap:var(--sp-md);padding:var(--sp-md) var(--sp-lg);cursor:pointer;transition:background var(--t-fast);position:relative}
.chat-item:hover,.chat-item.active{background:var(--gold-faint)}
.chat-item.active{border-right:3px solid var(--red-dark)}
.chat-avatar{width:46px;height:46px;border-radius:var(--r-full);background:var(--grad-primary);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:.95rem;flex-shrink:0}
.chat-name{font-weight:600;font-size:.9rem;color:var(--text-dark)}
.chat-preview{font-size:.8rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.chat-time{font-size:.7rem;color:var(--text-muted);position:absolute;top:var(--sp-md);right:var(--sp-md)}
.chat-unread{position:absolute;bottom:var(--sp-md);right:var(--sp-md);background:var(--red-dark);color:white;width:18px;height:18px;border-radius:var(--r-full);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.chat-main{display:flex;flex-direction:column;background:var(--cream)}
.chat-header{padding:var(--sp-md) var(--sp-lg);border-bottom:1px solid rgba(200,16,46,.1);background:white;display:flex;align-items:center;gap:var(--sp-md)}
.chat-messages{flex:1;overflow-y:auto;padding:var(--sp-lg);display:flex;flex-direction:column;gap:var(--sp-md)}
.chat-bubble{max-width:70%;padding:12px 16px;border-radius:var(--r-lg);font-size:.9rem;line-height:1.5}
.chat-bubble.sent{background:var(--grad-primary);color:white;border-bottom-right-radius:4px;margin-left:auto}
.chat-bubble.received{background:white;color:var(--text-dark);border-bottom-left-radius:4px;box-shadow:var(--shadow-xs)}
.chat-bubble-time{font-size:.65rem;opacity:.6;margin-top:4px;text-align:right}
.chat-input-area{padding:var(--sp-md) var(--sp-lg);background:white;border-top:1px solid rgba(200,16,46,.1);display:flex;gap:var(--sp-sm);align-items:center}
.chat-input{flex:1;padding:12px 18px;border:1.5px solid rgba(200,16,46,.15);border-radius:var(--r-full);font-size:.9rem;outline:none;transition:border-color var(--t-fast)}
.chat-input:focus{border-color:var(--red-dark)}
.chat-send-btn{width:44px;height:44px;border-radius:var(--r-full);background:var(--grad-primary);color:white;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:var(--shadow-gold);transition:all var(--t-fast)}
.chat-send-btn:hover{transform:scale(1.08)}
@media(max-width:768px){.chat-layout{grid-template-columns:1fr}.chat-sidebar{display:none}.chat-sidebar.active{display:block;position:fixed;inset:var(--nav-h) 0 0 0;z-index:50}}

/* DASHBOARD LAYOUT */
.dash-layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - var(--nav-h))}
.dash-sidebar{background:var(--dark-2);padding:var(--sp-lg) 0;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto}
.dash-nav-item{display:flex;align-items:center;gap:var(--sp-md);padding:12px var(--sp-xl);color:var(--text-muted);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--t-fast);border-left:3px solid transparent}
.dash-nav-item:hover,.dash-nav-item.active{color:var(--gold-dark);background:var(--cream);border-left-color:var(--gold)}
.dash-nav-item i{font-size:1.1rem}
.dash-nav-section{padding:var(--sp-md) var(--sp-xl) var(--sp-sm);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.dash-main{padding:var(--sp-xl);background:var(--cream);overflow-y:auto}
.dash-title{font-family:var(--font-h);font-size:1.8rem;font-weight:700;color:var(--text-dark);margin-bottom:var(--sp-xs)}
.dash-subtitle{color:var(--text-muted);font-size:.9rem;margin-bottom:var(--sp-xl)}
@media(max-width:1024px){.dash-layout{grid-template-columns:1fr}.dash-sidebar{display:none}}

/* TOAST */
#toast-container{position:fixed;bottom:var(--sp-xl);right:var(--sp-xl);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-sm)}
.toast{background:var(--dark-2);color:var(--text-light);border-radius:var(--r-md);padding:14px var(--sp-lg);display:flex;align-items:center;gap:var(--sp-md);box-shadow:var(--shadow-lg);border-left:4px solid var(--gold);animation:slideInRight .3s ease;min-width:280px;font-size:.9rem}
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--error)}
.toast.info{border-left-color:var(--info)}
.toast i{font-size:1.2rem}
.toast.success i{color:var(--success)} .toast.error i{color:var(--error)} .toast.info i{color:var(--info)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(74,63,63,.7);backdrop-filter:blur(4px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--sp-lg);opacity:0;pointer-events:none;transition:opacity var(--t-normal)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:white;border-radius:var(--r-xl);padding:var(--sp-xl);max-width:540px;width:100%;box-shadow:var(--shadow-lg);transform:translateY(20px) scale(.97);transition:transform var(--t-normal);max-height:90vh;overflow-y:auto}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-xl)}
.modal-title{font-family:var(--font-h);font-size:1.4rem;font-weight:700}
.modal-close{width:36px;height:36px;border-radius:var(--r-full);background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--text-muted);cursor:pointer;transition:all var(--t-fast)}
.modal-close:hover{background:var(--error);color:white}
.modal-footer{display:flex;gap:var(--sp-md);justify-content:flex-end;margin-top:var(--sp-xl)}

/* PAYMENT METHODS */
.payment-option{border:2px solid rgba(200,16,46,.15);border-radius:var(--r-md);padding:var(--sp-md);display:flex;align-items:center;gap:var(--sp-md);cursor:pointer;transition:all var(--t-fast)}
.payment-option:hover,.payment-option.selected{border-color:var(--gold);background:var(--gold-faint)}
.payment-option .payment-icon{width:44px;height:44px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:white;box-shadow:var(--shadow-xs)}
.payment-name{font-weight:600;font-size:.9rem} .payment-desc{font-size:.75rem;color:var(--text-muted)}

/* REVIEW */
.review-card{background:white;border-radius:var(--r-lg);padding:var(--sp-lg);box-shadow:var(--shadow-xs)}
.review-header{display:flex;align-items:center;gap:var(--sp-md);margin-bottom:var(--sp-md)}
.review-avatar{width:42px;height:42px;border-radius:var(--r-full);background:var(--grad-primary);display:flex;align-items:center;justify-content:center;color:white;font-weight:700}
.review-text{font-size:.875rem;color:var(--text-muted);line-height:1.7}

/* ORDER CARD */
.order-card{background:white;border-radius:var(--r-lg);padding:var(--sp-lg);box-shadow:var(--shadow-xs);border-left:4px solid var(--gold);transition:box-shadow var(--t-fast)}
.order-card:hover{box-shadow:var(--shadow-md)}
.order-id{font-size:.75rem;color:var(--text-muted);font-family:monospace}
.order-service{font-weight:700;font-size:1rem;margin:var(--sp-xs) 0}
.order-meta{display:flex;gap:var(--sp-lg);font-size:.85rem;color:var(--text-muted);flex-wrap:wrap}
.order-meta span{display:flex;align-items:center;gap:4px}

/* ROLE SELECTOR */
.role-option{border:2px solid rgba(200,16,46,.15);border-radius:var(--r-lg);padding:var(--sp-lg);text-align:center;cursor:pointer;transition:all var(--t-normal);flex:1}
.role-option:hover,.role-option.selected{border-color:var(--gold);background:var(--gold-faint);box-shadow:var(--shadow-gold)}
.role-option .role-icon{font-size:2.5rem;margin-bottom:var(--sp-sm)}
.role-option .role-name{font-weight:700;font-size:1rem;color:var(--text-dark)}
.role-option .role-desc{font-size:.8rem;color:var(--text-muted);margin-top:4px}
.role-option.selected .role-name{color:var(--gold)}

/* LOADING SPINNER */
.spinner{width:40px;height:40px;border:3px solid rgba(212,175,55,.2);border-top-color:var(--gold);border-radius:50%;animation:spin 0.7s linear infinite;margin:0 auto}
.loading-overlay{position:fixed;inset:0;background:rgba(74,63,63,.5);display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity var(--t-fast)}
.loading-overlay.active{opacity:1;pointer-events:all}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:var(--sp-sm);flex-wrap:wrap;padding:var(--sp-lg) 0}
.filter-chip{padding:8px 18px;border-radius:var(--r-full);border:1.5px solid rgba(200,16,46,.2);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--t-fast);background:white}
.filter-chip:hover,.filter-chip.active{border-color:var(--gold);background:var(--gold-faint);color:var(--gold);font-weight:600}

/* HERO STATS */
.hero-stats{display:flex;gap:var(--sp-xl)}
.hero-stat .num{font-family:var(--font-h);font-size:2rem;font-weight:800;color:var(--gold-light)}
.hero-stat .label{font-size:.8rem;color:rgba(249,243,228,.6)}

/* ── SKELETON LOADING ─────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}
.skeleton-line,.skeleton-img,.skeleton-circle,.skeleton-card {
  background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}
.skeleton-img   { height: 200px; width: 100%; border-radius: var(--r-lg); margin-bottom: 12px; }
.skeleton-line  { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-body  { padding: 12px; }
.skeleton-card  { background: white; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(212,175,55,.1); }
.skeleton-circle{ width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.skeleton-list-item { display: flex; align-items: center; gap: 12px; padding: 16px; background: white; border-radius: var(--r-lg); margin-bottom: 8px; box-shadow: var(--shadow-xs); }

/* ── WISHLIST / FAVORITE BUTTON ────────────────────────────────────────── */
.fav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--r-full);
  border: 1.5px solid rgba(220,165,174,.4);
  background: white; color: var(--text-muted);
  font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: all .25s ease;
}
.fav-btn:hover { border-color: #FF6B9D; color: #FF6B9D; transform: scale(1.04); }
.fav-btn.active { background: #FFF0F5; border-color: #FF6B9D; color: #FF6B9D; }

/* ── EMPTY STATE ────────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding: 60px 24px; }
.empty-icon  { font-size: 3.5rem; margin-bottom: 16px; }
.empty-state h3 { font-family: var(--font-h); font-size: 1.3rem; color: var(--text-dark); margin-bottom: 8px; }
.empty-state p  { font-size: .9rem; color: var(--text-muted); margin-bottom: 20px; }

/* ── ORDER CARD BORDERS ─────────────────────────────────────────────────── */
.order-card-full.border-pending   { border-left-color: var(--warning); }
.order-card-full.border-confirmed { border-left-color: var(--info); }
.order-card-full.border-active    { border-left-color: var(--gold); }
.order-card-full.border-done      { border-left-color: var(--success); }
.order-card-full.border-cancelled { border-left-color: var(--error); }

/* ── TOGGLE SWITCH ──────────────────────────────────────────────────────── */
.toggle-switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #e2e8f0; border-radius: 26px;
  transition: .3s;
}
.toggle-slider:before {
  content: ""; position: absolute; height: 20px; width: 20px;
  left: 3px; bottom: 3px; background: white; border-radius: 50%;
  transition: .3s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--gold); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }

/* ── BADGE VARIANTS ─────────────────────────────────────────────────────── */
.badge-active    { background:rgba(39,174,96,.12); color:var(--success); }
.badge-pending   { background:rgba(243,156,18,.12); color:#D97706; }
.badge-confirmed { background:rgba(41,128,185,.12); color:var(--info); }
.badge-done      { background:rgba(39,174,96,.12); color:var(--success); }
.badge-cancelled { background:rgba(231,76,60,.12); color:var(--error); }
.badge-gold      { background:rgba(212,175,55,.15); color:var(--gold-dark); }