/* WheelFront Dashboard Styles - Chrono24 Inspired */

.wf-dashboard-container {
  display: flex;
  min-height: 800px;
  background: transparent;
  font-family: "Wix Madefor Text", Arial, Helvetica, sans-serif;
  color: #E1E4EB;
  margin: 20px 0;
  /* border: 1px solid #525f7a; */
  border-radius: 8px;
  overflow: hidden;
  /* box-shadow: 1px 1px 10px 0px #84848417; */
}

/* Messaging View Active State */
.wf-messaging-view-active {
  border: none;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
}

.wf-messaging-view-active .wf-dashboard-sidebar {
  display: none;
}

.wf-messaging-view-active .wf-dashboard-main {
  padding: 0;
}

.wf-messaging-view-active .wf-dashboard-content {
  height: calc(100vh - 120px);
  /* Adjust based on site header */
}

.wf-messaging-view-active .wf-chat-container {
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* Sidebar Styling */
.wf-dashboard-sidebar {
  width: 260px;
  background: transparent;
  /* border-right: 1px solid #8585859c; */
  padding: 30px 0;
  flex-shrink: 0;
}

.wf-user-profile-summary {
  padding: 0 5px 30px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.wf-avatar img {
  border-radius: 50% !important;
  border: 1px solid #eee;
}

.wf-user-info .wf-name {
  display: block;
  font-weight: 700;
  font-size: 18px;
}

.wf-user-info .wf-role {
  font-size: 14px;
  color: #9ba5ad;
}

.wf-dashboard-nav ul {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}

.wf-dashboard-nav ul li {
  margin: 5px;
}

.wf-dashboard-nav ul li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 25px;
  text-decoration: none;
  color: #E1E4EB;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.wf-dashboard-nav ul li a:hover {
  background: #d7e7f740;
  color: #E1E4EB;
  border-radius: 8px;
}

.wf-dashboard-nav ul li.active a {
  background: #d7e7f740;
  color: #E1E4EB;
  font-weight: 700;
  border-radius: 8px;
  /* border-right: 3px solid #336ecc; */
}

.wf-dashboard-nav ul li a .dashicons,
.wf-dashboard-nav ul li a .lucide {
  width: 22px;
  height: 22px;
  color: #E1E4EB;
}

.wf-dashboard-nav ul li.active a .dashicons,
.wf-dashboard-nav ul li.active a .lucide {
  color: #c0cae3;
}

.wf-dashboard-nav hr {
  margin: 15px 25px;
  border: 0;
  border-top: 1px solid #f0f0f0;
}

/* Main Content Area */
.wf-dashboard-main {
  flex-grow: 1;
  background: transparent;
  padding: 40px 50px;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.wf-dashboard-header h1 {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 30px;
  letter-spacing: -0.5px;
}

/* Messaging App Header */
.wf-messaging-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
  background: transparent;
  /* border-bottom: 1px solid ; */
}

.wf-return-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #E1E4EB;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.wf-return-link:hover {
  color: #c1bcbc;
}

.wf-messaging-header-actions .wf-refresh-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #E1E4EB;
  text-decoration: none;
  font-size: 14px;
}

.wf-messaging-header-actions .wf-refresh-link:hover {
  color: #6889b4;
}

/* Premium Dashboard Overview - Chrono24 Inspired */
.wf-dashboard-overview {
  max-width: 1200px;
  margin: 0 auto;
}

.wf-overview-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #E1E4EB;
}

.wf-overview-cards-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-bottom: 50px;
}

.wf-overview-card {
  background: transparent;
  border: 1px solid #525f7a;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}

.wf-overview-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wf-profile-card {
  grid-row: span 1;
}

.wf-sell-card {
  grid-row: span 2;
}

.wf-saved-searches-card {
  grid-row: span 1;
}

.wf-card {
  margin: 10px 0px;
  /* box-shadow: 0px 0px 10px 0 #8181813d; */
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #525f7a;
}

.wf-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  /* padding-bottom: 20px; */
  /* border-bottom: 1px solid #f3f4f6; */
  justify-content: space-between;
}

/* Lucide Icons Global Styling */
.lucide,
.wf-icon,
.wf-icon-small,
.wf-icon-arrow,
.wf-icon-inline {
  width: 22px;
  height: 22px;
  stroke-width: 1.8px;
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
}

.wf-icon-small {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.wf-icon-inline {
  width: 14px;
  height: 14px;
  margin-left: 4px;
}

.wf-icon-large {
  width: 64px;
  height: 64px;
  stroke-width: 1.5;
  margin-bottom: 20px;
}

.wf-card-header .dashicons,
.wf-card-header .lucide,
.wf-card-header .wf-icon {
  width: 22px !important;
  height: 22px !important;
  color: #E1E4EB;
  flex-shrink: 0;
  margin-right: 10px;
}

.wf-card-header .wf-edit-icon:hover .dashicons,
.wf-card-header .wf-edit-icon:hover .lucide {
  color: #f3f4f6;
}

.wf-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #E1E4EB;
  flex-grow: 1;
}

.wf-card-more {
  font-size: 14px;
  color: #E1E4EB;
  font-weight: 600;
  text-decoration: underline !important;
}


.wf-card-content {
  flex-grow: 1;
}

.create_listing {
  background-color: #336ecc !important;
  width: 100% !important;
  padding: 10px 40px;
  border-radius: 6px;
}

/* Profile Card Specifics */
.wf-profile-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wf-profile-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.wf-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wf-profile-details {
  display: flex;
  flex-direction: column;
}

.wf-profile-avatar img,
.wf-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  max-width: none !important;
}

.wf-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #1e4a8e;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #1e4a8e;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #336ecc 0%, #1e3a6e 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.8rem;
  border-radius: 50%;
  text-align: center;
  user-select: none;
  letter-spacing: 1px;
  font-family: 'Wix Madefor Text', sans-serif;
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(51, 110, 204, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.12);
}

.wf-profile-name {
  font-size: 20px;
  font-weight: 700;
  color: #E1E4EB;
  margin-bottom: 4px;
}

.wf-profile-location {
  font-size: 14px;
  color: #E1E4EB;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wf-profile-location .dashicons,
.wf-profile-location .lucide {
  font-size: 16px;
  width: 18px;
  height: 18px;
  color: #E1E4EB;
}

/* Sell Card Specifics */
.wf-cta-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #E1E4EB;
}

.wf-cta-text {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 24px;
  line-height: 1.6;
}

.wf-btn-primary {
  background: #081526 !important;
  color: #fff !important;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  transition: background 0.2s;
}

.wf-btn-primary:hover {
  background: #1a2a44 !important;
}

/* Saved Searches Specifics */
.wf-saved-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #525f7a;
  text-decoration: none;
  color: inherit;
}

.wf-saved-item:last-child {
  border-bottom: none;
}

.wf-saved-thumb {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: #f9fafb;
}

.wf-saved-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wf-saved-info {
  flex-grow: 1;
}

.wf-saved-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
}

.wf-saved-item .dashicons-arrow-right-alt2,
.wf-saved-item .lucide {
  color: #d1d5db;
  font-size: 20px;
  width: 22px;
  height: 22px;
}

.wf-empty-mini {
  padding: 12px 0;
}

.wf-empty-mini p {
  margin: 0;
  font-size: 15px;
  color: #6b7280;
}

.wf-sub-text {
  font-size: 13px;
  margin-top: 4px !important;
}

.wf-mini-link {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  color: #081526;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}

.wf-mini-link .dashicons,
.wf-mini-link .lucide {
  margin-left: 4px;
  font-size: 16px;
  width: 18px;
  height: 18px;
}

/* Recommendations Section */
.wf-recommendations-section {
  margin-top: 60px;
}

.wf-section-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #E1E4EB;
}

.wf-recommendations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .wf-overview-cards-grid {
    grid-template-columns: 1fr;
  }

  .wf-recommendations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* @media (max-width: 640px) {
  .wf-recommendations-grid {
    grid-template-columns: 2fr;
  }
} */

/* Status Badges */
.wf-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-transaction-delivered {
  background: #aec3b6;
  color: #166534 !important;
}

.status-transaction-shipped {
  background: #fffbeb;
  color: #92400e !important;
}

.status-rejected {
  background: #fef2f2;
  color: #991b1b !important;
}

/* Buttons */
.wf-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
  text-align: center;
  cursor: pointer;
}

.wf-btn-dark {
  background: #336ecc;
  color: #fff !important;
}

.wf-btn-dark:hover {
  background: #4e7cc4;
}

.wf-btn-outline {
  background: transparent;
  color: #E1E4EB !important;
  border: 2px solid #E1E4EB !important;
}

.wf-btn-outline:hover {
  background: #20242E;
}

/* Empty States */
.wf-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #1D2330;
  border-radius: 8px;
  border: 1px dashed #525f7a;
}

.wf-empty-state .dashicons,
.wf-empty-state .lucide {
  color: #dee2e6;
  margin-bottom: 20px;
}

.wf-empty-state h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.wf-empty-state p {
  color: #adaeaf;
  margin-bottom: 25px;
}

/* Profile Dashboard Enhancements */
.wf-profile-header-area {
  margin-bottom: 30px;
  /* padding-bottom: 20px; */
  /* border-bottom: 1px solid #eee; */
}

.wf-avatar-upload-container {
  display: flex;
  align-items: center;
  gap: 25px;
}

.wf-avatar-main {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wf-avatar-main:hover {
  border-color: #081526;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wf-avatar-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wf-avatar-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wf-avatar-main:hover .wf-avatar-overlay {
  opacity: 1;
}

.wf-user-id-badge {
  color: #6c757d;
  font-size: 14px;
  line-height: 1.6;
}

.wf-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #525f7a;
}

.wf-info-row:last-child {
  border-bottom: none;
}

.wf-info-row label {
  font-size: 14px;
  color: #E1E4EB;
  font-weight: 400;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.wf-info-row span {
  font-size: 14px;
  color: #E1E4EB;
  font-weight: 600;
  text-align: right;
}

.wf-edit-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #E1E4EB !important;
  text-decoration: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-edit-icon:hover {
  color: #1b62be !important;
}

.wf-card-header .lucide:hover {
  color: #1b62be !important;
}

.wf-edit-icon .dashicons,
.wf-edit-icon .lucide {
  font-size: 16px;
  width: 18px;
  height: 18px;
}

/* Edit Forms (Chrono24 Style) */
.wf-edit-form-container {
  padding: 10px 0;
}

.wf-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #E1E4EB;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 20px;
  transition: transform 0.2s ease;
}

.wf-back-link:hover {
  transform: translateX(-5px) !important;
}

.wf-profile-form {
  max-width: 700px;
}

.wf-profile-form .wf-form-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.wf-profile-form .wf-form-group label {
  width: 160px;
  min-width: 160px;
  font-size: 14px;
  font-weight: 600;
  color: #E1E4EB;
  text-align: left;
  display: block;
}

.wf-profile-form .wf-form-group input:not([type="checkbox"]),
.wf-profile-form .wf-form-group select,
.wf-profile-form .wf-form-group textarea,
.wf-file-input-wrapper {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #525f7a;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wf-profile-form .wf-form-group input:focus,
.wf-profile-form .wf-form-group select:focus,
.wf-profile-form .wf-form-group textarea:focus {
  outline: none;
  border-color: #081526;
  box-shadow: 0 0 0 3px rgba(8, 21, 38, 0.05);
}

.wf-form-group.wf-form-group-top {
  align-items: flex-start;
}

.wf-form-group.wf-form-group-top label {
  padding-top: 13px;
}

/* Password Toggle Styling */
.wf-password-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
}

.wf-password-input-wrap input {
    padding-right: 45px !important;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #9c9c9c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: transparent;
    border: none;
    padding: 0;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: #ffffff;
}

.password-toggle .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.wf-form-inner-row {
  display: flex;
  gap: 12px;
  flex: 1;
}

.wf-form-inner-row .wf-form-group {
  margin-bottom: 0;
  gap: 12px;
}

.wf-form-inner-row input {
  flex: 1;
}

/* Premium KYC File Upload Styling */
.wf-file-upload-group {
  align-items: flex-start !important;
}

.wf-file-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-file-input-wrapper input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.wf-file-custom-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #fff;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.wf-file-custom-label:hover {
  border-color: #081526;
  background: #f8fafc;
}

.wf-file-custom-label .dashicons,
.wf-file-custom-label .lucide {
  color: #64748b;
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.wf-file-name {
  font-size: 14px;
  color: #475569;
  font-weight: 500;
}

.wf-field-help {
  font-size: 12px;
  color: #94a3b8;
  margin: 4px 0 0 !important;
  line-height: 1.4;
}

/* Horizontal Form Groups (Login Edit) */
.wf-form-group-horizontal {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 25px;
}

.wf-form-group-horizontal label {
  width: 150px;
  font-size: 14px;
  font-weight: 600;
  color: #E1E4EB;
  margin: 0;
  text-align: right;
}

.wf-form-value-wrap {
  flex-grow: 1;
  max-width: 400px;
}

.wf-input-action-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #E1E4EB;
  text-decoration: underline;
  font-weight: 500;
}

.wf-profile-form input:disabled {
  background: transparent;
  color: #E1E4EB !important;
  cursor: not-allowed;
  border-color: #525f7a;
}

.wf-profile-form input:not([type="checkbox"]):not([type="radio"]),
.wf-profile-form select,
.wf-profile-form textarea {
  width: 100% !important;
  color: #E1E4EB !important;
  padding: 10px 14px;
  border: 1px solid #525f7a !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  background: transparent !important;
  background: #111b2e !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  font-family: inherit;
}

.wf-profile-form input:focus,
.wf-profile-form select:focus,
.wf-profile-form textarea:focus {
  outline: none;
  border-color: #081526;
  box-shadow: 0 0 0 3px rgba(8, 21, 38, 0.1);
}

/* Date input calendar icon color */
.wf-profile-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1);
}

.wf-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px !important;
}

.wf-profile-form select option {
  background-color: #1a253c;
  color: #E1E4EB;
}

.wf-btn {
  padding: 10px 40px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.wf-btn-dark {
  background: #336ecc !important;
  color: #fff !important;
  border: 1px solid #336ecc !important;
}

.wf-btn-dark:hover {
  background: #4e7cc4 !important;
  transform: translateY(-1px) !important;
}

.wf-profile-form .wf-btn-dark {
  float: right;
  clear: both;
}

.wf-notice.success {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  color: #2e7d32;
  padding: 16px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 25px;
  font-weight: 500;
}

/* Inventory Table */
.wf-inventory-table-wrap {
  background: transparent;
  border: 1px solid #525f7a;
  border-radius: 4px;
  overflow: hidden;
}

.wf-inventory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.wf-inventory-table th {
  background: #3E4754;
  padding: 15px 20px;
  text-align: left;
  font-weight: 700;
  color: #E1E4EB;
  border-bottom: 2px solid #525f7a;
}

.wf-inventory-table td {
  padding: 15px 20px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f3f5;
}

.wf-col-img img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

.wf-no-img {
  width: 60px;
  height: 60px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #ced4da;
}

.wf-col-title strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.wf-meta-small {
  font-size: 12px;
  color: #948f8f;
}

.wf-col-price {
  font-weight: 700;
  color: #E1E4EB;
}

/* Status Badges */
.wf-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-draft {
  background: #fff4e6;
  color: #f76707;
}

.status-pending {
  background: #e7f5ff!important;
  color: #1c7ed6!important;
}

.wf-action-link {
  color: #E1E4EB;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.wf-action-link:hover {
  text-decoration: underline;
}

/* Stats in Overview */
.wf-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f1f3f5;
}

.wf-stat-row:last-child {
  border-bottom: 0;
}

.wf-profile-summary-box {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

.wf-profile-id {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 5px;
}

@media (max-width: 992px) {
  .wf-dashboard-container {
    flex-direction: column;
  }

  .wf-dashboard-sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .wf-dashboard-nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* padding: 0 15px; */
  }

  .wf-dashboard-nav ul li {
    margin: 0;
  }

  .wf-dashboard-nav ul li a {
    padding: 12px 14px;
    font-size: 13px;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
  }

  .wf-dashboard-main {
    padding: 25px;
  }

  .wf-overview-cards {
    grid-template-columns: 1fr;
  }

  .wf-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   MESSAGING / CHAT UI - Chrono24 Inspired
   ============================================= */

.wf-chat-container {
  display: flex;
  height: 600px;
  border: 1px solid #525f7a !important;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

/* ── Conversation Sidebar ── */
.wf-chat-sidebar {
  width: 340px;
  min-width: 340px;
  border-right: 1px solid #525f7a;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.wf-chat-sidebar-header {
  padding: 18px 20px;
  border-bottom: 1px solid #525f7a;
  background: transparent;
}

.wf-chat-sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #E1E4EB;
}

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

/* ── Conversation Item ── */
.wf-conv-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid #525f7a;
  transition: background 0.15s ease;
  position: relative;
}

.wf-conv-item:hover {
  background: #1D2330;
}

.wf-conv-item.active {
  background: #1D2330;
  border-left: 3px solid #3a7ed7;
  padding-left: 17px;
}

.wf-conv-item.wf-conv-unread {
  background: rgba(58, 126, 215, 0.1) !important;
  border-right: 2px solid #3a7ed7;
}

.wf-conv-unread .wf-conv-name,
.wf-conv-unread .wf-conv-date,
.wf-conv-unread .wf-conv-listing-title,
.wf-conv-unread .wf-conv-preview span {
  color: #fff !important;
  font-weight: 600;
}

/* ── Conversation Options (Three Dots) ── */
.wf-conv-options {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
}

.wf-delete-conv-trigger {
  position: absolute;
  bottom: 12px;
  right: 14px;
  color: #adb5bd;
  font-size: 18px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 50%;
  opacity: 0;
  pointer-events:none;
}

.wf-con-item:hover .wf-deletr-conv-trigger{
opacity: 0.6;
pointer-events:auto;
}

.wf-delete-conv-trigger:hover {  background: #fff0f0;
color: #e63946 !important; 
opacity: 1 !important;
}

/* ── Unread Badge ── */
.wf-unread-badge { 
background: #3a7ed7!important; 
color: #fff!important;  
font-size: 10px!important;
font-weight: 700!important;
width: 18px!important; 
height: 18px;  
border-radius: 50%;
display: inline-flex; 
align-items: center; 
justify-content: center;  
padding: 0 5px; 
margin-right:8px;
vertical-align:middle;
flex-shrink: 0;
line-height:1;
}

/* ── Notification Bell & Badge ── */
.wf-notification-bell-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-right: 5px;
  text-decoration: none !important;
  transition: transform 0.2s ease;
}

.wf-notification-bell-link:hover {
  transform: scale(1.05);
}

.wf-notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #0f172a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 10;
  line-height: 1;
}

/* Three Dot Styles - Kept for reference or removed if certain */
.wf-conv-options {
  display: none;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wf-conv-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50% !important;
  overflow: hidden;
  flex-shrink: 0;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-conv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wf-conv-thumb .dashicons,
.wf-conv-thumb .lucide {
  font-size: 22px;
  width: 22px;
  height: 22px;
  color: #adb5bd;
}

.wf-conv-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wf-conv-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wf-conv-name {
  font-weight: 600;
  font-size: 14px;
  color: #E1E4EB;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-conv-time {
  font-size: 11px;
  color: #868e96;
  white-space: nowrap;
  margin-left: 8px;
}

.wf-conv-listing-title {
  font-size: 12px;
  color: #babec2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf-conv-price {
  font-weight: 700;
  color: #E1E4EB;
  margin-left: 6px;
  background: #69a7e6;
  padding: 0 5px;
  border-radius: 3px;
}

.wf-conv-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.wf-conv-preview span {
  font-size: 13px;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #081526;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 6px;
  flex-shrink: 0;
}

/* ── Chat Window ── */
.wf-chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* border-bottom: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef; */
}

/* ── Empty State ── */
.wf-chat-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  color: #E1E4EB;
}

.wf-chat-empty-icon .dashicons,
.wf-chat-empty-icon .lucide {
  font-size: 48px;
  width: 48px;
  height: 48px;
  color: #ced4da;
  margin-bottom: 16px;
}

.wf-chat-empty-state h3 {
  margin: 0 0 8px;
  color: #E1E4EB;
  font-size: 18px;
}

.wf-chat-empty-state p {
  margin: 0;
  font-size: 14px;
}

/* ── Chat Header ── */
.wf-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #e9ecef;
  background: #1a253c;
  justify-content: space-between;
}

.wf-chat-actions {
  margin-left: auto;
}

.wf-chat-back-btn {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #6c757d;
}

.wf-chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50% !important;
  object-fit: cover;
}

.wf-chat-header-info {
  display: flex;
  flex-direction: column;
}

.wf-chat-name {
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
}

.wf-chat-listing {
  font-size: 15px;
  color: #ffffff !important;
}

.wf-chat-listing a {
  font-size: 15px;
  color: #ffffff !important;
}

.wf-chat-header-price {
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
  font-size: 0.9em;
  display: inline-block;
}

/* ── Messages Thread ── */
.wf-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Date Separator */
.wf-chat-date-sep {
  text-align: center;
  margin: 12px 0;
}

.wf-chat-date-sep span {
  background: transparent;
  color: #6c757d;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
}

/* Message Bubbles */
.wf-msg {
  display: flex;
  max-width: 70%;
}

.wf-msg-mine {
  align-self: flex-end;
}

.wf-msg-theirs {
  align-self: flex-start;
}

.wf-msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  position: relative;
}

.wf-msg-mine .wf-msg-bubble {
  background: #081526;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.wf-msg-theirs .wf-msg-bubble {
  background: #fff;
  color: #212529;
  border: 1px solid #e9ecef;
  border-bottom-left-radius: 4px;
}

.wf-msg-bubble p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.wf-msg-time {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.6;
}

.wf-msg-mine .wf-msg-time {
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
}

.wf-msg-theirs .wf-msg-time {
  color: #868e96;
}

/* ── Message Input ── */
.wf-chat-input-area {
  padding: 14px 20px;
  border-top: 1px solid #e9ecef;
  background: #1D2330;
}

.wf-messaging-app-header {
  margin: 10px 0px;
}

.wf-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 24px;
  padding: 6px 6px 6px 18px;
  transition: border-color 0.2s;
}

.wf-chat-input-wrap:focus-within {
  border-color: #081526;
}

#wf-chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  max-height: 120px;
  padding: 6px 0;
  line-height: 1.4;
}

.wf-chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  background: #081526;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.1s;
  flex-shrink: 0;
}

.wf-chat-send-btn:hover {
  background: #1a2a40;
  transform: scale(1.05);
}

.wf-chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wf-chat-send-btn .dashicons,
.wf-chat-send-btn .lucide {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* ── Loading & Empty States ── */
.wf-chat-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #868e96;
}

.wf-chat-loading .spin {
  animation: wf-spin 1s linear infinite;
  font-size: 24px;
  width: 24px;
  height: 24px;
}

@keyframes wf-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.wf-chat-no-convos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #868e96;
}

.wf-chat-no-convos .dashicons,
.wf-chat-no-convos .lucide {
  font-size: 36px;
  width: 36px;
  height: 36px;
  color: #ced4da;
  margin-bottom: 12px;
}

.wf-chat-no-convos p {
  margin: 0 0 4px;
  font-size: 14px;
}

.wf-chat-hint {
  font-size: 12px !important;
  color: #adb5bd !important;
}

.wf-chat-no-msgs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #868e96;
  font-size: 14px;
}

/* ── Responsive: Mobile ── */
@media (max-width: 768px) {
  .wf-chat-container {
    height: calc(100vh - 120px);
    /* Default mobile height */
    min-height: 450px;
    border-radius: 0;
    border: none;
    margin: -25px -16px;
    z-index: 1000;
    transition: height 0.3s ease;
  }

  .wf-chat-active-mobile .wf-chat-container {
    height: calc(100dvh - 20px);
    /* Maximize height when chat open */
    margin-top: -60px;
    /* Pull up to cover header area if needed */
  }

  .wf-chat-active-mobile .wf-dashboard-header {
    display: none !important;
    /* Hide "Return to overview" when chatting */
  }

  .wf-chat-sidebar {
    width: 100%;
    min-width: 100%;
    position: absolute;
    z-index: 10;
    height: 100%;
  }

  .wf-chat-window {
    width: 100%;
  }

  .wf-chat-container {
    position: relative;
  }

  .wf-chat-sidebar:not(.show-mobile) {
    display: none;
  }

  .wf-chat-window:not(.show-mobile) {
    display: none;
  }

  .wf-chat-sidebar.show-mobile {
    display: flex;
  }

  .wf-chat-window.show-mobile {
    display: flex;
  }

  .wf-chat-back-btn {
    display: inline-flex;
    padding: 2px !important;
    background-color: transparent !important;
  }

  /* .wf-msg {
    max-width: 85%;
  } */

  .wf-dashboard-main {
    padding: 25px 16px;
  }

  .wf-messaging-view-active .wf-dashboard-main {
    padding: 0 !important;
  }

  .wf-messaging-view-active .wf-dashboard-header {
    margin-bottom: 0;
    padding: 10px 0px;
  }

  /* Compact Chat Header for Mobile */
  .wf-chat-header {
    /* padding: 8px 12px; */
    gap: 8px;
    background: #111b21;
    /* WhatsApp dark theme color */
  }

  .wf-chat-avatar {
    width: 38px;
    height: 38px;
  }

  .wf-chat-header-info {
    gap: 0;
  }

  .wf-chat-name {
    font-size: 13px;
    line-height: 1.2;
  }

  .wf-chat-listing {
    font-size: 11px !important;
    line-height: 1.2;
    opacity: 0.8;
  }

  .wf-chat-listing a {
    font-size: 11px !important;
  }

  .wf-chat-header-price {
    font-size: 12px;
    padding: 1px 5px;
    margin-left: 0px;
    background-color: transparent;
  }

  .wf-chat-actions .wf-btn-sm {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  /* .wf-msg {
    max-width: 85%;
  } */

  /* Sticky Bottom Input Area */
  .wf-chat-input-area {
    /* padding: 8px 12px; */
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: #f0f2f5;
  }

  .wf-chat-input-wrap {
    padding: 4px 4px 4px 14px;
    background: #fff;
    border: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  #wf-chat-input {
    font-size: 14px;
    padding: 8px 0;
  }

  .wf-card-header h3 {
    font-size: 20px;
  }

  .wf-edit-form-container h2 {
    font-size: 22px;
  }

  .wf-dashboard-header h1 {
    font-size: 25px;
  }

  .wf-disbursement-methods {
    gap: 10px;
  }

  .wf-method-card {
    padding: 15px;
  }

  .wf-view-header h2 {
    font-size: 20px;
  }

  table tbody>tr:nth-child(odd)>td,
  table tbody>tr:nth-child(odd)>th {
    background-color: transparent !important;
  }

  #wf-chat-listing {
    display: flex;
    flex-direction: inherit;
    gap: 5px;
  }
}

/* =============================================
   WHEEL LISTING REDESIGN - Multi-Step Selection
   ============================================= */

.wf-listing-workflow-header {
  text-align: center;
  margin-bottom: 40px;
}

.wf-listing-workflow-header h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.wf-listing-workflow-header p {
  color: #6c757d;
  font-size: 16px;
}

/* Split Cards Grid */
.wf-selection-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 40px;
}

.wf-selection-card {
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 30px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.wf-selection-card:hover {
  border-color: #081526;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.wf-selection-card.active {
  border-color: #081526;
  background: #f8faff;
}

.wf-selection-card.active::after {
  content: "✓";
  position: absolute;
  top: 15px;
  right: 15px;
  background: #081526;
  color: #E1E4EB;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.wf-card-icon {
  font-size: 40px;
  margin-bottom: 20px;
  background: #f1f3f5;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #081526;
}

.wf-selection-card.active .wf-card-icon {
  background: #eef2f7;
}

.wf-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #E1E4EB;
}

.wf-card-desc {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 15px;
  line-height: 1.5;
}

.wf-card-hook {
  font-size: 13px;
  font-weight: 600;
  color: #081526;
  background: #e9ecef;
  padding: 6px 12px;
  border-radius: 6px;
}

/* Feedback Badges */
.wf-success-badge {
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  padding: 15px 20px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2e7d32;
  animation: slideInDown 0.3s ease-out;
}

.wf-success-badge .badge-icon {
  font-size: 20px;
}

.wf-success-badge strong {
  font-weight: 700;
}

.wf-fitment-count {
  background: #f0f7ff;
  border: 1px solid #d0e3ff;
  color: #0056b3;
  padding: 12px 18px;
  border-radius: 8px;
  margin-top: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tooltips */
.wf-helper-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #dee2e6;
  color: #495057;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  cursor: help;
  margin-left: 5px;
  position: relative;
}

.wf-helper-icon:hover {
  background: #adb5bd;
}

.wf-tooltip-content {
  display: none;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  background: #fff;
  border: 1px solid #e9ecef;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 15px;
  border-radius: 8px;
  z-index: 100;
}

.wf-helper-icon:hover .wf-tooltip-content {
  display: block;
}

.wf-tooltip-content img {
  width: 100%;
  border-radius: 4px;
  margin-top: 8px;
}

@keyframes slideInDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive Selection */
@media (max-width: 768px) {
  .wf-selection-cards {
    grid-template-columns: 1fr;
  }
}

/* Progress Bar & Steps */
.wf-progress-container {
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.wf-progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.wf-progress-steps::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.wf-progress-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.wf-step-number {
  width: 32px;
  height: 32px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.wf-step-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wf-progress-step.active .wf-step-number {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.1);
}

.wf-progress-step.active .wf-step-label {
  color: #0f172a;
}

.wf-progress-step.completed .wf-step-number {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.wf-progress-bar-wrap {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-top: 15px;
  overflow: hidden;
}

.wf-progress-fill {
  height: 100%;
  background: #10b981;
  width: 0%;
  transition: width 0.5s ease;
}

/* ===========================
   ENHANCED DEAL SHEET MODAL
   =========================== */

/* Modal Overlay */
.wf-offer-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.wf-offer-modal.active {
  display: flex;
}

/* Modal Content */
.wf-offer-modal-content {
  background: #171c26;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Header */
.wf-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid #e9ecefa8;
  background: #171c26;
}

.wf-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
}

.wf-offer-close {
  font-size: 30px;
  font-weight: 300;
  color: #dee1e3;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
}

.wf-offer-close:hover {
  color: #126bdf;
}

/* Modal Body */
.wf-modal-body {
  padding: 28px;
}

/* Deal Sheet Sections */
.wf-deal-section {
  margin-bottom: 28px;
  /* padding-bottom: 24px;
  border-bottom: 1px solid #e9ecef; */
}

.wf-deal-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.wf-deal-section h4 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Input Group */
.wf-input-group {
  margin-bottom: 16px;
}

.wf-input-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #c3c3c3;
  font-size: 14px;
}

.wf-input-group input[type="number"],
.wf-input-group input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ced4da;
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.wf-input-group input:focus {
  outline: none;
  border-color: #081526;
}

.wf-input-group small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #b8bcbf!important;
  font-style: italic;
}

/* Fee Preview */
.wf-fee-preview {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.wf-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #495057;
}

.wf-fee-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  margin-top: 8px;
  border-top: 2px solid #081526;
  font-size: 18px;
  color: #081526;
}

/* Wheel Specs Grid */
.wf-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.wf-spec-item {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.wf-spec-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.wf-spec-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #081526;
}

/* Checkbox Group */
.wf-checkbox-group {
  margin-bottom: 12px;
}

.wf-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.wf-checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.wf-checkbox-label span {
  font-size: 14px;
  color: #E1E4EB;
  line-height: 1.5;
}

/* Modal Actions */
.wf-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px solid #e9ecef;
}

.wf-offer-cancel,
.wf-offer-submit {
  flex: 1;
  padding: 14px 24px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wf-offer-cancel {
  background: #fff;
  color: #6c757d;
  border: 2px solid #ced4da;
}

.wf-offer-cancel:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

.wf-offer-submit {
  background: #081526;
  color: #fff;
}

.wf-offer-submit:hover {
  background: #1a2942;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 21, 38, 0.3);
}

.wf-offer-submit:disabled {
  background: #adb5bd;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive Modal */
@media (max-width: 768px) {
  .wf-offer-modal-content {
    width: 95%;
    max-height: 95vh;
  }

  .wf-modal-header,
  .wf-modal-body {
    padding: 20px;
  }

  .wf-spec-grid {
    grid-template-columns: 1fr;
  }

  .wf-modal-actions {
    flex-direction: column;
  }
}

/* Contract Specific Styles */
.wf-signature-display {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.wf-signature-display .wf-spec-item {
  flex: 1;
}

.wf-guarantee-text {
  font-size: 14px;
  color: #081526;
  background: #eef2f7;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #081526;
  margin: 12px 0;
}

.wf-disclaimer {
  font-size: 13px;
  color: #6c757d;
  background: #fff3cd;
  color: #856404;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ffeeba;
  margin-top: 16px;
}

.wf-contract-status-accepted {
  color: #28a745;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 8px;
  display: block;
}

/* Offer Card (Chat Stream) */
.wf-offer-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin: 10px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  max-width: 320px;
  font-family: "Wix Madefor Text", sans-serif;
}

.wf-offer-header {
  background: #eef2f7;
  color: #081526;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wf-offer-amount {
  font-size: 28px;
  font-weight: 800;
  color: #081526;
  margin-bottom: 15px;
  line-height: 1;
}

.wf-offer-details {
  border-top: 1px solid #edf2f7;
  padding-top: 12px;
  margin-bottom: 18px;
}

.wf-offer-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}

.wf-offer-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: #081526;
  font-size: 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.wf-btn-accept-offer {
  width: 100%;
  background: #081526;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wf-btn-accept-offer:hover {
  background: #1a2942;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 21, 38, 0.2);
}

.wf-offer-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 8px;
  font-style: italic;
}

.wf-offer-status {
  font-size: 12px;
  color: #081526;
  font-weight: 600;
  margin-top: 5px;
}

/* Offer Bubble Transparency */
.wf-msg-bubble.wf-msg-bubble-offer {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

.wf-msg-bubble.wf-msg-bubble-offer .wf-msg-time {
  color: #868e96 !important;
  text-align: left !important;
  margin-top: 5px;
}

.wf-status-check-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.wf-status-check-img {
  width: 80px;
  height: auto;
  display: block;
}

.wf-btn-sm {
  background-color: #2d3e61;
  color: #fff !important;
  padding: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  border: 1px solid #2d3e61 !important;
}

.wf-btn-sm:hover {
  background-color: #2d3e61;
}

/* ===========================
   PAYMENT & RECEIPT MODAL
   =========================== */

#wf-receipt-modal.wf-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10001;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

#wf-receipt-modal.wf-modal.active {
  display: flex;
}

#wf-receipt-modal .wf-modal-content {
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.wf-receipt-instructions {
  padding: 24px;
  background: #f8faff;
  border-bottom: 2px solid #eef2f7;
}

.wf-bank-details-box {
  background: #fff;
  border: 1px solid #d0e3ff;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.wf-bank-details-box p {
  margin: 4px 0;
  font-size: 14px;
  color: #081526;
}

.wf-modal-amount-notice {
  font-weight: 700;
  color: #081526;
  text-align: center;
  font-size: 16px;
  margin-top: 10px;
}

#wf-receipt-form {
  padding: 24px;
}

#wf-submit-receipt {
  margin-top: 20px;
  width: 100%;
}

.wf-btn-upload-photos {
  margin-right: 10px;
}

.wf-contract-status-verifying {
  color: #f59e0b;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.wf-status-verifying-wrap {
  text-align: center;
  margin: 15px 0;
}

.wf-status-verifying-wrap .dashicons,
.wf-status-verifying-wrap .lucide {
  font-size: 48px;
  width: 48px;
  height: 48px;
  color: #f59e0b;
  animation: wf-pulse 2s infinite;
}

.wf-contract-status-secured {
  color: #10b981;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes wf-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.wf-btn-transfer-funds,
.wf-btn-secure-funds {
  width: 100%;
  padding: 12px;
  background: #081526;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.2s;
}

.wf-btn-transfer-funds:hover,
.wf-btn-secure-funds:hover {
  background: #1a2a40;
}

/* ── Status Update Cards (Chat System) ── */
.wf-status-update-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  width: 100%;
}

.wf-status-update-card h4 {
  margin: 0 0 10px 0;
  color: #081526;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.wf-status-update-card h4 .dashicons,
.wf-status-update-card h4 .lucide {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.wf-status-update-card p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

/* Specific Status Colors */
.wf-status-contract_signed {
  border-left: 4px solid #3b82f6;
}

.wf-status-verifying_payment {
  border-left: 4px solid #f59e0b;
}

.wf-status-funds_secured {
  border-left: 4px solid #10b981;
}

/* Payment Instructions Box */
.wf-payment-instructions {
  margin-top: 15px;
  background: #f8faff;
  border: 1px solid #d0e3ff;
  border-radius: 8px;
  padding: 15px;
}

.wf-payment-instructions .instr-title {
  font-weight: 700;
  color: #081526;
  margin-bottom: 10px;
}

.bank-details-box {
  background: #fff;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.bank-details-box p {
  color: #081526;
  margin: 2px 0;
  font-family: monospace;
}

.amount-due {
  font-size: 15px;
  color: #081526;
  font-weight: 600;
}

.amount-due span {
  color: #2563eb;
  font-size: 18px;
  font-weight: 800;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
}

/* Admin Deals Table */
.wf-admin-deals-container {
  background: transparent;
  border-radius: 4px;
  border: 1px solid #525f7a;
}

.wf-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 0px !important;
}

.wf-admin-table th {
  text-align: left;
  padding: 12px;
  background: #3E4754;
  border-bottom: 2px solid #525f7a;
  font-weight: 700;
  color: #E1E4EB;
}

.wf-admin-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

/* .wf-admin-table tr:hover {
  background: #fcfcfc;
} */

.wf-admin-actions {
  display: flex;
  gap: 8px;
}

.wf-btn-admin-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: transparent;
  color: #bdbdbd;
  text-decoration: none;
  border: 1px solid #ced4da;
  transition: all 0.2s;
  cursor: pointer;
  padding: 0;
}

.wf-btn-admin-action:hover {
  background: #e9ecef;
  color: #081526;
  border-color: #adb5bd;
}

.wf-btn-secure-funds {
  background: #e7f5ff;
  color: #1971c2;
  border-color: #a5d8ff;
}

.wf-btn-secure-funds:hover {
  background: #d0ebff;
  color: #1864ab;
}

/* Status Badges */
.wf-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-pending {
  background: #fff4e6!important;
  color: #d9480f!important;
}

.status-accepted {
  background: #ebfbee;
  color: #2b8a3e;
}

.status-verifying_payment {
  background: #fff9db;
  color: #f08c00;
}

.status-funds_secured {
  background: #e7f5ff;
  color: #1971c2;
}

.status-in_transit {
  background: #f3f0ff;
  color: #6741d9;
}

.status-completed {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.status-cancelled {
  background: #fff5f5;
  color: #c92a2a;
}

/* Status Update Card in Chat */
.wf-status-update-card {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
  text-align: center;
}

.wf-status-update-card h4 {
  margin: 0 0 10px;
  color: #081526;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wf-status-update-card p {
  margin: 0 0 15px;
  font-size: 13px;
  color: #666;
}

.wf-status-update-card.wf-status-funds_secured {
  border-left: 4px solid #1971c2;
}

.wf-status-update-card.wf-status-in_transit {
  border-left: 4px solid #6741d9;
}

.wf-status-update-card.wf-status-completed {
  border-left: 4px solid #2b8a3e;
}

.wf-btn-mark-shipped,
.wf-btn-confirm-delivery {
  background: #081526;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.wf-btn-mark-shipped:hover,
.wf-btn-confirm-delivery:hover {
  background: #1a2a40;
}

.wf-tracking-info {
  background: #fff;
  border: 1px dashed #ced4da;
  padding: 8px;
  margin-bottom: 15px;
  font-family: monospace;
  font-size: 14px;
}

/* ── Packing Photos in Chat ── */
.wf-packing-photos-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 16px;
  max-width: 100%;
}

.wf-packing-photos-card h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #081526;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-packing-photos-card h4 .dashicons,
.wf-packing-photos-card h4 .lucide {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: #6c757d;
}

.wf-packing-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.wf-packing-photo-item {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e9ecef;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.wf-packing-photo-item:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wf-packing-photo-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.wf-packing-photos-count {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6c757d;
}

/* ── Shipment Status Card ── */

.wf-tracking-card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  margin: 15px 0;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #081526;
}

.wf-tracking-header {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e4e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf-tracking-header .carrier-name {
  font-weight: 700;
  color: #081526;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.8px;
}

.wf-tracking-header .tracking-label {
  font-size: 11px;
  color: #6c757d;
  font-weight: 500;
}

.wf-tracking-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  background: linear-gradient(to bottom, #ffffff, #fcfcfc);
}

.wf-tracking-body .tracking-number {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #081526;
  letter-spacing: 0.5px;
  background: #f0f2f5;
  padding: 8px 16px;
  border-radius: 8px;
}

.wf-btn-track-package {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #081526;
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 25px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(8, 21, 38, 0.2);
}

.wf-btn-track-package:hover {
  background: #1a2a40;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(8, 21, 38, 0.3);
}

.wf-buyer-shipment-actions {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 2px dashed #e9ecef;
  text-align: center;
}

.wf-buyer-shipment-actions .action-prompt {
  font-size: 14px;
  color: #495057;
  margin-bottom: 15px !important;
  font-weight: 500;
}

.wf-buyer-shipment-actions .action-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.wf-btn-confirm-delivery {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
}

.wf-btn-confirm-delivery:hover {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
}

.wf-btn-report-issue-small {
  background: #fff;
  color: #dc3545;
  border: 1.5px solid #dc3545;
  padding: 11px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.wf-btn-report-issue-small:hover {
  background: #fff5f5;
  color: #c82333;
  border-color: #c82333;
}

.wf-shipped-card {
  padding: 24px;
  border-radius: 16px;
  background: #f0f7ff;
  border: 1px solid #cce5ff;
}

.wf-shipped-card h4 {
  color: #004085;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

.wf-shipped-card .seller-note {
  margin-top: 15px !important;
  text-align: center;
}

.wf-empty-msg {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  background: #f9f9f9;
  border-radius: 8px;
  color: #666;
  font-style: italic;
  border: 1px dashed #ddd;
}

/* ── Deal Images in Modal ── */
.wf-deal-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.wf-deal-image-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e9ecef;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wf-deal-image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #081526;
}

.wf-deal-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wf-no-images {
  font-size: 14px;
  color: #6c757d;
  font-style: italic;
  padding: 10px 0;
}

/* Disbursement Method Selection */
.wf-disbursement-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}

.wf-method-card {
  border: 1px solid #525f7a;
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
}

.wf-method-card:hover {
  border-color: #525f7a;
  transform: translateY(-2px);
}

.wf-method-icon {
  width: 48px;
  height: 48px;
  background: #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #081526;
}

.wf-method-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.wf-method-card p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
}

.wf-method-card .lucide {
  width: 24px;
  height: 24px;
}

/* Payout Settings specific layout */
.wf-payout-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-payout-type {
  font-weight: 700;
  font-size: 14px;
  color: #E1E4EB;
}

.wf-payout-detail {
  font-size: 13px;
  color: #959da7;
}

/* Form refinement for payout */
.wf-form-group.wf-form-group-top {
  flex-direction: column;
  align-items: flex-start;
}

.wf-form-group.wf-form-group-top label {
  width: 100%;
  margin-bottom: 8px;
}

.wf-field-help {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

/* Dashboard Sidebar Badges */
.wf-nav-badge {
  background: #e11d48;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: auto;
  min-width: 20px;
  text-align: center;
  line-height: normal;
}

.wf-dashboard-nav ul li.active .wf-nav-badge {
  background: #081526;
  color: #fff;
}

/* Notifications View */
.wf-notifications-view {
  background: transparent;
  border-radius: 8px;
  border: 1px solid #525f7a;
  overflow: hidden;
  margin-top: 10px;
}

.wf-notification-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid #525f7a;
  transition: background 0.2s;
}

.wf-notification-item:last-child {
  border-bottom: none;
}

.wf-notification-item.unread {
  background: #f8fafc;
  border-left: 4px solid #081526;
}

.wf-notification-item:hover {
  background: #3E4754;
}

.wf-notif-icon {
  width: 40px;
  height: 40px;
  background: #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
}

.wf-notification-item.unread .wf-notif-icon {
  background: #e0f2fe;
  color: #0369a1;
}

.wf-notif-content {
  flex-grow: 1;
}

.wf-notif-text {
  font-size: 13px !important;
  color: #bdbdbd !important;
  margin-bottom: 4px;
  line-height: 1.5;
}

.wf-notif-time {
  font-size: 13px;
  color: #94a3b8;
}

.wf-notifications-view .wf-empty-state {
  padding: 80px 40px;
  border: none;
}

/* Responsive Table Styling */
@media (max-width: 768px) {

  .wf-inventory-table,
  .wf-inventory-table thead,
  .wf-inventory-table tbody,
  .wf-inventory-table th,
  .wf-inventory-table td,
  .wf-inventory-table tr,
  .wf-admin-table,
  .wf-admin-table thead,
  .wf-admin-table tbody,
  .wf-admin-table th,
  .wf-admin-table td,
  .wf-admin-table tr {
    display: block !important;
  }

  .wf-inventory-table-wrap{
    border: 0px;
  }

  /* Hide table headers on mobile */
  .wf-inventory-table thead tr,
  .wf-admin-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .wf-inventory-table tr,
  .wf-admin-table tr {
    border: 0px;
    margin-bottom: 20px !important;
    background: #1D2330;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  }

  .wf-inventory-table td,
  .wf-admin-table td {
    border: none !important;
    padding: 10px 0 !important;
    position: relative;
    /* padding-left: 45% !important; */
    /* text-align: right !important; */
    min-height: 34px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    font-size: 13px;
  }

  .wf-inventory-table .wf-col-title {
    display: block !important;
  }

  .wf-inventory-table td:before,
  .wf-admin-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 40%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: 700;
    text-align: left;
    color: #64748b;
  }

  /* .status-publish {
    padding: 4px 0px !important;
  } */

  /* Adjustments for specific columns */
  .wf-col-img {
    padding-left: 0 !important;
    justify-content: center !important;
    margin-bottom: 10px;
    border-bottom: 1px solid #f3f4f6 !important;
    padding-bottom: 15px !important;
  }

  .wf-col-img:before {
    display: none;
  }

  .wf-col-title {
    display: block !important;
    text-align: center !important;
    padding-left: 0 !important;
  }

  .wf-col-title:before {
    display: none;
  }

  .wf-col-title strong {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .wf-col-actions {
    justify-content: center !important;
    padding-left: 0 !important;
    border-top: 1px solid #f3f4f6 !important;
    margin-top: 10px;
    padding-top: 15px !important;
    gap: 10px;
  }

  .wf-col-actions:before {
    display: none;
  }

  /* Admin Table Specifics */
  .wf-admin-actions {
    justify-content: flex-end;
  }

  .wf-admin-table td[data-label="Listing"] {
    display: block !important;
    text-align: center !important;
    padding-left: 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    margin-bottom: 10px;
  }

  .wf-admin-table td[data-label="Listing"]:before {
    display: none;
  }
}

/* Google Maps Autocomplete Dropdown Fix */
.pac-container {
  z-index: 99999 !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #eee;
  margin-top: 5px;
}

.wf-photo-status-success
{  
margin-bottom: 10px!important;  color:#3e3e3e !important;
}

.wf-upload-instruction{
color:#3e3e3e !important;
}

.wf-notice.error ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wf-notice.error ul li {
  margin-bottom: 5px;
}
.wf-notice.error ul li:last-child {
  margin-bottom: 0;
}
.wf-input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important;
}

.wf-profile-form .wf-form-group {
  flex-wrap: wrap;
}

.wf-field-error-msg {
  color: #ef4444 !important;
  font-size: 12px!important;
  display: block!important;
  font-weight: 500;
  flex-basis: 100%;
  margin-left: 170px;
}

@media (max-width: 768px) {
  .wf-field-error-msg {
    margin-left: 0;
  }
}