@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700");


:root {
    --brand: #96b900;
    --brand-hover: #7a9a00;
    --card-bg: rgba(255,255,255,0.85);
    --glass-border: rgba(255,255,255,0.25);
    --shadow-card: 0 8px 32px rgba(0,0,0,0.06);
    --radius: 16px;
    --gb-brand-primary: #96b900;
    --gb-brand-primary-hover: #7a9a00;
    --gb-brand-charcoal: #1a1a1a;
    --gb-brand-bg: #f3f3f4;
    --gb-brand-border: rgba(26,26,26,0.06);
    --gb-sidebar-width: 260px;
    --gb-sidebar-collapsed: 0px;
    --gb-navbar-height: 64px;
    --gb-ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
    --gb-bg: #f3f3f4;
    --gb-card-bg: #ffffff;
    --gb-text-muted: rgba(26,26,26,0.45);
    --gb-sidebar-bg: #1e1e1e;
    --gb-sidebar-text: rgba(255,255,255,0.7);
    --gb-sidebar-active: #96b900;
    --glass-bg: rgba(255,255,255,0.85);
}


/* Input estilo lux (product-details, calendar, etc.) */
.lux-input {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  color: #1a1a1a !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  transition: all 0.3s ease;
}

.lux-input:focus {
  border-color: #96b900 !important;
  box-shadow: 0 0 0 3px rgba(150, 185, 0, 0.15) !important;
  background: #ffffff !important;
}

/* ================================================================
   BOOKING PROVIDER VIEW V2 — Lux Styles
   ================================================================ */
#booking-provider-view.lx-main-wrapper {
  background: #f8fafb;
  padding: 25px;
  border-radius: 20px;
}

/* --- HEADER --- */
#booking-provider-view .lx-header {
  margin-bottom: 25px;
}

#booking-provider-view .lx-label-mini {
  display: block;
  color: #8cc63f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

#booking-provider-view .lx-main-title {
  margin: 0;
  font-weight: 800;
  color: #1a2a3a;
  font-size: 24px;
}

#booking-provider-view .lx-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#booking-provider-view .lx-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: #94a3b8;
}

#booking-provider-view .lx-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

#booking-provider-view .lx-meta-item i {
  color: #8cc63f;
}

/* --- TIMELINE BAR --- */
#booking-provider-view .lx-timeline-bar {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  padding: 20px 30px;
  margin-bottom: 25px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
  gap: 0;
  overflow-x: auto;
}

#booking-provider-view .lx-timeline-step {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 140px;
}

#booking-provider-view .lx-step-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #94a3b8;
  font-size: 16px;
  transition: all 0.3s ease;
}

#booking-provider-view .lx-timeline-step.completed .lx-step-dot {
  background: #8cc63f;
  color: #fff;
}

#booking-provider-view .lx-timeline-step.active .lx-step-dot {
  background: #1a2a3a;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(26,42,58,0.15);
}

#booking-provider-view .lx-step-label {
  margin-left: 12px;
  white-space: nowrap;
}

#booking-provider-view .lx-step-label strong {
  display: block;
  font-size: 12px;
  color: #1a2a3a;
  font-weight: 700;
}

#booking-provider-view .lx-step-label small {
  font-size: 10px;
  color: #94a3b8;
}

#booking-provider-view .lx-step-line {
  flex: 1;
  height: 2px;
  background: #eef2f6;
  margin: 0 15px;
  min-width: 20px;
}

#booking-provider-view .lx-timeline-step.completed ~ .lx-timeline-step .lx-step-line {
  background: #8cc63f;
}

/* --- CANCEL BANNER --- */
#booking-provider-view .lx-cancel-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 25px;
  color: #991b1b;
  font-weight: 600;
  font-size: 14px;
}

#booking-provider-view .lx-cancel-banner i {
  font-size: 20px;
  color: #dc2626;
}

#booking-provider-view .lx-cancel-reason {
  font-weight: 400;
  font-size: 13px;
  color: #7f1d1d;
}

/* --- GRID --- */
#booking-provider-view .lx-content-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
}

/* --- TABS --- */
#booking-provider-view .lx-tabs {
  margin-bottom: 25px;
}

#booking-provider-view .lx-tab-bar {
  display: flex;
  gap: 4px;
  background: #fff;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow-x: auto;
}

#booking-provider-view .lx-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#booking-provider-view .lx-tab-btn.active {
  background: #1a2a3a;
  color: #fff;
}

#booking-provider-view .lx-tab-btn:hover:not(.active) {
  background: #f1f5f9;
  color: #1a2a3a;
}

/* --- HERO CARD --- */
#booking-provider-view .lx-hero-card {
  background: #ffffff;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

#booking-provider-view .lx-hero-image {
  height: 260px;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 20px;
}

#booking-provider-view .lx-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
}

#booking-provider-view .lx-hero-top {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

#booking-provider-view .lx-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 42, 58, 0.8);
  color: #fff;
  padding: 6px 15px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(5px);
}

#booking-provider-view .lx-unit-tag {
  display: inline-flex;
  background: rgba(140, 198, 63, 0.9);
  color: #fff;
  padding: 6px 15px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(5px);
}

#booking-provider-view .lx-hero-body {
  padding: 30px;
}

#booking-provider-view .lx-product-name {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 800;
  color: #1a2a3a;
}

/* --- DETAIL CARDS --- */
#booking-provider-view .lx-detail-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#booking-provider-view .lx-detail-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  overflow: hidden;
}

#booking-provider-view .lx-dc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fafbfc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  color: #1a2a3a;
}

#booking-provider-view .lx-dc-header i {
  color: #8cc63f;
  font-size: 15px;
}

#booking-provider-view .lx-dc-body {
  padding: 20px;
}

#booking-provider-view .lx-dc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}

#booking-provider-view .lx-dc-col {
  flex: 1;
}

#booking-provider-view .lx-dc-col small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 800;
  margin-bottom: 4px;
}

#booking-provider-view .lx-dc-col strong {
  font-size: 16px;
  color: #1a2a3a;
}

#booking-provider-view .lx-dc-arrow {
  color: #8cc63f;
  font-size: 18px;
  padding: 0 5px;
}

#booking-provider-view .lx-dc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

#booking-provider-view .lx-dc-stat {
  background: #f8fafb;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

#booking-provider-view .lx-dc-stat i {
  display: block;
  color: #8cc63f;
  font-size: 18px;
  margin-bottom: 6px;
}

#booking-provider-view .lx-dc-stat strong {
  display: block;
  font-size: 13px;
  color: #1a2a3a;
}

#booking-provider-view .lx-dc-stat small {
  font-size: 10px;
  color: #94a3b8;
}

#booking-provider-view .lx-dc-schedules {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

#booking-provider-view .lx-dc-sched-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 8px;
}

#booking-provider-view .lx-dc-sched-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f8fafb;
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #475569;
}

#booking-provider-view .lx-dc-sched-day {
  font-weight: 600;
}

#booking-provider-view .lx-dc-sched-time {
  color: #64748b;
}

#booking-provider-view .lx-dc-sched-total {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #8cc63f;
  margin-top: 6px;
}

/* --- TIMEOUT CARD --- */
#booking-provider-view .lx-timeout-card .lx-dc-header {
  cursor: pointer;
}

#booking-provider-view .lx-timeout-row {
  border-bottom: 1px solid #f1f5f9;
  padding: 10px 0;
}

#booking-provider-view .lx-timeout-row:last-child {
  border-bottom: none;
}

#booking-provider-view .lx-timeout-dates {
  font-size: 13px;
  color: #1a2a3a;
  display: flex;
  align-items: center;
  gap: 6px;
}

#booking-provider-view .lx-timeout-dates i {
  color: #8cc63f;
}

#booking-provider-view .lx-timeout-scheds {
  margin-top: 6px;
  padding-left: 22px;
}

#booking-provider-view .lx-timeout-sched-item {
  font-size: 12px;
  color: #64748b;
  padding: 2px 0;
}

#booking-provider-view .lx-timeout-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-left: 22px;
}

#booking-provider-view .lx-day-badge {
  background: #eef2f6;
  color: #475569;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

/* --- LOCATION CARD --- */
#booking-provider-view .lx-location-card .lx-dc-body {
  padding: 16px 20px;
}

#booking-provider-view .lx-loc {
  font-size: 14px;
  color: #475569;
  margin: 0 0 8px;
}

#booking-provider-view .lx-loc i {
  color: #8cc63f;
  margin-right: 6px;
}

#booking-provider-view .lx-text {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* --- WHITE CARD (for Timeline/Financial tabs) --- */
#booking-provider-view .lx-card-white {
  background: #fff;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

#booking-provider-view .lx-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 25px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  font-weight: 700;
  color: #1a2a3a;
}

#booking-provider-view .lx-card-header i {
  color: #8cc63f;
}

#booking-provider-view .lx-card-body {
  padding: 25px;
}

/* --- VERTICAL TIMELINE --- */
#booking-provider-view .lx-vertical-timeline {
  position: relative;
}

#booking-provider-view .lx-vt-item {
  display: flex;
  position: relative;
  padding-bottom: 24px;
}

#booking-provider-view .lx-vt-item:last-child {
  padding-bottom: 0;
}

#booking-provider-view .lx-vt-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #94a3b8;
  z-index: 2;
}

#booking-provider-view .lx-vt-item.created .lx-vt-dot { background: #eef2f6; color: #64748b; }
#booking-provider-view .lx-vt-item.confirmed .lx-vt-dot { background: #dcfce7; color: #16a34a; }
#booking-provider-view .lx-vt-item.in_progress .lx-vt-dot { background: #dbeafe; color: #2563eb; }
#booking-provider-view .lx-vt-item.completed .lx-vt-dot { background: #dcfce7; color: #16a34a; }
#booking-provider-view .lx-vt-item.cancelled .lx-vt-dot { background: #fef2f2; color: #dc2626; }

#booking-provider-view .lx-vt-line {
  position: absolute;
  left: 17px;
  top: 36px;
  width: 2px;
  height: calc(100% - 36px);
  background: #eef2f6;
  z-index: 1;
}

#booking-provider-view .lx-vt-content {
  margin-left: 16px;
  padding-top: 4px;
}

#booking-provider-view .lx-vt-content strong {
  display: block;
  font-size: 14px;
  color: #1a2a3a;
}

#booking-provider-view .lx-vt-content small {
  font-size: 11px;
  color: #94a3b8;
}

#booking-provider-view .lx-vt-reason {
  margin: 4px 0 0;
  font-size: 12px;
  color: #991b1b;
  background: #fef2f2;
  padding: 6px 10px;
  border-radius: 6px;
}

/* --- FINANCIAL TABLE --- */
#booking-provider-view .lx-fin-table {
  max-width: 500px;
}

#booking-provider-view .lx-fin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #475569;
}

#booking-provider-view .lx-fin-row-sub {
  padding-left: 20px;
  font-size: 12px;
  color: #94a3b8;
}

#booking-provider-view .lx-fin-row-total {
  font-weight: 700;
  color: #1a2a3a;
  font-size: 15px;
  border-top: 2px solid #f1f5f9;
  margin-top: 4px;
  padding-top: 12px;
}

#booking-provider-view .lx-fin-row-highlight {
  background: #f0fdf4;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #dcfce7;
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
}

#booking-provider-view .lx-fin-val {
  font-weight: 600;
}

#booking-provider-view .lx-fin-val-lg {
  font-size: 17px;
  font-weight: 800;
  color: #1a2a3a;
}

#booking-provider-view .lx-fin-val-green {
  color: #16a34a;
  font-size: 20px;
}

#booking-provider-view .lx-fin-val-neg {
  color: #dc2626;
}

#booking-provider-view .lx-fin-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 0;
}

#booking-provider-view .lx-fin-status-card {
  background: #f8fafb;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

#booking-provider-view .lx-fin-status-card small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
  margin-bottom: 6px;
}

#booking-provider-view .lx-status-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}

#booking-provider-view .lx-st-funds_collected,
#booking-provider-view .lx-st-completed,
#booking-provider-view .lx-st-transferred,
#booking-provider-view .lx-st-ready_for_release {
  background: #dcfce7;
  color: #16a34a;
}

#booking-provider-view .lx-st-pending,
#booking-provider-view .lx-st-requires_payment {
  background: #fef9c3;
  color: #a16207;
}

#booking-provider-view .lx-st-on_hold {
  background: #fef2f2;
  color: #dc2626;
}

#booking-provider-view .lx-st-refunded {
  background: #f1f5f9;
  color: #64748b;
}

/* --- SIDEBAR --- */
#booking-provider-view .lx-profile-card {
  background: #ffffff;
  border-radius: 25px;
  padding: 30px;
  text-align: center;
  margin-bottom: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

#booking-provider-view .lx-profile-avatar {
  position: relative;
  display: inline-block;
}

#booking-provider-view .lx-profile-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #f8fafb;
  margin-bottom: 15px;
  object-fit: cover;
}

#booking-provider-view .lx-online-dot {
  position: absolute;
  bottom: 14px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #94a3b8;
}

#booking-provider-view .lx-online-dot.online {
  background: #22c55e;
}

#booking-provider-view .lx-user-name {
  font-size: 18px;
  font-weight: 800;
  color: #1a2a3a;
  margin: 0;
}

#booking-provider-view .lx-user-email {
  font-size: 12px;
  color: #94a3b8;
  margin: 5px 0 16px;
}

#booking-provider-view .lx-client-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

#booking-provider-view .lx-cs-item {
  background: #f8fafb;
  border-radius: 10px;
  padding: 10px;
}

#booking-provider-view .lx-cs-item small {
  display: block;
  font-size: 9px;
  color: #94a3b8;
  font-weight: 700;
  margin-bottom: 2px;
}

#booking-provider-view .lx-cs-item strong {
  font-size: 14px;
  color: #1a2a3a;
}

#booking-provider-view .lx-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  color: #1a2a3a !important;
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

#booking-provider-view .lx-chat-btn:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

#booking-provider-view .lx-chat-btn i {
  color: #8cc63f;
}

#booking-provider-view .lx-chat-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

/* --- FINANCE SIDEBAR CARD --- */
#booking-provider-view .lx-finance-card {
  background: #ffffff;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

#booking-provider-view .lx-fin-head {
  background: #1a2a3a;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

#booking-provider-view .lx-fin-body {
  padding: 25px;
}

#booking-provider-view .lx-fin-line {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 20px;
}

#booking-provider-view .lx-val-total {
  font-weight: 800;
  color: #1a2a3a;
}

#booking-provider-view .lx-gain-highlight {
  background: #f0fdf4;
  padding: 20px;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dcfce7;
}

#booking-provider-view .lx-gain-text strong {
  display: block;
  color: #166534;
  font-size: 14px;
}

#booking-provider-view .lx-gain-text small {
  color: #8cc63f;
  font-size: 10px;
  font-weight: 700;
}

#booking-provider-view .lx-gain-val {
  font-size: 26px;
  font-weight: 900;
  color: #8cc63f;
}

/* --- STATUS MINI BADGES --- */
#booking-provider-view .lx-status-mini {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

#booking-provider-view .lx-sm-item {
  flex: 1;
  text-align: center;
}

#booking-provider-view .lx-sm-item small {
  display: block;
  font-size: 9px;
  color: #94a3b8;
  font-weight: 700;
  margin-bottom: 4px;
}

#booking-provider-view .lx-sm-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
}

#booking-provider-view .lx-sm-funds_collected,
#booking-provider-view .lx-sm-completed,
#booking-provider-view .lx-sm-transferred,
#booking-provider-view .lx-sm-ready_for_release {
  background: #dcfce7;
  color: #16a34a;
}

#booking-provider-view .lx-sm-pending,
#booking-provider-view .lx-sm-requires_payment {
  background: #fef9c3;
  color: #a16207;
}

#booking-provider-view .lx-sm-on_hold {
  background: #fef2f2;
  color: #dc2626;
}

#booking-provider-view .lx-sm-refunded {
  background: #f1f5f9;
  color: #64748b;
}

/* --- ACTION BUTTONS --- */
#booking-provider-view .lx-actions-wrapper {
  margin-top: 20px;
}

#booking-provider-view .lx-action-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#booking-provider-view .lx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

#booking-provider-view .lx-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#booking-provider-view .lx-btn-primary {
  background: #8cc63f;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(140,198,63,0.2);
}

#booking-provider-view .lx-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(140,198,63,0.3);
}

#booking-provider-view .lx-btn-danger {
  background: #dc2626;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(220,38,38,0.15);
}

#booking-provider-view .lx-btn-danger:hover:not(:disabled) {
  transform: translateY(-1px);
}

#booking-provider-view .lx-btn-warning {
  background: #f59e0b;
  color: #fff !important;
}

#booking-provider-view .lx-btn-warning:hover {
  transform: translateY(-1px);
}

#booking-provider-view .lx-btn-orange {
  background: #f97316;
  color: #fff !important;
}

#booking-provider-view .lx-btn-orange:hover {
  transform: translateY(-1px);
}

#booking-provider-view .lx-processed-badge {
  text-align: center;
  padding: 15px;
  background: #f0fdf4;
  color: #16a34a;
  border-radius: 15px;
  font-weight: 800;
  font-size: 13px;
}

#booking-provider-view .lx-processed-badge i {
  margin-right: 6px;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  #booking-provider-view .lx-content-grid {
    grid-template-columns: 1fr;
  }

  #booking-provider-view .lx-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  #booking-provider-view .lx-timeline-bar {
    padding: 14px 16px;
  }

  #booking-provider-view .lx-dc-grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  #booking-provider-view .lx-fin-statuses {
    grid-template-columns: 1fr;
  }

  #booking-provider-view .lx-client-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  #booking-provider-view.lx-main-wrapper {
    padding: 12px;
  }

  #booking-provider-view .lx-hero-image {
    height: 180px;
  }

  #booking-provider-view .lx-dc-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ==================== CLIENT VIEW V2 ==================== */
#client-view-v2.lx-main-wrapper {
  background: #f8fafb;
  padding: 25px;
  border-radius: 20px;
}

#client-view-v2 .lx-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 12px;
}

#client-view-v2 .lx-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#client-view-v2 .lx-main-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  color: #1a2332;
}

#client-view-v2 .lx-meta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

#client-view-v2 .lx-meta-item {
  font-size: 0.78rem;
  color: #6c757d;
}

#client-view-v2 .lx-meta-item i {
  margin-right: 5px;
  color: #96b900;
  width: 14px;
  text-align: center;
}

#client-view-v2 .lx-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 50px;
  background: rgba(150,185,0,0.1);
  color: #7aa000;
  text-decoration: none;
  transition: 0.2s;
  border: none;
}

#client-view-v2 .lx-btn-back:hover {
  background: rgba(150,185,0,0.2);
  color: #5c7800;
}

/* Hero Card (same structure as provider) */
#client-view-v2 .lx-hero-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

#client-view-v2 .lx-hero-image {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
}

#client-view-v2 .lx-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 60%);
}

#client-view-v2 .lx-hero-top {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

#client-view-v2 .lx-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.3em 0.7em;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 50px;
  background: rgba(255,255,255,0.92);
  color: #1a2332;
}

#client-view-v2 .lx-unit-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.7em;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 50px;
  background: rgba(150,185,0,0.85);
  color: #fff;
}

#client-view-v2 .lx-hero-body {
  padding: 20px;
}

#client-view-v2 .lx-product-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  color: #1a2332;
}

#client-view-v2 .lx-detail-section {
  margin-top: 14px;
}

#client-view-v2 .lx-detail-card {
  background: #f8fafc;
  border-radius: 12px;
  overflow: hidden;
}

#client-view-v2 .lx-dc-body {
  padding: 16px;
}

#client-view-v2 .lx-dc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

#client-view-v2 .lx-dc-col {
  display: flex;
  flex-direction: column;
}

#client-view-v2 .lx-dc-col small {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(0,0,0,0.35);
  margin-bottom: 2px;
}

#client-view-v2 .lx-dc-col strong {
  font-size: 0.92rem;
  color: #1a2332;
}

#client-view-v2 .lx-dc-arrow {
  color: #96b900;
  font-size: 1rem;
}

#client-view-v2 .lx-dc-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
}

#client-view-v2 .lx-dc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.04);
}

#client-view-v2 .lx-dc-stat i {
  font-size: 1rem;
  color: #96b900;
  margin-bottom: 4px;
}

#client-view-v2 .lx-dc-stat strong {
  font-size: 0.9rem;
  color: #1a2332;
}

#client-view-v2 .lx-dc-stat small {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(0,0,0,0.35);
}

/* Status pills */
#client-view-v2 .lx-pill {
  display: inline-block;
  padding: 0.25em 0.75em;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 50px;
  white-space: nowrap;
}

#client-view-v2 .lx-pill-success { background: rgba(40,167,69,0.12); color: #28a745; }
#client-view-v2 .lx-pill-warning { background: rgba(255,193,7,0.15); color: #b8860b; }
#client-view-v2 .lx-pill-info { background: rgba(52,152,219,0.12); color: #3498db; }
#client-view-v2 .lx-pill-danger { background: rgba(220,53,69,0.12); color: #dc3545; }
#client-view-v2 .lx-pill-dark,
#client-view-v2 .lx-pill-neutral { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.5); }

/* Action button */
#client-view-v2 .lx-btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 50px;
  background: rgba(255,152,0,0.1);
  color: #e67e22;
  text-decoration: none;
  transition: 0.2s;
  border: none;
}

#client-view-v2 .lx-btn-orange:hover {
  background: rgba(255,152,0,0.2);
  color: #c06a12;
}

/* Responsive */
@media (max-width: 768px) {
  #client-view-v2.lx-main-wrapper {
    padding: 14px;
  }

  #client-view-v2 .lx-hero-image {
    height: 160px;
  }

  #client-view-v2 .lx-dc-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  #client-view-v2 .lx-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #client-view-v2 .lx-hero-image {
    height: 140px;
  }

  #client-view-v2 .lx-dc-grid-3 {
    grid-template-columns: 1fr;
  }

  #client-view-v2 .lx-total-amount {
    font-size: 1.2rem;
  }
}

/* --- Client View V2: Additional styles --- */
#client-view-v2 .lx-label-mini {
  display: block;
  color: #8cc63f;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

#client-view-v2 .lx-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 50px;
  background: rgba(150,185,0,0.1);
  color: #7aa000;
  text-decoration: none;
  transition: 0.2s;
  white-space: nowrap;
}

#client-view-v2 .lx-back-link:hover {
  background: rgba(150,185,0,0.2);
  color: #5c7800;
}

/* Cancel/Refund Banner */
#client-view-v2 .lx-cancel-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(220,53,69,0.06);
  border-left: 4px solid #dc3545;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b02a37;
}

#client-view-v2 .lx-cancel-banner i {
  font-size: 1.1rem;
  color: #dc3545;
}

/* Schedules */
#client-view-v2 .lx-dc-schedules {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

#client-view-v2 .lx-dc-sched-title {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(0,0,0,0.35);
  margin-bottom: 8px;
}

#client-view-v2 .lx-dc-sched-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.6);
}

#client-view-v2 .lx-dc-sched-day {
  font-weight: 600;
  color: #1a2332;
}

#client-view-v2 .lx-dc-sched-total {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,0.04);
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a2332;
}

/* Buttons */
#client-view-v2 .lx-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 50px;
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.55);
  text-decoration: none;
  transition: 0.2s;
  border: none;
  cursor: pointer;
}

#client-view-v2 .lx-btn-outline:hover {
  background: rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.7);
}

#client-view-v2 .lx-btn-danger {
  color: #dc3545;
  background: rgba(220,53,69,0.08);
}

#client-view-v2 .lx-btn-danger:hover {
  background: rgba(220,53,69,0.15);
  color: #b02a37;
}

/* pill-status reusing same classes */
#client-view-v2 .pill-status {
  display: inline-block;
  padding: 0.25em 0.75em;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 50px;
}

/* lx-location-card text */
#client-view-v2 .lx-text {
  font-size: 0.82rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.6;
  margin: 0;
}

/* Total card */
#client-view-v2 .lx-total-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

#client-view-v2 .lx-total-body {
  padding: 20px 24px;
}

#client-view-v2 .lx-total-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: #96b900;
}

/* Responsive additions */
@media (max-width: 768px) {
  #client-view-v2 .lx-dc-schedules {
    margin-top: 10px;
  }
}

#module-finanzas .table-container-custom {
  border-radius: 8px;
  border: 1px solid #e7eaec !important;
  background: #fff;
  overflow: hidden;
}

#module-finanzas .text-primary {
  color: #9acd32 !important;
}

#module-finanzas .bg-white {
  background-color: #fff !important;
}

#module-finanzas .p-none {
  padding: 0 !important;
}

#module-finanzas .m-t-lg {
  margin-top: 30px;
}

/* Estilos de Tabla */
#module-finanzas .table-dashboard thead th {
  background: #fdfdfd;
  color: #999;
  font-size: 11px;
  font-weight: 600;
  padding: 12px 20px;
  border-bottom: 1px solid #f1f1f1;
  text-transform: uppercase;
}

#module-finanzas .table-dashboard tbody td {
  padding: 15px 20px !important;
  border-top: 1px solid #f1f1f1 !important;
  vertical-align: middle !important;
  font-size: 13px;
  color: #676a6c;
}

#module-finanzas .icon-wrapper {
  width: 35px;
  height: 35px;
  background: #f8f9fa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #9acd32;
  border: 1px solid #eee;
}

/* Badges */
#module-finanzas .status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}

#module-finanzas .status-confirmed {
  background-color: #9acd32;
  color: #fff;
}

#module-finanzas .method-badge {
  background: #f9f9f9;
  border: 1px solid #eee;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
}

/* ==========================================================================
   V2 Dashboard Layout (sidebar + navbar + main)
   Extracted from: views/layouts/main_v2.php (inline <style>)
   ========================================================================== */

.async-table .form-control { width: auto; }
.gb-sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--gb-sidebar-width); height: 100vh;
    background: var(--gb-sidebar-bg);
    z-index: 1040;
    transition: transform 0.3s var(--gb-ease-luxury);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.gb-sidebar.collapsed {
    transform: translateX(calc(var(--gb-sidebar-width) * -1));
}
.gb-sidebar-logo {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 0.75rem;
}
.gb-sidebar-logo img { height: 36px; }
.gb-sidebar-logo span {
    font-weight: 700; font-size: 1.1rem;
    color: #fff; letter-spacing: -0.3px;
}
.gb-sidebar-nav { flex: 1; padding: 0.75rem 0; }
.gb-sidebar-nav .nav-section {
    padding: 0.5rem 1.5rem 0.25rem;
    font-size: 0.65rem; font-weight: 600;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase; letter-spacing: 1.2px;
}
.gb-sidebar-nav a {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 0.65rem 1.5rem;
    color: var(--gb-sidebar-text);
    text-decoration: none;
    font-size: 0.88rem; font-weight: 500;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}
.gb-sidebar-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}
.gb-sidebar-nav a.active {
    color: var(--gb-sidebar-active);
    border-left-color: var(--gb-sidebar-active);
    background: rgba(150,185,0,0.08);
}
.gb-sidebar-nav a i { width: 20px; text-align: center; font-size: 1rem; }
.gb-sidebar-nav .divider {
    margin: 0.75rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.gb-sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.75rem; color: rgba(255,255,255,0.3);
    text-align: center;
}
.gb-overlay {
    position: fixed; inset: 0; z-index: 1035;
    background: rgba(0,0,0,0.4);
    display: none;
}
.gb-overlay.show { display: block; }
.gb-main {
    margin-left: var(--gb-sidebar-width);
    height: 100vh;
    display: flex; flex-direction: column;
    transition: margin-left 0.3s var(--gb-ease-luxury);
    overflow-y: auto;
}
.gb-main.expanded { margin-left: 0; }
.gb-navbar {
    height: var(--gb-navbar-height);
    background: var(--gb-card-bg);
    border-bottom: 1px solid var(--gb-brand-border);
    display: flex; align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    position: sticky; top: 0; z-index: 1025;
}
.gb-navbar .hamburger {
    background: none; border: none;
    font-size: 1.25rem; color: var(--gb-brand-charcoal);
    cursor: pointer; padding: 0.25rem;
    display: flex; align-items: center;
}
.gb-navbar .hamburger:hover { color: var(--gb-brand-primary); }
.gb-navbar-spacer { flex: 1; }
.gb-navbar .nav-item {
    position: relative;
    color: var(--gb-text-muted);
    text-decoration: none;
    padding: 0.375rem 0.625rem;
    border-radius: 8px;
    transition: all 0.15s ease;
    display: flex; align-items: center;
}
.gb-navbar .nav-item:hover {
    color: var(--gb-brand-charcoal);
    background: var(--gb-bg);
}
.gb-navbar .badge-dot {
    position: absolute; top: -12px; right: -16px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.65rem; font-weight: 800;
    line-height: 20px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; border: 2px solid var(--gb-card-bg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.gb-navbar .profile-trigger {
    display: flex; align-items: center; gap: 0.5rem;
    cursor: pointer; padding: 0.25rem 0.5rem;
    border-radius: 8px; transition: all 0.15s ease;
}
.gb-navbar .profile-trigger:hover { background: var(--gb-bg); }
.gb-navbar .profile-trigger img {
    width: 34px; height: 34px;
    border-radius: 50%; object-fit: cover;
}
.presence-dot {
    position: absolute; bottom: 0; right: 0;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--gb-card-bg);
}
.presence-dot.dot-online { background: #2ecc71; }
.presence-dot.dot-away { background: #f39c12; }
.presence-dot.dot-busy { background: #e74c3c; }
.presence-dot.dot-offline { background: #95a5a6; }
.gb-breadcrumbs {
    padding: 1rem 1.5rem 0;
    font-size: 0.82rem;
}
.gb-breadcrumbs .breadcrumb {
    background: none; padding: 0; margin: 0;
}
.gb-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: '/'; color: var(--gb-text-muted);
}
.gb-breadcrumbs .breadcrumb-item a { color: var(--gb-text-muted); text-decoration: none; }
.gb-breadcrumbs .breadcrumb-item a:hover { color: var(--gb-brand-primary); }
.gb-breadcrumbs .breadcrumb-item.active { color: var(--gb-brand-charcoal); }
.gb-page-header {
    padding: 0.75rem 1.5rem 0.5rem;
}
.gb-page-header h1 {
    font-size: 1.35rem; font-weight: 700;
    margin: 0;
}
.gb-content {
    flex: 1;
    padding: 1.5rem;
}
.provider-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 50px;
    background: rgba(150,185,0,0.1);
    color: var(--gb-brand-primary);
}
.provider-badge i { font-size: 0.75rem; }
.badge-rentals { background: rgba(150,185,0,0.1); color: var(--gb-brand-primary); }
.badge-services { background: rgba(46,204,113,0.1); color: #27ae60; }
.badge-taxis { background: rgba(243,156,18,0.1); color: #e67e22; }
.badge-events { background: rgba(52,152,219,0.1); color: #2980b9; }
.gb-dropdown {
    position: absolute; top: 100%; right: 0; z-index: 1050;
    min-width: 220px;
    background: var(--gb-card-bg);
    border: 1px solid var(--gb-brand-border);
    border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    padding: 0.5rem;
    display: none;
}
.gb-dropdown.show { display: block; }
.gb-dropdown a {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    color: var(--gb-brand-charcoal);
    text-decoration: none; font-size: 0.85rem;
    border-radius: 8px; transition: background 0.1s;
}
.gb-dropdown a:hover { background: var(--gb-bg); }
.gb-dropdown .dropdown-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem; font-weight: 600;
    color: var(--gb-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.gb-dropdown hr { margin: 0.25rem 0; border-color: var(--gb-brand-border); }

/* Presence dropdown styles */
.presence-option {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    color: var(--gb-brand-charcoal);
    text-decoration: none; font-size: 0.85rem;
    border-radius: 8px; transition: background 0.1s;
    cursor: pointer;
    position: relative;
}
.presence-option:hover { background: var(--gb-bg); }
.presence-selected {
    background: rgba(150,185,0,0.08);
    font-weight: 600;
}
.presence-selected:hover { background: rgba(150,185,0,0.12); }
.presence-check {
    width: 20px; text-align: center;
    font-size: 1rem;
}
.presence-ico-0 { color: #95a5a6; }
.presence-ico-1 { color: #2ecc71; }
.presence-ico-2 { color: #f39c12; }
.presence-ico-3 { color: #e74c3c; }
.presence-mark {
    margin-left: auto; opacity: 0;
    font-size: 0.75rem; color: var(--gb-brand-primary);
    transition: opacity 0.15s;
}
.presence-selected .presence-mark { opacity: 1; }

/* Notification item styles */
.notif-item {
    display: flex; align-items: flex-start; gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    transition: background 0.12s;
    position: relative;
}
.notif-item:hover { background: var(--gb-bg); }
.notif-unread { background: rgba(150,185,0,0.05); }
.notif-unread .notif-title { font-weight: 700; }
.notif-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.85rem;
    color: #fff;
}
.notif-icon-booking { background: linear-gradient(135deg,#f39c12,#e67e22); }
.notif-icon-chat { background: linear-gradient(135deg,#3498db,#2980b9); }
.notif-icon-friend { background: linear-gradient(135deg,#e74c3c,#c0392b); }
.notif-icon-payment { background: linear-gradient(135deg,#2ecc71,#27ae60); }
.notif-icon-support { background: linear-gradient(135deg,#9b59b6,#8e44ad); }
.notif-icon-default { background: linear-gradient(135deg,#95a5a6,#7f8c8d); }
.notif-body { flex: 1; min-width: 0; }
.notif-title {
    font-size: 0.82rem; font-weight: 600;
    color: var(--gb-brand-charcoal);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-desc {
    font-size: 0.75rem; color: var(--gb-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}
.notif-time {
    font-size: 0.68rem; color: var(--gb-text-muted);
    margin-top: 2px; opacity: 0.8;
}
.notif-actions {
    display: flex; align-items: center; gap: 2px;
    flex-shrink: 0; opacity: 0; transition: opacity 0.12s;
}
.notif-item:hover .notif-actions { opacity: 1; }
.notif-btn {
    width: 28px; height: 28px;
    border: none; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.1s;
    font-size: 0.7rem; background: transparent; color: var(--gb-text-muted);
}
.notif-btn-primary:hover { background: rgba(52,152,219,0.12); color: #3498db; }
.notif-btn-danger:hover { background: rgba(231,76,60,0.12); color: #e74c3c; }
.notif-footer-btn {
    width: 50%; padding: 0.625rem;
    border: none; background: transparent;
    font-size: 0.78rem; color: var(--gb-text-muted);
    cursor: pointer; transition: all 0.1s;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
}
.notif-footer-btn:hover { color: var(--gb-brand-charcoal); background: var(--gb-bg); }
.notif-footer-btn:first-child { border-radius: 0 0 0 12px; }
.notif-footer-btn:last-child { border-radius: 0 0 12px 0; }

.gb-footer {
    padding: 1rem 1.5rem;
    font-size: 0.78rem;
    color: var(--gb-text-muted);
    border-top: 1px solid var(--gb-brand-border);
    display: flex; justify-content: space-between; align-items: center;
}
@media (min-width: 769px) {
    .gb-overlay { display: none !important; }
}
@media (max-width: 768px) {
    .gb-sidebar.collapsed { transform: translateX(calc(var(--gb-sidebar-width) * -1)); }
    .gb-sidebar:not(.collapsed) { transform: translateX(0); }
    .gb-main { margin-left: 0; }
    .gb-overlay.show { display: block; }
}
.fade-in { animation: fadeIn 0.3s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast-top-nav { top: 72px !important; right: 12px !important; }

/* ==========================================================================
   V2 Provider Layout (provider registration / provider pages)
   Extracted from: views/layouts/provider_v2.php, provider_register_v2.php
   ========================================================================== */
.provider-v2-body {
    font-family: 'Outfit', sans-serif;
    background: #f3f3f4;
    color: var(--gb-brand-charcoal);
    display: flex; flex-direction: column;
    min-height: 100vh;
}
.provider-body {
    position: relative; z-index: 1;
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
.provider-container {
    width: 100%; max-width: 960px;
}
.step-counter {
    text-align: center;
    font-size: 0.72rem; color: rgba(26,26,26,0.25);
    font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* =====================================================
   Product Details Preview (V2) — reutilizado en wizards
   ===================================================== */
.font-outfit { font-family: 'Outfit', sans-serif !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }
.text-dark-charcoal { color: #1a1a1a !important; }
.bg-luxury-gold { background-color: #96b900 !important; }
.text-luxury-gold { color: #96b900 !important; }

.bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 16px;
}
.bento-item-large {
    grid-row: span 2;
    border-radius: 24px !important;
    overflow: hidden;
    position: relative;
}
.bento-item-small {
    border-radius: 20px !important;
    overflow: hidden;
    position: relative;
}
.bento-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-item:hover .bento-img {
    transform: scale(1.05);
}

.sticky-reserve-card {
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    background: #ffffff;
    padding: 20px 20px 16px 20px !important;
    transition: all 0.3s ease;
}
.sticky-reserve-card:hover {
    box-shadow: 0 24px 48px rgba(0,0,0,0.09);
}

.feature-badge {
    background-color: rgba(150, 185, 0, 0.05);
    color: #7da000;
    font-weight: 600;
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.8rem;
}

.offer-badge-detail {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #e74c3c;
    color: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    z-index: 3;
    line-height: 1;
}
.lux-chip {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
    color: #4a5568;
    transition: all 0.25s ease;
}
.lux-chip:hover {
    border-color: #96b900;
    color: #96b900;
}
.lux-chip.active {
    background: #96b900;
    color: #ffffff !important;
    border-color: #96b900;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(150, 185, 0, 0.25);
}

.luxury-lightbox-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(10, 10, 10, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
.lightbox-img-transition {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 1;
    transform: translateX(0) scale(1);
}
.lightbox-img-sliding-next {
    opacity: 0;
    transform: translateX(60px) scale(0.98);
}
.lightbox-img-sliding-prev {
    opacity: 0;
    transform: translateX(-60px) scale(0.98);
}

@media (max-width: 991.98px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 300px 150px 150px;
    }
    .bento-item-large {
        grid-row: span 1;
    }
}

/* Tracking / letter-spacing utility */
.tracking-wider { letter-spacing: 0.05em; }


/* ==========================================================================
   CLASES COMPARTIDAS CAN�NICAS (V2)
   Single source of truth para clases reutilizadas en m�ltiples vistas V2.
   ========================================================================== */

/* --- Tipograf�a --- */
.font-outfit { font-family: 'Outfit', sans-serif !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }
.text-dark-charcoal { color: #1a1a1a !important; }
.bg-luxury-gold { background-color: #96b900 !important; }
.text-luxury-gold { color: #96b900 !important; }
.tracking-wider { letter-spacing: 0.05em; }

/* --- Layout containers --- */
.luxury-container { font-family: 'Outfit', sans-serif; background-color: #f9f9f9; color: #1a1a1a; padding: 2.5rem 1rem; border-radius: 20px; margin-bottom: 2rem; }
.luxury-title { font-family: 'Playfair Display', serif; font-weight: 700; color: #1a1a1a; letter-spacing: -0.5px; }
.luxury-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.04); border-radius: 16px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.luxury-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.08); }

/* --- Botones --- */
.btn-luxury {
    background-color: #96b900; color: #ffffff; font-weight: 700; border: none; border-radius: 12px;
    padding: 0.75rem 1.5rem; transition: all 0.3s ease; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; box-shadow: 0 8px 20px -6px rgba(150, 185, 0, 0.4);
    text-decoration: none; cursor: pointer;
}
.btn-luxury:hover:not(:disabled) {
    background-color: #84a300; transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(150, 185, 0, 0.6); color: #ffffff;
}
.btn-luxury:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-luxury.btn-sm { padding: 0.45rem 1rem; font-size: 0.85rem; }
.btn-luxury.btn-lg { padding: 0.85rem 1.75rem; font-size: 1rem; }

.btn-luxury-secondary {
    background-color: #ffffff; color: #1a1a1a; border: 1px solid #e2e8f0; font-weight: 600;
    border-radius: 12px; padding: 0.75rem 1.5rem; transition: all 0.3s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn-luxury-secondary:hover { background-color: #f8fafc; border-color: #cbd5e1; color: #1a1a1a; }

.btn-luxury-outline {
    background: transparent; color: #1a1a1a; border: 1px solid #e2e8f0; font-weight: 600;
    border-radius: 10px; padding: 0.5rem 0.85rem; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.btn-luxury-outline:hover { border-color: #96b900; color: #96b900; }

.btn-luxury-danger {
    background-color: #dc3545; color: #ffffff; font-weight: 700; border: none; border-radius: 12px;
    padding: 0.75rem 1.5rem; transition: all 0.3s ease; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; box-shadow: 0 8px 20px -6px rgba(220, 53, 69, 0.4);
    text-decoration: none;
}
.btn-luxury-danger:hover:not(:disabled) {
    background-color: #c82333; transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(220, 53, 69, 0.6); color: #ffffff;
}

.btn-luxury-info {
    background-color: #0dcaf0; color: #ffffff; font-weight: 700; border: none; border-radius: 12px;
    padding: 0.75rem 1.5rem; transition: all 0.3s ease; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; box-shadow: 0 8px 20px -6px rgba(13, 202, 240, 0.4);
    text-decoration: none;
}
.btn-luxury-info:hover:not(:disabled) {
    background-color: #31d2f2; transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(13, 202, 240, 0.6); color: #ffffff;
}

/* --- Badge status gen�rico --- */
.badge-status { padding: 0.35em 0.65em; font-size: 0.75rem; font-weight: 600; border-radius: 50px; }

/* --- Switch toggle (iOS-style) --- */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #96b900; }
input:focus + .slider { box-shadow: 0 0 1px #96b900; }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* --- Toast notifications --- */
.toast-notification { position: fixed; top: 20px; right: 20px; padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 0.95rem; z-index: 1060; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.toast-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.toast-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* --- Save indicator flotante --- */
.save-indicator { position: fixed; bottom: 20px; right: 20px; background: #fff; padding: 10px 20px; border-radius: 50px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: 0.9rem; font-weight: 600; color: #666; z-index: 1050; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.save-indicator.show { opacity: 1; }

/* --- Filter section divider --- */
.filter-section { border-top: 1px solid #e2e8f0; margin-top: 1rem; padding-top: 1rem; }

/* --- Step wizard (stepper) --- */
.step-container { display: flex; justify-content: space-between; align-items: center; position: relative; max-width: 600px; width: 100%; margin: 0; }
.step-container::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #e2e8f0; z-index: 1; transform: translateY(-50%); }
.step-progress-bar { position: absolute; top: 50%; left: 0; height: 2px; background: #96b900; z-index: 2; transform: translateY(-50%); transition: width 0.4s ease; }
.step-node { width: 42px; height: 42px; border-radius: 50%; background: #ffffff; border: 2px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-weight: 700; z-index: 3; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); cursor: pointer; }
.step-node.active { border-color: #96b900; background: #96b900; color: #ffffff; box-shadow: 0 0 0 4px rgba(150, 185, 0, 0.2); }
.step-node.completed { border-color: #96b900; background: #ffffff; color: #96b900; }
.percentage-container { text-align: center; margin-bottom: 2rem; font-weight: 600; color: #96b900; font-size: 1.1rem; }
.step-locked input, .step-locked select, .step-locked textarea, .step-locked .btn:not(.btn-luxury), .step-locked .custom-dropzone { pointer-events: none; background-color: #f9f9f9; opacity: 0.65; }

/* --- Published banner --- */
.published-banner { background: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 12px 20px; border-radius: 10px; margin-bottom: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }

/* --- Skeleton shimmer --- */
.skeleton-shimmer { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- Preview / product cards --- */
.preview-tab-bar { border-bottom: 1px solid rgba(26,26,26,0.06); }
.preview-tab-btn { background:none; border:none; padding:10px 24px; font-size:0.85rem; font-weight:500; color:#6c757d; cursor:pointer; position:relative; transition:color 0.25s ease; font-family:'Outfit',sans-serif; letter-spacing:0.02em; }
.preview-tab-btn::after { content:''; position:absolute; bottom:-1px; left:0; width:100%; height:2.5px; background:#96b900; border-radius:3px 3px 0 0; transform:scaleX(0); transition:transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.preview-tab-btn:hover { color:#96b900; }
.preview-tab-btn.active { color:#1a1a1a; font-weight:600; }
.preview-tab-btn.active::after { transform:scaleX(1); }
.pv-card { background:#000; min-height:380px; border-radius:16px!important; box-shadow:0 20px 60px -12px rgba(0,0,0,0.35); transition:transform 0.3s ease, box-shadow 0.3s ease; }
.pv-card:hover { transform:translateY(-4px); box-shadow:0 28px 72px -16px rgba(0,0,0,0.45); }
.pv-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0) 100%); padding:1.5rem 1.25rem; }
.pv-location { font-family:'Outfit',sans-serif; font-size:0.7rem; letter-spacing:0.3px; text-transform:uppercase; opacity:0.8; color:rgba(255,255,255,0.85); }
.pv-rating { font-size:0.7rem; background:rgba(0,0,0,0.25); backdrop-filter:blur(8px); padding:2px 8px; border-radius:50px; }
.pv-title { font-size:1rem; word-break:break-word; }
.pv-desc { font-size:0.72rem; opacity:0.75; color:rgba(255,255,255,0.8); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pv-badge-discount { background:linear-gradient(135deg, #ff416c, #ff4b2b); color:#fff; font-size:0.7rem; font-weight:700; letter-spacing:0.3px; }
.pv-label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.8px; opacity:0.5; color:rgba(255,255,255,0.6); font-weight:500; }
.pv-badge-cat { display:inline-block; background:rgba(255,255,255,0.12); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.15); color:#fff; border-radius:50px; padding:2px 10px; font-size:0.6rem; font-weight:500; letter-spacing:0.2px; cursor:default; transition:all 0.2s; }
.pv-badge-cat.active { background:#96b900; color:#fff; border-color:#96b900; font-weight:600; }
.pv-price-strike { font-family: 'Outfit', sans-serif; font-size: 0.75rem; text-decoration: line-through; opacity: 0.6; color: rgba(255,255,255,0.5); }
.pv-price { font-family: 'Outfit', sans-serif; font-size: calc(1.75rem + 0.3vw); font-weight: 700; color: #fff; line-height: 1; }
.item-thumb { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #f0f0f0; }
.create-error { background: #f8d7da; color: #721c24; padding: 10px 16px; border-radius: 10px; font-size: 0.9rem; margin-bottom: 1rem; }

/* --- Bento grid gallery --- */
.bento-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:0.5rem; min-height:380px; }
.bento-item { position:relative; overflow:hidden; border-radius:12px; cursor:pointer; }
.bento-item-large { grid-column:1; grid-row:1 / 3; }
.bento-item-small { grid-column:2; }
.bento-img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; }

/* --- Sticky reserve card (ecommerce detail) --- */
.sticky-reserve-card { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:1.75rem; box-shadow:0 12px 40px rgba(0,0,0,0.04); }
.feature-badge { background:#f8f9fa; border:1px solid #eef0f2; padding:0.5rem 1rem; border-radius:50px; font-size:0.85rem; }
.offer-badge-detail { position:absolute; top:1rem; left:1rem; background:linear-gradient(135deg,#ff416c,#ff4b2b); color:#fff; padding:0.35rem 1rem; border-radius:50px; font-size:0.78rem; font-weight:700; letter-spacing:0.3px; box-shadow:0 4px 14px rgba(255,75,43,0.4); z-index:5; }
.lux-chip { display:inline-flex; align-items:center; background:#f2f4f6; color:#333; border:1px solid #e2e6ea; font-weight:500; }
.lux-chip.active { background:#96b900; color:#fff; border-color:#96b900; }

/* --- Lightbox --- */
.luxury-lightbox-modal { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.93); z-index:9999; display:flex!important; flex-direction:column; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.lightbox-img-transition { transition:all 0.3s cubic-bezier(0.16,1,0.3,1); }
.lightbox-img-sliding-next { transform:translateX(60px) scale(0.96); opacity:0.4; }
.lightbox-img-sliding-prev { transform:translateX(-60px) scale(0.96); opacity:0.4; }

/* --- Google Places Autocomplete --- */
.pac-container { border-radius: 1rem !important; border: 1px solid rgba(26,26,26,0.06) !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; font-family: 'Outfit', sans-serif !important; padding: 0.5rem 0 !important; margin-top: 5px !important; z-index: 1060 !important; }
.pac-item { padding: 10px 16px !important; font-size: 0.95rem !important; border-top: none !important; cursor: pointer !important; color: #4a4a4a !important; }
.pac-item:hover { background-color: #f8f9fa !important; }
.pac-matched { font-weight: 700 !important; color: #1a1a1a !important; }
.pac-icon { display: none !important; }

/* --- Footer --- */
footer.footer, footer.footer a, footer.footer p, footer.footer ul, footer.footer li, footer.footer span { color: rgba(255, 255, 255, 0.9) !important; }
footer.footer a:hover { color: #84b800 !important; }

/* --- Keyframes shared --- */
@keyframes pulseMesh { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }

/* --------------------------------------------------------
   Responsive: pv-detail-wrapper scoped overrides
   -------------------------------------------------------- */
@media (max-width: 991.98px) { .pv-detail-wrapper .bento-grid { grid-template-columns:1fr; grid-template-rows:300px 150px 150px; } .pv-detail-wrapper .bento-item-large { grid-row:span 1; } }
.pv-detail-wrapper .text-dark-charcoal { color:#1a1a1a!important; }
.pv-detail-wrapper .bg-luxury-gold { background-color:#96b900!important; }
.pv-detail-wrapper .text-luxury-gold { color:#96b900!important; }
.pv-detail-wrapper .tracking-wider { letter-spacing:0.05em!important; }

/* ==========================================================================
   �AQU� EMPIEZA EL CSS EXTRA�DO DE LAS VISTAS V2!
   ========================================================================== */

/* Extracted from: views\layouts\ecommerce_details_v2.php */
        .bg-mesh {
            position: fixed; inset: 0; z-index: -1; pointer-events: none;
            background:
                radial-gradient(ellipse at 20% 50%, rgba(150,185,0,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(150,185,0,0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(255,255,255,0.6) 0%, transparent 50%);
            animation: pulseMesh 15s infinite alternate ease-in-out;
        }

        .pac-item:hover { background-color: #f8f9fa !important; }


/* Extracted from: views\layouts\ecommerce_v2.php */
        .explore-results-col {
            background-color: #f3f3f4 !important;
        }
        .pac-item:hover { background-color: #f8f9fa !important; }


/* Extracted from: views\layouts\provider_v2.php */
        .bg-mesh {
            position: fixed; inset: 0; z-index: 0; pointer-events: none;
            background:
                radial-gradient(ellipse at 20% 30%, rgba(150,185,0,0.06) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(150,185,0,0.03) 0%, transparent 50%);
        }
        .provider-body {
            position: relative; z-index: 1;
            flex: 1; display: flex; align-items: center; justify-content: center;
            padding: 2rem 1rem;
        }
        .provider-container {
            width: 100%; max-width: 960px;
        }
        .form-group { margin-bottom: 1rem; }
        .step-counter {
            text-align: center;
            font-size: 0.72rem; color: rgba(26,26,26,0.25);
            font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
            margin-bottom: 1.5rem;
        }



/* Extracted from: views\site\explore_map_v2.php */
.leaflet-price-pin { transition: all 0.2s ease-in-out !important; }
    .w-40 { width: 40% !important; }
    .w-60 { width: 60% !important; }
    .hover-zoom { transition: transform 0.5s ease; }
    .hover-zoom:hover { transform: scale(1.08); }
    .flash-highlight { animation: flash-highlight-border 2.5s ease-in-out; }
    @keyframes flash-highlight-border {
        0%, 100% { border-color: rgba(0,0,0,0.08); box-shadow: none; transform: scale(1); }
        25%, 50% { border-color: #96b900; box-shadow: 0 5px 20px rgba(150, 185, 0, 0.25); transform: scale(1.02); background-color: rgba(150, 185, 0, 0.03); }
    }
    
    @media (min-width: 992px) {
        /* El contenedor es el sticky boundary: cuando se acaba, el mapa se detiene */
        .explore-split-container {
            min-height: calc(100vh - 80px);
            position: relative; /* referencia para el sticky */
        }
        /* La columna de resultados ocupa el 50% izquierdo */
        .explore-results-col {
            width: 50%;
            height: auto;
        }
        /* Sticky: se queda visible mientras scrolleas y se detiene antes del footer */
        .explore-map-col {
            position: sticky;
            align-self: flex-start;  /* CLAVE: sin esto el sticky no funciona en flex */
            margin-left: auto;       /* empuja al 50% derecho */
            margin-bottom: 24px;     /* espacio entre el mapa y el footer */
            width: calc(50% - 12px);
            z-index: 5;
            /* top lo inyecta Alpine según el estado del panel de búsqueda */
        }
        .explore-map-card {
            /* Altura explícita para que el mapa parezca el panel fijo de antes */
            height: calc(100vh - 315px) !important;
            border-radius: 18px !important;
            border: 1px solid rgba(0,0,0,0.08) !important;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09) !important;
            overflow: hidden;
        }
    }
    @media (max-width: 991.98px) {
        .explore-map-card {
            height: 380px !important;
            border-radius: 16px !important;
        }
    }


/* Extracted from: views\site\product-details-v2.php */
    .flatpickr-wrapper { width: 100% !important; display: block !important; }
    
    /* Luxury Bento Grid for Images */
    
    /* Interactive reservation float card */
    
    
    .custom-leaflet-icon {
        background: transparent !important;
        border: none !important;
    }
    
    /* Luxury rate chips and inputs */


    
    @media (max-width: 991.98px) {
    }
    
    /* Dedicated Luxury Lightbox Modal Styles */
    


/* Extracted from: views\site\provider-register-v2.php */
.w-step { display: none; }
    .w-step.active { display: block; }
    .w-progress {
        display: flex; align-items: center; justify-content: center;
        gap: 0.5rem; margin-bottom: 2.5rem;
    }
    .w-dot {
        width: 10px; height: 10px; border-radius: 50%;
        background: #e0e0e0; transition: all 0.3s ease;
    }
    .w-dot.active { background: #96b900; transform: scale(1.3); }
    .w-dot.done { background: #96b900; opacity: 0.5; }
    .w-line {
        width: 40px; height: 2px; background: #e0e0e0; transition: background 0.3s;
    }
    .w-line.done { background: #96b900; }
    .w-card {
        background: #fff; border-radius: 1rem; padding: 2.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid rgba(26,26,26,0.06);
    }
    .w-title {
        font-family: 'Playfair Display', serif;
        font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem;
        text-align: center;
    }
    .w-sub {
        text-align: center; color: rgba(0,0,0,0.4); font-size: 0.9rem;
        margin-bottom: 2rem;
    }
    .type-card {
        border: 2px solid rgba(0,0,0,0.06); border-radius: 16px;
        padding: 1.5rem; cursor: pointer; transition: all 0.3s ease;
        text-align: center; background: #fff;
    }
    .type-card:hover { border-color: rgba(150,185,0,0.3); transform: translateY(-2px); }
    .type-card.selected { border-color: #96b900; background: rgba(150,185,0,0.04); box-shadow: 0 4px 16px rgba(150,185,0,0.12); }
    .type-card .icon { font-size: 2rem; color: #96b900; margin-bottom: 1rem; }
    .type-card h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.3rem; }
    .type-card p { font-size: 0.8rem; color: rgba(0,0,0,0.4); }
    .w-input {
        width: 100%; padding: 0.9rem 1.2rem; border: 1.5px solid rgba(0,0,0,0.08);
        border-radius: 12px; font-size: 0.95rem; font-family: 'Outfit', sans-serif;
        transition: border-color 0.2s; background: #fff;
    }
    .w-input:focus { outline: none; border-color: #96b900; box-shadow: 0 0 0 3px rgba(150,185,0,0.08); }
    .w-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: rgba(0,0,0,0.6); }
    .w-btn {
        padding: 0.9rem 2rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem;
        border: none; cursor: pointer; transition: all 0.3s ease;
        font-family: 'Outfit', sans-serif;
    }
    .w-btn-primary { background: #96b900; color: #fff; }
    .w-btn-primary:hover { background: #85a400; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(150,185,0,0.2); }
    .w-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
    .w-btn-outline { background: transparent; color: rgba(26,26,26,0.4); border: 1.5px solid rgba(26,26,26,0.08); }
    .w-btn-outline:hover { border-color: rgba(26,26,26,0.2); color: #1a1a1a; }
    .steps-preview {
        display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
        margin-top: 1.5rem;
    }
    .steps-preview .badge {
        padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.7rem;
        background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.4);
        display: flex; align-items: center; gap: 0.4rem; font-weight: 500;
    }
    .steps-preview .badge i { font-size: 0.65rem; }
        .form-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
        .form-grid .grid-col { flex: 1 1 30%; min-width: 200px; }
        .confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 999; }
    @keyframes confetti-fall {
        0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
        100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }
    .confetti-piece {
        position: absolute; width: 8px; height: 8px; border-radius: 2px;
        animation: confetti-fall 3s ease-in forwards;
    }
    .pending-card {
        text-align: center; padding: 3rem 2rem;
    }
    .pending-card .icon { font-size: 3.5rem; color: #f5a623; margin-bottom: 1.5rem; }
    .pending-card h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 0.8rem; }
    .pending-card p { color: rgba(0,0,0,0.4); font-size: 0.9rem; max-width: 400px; margin: 0 auto 1.5rem; }
    .denied-card { text-align: center; padding: 3rem 2rem; }
    .denied-card .icon { font-size: 3.5rem; color: #dc3545; margin-bottom: 1.5rem; }


/* Extracted from: modules\admin\views\historial-de-acceso\users_v2.php */


/* Extracted from: modules\admin\views\provider\commissions_v2.php */
    .nav-tabs .nav-link {
        border-radius: 12px !important;
        border: 1px solid #e2e8f0;
        color: #1a1a1a;
        font-weight: 600;
        background-color: #fff;
        transition: all 0.3s ease;
        margin-right: 8px;
        margin-bottom: 8px;
        padding: 0.6rem 1.25rem;
    }
    .nav-tabs .nav-link.active {
        background-color: #96b900 !important;
        border-color: #96b900 !important;
        color: #fff !important;
    }
        .nav-tabs .nav-link:hover:not(.active) {
            background-color: #f8fafc;
            border-color: #cbd5e1;
        }
    @media (max-width:576px) {
        .nav-tabs { display: flex; flex-wrap: nowrap; background-color: #f1f5f9; padding: 6px; border-radius: 14px; border-bottom: none; gap: 6px; }
        .nav-tabs .nav-item { flex: 1; margin: 0 !important; }
        .nav-tabs .nav-link { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 !important; padding: 0.65rem 0.5rem; font-size: 0.75rem; border: none !important; border-radius: 10px !important; background: transparent; color: #64748b; font-weight: 600; }
        .nav-tabs .nav-link i { margin-right: 0.25rem; }
        .nav-tabs .nav-link.active { background-color: #96b900 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(150,185,0,0.2); }
    }


/* Extracted from: modules\admin\views\provider\manage_services_v2.php */
.service-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 20px;
    background: #d1d5db;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease;
    flex-shrink: 0;
    margin: 0;
    outline: none;
    border: none;
}
.service-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.service-toggle:checked {
    background: #96b900;
}
.service-toggle:checked::after {
    transform: translateX(16px);
}
.service-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(150,185,0,0.3);
}


/* Extracted from: modules\admin\views\taxes\index_v2.php */


/* Extracted from: modules\admin\views\taxes\update_v2.php */


/* Extracted from: modules\bookings\views\calendar\client_v2.php */
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .cal-header-cell {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(0,0,0,0.35);
    padding: 0.5rem 0;
  }
  .cal-day {
    position: relative;
    min-height: 72px;
    background: #fff;
    border-radius: 10px;
    padding: 0.35rem 0.45rem;
    cursor: default;
    transition: all 0.12s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
  }
  .cal-day:hover { border-color: rgba(150,185,0,0.25); }
  .cal-day.other-month { background: rgba(0,0,0,0.02); }
  .cal-day.today { border-color: rgba(150,185,0,0.4); background: rgba(150,185,0,0.04); }
  .cal-day.selected { border-color: #96b900; background: rgba(150,185,0,0.08); }
  .cal-day.past { opacity: 0.45; }
  .cal-day.has-bookings { cursor: pointer; }
  .cal-day .day-num {
    font-size: 0.82rem; font-weight: 600;
    color: rgba(0,0,0,0.55);
    margin-bottom: 0.2rem;
  }
  .cal-day.other-month .day-num { color: rgba(0,0,0,0.18); }
  .cal-day.today .day-num { color: #96b900; }
  .cal-dot {
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block;
  }
  .cal-day .booked-indicators {
    display: flex; flex-wrap: wrap; gap: 2px;
    margin-top: auto;
  }
  .cal-day .booked-indicators .cal-dot { flex: 0 0 7px; }

  /* Week cells */
  .cal-week-cell {
    display: flex; align-items: flex-start; gap: 0.35rem;
    padding: 0.5rem 0.65rem;
    min-height: 56px;
    cursor: default;
    transition: all 0.12s ease;
    border-radius: 10px;
    background: #fff;
    border: 2px solid transparent;
  }
  .cal-week-cell:hover { border-color: rgba(150,185,0,0.2); }
  .cal-week-cell.today { border-color: rgba(150,185,0,0.35); background: rgba(150,185,0,0.04); }
  .cal-week-cell .day-num { font-size: 0.82rem; font-weight: 700; min-width: 24px; color: rgba(0,0,0,0.5); }
  .cal-week-cell.today .day-num { color: #96b900; }
  .cal-week-cell .booking-chip {
    font-size: 0.7rem; padding: 0.15rem 0.45rem;
    border-radius: 6px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 120px;
  }

  /* Day view */
  .cal-day-list .day-booking-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.15s ease;
  }
  .cal-day-list .day-booking-card:hover {
    border-color: rgba(150,185,0,0.2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  }

  /* Detail panel */
  .cal-detail-panel {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
  }
  .cal-detail-panel .detail-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .cal-detail-panel .detail-item:last-child { border-bottom: none; }
  .cal-detail-panel .detail-label { font-size: 0.78rem; color: rgba(0,0,0,0.45); font-weight: 500; }
  .cal-detail-panel .detail-value { font-size: 0.88rem; font-weight: 600; }
  .cal-action-btn {
    padding: 0.4rem 0.9rem; border-radius: 8px;
    font-size: 0.78rem; font-weight: 600;
    text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem;
    transition: all 0.15s ease;
  }

  .status-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.65rem; border-radius: 20px;
    font-size: 0.75rem; font-weight: 600;
  }
  .status-badge.active, .status-badge.1 { background: rgba(150,185,0,0.12); color: #6a8800; }
  .status-badge.completed, .status-badge.2 { background: rgba(40,167,69,0.12); color: #1a7a30; }
  .status-badge.cancelled, .status-badge.6 { background: rgba(220,53,69,0.1); color: #b02a37; }
  .status-badge.pending, .status-badge.3, .status-badge.4 { background: rgba(255,193,7,0.15); color: #856404; }
  .status-badge.5 { background: rgba(23,162,184,0.12); color: #117a8b; }
  .status-badge.7 { background: rgba(108,117,125,0.12); color: #5a6268; }
  @media (max-width: 768px) {
    .cal-day { min-height: 56px; padding: 0.25rem; }
    .cal-day .day-num { font-size: 0.72rem; }
    .cal-week-cell .booking-chip { max-width: 80px; font-size: 0.65rem; }
  }


/* Extracted from: modules\bookings\views\calendar\index_v2.php */
.calendar-grid-v2 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        .day-card-v2 { border: 1px solid #e2e8f0; border-radius: 8px; min-height: 80px; padding: 4px; cursor: pointer; transition: all 0.15s; background: #fff; position:relative; overflow:hidden; }
        .day-card-v2:hover { border-color: #96b900; box-shadow: 0 2px 8px rgba(150,185,0,0.15); }
        .day-card-v2.in-range { background: #f0f9e6; border-color: #96b900; }
        .day-card-v2.range-edge { background: #96b900; color: #fff; }
        .day-card-v2.start-selected { background: #7aa000; color: #fff; box-shadow: 0 0 0 2px #5c7800; }
        .day-card-v2.day-disabled { opacity: 0.35; cursor: not-allowed; }
        .day-card-v2.day-past-booked { opacity: 0.75; cursor: pointer; }
        .day-card-v2.day-past-booked:hover { opacity: 1; }
        .day-card-v2.day-no-selection { opacity: 0.5; }
        .day-card-v2.day-selected-hourly { background: #f0f9e6; border-color: #96b900; box-shadow: 0 0 0 2px #96b900; }
        .day-card-v2.day-booked { border-top: 4px solid transparent; }
        .color-tags { position:absolute; top:0; left:0; right:0; height:4px; display:flex; z-index:1; }
        .color-tags span { height:100%; flex:1; min-width:4px; }
        .search-results-dropdown-v2 { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; max-height: 280px; overflow-y: auto; margin-top: 4px; }
        .search-item-v2 { cursor: pointer; border-radius: 8px; transition: background 0.15s; padding: 8px 12px; }
        .search-item-v2:hover { background: #f8fafc; }
        .resource-chip { display: inline-flex; align-items: center; border-radius: 20px; padding: 4px 10px 4px 4px; margin: 3px; font-size: 12px; font-weight: 600; cursor: default; }
        .resource-chip .remove-btn { margin-left: 6px; cursor: pointer; opacity: 0.6; font-size: 14px; line-height: 1; }
        .resource-chip .remove-btn:hover { opacity: 1; }
        .booking-picker-item { cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background 0.15s; display: flex; align-items: center; gap: 8px; }
        .booking-picker-item:hover { background: #f0f4ff; }
        .summary-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 9998; transition: opacity 0.3s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
        .summary-backdrop.open { opacity: 1; pointer-events: auto; }
        .summary-backdrop.closed { opacity: 0; pointer-events: none; }
        .summary-slider { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999; width: 380px; background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.15); overflow-y: auto; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); padding: 1.25rem; }
        .summary-slider.open { transform: translateX(0); }
        .summary-slider.closed { transform: translateX(100%); }
        .color-strip { width: 4px; border-radius: 2px; flex-shrink: 0; }
        .summary-item { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
        .summary-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: 8px; }
        .day-count-badge { position:absolute; bottom:4px; right:4px; font-size:9px; font-weight:700; color:#6c757d; background:rgba(255,255,255,0.9); border-radius:4px; padding:0 4px; }
        .day-client-names { font-size:7px; line-height:1.2; color:#4a5568; margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
        .booking-list-item { display:flex; align-items:center; padding:10px 8px; border-radius:10px; cursor:pointer; transition:background 0.15s; gap:10px; border:1px solid #f0f0f0; margin-bottom:6px; }
        .booking-list-item:hover { background:#f8faff; border-color:#d0d8e8; }
        .booking-list-item .color-bar { width:4px; border-radius:2px; align-self:stretch; flex-shrink:0; }
        .booking-list-item .info { flex:1; min-width:0; }
        .booking-list-item .info .name { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .booking-list-item .info .meta { font-size:10px; color:#6c757d; margin-top:1px; }
        .booking-list-item .info .profit { font-size:12px; font-weight:700; color:#28a745; margin-top:2px; }
        .booking-list-item .arrow { color:#adb5bd; font-size:12px; flex-shrink:0; }
        .booking-day-header { display:flex; align-items:center; gap:8px; padding-bottom:10px; margin-bottom:12px; border-bottom:2px solid #e2e8f0; }
        .booking-day-header .back-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid #e2e8f0; cursor:pointer; transition:all 0.15s; }
        .booking-day-header .back-btn:hover { background:#f0f0f0; border-color:#ccc; }
        .booking-day-header .day-title { font-weight:700; font-size:14px; flex:1; text-transform:capitalize; }
        .booking-list-scroll { max-height:calc(100vh - 260px); overflow-y:auto; }

/* Calendar V2 - utility classes (replacing inline styles in index_v2.php) */
.cal-card { border: none; border-radius: 12px; }
.cal-letter-space { letter-spacing: 0.5px; }
.cal-label-sm { font-size:10px; letter-spacing: 0.5px; }
.cal-thumb { width:36px; height:36px; object-fit:cover; border-radius:6px; border:1px solid #eee; }
.cal-thumb-lg { width:50px; height:50px; object-fit:cover; }
.cal-text-13 { font-size:13px; }
.cal-text-13-strike { font-size:13px; text-decoration:line-through; }
.cal-text-12 { font-size:12px; }
.cal-text-11 { font-size:11px; }
.cal-text-10 { font-size:10px; }
.cal-text-9 { font-size:9px; }
.cal-text-8 { font-size:8px; }
.cal-dot-10 { width:10px; height:10px; display:inline-block; border-radius:50%; flex-shrink:0; }
.cal-dot-8 { width:8px; height:8px; display:inline-block; border-radius:50%; flex-shrink:0; }
.cal-dot-12 { width:12px; height:12px; border-radius:50%; flex-shrink:0; display:inline-block; }
.cal-gap-8 { gap:8px; }
.cal-min-zero { min-width:0; flex:1; }
.cal-flex-1 { min-width:0; flex:1; }
.cal-bg-muted { background:#f8fafc; border:1px solid #e2e8f0; }
.cal-bg-warning { background:#fff3cd; border:1px solid #ffc107; }
.cal-bg-hourly { background:#fff9db; border:1px dashed #fab005; }
.cal-bg-success-light { background:#f0f9e6; border:1px solid #96b900; }
.cal-scroll-y { max-height:320px; overflow-y:auto; }
.cal-btn-green-sm { background:#96b900; color:#fff; border-radius:6px; font-size:9px; font-weight:600; border:none; }
.cal-btn-green-sm:hover { background:#7fa000; color:#fff; }
.cal-btn-green { background:#96b900; color:#fff; border-radius:12px; font-weight:600; border:none; }
.cal-btn-green:hover { background:#7fa000; color:#fff; }
.cal-btn-green-full { background:#96b900; border-color:#96b900; color:#fff; }
.cal-btn-green-full:hover { background:#7fa000; border-color:#7fa000; color:#fff; }
.cal-btn-green-tiny { background:#96b900; color:#fff; font-size:10px; white-space:nowrap; border:none; }
.cal-btn-green-tiny:hover { background:#7fa000; color:#fff; }
.cal-dot-gray { background:#adb5bd; }
.cal-opacity-60 { opacity:0.6; }
.cal-opacity-70 { opacity:0.7; }
.cal-border-e2e { border-color:#e2e8f0; }
.cal-disabled { opacity:0.5; pointer-events:none; transition:all 0.3s; }
.cal-disabled + * { transition:all 0.3s; }
.cal-summary-panel { width:300px; border-radius:12px; border:1px solid #e2e8f0; }
.cal-arrow-icon { font-size:12px; }
.cal-bar-detail { width:6px; height:50px; border-radius:3px; flex-shrink:0; }
.cal-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.cal-text-muted-9 { font-size:9px; color:#6c757d; }
.cal-text-muted-10 { font-size:10px; color:#6c757d; }
.cal-label-upper { font-size:9px; letter-spacing:0.5px; text-transform:uppercase; font-weight:bold; }
.cal-label-upper-sm { font-size:9px; letter-spacing:0.5px; }
.cal-slider-panel { width:300px; border-radius:12px; border:1px solid #e2e8f0; }

/* Fix: color-tags should not overlap with day-card-v2 border-top status */
.day-card-v2 .color-tags { z-index:0; }
.day-card-v2 .day-header { position:relative; z-index:1; }
.day-card-v2 .day-client-names { position:relative; z-index:1; }
.day-card-v2 .day-count-badge { position:absolute; bottom:4px; right:4px; z-index:1; }


/* Extracted from: modules\bookings\views\client\index_v2.php */
    .client-dash {
        max-width: 1200px; margin: 0 auto;
        padding: 1.5rem 1.5rem 3rem;
    }
    .stat-card {
        background: var(--card-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius);
        padding: 1.25rem 1.5rem;
        box-shadow: var(--shadow-card);
        transition: all 0.2s ease;
    }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
    .stat-icon {
        width: 44px; height: 44px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
    }
    .offers-track {
        display: flex; gap: 1rem;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .offer-card {
        flex: 0 0 calc(33.333% - 0.75rem);
        min-width: 280px;
        background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
        border-radius: var(--radius);
        padding: 1.5rem;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.08);
        position: relative;
        overflow: hidden;
        cursor: default;
    }
    .offer-card::before {
        content: '';
        position: absolute; top: -50%; right: -50%;
        width: 100%; height: 100%;
        background: radial-gradient(circle at 70% 30%, rgba(150,185,0,0.15) 0%, transparent 60%);
        pointer-events: none;
    }
    .offer-card .offer-badge {
        display: inline-block;
        background: var(--brand);
        color: #000; font-weight: 700;
        padding: 0.2rem 0.75rem;
        border-radius: 20px;
        font-size: 0.78rem;
    }
    .offer-card .offer-value {
        font-size: 2rem; font-weight: 800;
        line-height: 1; margin: 0.5rem 0 0.25rem;
        color: var(--brand);
    }
    .offer-nav {
        display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem;
    }
    .offer-dot {
        width: 10px; height: 10px; border-radius: 50%;
        background: rgba(0,0,0,0.15);
        cursor: pointer; transition: all 0.2s ease;
        border: none;
    }
    .offer-dot.active { background: var(--brand); transform: scale(1.3); }
    .section-title {
        font-size: 1.1rem; font-weight: 700;
        display: flex; align-items: center; gap: 0.5rem;
    }
    .section-title i { color: var(--brand); }
    .status-confirmed { background:rgba(40,167,69,0.12);color:#28a745; }
    .status-pending { background:rgba(255,193,7,0.15);color:#b8860b; }
    .status-inprogress { background:rgba(52,152,219,0.12);color:#3498db; }
    .status-completed { background:rgba(40,167,69,0.15);color:#1e7e34; }
    .status-neutral { background:rgba(0,0,0,0.05);color:rgba(0,0,0,0.5); }
    .status-danger { background:rgba(220,53,69,0.12);color:#dc3545; }
    .status-warning { background:rgba(23,162,184,0.12);color:#17a2b8; }
    .res-card {
        background: var(--card-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
        transition: all 0.2s ease;
    }
    .res-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
    .res-card.pending-highlight {
        border-left: 4px solid #f39c12;
    }
    .res-card.completed-highlight {
        border-left: 4px solid #28a745;
    }
    .progress-track {
        height: 6px;
        background: rgba(0,0,0,0.06);
        border-radius: 3px;
        overflow: hidden;
    }
    .progress-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.6s ease;
    }
    .qr-expand {
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease;
    }
    .qr-expand.open {
        max-height: 300px;
        opacity: 1;
    }
    .qr-expand:not(.open) {
        max-height: 0;
        opacity: 0;
    }
    .confirm-code {
        font-family: 'Courier New', monospace;
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 6px;
        color: #1a1a1a;
        background: rgba(0,0,0,0.03);
        padding: 0.3rem 0.7rem;
        border-radius: 8px;
        display: inline-block;
    }
    @media (max-width: 768px) {
        .client-dash { padding: 1rem 0.75rem 2rem; }
        .offer-card { flex: 0 0 85%; }
    }


/* Extracted from: modules\bookings\views\client\view_v2.php */


    .view-v2 {
        max-width: 1100px; margin: 0 auto;
        padding: 1.5rem 1.5rem 3rem;
    }
    .qr-code-box {
        background: #fff;
        border: 2px dashed rgba(0,0,0,0.08);
        border-radius: 12px;
        padding: 1rem;
        text-align: center;
    }
    .qr-code-box img {
        width: 140px; height: 140px;
        image-rendering: pixelated;
    }
    .confirm-code {
        font-family: 'Courier New', monospace;
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: 6px;
        color: #1a1a1a;
        background: rgba(0,0,0,0.03);
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        display: inline-block;
    }
    .status-confirmed { background:rgba(40,167,69,0.12);color:#28a745; }
    .status-pending { background:rgba(255,193,7,0.15);color:#b8860b; }
    .status-neutral { background:rgba(0,0,0,0.05);color:rgba(0,0,0,0.5); }
    .status-danger { background:rgba(220,53,69,0.12);color:#dc3545; }
    .status-warning { background:rgba(23,162,184,0.12);color:#17a2b8; }
    @media (max-width: 768px) {
        .view-v2 { padding: 1rem 0.75rem 2rem; }
    }


/* Extracted from: modules\bookings\views\provider\index_v2.php */

    .tab-filter-v2 { border-radius: 10px; padding: 0.45rem 1rem; font-size: 0.875rem; font-weight: 500; border: 1px solid #e2e8f0; background: #fff; color: #475569; transition: all 0.15s; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
    .tab-filter-v2:hover { border-color: #96b900; color: #96b900; }
    .tab-filter-v2.active { background: #96b900; border-color: #96b900; color: #fff; }
    .tab-filter-v2 i { font-size: 0.8rem; }
    .booking-card {
        background: var(--card-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
        transition: all 0.2s ease;
    }
    .booking-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
    .booking-card.pending-border { border-left: 4px solid #f39c12; }
    .booking-card.active-border { border-left: 4px solid #28a745; }
    .booking-card.inprogress-border { border-left: 4px solid #3498db; }
    .booking-card.cancelled-border { border-left: 4px solid #dc3545; }
    .booking-card.completed-border { border-left: 4px solid #1a7a5c; }
    .booking-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
    .pill-status { display: inline-block; padding: 0.25em 0.75em; font-size: 0.72rem; font-weight: 600; border-radius: 50px; }
    .pill-status.pending { background:rgba(255,193,7,0.15);color:#b8860b; }
    .pill-status.active { background:rgba(40,167,69,0.12);color:#28a745; }
    .pill-status.inprogress { background:rgba(52,152,219,0.12);color:#3498db; }
    .pill-status.cancelled { background:rgba(220,53,69,0.12);color:#dc3545; }
    .pill-status.refunded { background:rgba(23,162,184,0.12);color:#17a2b8; }
    .pill-status.completed { background:rgba(26,122,92,0.12);color:#1a7a5c; }
    .pill-status.neutral { background:rgba(0,0,0,0.05);color:rgba(0,0,0,0.5); }
    .action-btn { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.4rem 0.9rem; font-size: 0.8rem; transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
    .action-btn:hover { background: #f1f5f9; border-color: #96b900; color: #96b900; }
    .action-btn.primary { background: #96b900; border-color: #96b900; color: #fff; }
    .action-btn.primary:hover { background: #7a9a00; border-color: #7a9a00; color: #fff; }
    .dropdown-filter { border-radius: 10px; border: 1px solid #e2e8f0; padding: 0.45rem 1rem; font-size: 0.875rem; }
    .confirm-code { font-family: 'Courier New', monospace; font-size: 1.2rem; font-weight: 800; letter-spacing: 4px; background: rgba(0,0,0,0.03); padding: 0.25rem 0.6rem; border-radius: 6px; display: inline-block; }
    .otp-input { width: 42px; height: 48px; font-size: 1.3rem; text-align: center; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; transition: border-color 0.2s; }
    .otp-input:focus { border-color: #96b900; box-shadow: 0 0 0 3px rgba(150,185,0,0.15); }
    .iniciar-panel { overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; }
    .iniciar-panel:not(.open) { max-height: 0 !important; opacity: 0; padding: 0 !important; margin: 0 !important; border: none !important; }
    .iniciar-panel.open { max-height: 500px; opacity: 1; }
    .scanner-region { width: 100%; max-width: 280px; margin: 0 auto; border-radius: 10px; overflow: hidden; }
    .scanner-region video { border-radius: 10px; }
    .scanner-region button { border-radius: 8px; }

    .metric-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; transition: transform 0.2s; }
    .metric-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
    .metric-value { font-size: 1.8rem; font-weight: 800; line-height: 1.2; }
    .metric-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #94a3b8; }
    .metric-sub { font-size: 0.7rem; color: #94a3b8; }
    .cancel-row { font-size: 0.85rem; border-bottom: 1px solid #f1f5f9; padding: 0.6rem 0; }
    .cancel-row:last-child { border-bottom: none; }


/* Extracted from: modules\events\views\admin\index_v2.php */
        @media (min-width: 1200px) { .col-xl-5th { flex: 0 0 20%; max-width: 20%; } }
        .page-link { border-radius: 8px !important; margin: 0 2px; color: #1a1a1a; border: 1px solid #e2e8f0; padding: 0.5rem 0.85rem; font-weight: 500; }
        .page-item.active .page-link { background-color: #96b900; border-color: #96b900; color: #fff; }
        .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }
        .gap-2 { gap: 0.5rem; }
        .gap-1 { gap: 0.25rem; }


/* Extracted from: modules\events\views\admin\update_v2.php */
        .pv-card-wrapper .offer-badge-detail { position:absolute; top:1rem; left:1rem; background:linear-gradient(135deg,#ff416c,#ff4b2b); color:#fff; padding:0.35rem 1rem; border-radius:50px; font-size:0.78rem; font-weight:700; letter-spacing:0.3px; box-shadow:0 4px 14px rgba(255,75,43,0.4); z-index:5; }


.pv-detail-wrapper .bento-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:220px 220px; gap:16px; }
                    .pv-detail-wrapper .bento-item-large { grid-row:span 2; border-radius:24px; overflow:hidden; position:relative; }
                    .pv-detail-wrapper .bento-item-small { border-radius:20px; overflow:hidden; position:relative; }
                    .pv-detail-wrapper .bento-img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
                    .pv-detail-wrapper .bento-item:hover .bento-img { transform:scale(1.05); }
                    .pv-detail-wrapper .feature-badge { background-color:rgba(150,185,0,.05); color:#7da000; font-weight:600; border-radius:50px; padding:6px 14px; font-size:.8rem; }
                    .pv-detail-wrapper .sticky-reserve-card { border-radius:20px; box-shadow:0 16px 40px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.05); background:#fff; padding:20px 20px 16px; transition:all .3s ease; }
                    .pv-detail-wrapper .sticky-reserve-card:hover { box-shadow:0 24px 48px rgba(0,0,0,.09); }
                    .pv-detail-wrapper .offer-badge-detail { position:absolute; bottom:15px; right:15px; background:#e74c3c; color:#fff; padding:6px 14px; border-radius:50px; font-size:.85rem; font-weight:800; box-shadow:0 4px 12px rgba(231,76,60,.4); z-index:3; line-height:1; }
                    .pv-detail-wrapper .lux-chip { padding:5px 12px; border-radius:50px; font-size:.8rem; font-weight:500; cursor:pointer; border:1px solid rgba(0,0,0,.08); background:#fff; color:#4a5568; transition:all .25s ease; }
                    .pv-detail-wrapper .lux-chip:hover { border-color:#96b900; color:#96b900; }
                    .pv-detail-wrapper .lux-chip.active { background:#96b900; color:#fff; border-color:#96b900; font-weight:600; box-shadow:0 4px 15px rgba(150,185,0,.25); }
                    @media (max-width:991.98px) { .pv-detail-wrapper .bento-grid { grid-template-columns:1fr; grid-template-rows:300px 150px 150px; } .pv-detail-wrapper .bento-item-large { grid-row:span 1; } }
                    .pv-detail-wrapper .text-dark-charcoal { color:#1a1a1a!important; }
                    .pv-detail-wrapper .bg-luxury-gold { background-color:#96b900!important; }
                    .pv-detail-wrapper .text-luxury-gold { color:#96b900!important; }
                    .pv-detail-wrapper .tracking-wider { letter-spacing:0.05em!important; }


/* Extracted from: modules\market\views\admin\manage_marketplace_v2.php */


/* Extracted from: modules\offers\views\global\index_v2.php */


/* Extracted from: modules\rentals\views\admin\index_v2.php */
        @media (min-width: 1200px) { .col-xl-5th { flex: 0 0 20%; max-width: 20%; } }


/* Extracted from: modules\rentals\views\admin\update_v2.php */
        .pv-card-wrapper .offer-badge-detail { position:absolute; top:1rem; left:1rem; background:linear-gradient(135deg,#ff416c,#ff4b2b); color:#fff; padding:0.35rem 1rem; border-radius:50px; font-size:0.78rem; font-weight:700; letter-spacing:0.3px; box-shadow:0 4px 14px rgba(255,75,43,0.4); z-index:5; }


.pv-detail-wrapper .bento-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:220px 220px; gap:16px; }
                    .pv-detail-wrapper .bento-item-large { grid-row:span 2; border-radius:24px; overflow:hidden; position:relative; }
                    .pv-detail-wrapper .bento-item-small { border-radius:20px; overflow:hidden; position:relative; }
                    .pv-detail-wrapper .bento-img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
                    .pv-detail-wrapper .bento-item:hover .bento-img { transform:scale(1.05); }
                    .pv-detail-wrapper .feature-badge { background-color:rgba(150,185,0,.05); color:#7da000; font-weight:600; border-radius:50px; padding:6px 14px; font-size:.8rem; }
                    .pv-detail-wrapper .sticky-reserve-card { border-radius:20px; box-shadow:0 16px 40px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.05); background:#fff; padding:20px 20px 16px; transition:all .3s ease; }
                    .pv-detail-wrapper .sticky-reserve-card:hover { box-shadow:0 24px 48px rgba(0,0,0,.09); }
                    .pv-detail-wrapper .offer-badge-detail { position:absolute; bottom:15px; right:15px; background:#e74c3c; color:#fff; padding:6px 14px; border-radius:50px; font-size:.85rem; font-weight:800; box-shadow:0 4px 12px rgba(231,76,60,.4); z-index:3; line-height:1; }
                    .pv-detail-wrapper .lux-chip { padding:5px 12px; border-radius:50px; font-size:.8rem; font-weight:500; cursor:pointer; border:1px solid rgba(0,0,0,.08); background:#fff; color:#4a5568; transition:all .25s ease; }
                    .pv-detail-wrapper .lux-chip:hover { border-color:#96b900; color:#96b900; }
                    .pv-detail-wrapper .lux-chip.active { background:#96b900; color:#fff; border-color:#96b900; font-weight:600; box-shadow:0 4px 15px rgba(150,185,0,.25); }
                    @media (max-width:991.98px) { .pv-detail-wrapper .bento-grid { grid-template-columns:1fr; grid-template-rows:300px 150px 150px; } .pv-detail-wrapper .bento-item-large { grid-row:span 1; } }
                    .pv-detail-wrapper .text-dark-charcoal { color:#1a1a1a!important; }
                    .pv-detail-wrapper .bg-luxury-gold { background-color:#96b900!important; }
                    .pv-detail-wrapper .text-luxury-gold { color:#96b900!important; }
                    .pv-detail-wrapper .tracking-wider { letter-spacing:0.05em!important; }


/* Extracted from: modules\services\views\admin\index_v2.php */
        @media (min-width: 1200px) { .col-xl-5th { flex: 0 0 20%; max-width: 20%; } }


/* Extracted from: modules\services\views\admin\update_v2.php */
        .pv-card-wrapper .offer-badge-detail { position:absolute; top:1rem; left:1rem; background:linear-gradient(135deg,#ff416c,#ff4b2b); color:#fff; padding:0.35rem 1rem; border-radius:50px; font-size:0.78rem; font-weight:700; letter-spacing:0.3px; box-shadow:0 4px 14px rgba(255,75,43,0.4); z-index:5; }


.pv-detail-wrapper .bento-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:220px 220px; gap:16px; }
                    .pv-detail-wrapper .bento-item-large { grid-row:span 2; border-radius:24px; overflow:hidden; position:relative; }
                    .pv-detail-wrapper .bento-item-small { border-radius:20px; overflow:hidden; position:relative; }
                    .pv-detail-wrapper .bento-img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
                    .pv-detail-wrapper .bento-item:hover .bento-img { transform:scale(1.05); }
                    .pv-detail-wrapper .feature-badge { background-color:rgba(150,185,0,.05); color:#7da000; font-weight:600; border-radius:50px; padding:6px 14px; font-size:.8rem; }
                    .pv-detail-wrapper .sticky-reserve-card { border-radius:20px; box-shadow:0 16px 40px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.05); background:#fff; padding:20px 20px 16px; transition:all .3s ease; }
                    .pv-detail-wrapper .sticky-reserve-card:hover { box-shadow:0 24px 48px rgba(0,0,0,.09); }
                    .pv-detail-wrapper .offer-badge-detail { position:absolute; bottom:15px; right:15px; background:#e74c3c; color:#fff; padding:6px 14px; border-radius:50px; font-size:.85rem; font-weight:800; box-shadow:0 4px 12px rgba(231,76,60,.4); z-index:3; line-height:1; }
                    .pv-detail-wrapper .lux-chip { padding:5px 12px; border-radius:50px; font-size:.8rem; font-weight:500; cursor:pointer; border:1px solid rgba(0,0,0,.08); background:#fff; color:#4a5568; transition:all .25s ease; }
                    .pv-detail-wrapper .lux-chip:hover { border-color:#96b900; color:#96b900; }
                    .pv-detail-wrapper .lux-chip.active { background:#96b900; color:#fff; border-color:#96b900; font-weight:600; box-shadow:0 4px 15px rgba(150,185,0,.25); }
                    @media (max-width:991.98px) { .pv-detail-wrapper .bento-grid { grid-template-columns:1fr; grid-template-rows:300px 150px 150px; } .pv-detail-wrapper .bento-item-large { grid-row:span 1; } }
                    .pv-detail-wrapper .text-dark-charcoal { color:#1a1a1a!important; }
                    .pv-detail-wrapper .bg-luxury-gold { background-color:#96b900!important; }
                    .pv-detail-wrapper .text-luxury-gold { color:#96b900!important; }
                    .pv-detail-wrapper .tracking-wider { letter-spacing:0.05em!important; }


/* Extracted from: modules\tarifas\views\admin\cards_v2.php */
.modern-credit-card {
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 24px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.modern-credit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.visa-gradient { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); }
.mastercard-gradient { background: linear-gradient(135deg, #f12711 0%, #f5af19 100%); }
.amex-gradient { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.discover-gradient { background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%); }
.default-gradient { background: linear-gradient(135deg, #434343 0%, #090909 100%); }
.card-default-status {
    position: absolute; top: 15px; right: 15px;
    background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 20px;
    font-size: 11px; font-weight: bold; backdrop-filter: blur(5px);
}
.m-card-number {
    font-size: 19px; letter-spacing: 2px; margin: 20px 0;
    font-family: monospace; display: flex; justify-content: space-between;
}
.m-card-footer { display: flex; justify-content: space-between; font-size: 11px; }
.m-card-footer small { display: block; opacity: 0.6; margin-bottom: 2px; text-transform: uppercase; }
.m-card-footer span { font-weight: bold; font-size: 13px; }
.m-card-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease; border-radius: 16px;
}
.modern-credit-card:hover .m-card-overlay { opacity: 1; }
.overlay-buttons { display: flex; gap: 15px; }
.btn-overlay {
    background: #fff; color: #333; border: none;
    width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; transition: transform 0.2s, background-color 0.2s;
}
.btn-overlay:hover { transform: scale(1.1); }
.btn-overlay-danger:hover { background: #ed5565; color: #fff; }
.add-card-wrapper {
    border: 2px dashed #e0e0e0; border-radius: 16px; height: 200px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 20px; cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}
.add-card-wrapper:hover { border-color: #1ab394; background-color: #fafafa; }
.add-icon-circle {
    width: 50px; height: 50px; border-radius: 50%;
    background: #f3f3f4; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px; font-size: 20px; color: #676a6c;
    transition: background 0.3s, color 0.3s;
}
.add-card-wrapper:hover .add-icon-circle { background: #1ab394; color: #fff; }
.brand-gradient {
    width: 45px; height: 28px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.stripe-input-container {
    background: #fdfdfd;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
    min-height: 38px;
}
.stripe-input-container:focus-within {
    border-color: #96b900;
    box-shadow: 0 0 0 3px rgba(150, 185, 0, 0.1);
    background-color: #ffffff;
}

/* Extracted from: modules\tarifas\views\admin\cards_v2.php (Tab 2) */
.stripe-account-icon { width:45px; height:45px; }
.stripe-account-id { font-size:13px; }
.provider-select-width { width:300px; }
.movements-search-input { width:200px; }
.movements-expand-col { width:40px; }


/* Extracted from: modules\taxis\views\admin\update_v2.php */
        .pv-card-wrapper .offer-badge-detail { position:absolute; top:1rem; left:1rem; background:linear-gradient(135deg,#ff416c,#ff4b2b); color:#fff; padding:0.35rem 1rem; border-radius:50px; font-size:0.78rem; font-weight:700; letter-spacing:0.3px; box-shadow:0 4px 14px rgba(255,75,43,0.4); z-index:5; }


.pv-detail-wrapper .bento-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:220px 220px; gap:16px; }
                    .pv-detail-wrapper .bento-item-large { grid-row:span 2; border-radius:24px; overflow:hidden; position:relative; }
                    .pv-detail-wrapper .bento-item-small { border-radius:20px; overflow:hidden; position:relative; }
                    .pv-detail-wrapper .bento-img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
                    .pv-detail-wrapper .bento-item:hover .bento-img { transform:scale(1.05); }
                    .pv-detail-wrapper .feature-badge { background-color:rgba(150,185,0,.05); color:#7da000; font-weight:600; border-radius:50px; padding:6px 14px; font-size:.8rem; }
                    .pv-detail-wrapper .sticky-reserve-card { border-radius:20px; box-shadow:0 16px 40px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.05); background:#fff; padding:20px 20px 16px; transition:all .3s ease; }
                    .pv-detail-wrapper .sticky-reserve-card:hover { box-shadow:0 24px 48px rgba(0,0,0,.09); }
                    .pv-detail-wrapper .offer-badge-detail { position:absolute; bottom:15px; right:15px; background:#e74c3c; color:#fff; padding:6px 14px; border-radius:50px; font-size:.85rem; font-weight:800; box-shadow:0 4px 12px rgba(231,76,60,.4); z-index:3; line-height:1; }
                    .pv-detail-wrapper .lux-chip { padding:5px 12px; border-radius:50px; font-size:.8rem; font-weight:500; cursor:pointer; border:1px solid rgba(0,0,0,.08); background:#fff; color:#4a5568; transition:all .25s ease; }
                    .pv-detail-wrapper .lux-chip:hover { border-color:#96b900; color:#96b900; }
                    .pv-detail-wrapper .lux-chip.active { background:#96b900; color:#fff; border-color:#96b900; font-weight:600; box-shadow:0 4px 15px rgba(150,185,0,.25); }
                    @media (max-width:991.98px) { .pv-detail-wrapper .bento-grid { grid-template-columns:1fr; grid-template-rows:300px 150px 150px; } .pv-detail-wrapper .bento-item-large { grid-row:span 1; } }
                    .pv-detail-wrapper .text-dark-charcoal { color:#1a1a1a!important; }
                    .pv-detail-wrapper .bg-luxury-gold { background-color:#96b900!important; }
                    .pv-detail-wrapper .text-luxury-gold { color:#96b900!important; }
                    .pv-detail-wrapper .tracking-wider { letter-spacing:0.05em!important; }


/* Extracted from registerCss: modules\activities\views\admin\index_v2.php */


/* Extracted from registerCss: modules\catalogs\views\admin\index_v2.php */


/* Extracted from registerCss: modules\support\views\support\index_v2.php */



/* Extracted from: views\site\product-details-v2.php */
.flatpickr-day.blocked { background:#e53e3e !important; color:#fff !important; border-radius:50%; border:none; text-decoration:line-through; }
.flatpickr-day.past-blocked { background:#e2e8f0 !important; color:#a0aec0 !important; cursor:not-allowed; }
.flatpickr-day.available { background:#2196F3 !important; color:#fff !important; border-radius:50%; }
.flatpickr-calendar { font-family:'Outfit',sans-serif !important; }
.flatpickr-day.today { border-color:#96b900 !important; }
.hour-slot-btn { border:1px solid #e2e8f0; border-radius:8px; padding:6px 12px; font-size:0.8rem; cursor:pointer; transition:all 0.15s; }
.hour-slot-btn.available { background:#2196F3; color:#fff; border-color:#2196F3; }
.hour-slot-btn.available:hover { background:#1976D2; }
.hour-slot-btn.blocked { background:#e53e3e; color:#fff; border-color:#e53e3e; cursor:not-allowed; opacity:0.7; }
.hour-slot-btn.selected { background:#38a169; color:#fff; border-color:#38a169; }
.hour-slot-btn.selected:hover { background:#2f855a; }


/* Extracted from: modules\activities\views\admin\view_v2.php */
    
    /* Stepper Styles */
    .stepper { display: flex; justify-content: space-between; position: relative; margin: 20px 0; }
    .stepper::before { content: ''; position: absolute; top: 25px; left: 0; right: 0; height: 4px; background-color: #e9ecef; z-index: 1; }
    .step-item { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; flex: 1; }
    .step-icon { width: 50px; height: 50px; border-radius: 50%; background-color: #fff; border: 4px solid #e9ecef; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; color: #adb5bd; transition: all 0.3s ease; }
    .step-label { margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: #6c757d; transition: all 0.3s ease; }
    .step-item.completed .step-icon { border-color: #96b900; background-color: #96b900; color: #fff; }
    .step-item.completed .step-label { color: #96b900; font-weight: 700; }
    .step-item.rejected .step-icon { border-color: #dc3545; background-color: #dc3545; color: #fff; }
    .step-item.rejected .step-label { color: #dc3545; font-weight: 700; }
    
    /* Responsive Stepper for Mobile */
    @media (max-width: 576px) {
        .stepper { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-left: 20px; }
        .stepper::before { left: 23px; top: 0; bottom: 0; width: 4px; height: auto; right: auto; }
        .step-item { flex-direction: row; align-items: center; gap: 15px; width: 100%; justify-content: flex-start; }
        .step-label { margin-top: 0; text-align: left; }
    }
    
    /* Luxury Buttons */
    
    

    
    
    /* Navigation tabs custom */
    .nav-tabs .nav-link { border-radius: 12px !important; border: 1px solid #e2e8f0; color: #1a1a1a; font-weight: 600; background-color: #fff; transition: all 0.3s ease; margin-right: 8px; margin-bottom: 8px; padding: 0.6rem 1.25rem; }
    .nav-tabs .nav-link.active { background-color: #96b900 !important; border-color: #96b900 !important; color: #fff !important; }
    .nav-tabs .nav-link:hover:not(.active) { background-color: #f8fafc; border-color: #cbd5e1; }

    /* Segmented Control Tabs for Mobile */
    @media (max-width: 576px) {
        .nav-tabs {
            display: flex;
            flex-wrap: nowrap;
            background-color: #f1f5f9;
            padding: 6px;
            border-radius: 14px;
            border-bottom: none;
            gap: 6px;
            margin-bottom: 1.5rem !important;
        }
        .nav-tabs .nav-item {
            flex: 1;
            margin: 0 !important;
        }
        .nav-tabs .nav-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin: 0 !important;
            padding: 0.65rem 0.5rem;
            font-size: 0.85rem;
            border: none !important;
            border-radius: 10px !important;
            text-align: center;
            white-space: nowrap;
            background: transparent;
            color: #64748b;
            font-weight: 600;
            transition: all 0.2s ease;
        }
        .nav-tabs .nav-link i {
            display: none !important;
        }
        .nav-tabs .nav-link.active {
            background-color: #96b900 !important;
            color: #ffffff !important;
            box-shadow: 0 4px 10px rgba(150, 185, 0, 0.2);
            border-color: transparent !important;
        }
        .nav-tabs .nav-link:hover:not(.active) {
            background-color: transparent;
            color: #64748b;
        }
    }

    /* Forms */
    .form-control-luxury { border-radius: 10px; border: 1px solid #e2e8f0; padding: 0.65rem 1rem; transition: border-color 0.2s; width: 100%; display: block; background-color: #fff; }
    .form-control-luxury:focus { border-color: #96b900; outline: none; box-shadow: 0 0 0 3px rgba(150, 185, 0, 0.15); }

    /* Transitions & helpers */
    .hover-shadow { transition: all 0.3s ease; }
    .hover-shadow:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.08); transform: translateY(-2px); }
    .cursor-grab { cursor: grab; }
    .cursor-grab:active { cursor: grabbing; }

    /* Kanban Board Styling */
    .kanban-board { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; }
    .kanban-board::-webkit-scrollbar { height: 8px; }
    .kanban-board::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
    .kanban-board::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    .kanban-board::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    .kanban-column { flex: 1; min-width: 280px; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 16px; padding: 1.25rem; transition: all 0.2s ease; display: flex; flex-direction: column; min-height: 450px; }
    .kanban-column.drag-over { background: #f1f5f9; border-color: #96b900; border-style: solid; }
    .kanban-column-title { font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; color: #1a1a1a; }
    .task-list { flex-grow: 1; display: flex; flex-direction: column; gap: 0.75rem; min-height: 250px; margin-top: 1rem; }
    .task-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
    .task-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08); border-color: #cbd5e1; }


/* Extracted from: modules\admin\views\user\admin_view_v2.php */
.luxury-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1054 }
    .luxury-modal { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1055;background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.15);max-width:600px;width:90%;max-height:85vh;overflow-y:auto;border:1px solid rgba(0,0,0,0.05) }
    
    
    
    
    .nav-tabs .nav-link { border-radius: 12px !important; border: 1px solid #e2e8f0; color: #1a1a1a; font-weight: 600; background-color: #fff; transition: all 0.3s ease; margin-right: 8px; margin-bottom: 8px; padding: 0.6rem 1.25rem; }
    .nav-tabs .nav-link.active { background-color: #96b900 !important; border-color: #96b900 !important; color: #fff !important; }
    .nav-tabs .nav-link:hover:not(.active) { background-color: #f8fafc; border-color: #cbd5e1; }
    
    @media (max-width: 576px) {
        .nav-tabs { display: flex; flex-wrap: nowrap; background-color: #f1f5f9; padding: 6px; border-radius: 14px; border-bottom: none; gap: 6px; margin-bottom: 1.5rem !important; }
        .nav-tabs .nav-item { flex: 1; margin: 0 !important; }
        .nav-tabs .nav-link { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 !important; padding: 0.65rem 0.5rem; font-size: 0.85rem; border: none !important; border-radius: 10px !important; text-align: center; white-space: nowrap; background: transparent; color: #64748b; font-weight: 600; transition: all 0.2s ease; }
        .nav-tabs .nav-link i { display: none !important; }
        .nav-tabs .nav-link.active { background-color: #96b900 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(150, 185, 0, 0.2); border-color: transparent !important; }
        .nav-tabs .nav-link:hover:not(.active) { background-color: transparent; color: #64748b; }
    }
    
    .form-control-luxury { border-radius: 10px; border: 1px solid #e2e8f0; padding: 0.65rem 1rem; transition: border-color 0.2s; width: 100%; display: block; background-color: #fff; }
    .form-control-luxury:focus { border-color: #96b900; outline: none; box-shadow: 0 0 0 3px rgba(150, 185, 0, 0.15); }
    
    .hover-shadow { transition:all 0.3s ease }
    .hover-shadow:hover { box-shadow:0 5px 15px rgba(0,0,0,0.08); transform:translateY(-2px) }


/* Extracted from: modules\admin\views\user\index_v2.php */
.modal-premium {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
    }
    .modal-backdrop-premium {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(8px);
        z-index: 1099;
    }
    .modal-content-premium {
        width: 100%;
        max-width: 500px;
        background: #ffffff;
        border: 1px solid rgba(26, 26, 26, 0.08);
        border-radius: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        padding: 2rem;
        z-index: 1100;
        position: relative;
    }
    .form-control-luxury {
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        padding: 0.65rem 1rem;
        transition: border-color 0.2s;
        width: 100%;
        display: block;
        background-color: #fff;
    }
    .form-control-luxury:focus {
        border-color: #96b900;
        outline: none;
        box-shadow: 0 0 0 3px rgba(150, 185, 0, 0.15);
    }


/* Extracted from: modules\bookings\views\admin\index_v2.php */
    .status-badge { display: inline-block; padding: 0.25em 0.65em; font-size: 0.72rem; font-weight: 600; border-radius: 50px; }



/* Auth Layout Variables (blank_v2.php) */
.blank-v2-body {
    --gb-brand-primary: #96b900;
    --gb-brand-primary-hover: #7a9600;
    --gb-brand-charcoal: #1a1a1a;
    --gb-brand-bg: #f3f3f4;
    --gb-brand-border: rgba(26,26,26,0.06);
    --glass-bg: rgba(255,255,255,0.85);
    font-family: 'Outfit', sans-serif;
    background: var(--gb-brand-bg);
    color: var(--gb-brand-charcoal);
    min-height: 100vh;
    margin: 0;
}
.blank-v2-body * { box-sizing: border-box; }



/* ========================================
   Friends Page - Modern Card UI
   ======================================== */
.friends-page {
    padding: 10px 0 40px;
}

.friends-header {
    background: linear-gradient(135deg, #1ab394 0%, #96b900 100%);
    border-radius: 16px;
    padding: 40px 36px;
    color: #fff;
    box-shadow: 0 8px 30px rgba(26, 179, 148, 0.3);
}

.friends-header h2 {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 1.8rem;
    color: #fff;
}

.friends-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* Tabs */
.friends-tabs {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.friends-tabs li {
    flex: 1;
    text-align: center;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
    color: #676a6c;
    border-bottom: 3px solid transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.friends-tabs li:hover {
    background: #f8f9fa;
    color: #1ab394;
}

.friends-tabs li.active {
    color: #1ab394;
    border-bottom-color: #1ab394;
    font-weight: 600;
}

.friends-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 6px;
    color: #fff;
}

.friends-badge.warning {
    background: #f0ad4e;
}

.friends-badge.primary {
    background: #1ab394;
}

.friends-badge.danger {
    background: #d9534f;
}

/* Search box */
.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    padding: 4px 4px 4px 20px;
    margin-bottom: 24px;
}

.search-box-icon {
    color: #b4bcc2;
    font-size: 1.1rem;
    margin-right: 12px;
}

.search-box-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 14px 0;
    background: transparent;
}

.search-box-btn {
    background: #1ab394;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.search-box-btn:hover {
    background: #17a086;
    transform: scale(1.05);
}

.search-box-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e8eaed;
    border-top-color: #1ab394;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: #d5d8dc;
}

.empty-state h5 {
    font-size: 1.2rem;
    margin: 0 0 6px;
    color: #555;
}

.empty-state p {
    margin: 0;
    font-size: 0.95rem;
}

/* User card (list item) */
.user-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.user-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.user-card.blocked {
    opacity: 0.65;
    background: #fafafa;
}

.user-card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #f0f0f0;
}

.user-card-body {
    flex: 1;
    min-width: 0;
}

.user-card-body strong {
    display: block;
    font-size: 1rem;
    color: #2d3436;
}

.user-card-body small {
    display: block;
    font-size: 0.82rem;
    color: #888;
    margin-top: 2px;
}

.user-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

/* Buttons */
.btn-add-friend {
    background: #1ab394;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

.btn-add-friend:hover {
    background: #17a086;
    transform: translateY(-1px);
}

.btn-accept, .btn-decline, .btn-cancel, .btn-unblock {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-accept {
    background: #e8f5e9;
    color: #2e7d32;
}

.btn-accept:hover {
    background: #c8e6c9;
    transform: translateY(-1px);
}

.btn-decline {
    background: #ffebee;
    color: #c62828;
}

.btn-decline:hover {
    background: #ffcdd2;
    transform: translateY(-1px);
}

.btn-cancel {
    background: #fff8e1;
    color: #f57f17;
}

.btn-cancel:hover {
    background: #ffecb3;
    transform: translateY(-1px);
}

.btn-unblock {
    background: #e8f5e9;
    color: #2e7d32;
}

.btn-unblock:hover {
    background: #c8e6c9;
    transform: translateY(-1px);
}

/* Section titles */
.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #444;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.section-title i {
    color: #1ab394;
    margin-right: 8px;
}

/* Friends grid (card grid view) */
.friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.friend-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.25s;
}

.friend-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}

.friend-card-cover {
    background: linear-gradient(135deg, #e0f7f4 0%, #f1f8e9 100%);
    padding: 28px 20px 16px;
    text-align: center;
}

.friend-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.friend-card-body {
    padding: 8px 20px;
    text-align: center;
}

.friend-card-body strong {
    display: block;
    font-size: 1rem;
    color: #2d3436;
}

.friend-card-body small {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
}

.friend-card-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #f5f5f5;
}

.btn-sm-outline-danger, .btn-sm-outline-secondary {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-sm-outline-danger:hover {
    border-color: #d9534f;
    color: #d9534f;
    background: #fff5f5;
}

.btn-sm-outline-secondary:hover {
    border-color: #888;
    color: #555;
    background: #f8f8f8;
}

/* Badge overrides for inline badges in friends */
.badge {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
}

.badge-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-warning {
    background: #fff8e1;
    color: #f57f17;
}

.badge-secondary {
    background: #f5f5f5;
    color: #888;
}

/* ========================================
   Chat UI
   ======================================== */
.chat-layout {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    height: calc(100vh - 160px);
    min-height: 500px;
}

.chat-sidebar {
    width: 340px;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    background: #fafbfc;
}

.chat-sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-sidebar-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.chat-search {
    padding: 10px 14px;
}

.chat-search input {
    width: 100%;
    border: none;
    background: #f0f2f5;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.9rem;
    outline: none;
}

.chat-search input:focus {
    background: #e8eaed;
}

.chat-list {
    flex: 1;
    overflow-y: auto;
}

.chat-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 1px solid #f5f5f5;
}

.chat-list-item:hover {
    background: #f0f7f5;
}

.chat-list-item.active {
    background: #e8f5e9;
    border-left: 3px solid #1ab394;
}

.chat-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    position: relative;
}

.chat-list-body {
    flex: 1;
    min-width: 0;
}

.chat-list-body strong {
    display: block;
    font-size: 0.92rem;
    color: #2d3436;
}

.chat-list-body small {
    display: block;
    font-size: 0.78rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-list-time {
    font-size: 0.7rem;
    color: #aaa;
    flex-shrink: 0;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.chat-main-header {
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
}

.chat-main-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-main-info h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.chat-main-info small {
    font-size: 0.78rem;
    color: #888;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f8f9fb;
}

.chat-message {
    max-width: 75%;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.45;
    position: relative;
    word-wrap: break-word;
}

.chat-message.sent {
    align-self: flex-end;
    background: #1ab394;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-message.received {
    align-self: flex-start;
    background: #fff;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.chat-message-time {
    font-size: 0.65rem;
    margin-top: 4px;
    opacity: 0.7;
    text-align: right;
}

.chat-message.sent .chat-message-time {
    color: rgba(255,255,255,0.8);
}

.chat-message.received .chat-message-time {
    color: #999;
}

.chat-input-area {
    padding: 14px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 10px;
    background: #fff;
    position: relative;
}

.chat-input-area input {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: 12px 20px;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s;
}

.chat-input-area input:focus {
    border-color: #1ab394;
}

.chat-input-area button {
    background: #1ab394;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-input-area button:hover {
    background: #17a086;
    transform: scale(1.05);
}

.chat-input-area button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
    gap: 12px;
}

.chat-empty i {
    font-size: 4rem;
}

.chat-empty h5 {
    color: #888;
    margin: 0;
}

.new-chat-panel {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #f5f7f9;
}

.friend-results {
    max-height: 200px;
    overflow-y: auto;
}

.friend-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}
.friend-result-item:hover {
    background: #e8ecef;
}

.friend-result-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* ============================================================
   CHAT SYSTEM ÔÇö WhatsApp-style interface
   ============================================================ */

.chat-app {
    display: flex;
    height: calc(100vh - 240px);
    min-height: 400px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    position: relative;
}

/* Sidebar */
.chat-sidebar {
    width: 340px;
    min-width: 340px;
    border-right: 1px solid #e9edef;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #f0f2f5;
    border-bottom: 1px solid #e9edef;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 600;
    color: #111b21;
}

.sidebar-newchat-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #54656f;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.sidebar-newchat-btn:hover {
    background: #d9dbde;
}

.sidebar-newchat {
    padding: 10px 12px;
    border-bottom: 1px solid #e9edef;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: #fafafa;
}

.newchat-input {
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}

.newchat-input:focus {
    border-color: #96b900;
}

.newchat-search-btn {
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    background: #96b900;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.newchat-search-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.newchat-loading,
.newchat-empty {
    width: 100%;
    font-size: 12px;
    color: #667781;
    padding: 4px 0;
}

.newchat-results {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

.newchat-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.newchat-result:hover {
    background: #e8ecef;
}

.newchat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Search */
.sidebar-search {
    padding: 8px 12px;
    position: relative;
    background: #fff;
}

.sidebar-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #667781;
    font-size: 13px;
    pointer-events: none;
}

.sidebar-search input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: none;
    border-radius: 8px;
    background: #f0f2f5;
    font-size: 13px;
    outline: none;
    transition: background 0.15s;
}

.sidebar-search input:focus {
    background: #e2e5e8;
}

.sidebar-search input::placeholder {
    color: #667781;
}

/* Chat list */
.sidebar-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-loading,
.sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #667781;
    font-size: 13px;
}

.sidebar-empty-icon {
    font-size: 32px;
    margin-bottom: 10px;
    color: #d0d5d9;
}

.chat-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f2f5;
}

.chat-item:hover {
    background: #f0f2f5;
}

.chat-item-active {
    background: #e7f0fe !important;
}

.chat-item-unread {
    background: #fcfcfc;
}

.chat-item-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    margin-right: 12px;
}

.chat-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-item-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}

.chat-item-name {
    font-size: 14px;
    font-weight: 500;
    color: #111b21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-unread .chat-item-name {
    font-weight: 600;
}

.chat-item-time {
    font-size: 11px;
    color: #667781;
    white-space: nowrap;
    margin-left: 6px;
    flex-shrink: 0;
}

.chat-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-item-msg {
    font-size: 13px;
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.chat-item-badge {
    background: #25d366;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-left: 6px;
    flex-shrink: 0;
}

/* Main area */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #efeae2;
    position: relative;
}

.chat-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
}

.chat-empty-inner {
    text-align: center;
    color: #667781;
}

.chat-empty-icon {
    font-size: 64px;
    color: #d0d5d9;
    margin-bottom: 16px;
}

.chat-empty-title {
    font-size: 18px;
    font-weight: 400;
    color: #3b4a54;
    margin: 0 0 8px;
}

.chat-empty-text {
    font-size: 13px;
    color: #667781;
    margin: 0;
}

/* Active chat layout */
.chat-active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f0f2f5;
    border-bottom: 1px solid #e9edef;
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.chat-header-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-header-info {
    flex: 1;
    min-width: 0;
}

.chat-header-name {
    font-size: 15px;
    font-weight: 600;
    color: #111b21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-status {
    font-size: 12px;
    color: #667781;
    margin-top: 1px;
}

.chat-header-right {
    flex-shrink: 0;
}

.chat-header-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #54656f;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.chat-header-btn:hover {
    background: #d9dbde;
}

/* Messages container */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 40px;
    background-color: #efeae2;
    background-image: 
        radial-gradient(circle at 20px 20px, #e5ddd5 2px, transparent 2px),
        radial-gradient(circle at 60px 80px, #e5ddd5 1px, transparent 1px),
        radial-gradient(circle at 100px 40px, #e5ddd5 1.5px, transparent 1.5px);
    background-size: 80px 100px, 100px 120px, 120px 100px;
}

.msg-loading {
    text-align: center;
    padding: 40px;
    color: #667781;
    font-size: 20px;
}

.msg-row {
    display: flex;
    margin-bottom: 4px;
}

.msg-sent {
    justify-content: flex-end;
}

.msg-received {
    justify-content: flex-start;
}

.msg-bubble {
    max-width: 65%;
    padding: 6px 9px 6px 9px;
    border-radius: 8px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.msg-bubble-sent {
    background: #d9fdd3;
    border-top-right-radius: 2px;
}

.msg-bubble-received {
    background: #fff;
    border-top-left-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

.msg-text {
    font-size: 14px;
    line-height: 1.4;
    color: #111b21;
    white-space: pre-wrap;
}

.msg-system {
    font-size: 12px;
    font-style: italic;
    color: #667781;
    text-align: center;
    padding: 4px 0;
}

.msg-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
    height: 16px;
}

.msg-time {
    font-size: 11px;
    color: #667781;
    line-height: 1;
}

.msg-read {
    font-size: 11px;
    color: #8696a0;
    line-height: 1;
}

.msg-read-read {
    color: #53bdeb;
}

.msg-read .fa-check-double {
    font-size: 11px;
}

.msg-read .fa-check {
    font-size: 11px;
}

/* Input area */
.input-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #54656f;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.input-btn:hover {
    background: #d9dbde;
}

.input-textarea {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    resize: none;
    line-height: 1.4;
    max-height: 100px;
}

.input-textarea:focus {
    box-shadow: 0 0 0 1px #96b900;
}

.input-send {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #96b900;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.input-send:hover {
    background: #7fa000;
}

.input-send:disabled {
    background: #c0ce8a;
    cursor: default;
}

/* Presence dots */
.presence-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.presence-dot-lg {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.presence-dot.online {
    background: #44b700;
}

.presence-dot.away {
    background: #f0ad4e;
}

.presence-dot.busy {
    background: #d9534f;
}

.presence-dot.offline {
    background: #a0a0a0;
}

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar,
.sidebar-list::-webkit-scrollbar,
.newchat-results::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.sidebar-list::-webkit-scrollbar-track,
.newchat-results::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb,
.sidebar-list::-webkit-scrollbar-thumb,
.newchat-results::-webkit-scrollbar-thumb {
    background: #c0c4c8;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.sidebar-list::-webkit-scrollbar-thumb:hover {
    background: #a0a4a8;
}

/* Emoji picker */
.emoji-picker {
    position: absolute;
    bottom: 60px;
    left: 10px;
    width: 280px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
}

.emoji-item {
    font-size: 22px;
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.1s;
    user-select: none;
}

.emoji-item:hover {
    background: #f0f2f5;
    transform: scale(1.2);
}

/* Chat header back button */
.chat-header-back {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #54656f;
    font-size: 16px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
    transition: background 0.15s;
}

.chat-header-back:hover {
    background: #d9dbde;
}

/* Responsive */
@media (max-width: 768px) {
    .chat-app {
        height: calc(100vh - 180px);
        border-radius: 0;
        min-height: 0;
    }

    .chat-sidebar {
        width: 100%;
        min-width: 100%;
    }

    .chat-main {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background: #efeae2;
    }

    .chat-header-back {
        display: flex;
    }

    .chat-messages {
        padding: 12px 16px;
    }

    .msg-bubble {
        max-width: 85%;
    }

    .chat-main .chat-header {
        padding: 8px 12px;
    }

    .chat-input-area {
        padding: 8px 10px;
        gap: 4px;
    }

    .input-textarea {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .chat-item {
        padding: 10px 12px;
    }

    .chat-item-avatar {
        width: 40px;
        height: 40px;
    }

    .chat-sidebar {
        width: 100%;
        min-width: 100%;
    }

    .sidebar-header {
        padding: 10px 12px;
    }

    .chat-messages {
        padding: 8px 10px;
    }

    .msg-bubble {
        max-width: 90%;
        padding: 5px 7px;
    }
}

/* Tax type badges for provider booking view */
.badge-gov {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0,123,255,0.1);
    color: #0056b3;
    margin-left: 4px;
    vertical-align: middle;
}
.badge-fee {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255,193,7,0.15);
    color: #856404;
    margin-left: 4px;
    vertical-align: middle;
}

/* Rotate chevron for collapsible sections */
.rotate-90 {
    transform: rotate(90deg);
}

/* Transition for collapsible sections */
.transition-transform {
    transition: transform 0.2s ease;
}