:root {
  --jawz-blue: #3f80e6;
  --jawz-blue-deep: #2f69c6;
  --jawz-blue-soft: #6fa2f0;
  --jawz-pink: #3f80e6;
  --jawz-pink-deep: #2f69c6;
  --jawz-pink-soft: #78aaf2;
  --jawz-ink: #112447;
  --jawz-text: #36527b;
  --jawz-muted: #6f85ab;
  --jawz-line: rgba(255, 255, 255, 0.22);
  --jawz-soft: #edf4ff;
  --jawz-soft-2: #dfeafe;
  --jawz-white: #ffffff;
  --jawz-white-soft: rgba(255, 255, 255, 0.9);
  --jawz-success: #78aaf2;
  --jawz-warning: #6fa2f0;
  --jawz-danger: #dc4d66;
  --jawz-info: #3f80e6;
  --jawz-radius: 28px;
  --jawz-radius-sm: 18px;
  --jawz-pill: 999px;
  --jawz-shadow: 0 26px 60px rgba(17, 36, 71, 0.18);
  --jawz-shadow-sm: 0 12px 28px rgba(17, 36, 71, 0.14);
  --jawz-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --jawz-gradient: linear-gradient(135deg, rgba(63, 128, 230, 0.18), rgba(63, 128, 230, 0.18));
  --jawz-gradient-strong: linear-gradient(135deg, #3f80e6 0%, #4d8dec 45%, #3f80e6 100%);
  --jawz-card-border: 1px solid rgba(255, 255, 255, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--jawz-text);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 12%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.12), transparent 14%),
    linear-gradient(180deg, #4d8dec 0%, #3f80e6 38%, #f1f6ff 38%, #f4f8ff 100%);
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.text-brand { color: var(--jawz-blue) !important; }
.text-pink { color: var(--jawz-pink) !important; }
.text-ink { color: var(--jawz-ink) !important; }
.bg-soft { background: var(--jawz-soft) !important; }
.bg-gradient-brand { background: var(--jawz-gradient-strong); }
.page-shell { min-height: 100vh; }
.section-space { padding: 5rem 0; }
.section-space-sm { padding: 3rem 0; }
.container-narrow { max-width: 960px; }
.small-muted { color: var(--jawz-muted); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  background: rgba(255, 255, 255, 0.18);
  color: var(--jawz-white);
  border-radius: var(--jawz-pill);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.16);
}
.display-title, h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--jawz-ink);
  letter-spacing: -.03em;
}
.display-title {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.02;
  color: var(--jawz-white);
}
.lead-soft {
  color: rgba(255,255,255,.88);
  font-size: 1.05rem;
  line-height: 1.8;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--jawz-white);
}
.brand-mark {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #6fa2f0 0%, #ffffff 55%, #a9c8f8 100%);
  color: #112447;
  box-shadow: var(--jawz-shadow-sm);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.brand-mark.small { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
.brand-stack small {
  display: block;
  color: rgba(255,255,255,.8);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.public-navbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  backdrop-filter: blur(12px);
  background: rgba(63, 128, 230, .88);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.public-navbar .nav-link {
  font-weight: 700;
  color: rgba(255,255,255,.82);
  border-radius: 999px;
  padding-inline: .95rem !important;
}
.public-navbar .nav-link:hover,
.public-navbar .nav-link.active {
  color: var(--jawz-white);
  background: rgba(255,255,255,.12);
}
.navbar-toggler {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .55rem .7rem;
}
.navbar-toggler-icon { filter: brightness(0) invert(1); }
.navbar-actions .btn { min-width: 118px; }
.btn {
  border-radius: var(--jawz-pill);
  padding: .9rem 1.35rem;
  font-weight: 800;
  border-width: 0;
  letter-spacing: .01em;
  box-shadow: var(--jawz-shadow-sm);
}
.btn-brand {
  background: var(--jawz-pink);
  color: #fff;
}
.btn-brand:hover { color: #fff; background: var(--jawz-pink-deep); }
.btn-outline-brand {
  color: var(--jawz-white);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}
.btn-outline-brand:hover { background: rgba(255,255,255,.2); color: var(--jawz-white); }
.btn-soft {
  background: rgba(255,255,255,.92);
  color: var(--jawz-blue-deep);
}
.btn-soft:hover { background: #fff; color: var(--jawz-blue-deep); }
.hero-section {
  position: relative;
  padding: 5.5rem 0 4rem;
  overflow: hidden;
}
.hero-section::before,
.page-banner::before,
.auth-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.15), transparent 18%),
    radial-gradient(circle at 8% 92%, rgba(255,255,255,.13), transparent 18%);
  pointer-events: none;
}
.hero-surface,
.jawz-card,
.metric-card,
.auth-panel,
.sidebar,
.topbar,
.form-panel,
.stats-board,
.review-panel,
.table-shell,
.empty-state,
.content-panel,
.stat-card,
.highlight-banner {
  background: rgba(255,255,255,.95);
  border: var(--jawz-card-border);
  box-shadow: var(--jawz-shadow);
  border-radius: var(--jawz-radius);
}
.hero-surface {
  padding: 2rem;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(238,245,255,.94));
}
.hero-visual {
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(63,128,230,.14), rgba(255,255,255,.96));
}
.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.metric-card { padding: 1.15rem 1.2rem; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
.metric-card .value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.9rem;
  color: var(--jawz-white);
  line-height: 1;
}
.metric-card small { display: block; color: rgba(255,255,255,.84); margin-top: .35rem; }
.jawz-card { padding: 1.5rem; height: 100%; }
.jawz-card.compact { padding: 1.1rem; }
.feature-icon,
.icon-chip,
.stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(63,128,230,.12);
  color: var(--jawz-blue);
  font-size: 1.15rem;
}
.feature-list { display: grid; gap: 1rem; padding-left: 0; }
.feature-list li {
  list-style: none;
  display: flex;
  gap: .8rem;
  color: var(--jawz-muted);
}
.feature-list li i { color: var(--jawz-success); margin-top: .25rem; }
.brand-grid,
.reward-grid,
.insight-grid,
.support-grid,
.stats-grid,
.queue-grid,
.profile-grid,
.action-grid {
  display: grid;
  gap: 1.25rem;
}
.brand-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.reward-grid { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.insight-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.support-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.queue-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.profile-grid { grid-template-columns: 1.4fr .9fr; gap: 1.25rem; }
.action-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.brand-card,
.reward-card,
.review-card,
.queue-card,
.offer-card {
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(63,128,230,.08);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--jawz-shadow-sm);
  height: 100%;
}
.brand-card .thumb,
.reward-card .thumb,
.offer-card .thumb,
.cover-art {
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, rgba(63,128,230,.22), rgba(255,255,255,.1));
  overflow: hidden;
}
.card-body-custom { padding: 1.25rem; }
.card-kicker {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jawz-blue);
}
.rating-row,
.meta-row,
.inline-stack {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.meta-row { color: var(--jawz-muted); font-size: .95rem; }
.chip-row,
.filter-row,
.tab-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.filter-chip,
.status-badge,
.metric-pill,
.tab-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .62rem 1rem;
  border-radius: var(--jawz-pill);
  font-weight: 700;
  font-size: .86rem;
}
.filter-chip {
  background: var(--jawz-soft);
  color: var(--jawz-blue-deep);
  cursor: pointer;
  transition: .25s ease;
  border: 1px solid rgba(63,128,230,.08);
}
.filter-chip.active,
.filter-chip:hover {
  background: var(--jawz-pink);
  color: var(--jawz-white);
}
.status-badge.pending { background: rgba(245, 158, 11, .14); color: #9a6804; }
.status-badge.live,
.status-badge.success { background: rgba(22, 163, 74, .13); color: #0a7a34; }
.status-badge.draft { background: rgba(63,128,230,.12); color: var(--jawz-blue); }
.status-badge.rejected { background: rgba(220,77,102,.12); color: var(--jawz-danger); }
.status-badge.warning { background: rgba(245,158,11,.15); color: #ab6f00; }
.metric-pill { background: rgba(63,128,230,.1); color: var(--jawz-pink); }
.page-banner {
  position: relative;
  padding: 4rem 0 2rem;
}
.page-banner .jawz-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,255,.95));
}
.site-footer {
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(63,128,230,.92);
}
.site-footer .brand-logo,
.site-footer .footer-link { color: rgba(255,255,255,.9); font-weight: 600; }
.site-footer .footer-link:hover { color: var(--jawz-white); }
.auth-shell {
  min-height: 100vh;
  padding: 2rem 0;
  position: relative;
}
.auth-panel { overflow: hidden; }
.auth-visual {
  background: linear-gradient(180deg, rgba(63,128,230,.88), rgba(63,128,230,.62));
  padding: 2rem;
  min-height: 100%;
  color: var(--jawz-white);
}
.auth-visual .hero-illustration {
  background: rgba(255,255,255,.12);
  border-radius: var(--jawz-radius);
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.form-panel { padding: 1.8rem; }
.form-label {
  color: var(--jawz-ink);
  font-weight: 700;
  margin-bottom: .45rem;
}
.form-control,
.form-select,
.form-check-input,
textarea.form-control {
  border: 1px solid rgba(63,128,230,.1);
  border-radius: var(--jawz-pill);
  padding: .95rem 1.15rem;
  min-height: 56px;
  background: var(--jawz-white);
  box-shadow: var(--jawz-shadow-inset) !important;
}
textarea.form-control { min-height: 150px; border-radius: 24px; }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(63,128,230,.48);
  background: #fff;
}
.form-check-input {
  min-height: 20px;
  width: 20px;
  padding: 0;
  border-radius: 6px !important;
}
.form-check-input:checked { background-color: var(--jawz-pink); border-color: var(--jawz-pink); }
.upload-dropzone {
  border: 2px dashed rgba(63,128,230,.28);
  border-radius: 24px;
  padding: 1.4rem;
  background: rgba(63,128,230,.04);
  text-align: center;
}
.app-shell {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 292px;
  margin: 1rem 0 1rem 1rem;
  padding: 1.35rem;
  position: sticky;
  top: 1rem;
  height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background: linear-gradient(180deg, rgba(63,128,230,.96), rgba(63,128,230,.88));
  color: rgba(255,255,255,.9);
}
.sidebar .small-muted,
.sidebar .brand-stack small { color: rgba(255,255,255,.72); }
.sidebar .nav-link {
  color: rgba(255,255,255,.82);
  padding: .9rem 1rem;
  border-radius: 18px;
  font-weight: 700;
  display: flex;
  gap: .85rem;
  align-items: center;
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background: var(--jawz-pink);
  color: var(--jawz-white);
}
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1rem;
}
.sidebar-footer .jawz-card { background: rgba(255,255,255,.12); color: var(--jawz-white); box-shadow: none; }
.sidebar-footer .small-muted,
.sidebar-footer .card-kicker,
.sidebar-footer h6 { color: var(--jawz-white); }
.content-area {
  flex: 1;
  padding: 1rem;
}
.topbar {
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(63,128,230,.98), rgba(63,128,230,.88));
  color: var(--jawz-white);
}
.topbar h3,
.topbar .small-muted { color: var(--jawz-white); }
.topbar .small-muted { opacity: .76; }
.topbar-search {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.topbar-search i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jawz-muted);
}
.topbar-search input {
  padding-left: 2.7rem;
  background: rgba(255,255,255,.96);
}
.content-panel,
.stats-board,
.review-panel,
.table-shell,
.empty-state { padding: 1.5rem; }
.stats-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.stat-card {
  padding: 1.25rem;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,255,.95));
  border: 1px solid rgba(63,128,230,.08);
  box-shadow: var(--jawz-shadow-sm);
}
.stat-card .stat-value {
  font-size: 2rem;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--jawz-ink);
}
.kpi-label {
  color: var(--jawz-blue);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
}
.trend-up { color: var(--jawz-success); font-weight: 700; }
.trend-down { color: var(--jawz-danger); font-weight: 700; }
.table-shell table { margin-bottom: 0; }
.table-shell thead th {
  border-bottom: 1px solid rgba(63,128,230,.08);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .78rem;
  color: var(--jawz-muted);
}
.table-shell tbody td {
  padding: 1rem .75rem;
  vertical-align: middle;
  border-color: rgba(63,128,230,.06);
}
.avatar,
.brand-avatar,
.user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(63,128,230,.18), rgba(63,128,230,.16));
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--jawz-blue-deep);
}
.avatar.lg { width: 72px; height: 72px; font-size: 1.4rem; }
.sidebar-toggle,
.sidebar-overlay {
  display: none;
}
.progress-ring,
.progress-line {
  height: 12px;
  border-radius: 999px;
  background: rgba(63,128,230,.08);
  overflow: hidden;
}
.progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3f80e6, #3f80e6);
}
.review-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.review-row + .review-row {
  border-top: 1px solid rgba(63,128,230,.08);
  margin-top: 1rem;
  padding-top: 1rem;
}
.rating-bar {
  display: grid;
  grid-template-columns: 28px 1fr 40px;
  gap: .75rem;
  align-items: center;
  color: var(--jawz-muted);
  margin-bottom: .55rem;
}
.rating-bar .bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(63,128,230,.08);
  overflow: hidden;
}
.rating-bar .bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3f80e6, #3f80e6);
}
.timeline {
  position: relative;
  padding-left: 1.2rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: rgba(63,128,230,.1);
}
.timeline-item {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 1.2rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -.1rem;
  top: .3rem;
  width: .8rem;
  height: .8rem;
  border-radius: 999px;
  background: var(--jawz-pink);
  box-shadow: 0 0 0 4px rgba(63,128,230,.12);
}
.hero-callout,
.highlight-banner {
  padding: 1.6rem;
  background: linear-gradient(135deg, rgba(63,128,230,.12), rgba(63,128,230,.1));
}
.toast-note {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: .95rem 1.15rem;
  background: rgba(17,36,71,.92);
  color: #fff;
  border-radius: 18px;
  box-shadow: var(--jawz-shadow-sm);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .25s ease;
  z-index: 1080;
}
.toast-note.show {
  opacity: 1;
  transform: translateY(0);
}
.modal-shell {
  background: rgba(255,255,255,.98);
  border-radius: var(--jawz-radius);
  box-shadow: var(--jawz-shadow);
  padding: 1.4rem;
}
.empty-state {
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,245,255,.95));
}
.table-shell .btn,
.review-card .btn,
.content-panel .btn { box-shadow: none; }

@media (max-width: 1199.98px) {
  .sidebar {
    position: fixed;
    top: 1rem;
    left: 0;
    transform: translateX(-110%);
    z-index: 1050;
    transition: transform .25s ease;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17,36,71,.38);
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
    z-index: 1040;
  }
  .sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 991.98px) {
  body {
    background: linear-gradient(180deg, #4d8dec 0%, #3f80e6 26%, #f1f6ff 26%, #f4f8ff 100%);
  }
  .hero-section { padding-top: 4rem; }
  .metric-strip,
  .profile-grid { grid-template-columns: 1fr; }
  .section-space { padding: 3.5rem 0; }
  .public-navbar .navbar-collapse {
    background: rgba(47,105,198,.96);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 24px;
  }
}

@media (max-width: 767.98px) {
  .display-title { font-size: 2.35rem; }
  .hero-surface,
  .jawz-card,
  .content-panel,
  .stats-board,
  .topbar,
  .table-shell,
  .review-panel,
  .auth-panel,
  .form-panel {
    border-radius: 24px;
  }
  .auth-shell { padding: 1rem 0 2rem; }
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .topbar-search { max-width: none; }
  .content-area { padding: .75rem; }
  .sidebar {
    width: min(86vw, 292px);
    margin: .75rem 0 .75rem .75rem;
    height: calc(100vh - 1.5rem);
  }
}

/* Premium UI refresh - consolidated overrides */
:root {
  --jawz-blue: #3f80e6;
  --jawz-blue-deep: #2f69c6;
  --jawz-blue-soft: #78aaf2;
  --jawz-pink: #3f80e6;
  --jawz-pink-deep: #2f69c6;
  --jawz-pink-soft: #a9c8f8;
  --jawz-ink: #0e1726;
  --jawz-text: #42526b;
  --jawz-muted: #718096;
  --jawz-line: rgba(14, 23, 38, 0.1);
  --jawz-soft: #f4f8ff;
  --jawz-soft-2: #dfeafe;
  --jawz-radius: 20px;
  --jawz-radius-sm: 12px;
  --jawz-pill: 14px;
  --jawz-shadow: 0 24px 70px rgba(14, 23, 38, 0.11);
  --jawz-shadow-sm: 0 14px 34px rgba(14, 23, 38, 0.08);
  --jawz-gradient: linear-gradient(135deg, rgba(63, 128, 230, 0.16), rgba(14, 23, 38, 0.04));
  --jawz-gradient-strong: linear-gradient(135deg, #3f80e6 0%, #3474d6 52%, #245cb3 100%);
  --jawz-card-border: 1px solid rgba(14, 23, 38, 0.07);
}

body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--jawz-text);
  background:
    radial-gradient(circle at 8% 2%, rgba(63,128,230,.22), transparent 25%),
    radial-gradient(circle at 92% 10%, rgba(14,23,38,.08), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, #edf4ff 42%, #f8fbff 100%);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(14,23,38,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(14,23,38,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 70%);
}

h1, h2, h3, h4, h5, h6, .display-title {
  color: var(--jawz-ink);
  letter-spacing: -.035em;
  line-height: 1.1;
}

h2 { font-size: clamp(1.8rem, 3vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2vw, 2rem); }
h4 { font-size: clamp(1.08rem, 1.4vw, 1.35rem); }
p { margin-bottom: 1rem; }

.section-space { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-space-sm { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.container { max-width: 1180px; }

.public-navbar {
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(14,23,38,.08);
  box-shadow: 0 12px 34px rgba(14,23,38,.06);
}
@supports (backdrop-filter: blur(18px)) {
  .public-navbar { backdrop-filter: blur(18px); }
}
.public-navbar .navbar { padding-block: .85rem !important; }
.public-navbar .nav-link {
  color: rgba(14,23,38,.68);
  border-radius: 12px;
  font-size: .95rem;
  padding: .65rem .85rem !important;
  transition: all .22s ease;
}
.public-navbar .nav-link:hover,
.public-navbar .nav-link.active {
  color: var(--jawz-ink);
  background: rgba(63,128,230,.13);
}
.navbar-toggler {
  background: rgba(63,128,230,.13);
  border-radius: 12px;
  box-shadow: none;
}
.navbar-toggler-icon { filter: none; }

.brand-logo { gap: 0; color: var(--jawz-ink); min-width: 0; }
.brand-logo-img {
  width: auto;
  height: 54px;
  max-width: 178px;
  object-fit: contain;
  transition: transform .25s ease, filter .25s ease;
}
.brand-logo:hover .brand-logo-img { transform: translateY(-1px) scale(1.02); }
.sidebar .brand-logo-img { height: 58px; max-width: 185px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.12)); }
.site-footer .brand-logo-img { height: 58px; max-width: 188px; }
.auth-visual .brand-logo-img { height: 62px; max-width: 198px; filter: drop-shadow(0 12px 26px rgba(0,0,0,.12)); }

.btn {
  border-radius: 12px;
  padding: .82rem 1.2rem;
  font-size: .95rem;
  font-weight: 800;
  box-shadow: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-brand,
.btn-primary {
  background: #3f80e6 !important;
  border-color: #3f80e6 !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(63,128,230,.28);
}
.btn-brand:hover,
.btn-primary:hover {
  background: #3474d6 !important;
  border-color: #3474d6 !important;
  box-shadow: 0 18px 38px rgba(63,128,230,.38);
}
.btn-soft,
.btn-outline-brand {
  color: var(--jawz-ink);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(63,128,230,.28);
  box-shadow: 0 12px 26px rgba(14,23,38,.06);
}
.btn-soft:hover,
.btn-outline-brand:hover {
  background: rgba(63,128,230,.13);
  color: var(--jawz-ink);
  border-color: rgba(63,128,230,.5);
}
.btn-sm { padding: .55rem .8rem; border-radius: 10px; }

.hero-section,
.page-banner,
.auth-shell {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
}
.hero-section::before,
.page-banner::before,
.auth-shell::before { opacity: .55; }
.display-title {
  font-size: clamp(2.6rem, 6vw, 5.25rem);
  color: var(--jawz-ink);
  max-width: 980px;
}
.lead-soft {
  color: #516079;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.8;
}
.eyebrow {
  background: rgba(63,128,230,.13);
  color: #2f69c6;
  border: 1px solid rgba(63,128,230,.2);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hero-surface,
.jawz-card,
.metric-card,
.auth-panel,
.sidebar,
.topbar,
.form-panel,
.stats-board,
.review-panel,
.table-shell,
.empty-state,
.content-panel,
.stat-card,
.highlight-banner,
.brand-card,
.reward-card,
.review-card,
.queue-card,
.offer-card {
  border-radius: var(--jawz-radius);
  border: var(--jawz-card-border);
  box-shadow: var(--jawz-shadow-sm);
}
.hero-surface,
.jawz-card,
.form-panel,
.content-panel,
.table-shell,
.review-panel,
.stats-board,
.empty-state {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
}
.jawz-card,
.brand-card,
.reward-card,
.review-card,
.queue-card,
.offer-card,
.stat-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.jawz-card:hover,
.brand-card:hover,
.reward-card:hover,
.review-card:hover,
.queue-card:hover,
.offer-card:hover,
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--jawz-shadow);
  border-color: rgba(63,128,230,.2);
}

.card-body-custom { padding: clamp(1.1rem, 2vw, 1.55rem); }
.brand-card .thumb,
.reward-card .thumb,
.offer-card .thumb,
.cover-art {
  background: linear-gradient(135deg, rgba(63,128,230,.18), rgba(14,23,38,.04));
}
.feature-icon,
.icon-chip,
.stat-icon {
  border-radius: 14px;
  background: rgba(63,128,230,.14);
  color: #2f69c6;
}
.card-kicker,
.kpi-label { color: #2f69c6; }
.filter-chip,
.status-badge,
.metric-pill,
.tab-chip { border-radius: 999px; }
.filter-chip { background: rgba(63,128,230,.1); color: #2f69c6; border-color: rgba(63,128,230,.18); }
.filter-chip.active,
.filter-chip:hover { background: #3f80e6; color: #fff; }
.metric-pill { background: rgba(63,128,230,.12); color: #2f69c6; }
.progress-line span,
.rating-bar .bar span { background: linear-gradient(90deg, #3f80e6, #245cb3); }
.timeline-item::before { background: #3f80e6; box-shadow: 0 0 0 4px rgba(63,128,230,.16); }

.site-footer {
  background: #0f1a2a;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 0 !important;
}
.site-footer .footer-link {
  color: rgba(255,255,255,.72);
  transition: color .22s ease, transform .22s ease;
}
.site-footer .footer-link:hover { color: #fff; transform: translateY(-1px); }

.auth-panel { overflow: hidden; background: rgba(255,255,255,.92); }
.auth-visual,
.sidebar,
.topbar {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.2), transparent 26%),
    linear-gradient(155deg, #3f80e6 0%, #2f69c6 56%, #112447 100%);
}
.auth-visual { padding: clamp(1.5rem, 3vw, 2.4rem); }
.form-panel { padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: none; }
.form-control,
.form-select,
textarea.form-control {
  border-radius: 12px;
  min-height: 52px;
  padding: .85rem 1rem;
  border: 1px solid rgba(14,23,38,.1);
  background: rgba(255,255,255,.92);
  box-shadow: none !important;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
textarea.form-control { border-radius: 14px; }
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: rgba(63,128,230,.72);
  box-shadow: 0 0 0 .25rem rgba(63,128,230,.14) !important;
}
.form-check-input:checked { background-color: #3f80e6; border-color: #3f80e6; }
.upload-dropzone { border-color: rgba(63,128,230,.34); background: rgba(63,128,230,.08); border-radius: 16px; }

.app-shell { background: transparent; }
.sidebar { width: 284px; border-radius: 22px; }
.sidebar .nav-link { border-radius: 12px; transition: all .22s ease; }
.sidebar .nav-link.active,
.sidebar .nav-link:hover { background: rgba(255,255,255,.16); color: #fff; transform: translateX(3px); }
.sidebar-footer .jawz-card { background: rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.topbar { border-radius: 20px; }
.content-area { min-width: 0; }
.stats-board { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.table-shell { overflow-x: auto; }
.table { min-width: 720px; }
.topbar-search input { border: 0; }
.avatar,
.brand-avatar,
.user-avatar { border-radius: 14px; background: rgba(63,128,230,.14); color: #2f69c6; }

.brand-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.reward-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
.insight-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.support-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.queue-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.action-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.profile-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr); }

.hero-surface img,
.auth-visual img,
.thumb img,
.cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-surface img,
.auth-visual img { height: auto; object-fit: contain; }

@keyframes jawzFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
main > section,
.auth-panel,
.app-shell .content-area > * {
  animation: jawzFadeUp .55s ease both;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

@media (max-width: 1199.98px) {
  .sidebar { transform: translateX(-112%); }
}
@media (max-width: 991.98px) {
  body { background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 50%, #f8fbff 100%); }
  .public-navbar .navbar-collapse {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(14,23,38,.08);
    box-shadow: var(--jawz-shadow-sm);
    border-radius: 18px;
  }
  .navbar-actions .btn { width: 100%; }
  .profile-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 300px; }
  .metric-strip { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .brand-logo-img { height: 46px; max-width: 150px; }
  .display-title { font-size: clamp(2.15rem, 10vw, 3rem); }
  .section-space { padding: 3rem 0; }
  .section-space-sm { padding: 2.35rem 0; }
  .hero-section, .page-banner { padding-top: 3rem; }
  .btn { width: auto; padding: .76rem 1rem; }
  .d-flex.flex-wrap.gap-3 .btn,
  .navbar-actions .btn { width: 100%; }
  .content-area { padding: .6rem; }
  .topbar { padding: .9rem; }
  .stats-board, .content-panel, .table-shell, .review-panel, .form-panel, .jawz-card { padding: 1rem; }
  .sidebar { width: min(88vw, 300px); }
  .table { min-width: 640px; }
}
@media (max-width: 420px) {
  .container { padding-inline: 1rem; }
  .brand-logo-img { height: 42px; max-width: 136px; }
  .hero-section .d-flex.gap-3,
  .page-banner .d-flex.gap-3 { flex-direction: column; align-items: stretch; }
  .hero-section .btn,
  .page-banner .btn { width: 100%; }
}

/* =========================================================
   Page isolated polish pass
   Each HTML page has a body class (.page-*) so layout fixes
   are scoped and do not leak across unrelated screens.
   ========================================================= */

/* Global safety rails used by every isolated page */
[class^="page-"] main,
[class*=" page-"] main,
[class^="page-"] section,
[class*=" page-"] section { min-width: 0; }

[class^="page-"] h1,
[class^="page-"] h2,
[class^="page-"] h3,
[class^="page-"] h4,
[class^="page-"] h5,
[class^="page-"] h6,
[class*=" page-"] h1,
[class*=" page-"] h2,
[class*=" page-"] h3,
[class*=" page-"] h4,
[class*=" page-"] h5,
[class*=" page-"] h6 {
  overflow-wrap: anywhere;
}

[class^="page-"] .display-title,
[class*=" page-"] .display-title {
  font-size: clamp(2.15rem, 4.9vw, 4.15rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

[class^="page-"] .lead-soft,
[class*=" page-"] .lead-soft {
  max-width: 680px;
}

[class^="page-"] .jawz-card,
[class*=" page-"] .jawz-card,
[class^="page-"] .content-panel,
[class*=" page-"] .content-panel,
[class^="page-"] .table-shell,
[class*=" page-"] .table-shell,
[class^="page-"] .review-panel,
[class*=" page-"] .review-panel {
  overflow: hidden;
}

/* Public landing page */
.page-index .hero-section { padding: clamp(3.6rem, 6vw, 5.8rem) 0 clamp(2.5rem, 5vw, 4rem); }
.page-index .hero-section .display-title {
  font-size: clamp(2.35rem, 4.8vw, 4.45rem);
  max-width: 760px;
  text-wrap: balance;
}
.page-index .hero-section .row { align-items: center; }
.page-index .metric-strip { max-width: 700px; }
.page-index .hero-visual { min-height: clamp(280px, 34vw, 430px); }
.page-index #how-it-works h2,
.page-index #rewards h2 { max-width: 760px; text-wrap: balance; }

/* Public secondary pages */
.page-about .page-banner,
.page-contact .page-banner,
.page-vendor-onboarding .page-banner,
.page-discover .page-banner,
.page-favorites .page-banner,
.page-reward-detail .page-banner {
  padding-top: clamp(3rem, 5.2vw, 5rem);
  padding-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.page-about .page-banner h1,
.page-contact .page-banner h1,
.page-vendor-onboarding .page-banner h1,
.page-discover .page-banner h1,
.page-favorites .page-banner h1,
.page-reward-detail .page-banner h1 {
  font-size: clamp(2.1rem, 4vw, 3.7rem);
  max-width: 880px;
  text-wrap: balance;
}
.page-contact .form-panel,
.page-vendor-onboarding .form-panel { align-self: stretch; }
.page-discover .reward-grid,
.page-favorites .reward-grid { align-items: stretch; }
.page-reward-detail .cover-art { max-height: 420px; }

/* Authentication pages */
.page-login .auth-shell,
.page-signup .auth-shell,
.page-admin-login .auth-shell {
  padding: clamp(0rem, 2.5vw, 0rem);
  align-items: center !important;
}
.page-login .auth-panel,
.page-signup .auth-panel,
.page-admin-login .auth-panel {
  max-width: 1120px;
  margin-inline: auto;
  min-height: auto;
}
.page-login .auth-visual,
.page-signup .auth-visual,
.page-admin-login .auth-visual {
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  gap: 1.2rem;
}
.page-login .auth-visual .eyebrow,
.page-signup .auth-visual .eyebrow,
.page-admin-login .auth-visual .eyebrow { margin-bottom: 1rem !important; }
.page-login .auth-visual .display-title,
.page-signup .auth-visual .display-title,
.page-admin-login .auth-visual .display-title {
  font-size: clamp(1.9rem, 3.2vw, 3.05rem);
  line-height: 1.12;
  max-width: 520px;
  margin-top: 1.25rem !important;
  text-wrap: balance;
}
.page-login .auth-visual .lead-soft,
.page-signup .auth-visual .lead-soft,
.page-admin-login .auth-visual .lead-soft {
  font-size: .98rem;
  line-height: 1.65;
  max-width: 500px;
}
.page-login .auth-visual .jawz-card,
.page-signup .auth-visual .jawz-card,
.page-admin-login .auth-visual .jawz-card { background: rgba(255,255,255,.9); }
.page-login .auth-visual .hero-illustration,
.page-signup .auth-visual .hero-illustration,
.page-admin-login .auth-visual .hero-illustration { display: none; }
.page-login .form-panel h2,
.page-signup .form-panel h2,
.page-admin-login .form-panel h2 { font-size: clamp(1.65rem, 2.8vw, 2.25rem); }
.page-login .form-panel .container-narrow,
.page-signup .form-panel .container-narrow,
.page-admin-login .form-panel .container-narrow { max-width: 560px; }

/* Shared dashboard/application pages */
.page-user-dashboard .app-shell,
.page-user-profile .app-shell,
.page-vendor-dashboard .app-shell,
.page-offer-management .app-shell,
.page-create-offer .app-shell,
.page-vendor-reviews .app-shell,
.page-admin-dashboard .app-shell,
.page-admin-approvals .app-shell,
.page-admin-review-detail .app-shell {
  gap: 0;
}
.page-user-dashboard .sidebar,
.page-user-profile .sidebar,
.page-vendor-dashboard .sidebar,
.page-offer-management .sidebar,
.page-create-offer .sidebar,
.page-vendor-reviews .sidebar,
.page-admin-dashboard .sidebar,
.page-admin-approvals .sidebar,
.page-admin-review-detail .sidebar {
  width: 268px;
  padding: 1rem;
  gap: .85rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.page-user-dashboard .sidebar .brand-logo-img,
.page-user-profile .sidebar .brand-logo-img,
.page-vendor-dashboard .sidebar .brand-logo-img,
.page-offer-management .sidebar .brand-logo-img,
.page-create-offer .sidebar .brand-logo-img,
.page-vendor-reviews .sidebar .brand-logo-img,
.page-admin-dashboard .sidebar .brand-logo-img,
.page-admin-approvals .sidebar .brand-logo-img,
.page-admin-review-detail .sidebar .brand-logo-img {
  height: 46px;
  max-width: 152px;
}
.page-user-dashboard .sidebar > .small-muted,
.page-user-profile .sidebar > .small-muted,
.page-vendor-dashboard .sidebar > .small-muted,
.page-offer-management .sidebar > .small-muted,
.page-create-offer .sidebar > .small-muted,
.page-vendor-reviews .sidebar > .small-muted,
.page-admin-dashboard .sidebar > .small-muted,
.page-admin-approvals .sidebar > .small-muted,
.page-admin-review-detail .sidebar > .small-muted {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}
.page-user-dashboard .sidebar .nav-link,
.page-user-profile .sidebar .nav-link,
.page-vendor-dashboard .sidebar .nav-link,
.page-offer-management .sidebar .nav-link,
.page-create-offer .sidebar .nav-link,
.page-vendor-reviews .sidebar .nav-link,
.page-admin-dashboard .sidebar .nav-link,
.page-admin-approvals .sidebar .nav-link,
.page-admin-review-detail .sidebar .nav-link {
  padding: .68rem .75rem;
  font-size: .95rem;
  line-height: 1.25;
  gap: .7rem;
}
.page-user-dashboard .sidebar .nav-link i,
.page-user-profile .sidebar .nav-link i,
.page-vendor-dashboard .sidebar .nav-link i,
.page-offer-management .sidebar .nav-link i,
.page-create-offer .sidebar .nav-link i,
.page-vendor-reviews .sidebar .nav-link i,
.page-admin-dashboard .sidebar .nav-link i,
.page-admin-approvals .sidebar .nav-link i,
.page-admin-review-detail .sidebar .nav-link i { min-width: 1.1rem; }
.page-user-dashboard .sidebar-footer .jawz-card,
.page-user-profile .sidebar-footer .jawz-card,
.page-vendor-dashboard .sidebar-footer .jawz-card,
.page-offer-management .sidebar-footer .jawz-card,
.page-create-offer .sidebar-footer .jawz-card,
.page-vendor-reviews .sidebar-footer .jawz-card,
.page-admin-dashboard .sidebar-footer .jawz-card,
.page-admin-approvals .sidebar-footer .jawz-card,
.page-admin-review-detail .sidebar-footer .jawz-card { padding: .85rem; }
.page-user-dashboard .sidebar-footer h6,
.page-user-profile .sidebar-footer h6,
.page-vendor-dashboard .sidebar-footer h6,
.page-offer-management .sidebar-footer h6,
.page-create-offer .sidebar-footer h6,
.page-vendor-reviews .sidebar-footer h6,
.page-admin-dashboard .sidebar-footer h6,
.page-admin-approvals .sidebar-footer h6,
.page-admin-review-detail .sidebar-footer h6 { font-size: .92rem; }
.page-user-dashboard .sidebar-footer p,
.page-user-profile .sidebar-footer p,
.page-vendor-dashboard .sidebar-footer p,
.page-offer-management .sidebar-footer p,
.page-create-offer .sidebar-footer p,
.page-vendor-reviews .sidebar-footer p,
.page-admin-dashboard .sidebar-footer p,
.page-admin-approvals .sidebar-footer p,
.page-admin-review-detail .sidebar-footer p { font-size: .78rem; line-height: 1.45; }
.page-user-dashboard .content-area,
.page-user-profile .content-area,
.page-vendor-dashboard .content-area,
.page-offer-management .content-area,
.page-create-offer .content-area,
.page-vendor-reviews .content-area,
.page-admin-dashboard .content-area,
.page-admin-approvals .content-area,
.page-admin-review-detail .content-area {
  padding: clamp(.75rem, 1.5vw, 1.25rem);
}
.page-user-dashboard .topbar h3,
.page-user-profile .topbar h3,
.page-vendor-dashboard .topbar h3,
.page-offer-management .topbar h3,
.page-create-offer .topbar h3,
.page-vendor-reviews .topbar h3,
.page-admin-dashboard .topbar h3,
.page-admin-approvals .topbar h3,
.page-admin-review-detail .topbar h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}
.page-user-dashboard .stat-card .stat-value,
.page-user-profile .stat-card .stat-value,
.page-vendor-dashboard .stat-card .stat-value,
.page-offer-management .stat-card .stat-value,
.page-create-offer .stat-card .stat-value,
.page-vendor-reviews .stat-card .stat-value,
.page-admin-dashboard .stat-card .stat-value,
.page-admin-approvals .stat-card .stat-value,
.page-admin-review-detail .stat-card .stat-value {
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  line-height: 1.08;
}
.page-admin-dashboard .stats-board,
.page-user-dashboard .stats-board,
.page-vendor-dashboard .stats-board { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.page-admin-approvals .queue-grid,
.page-admin-review-detail .queue-grid,
.page-vendor-reviews .queue-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.page-create-offer .form-panel,
.page-user-profile .form-panel { padding: clamp(1rem, 2vw, 1.5rem); }

/* Low-height laptop/sidebar protection */
@media (max-height: 760px) and (min-width: 1200px) {
  .page-user-dashboard .sidebar,
  .page-user-profile .sidebar,
  .page-vendor-dashboard .sidebar,
  .page-offer-management .sidebar,
  .page-create-offer .sidebar,
  .page-vendor-reviews .sidebar,
  .page-admin-dashboard .sidebar,
  .page-admin-approvals .sidebar,
  .page-admin-review-detail .sidebar { gap: .55rem; }
  .page-user-dashboard .sidebar .nav-link,
  .page-user-profile .sidebar .nav-link,
  .page-vendor-dashboard .sidebar .nav-link,
  .page-offer-management .sidebar .nav-link,
  .page-create-offer .sidebar .nav-link,
  .page-vendor-reviews .sidebar .nav-link,
  .page-admin-dashboard .sidebar .nav-link,
  .page-admin-approvals .sidebar .nav-link,
  .page-admin-review-detail .sidebar .nav-link { padding-block: .55rem; }
  .page-user-dashboard .sidebar-footer,
  .page-user-profile .sidebar-footer,
  .page-vendor-dashboard .sidebar-footer,
  .page-offer-management .sidebar-footer,
  .page-create-offer .sidebar-footer,
  .page-vendor-reviews .sidebar-footer,
  .page-admin-dashboard .sidebar-footer,
  .page-admin-approvals .sidebar-footer,
  .page-admin-review-detail .sidebar-footer { display: none; }
}

@media (max-width: 1199.98px) {
  .page-user-dashboard .sidebar,
  .page-user-profile .sidebar,
  .page-vendor-dashboard .sidebar,
  .page-offer-management .sidebar,
  .page-create-offer .sidebar,
  .page-vendor-reviews .sidebar,
  .page-admin-dashboard .sidebar,
  .page-admin-approvals .sidebar,
  .page-admin-review-detail .sidebar { width: min(84vw, 280px); }
}

@media (max-width: 991.98px) {
  [class^="page-"] .display-title,
  [class*=" page-"] .display-title { font-size: clamp(2rem, 7vw, 3.25rem); }
  .page-login .auth-panel,
  .page-signup .auth-panel,
  .page-admin-login .auth-panel { display: block; }
  .page-login .auth-visual,
  .page-signup .auth-visual,
  .page-admin-login .auth-visual { min-height: auto; }
  .page-login .auth-visual .display-title,
  .page-signup .auth-visual .display-title,
  .page-admin-login .auth-visual .display-title { font-size: clamp(1.9rem, 6vw, 2.8rem); }
  .page-login .auth-visual .jawz-card,
  .page-signup .auth-visual .jawz-card,
  .page-admin-login .auth-visual .jawz-card { display: none; }
  .page-index .hero-section .display-title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .topbar > .d-flex { width: 100%; }
  .topbar .ms-auto { margin-left: 0 !important; }
}

@media (max-width: 767.98px) {
  [class^="page-"] .display-title,
  [class*=" page-"] .display-title { font-size: clamp(1.95rem, 9vw, 2.75rem); }
  .page-index .hero-section .display-title,
  .page-about .page-banner h1,
  .page-contact .page-banner h1,
  .page-vendor-onboarding .page-banner h1,
  .page-discover .page-banner h1,
  .page-favorites .page-banner h1,
  .page-reward-detail .page-banner h1 { font-size: clamp(1.95rem, 9vw, 2.8rem); }
  .page-login .auth-shell,
  .page-signup .auth-shell,
  .page-admin-login .auth-shell { padding: .75rem; }
  .page-login .form-panel .d-flex.justify-content-between,
  .page-signup .form-panel .d-flex.justify-content-between,
  .page-admin-login .form-panel .d-flex.justify-content-between { align-items: stretch !important; }
  .page-login .form-panel .btn-soft,
  .page-signup .form-panel .btn-soft,
  .page-admin-login .form-panel .btn-soft { width: 100%; }
  .page-user-dashboard .topbar,
  .page-user-profile .topbar,
  .page-vendor-dashboard .topbar,
  .page-offer-management .topbar,
  .page-create-offer .topbar,
  .page-vendor-reviews .topbar,
  .page-admin-dashboard .topbar,
  .page-admin-approvals .topbar,
  .page-admin-review-detail .topbar { gap: .75rem; }
  .page-user-dashboard .topbar .btn,
  .page-user-profile .topbar .btn,
  .page-vendor-dashboard .topbar .btn,
  .page-offer-management .topbar .btn,
  .page-create-offer .topbar .btn,
  .page-vendor-reviews .topbar .btn,
  .page-admin-dashboard .topbar .btn,
  .page-admin-approvals .topbar .btn,
  .page-admin-review-detail .topbar .btn { width: auto; }
  .review-row { gap: .75rem; }
  .avatar, .brand-avatar, .user-avatar { width: 40px; height: 40px; border-radius: 12px; }
}

@media (max-width: 480px) {
  .public-navbar .navbar { padding-block: .65rem !important; }
  .page-index .metric-card .value { font-size: 1.55rem; }
  .page-login .auth-visual .display-title,
  .page-signup .auth-visual .display-title,
  .page-admin-login .auth-visual .display-title { font-size: 1.9rem; }
  .page-login .auth-visual,
  .page-signup .auth-visual,
  .page-admin-login .auth-visual,
  .page-login .form-panel,
  .page-signup .form-panel,
  .page-admin-login .form-panel { padding: 1rem; }
  .stats-board { grid-template-columns: 1fr; }
  .content-panel .d-flex.justify-content-between,
  .table-shell .d-flex.justify-content-between { align-items: stretch !important; }
  .content-panel .d-flex.justify-content-between .btn,
  .table-shell .d-flex.justify-content-between .btn { width: 100%; }
}

/* =========================================================
   Full visual QA pass: contrast, typography, consistency
   Main theme color retained: #3f80e6
   ========================================================= */
:root {
  --jawz-blue: #3f80e6;
  --jawz-blue-deep: #2767c9;
  --jawz-blue-dark: #174a9b;
  --jawz-blue-soft: #eaf2ff;
  --jawz-ink: #101828;
  --jawz-text: #344054;
  --jawz-muted: #667085;
  --jawz-subtle: #98a2b3;
  --jawz-line: rgba(16, 24, 40, 0.10);
  --jawz-soft: #f5f9ff;
  --jawz-soft-2: #e7f0ff;
  --jawz-success: #157347;
  --jawz-warning: #946200;
  --jawz-danger: #b42318;
  --jawz-info: #2767c9;
  --jawz-radius: 22px;
  --jawz-radius-sm: 14px;
  --jawz-pill: 999px;
  --jawz-shadow: 0 22px 55px rgba(16, 24, 40, .12);
  --jawz-shadow-sm: 0 10px 28px rgba(16, 24, 40, .08);
  --jawz-card-border: 1px solid rgba(16, 24, 40, .08);
  --jawz-gradient-strong: linear-gradient(135deg, #3f80e6 0%, #2767c9 54%, #174a9b 100%);
}

html { font-size: 16px; }
body {
  color: var(--jawz-text);
  font-size: clamp(15px, .95vw, 16px);
  line-height: 1.68;
  background:
    radial-gradient(circle at 8% 0%, rgba(63, 128, 230, .16), transparent 28%),
    radial-gradient(circle at 95% 12%, rgba(63, 128, 230, .08), transparent 22%),
    linear-gradient(180deg, #f9fbff 0%, #eef5ff 46%, #ffffff 100%);
}

body, input, select, textarea, button { font-kerning: normal; }
p, li, .form-text, .table, .small-muted, .meta-row { color: var(--jawz-text); }
.small, small, .small-muted, .meta-row, .form-text { line-height: 1.55; }
.small-muted, .meta-row, .text-muted { color: var(--jawz-muted) !important; }
strong, b { color: var(--jawz-ink); }
a:not(.btn):not(.nav-link):not(.brand-logo):not(.footer-link) { color: var(--jawz-blue-dark); font-weight: 700; }
a:not(.btn):not(.nav-link):hover { color: var(--jawz-blue-deep); }

h1, h2, h3, h4, h5, h6, .display-title {
  color: var(--jawz-ink);
  line-height: 1.13;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1, .display-title { font-size: clamp(2.35rem, 5vw, 4.6rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.15vw, 2rem); }
h4 { font-size: clamp(1.12rem, 1.45vw, 1.38rem); }
h5 { font-size: clamp(1rem, 1.15vw, 1.15rem); }
h6 { font-size: .92rem; letter-spacing: -.012em; }
.lead, .lead-soft { font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.78; }
.display-title + .lead-soft,
h1 + .lead-soft,
h2 + .lead-soft { margin-top: .35rem; }

/* Make dark/blue surfaces readable. */
.auth-visual,
.sidebar,
.topbar,
.site-footer,
.metric-card {
  color: rgba(255,255,255,.94);
}
.auth-visual h1,
.auth-visual h2,
.auth-visual h3,
.auth-visual h4,
.auth-visual h5,
.auth-visual h6,
.auth-visual .display-title,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar h6,
.sidebar .display-title,
.topbar h1,
.topbar h2,
.topbar h3,
.topbar h4,
.topbar h5,
.topbar h6,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.metric-card h1,
.metric-card h2,
.metric-card h3,
.metric-card h4,
.metric-card h5,
.metric-card h6 {
  color: #ffffff !important;
}
.auth-visual p,
.auth-visual .lead-soft,
.auth-visual .small-muted,
.auth-visual .meta-row,
.sidebar p,
.sidebar .small-muted,
.sidebar .meta-row,
.topbar p,
.topbar .small-muted,
.topbar .meta-row,
.site-footer p,
.site-footer .small-muted,
.site-footer .meta-row,
.metric-card small,
.metric-card p {
  color: rgba(255,255,255,.82) !important;
}
.auth-visual .eyebrow,
.sidebar .eyebrow,
.topbar .eyebrow {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.auth-visual .jawz-card,
.sidebar-footer .jawz-card {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #fff;
}
.auth-visual .jawz-card p,
.auth-visual .jawz-card .small-muted,
.sidebar-footer .jawz-card p,
.sidebar-footer .jawz-card .small-muted { color: rgba(255,255,255,.84) !important; }

/* Cards, panels, and content hierarchy. */
.hero-surface,
.jawz-card,
.form-panel,
.content-panel,
.table-shell,
.review-panel,
.stats-board,
.empty-state,
.brand-card,
.reward-card,
.review-card,
.queue-card,
.offer-card,
.stat-card,
.auth-panel {
  background: rgba(255,255,255,.96);
  border-color: rgba(16,24,40,.08);
}
.jawz-card p:last-child,
.content-panel p:last-child,
.form-panel p:last-child,
.review-panel p:last-child,
.card-body-custom p:last-child { margin-bottom: 0; }
.card-kicker,
.kpi-label {
  color: var(--jawz-blue-dark);
  font-size: .76rem;
  letter-spacing: .075em;
  line-height: 1.35;
}
.feature-list li { color: var(--jawz-text); line-height: 1.62; }
.feature-list li i { color: var(--jawz-blue-deep); }
.feature-icon,
.icon-chip,
.stat-icon {
  background: var(--jawz-blue-soft);
  color: var(--jawz-blue-dark);
  flex: 0 0 auto;
}

/* Buttons and clickable controls. */
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.2;
  white-space: nowrap;
}
.btn-lg { min-height: 52px; font-size: 1rem; padding-inline: 1.35rem; }
.btn-sm { min-height: 36px; font-size: .86rem; }
.btn-brand,
.btn-primary {
  background: var(--jawz-blue) !important;
  border-color: var(--jawz-blue) !important;
  color: #fff !important;
}
.btn-brand:hover,
.btn-primary:hover,
.btn-brand:focus-visible,
.btn-primary:focus-visible {
  background: var(--jawz-blue-deep) !important;
  border-color: var(--jawz-blue-deep) !important;
  color: #fff !important;
}
.btn-soft,
.btn-outline-brand {
  background: #fff;
  color: var(--jawz-blue-dark) !important;
  border: 1px solid rgba(63,128,230,.30);
}
.btn-soft:hover,
.btn-outline-brand:hover,
.btn-soft:focus-visible,
.btn-outline-brand:focus-visible {
  background: var(--jawz-blue-soft);
  color: var(--jawz-blue-dark) !important;
  border-color: rgba(63,128,230,.55);
}
.auth-visual .btn-soft,
.sidebar .btn-soft,
.topbar .btn-soft {
  background: #fff;
  color: var(--jawz-blue-dark) !important;
  border-color: rgba(255,255,255,.55);
}

/* Forms and tables. */
.form-label { color: var(--jawz-ink); font-size: .94rem; line-height: 1.35; }
.form-control,
.form-select,
textarea.form-control {
  color: var(--jawz-ink);
  font-size: .96rem;
  background: #fff;
  border-color: rgba(16,24,40,.14);
}
.form-control::placeholder,
textarea.form-control::placeholder { color: #98a2b3; opacity: 1; }
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--jawz-blue);
  box-shadow: 0 0 0 .22rem rgba(63,128,230,.16) !important;
}
.form-check-label { color: var(--jawz-text); line-height: 1.45; }
.table { color: var(--jawz-text); font-size: .94rem; }
.table-shell thead th {
  color: #475467;
  font-size: .75rem;
  font-weight: 800;
  background: #f8fbff;
  white-space: nowrap;
}
.table-shell tbody td { color: var(--jawz-text); }
.table-shell tbody tr:hover td { background: rgba(63,128,230,.045); }

/* Badges, pills, ratings, status labels. */
.filter-chip,
.status-badge,
.metric-pill,
.tab-chip {
  font-size: .84rem;
  line-height: 1.25;
  font-weight: 800;
  border: 1px solid transparent;
}
.metric-pill,
.tab-chip { background: var(--jawz-blue-soft); color: var(--jawz-blue-dark); }
.status-badge.pending,
.status-badge.warning { background: #fff7e6; color: #7a4d00; border-color: #fedf89; }
.status-badge.live,
.status-badge.success { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.status-badge.draft { background: var(--jawz-blue-soft); color: var(--jawz-blue-dark); border-color: #bfd7ff; }
.status-badge.rejected { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.rating-row i,
.text-warning { color: #b7791f !important; }
.trend-up { color: #067647; }
.trend-down { color: #b42318; }

/* Layout polish and alignment. */
.container { width: min(100% - 2rem, 1180px); }
.row { row-gap: 1.5rem; }
.hero-surface { padding: clamp(1.25rem, 2.5vw, 2rem); }
.card-body-custom { display: flex; flex-direction: column; gap: .45rem; }
.reward-card .btn,
.offer-card .btn,
.brand-card .btn { margin-top: auto; }
.meta-row,
.rating-row,
.inline-stack { row-gap: .35rem; }
.topbar { align-items: center; min-height: 76px; }
.topbar-search input { min-height: 46px; }
.sidebar { box-shadow: 0 18px 45px rgba(23,74,155,.22); }
.sidebar .nav-link { color: rgba(255,255,255,.86); }
.sidebar .nav-link.active,
.sidebar .nav-link:hover { background: rgba(255,255,255,.18); color: #fff; }
.sidebar .nav-link i { opacity: .95; }
.sidebar .brand-logo { color: #fff; }

/* Page-specific refinements. */
.page-index .hero-section .lead-soft { max-width: 620px; }
.page-index .metric-card {
  background: var(--jawz-gradient-strong);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 38px rgba(63,128,230,.20);
}
.page-index .metric-card .value { color: #fff; }
.page-about .jawz-card h4,
.page-contact .jawz-card h4,
.page-vendor-onboarding .jawz-card h4 { margin-bottom: .5rem; }
.page-discover .reward-card h4,
.page-favorites .reward-card h5,
.page-offer-management .offer-card h4 { line-height: 1.18; }
.page-reward-detail .cover-art { border-radius: var(--jawz-radius); }
.page-login .auth-visual .display-title,
.page-signup .auth-visual .display-title,
.page-admin-login .auth-visual .display-title { color: #fff !important; }
.page-login .form-panel h2,
.page-signup .form-panel h2,
.page-admin-login .form-panel h2 { color: var(--jawz-ink); }
.page-user-dashboard .reward-grid[style],
.page-user-dashboard .reward-grid { grid-template-columns: 1fr !important; }
.page-user-dashboard .jawz-card.compact h5,
.page-user-profile .jawz-card h5 { line-height: 1.2; }
.page-admin-review-detail h2 { font-size: clamp(1.55rem, 2.5vw, 2.4rem); }

/* Responsive quality fixes. */
@media (max-width: 991.98px) {
  .topbar { align-items: stretch; }
  .topbar > .d-flex { flex-wrap: wrap; gap: .75rem; }
  .topbar-search { order: 3; max-width: 100%; width: 100%; }
  .public-navbar .nav-link { color: var(--jawz-text); }
  .public-navbar .nav-link.active,
  .public-navbar .nav-link:hover { color: var(--jawz-ink); }
}
@media (max-width: 767.98px) {
  body { font-size: 15px; }
  h1, .display-title { letter-spacing: -.04em; }
  .btn { width: auto; white-space: normal; text-align: center; }
  .chip-row, .filter-row, .tab-row { gap: .55rem; }
  .filter-chip, .status-badge, .metric-pill, .tab-chip { padding: .52rem .75rem; font-size: .8rem; }
  .review-row { flex-direction: column; }
  .avatar, .brand-avatar, .user-avatar { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .container { width: min(100% - 1.25rem, 1180px); }
  .card-body-custom, .jawz-card, .content-panel, .form-panel, .review-panel, .table-shell { padding: .95rem; }
  .topbar h3 { font-size: 1.2rem !important; }
  .brand-logo-img { max-width: 132px; }
}


/* Desktop sidebar toggle fix
   The mobile drawer used body.sidebar-open, but laptop/desktop layouts kept the
   sidebar as a permanent flex column. These rules make the same toggle button
   collapse/restore the admin/app sidebar cleanly on >=1200px screens. */
@media (min-width: 1200px) {
  .page-user-dashboard .sidebar-toggle,
  .page-user-profile .sidebar-toggle,
  .page-vendor-dashboard .sidebar-toggle,
  .page-offer-management .sidebar-toggle,
  .page-create-offer .sidebar-toggle,
  .page-vendor-reviews .sidebar-toggle,
  .page-admin-dashboard .sidebar-toggle,
  .page-admin-approvals .sidebar-toggle,
  .page-admin-review-detail .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .page-user-dashboard .sidebar,
  .page-user-profile .sidebar,
  .page-vendor-dashboard .sidebar,
  .page-offer-management .sidebar,
  .page-create-offer .sidebar,
  .page-vendor-reviews .sidebar,
  .page-admin-dashboard .sidebar,
  .page-admin-approvals .sidebar,
  .page-admin-review-detail .sidebar {
    flex: 0 0 268px;
    transition: width .28s ease, flex-basis .28s ease, margin .28s ease, padding .28s ease, transform .28s ease, opacity .2s ease;
    will-change: width, transform;
  }

  body.sidebar-collapsed .page-user-dashboard .sidebar,
  body.sidebar-collapsed .page-user-profile .sidebar,
  body.sidebar-collapsed .page-vendor-dashboard .sidebar,
  body.sidebar-collapsed .page-offer-management .sidebar,
  body.sidebar-collapsed .page-create-offer .sidebar,
  body.sidebar-collapsed .page-vendor-reviews .sidebar,
  body.sidebar-collapsed .page-admin-dashboard .sidebar,
  body.sidebar-collapsed .page-admin-approvals .sidebar,
  body.sidebar-collapsed .page-admin-review-detail .sidebar,
  .page-user-dashboard.sidebar-collapsed .sidebar,
  .page-user-profile.sidebar-collapsed .sidebar,
  .page-vendor-dashboard.sidebar-collapsed .sidebar,
  .page-offer-management.sidebar-collapsed .sidebar,
  .page-create-offer.sidebar-collapsed .sidebar,
  .page-vendor-reviews.sidebar-collapsed .sidebar,
  .page-admin-dashboard.sidebar-collapsed .sidebar,
  .page-admin-approvals.sidebar-collapsed .sidebar,
  .page-admin-review-detail.sidebar-collapsed .sidebar {
    width: 0 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-18px);
  }

  body.sidebar-collapsed .content-area,
  .sidebar-collapsed .content-area {
    width: 100%;
  }
}


/* Admin sidebar dropdown menus */
.sidebar-nav { gap: .35rem !important; }
.sidebar .nav-dropdown { display: grid; gap: .25rem; }
.sidebar .nav-dropdown-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  justify-content: space-between;
  appearance: none;
}
.sidebar .nav-dropdown-toggle .nav-link-label,
.sidebar .nav-link .nav-link-label {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}
.sidebar .nav-dropdown-toggle .nav-chevron {
  margin-left: auto;
  font-size: .78rem;
  opacity: .82;
  transition: transform .22s ease;
}
.sidebar .nav-dropdown.open .nav-chevron { transform: rotate(180deg); }
.sidebar .nav-submenu {
  display: none;
  margin: .1rem 0 .35rem 1.05rem;
  padding: .35rem 0 .35rem .85rem;
  border-left: 1px solid rgba(255,255,255,.2);
}
.sidebar .nav-dropdown.open .nav-submenu { display: grid; gap: .2rem; }
.sidebar .nav-sublink {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  border-radius: 10px;
  padding: .55rem .7rem;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.25;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sidebar .nav-sublink:hover,
.sidebar .nav-sublink.active {
  background: rgba(255,255,255,.14);
  color: #fff;
  transform: translateX(2px);
}
@media (max-height: 760px) and (min-width: 1200px) {
  .sidebar .nav-sublink { padding-block: .42rem; font-size: .82rem; }
  .sidebar .nav-submenu { margin-block: 0 .15rem; padding-block: .2rem; }
}


/********MY-CSS**********/

a.nav-sublink.my-sublink {
    color: #fff !important;
}

/*********/
/* =========================
   Client Approvels Table
========================= */

.client-approvels-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.client-approvels {
  width: 100%;
  min-width: 850px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table Head */
.client-approvels thead th {
  background: #3f80e6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 18px;
  border: none;
  white-space: nowrap;
}

/* Table Body */
.client-approvels tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

/* Row Hover */
.client-approvels tbody tr:hover {
  background: #f8fbff;
}

/* Button */
.client-approvels-btn {
  min-width: 110px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
}

/* Rounded Corners */
.client-approvels thead th:first-child {
  border-top-left-radius: 14px;
}

.client-approvels thead th:last-child {
  border-top-right-radius: 14px;
}

/* Responsive */
@media (max-width: 991px) {

  .client-approvels thead th,
  .client-approvels tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .client-approvels-btn {
    min-width: 95px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/***************/

/* =========================
   Client List Table
========================= */

.client-list-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.client-list {
  width: 100%;
  min-width: 950px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table Head */
.client-list thead th {
  background: #3f80e6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 18px;
  border: none;
  white-space: nowrap;
}

/* Table Body */
.client-list tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

/* Hover Effect */
.client-list tbody tr:hover {
  background: #f8fbff;
}

/* Button */
.client-list-btn {
  min-width: 120px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
}

/* Rounded Corners */
.client-list thead th:first-child {
  border-top-left-radius: 14px;
}

.client-list thead th:last-child {
  border-top-right-radius: 14px;
}

/* Responsive */
@media (max-width: 991px) {

  .client-list thead th,
  .client-list tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .client-list-btn {
    min-width: 100px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/*********/
/* =========================
   Vendor Coupons Table
========================= */

.vendor-coupons-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.vendor-coupons {
  width: 100%;
  min-width: 950px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table Head */
.vendor-coupons thead th {
  background: #3f80e6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 18px;
  border: none;
  white-space: nowrap;
}

/* Table Body */
.vendor-coupons tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

/* Hover Effect */
.vendor-coupons tbody tr:hover {
  background: #f8fbff;
}

/* Buttons */
.vendor-coupons-btn {
  min-width: 95px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
}

/* Rounded Corners */
.vendor-coupons thead th:first-child {
  border-top-left-radius: 14px;
}

.vendor-coupons thead th:last-child {
  border-top-right-radius: 14px;
}

/* Responsive */
@media (max-width: 991px) {

  .vendor-coupons thead th,
  .vendor-coupons tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .vendor-coupons-btn {
    min-width: 85px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/***********/

/* =========================
   User Table
========================= */

.user-tab-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.user-tab {
  width: 100%;
  min-width: 1150px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table Head */
.user-tab thead th {
  background: #3f80e6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 18px;
  border: none;
  white-space: nowrap;
}

/* Table Body */
.user-tab tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

/* Hover Effect */
.user-tab tbody tr:hover {
  background: #f8fbff;
}

/* Button */
.user-tab-btn {
  min-width: 120px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
}

/* Rounded Corners */
.user-tab thead th:first-child {
  border-top-left-radius: 14px;
}

.user-tab thead th:last-child {
  border-top-right-radius: 14px;
}

/* Contact Details Styling */
.user-tab small {
  font-size: 12px;
  display: block;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 991px) {

  .user-tab thead th,
  .user-tab tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .user-tab-btn {
    min-width: 100px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .user-tab small {
    font-size: 11px;
  }
}

/***************/

/* =========================
   Donation Report Table
========================= */

.donataion-report-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.donataion-report {
  width: 100%;
  min-width: 850px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table Head */
.donataion-report thead th {
  background: #3f80e6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 18px;
  border: none;
  white-space: nowrap;
}

/* Table Body */
.donataion-report tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

/* Hover Effect */
.donataion-report tbody tr:hover {
  background: #f8fbff;
}

/* Button */
.donataion-report-btn {
  min-width: 90px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
}

/* Rounded Corners */
.donataion-report thead th:first-child {
  border-top-left-radius: 14px;
}

.donataion-report thead th:last-child {
  border-top-right-radius: 14px;
}

/* Responsive */
@media (max-width: 991px) {

  .donataion-report thead th,
  .donataion-report tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .donataion-report-btn {
    min-width: 80px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/****************/

.vendor-report-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.vendor-report {
  width: 100%;
  min-width: 950px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.vendor-report thead th {
  background: #3f80e6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 18px;
  border: none;
  white-space: nowrap;
}

.vendor-report tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

.vendor-report tbody tr:hover {
  background: #f8fbff;
}

.vendor-report-btn {
  min-width: 95px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  margin: 2px;
}

.vendor-report thead th:first-child {
  border-top-left-radius: 14px;
}

.vendor-report thead th:last-child {
  border-top-right-radius: 14px;
}

@media (max-width: 991px) {
  .vendor-report thead th,
  .vendor-report tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .vendor-report-btn {
    min-width: 85px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/*****************/
/* =========================
   User Report Table
========================= */

.user-report-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.user-report {
  width: 100%;
  min-width: 1100px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table Head */
.user-report thead th {
  background: #3f80e6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 18px;
  border: none;
  white-space: nowrap;
}

/* Table Body */
.user-report tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

/* Hover Effect */
.user-report tbody tr:hover {
  background: #f8fbff;
}

/* Buttons */
.user-report-btn {
  min-width: 95px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  margin: 2px;
}

/* Rounded Corners */
.user-report thead th:first-child {
  border-top-left-radius: 14px;
}

.user-report thead th:last-child {
  border-top-right-radius: 14px;
}

/* Responsive */
@media (max-width: 991px) {

  .user-report thead th,
  .user-report tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .user-report-btn {
    min-width: 85px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/*******/

/* =========================
   Main Donations Table
========================= */

.main-donations-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.main-donations {
  width: 100%;
  min-width: 1150px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table Head */
.main-donations thead th {
  background: #3f80e6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 18px;
  border: none;
  white-space: nowrap;
}

/* Table Body */
.main-donations tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

/* Hover Effect */
.main-donations tbody tr:hover {
  background: #f8fbff;
}

/* Buttons */
.main-donations-btn {
  min-width: 95px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  margin: 2px;
}

/* Contact Text */
.main-donations small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

/* Rounded Corners */
.main-donations thead th:first-child {
  border-top-left-radius: 14px;
}

.main-donations thead th:last-child {
  border-top-right-radius: 14px;
}

/* Responsive */
@media (max-width: 991px) {

  .main-donations thead th,
  .main-donations tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .main-donations-btn {
    min-width: 85px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .main-donations small {
    font-size: 11px;
  }
}

/*********/
.my-admin-login {
    height: auto !important;
}
.my-login-page {
  height: auto !important;
}
.my-signup {
  height: auto !important;
}
/**********/

/* =========================
   Forgot Password Modal
========================= */

.forgot-password .modal-dialog {
  max-width: 480px;
}

.forgot-password-content {
  border: none;
  border-radius: 28px;
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
}

.forgot-password .modal-body {
  padding: 38px 34px;
  position: relative;
}

.forgot-password-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  box-shadow: none !important;
}

.forgot-password-icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(63, 128, 230, 0.12);
  color: #3f80e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin: 0 auto 24px;
}

.forgot-password-title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: #0f172a;
  margin-bottom: 10px;
}

.forgot-password-text {
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 28px;
}

.forgot-password-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.forgot-password-input {
  height: 54px;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  font-size: 14px;
  padding: 0 16px;
  box-shadow: none !important;
}

.forgot-password-input:focus {
  border-color: #3f80e6;
}

.forgot-password-btn {
  height: 54px;
  border: none;
  border-radius: 14px;
  background: #3f80e6;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: all .3s ease;
}

.forgot-password-btn:hover {
  background: #2f6fd4;
  transform: translateY(-1px);
  color: #fff;
}

@media (max-width: 576px) {

  .forgot-password .modal-body {
    padding: 30px 22px;
  }

  .forgot-password-title {
    font-size: 24px;
  }

}

/**********/

/* =========================
   Signup Page Improved UI
========================= */

.page-signup .auth-shell {
  min-height: 100vh;
  padding: 32px 0;
  align-items: flex-start !important;
}

.page-signup .auth-panel {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 24px;
}

.page-signup .auth-visual {
  min-height: auto;
  padding: 46px 34px;
  background: linear-gradient(180deg, #3f80e6 0%, #12366f 100%);
}

.page-signup .auth-visual .display-title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.12;
}

.page-signup .auth-visual .lead-soft {
  font-size: 15px;
  line-height: 1.7;
}

.page-signup .hero-illustration {
  max-width: 300px;
  margin-inline: auto;
}

.page-signup .form-panel {
  padding: 42px 42px;
  justify-content: flex-start !important;
}

.page-signup .container-narrow {
  max-width: 100%;
}

.signup-role-card {
  min-height: 128px;
  text-align: left;
  border: 1px solid rgba(63, 128, 230, 0.16);
  background: #fff;
  cursor: pointer;
  transition: all .25s ease;
  border-radius: 18px;
  padding: 18px;
}

.signup-role-card strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  margin-bottom: 5px;
}

.signup-role-card p {
  font-size: 13px;
  line-height: 1.55;
}

.signup-role-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(63, 128, 230, 0.1);
  color: #3f80e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}

.signup-role-card:hover,
.signup-role-card.active {
  border-color: #3f80e6;
  box-shadow: 0 14px 32px rgba(63, 128, 230, 0.15);
  transform: translateY(-2px);
}

.reg-form {
  display: none;
  margin-top: 6px;
}

.reg-form.active {
  display: flex;
}

.client-reg-form,
.vendor-reg-form,
.user-reg-form {
  background: #ffffff;
}

.client-reg-form .form-label,
.vendor-reg-form .form-label,
.user-reg-form .form-label {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.client-reg-form .form-control,
.client-reg-form .form-select,
.vendor-reg-form .form-control,
.vendor-reg-form .form-select,
.user-reg-form .form-control,
.user-reg-form .form-select {
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  font-size: 14px;
  color: #0f172a;
  box-shadow: none;
}

.client-reg-form .form-control:focus,
.client-reg-form .form-select:focus,
.vendor-reg-form .form-control:focus,
.vendor-reg-form .form-select:focus,
.user-reg-form .form-control:focus,
.user-reg-form .form-select:focus {
  border-color: #3f80e6;
  box-shadow: 0 0 0 4px rgba(63, 128, 230, 0.12);
}

.client-reg-form textarea.form-control,
.vendor-reg-form textarea.form-control,
.user-reg-form textarea.form-control {
  min-height: 92px;
  resize: vertical;
}

.page-signup .btn-brand {
  min-height: 52px;
  border-radius: 14px;
  font-weight: 700;
}

/* Balance left side better */
.page-signup .auth-visual .jawz-card {
  margin-top: 28px;
}

.page-signup .auth-visual::after {
  content: "";
  display: block;
  width: 100%;
  min-height: 180px;
  margin-top: 35px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 35%),
    rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

/* Responsive */
@media (max-width: 991px) {
  .page-signup .auth-shell {
    padding: 20px 0;
  }

  .page-signup .auth-visual {
    padding: 36px 26px;
  }

  .page-signup .auth-visual::after {
    display: none;
  }

  .page-signup .form-panel {
    padding: 34px 24px;
  }
}

@media (max-width: 767px) {
  .signup-role-card {
    min-height: auto;
  }

  .page-signup .form-panel {
    padding: 28px 18px;
  }

  .page-signup .auth-panel {
    border-radius: 20px;
  }
}

/***signup-register******/

/* =========================
   SIGNUP FULL LAYOUT
========================= */

.signup-full-layout{
    padding: 50px;
    max-width: 1500px;
    margin: auto;
}

.signup-top-content{
    max-width: 1000px;
    margin: 0 auto 40px;
}

.signup-top-content .brand-logo-img{
    max-width: 220px;
}

.full-width-form{
    width: 100%;
}

.full-width-form .form-control,
.full-width-form .form-select{
    min-height: 58px;
    border-radius: 14px;
}

.full-width-form textarea.form-control{
    min-height: 120px;
}

.full-width-form .btn-brand{
    min-height: 60px;
    font-size: 17px;
    font-weight: 700;
}

/* role cards */
.signup-role-card{
    text-align: center;
    padding: 24px;
}

/* 3 fields per row on large screens */
@media (min-width: 1200px){

    .client-reg-form .col-md-6,
    .vendor-reg-form .col-md-6,
    .user-reg-form .col-md-6{
        width: 33.3333%;
    }

    .client-reg-form .col-12,
    .vendor-reg-form .col-12,
    .user-reg-form .col-12{
        width: 100%;
    }
}

/* mobile responsive */
@media (max-width: 768px){

    .signup-full-layout{
        padding: 20px;
    }

    .display-title{
        font-size: 32px;
    }

    .signup-role-card{
        padding: 18px;
    }
}

h1.my-sign-head {
    font-size: 30px !important;
}
p.my-signup-para {
    max-width: unset !important;
}

/*****my-profile-start********/

.my-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.my-profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bs-border-color, #dee2e6);
}

.my-profile-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff !important;
  white-space: nowrap;
}

.my-profile:hover .my-profile-name {
  text-decoration: none !important;
  color: #7ddceb !important;
}
/* Topbar responsive fix */
@media (max-width: 576px) {

  .topbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar > .d-flex.ms-auto {
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0 !important;
    gap: 8px;
  }

  .topbar-search {
    flex: 1 1 100%;
    width: 100%;
  }

  .my-profile {
    width: 100%;
    justify-content: flex-end;
  }

}

/*****my-profile-main-view*******/

/* =========================
   MY PROFILE MAIN CSS
========================= */

.my-profile-main{
    width:100%;
}

/* TOP PROFILE */

.my-profile-main-top{
    background:#ffffff;
    border-radius:24px;
    padding:35px;
    margin-bottom:25px;
    border:1px solid #e9edf5;
}

/* IMAGE */

.my-profile-main-image{
    width:120px;
    height:120px;
    border-radius:50%;
    overflow:hidden;
    border:5px solid #f1f5f9;
    flex-shrink:0;
}

.my-profile-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* USER */

.my-profile-main-user h2{
    font-size:30px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:10px;
}

.my-profile-main-role{
    display:inline-block;
    background:#eff6ff;
    color:#2563eb;
    padding:8px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

.my-profile-main-user p{
    margin-bottom:15px;
    color:#64748b;
    font-size:15px;
}

/* STATUS */

.my-profile-main-status{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.my-profile-main-status span{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    padding:8px 14px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    color:#0f172a;
}

/* BUTTON */

.my-profile-main-edit-btn{
    color:#fff;
    padding:14px 28px;
    border-radius:14px;
    border:none;
    font-size:15px;
    font-weight:600;
    transition:0.3s;
}

.my-profile-main-edit-btn:hover{
    background:#ea580c;
    color:#fff;
    transform:translateY(-2px);
}

/* BOX */

.my-profile-main-box{
    background:#ffffff;
    border-radius:24px;
    padding:35px;
    border:1px solid #e9edf5;
}

.my-profile-main-box-title{
    margin-bottom:30px;
    padding-bottom:18px;
    border-bottom:1px solid #edf2f7;
}

.my-profile-main-box-title h4{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#0f172a;
}

/* FIELD */

.my-profile-main-field{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:20px;
    height:100%;
}

.my-profile-main-field label{
    display:block;
    color:#94a3b8;
    font-size:13px;
    margin-bottom:10px;
    font-weight:600;
}

.my-profile-main-field h6{
    margin:0;
    color:#0f172a;
    font-size:16px;
    font-weight:700;
    line-height:1.6;
}

/* ADDRESS */

.my-profile-main-address{
    color:#0f172a;
    font-size:15px;
    line-height:1.8;
    font-weight:500;
}

/* RESPONSIVE */

@media(max-width:991px){

    .my-profile-main-top,
    .my-profile-main-box{
        padding:25px;
    }

}

@media(max-width:767px){

    .my-profile-main-top{
        text-align:center;
    }

    .my-profile-main-user h2{
        font-size:24px;
    }

    .my-profile-main-image{
        width:95px;
        height:95px;
    }

    .my-profile-main-status{
        justify-content:center;
    }

}

/* =========================
   MY EDIT PROFILE MAIN CSS
========================= */

.my-edit-profile-main{
    width:100%;
}

/* TOP */

.my-edit-profile-main-top{
    background:#ffffff;
    border-radius:24px;
    padding:35px;
    margin-bottom:25px;
    border:1px solid #e9edf5;
}

/* IMAGE */

.my-edit-profile-main-image{
    position:relative;
    width:120px;
    height:120px;
    border-radius:50%;
    overflow:hidden;
    border:5px solid #f1f5f9;
    flex-shrink:0;
}

.my-edit-profile-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* CAMERA */

.my-edit-profile-main-camera{
    position:absolute;
    right:5px;
    bottom:5px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#2e66c0;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:14px;
    border:2px solid #fff;
}

/* USER */

.my-edit-profile-main-user h2{
    font-size:30px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:10px;
}

.my-edit-profile-main-user p{
    margin:0;
    color:#64748b;
    font-size:15px;
}

/* BUTTON */

.my-edit-profile-main-save-btn{
    color:#fff;
    border:none;
    padding:14px 28px;
    border-radius:14px;
    font-size:15px;
    font-weight:600;
    transition:0.3s;
}

.my-edit-profile-main-save-btn:hover{
    background:#ea580c;
    color:#fff;
    transform:translateY(-2px);
}

/* BOX */

.my-edit-profile-main-box{
    background:#ffffff;
    border-radius:24px;
    padding:35px;
    border:1px solid #e9edf5;
}

.my-edit-profile-main-box-title{
    margin-bottom:30px;
    padding-bottom:18px;
    border-bottom:1px solid #edf2f7;
}

.my-edit-profile-main-box-title h4{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#0f172a;
}

/* FIELD */

.my-edit-profile-main-field label{
    display:block;
    margin-bottom:10px;
    color:#475569;
    font-size:14px;
    font-weight:600;
}

/* INPUT */

.my-edit-profile-main-field .form-control,
.my-edit-profile-main-field .form-select{
    height:58px;
    border-radius:16px;
    border:1px solid #dbe4f0;
    background:#f8fafc;
    padding:12px 18px;
    font-size:15px;
    color:#0f172a;
    box-shadow:none;
}

.my-edit-profile-main-field textarea.form-control{
    height:auto;
    resize:none;
    padding-top:16px;
}

.my-edit-profile-main-field .form-control:focus,
.my-edit-profile-main-field .form-select:focus{
    border-color:#2f69c6;
    box-shadow:0 0 0 4px rgba(249,115,22,0.12);
    background:#fff;
}

/* RESPONSIVE */

@media(max-width:991px){

    .my-edit-profile-main-top,
    .my-edit-profile-main-box{
        padding:25px;
    }

}

@media(max-width:767px){

    .my-edit-profile-main-top{
        text-align:center;
    }

    .my-edit-profile-main-user h2{
        font-size:24px;
    }

    .my-edit-profile-main-image{
        width:95px;
        height:95px;
    }

}

/* PASSWORD */

.my-edit-profile-main-password{
    position:relative;
}

.my-edit-profile-main-password-input{
    padding-right:55px !important;
}

/* TOGGLE BUTTON */

.my-edit-profile-main-password-toggle{
    position:absolute;
    top:50%;
    right:18px;
    transform:translateY(-50%);
    border:none;
    background:none;
    color:#64748b;
    font-size:18px;
    cursor:pointer;
    padding:0;
}

.my-edit-profile-main-password-toggle:hover{
    color:#2f69c6;
}

/*****clinet-tree-view*********/

/* ==========================================
   CLIENT TREE VIEW
========================================== */
.client-tree-view-section {
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    margin: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    overflow-x: auto;
}

.client-tree-view {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 50px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.client-tree-view li {
    position: relative;
    list-style: none;
}

/* Arrow between nodes */
.client-tree-view li:not(:last-child)::after {
    content: "➜";
    position: absolute;
    right: -35px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #2e65bf;
    font-weight: bold;
}

.client-tree-view-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 15px;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    white-space: nowrap;
}

/*****stickey-top-bar*****/
.topbar{
    position: sticky;
    top: 0;
    z-index: 999;
}

/* =========================
   vendor SECTION
========================= */

.vendor-dashboard-section{
   background:#fff;
   border-radius:18px;
   padding:20px;
}

/* =========================
   HEADER
========================= */

.vendor-dashboard-header{
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:15px;
   margin-bottom:20px;
   flex-wrap:wrap;
}

.vendor-dashboard-title{
   margin:0;
   font-size:18px;
   font-weight:700;
   color:#0f172a;
}

.vendor-dashboard-add-btn{
   background:#3f80e6;
   color:#fff;
   border:none;
   border-radius:10px;
   padding:10px 18px;
   font-weight:600;
}

.vendor-dashboard-add-btn:hover{
   background:#2f6fd4;
   color:#fff;
}

/* =========================
   TABLE
========================= */
.vendor-dashboard-table thead th:first-child{
   border-top-left-radius:14px;
}

.vendor-dashboard-table thead th:last-child{
   border-top-right-radius:14px;
}

.vendor-dashboard-table-wrapper{
   width:100%;
   overflow-x:auto;
}

.vendor-dashboard-table{
   width:100%;
   min-width:900px;
   border-collapse:separate;
   border-spacing:0;
}

/* HEADER */

.vendor-dashboard-table thead th{
   background:#3f80e6;
   color:#fff;
   padding:16px;
   font-size:14px;
   font-weight:600;
   white-space:nowrap;
}

/* BODY */

.vendor-dashboard-table tbody td{
   padding:16px;
   border-bottom:1px solid #edf2f7;
   white-space:nowrap;
   color:#334155;
}

.vendor-dashboard-table tbody tr:hover{
   background:#f8fbff;
}

/* =========================
   ACTION BUTTONS
========================= */

.vendor-dashboard-action-group{
   display:flex;
   align-items:center;
   gap:8px;
}

.vendor-dashboard-view-btn,
.vendor-dashboard-edit-btn{
   border:none;
   color:#fff;
   border-radius:10px;
   padding:8px 14px;
   font-size:13px;
   font-weight:600;
}

.vendor-dashboard-view-btn{
   background:#3f80e6;
}

.vendor-dashboard-edit-btn{
   background:#f59e0b;
}

/*=========================
 Vendor Discount Tabs
=========================*/

.vendor-dashboard-discount-tabs{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.vendor-dashboard-discount-tab{
    border:none;
    background:#edf3ff;
    color:#3b82f6;
    padding:10px 22px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.vendor-dashboard-discount-tab:hover{
    background:#3b82f6;
    color:#fff;
}

.vendor-dashboard-discount-tab.active{
    background:#3b82f6;
    color:#fff;
    box-shadow:0 8px 20px rgba(59,130,246,.25);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

   .vendor-dashboard-section{
      padding:15px;
   }

   .vendor-dashboard-title{
      font-size:18px;
   }

   .vendor-dashboard-view-btn,
   .vendor-dashboard-edit-btn{
      padding:7px 12px;
      font-size:12px;
   }

}

/*****serch bar my*******/

input.form-control.my-frm-serch {
    border: 1px solid #3f80e6 !important;
}

/* Search Responsive Fix */
.topbar-search{
    min-width: 260px;
}

/* Filter Button */
.my-drop-down-filter-state-btn{
    height: 42px;
    border-radius: 10px;
    padding: 0 16px;
    font-weight: 500;
    white-space: nowrap;
    background: #3f80e6;
    color: #fff;
}

/* Dropdown Popup */
.my-drop-down-filter-state{
    width: 260px;
    border-radius: 14px;
    margin-top: 10px !important;
}

/* Select Box */
.my-drop-down-filter-state-select{
    height: 45px;
    border-radius: 10px;
}

/* Mobile Responsive */
@media(max-width:576px){

    .topbar-search{
        width: 100%;
        order: 1;
    }

    .position-relative{
        order: 2;
    }

    .my-drop-down-filter-state-btn{
        width: 100%;
    }
}

/*****ADMIN-DASHBOARD-SALES********/
/* =========================
   TABLE WRAPPER
========================= */

.admin-sales-table-wrapper{
    width:100%;
    overflow-x:auto;
    background:#fff;
    border-radius:18px;
}

/* =========================
   TABLE
========================= */

.admin-sales-table{
    width:100%;
    min-width:1200px;
    margin:0;
    border-collapse:separate;
    border-spacing:0;
}

/* =========================
   TABLE HEADER
========================= */

.admin-sales-table thead th{
    background:#3f80e6;
    color:#fff;
    font-size:14px;
    font-weight:600;
    padding:16px 18px;
    border:none;
    white-space:nowrap;
}

.admin-sales-table thead tr th:first-child{
    border-top-left-radius:18px;
}

.admin-sales-table thead tr th:last-child{
    border-top-right-radius:18px;
}

/* =========================
   TABLE BODY
========================= */

.admin-sales-table tbody td{
    padding:16px 18px;
    border-bottom:1px solid #edf2f7;
    color:#334155;
    font-size:14px;
    vertical-align:middle;
     white-space: nowrap;
}

.admin-sales-table tbody tr:hover{
    background:#f8fbff;
}

.admin-sales-table tbody tr:last-child td{
    border-bottom:none;
}

/* =========================
   ADDRESS COLUMN
========================= */

.admin-sales-address{
    min-width:280px;
    white-space:normal;
}

/* =========================
   ACTION BUTTONS WRAPPER
========================= */

.admin-sales-action-group{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
}

/* =========================
   VIEW BUTTON
========================= */

.admin-sales-view-btn{
    border:none;
    background:#3f80e6;
    color:#fff;
    border-radius:10px;
    padding:8px 14px;
    font-size:13px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
    transition:.3s;
}

.admin-sales-view-btn:hover{
    background:#2d6dd3;
}

/* =========================
   EDIT BUTTON
========================= */

.admin-sales-edit-btn{
    border:none;
    background:#f59e0b;
    color:#fff;
    border-radius:10px;
    padding:8px 14px;
    font-size:13px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
    transition:.3s;
}

.admin-sales-edit-btn:hover{
    background:#d97706;
}

/* =========================
   DELETE BUTTON
========================= */

.admin-sales-delete-btn{
    border:none;
    background:#ef4444;
    color:#fff;
    border-radius:10px;
    padding:8px 14px;
    font-size:13px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
    transition:.3s;
}

.admin-sales-delete-btn:hover{
    background:#dc2626;
}

/* =========================
   CREATE BUTTON
========================= */

.admin-sales-create-btn{
    border-radius:10px;
    padding:10px 16px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
}

/* =========================
   MODAL
========================= */

.admin-sales-modal-content{
    border:none;
    border-radius:18px;
}

.admin-sales-input,
.admin-sales-textarea{
    border-radius:10px;
    min-height:48px;
}

.admin-sales-textarea{
    min-height:120px;
    resize:none;
}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

    .admin-sales-table{
        min-width:1100px;
    }

    .admin-sales-table thead th,
    .admin-sales-table tbody td{
        padding:14px 12px;
        font-size:13px;
    }

    .admin-sales-view-btn,
    .admin-sales-edit-btn,
    .admin-sales-delete-btn{
        padding:7px 12px;
        font-size:12px;
    }

}

/* =========================
   MOBILE
========================= */

@media(max-width:576px){

    .admin-sales-table{
        min-width:1000px;
    }

    .admin-sales-create-btn{
        width:100%;
    }

}
/*****Admin-sales-view-list*****/

/* ================= TABLE WRAPPER ================= */
.admin-sales-view-list-wrapper{
   width:100%;
   overflow-x:auto;
   background:#fff;
   border-radius:18px;
}

/* ================= TABLE ================= */
.admin-sales-view-list-table{
   width:100%;
   min-width:900px;
   border-collapse:separate;
   border-spacing:0;
}

/* HEADER */
.admin-sales-view-list-table thead th{
   background:#3f80e6;
   color:#fff;
   padding:16px 18px;
   font-size:14px;
   font-weight:600;
   border:none;
   white-space:nowrap;
}

/* BODY */
.admin-sales-view-list-table tbody td{
   padding:16px 18px;
   border-bottom:1px solid #edf2f7;
   font-size:14px;
   color:#334155;
   white-space:nowrap;
   vertical-align:middle;
}

.admin-sales-view-list-table tbody tr:hover{
   background:#f8fbff;
}

/* ================= TABS ================= */
.admin-sales-view-list-tabs{
   display:flex;
   gap:10px;
   flex-wrap:wrap;
   margin-bottom:15px;
}

/* TAB BUTTON */
.admin-sales-view-list-tab{
   border:none;
   background:#eef4ff;
   color:#3f80e6;
   padding:10px 14px;
   border-radius:10px;
   font-weight:600;
   cursor:pointer;
   display:flex;
   align-items:center;
   gap:8px;
   transition:.3s;
}

/* ACTIVE */
.admin-sales-view-list-tab.active{
   background:#3f80e6;
   color:#fff;
}

/* COUNT BADGE */
.admin-sales-view-list-tab .count{
   background:#fff;
   color:#3f80e6;
   font-size:12px;
   padding:2px 8px;
   border-radius:20px;
   font-weight:700;
}

/* ACTIVE COUNT STYLE */
.admin-sales-view-list-tab.active .count{
   background:#fff;
   color:#3f80e6;
}

/* ================= BUTTONS ================= */
/* BUTTONS SAME LINE FIX */
.admin-sales-action-group{
   display:flex;
   flex-direction:row;
   align-items:center;
   gap:8px;
   flex-wrap:nowrap;
}

/* BUTTON STYLE */
.admin-sales-view-btn,
.admin-sales-edit-btn,
.admin-sales-delete-btn{
   display:inline-flex;   /* ⭐ MOST IMPORTANT */
   align-items:center;
   justify-content:center;
   white-space:nowrap;
   border:none;
   border-radius:10px;
   padding:6px 12px;
   font-size:13px;
   font-weight:600;
   color:#fff;
}

/* COLORS */
.admin-sales-view-btn{ background:#3f80e6; }
.admin-sales-edit-btn{ background:#f59e0b; }
.admin-sales-delete-btn{ background:#ef4444; }

/* ================= RESPONSIVE ================= */
@media(max-width:768px){

   .admin-sales-view-list-table{
      min-width:800px;
   }

   .admin-sales-view-btn,
   .admin-sales-edit-btn,
   .admin-sales-delete-btn{
      padding:5px 10px;
      font-size:12px;
   }
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 992px) {
    .client-tree-view-section {
        padding: 20px;
        margin: 15px;
    }

    .client-tree-view-box {
        font-size: 14px;
        padding: 7px 12px;
    }
}

@media (max-width: 768px) {
    .client-tree-view-section {
        padding: 15px;
        margin: 10px;
    }

    .client-tree-view-wrapper {
        min-width: 500px;
    }

    .client-tree-view,
    .client-tree-view ul {
        padding-left: 28px;
    }

    .client-tree-view-box {
        font-size: 13px;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .client-tree-view-wrapper {
        min-width: 420px;
    }

    .client-tree-view-box {
        font-size: 12px;
        padding: 6px 8px;
    }
}