:root{
  --primary:#00674F;

  --sb-emerald:#00674F;
  --sb-emerald-dark:#005541;
  --sb-emerald-deep:#073D32;
  --sb-emerald-light:#DFF3EC;
  --sb-mint:#F2FAF7;

  --dark:#1F2937;
  --text:#26332F;
  --muted:#66756F;
  --bg:#F6F9F7;

  --sb-gold:#C6A15B;
  --sb-white:#FFFFFF;
  --sb-cream:#FAF9F6;
  --sb-border:#DFE8E3;
}

html, body{
  height:100%;
}

body{
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main,
.auth-wrap{
  flex:1 0 auto;
}

.navbar{
    padding:16px 0;
    transition:.25s ease;
    background:#ffffff !important;
    border-bottom:1px solid #edf2ef;
}

.navbar-brand{
    font-size:1.3rem;
    letter-spacing:.2px;
}

.navbar-nav .nav-link{
    color:#374151;
    font-weight:600;
    margin:0 8px;
    transition:.2s ease;
}

.navbar-nav .nav-link:hover{
    color:var(--primary);
}

.navbar-nav .nav-link.active{
    color:var(--primary);
}

.brand-text{
  color:#0b5d3b !important;
  font-size:1.4rem;
  letter-spacing:.2px;
}

.hero{
  background:linear-gradient(
    135deg,
    var(--sb-emerald-deep) 0%,
    var(--sb-emerald) 55%,
    #0A7A5E 100%
  );
  position:relative;
  overflow:visible;
}

.hero .container{
  position:relative;
  z-index:1;
}

.hero-title{
    font-family:"Playfair Display", serif;
    font-size:clamp(2.8rem,6vw,4.8rem);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-1px;
    color:#fff;
    margin-bottom:20px;
}

.hero .lead{
    font-family:"DM Sans",sans-serif;
    font-size:1.2rem;
    max-width:720px;
    margin:0 auto 40px;
    color:rgba(255,255,255,.92);
    line-height:1.8;
}

.section-title{
    font-family:"Playfair Display",serif;
    font-size:clamp(2rem,4vw,2.8rem);
    font-weight:700;
    color:var(--sb-emerald-deep);
    letter-spacing:-0.5px;
    margin-bottom:16px;
}

.section-subtitle{
    max-width:700px;
    margin:0 auto 50px;
    color:var(--muted);
    font-size:1.05rem;
    line-height:1.8;
}

.home-section{
    padding:80px 0;
    border-top:1px solid var(--sb-border);
}

.home-section:first-of-type{
    border-top:none;
}

.search-wrap{
  width:min(820px, 96%);
}

.hero-search{
  padding:10px !important;
  border:1px solid rgba(255,255,255,.35);
  border-radius:18px !important;
  box-shadow:0 18px 45px rgba(0,0,0,.18) !important;
}

.hero-search .form-select,
.hero-search .form-control{
  min-height:54px;
  color:#26332F;
  font-weight:500;
  background-color:#fff;
}

.hero-search .form-select:focus,
.hero-search .form-control:focus{
  box-shadow:none;
  border-color:transparent;
}

.hero-search #searchBtn{
  min-height:54px;
  padding-left:28px !important;
  padding-right:28px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#00674F 0%,#0A7A5E 100%) !important;
  border:none !important;
  color:#fff !important;
  font-weight:700;
  box-shadow:0 8px 18px rgba(0,103,79,.22);
}

.hero-search #searchBtn:hover{
  background:linear-gradient(135deg,#005541 0%,#00674F 100%) !important;
}

.category-tile{
    background:#fff;
    border:1px solid var(--sb-border);
    border-radius:18px;
    padding:22px 18px;
    text-align:center;
    font-weight:600;
    transition:all .25s ease;
    box-shadow:0 8px 22px rgba(15,23,42,.05);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:100%;
}

.category-tile i{
    font-size:2rem;
    color:var(--sb-emerald);
    margin-bottom:14px;
    display:block;
    transition:transform .25s ease;
}

.category-tile:hover{
    transform:translateY(-6px);
    border-color:rgba(0,103,79,.18);
    box-shadow:0 20px 42px rgba(0,0,0,.10);
}

.category-tile:hover i{
    transform:scale(1.12);
}

.listing-card{
  background:#fff;
  border:1px solid #edf2ef;
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:all .25s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}

.listing-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,.10);
  border-color:rgba(0,103,79,.20);
}

.listing-card h5{
    font-size:1.08rem;
    font-weight:700;
    line-height:1.35;
    color:var(--sb-emerald-deep);
    margin-bottom:.5rem;
}

.listing-card .text-secondary{
  min-height:35px;
}

.listing-card .price{
    color:var(--sb-emerald);
    font-size:1.15rem;
    font-weight:800;
    letter-spacing:-0.3px;
}

.listing-card .d-flex.justify-content-between.align-items-center{
  margin-top:auto !important;
}
.listing-card .btn{
  min-width:120px;
}

.provider-inline{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    margin:14px 0;
}

.provider-avatar-sm{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    max-width:48px;
    max-height:48px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #fff;
    box-shadow:0 4px 12px rgba(15,23,42,.12);
    flex:0 0 48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.provider-avatar-fallback{
  background:#e8edf6;
  color:#334155;
  font-size:.72rem;
  font-weight:700;
}

.listing-card .provider-inline .text-muted{
  font-size:.82rem;
  line-height:1.2;
}

.listing-card .text-secondary{
    font-size:.9rem;
    line-height:1.6;
    color:#6B7280 !important;
    margin-bottom:.75rem !important;
}

.listing-description-wrap{
  margin-top: 2px;
}
.listing-description-two-lines{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.listing-description-more{
  font-size:.84rem;
  line-height:1.2;
  font-weight:600;
  color:#00674F;
  margin-top:2px;
}
.listing-description-more:hover,
.listing-description-more:focus{
  color:#005541;
}
.rating-inline-compact{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:.1rem;
}
.rating-inline-compact .stars{
  font-size:.78rem;
  line-height:1;
}
.rating-inline-compact .count{
  font-size:.75rem;
  color:#6c757d;
  white-space:nowrap;
}

.service-image-wrap{
    position:relative;
    overflow:hidden;
    border-radius:16px;
    margin-bottom:18px;
}

.service-verified-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: #198754;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.service-card-image{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:16px;
    border:none;
    background:#f3f5fa;
    transition:transform .35s ease;
}

.listing-card:hover .service-card-image{
    transform:scale(1.04);
}

.placeholder-image{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8892a6;
  font-size:.9rem;
  font-weight:600;
}

.step-card{
    background:#fff;
    border:1px solid var(--sb-border);
    border-radius:20px;
    padding:28px;
    height:100%;
    transition:all .25s ease;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.step-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 50px rgba(0,0,0,.10);
    border-color:rgba(0,103,79,.18);
}

.footer{
  background:#111827;
  color:#d1d5db;
  margin-top:auto;
  width:100%;
}

.custom-site-footer{
  background:#fff;
  border-top:1px solid #edf0f6;
  padding:48px 0 34px;
  margin-top:auto;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:24px;
}
.footer-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.footer-brand{
  display:inline-block;
  margin-bottom:16px;
}
.footer-tagline{
  color:#1f2937;
  font-size:34px;
  font-size:clamp(22px, 3vw, 34px);
  font-weight:500;
  line-height:1.2;
}
.footer-social{
  display:flex;
  align-items:center;
  gap:18px;
}
.footer-social a{
  text-decoration:none;
  color:#0b6b2f;
  font-weight:700;
  font-size:30px;
  line-height:1;
}
.footer-copy{
  color:#1f2937;
  font-size:31px;
  font-size:clamp(18px, 2.4vw, 31px);
  letter-spacing:.2px;
}
.footer-right{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}
.footer-right a{
  text-decoration:none;
  color:#1f2937;
  font-size:36px;
  font-size:clamp(20px, 2.7vw, 36px);
  font-weight:500;
  line-height:1.2;
}
.footer-right a:hover{
  color:#0b5d3b;
}

@media (max-width: 992px){
  .custom-site-footer{
    padding:36px 0 24px;
  }
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .footer-right{
    margin-top:0;
  }
}

.modal-content{
  border:0;
  border-radius:16px;
  box-shadow:0 20px 45px rgba(0,0,0,.18);
}
#addServiceModal{
  padding: 0 !important;
}
#addServiceModal .modal-dialog{
  margin: .5rem auto;
}
#addServiceModal .modal-content{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 1rem);
  max-height:calc(100dvh - 1rem);
}
#addServiceModal .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@supports not (height: 100dvh){
  #addServiceModal .modal-content{
    max-height:calc(100vh - 1rem);
  }
}

/* Match Service Details modal behavior across devices/orientations */
#serviceDetailModal .modal-dialog{
  margin:.5rem auto;
}
#serviceDetailModal .modal-content{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 1rem);
  max-height:calc(100dvh - 1rem);
}
#serviceDetailModal .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@supports not (height: 100dvh){
  #serviceDetailModal .modal-content{
    max-height:calc(100vh - 1rem);
  }
}

@media (max-width: 991.98px){
  #addServiceModal .modal-dialog,
  #serviceDetailModal .modal-dialog{
    margin:0;
    width:100%;
    max-width:100%;
    height:100vh;
    height:100dvh;
  }
  #addServiceModal .modal-content,
  #serviceDetailModal .modal-content{
    border-radius:0;
    height:100%;
    max-height:100%;
  }
  #addServiceModal .modal-header,
  #addServiceModal .modal-footer,
  #serviceDetailModal .modal-header,
  #serviceDetailModal .modal-footer{
    position:sticky;
    z-index:2;
    background:#fff;
  }
  #addServiceModal .modal-header,
  #serviceDetailModal .modal-header{
    top:0;
  }
  #addServiceModal .modal-footer,
  #serviceDetailModal .modal-footer{
    bottom:0;
  }
}

/* Extra support for short-height / landscape devices */
@media (max-height: 700px){
  #addServiceModal .modal-dialog,
  #serviceDetailModal .modal-dialog{
    margin:0;
  }
  #addServiceModal .modal-content,
  #serviceDetailModal .modal-content{
    max-height:100vh;
    max-height:100dvh;
    border-radius:0;
  }
}

#addServiceModal .form-label,
#addServiceModal .form-check-label{
  font-weight:600;
}
.modal-header{
  border-bottom:1px solid #edf0f6;
}
.modal-footer{
  border-top:1px solid #edf0f6;
}
.form-control,
.form-select{
  border-radius:10px;
}
.btn{
  border-radius:10px;
}

.explore-btn{
    background:linear-gradient(135deg,var(--sb-emerald) 0%,var(--sb-emerald-dark) 100%);
    border:none;
    color:#fff;
    font-weight:700;
    font-size:.95rem;
    border-radius:14px;
    padding:12px 22px;
    transition:all .25s ease;
    box-shadow:0 10px 24px rgba(0,103,79,.22);
}

.explore-btn:hover,
.explore-btn:focus{
    background:linear-gradient(135deg,var(--sb-emerald-dark) 0%,var(--sb-emerald) 100%);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 16px 32px rgba(0,103,79,.30);
}

.provider-fields{
  padding:12px;
  border:1px dashed #d7dded;
  border-radius:12px;
  background:#f8faff;
  margin-bottom:12px;
}
.form-check-label{
  font-size:.92rem;
}

#loginModal .input-group .password-toggle-inline{
  min-width:46px;
  max-width:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-left:0;
  font-size:1rem;
  line-height:1;
  padding:0;
}
#loginModal .input-group .form-control{
  border-right:0;
}
#loginModal .input-group .form-control:focus{
  box-shadow:none;
}
#loginModal .input-group:focus-within{
  box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
  border-radius:10px;
}

@media (max-width:576px){
  .brand-text{
    font-size:1.2rem;
  }
}

.provider-dashboard-body{
  background:linear-gradient(180deg,#f6f8fc 0%, #eef2ff 100%);
}

.provider-dashboard-body.provider-add-service-page{
  background:#fff;
}
.provider-topbar{
  background:#fff;
  border-bottom:1px solid #e8ecf4;
}
.provider-hero{
  background:#fff;
  border:1px solid #e8ecf4;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.provider-kicker{
  color:#667085;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.74rem;
}
.provider-title{
  font-size:1.5rem;
  font-weight:700;
}
.provider-alert{
  border-radius:12px;
  border:0;
}
.provider-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.stat-box{
  position:relative;
  overflow:hidden;
  background:linear-gradient(140deg, rgba(255,255,255,.92) 0%, rgba(246,255,252,.96) 100%);
  border:1px solid rgba(0,103,79,.12);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  backdrop-filter:blur(4px);
}

.stat-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(0,103,79,.12), transparent 48%);
  pointer-events:none;
}

.stat-box p{
  position:relative;
  margin:0;
  color:#4b5563;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.stat-box h3{
  position:relative;
  margin:.42rem 0 0;
  font-size:1.5rem;
  font-weight:800;
  line-height:1.1;
  color:#0f172a;
}

.stat-box.active h3{ color:#0f9f6e; text-shadow:0 0 14px rgba(15,159,110,.22); }
.stat-box.paused h3{ color:#f59e0b; text-shadow:0 0 14px rgba(245,158,11,.2); }

@media (max-width:768px){
  .provider-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .stat-box{
    padding:14px;
  }

  .stat-box h3{
    font-size:1.28rem;
  }
}

.provider-panel{
  background:#fff;
  border:1px solid #e8ecf4;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.panel-head h2{
  margin:0 0 .2rem;
  font-size:1.15rem;
  font-weight:700;
}
.panel-head p{
  margin:0 0 1rem;
  color:#6b7280;
  font-size:.92rem;
}

.empty-state{
  border:1px dashed #d7deed;
  border-radius:14px;
  padding:20px;
  text-align:center;
  color:#6b7280;
  background:#fafbff;
}

.provider-services-table th,
.provider-services-table td{
  vertical-align:middle;
}

.provider-service-detail-modal{
  border-radius:14px;
  max-width:460px;
  margin-left:auto;
  margin-right:auto;
}

.provider-service-detail-card{
  border:1px solid #e6ebf5;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

.provider-service-detail-media{
  position:relative;
}

.provider-service-detail-image{
  width:100%;
  height:130px;
  object-fit:cover;
  background:#f3f5fa;
  display:block;
}

.provider-service-detail-image-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7b8598;
  font-weight:600;
}

.provider-service-detail-badge{
  position:absolute;
  top:10px;
  right:10px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
  text-transform:capitalize;
}
.provider-service-detail-badge.active{
  background:rgba(16,185,129,.16);
  color:#047857;
}
.provider-service-detail-badge.paused{
  background:rgba(245,158,11,.16);
  color:#b45309;
}

.provider-service-detail-body{
  padding:12px 14px;
}

@media (max-width:576px){
  .provider-service-detail-image{
    height:110px;
  }
  .hero .search-wrap.hero-search{
    width:min(340px, 96%);
    padding:10px !important;
    border-radius:12px !important;
    box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
  }

  .hero .hero-search .input-group{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .hero .hero-search #searchCategory,
  .hero .hero-search #searchDistrict,
  .hero .hero-search #searchInput,
  .hero .hero-search #searchBtn{
    width:100%;
    border-radius:0 !important;
    min-height:52px;
    font-size:17px !important;
  }

  .hero .hero-search #searchCategory{
    border-bottom:1px solid #d8dee8 !important;
    padding-left:14px;
    padding-right:14px;
    color:#111827;
  }

  .hero .hero-search #searchDistrict{
    border-bottom:1px solid #d8dee8 !important;
    padding-left:14px;
    padding-right:14px;
    color:#111827;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23111827' d='M4.47 6.97a.75.75 0 0 1 1.06 0L8 9.44l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:18px 18px;
    padding-right:36px;
  }

  .hero .hero-search #searchInput{
    border-bottom:1px solid #d8dee8 !important;
    padding-left:14px;
    padding-right:14px;
    color:#1f2937;
  }

  .hero .hero-search #searchInput::placeholder{
    color:#475467;
    opacity:1;
  }

  .hero .hero-search #searchBtn{
    margin-top:10px;
    border-radius:8px !important;
    background:#00674F !important;
    border-color:#00674F !important;
    color:#fff !important;
    font-weight:700;
  }
}

/* Admin KPI - modern horizontal layout */
.admin-kpi-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:stretch;
}

.admin-kpi-card{
  flex:1 1 180px;
  min-width:170px;
  background:linear-gradient(135deg, #00674F 0%, #0a7f63 100%);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 10px 24px rgba(0,103,79,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}

.admin-kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,103,79,.28);
}

.admin-kpi-card p{
  margin:0;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  opacity:.92;
}

.admin-kpi-card h3{
  margin:.35rem 0 0;
  font-size:1.45rem;
  font-weight:800;
  line-height:1.15;
  color:#fff;
}

.admin-kpi-card.highlight{
  background:linear-gradient(135deg, #005844 0%, #00674F 55%, #139a77 100%);
  border-color:rgba(255,255,255,.26);
}

@media (max-width:768px){
  .admin-kpi-card{
    flex:1 1 calc(50% - 14px);
    min-width:unset;
  }
}

@media (max-width:480px){
  .admin-kpi-card{
    flex:1 1 100%;
  }
}

.admin-orders-badge{
  font-size:.68rem;
  min-width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
}

.admin-side-toast{
  position:fixed;
  right:16px;
  top:88px;
  z-index:1080;
  background:#0f172a;
  color:#fff;
  border-left:4px solid #00674F;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  padding:10px 14px;
  font-size:.9rem;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .8s ease, transform .8s ease;
  pointer-events:none;
}
.admin-side-toast.show{
  opacity:1;
  transform:translateX(0);
}
.service-description-full {
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.7;
  color: #333;
  font-size: 15px;
}
.listing-description-two-lines {
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.filter-sidebar {
  font-size: 14px;
}

.filter-sidebar h3 {
  font-size: 16px;
}

.filter-sidebar .form-label {
  font-size: 14px;
  margin-bottom: 6px;
}

.filter-sidebar .form-control,
.filter-sidebar .form-select,
.filter-sidebar .btn {
  font-size: 14px;
}

.filter-sidebar .text-muted,
.filter-sidebar small {
  font-size: 12px;
}
.category-icon {
    display: block;
    margin: 0 auto;
}

.category-title {
    text-align: center;
}

.category-description {
    padding: 30px;
}
.why-card-title {
    font-size: 19px;
}
.why-card-text {
    font-size: 14px;
}
.how-step-title {
    font-size: 17px;
}
.how-step-text {
    font-size: 14px;
}
.provider-avatar-fallback {
    color: green;
}
.provider-link {
    color: #00674F;
}
.review-count {
    font-size: 12px;
}
.provider-rating {
    padding-top: 5px;
   
}
.provider-avatar-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
}
.provider-cta-title {
    font-size: 30px;
}
.footer-tagline {
    font-size: 16px;
}
.footer-copy {
    font-size: 12px;
}
.hero-search-category {
    font-size: 15px;
    max-width: 240px;
}
.hero-search-district {
    font-size: 15px;
    max-width: 220px;
}
.listing-title {
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.category-icon {
    width: 70px;
    height: auto;
}
@media (max-width: 991.98px) {
  .navbar-auth-actions {
    width: 100%;
    flex-direction: column;
    margin-top: 12px;
  }

  .navbar-auth-actions .btn,
  .navbar-auth-actions .badge {
    width: 100%;
    text-align: center;
  }

  .navbar-collapse {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
.provider-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.provider-link {
  display: block;
  font-weight: 600;
  line-height: 1.25;
}

.provider-rating {
  margin: 3px 0 0;
  padding-left: 0;
  line-height: 1.2;
}
.listing-footer {
  gap: 10px;
  flex-wrap: wrap;
}

.listing-footer .price {
  flex: 1 1 130px;
}

.listing-footer .btn {
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  .listing-footer {
    align-items: stretch !important;
  }

  .listing-footer .price {
    width: 100%;
    flex-basis: 100%;
  }

  .listing-footer .btn {
    width: 100%;
  }
}
/* Fix homepage hero being cut off */
body > section.hero {
  height: auto !important;
  min-height: 520px;
  overflow: visible;
  display: flex;
  align-items: center;
}

body > section.hero > .container {
  width: 100%;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

@media (max-width: 575.98px) {
  body > section.hero {
    min-height: auto;
  }

  body > section.hero > .container {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .hero-title {
    font-size: 2.35rem;
  }
}
.provider-profile-image{
    width:140px;
    height:140px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #e9ecef;
}
.provider-profile-placeholder{
    width:140px;
    height:140px;
    margin:0 auto;
    border-radius:50%;
    background:#00674F;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:48px;
    font-weight:700;
}
.provider-business-name{
    font-size:2rem;
    font-weight:700;
    line-height:1.2;
    color:#212529;
}
.provider-profile-details > *{
    margin-bottom:0.75rem;
}

.provider-profile-details > *:last-child{
    margin-bottom:0;
}
.service-description{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.5;
    min-height:4.5em;
}
.provider-trust-box{
    background:#f8f9fa;
    border:1px solid #e9ecef;
    border-radius:12px;
    padding:14px 16px;
    display:inline-block;
}

.provider-trust-box .badge{
    font-size:0.9rem;
}

/* =========================================================
   SERVICEBERSAMA PREMIUM HOMEPAGE HERO
   ========================================================= */

.sb-home-hero {
  position: relative;
  min-height: 665px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 48% 42%,
      rgba(0, 116, 87, 0.5) 0%,
      rgba(0, 84, 64, 0.23) 29%,
      transparent 52%
    ),
    radial-gradient(
      circle at 90% 86%,
      rgba(105, 28, 170, 0.45) 0%,
      rgba(68, 19, 115, 0.25) 25%,
      transparent 50%
    ),
    linear-gradient(
      118deg,
      #0b1220 0%,
      #071b1a 43%,
      #0b1420 65%,
      #171023 100%
    );
}

.sb-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
}

.sb-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(5, 10, 19, 0.16),
      transparent 25%,
      transparent 75%,
      rgba(13, 6, 24, 0.18)
    );
}

.sb-home-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 88px;
  padding-bottom: 88px;
  text-align: center;
}

.sb-home-trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 31px;
  padding: 10px 18px;
  border: 1px solid rgba(106, 225, 174, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.93);
  background: rgba(6, 99, 73, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.sb-home-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #07523f;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.sb-home-hero-title {
  max-width: 900px;
  margin: 0 auto;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -3.5px;
}

.sb-home-hero-title span {
  display: block;
  margin-top: 5px;
  color: transparent;
  background: linear-gradient(
    90deg,
    #40bd80 0%,
    #78d1aa 55%,
    #54c890 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.sb-home-hero-description {
  max-width: 730px;
  margin: 28px auto 39px;
  color: rgba(255, 255, 255, 0.82);
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
}

.sb-home-service-selector {
  display: flex;
  align-items: stretch;
  width: min(950px, calc(100% - 32px));
  margin: 0 auto;
  padding: 10px;
  border: 8px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(88, 19, 143, 0.1);
}

.sb-home-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 84px;
  padding-left: 20px;
  border-radius: 13px 0 0 13px;
  background: #ffffff;
}

.sb-home-select-icon {
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-right: 17px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(
    145deg,
    #087357,
    #034436
  );
  box-shadow: 0 9px 21px rgba(2, 71, 54, 0.21);
}

.sb-home-service-select {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  padding: 0 52px 0 0;
  border: 0;
  outline: 0;
  color: #585d62;
  background-color: transparent;
  font-family: "DM Sans", sans-serif;
  font-size: 21px;
  font-weight: 500;
  cursor: pointer;
}

.sb-home-service-select:focus {
  outline: 0;
  box-shadow: none;
}

.sb-home-service-button {
  flex: 0 0 225px;
  min-height: 84px;
  padding: 16px 28px;
  border: 0;
  border-radius: 0 13px 13px 0;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #09684f,
    #034939
  );
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.sb-home-service-button:hover {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #08785a,
    #035640
  );
  box-shadow: 0 12px 27px rgba(0, 90, 67, 0.26);
}

.sb-home-service-button:active {
  transform: translateY(1px);
}

/* Decorative circles */

.sb-hero-circle {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}

.sb-hero-circle-left {
  top: -170px;
  left: -245px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(83, 192, 154, 0.15);
  background: rgba(28, 91, 81, 0.05);
  box-shadow:
    inset 0 0 90px rgba(33, 115, 99, 0.05),
    0 0 0 1px rgba(44, 134, 113, 0.02);
}

.sb-hero-circle-right {
  right: -265px;
  bottom: -345px;
  width: 665px;
  height: 665px;
  border: 3px solid rgba(151, 52, 231, 0.62);
  box-shadow:
    0 0 0 54px rgba(130, 39, 197, 0.09),
    0 0 0 107px rgba(130, 39, 197, 0.05);
}

.sb-hero-dots {
  position: absolute;
  z-index: 1;
  right: 23px;
  top: 47%;
  width: 85px;
  height: 85px;
  opacity: 0.25;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle,
      rgba(151, 52, 231, 0.9) 2px,
      transparent 2.5px
    );
  background-size: 17px 17px;
}

/* Tablet */

@media (max-width: 991.98px) {

  .sb-home-hero {
    min-height: 620px;
  }

  .sb-home-hero-content {
    padding: 78px 25px;
  }

  .sb-home-hero-title {
    font-size: clamp(44px, 7vw, 62px);
    letter-spacing: -2.5px;
  }

  .sb-home-service-selector {
    max-width: 780px;
  }

  .sb-home-service-button {
    flex-basis: 200px;
  }
}

/* Mobile */

@media (max-width: 767.98px) {

  .sb-home-hero {
    min-height: auto;
  }

  .sb-home-hero-content {
    padding: 66px 15px 70px;
  }

  .sb-home-trust-badge {
    margin-bottom: 25px;
    padding: 9px 13px;
    font-size: 11px;
    letter-spacing: 1.25px;
  }

  .sb-home-hero-title {
    font-size: clamp(40px, 12vw, 52px);
    line-height: 1.09;
    letter-spacing: -2px;
  }

  .sb-home-hero-description {
    margin-top: 23px;
    margin-bottom: 31px;
    padding: 0 10px;
    font-size: 17px;
    line-height: 1.55;
  }

  .sb-home-service-selector {
    display: block;
    width: 100%;
    max-width: 520px;
    padding: 8px;
    border-width: 6px;
    border-radius: 18px;
  }

  .sb-home-select-wrap {
    min-height: 72px;
    padding-left: 14px;
    border-radius: 11px;
  }

  .sb-home-select-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    margin-right: 12px;
  }

  .sb-home-service-select {
    min-height: 72px;
    padding-right: 35px;
    font-size: 17px;
    text-align: left;
    text-align-last: left;
  }

  .sb-home-service-button {
    width: 100%;
    min-height: 61px;
    margin-top: 8px;
    border-radius: 11px;
    font-size: 17px;
  }

  .sb-hero-circle-left {
    left: -385px;
  }

  .sb-hero-circle-right {
    right: -470px;
    bottom: -440px;
  }

  .sb-hero-dots {
    display: none;
  }
}

@media (max-width: 420px) {

  .sb-home-hero-title {
    font-size: 39px;
  }

  .sb-home-select-icon {
    display: none;
  }

  .sb-home-select-wrap {
    padding-left: 17px;
  }
}
#listings {
  position: relative;
  padding-top: 64px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(105, 31, 166, 0.04),
      transparent 36%
    ),
    #ffffff !important;
}

.sb-popular-heading {
  max-width: 820px;
  margin: 0 auto 45px;
  text-align: center;
}

.sb-section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-bottom: 17px;
  color: #7146a4;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.sb-section-eyebrow span {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(112, 68, 164, 0.55)
  );
}

.sb-section-eyebrow span:last-child {
  background: linear-gradient(
    90deg,
    rgba(112, 68, 164, 0.55),
    transparent
  );
}

.sb-popular-title {
  margin: 0 0 14px;
  color: #171d2d;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(35px, 4vw, 47px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.8px;
}

.sb-popular-title strong {
  color: #00674f;
  font-weight: 700;
}

.sb-popular-subtitle {
  margin: 0;
  color: #626b77;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  #listings {
    padding-top: 52px;
  }

  .sb-popular-heading {
    margin-bottom: 34px;
    padding: 0 12px;
  }

  .sb-popular-title {
    font-size: 34px;
    letter-spacing: -1.2px;
  }

  .sb-popular-subtitle {
    font-size: 15px;
  }
}
body > .navbar {
  min-height: 90px;
  padding: 14px 0;
  border-bottom: 1px solid #e9eeeb;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 18px rgba(18, 32, 27, 0.04) !important;
}

body > .navbar .container {
  max-width: 1380px;
}

body > .navbar .navbar-brand img {
  width: 200px;
  height: auto;
  object-fit: contain;
}

body > .navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto !important;
}

body > .navbar .navbar-nav .nav-link {
  margin: 0 12px;
  padding: 12px 3px;
  color: #19212f;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

body > .navbar .navbar-nav .nav-link:hover {
  color: #00674f;
}

.navbar-auth-actions {
  align-items: center;
}

.navbar-auth-actions .badge {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px !important;
  border-radius: 8px;
  color: #1a202c !important;
  background: #f5f6f6 !important;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.navbar-auth-actions .explore-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 8px;
  box-shadow: none;
}

.navbar-auth-actions .btn-outline-dark {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-color: #31564d;
  border-radius: 8px;
  font-weight: 600;
}

@media (max-width: 991.98px) {

  body > .navbar {
    min-height: auto;
    padding: 11px 0;
  }

  body > .navbar .navbar-brand img {
    width: 170px;
  }

  body > .navbar .navbar-nav {
    margin-right: 0 !important;
  }

  body > .navbar .navbar-nav .nav-link {
    margin: 0;
    padding: 10px 0;
  }
}
/* =========================================================
   SERVICEBERSAMA HOMEPAGE — TOP BAR AND MAIN NAVIGATION
========================================================= */

:root {
  --sb-emerald: #064e3b;
  --sb-emerald-dark: #022c22;
  --sb-emerald-hover: #043f31;
  --sb-white: #ffffff;
  --sb-black: #111111;
  --sb-border: #e5e7eb;
}


/* TOP QUICK LINKS BAR */

.sb-topbar {
  width: 100%;
  background: var(--sb-emerald-dark);
  color: var(--sb-white);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
}

.sb-topbar-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.sb-topbar-left {
  white-space: nowrap;
  opacity: 0.9;
}

.sb-topbar-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
}

.sb-topbar-links a {
  color: var(--sb-white);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.sb-topbar-links a:hover {
  color: var(--sb-white);
  opacity: 0.75;
}

.sb-topbar-provider-link {
  font-weight: 700 !important;
}


/* MAIN NAVIGATION */

.sb-main-navbar {
  min-height: 76px;
  background: var(--sb-white);
  border-bottom: 1px solid var(--sb-border);
  box-shadow: none;
  font-family: "DM Sans", sans-serif;
  z-index: 1030;
}

.sb-navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 30px;
}

.sb-navbar-logo {
  display: block;
  width: 210px;
  height: auto;
  max-height: 54px;
  object-fit: contain;
}

.sb-main-menu {
  align-items: center;
  gap: 8px;
}

.sb-main-menu .nav-link {
  position: relative;
  padding: 26px 13px !important;
  color: var(--sb-black);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.sb-main-menu .nav-link:hover,
.sb-main-menu .nav-link.active {
  color: var(--sb-emerald);
}

.sb-main-menu .nav-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 18px;
  height: 2px;
  background: var(--sb-emerald);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.sb-main-menu .nav-link:hover::after,
.sb-main-menu .nav-link.active::after {
  transform: scaleX(1);
}


/* NAVIGATION ACTIONS */

.sb-navbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.sb-navbar-user {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sb-black);
  font-size: 13px;
  font-weight: 600;
}

.sb-nav-login-btn,
.sb-nav-logout-btn {
  min-width: 88px;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid var(--sb-black);
  border-radius: 8px;
  background: var(--sb-white);
  color: var(--sb-black);
  font-size: 14px;
  font-weight: 700;
}

.sb-nav-login-btn:hover,
.sb-nav-logout-btn:hover {
  border-color: var(--sb-emerald);
  background: var(--sb-white);
  color: var(--sb-emerald);
}

.sb-nav-signup-btn,
.sb-nav-dashboard-btn {
  min-width: 96px;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid var(--sb-emerald);
  border-radius: 8px;
  background: var(--sb-emerald);
  color: var(--sb-white);
  font-size: 14px;
  font-weight: 700;
}

.sb-nav-signup-btn:hover,
.sb-nav-dashboard-btn:hover {
  border-color: var(--sb-emerald-hover);
  background: var(--sb-emerald-hover);
  color: var(--sb-white);
}


/* TABLET AND MOBILE */

@media (max-width: 991.98px) {

  .sb-topbar-left {
    display: none;
  }

  .sb-topbar-inner {
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .sb-topbar-links {
    justify-content: center;
    gap: 7px 14px;
  }

  .sb-topbar-links a {
    font-size: 11px;
  }

  .sb-main-navbar {
    min-height: 68px;
  }

  .sb-navbar-logo {
    width: 210px;
    max-height: 54px;
  }

  .sb-navbar-toggler {
    border: 1px solid var(--sb-border);
    box-shadow: none !important;
  }

  .sb-main-navbar .navbar-collapse {
    margin-top: 14px;
    padding: 15px;
    border-top: 1px solid var(--sb-border);
    background: var(--sb-white);
  }

  .sb-main-menu {
    align-items: stretch;
    gap: 0;
  }

  .sb-main-menu .nav-link {
    padding: 13px 4px !important;
    border-bottom: 1px solid #f1f1f1;
  }

  .sb-main-menu .nav-link::after {
    display: none;
  }

  .sb-navbar-actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 18px;
  }

  .sb-navbar-user {
    max-width: 100%;
    padding: 8px 0;
    text-align: center;
  }

  .sb-nav-login-btn,
  .sb-nav-logout-btn,
  .sb-nav-signup-btn,
  .sb-nav-dashboard-btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {

  .sb-topbar {
    display: none;
  }

  .sb-main-navbar {
    min-height: 64px;
  }

  .sb-navbar-logo {
    width: 210px;
  }
}
/* =========================================================
   HOMEPAGE TOP QUICK-LINKS BAR — FINAL FIX
========================================================= */

.sb-topbar {
  width: 100% !important;
  background-color: #022c22 !important;
  color: #ffffff !important;
  border: 0 !important;
  font-family: "DM Sans", sans-serif !important;
}

.sb-topbar-inner {
  min-height: 38px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
}

.sb-topbar-left,
.sb-topbar-left span {
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 500;
}

.sb-topbar-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap;
  gap: 18px;
}

.sb-topbar-links a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.sb-topbar-links a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.sb-topbar-provider-link {
  font-weight: 700 !important;
}


/* TABLET */

@media (max-width: 991.98px) {
  .sb-topbar-inner {
    justify-content: center !important;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .sb-topbar-left {
    display: none !important;
  }

  .sb-topbar-links {
    justify-content: center !important;
    gap: 8px 16px;
  }
}


/* MOBILE */

@media (max-width: 575.98px) {
  .sb-topbar {
    display: none !important;
  }
}
/* =========================================================
   HOMEPAGE HERO — EMERALD, WHITE AND BLACK ONLY
========================================================= */

.sb-home-hero {
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(16, 120, 88, 0.55) 0%,
      rgba(6, 78, 59, 0.25) 32%,
      transparent 62%
    ),
    linear-gradient(
      135deg,
      #021c16 0%,
      #032f24 50%,
      #010f0c 100%
    ) !important;
}

/* Remove purple decoration */

.sb-hero-circle-right {
  border-color: rgba(52, 211, 153, 0.12) !important;
  background: transparent !important;
}

.sb-hero-circle-left {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

.sb-hero-dots {
  opacity: 0.18 !important;
  filter: grayscale(1) !important;
}

/* Hero badge */

.sb-home-trust-badge {
  background: rgba(6, 95, 70, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.sb-home-trust-icon {
  background: #ffffff !important;
  color: #064e3b !important;
}

/* Hero heading */

.sb-home-hero-title {
  color: #ffffff !important;
}

.sb-home-hero-title span {
  color: #6ee7b7 !important;
}

/* Hero description */

.sb-home-hero-description {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Search container */

.sb-home-service-selector {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.sb-home-select-wrap {
  background: #ffffff !important;
}

.sb-home-select-icon {
  background: #065f46 !important;
  color: #ffffff !important;
}

.sb-home-service-select {
  background-color: #ffffff !important;
  color: #111111 !important;
}

.sb-home-service-button {
  background: #065f46 !important;
  color: #ffffff !important;
  border-color: #065f46 !important;
}

.sb-home-service-button:hover {
  background: #022c22 !important;
  border-color: #022c22 !important;
  color: #ffffff !important;
}
/* =========================================================
   POPULAR CATEGORIES
========================================================= */

#explore-services {
  background: #ffffff !important;
}

#explore-services .section-title {
  margin-bottom: 10px;
  color: #111111;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

#explore-services .section-subtitle {
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
  color: #6b7280;
  font-size: 15px;
}

.sb-category-card {
  width: 100%;
  min-height: 170px;
  padding: 22px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  color: #111111;
  font-family: "DM Sans", sans-serif;
  text-align: center;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sb-category-card:hover {
  transform: translateY(-4px);
  border-color: #065f46;
  box-shadow: 0 12px 30px rgba(2, 44, 34, 0.1);
}

.sb-category-icon-wrap {
  width: 86px;
  height: 86px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f0fdf8;
}

.sb-category-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.sb-category-name {
  display: block;
  color: #111111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .sb-category-card {
    min-height: 145px;
    padding: 18px 10px;
  }

  .sb-category-icon-wrap {
    width: 72px;
    height: 72px;
  }

  .sb-category-icon {
    width: 50px;
    height: 50px;
  }
}
/* =========================================================
   POPULAR SERVICES — CLEAN PREMIUM STYLE
========================================================= */

#listings {
  background: #f7f8f7 !important;
  padding-top: 80px;
  padding-bottom: 80px;
}

.sb-popular-heading {
  max-width: 680px;
  margin: 0 auto 45px;
  text-align: center;
}

.sb-section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #065f46;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sb-section-eyebrow span {
  width: 28px;
  height: 1px;
  background: #065f46;
}

.sb-popular-title {
  margin-bottom: 12px;
  color: #111111;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sb-popular-title strong {
  color: #065f46;
  font-weight: 700;
}

.sb-popular-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.7;
}

#listingGrid {
  justify-content: center;
}

#listings .listing-card {
  overflow: hidden;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#listings .listing-card:hover {
  transform: translateY(-5px);
  border-color: #065f46;
  box-shadow: 0 16px 35px rgba(2, 44, 34, 0.1);
}

#listings .service-image-wrap {
  overflow: hidden;
  border-radius: 14px;
}

#listings .service-card-image {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  object-fit: cover;
}

#listings .listing-title {
  margin-bottom: 8px;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

#listings .provider-link {
  color: #111111;
  font-weight: 600;
}

#listings .provider-link:hover {
  color: #065f46;
}

#listings .price {
  color: #064e3b;
  font-size: 15px;
  font-weight: 700;
}

#listings .listing-description-more {
  color: #065f46 !important;
  font-size: 13px;
  font-weight: 600;
}

#listings .explore-btn {
  border-color: #065f46 !important;
  border-radius: 9px;
  background: #065f46 !important;
  color: #ffffff !important;
  font-weight: 700;
}

#listings .explore-btn:hover {
  border-color: #022c22 !important;
  background: #022c22 !important;
  color: #ffffff !important;
}

@media (max-width: 767.98px) {
  #listings {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #listings .service-card-image {
    height: 200px;
  }
}
/* =========================================================
   WHY CHOOSE SERVICEBERSAMA
========================================================= */

.sb-why-section {
    padding: 58px 0;
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
}

.sb-why-heading {
    max-width: 650px;
    margin: 0 auto 30px;
    text-align: center;
}

.sb-why-heading h2 {
    margin-bottom: 10px;
    font-size: clamp(27px, 3vw, 36px);
}

.sb-why-heading p {
    font-size: 14px;
    line-height: 1.6;
}

.sb-why-card {
    padding: 20px;
    min-height: 145px;
    border-radius: 16px;
}

.sb-why-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
}

.sb-why-card h3 {
    margin-bottom: 6px;
    font-size: 17px;
}

.sb-why-card p {
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .sb-why-section {
        padding: 34px 0 38px;
    }

    .sb-why-heading {
        margin-bottom: 22px;
    }

    .sb-why-card {
        min-height: 0;
        padding: 16px;
    }
}
/* =========================================================
   ABOUT SERVICEBERSAMA
========================================================= */

.sb-about-section {
  padding: 90px 0;
  background: #022c22;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
}

.sb-about-content {
  max-width: 590px;
}

.sb-about-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.sb-about-content h2 {
  margin-bottom: 22px;
  color: #ffffff;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.sb-about-content p {
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.8;
}

.sb-about-button {
  margin-top: 12px;
  padding: 12px 22px;
  border: 1px solid #ffffff;
  border-radius: 9px;
  background: #ffffff;
  color: #022c22;
  font-size: 14px;
  font-weight: 700;
}

.sb-about-button:hover {
  border-color: #6ee7b7;
  background: #6ee7b7;
  color: #022c22;
}

.sb-about-panel {
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
}

.sb-about-stat {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sb-about-stat:first-child {
  padding-top: 0;
}

.sb-about-stat:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sb-about-stat-number {
  color: #6ee7b7;
  font-size: 15px;
  font-weight: 700;
}

.sb-about-stat h3 {
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.sb-about-stat p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 991.98px) {
  .sb-about-section {
    padding: 70px 0;
  }

  .sb-about-content {
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .sb-about-panel {
    padding: 24px;
  }

  .sb-about-stat {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
/* =========================================================
   SERVICEBERSAMA FOOTER
========================================================= */

.sb-footer {
  padding: 72px 0 26px;
  background: #011c16;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
}

.sb-footer-brand {
  max-width: 420px;
}

.sb-footer-brandmark{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
    text-decoration:none;
}

.sb-footer-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#065f46;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:22px;
    letter-spacing:-1px;
    transition:.25s;
}

.sb-footer-brandmark:hover .sb-footer-icon{
    background:#10b981;
}

.sb-footer-name{
    font-size:34px;
    font-weight:800;
    color:#ffffff;
    letter-spacing:-1px;
    line-height:1;
}

.sb-footer-name span{
    color:#10b981;
}

.sb-footer-brand p {
  max-width: 370px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.8;
}

.sb-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.sb-footer-socials a {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.sb-footer-socials a:hover {
  color: #6ee7b7;
}

.sb-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sb-footer-column h3 {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.sb-footer-column a {
  margin-bottom: 13px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.sb-footer-column a:hover {
  color: #6ee7b7;
  transform: translateX(3px);
}

.sb-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 55px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sb-footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

@media (max-width: 767.98px) {
  .sb-footer {
    padding-top: 55px;
  }

  .sb-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 40px;
  }
}
/* =========================================================
   MATCH CATEGORY HEADING WITH POPULAR SERVICES
========================================================= */

#explore-services .section-title {
  font-family: "DM Sans", sans-serif !important;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #111111;
}

#explore-services .section-subtitle {
  font-family: "DM Sans", sans-serif !important;
}

.sb-hero-highlights{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
}

.sb-highlight{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    padding:10px 18px;
    border-radius:999px;
    font-size:.95rem;
    font-weight:600;
}

@media(max-width:768px){

.sb-hero-highlights{
    flex-direction:column;
    align-items:center;
}

.sb-highlight{
    width:100%;
    max-width:280px;
    text-align:center;
}

}

/* Top bar Register as Provider button */
.sb-topbar .sb-topbar-provider-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

.sb-topbar .sb-topbar-provider-link:hover,
.sb-topbar .sb-topbar-provider-link:focus {
  color: #a7f3d0;
  background: transparent;
  outline: none;
}
.sb-provider-home-link {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  color: #ffffff;
  background: rgba(6, 78, 59, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.sb-provider-home-link:hover {
  color: #ffffff;
  background: #065f46;
}

@media (max-width: 767.98px) {
  .sb-provider-home-link {
    top: 12px;
    left: 12px;
    padding: 9px 12px;
    font-size: 13px;
  }
}
/* ==========================================
   FIX MOBILE HERO HIDDEN UNDER NAVBAR
========================================== */

@media (max-width:767.98px){

    .sb-home-hero{
        padding-top:70px;
    }

}

/* =========================================================
   SERVICEBERSAMA DASHBOARD DESIGN
========================================================= */

.sb-dashboard {
    --dashboard-green: #065f46;
    --dashboard-green-dark: #064e3b;
    --dashboard-green-light: #ecfdf5;
    --dashboard-background: #f6f8f7;
    --dashboard-border: #e3e9e6;
    --dashboard-text: #111827;
    --dashboard-muted: #6b7280;

    min-height: 100vh;
    color: var(--dashboard-text);
    background: var(--dashboard-background);
    font-family: "DM Sans", sans-serif;
}

/* Navbar */

.sb-dashboard-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--dashboard-border);
    box-shadow: 0 4px 18px rgba(6, 78, 59, 0.04);
    backdrop-filter: blur(12px);
}

.sb-dashboard-navbar .container {
    min-height: 76px;
}

.sb-dashboard-navbar .navbar-brand img {
    width: 190px;
    max-width: 55vw;
    height: auto;
    object-fit: contain;
}

.sb-dashboard-navbar .navbar-toggler {
    border-color: var(--dashboard-border);
    border-radius: 10px;
}

/* Main area */

.sb-dashboard-main {
    padding-top: 42px;
    padding-bottom: 70px;
}

.sb-dashboard-main > .d-flex:first-child h1 {
    color: var(--dashboard-text);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.sb-dashboard-main > .d-flex:first-child p {
    color: var(--dashboard-muted);
}

/* Content panels */

.sb-dashboard .card {
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.045);
}

.sb-dashboard .card h2 {
    color: var(--dashboard-text);
    font-weight: 700;
}

/* KPI cards */

.sb-dashboard .provider-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.sb-dashboard .provider-stats .stat-box {
    min-width: 0;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(17, 24, 39, 0.04);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sb-dashboard .provider-stats .stat-box:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 95, 70, 0.28);
    box-shadow: 0 14px 30px rgba(6, 78, 59, 0.08);
}

.sb-dashboard .provider-stats .stat-box.active {
    background: linear-gradient(145deg, #ecfdf5, #ffffff);
    border-color: rgba(6, 95, 70, 0.2);
}

.sb-dashboard .provider-stats .stat-box.paused {
    background: linear-gradient(145deg, #fffbeb, #ffffff);
    border-color: #f3e6bd;
}

.sb-dashboard .provider-stats .customer-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 13px;
    background: var(--dashboard-green-light);
    border-radius: 11px;
    font-size: 1.15rem;
}

.sb-dashboard .provider-stats .stat-box p {
    margin-bottom: 5px;
    color: var(--dashboard-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.sb-dashboard .provider-stats .stat-box h3 {
    margin: 0;
    color: var(--dashboard-text);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.sb-dashboard .provider-stats .stat-box h3.small-label {
    font-size: 1rem;
    line-height: 1.45;
}

.sb-dashboard .provider-stats .stat-box small {
    display: block;
    margin-top: 5px;
    color: var(--dashboard-muted) !important;
    line-height: 1.4;
}

/* Inputs */

.sb-dashboard .form-control,
.sb-dashboard .form-select {
    min-height: 44px;
    border-color: #d7dfdb;
    border-radius: 10px;
}

.sb-dashboard .form-control:focus,
.sb-dashboard .form-select:focus {
    border-color: var(--dashboard-green);
    box-shadow: 0 0 0 0.2rem rgba(6, 95, 70, 0.12);
}

/* Buttons */

.sb-dashboard .explore-btn,
.sb-dashboard .btn-success {
    color: #ffffff;
    background: var(--dashboard-green);
    border-color: var(--dashboard-green);
    border-radius: 9px;
    font-weight: 700;
}

.sb-dashboard .explore-btn:hover,
.sb-dashboard .btn-success:hover {
    color: #ffffff;
    background: var(--dashboard-green-dark);
    border-color: var(--dashboard-green-dark);
}

/* Tables */

.sb-dashboard .table {
    margin-bottom: 0;
}

.sb-dashboard .table thead th {
    padding-top: 14px;
    padding-bottom: 14px;
    color: #4b5563;
    background: #f8faf9;
    border-bottom-color: var(--dashboard-border);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sb-dashboard .table tbody td {
    padding-top: 17px;
    padding-bottom: 17px;
    border-color: #edf1ef;
    vertical-align: middle;
}

/* Responsive */

@media (max-width: 1199.98px) {
    .sb-dashboard .provider-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .sb-dashboard-navbar .container {
        min-height: 68px;
    }

    .sb-dashboard-navbar .navbar-brand img {
        width: 155px;
    }

    .sb-dashboard-main {
        padding-top: 28px;
        padding-bottom: 50px;
    }

    .sb-dashboard .provider-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .sb-dashboard .provider-stats .stat-box {
        padding: 16px;
    }

    .sb-dashboard .card {
        border-radius: 14px;
    }
}

@media (max-width: 420px) {
    .sb-dashboard .provider-stats {
        grid-template-columns: 1fr;
    }
}
/* Dashboard navigation */

.sb-dashboard-menu {
    gap: 6px;
}

.sb-dashboard-menu .nav-link {
    padding: 9px 13px !important;
    color: #4b5563;
    border-radius: 9px;
    font-size: 0.92rem;
    font-weight: 600;
}

.sb-dashboard-menu .nav-link:hover {
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
}

.sb-dashboard-menu .nav-link.active {
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
}

.sb-dashboard-user-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-dashboard-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 600;
}

.sb-dashboard-user i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
    border-radius: 50%;
}

.sb-dashboard-logout {
    padding: 8px 14px;
    color: var(--dashboard-green);
    background: #ffffff;
    border: 1px solid var(--dashboard-green);
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 700;
}

.sb-dashboard-logout:hover {
    color: #ffffff;
    background: var(--dashboard-green);
    border-color: var(--dashboard-green);
}

@media (max-width: 991.98px) {
    .sb-dashboard-navbar .navbar-collapse {
        padding: 16px 0 6px;
        border-top: 1px solid var(--dashboard-border);
    }

    .sb-dashboard-menu {
        margin-top: 8px;
    }

    .sb-dashboard-menu .nav-link {
        padding: 11px 12px !important;
    }

    .sb-dashboard-user-actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 12px;
    }

    .sb-dashboard-user,
    .sb-dashboard-logout {
        width: 100%;
    }

    .sb-dashboard-logout {
        text-align: center;
    }
}
/* Customer KPI icons */

.sb-customer-dashboard .customer-stat-icon i {
    color: var(--dashboard-green);
    font-size: 1rem;
}

.sb-customer-dashboard .stat-box.active .customer-stat-icon {
    background: #d9f5e9;
}

.sb-customer-dashboard .stat-box.paused .customer-stat-icon {
    background: #fef3c7;
}

.sb-customer-dashboard .stat-box.paused .customer-stat-icon i {
    color: #b7791f;
}

.sb-customer-dashboard .stat-box:nth-child(4) .customer-stat-icon {
    background: #fef2f2;
}

.sb-customer-dashboard .stat-box:nth-child(4) .customer-stat-icon i {
    color: #b91c1c;
}
/* Customer bookings heading */

.sb-bookings-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.sb-bookings-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sb-bookings-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
    border-radius: 13px;
}

.sb-dashboard-eyebrow {
    margin: 0 0 3px;
    color: var(--dashboard-green) !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.sb-bookings-search {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sb-bookings-search-input {
    position: relative;
    min-width: 280px;
}

.sb-bookings-search-input i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: #9ca3af;
    transform: translateY(-50%);
}

.sb-bookings-search-input .form-control {
    padding-left: 40px;
}

.sb-bookings-clear {
    min-height: 44px;
    padding: 9px 15px;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-weight: 600;
}

.sb-bookings-clear:hover {
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
    border-color: var(--dashboard-green);
}

@media (max-width: 767.98px) {
    .sb-bookings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .sb-bookings-search {
        width: 100%;
    }

    .sb-bookings-search-input {
        flex: 1;
        min-width: 0;
    }
}
/* Customer quotation card */

.sb-customer-quotation {
    width: 260px;
    max-width: 100%;
    padding: 15px;
    background: #f8faf9;
    border: 1px solid var(--dashboard-border);
    border-radius: 14px;
}

.sb-customer-quotation-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.sb-customer-quotation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
    border-radius: 10px;
}

.sb-customer-quotation-heading div {
    display: flex;
    flex-direction: column;
}

.sb-customer-quotation-heading small {
    color: var(--dashboard-green);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sb-customer-quotation-heading strong {
    color: var(--dashboard-text);
    font-size: 0.9rem;
}

.sb-customer-quotation-amount {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: 10px;
}

.sb-customer-quotation-amount span {
    color: var(--dashboard-muted);
    font-size: 0.75rem;
}

.sb-customer-quotation-amount strong {
    color: var(--dashboard-green-dark);
    font-size: 1rem;
    white-space: nowrap;
}

.sb-customer-quotation-notes {
    margin-bottom: 13px;
    padding: 11px 12px;
    background: #ffffff;
    border-left: 3px solid var(--dashboard-green);
    border-radius: 8px;
}

.sb-customer-quotation-notes span {
    display: block;
    margin-bottom: 5px;
    color: var(--dashboard-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sb-customer-quotation-notes p {
    margin: 0;
    color: #4b5563;
    font-size: 0.82rem;
    line-height: 1.5;
}
/* =========================================================
   CUSTOMER BOOKINGS — MOBILE CARDS
========================================================= */

@media (max-width: 767.98px) {

    .sb-customer-dashboard .customer-orders-table {
        border: 0;
    }

    .sb-customer-dashboard .customer-orders-table thead {
        display: none;
    }

    .sb-customer-dashboard .customer-orders-table tbody,
    .sb-customer-dashboard .customer-orders-table tr,
    .sb-customer-dashboard .customer-orders-table td {
        display: block;
        width: 100%;
    }

    .sb-customer-dashboard .customer-orders-table tbody tr {
        margin-bottom: 16px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid var(--dashboard-border);
        border-radius: 14px;
        box-shadow: 0 7px 22px rgba(17, 24, 39, 0.045);
    }

    .sb-customer-dashboard .customer-orders-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .sb-customer-dashboard .customer-orders-table tbody td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 12px;
        padding: 11px 14px;
        border: 0;
        border-bottom: 1px solid #edf1ef;
        font-size: 0.88rem;
        overflow-wrap: anywhere;
    }

    .sb-customer-dashboard .customer-orders-table tbody td::before {
        color: var(--dashboard-muted);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(1)::before {
        content: "Booking #";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(2)::before {
        content: "Service";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(3)::before {
        content: "Provider";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(4)::before {
        content: "Date";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(5)::before {
        content: "Time";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(6)::before {
        content: "Location";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(7)::before {
        content: "Status";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(8)::before {
        content: "Requested";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(9) {
        display: block;
        padding: 14px;
        background: #f8faf9;
        border-bottom: 0;
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(9)::before {
        display: block;
        margin-bottom: 10px;
        content: "Available Actions";
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(9) > .d-flex {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        gap: 8px !important;
    }

    .sb-customer-dashboard .customer-orders-table tbody td:nth-child(9) .btn {
        width: 100%;
        min-height: 42px;
    }

    .sb-customer-dashboard .sb-customer-quotation {
        width: 100%;
    }

    .sb-customer-dashboard #customerBookingsSection {
        padding: 16px !important;
    }

    .sb-customer-dashboard #ordersAjaxStatus {
        margin-bottom: 12px;
    }
}
/* Customer featured services heading */

.sb-featured-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.sb-featured-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sb-featured-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
    border-radius: 13px;
}

.sb-view-all-services {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: var(--dashboard-green);
    background: #ffffff;
    border: 1px solid var(--dashboard-green);
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.sb-view-all-services:hover {
    color: #ffffff;
    background: var(--dashboard-green);
}

.sb-view-all-services i {
    font-size: 0.78rem;
    transition: transform 0.2s ease;
}

.sb-view-all-services:hover i {
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    .sb-featured-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .sb-view-all-services {
        justify-content: center;
        width: 100%;
    }
}
/* =========================================================
   CUSTOMER DASHBOARD MODALS
========================================================= */

.sb-customer-dashboard .modal-content {
    overflow: hidden;
    border: 1px solid var(--dashboard-border);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.18);
}

.sb-customer-dashboard .modal-header {
    padding: 20px 22px;
    background: linear-gradient(
        135deg,
        var(--dashboard-green-dark),
        var(--dashboard-green)
    );
    border-bottom: 0;
}

.sb-customer-dashboard .modal-header .modal-title {
    color: #ffffff;
    font-weight: 700;
}

.sb-customer-dashboard .modal-header .btn-close {
    filter: invert(1);
    opacity: 0.85;
}

.sb-customer-dashboard .modal-header .btn-close:hover {
    opacity: 1;
}

.sb-customer-dashboard .modal-body {
    padding: 22px;
}

.sb-customer-dashboard .modal-footer {
    padding: 16px 22px 20px;
    background: #f8faf9;
    border-top: 1px solid var(--dashboard-border);
}

.sb-customer-dashboard .modal-footer .btn {
    min-height: 42px;
    padding: 9px 17px;
    border-radius: 9px;
    font-weight: 700;
}

.sb-customer-dashboard .modal-body .form-label {
    color: #374151;
    font-size: 0.86rem;
    font-weight: 700;
}

.sb-customer-dashboard .modal-body .form-text {
    color: var(--dashboard-muted);
    line-height: 1.5;
}

.sb-customer-dashboard .modal-body .input-group-text {
    color: var(--dashboard-green-dark);
    background: var(--dashboard-green-light);
    border-color: #d7dfdb;
}

.sb-customer-dashboard .modal-backdrop.show {
    opacity: 0.58;
}

@media (max-width: 575.98px) {
    .sb-customer-dashboard .modal-dialog {
        margin: 12px;
    }

    .sb-customer-dashboard .modal-content {
        border-radius: 15px;
    }

    .sb-customer-dashboard .modal-header,
    .sb-customer-dashboard .modal-body,
    .sb-customer-dashboard .modal-footer {
        padding-left: 17px;
        padding-right: 17px;
    }

    .sb-customer-dashboard .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .sb-customer-dashboard .modal-footer .btn {
        width: 100%;
    }
}
/* Customer dashboard welcome area */

.sb-dashboard-browse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 20px;
    color: #ffffff;
    background: var(--dashboard-green);
    border: 1px solid var(--dashboard-green);
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(6, 95, 70, 0.16);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.sb-dashboard-browse-button:hover {
    color: #ffffff;
    background: var(--dashboard-green-dark);
    border-color: var(--dashboard-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(6, 95, 70, 0.22);
}

.sb-dashboard-browse-button:focus-visible {
    color: #ffffff;
    outline: 3px solid rgba(6, 95, 70, 0.2);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .sb-dashboard-main > .d-flex:first-child {
        align-items: stretch !important;
        flex-direction: column;
    }

    .sb-dashboard-browse-button {
        width: 100%;
    }
}
/* Featured service card alignment */

.sb-customer-dashboard .featured-card {
    display: flex;
    flex-direction: column;
}

.sb-customer-dashboard .featured-service-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.sb-customer-dashboard .featured-service-meta .badge {
    white-space: nowrap;
}

.sb-customer-dashboard .featured-service-meta small {
    color: var(--dashboard-muted) !important;
    line-height: 1.45;
    text-align: right;
    overflow-wrap: anywhere;
}

.sb-customer-dashboard .featured-service-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: end;
    gap: 14px;
    margin-top: auto !important;
}

.sb-customer-dashboard .featured-service-footer .price {
    min-width: 0;
    color: var(--dashboard-green-dark);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
}

.sb-customer-dashboard .featured-service-footer .hire-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    min-height: 46px;
    padding: 10px 14px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .sb-customer-dashboard .featured-service-footer {
        grid-template-columns: 1fr;
    }

    .sb-customer-dashboard .featured-service-footer .hire-btn {
        width: 100%;
    }
}
/* Final featured-card footer alignment */

.sb-customer-dashboard .featured-service-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 145px !important;
    align-items: end !important;
    gap: 14px !important;
    width: 100%;
    margin-top: auto !important;
}

.sb-customer-dashboard .featured-service-footer .price {
    display: block;
    min-width: 0;
    min-height: 0;
    width: auto;
    color: var(--dashboard-green-dark);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: normal;
}

.sb-customer-dashboard .featured-service-footer .hire-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 145px !important;
    min-width: 145px !important;
    min-height: 46px;
    margin: 0 !important;
    padding: 10px 13px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .sb-customer-dashboard .featured-service-footer {
        grid-template-columns: 1fr !important;
    }

    .sb-customer-dashboard .featured-service-footer .hire-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}
/* Featured service image and location */

.sb-customer-dashboard .featured-service-image-wrap {
    position: relative;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 14px;
    background: #eef5f1;
}

.sb-customer-dashboard .featured-service-image-wrap .service-card-image {
    display: block;
    width: 100%;
    height: 220px;
    margin: 0 !important;
    border-radius: 0;
    object-fit: cover;
}

.sb-customer-dashboard .featured-service-category {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 2;
    max-width: calc(100% - 26px);
    padding: 7px 11px;
    overflow: hidden;
    color: var(--dashboard-green-dark);
    background: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
}

.sb-customer-dashboard .featured-service-districts {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 15px;
    padding-bottom: 14px;
    color: var(--dashboard-muted);
    border-bottom: 1px solid var(--dashboard-border);
    font-size: 0.82rem;
    line-height: 1.45;
}

.sb-customer-dashboard .featured-service-districts i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--dashboard-green);
}
/* Featured service content order */

.sb-customer-dashboard .featured-card {
    display: flex;
    flex-direction: column;
}

.sb-customer-dashboard .featured-service-image-wrap {
    order: 1;
}

.sb-customer-dashboard .featured-card > h5 {
    order: 2;
    margin-bottom: 8px !important;
    color: var(--dashboard-text);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
}

.sb-customer-dashboard .featured-service-provider {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--dashboard-muted);
    font-size: 0.82rem;
}

.sb-customer-dashboard .featured-service-provider a {
    color: var(--dashboard-green);
    font-weight: 700;
    text-decoration: none;
}

.sb-customer-dashboard .featured-service-provider a:hover {
    text-decoration: underline;
}

.sb-customer-dashboard .featured-service-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sb-customer-dashboard .featured-service-rating i {
    color: #d97706;
    font-size: 0.76rem;
}

.sb-customer-dashboard .featured-service-rating strong {
    color: #4b5563;
}

.sb-customer-dashboard .listing-description-wrap {
    order: 4;
}

.sb-customer-dashboard .featured-service-districts {
    order: 5;
    margin-top: 12px;
}

.sb-customer-dashboard .featured-service-footer {
    order: 6;
}
/* =========================================================
   CUSTOMER DASHBOARD SERVICE CARDS
   Matches services.php
========================================================= */

.sb-customer-dashboard .sb-dashboard-service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.05);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sb-customer-dashboard .sb-dashboard-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(6, 95, 70, 0.25);
    box-shadow: 0 16px 36px rgba(17, 24, 39, 0.1);
}

/* Image */

.sb-customer-dashboard .sb-dashboard-service-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef5f1;
}

.sb-customer-dashboard .sb-dashboard-service-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sb-customer-dashboard
.sb-dashboard-service-card:hover
.sb-dashboard-service-image {
    transform: scale(1.025);
}

.sb-customer-dashboard .sb-dashboard-service-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dashboard-muted);
    font-weight: 600;
}

.sb-customer-dashboard .sb-dashboard-service-category {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    max-width: calc(100% - 28px);
    padding: 7px 11px;
    overflow: hidden;
    color: var(--dashboard-green-dark);
    background: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
}

/* Card body */

.sb-customer-dashboard .sb-dashboard-service-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.sb-customer-dashboard .sb-dashboard-service-body h3 {
    margin: 0 0 8px;
    color: var(--dashboard-text);
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.35;
}

.sb-customer-dashboard .sb-dashboard-service-provider {
    margin-bottom: 12px;
    color: var(--dashboard-muted);
    font-size: 0.88rem;
}

.sb-customer-dashboard .sb-dashboard-service-provider a {
    color: var(--dashboard-green);
    font-weight: 700;
    text-decoration: none;
}

.sb-customer-dashboard .sb-dashboard-service-provider a:hover {
    text-decoration: underline;
}

/* Description */

.sb-customer-dashboard .sb-dashboard-service-description {
    display: -webkit-box;
    min-height: 66px;
    margin: 0 0 5px;
    overflow: hidden;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.sb-customer-dashboard .sb-dashboard-service-details {
    align-self: flex-start;
    margin: 0 0 14px;
    padding: 0;
    color: var(--dashboard-green);
    background: transparent;
    border: 0;
    font-size: 0.8rem;
    font-weight: 700;
}

.sb-customer-dashboard .sb-dashboard-service-details:hover {
    color: var(--dashboard-green-dark);
    text-decoration: underline;
}

/* Rating and districts */

.sb-customer-dashboard .sb-dashboard-service-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 13px;
    color: #4b5563;
    font-size: 0.86rem;
}

.sb-customer-dashboard .sb-dashboard-service-star {
    color: #d97706;
}

.sb-customer-dashboard .sb-dashboard-service-districts {
    min-height: 42px;
    margin-bottom: 16px;
    color: var(--dashboard-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Price and booking button */

.sb-customer-dashboard .sb-dashboard-service-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--dashboard-border);
}

.sb-customer-dashboard .sb-dashboard-service-price {
    min-width: 0;
    color: var(--dashboard-green-dark);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.4;
}

.sb-customer-dashboard .sb-dashboard-service-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 135px;
    min-height: 44px;
    padding: 10px 14px;
    color: #ffffff;
    background: var(--dashboard-green);
    border: 1px solid var(--dashboard-green);
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.sb-customer-dashboard .sb-dashboard-service-book:hover {
    color: #ffffff;
    background: var(--dashboard-green-dark);
    border-color: var(--dashboard-green-dark);
}

/* Responsive */

@media (max-width: 575.98px) {
    .sb-customer-dashboard .sb-dashboard-service-body {
        padding: 17px;
    }

    .sb-customer-dashboard .sb-dashboard-service-footer {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .sb-customer-dashboard .sb-dashboard-service-book {
        width: 100%;
    }
}
/* Provider navigation actions */

.sb-provider-add-service {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 13px;
    color: #ffffff;
    background: var(--dashboard-green);
    border: 1px solid var(--dashboard-green);
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.sb-provider-add-service:hover {
    color: #ffffff;
    background: var(--dashboard-green-dark);
    border-color: var(--dashboard-green-dark);
}

.sb-provider-notifications {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
    border-radius: 50%;
    text-decoration: none;
}

.sb-provider-notifications:hover {
    color: #ffffff;
    background: var(--dashboard-green);
}

.sb-provider-notifications span {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    color: #ffffff;
    background: #dc2626;
    border: 2px solid #ffffff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.sb-provider-dashboard .sb-dashboard-user {
    color: #374151;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .sb-provider-add-service,
    .sb-provider-notifications {
        width: 100%;
        border-radius: 9px;
    }

    .sb-provider-notifications {
        flex-basis: 42px;
    }
}
/* =========================================================
   PROVIDER DASHBOARD HERO
========================================================= */

.sb-provider-dashboard .provider-hero {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background:
        radial-gradient(
            circle at top right,
            rgba(16, 185, 129, 0.12),
            transparent 34%
        ),
        #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: 20px;
    box-shadow: 0 9px 30px rgba(17, 24, 39, 0.05);
}

.sb-provider-dashboard .provider-hero::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--dashboard-green);
    content: "";
}

.sb-provider-dashboard .provider-hero-left {
    position: relative;
    z-index: 1;
    max-width: 950px;
}

.sb-provider-dashboard .provider-kicker {
    color: var(--dashboard-green);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.sb-provider-dashboard .provider-title {
    color: var(--dashboard-text);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.sb-provider-dashboard .provider-hero .badge {
    color: var(--dashboard-green-dark) !important;
    background: var(--dashboard-green-light) !important;
    border-color: rgba(6, 95, 70, 0.15) !important;
    border-radius: 999px;
    font-weight: 700;
}

.sb-provider-dashboard .provider-hero .progress {
    overflow: hidden;
    background: #e8efec;
    border-radius: 999px;
}

.sb-provider-dashboard .provider-hero .progress-bar {
    background: var(--dashboard-green) !important;
    border-radius: 999px;
}

.sb-provider-dashboard .provider-hero .alert-light {
    color: #374151;
    background: #f8faf9;
    border-color: var(--dashboard-border) !important;
    border-radius: 12px;
}

.sb-provider-dashboard .provider-hero .alert-danger {
    border-radius: 12px;
}

.sb-provider-dashboard .provider-hero > p,
.sb-provider-dashboard .provider-hero-left > p {
    line-height: 1.6;
}

.sb-provider-dashboard .provider-hero .text-success {
    color: var(--dashboard-green) !important;
}

@media (max-width: 767.98px) {
    .sb-provider-dashboard .provider-hero {
        padding: 23px 19px 23px 23px;
        border-radius: 16px;
    }

    .sb-provider-dashboard .provider-title {
        font-size: 1.65rem;
    }

    .sb-provider-dashboard .provider-hero .d-flex {
        align-items: stretch !important;
        flex-direction: column;
    }

    .sb-provider-dashboard .provider-hero .flex-grow-1 {
        width: 100%;
        max-width: none !important;
        min-width: 0 !important;
    }
}
/* Provider quick actions */

.sb-provider-quick-action {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 82px;
    padding: 15px;
    color: var(--dashboard-text);
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: 13px;
    text-align: left;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

button.sb-provider-quick-action {
    font-family: inherit;
}

.sb-provider-quick-action:hover {
    color: var(--dashboard-text);
    transform: translateY(-2px);
    border-color: rgba(6, 95, 70, 0.28);
    box-shadow: 0 10px 24px rgba(6, 78, 59, 0.08);
}

.sb-provider-quick-action > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    color: var(--dashboard-green);
    background: var(--dashboard-green-light);
    border-radius: 11px;
}

.sb-provider-quick-action > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.sb-provider-quick-action strong {
    color: var(--dashboard-text);
    font-size: 0.92rem;
    font-weight: 700;
}

.sb-provider-quick-action small {
    margin-top: 2px;
    color: var(--dashboard-muted);
    font-size: 0.76rem;
}

.sb-provider-quick-action.primary {
    color: #ffffff;
    background: var(--dashboard-green);
    border-color: var(--dashboard-green);
}

.sb-provider-quick-action.primary:hover {
    color: #ffffff;
    background: var(--dashboard-green-dark);
    border-color: var(--dashboard-green-dark);
}

.sb-provider-quick-action.primary > span {
    color: var(--dashboard-green);
    background: #ffffff;
}

.sb-provider-quick-action.primary strong,
.sb-provider-quick-action.primary small {
    color: #ffffff;
}
/* Admin dashboard welcome section */

.admin-hero {
    padding: 28px 30px;
    background: linear-gradient(
        135deg,
        #064e3b 0%,
        #08705a 100%
    );
    border-radius: 18px;
    color: #ffffff;
    box-shadow: 0 14px 35px rgba(6, 78, 59, 0.16);
}

.admin-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.admin-hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    color: rgba(255, 255, 255, 0.72);
}

.admin-hero-title {
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 750;
    line-height: 1.2;
    color: #ffffff;
}

.admin-hero-description {
    max-width: 650px;
    font-size: 0.96rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.admin-hero-date {
    flex-shrink: 0;
    min-width: 170px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    text-align: right;
}

.admin-hero-date span,
.admin-hero-date strong {
    display: block;
}

.admin-hero-date span {
    margin-bottom: 3px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.admin-hero-date strong {
    font-size: 0.95rem;
    color: #ffffff;
}

@media (max-width: 767px) {
    .admin-hero {
        padding: 22px 20px;
    }

    .admin-hero-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-hero-date {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
}
/* Admin management cards */

.admin-management-panel {
    padding: 26px;
}

.admin-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-section-eyebrow {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #067a5b;
}

.admin-section-title {
    font-size: 1.25rem;
    font-weight: 750;
    color: #17201d;
}

.admin-section-description {
    font-size: 0.9rem;
    color: #6b7280;
}

.admin-management-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-management-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 135px;
    padding: 18px;
    color: #17201d;
    background: #ffffff;
    border: 1px solid #e3e8e5;
    border-radius: 15px;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(23, 32, 29, 0.04);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-management-card:hover {
    color: #17201d;
    transform: translateY(-3px);
    border-color: rgba(6, 122, 91, 0.4);
    box-shadow: 0 12px 25px rgba(6, 78, 59, 0.1);
}

.admin-management-card-urgent {
    background: linear-gradient(
        145deg,
        rgba(236, 253, 245, 0.9),
        #ffffff
    );
    border-color: rgba(6, 122, 91, 0.22);
}

.admin-management-button {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}

.admin-management-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    background: #ecfdf5;
    border-radius: 12px;
}

.admin-management-content {
    flex: 1;
    min-width: 0;
}

.admin-management-content h3 {
    margin: 1px 0 7px;
    font-size: 0.98rem;
    font-weight: 750;
    color: #17201d;
}

.admin-management-content p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6b7280;
}

.admin-management-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-management-title-row h3 {
    margin-right: auto;
}

.admin-management-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #ffffff;
    background: #dc2626;
    border-radius: 999px;
}

.admin-management-arrow {
    align-self: center;
    margin-left: 4px;
    font-size: 1.05rem;
    color: #94a3b8;
    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.admin-management-card:hover .admin-management-arrow {
    color: #067a5b;
    transform: translateX(3px);
}

@media (max-width: 991px) {
    .admin-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .admin-management-panel {
        padding: 20px;
    }

    .admin-management-grid {
        grid-template-columns: 1fr;
    }

    .admin-management-card {
        min-height: 120px;
    }
}
/* Admin dashboard KPI cards */

.admin-overview-section {
    padding: 26px;
    background: #ffffff;
    border: 1px solid #e5e9e7;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.05);
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-kpi-card {
    display: block;
    min-height: 175px;
    padding: 20px;
    color: #17201d;
    background: #ffffff;
    border: 1px solid #e3e8e5;
    border-radius: 15px;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(23, 32, 29, 0.035);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

a.admin-kpi-card:hover {
    color: #17201d;
    transform: translateY(-3px);
    border-color: rgba(6, 122, 91, 0.38);
    box-shadow: 0 12px 26px rgba(6, 78, 59, 0.1);
}

.admin-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.admin-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    background: #ecfdf5;
    border-radius: 12px;
}

.admin-kpi-link {
    font-size: 0.76rem;
    font-weight: 700;
    color: #067a5b;
}

.admin-kpi-label {
    margin: 0 0 5px;
    font-size: 0.82rem;
    font-weight: 650;
    color: #6b7280;
}

.admin-kpi-value {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 780;
    line-height: 1.1;
    color: #17201d;
}

.admin-kpi-caption {
    display: block;
    font-size: 0.77rem;
    line-height: 1.4;
    color: #8a9490;
}

.admin-kpi-card-highlight {
    background: linear-gradient(
        145deg,
        #064e3b 0%,
        #08705a 100%
    );
    border-color: transparent;
}

.admin-kpi-card-highlight .admin-kpi-label,
.admin-kpi-card-highlight .admin-kpi-caption {
    color: rgba(255, 255, 255, 0.72);
}

.admin-kpi-card-highlight .admin-kpi-value {
    color: #ffffff;
}

.admin-kpi-icon-highlight {
    background: rgba(255, 255, 255, 0.14);
}

.admin-kpi-status {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

@media (max-width: 991px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .admin-overview-section {
        padding: 20px;
    }

    .admin-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-kpi-card {
        min-height: 155px;
    }
}
/* Admin action-required section */

.admin-action-section {
    padding: 26px;
    background: #ffffff;
    border: 1px solid #e5e9e7;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.05);
}

.admin-action-total {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    font-size: 0.76rem;
    font-weight: 750;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 999px;
}

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-action-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 160px;
    padding: 19px;
    color: #17201d;
    background: #ffffff;
    border: 1px solid #e3e8e5;
    border-radius: 15px;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-action-card:hover {
    color: #17201d;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(23, 32, 29, 0.09);
}

.admin-action-card.has-action {
    background: linear-gradient(
        145deg,
        #fffaf0 0%,
        #ffffff 100%
    );
    border-color: #f6c96b;
}

.admin-action-card.has-action:hover {
    border-color: #d89b25;
}

.admin-action-card.is-clear {
    background: #fbfdfc;
    border-color: #dce7e2;
}

.admin-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    background: #f4f7f5;
    border-radius: 12px;
}

.admin-action-card.has-action .admin-action-icon {
    background: #fef3c7;
}

.admin-action-content {
    flex: 1;
    min-width: 0;
}

.admin-action-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.admin-action-title-row h3 {
    flex: 1;
    margin: 0;
    font-size: 0.98rem;
    font-weight: 750;
    color: #17201d;
}

.admin-action-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 750;
    color: #52605b;
    background: #edf2ef;
    border-radius: 999px;
}

.admin-action-card.has-action .admin-action-count {
    color: #ffffff;
    background: #dc2626;
}

.admin-action-content p {
    margin: 0 0 13px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6b7280;
}

.admin-action-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: #067a5b;
}

@media (max-width: 991px) {
    .admin-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .admin-action-section {
        padding: 20px;
    }

    .admin-action-section .admin-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-action-card {
        min-height: 145px;
    }
}
/* Admin earnings analytics */

.admin-analytics-section {
    padding: 26px;
    background: #ffffff;
    border: 1px solid #e5e9e7;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.05);
}

.admin-analytics-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.admin-analytics-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-analytics-filters .form-select {
    min-width: 115px;
    border-color: #dce4e0;
    border-radius: 10px;
    font-size: 0.8rem;
    box-shadow: none;
}

.admin-analytics-filters .form-select:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.1);
}

.admin-analytics-apply {
    min-height: 31px;
    padding: 5px 13px;
    color: #ffffff;
    background: #067a5b;
    border: 1px solid #067a5b;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-analytics-apply:hover {
    background: #055f47;
    border-color: #055f47;
    transform: translateY(-1px);
}

.admin-analytics-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 330px;
    padding: 12px 8px 0;
}

.admin-analytics-chart-wrap canvas {
    width: 100% !important;
    height: 320px !important;
}

@media (max-width: 767px) {
    .admin-analytics-header {
        flex-direction: column;
    }

    .admin-analytics-filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-analytics-filters .form-select {
        flex: 1;
        min-width: 120px;
    }

    .admin-analytics-apply {
        flex: 1 0 100%;
    }

    .admin-analytics-chart-wrap {
        min-height: 270px;
        overflow-x: auto;
    }

    .admin-analytics-chart-wrap canvas {
        min-width: 620px;
        height: 260px !important;
    }
}
/* Admin top providers section */

.admin-provider-section {
    padding: 26px;
    background: #ffffff;
    border: 1px solid #e5e9e7;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.05);
}

.admin-provider-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.admin-provider-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.admin-provider-primary-button,
.admin-provider-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    padding: 7px 13px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.admin-provider-primary-button {
    color: #ffffff;
    background: #067a5b;
    border: 1px solid #067a5b;
}

.admin-provider-primary-button:hover {
    color: #ffffff;
    background: #055f47;
    border-color: #055f47;
    transform: translateY(-1px);
}

.admin-provider-secondary-button {
    color: #067a5b;
    background: #ffffff;
    border: 1px solid #cfe0d9;
}

.admin-provider-secondary-button:hover {
    color: #055f47;
    background: #f4fbf8;
    border-color: #9fc9bb;
    transform: translateY(-1px);
}

.admin-provider-table-wrap {
    overflow-x: auto;
    border: 1px solid #e6ebe8;
    border-radius: 14px;
}

.admin-provider-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.admin-provider-table th {
    padding: 13px 16px;
    font-size: 0.73rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    color: #64706b;
    background: #f7faf8;
    border-bottom: 1px solid #e6ebe8;
    text-align: left;
}

.admin-provider-table td {
    padding: 15px 16px;
    font-size: 0.84rem;
    color: #27312d;
    border-bottom: 1px solid #edf1ef;
    vertical-align: middle;
}

.admin-provider-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-provider-table tbody tr {
    transition: background 0.2s ease;
}

.admin-provider-table tbody tr:hover {
    background: #fbfdfc;
}

.admin-provider-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    font-size: 0.75rem;
    font-weight: 750;
    color: #52605b;
    background: #edf2ef;
    border-radius: 999px;
}

.admin-provider-table tbody tr:first-child .admin-provider-rank {
    color: #92400e;
    background: #fef3c7;
}

.admin-provider-identity {
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-provider-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    font-size: 0.83rem;
    font-weight: 750;
    color: #ffffff;
    background: #067a5b;
    border-radius: 11px;
}

.admin-provider-identity div {
    min-width: 0;
}

.admin-provider-identity strong,
.admin-provider-identity span {
    display: block;
}

.admin-provider-identity strong {
    margin-bottom: 2px;
    font-size: 0.85rem;
    color: #17201d;
}

.admin-provider-identity span {
    max-width: 260px;
    overflow: hidden;
    font-size: 0.74rem;
    color: #7d8783;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-provider-jobs {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #52605b;
    background: #edf2ef;
    border-radius: 999px;
}

.admin-provider-earnings {
    color: #067a5b;
    white-space: nowrap;
}

.admin-provider-empty {
    padding: 34px 20px;
    text-align: center;
}

.admin-provider-empty span,
.admin-provider-empty strong {
    display: block;
}

.admin-provider-empty span {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.admin-provider-empty strong {
    margin-bottom: 4px;
    color: #27312d;
}

.admin-provider-empty p {
    margin: 0;
    font-size: 0.8rem;
    color: #7d8783;
}

@media (max-width: 767px) {
    .admin-provider-header {
        flex-direction: column;
    }

    .admin-provider-actions {
        width: 100%;
    }

    .admin-provider-primary-button,
    .admin-provider-secondary-button {
        flex: 1;
    }
}

@media (max-width: 575px) {
    .admin-provider-section {
        padding: 20px;
    }

    .admin-provider-actions {
        align-items: stretch;
        flex-direction: column;
    }
}
/* Admin dashboard top navigation */

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 76px;
    padding: 10px 0;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e4e9e6;
    box-shadow: 0 4px 18px rgba(23, 32, 29, 0.05);
    backdrop-filter: blur(12px);
}

.admin-topbar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.admin-topbar-brand img {
    display: block;
    width: auto;
    max-width: 200px;
    height: 45px;
    object-fit: contain;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-topbar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 14px;
    border-right: 1px solid #e2e8e5;
}

.admin-topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 0.82rem;
    font-weight: 750;
    color: #ffffff;
    background: #067a5b;
    border-radius: 11px;
}

.admin-topbar-profile-copy span,
.admin-topbar-profile-copy strong {
    display: block;
}

.admin-topbar-profile-copy span {
    margin-bottom: 1px;
    font-size: 0.68rem;
    color: #7b8581;
}

.admin-topbar-profile-copy strong {
    max-width: 180px;
    overflow: hidden;
    font-size: 0.82rem;
    color: #17201d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-topbar-notification {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 11px;
    color: #314039;
    background: #f7faf8;
    border: 1px solid #dfe7e3;
    border-radius: 10px;
    font-size: 0.77rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-topbar-notification:hover {
    color: #067a5b;
    background: #f0faf6;
    border-color: #b9d8cc;
    transform: translateY(-1px);
}

.admin-topbar-notification-icon {
    line-height: 1;
}

.admin-topbar-notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    font-size: 0.67rem;
    color: #ffffff;
    background: #dc2626;
    border-radius: 999px;
}

.admin-topbar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 13px;
    color: #ffffff;
    background: #064e3b;
    border: 1px solid #064e3b;
    border-radius: 10px;
    font-size: 0.77rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-topbar-logout:hover {
    color: #ffffff;
    background: #043d2e;
    border-color: #043d2e;
    transform: translateY(-1px);
}

.admin-topbar-toggler {
    border-color: #d9e1dd;
    box-shadow: none !important;
}

@media (max-width: 991px) {
    .admin-topbar-actions {
        align-items: stretch;
        flex-direction: column;
        padding: 16px 0 4px;
    }

    .admin-topbar-profile {
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid #e2e8e5;
    }

    .admin-topbar-notification,
    .admin-topbar-logout {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .admin-topbar-brand img {
        max-width: 165px;
        height: auto;
    }
}
/* Admin notifications */

.admin-notifications-header {
    align-items: center;
    padding: 18px 20px;
    border-bottom-color: #e5ebe8;
}

.admin-notifications-subtitle {
    font-size: 0.75rem;
    color: #7b8581;
}

.admin-notifications-header-actions {
    display: flex;
    align-items: center;
    gap: 13px;
}

.admin-notifications-read-all {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 5px 10px;
    color: #067a5b;
    background: #f0faf6;
    border: 1px solid #c6e0d6;
    border-radius: 9px;
    font-size: 0.73rem;
    font-weight: 700;
    text-decoration: none;
}

.admin-notifications-read-all:hover {
    color: #055f47;
    background: #e4f5ee;
    border-color: #9fcbbb;
}

.admin-notifications-body {
    padding: 0;
}

.admin-notifications-list {
    display: flex;
    flex-direction: column;
}

.admin-notification-item {
    display: flex;
    gap: 11px;
    padding: 17px 20px;
    border-bottom: 1px solid #edf1ef;
}

.admin-notification-item:last-child {
    border-bottom: 0;
}

.admin-notification-item.is-unread {
    background: #f2fbf7;
}

.admin-notification-item.is-read {
    background: #ffffff;
}

.admin-notification-indicator {
    flex: 0 0 9px;
    padding-top: 6px;
}

.admin-notification-indicator span {
    display: block;
    width: 8px;
    height: 8px;
    background: #067a5b;
    border-radius: 999px;
}

.admin-notification-copy {
    flex: 1;
    min-width: 0;
}

.admin-notification-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 5px;
}

.admin-notification-title-row h6 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 750;
    color: #17201d;
}

.admin-notification-title-row time {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: #8a9490;
}

.admin-notification-copy p {
    margin: 0;
    font-size: 0.79rem;
    line-height: 1.5;
    color: #66716c;
}

.admin-notifications-empty {
    padding: 45px 20px;
    text-align: center;
}

.admin-notifications-empty span,
.admin-notifications-empty strong {
    display: block;
}

.admin-notifications-empty span {
    margin-bottom: 10px;
    font-size: 1.6rem;
}

.admin-notifications-empty strong {
    margin-bottom: 5px;
    color: #26312c;
}

.admin-notifications-empty p {
    margin: 0;
    font-size: 0.8rem;
    color: #7b8581;
}

@media (max-width: 575px) {
    .admin-notifications-header {
        align-items: flex-start;
    }

    .admin-notifications-header-actions {
        align-items: flex-end;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .admin-notification-title-row {
        flex-direction: column;
        gap: 3px;
    }
}

/* Admin recent orders */

.admin-recent-orders-section {
    padding: 26px;
    background: #ffffff;
    border: 1px solid #e5e9e7;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.05);
}

.admin-recent-orders-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.admin-recent-orders-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    padding: 7px 13px;
    color: #067a5b;
    background: #ffffff;
    border: 1px solid #cfe0d9;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-recent-orders-view-all:hover {
    color: #055f47;
    background: #f4fbf8;
    border-color: #9fc9bb;
    transform: translateY(-1px);
}

.admin-recent-orders-table-wrap {
    overflow-x: auto;
    border: 1px solid #e6ebe8;
    border-radius: 14px;
}

.admin-recent-orders-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

.admin-recent-orders-table th {
    padding: 13px 15px;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    color: #64706b;
    background: #f7faf8;
    border-bottom: 1px solid #e6ebe8;
    text-align: left;
    white-space: nowrap;
}

.admin-recent-orders-table td {
    padding: 14px 15px;
    font-size: 0.8rem;
    color: #4f5b56;
    border-bottom: 1px solid #edf1ef;
    vertical-align: middle;
}

.admin-recent-orders-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-recent-orders-table tbody tr {
    transition: background 0.2s ease;
}

.admin-recent-orders-table tbody tr:hover {
    background: #fbfdfc;
}

.admin-recent-order-id {
    font-weight: 750;
    color: #067a5b;
    text-decoration: none;
}

.admin-recent-order-id:hover {
    color: #055f47;
    text-decoration: underline;
}

.admin-recent-order-service {
    display: block;
    max-width: 190px;
    overflow: hidden;
    color: #17201d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-recent-order-amount {
    color: #17201d;
    white-space: nowrap;
}

.admin-recent-order-date {
    color: #7b8581;
    white-space: nowrap;
}

.admin-order-status,
.admin-payment-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Default statuses */

.admin-order-status {
    color: #52605b;
    background: #edf2ef;
}

.admin-payment-status {
    color: #52605b;
    background: #edf2ef;
}

/* Pending and review */

.admin-order-status-pending,
.admin-order-status-pending_provider_approval,
.admin-order-status-awaiting_payment {
    color: #92400e;
    background: #fef3c7;
}

.admin-order-status-payment_submitted,
.admin-order-status-inspection_payment_submitted,
.admin-order-status-final_payment_submitted,
.admin-payment-status-awaiting_review {
    color: #1e40af;
    background: #dbeafe;
}

/* Active */

.admin-order-status-payment_approved,
.admin-order-status-in_progress,
.admin-payment-status-approved {
    color: #065f46;
    background: #d1fae5;
}

/* Completed */

.admin-order-status-completed,
.admin-order-status-done {
    color: #166534;
    background: #dcfce7;
}

/* Rejected or cancelled */

.admin-order-status-rejected,
.admin-order-status-cancelled,
.admin-payment-status-rejected {
    color: #991b1b;
    background: #fee2e2;
}

.admin-recent-orders-empty {
    padding: 38px 20px;
    text-align: center;
}

.admin-recent-orders-empty span,
.admin-recent-orders-empty strong {
    display: block;
}

.admin-recent-orders-empty span {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.admin-recent-orders-empty strong {
    margin-bottom: 4px;
    color: #27312d;
}

.admin-recent-orders-empty p {
    margin: 0;
    font-size: 0.8rem;
    color: #7d8783;
}

@media (max-width: 767px) {
    .admin-recent-orders-header {
        flex-direction: column;
    }

    .admin-recent-orders-view-all {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .admin-recent-orders-section {
        padding: 20px;
    }
}
/* Admin analytics summary figures */

.admin-analytics-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.admin-analytics-stat {
    padding: 16px;
    background: #f8faf9;
    border: 1px solid #e5ebe8;
    border-radius: 13px;
}

.admin-analytics-stat-label,
.admin-analytics-stat-value,
.admin-analytics-stat small {
    display: block;
}

.admin-analytics-stat-label {
    margin-bottom: 7px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #6b7571;
}

.admin-analytics-stat-value {
    margin-bottom: 5px;
    font-size: 1.18rem;
    font-weight: 780;
    line-height: 1.2;
    color: #17201d;
}

.admin-analytics-stat-value.is-positive {
    color: #067a5b;
}

.admin-analytics-stat-value.is-negative {
    color: #b91c1c;
}

.admin-analytics-stat small {
    font-size: 0.7rem;
    line-height: 1.4;
    color: #8a9490;
}

@media (max-width: 991px) {
    .admin-analytics-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .admin-analytics-summary {
        grid-template-columns: 1fr;
    }
}
/* Admin accounting warning */

.admin-accounting-warning {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
}

.admin-accounting-warning > span {
    flex: 0 0 auto;
    font-size: 1.15rem;
}

.admin-accounting-warning div {
    flex: 1;
    min-width: 0;
}

.admin-accounting-warning strong,
.admin-accounting-warning p {
    display: block;
}

.admin-accounting-warning strong {
    margin-bottom: 2px;
    font-size: 0.82rem;
    color: #92400e;
}

.admin-accounting-warning p {
    margin: 0;
    font-size: 0.74rem;
    color: #a16207;
}

.admin-accounting-warning a {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #92400e;
    text-decoration: none;
}

.admin-accounting-warning a:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .admin-accounting-warning {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .admin-accounting-warning a {
        width: 100%;
        padding-left: 31px;
    }
}
/* Orders admin top navigation */

.admin-orders-topbar-links {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
}

.admin-orders-topbar-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 9px;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.admin-orders-topbar-links a:hover {
    color: #065f46;
    background: #ecfdf5;
}

.admin-orders-topbar-links a.is-active {
    color: #065f46;
    background: #d1fae5;
}

#adminOrdersNav {
    align-items: center;
    gap: 14px;
}

@media (max-width: 1199px) {
    .admin-orders-topbar-links {
        gap: 2px;
        margin-right: 8px;
    }

    .admin-orders-topbar-links a {
        padding: 8px 7px;
        font-size: 0.76rem;
    }
}

@media (max-width: 991px) {
    #adminOrdersNav {
        align-items: stretch;
        padding-top: 18px;
        padding-bottom: 8px;
    }

    .admin-orders-topbar-links {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        width: 100%;
        margin: 0 0 14px;
    }

    .admin-orders-topbar-links a {
        justify-content: flex-start;
        width: 100%;
        padding: 11px 13px;
    }

    #adminOrdersNav .admin-topbar-profile {
        margin-bottom: 12px;
    }

    #adminOrdersNav .admin-topbar-logout {
        justify-content: center;
        width: 100%;
    }
}
/* =========================================================
   ORDERS ADMIN — OPERATIONS CENTRE
========================================================= */

.admin-dashboard-body {
    background: #f4f7f5;
    color: #17201d;
}

.admin-orders-main {
    max-width: 1440px;
    padding-top: 32px;
    padding-bottom: 70px;
    font-family: "DM Sans", sans-serif;
}


/* Orders hero */

.admin-orders-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 30px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at top right,
            rgba(110, 231, 183, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #043d2e 0%,
            #065f46 55%,
            #08705a 100%
        );
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(6, 78, 59, 0.16);
}

.admin-orders-hero::after {
    position: absolute;
    top: -95px;
    right: -75px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.admin-orders-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.admin-orders-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.admin-orders-hero h1 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.admin-orders-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.93rem;
    line-height: 1.65;
}

.admin-orders-hero-summary {
    flex: 0 0 205px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    backdrop-filter: blur(8px);
}

.admin-orders-hero-summary span,
.admin-orders-hero-summary strong,
.admin-orders-hero-summary small {
    display: block;
}

.admin-orders-hero-summary span {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-orders-hero-summary strong {
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.admin-orders-hero-summary small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.68rem;
    line-height: 1.4;
}


/* Summary section */

.admin-orders-overview {
    margin-bottom: 22px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-orders-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-orders-section-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #067a5b;
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.admin-orders-section-heading h2,
.admin-orders-list-header h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.admin-orders-section-heading p,
.admin-orders-list-header p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-orders-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 6px 11px;
    color: #067a5b;
    background: #ecfdf5;
    border: 1px solid #c6e8da;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-orders-live-indicator > span {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}


/* KPI cards */

.admin-orders-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.admin-orders-kpi-card {
    min-width: 0;
    min-height: 145px;
    padding: 17px;
    background: #fbfdfc;
    border: 1px solid #e2e9e5;
    border-radius: 14px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-orders-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 122, 91, 0.34);
    box-shadow: 0 11px 24px rgba(6, 78, 59, 0.08);
}

.admin-orders-kpi-top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
}

.admin-orders-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: #067a5b;
    background: #e6f7ef;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
}

.admin-orders-kpi-label {
    min-width: 0;
    color: #58645f;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
}

.admin-orders-kpi-value {
    display: block;
    margin-bottom: 7px;
    color: #17201d;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
}

.admin-orders-kpi-card small {
    display: block;
    color: #87918d;
    font-size: 0.67rem;
    line-height: 1.45;
}

.admin-orders-kpi-card.is-warning {
    background: #fffcf5;
    border-color: #f5dfaa;
}

.admin-orders-kpi-card.is-warning .admin-orders-kpi-icon {
    color: #92400e;
    background: #fef3c7;
}

.admin-orders-kpi-card.is-review {
    background: #f7faff;
    border-color: #d8e4f7;
}

.admin-orders-kpi-card.is-review .admin-orders-kpi-icon {
    color: #1e40af;
    background: #dbeafe;
}

.admin-orders-kpi-card.is-success {
    background: #f5fdf8;
    border-color: #cfe9d8;
}

.admin-orders-kpi-card.is-success .admin-orders-kpi-icon {
    color: #166534;
    background: #dcfce7;
}


/* Orders directory */

.admin-orders-list-section {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-orders-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
}

.admin-orders-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-orders-search-input {
    position: relative;
    width: min(360px, 40vw);
}

.admin-orders-search-input > span {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    color: #8b9591;
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.admin-orders-search-input .form-control {
    min-height: 42px;
    padding-left: 39px;
    border-color: #d8e0dc;
    border-radius: 10px;
    font-size: 0.8rem;
}

.admin-orders-search-input .form-control:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.1);
}

.admin-orders-search-button,
.admin-orders-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.admin-orders-search-button {
    color: #ffffff;
    background: #067a5b;
    border: 1px solid #067a5b;
}

.admin-orders-search-button:hover {
    color: #ffffff;
    background: #055f47;
    border-color: #055f47;
}

.admin-orders-reset-button {
    color: #58645f;
    background: #ffffff;
    border: 1px solid #d5ded9;
}

.admin-orders-reset-button:hover {
    color: #067a5b;
    background: #f4fbf8;
    border-color: #9fc9bb;
}

.admin-orders-action-status {
    min-height: 18px;
    margin-bottom: 10px;
    color: #66716c;
    font-size: 0.76rem;
}


/* Responsive */

@media (max-width: 1199.98px) {
    .admin-orders-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .admin-orders-main {
        padding-top: 24px;
    }

    .admin-orders-hero-content,
    .admin-orders-list-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-orders-hero-summary {
        flex-basis: auto;
        width: 100%;
    }

    .admin-orders-search-form {
        width: 100%;
    }

    .admin-orders-search-input {
        flex: 1;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .admin-orders-hero,
    .admin-orders-overview,
    .admin-orders-list-section {
        padding: 20px;
        border-radius: 15px;
    }

    .admin-orders-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-orders-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .admin-orders-main {
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-orders-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-orders-kpi-card {
        min-height: 125px;
    }

    .admin-orders-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-orders-search-input,
    .admin-orders-search-button,
    .admin-orders-reset-button {
        width: 100%;
    }
}
/* =========================================================
   ORDERS ADMIN — ORDER TABLE
========================================================= */

.admin-orders-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e3e9e6;
    border-radius: 14px;
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
}

.admin-orders-table {
    width: 100%;
    min-width: 1580px;
    margin: 0;
    border-collapse: collapse;
}

.admin-orders-table thead th {
    padding: 13px 14px;
    color: #66716c;
    background: #f7faf8;
    border-bottom: 1px solid #dfe7e3;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-orders-table tbody td {
    padding: 15px 14px;
    color: #4b5752;
    background: #ffffff;
    border-bottom: 1px solid #edf1ef;
    font-size: 0.78rem;
    line-height: 1.45;
    vertical-align: middle;
}

.admin-orders-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-orders-table tbody tr {
    transition: background-color 0.18s ease;
}

.admin-orders-table tbody tr:hover td {
    background: #fbfdfc;
}

/* Number and ID */

.admin-orders-table tbody td:nth-child(1) {
    color: #8a9490;
}

.admin-orders-table tbody td:nth-child(2) {
    color: #067a5b;
    font-weight: 750;
}

/* Service */

.admin-orders-table tbody td:nth-child(3) {
    max-width: 190px;
    overflow: hidden;
    color: #17201d;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Customer and provider */

.admin-orders-table tbody td:nth-child(4),
.admin-orders-table tbody td:nth-child(5) {
    max-width: 170px;
    overflow: hidden;
    color: #34403b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Financial columns */

.admin-orders-table tbody td:nth-child(8),
.admin-orders-table tbody td:nth-child(9),
.admin-orders-table tbody td:nth-child(10),
.admin-orders-table tbody td:nth-child(11) {
    color: #27312d;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-orders-table tbody td:nth-child(8) {
    font-weight: 750;
}

.admin-orders-table tbody td:nth-child(10) {
    color: #067a5b;
}

.admin-orders-table tbody td:nth-child(11) {
    font-weight: 700;
}

/* Date */

.admin-orders-table tbody td:nth-child(12) {
    color: #78827e;
    font-size: 0.73rem;
    white-space: nowrap;
}

/* Status badges */

.admin-orders-table .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}

.admin-orders-table .text-bg-warning {
    color: #92400e !important;
    background: #fef3c7 !important;
}

.admin-orders-table .text-bg-info {
    color: #065f46 !important;
    background: #d1fae5 !important;
}

.admin-orders-table .text-bg-secondary {
    color: #1e40af !important;
    background: #dbeafe !important;
}

.admin-orders-table .text-bg-primary {
    color: #075985 !important;
    background: #e0f2fe !important;
}

.admin-orders-table .text-bg-success {
    color: #166534 !important;
    background: #dcfce7 !important;
}

.admin-orders-table .text-bg-danger {
    color: #991b1b !important;
    background: #fee2e2 !important;
}

.admin-orders-table .text-bg-light {
    color: #52605b !important;
    background: #edf2ef !important;
}

/* Table buttons */

.admin-orders-table .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.admin-orders-table .btn-primary,
.admin-orders-table .btn-success {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}

.admin-orders-table .btn-primary:hover,
.admin-orders-table .btn-success:hover {
    color: #ffffff;
    background: #055f47;
    border-color: #055f47;
}

.admin-orders-table .btn-outline-primary {
    color: #067a5b;
    background: #ffffff;
    border-color: #9fc9bb;
}

.admin-orders-table .btn-outline-primary:hover {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}

.admin-orders-table .btn-outline-danger {
    color: #b42318;
    background: #ffffff;
    border-color: #efb3ad;
}

.admin-orders-table .btn-outline-danger:hover {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

/* Empty state */

.admin-orders-empty-state {
    padding: 55px 20px;
    text-align: center;
}

.admin-orders-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    color: #067a5b;
    background: #ecfdf5;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
}

.admin-orders-empty-state strong,
.admin-orders-empty-state p {
    display: block;
}

.admin-orders-empty-state strong {
    margin-bottom: 5px;
    color: #27312d;
    font-size: 0.94rem;
}

.admin-orders-empty-state p {
    margin: 0 auto 13px;
    color: #7b8581;
    font-size: 0.78rem;
}

.admin-orders-empty-state a {
    color: #067a5b;
    font-size: 0.77rem;
    font-weight: 700;
    text-decoration: none;
}

.admin-orders-empty-state a:hover {
    text-decoration: underline;
}

/* Pagination */

.admin-orders-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
}

.admin-orders-pagination-copy {
    color: #77817d;
    font-size: 0.75rem;
}

.admin-orders-pagination-copy strong {
    color: #34403b;
}

.admin-orders-pagination-wrap .page-link {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #52605b;
    background: #ffffff;
    border-color: #dce4e0;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: none;
}

.admin-orders-pagination-wrap .page-link:hover {
    color: #067a5b;
    background: #f0faf6;
    border-color: #9fc9bb;
}

.admin-orders-pagination-wrap .page-item.active .page-link {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}

/* Scrollbar */

.admin-orders-table-wrap::-webkit-scrollbar {
    height: 10px;
}

.admin-orders-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f3;
}

.admin-orders-table-wrap::-webkit-scrollbar-thumb {
    background: #bdcbc5;
    border: 2px solid #f1f5f3;
    border-radius: 999px;
}

.admin-orders-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #91a69d;
}

@media (max-width: 767.98px) {
    .admin-orders-pagination-wrap {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-orders-pagination-wrap nav {
        overflow-x: auto;
    }
}
/* =========================================================
   WITHDRAWALS ADMIN — OPERATIONS CENTRE
========================================================= */

.admin-withdrawals-main {
    max-width: 1440px;
    padding-top: 32px;
    padding-bottom: 70px;
    font-family: "DM Sans", sans-serif;
}


/* Withdrawal hero */

.admin-withdrawals-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 30px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at top right,
            rgba(110, 231, 183, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #043d2e 0%,
            #065f46 55%,
            #08705a 100%
        );
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(6, 78, 59, 0.16);
}

.admin-withdrawals-hero::after {
    position: absolute;
    top: -95px;
    right: -75px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.admin-withdrawals-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.admin-withdrawals-eyebrow,
.admin-withdrawals-section-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.13em;
}

.admin-withdrawals-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.admin-withdrawals-section-eyebrow {
    color: #067a5b;
}

.admin-withdrawals-hero h1 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.admin-withdrawals-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.93rem;
    line-height: 1.65;
}

.admin-withdrawals-hero-summary {
    flex: 0 0 230px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    backdrop-filter: blur(8px);
}

.admin-withdrawals-hero-summary span,
.admin-withdrawals-hero-summary strong,
.admin-withdrawals-hero-summary small {
    display: block;
}

.admin-withdrawals-hero-summary span {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-withdrawals-hero-summary strong {
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
}

.admin-withdrawals-hero-summary small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.68rem;
    line-height: 1.4;
}


/* Overview and directory panels */

.admin-withdrawals-overview,
.admin-withdrawals-list-section {
    margin-bottom: 22px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-withdrawals-section-heading,
.admin-withdrawals-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-withdrawals-section-heading h2,
.admin-withdrawals-list-header h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.admin-withdrawals-section-heading p,
.admin-withdrawals-list-header p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-withdrawals-pending-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 6px 11px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-withdrawals-pending-indicator > span {
    width: 7px;
    height: 7px;
    background: #f59e0b;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}


/* KPI cards */

.admin-withdrawals-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.admin-withdrawals-kpi-card {
    min-width: 0;
    min-height: 135px;
    padding: 17px;
    background: #fbfdfc;
    border: 1px solid #e2e9e5;
    border-radius: 14px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-withdrawals-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 122, 91, 0.34);
    box-shadow: 0 11px 24px rgba(6, 78, 59, 0.08);
}

.admin-withdrawals-kpi-card.is-warning {
    background: #fffcf5;
    border-color: #f5dfaa;
}

.admin-withdrawals-kpi-card.is-success {
    background: #f5fdf8;
    border-color: #cfe9d8;
}

.admin-withdrawals-kpi-card.is-danger {
    background: #fff8f8;
    border-color: #f0cece;
}

.admin-withdrawals-kpi-label,
.admin-withdrawals-kpi-value,
.admin-withdrawals-kpi-card small {
    display: block;
}

.admin-withdrawals-kpi-label {
    margin-bottom: 15px;
    color: #58645f;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.admin-withdrawals-kpi-value {
    margin-bottom: 7px;
    color: #17201d;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.05;
}

.admin-withdrawals-kpi-value.is-amount {
    font-size: 1.15rem;
    line-height: 1.25;
}

.admin-withdrawals-kpi-card small {
    color: #87918d;
    font-size: 0.67rem;
    line-height: 1.45;
}


/* Flash alert */

.admin-withdrawals-list-section .alert {
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 0.82rem;
}


/* Withdrawal table */

.admin-withdrawals-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

.admin-withdrawals-table {
    width: 100%;
    min-width: 1700px;
    margin: 0;
    border-collapse: collapse;
}

.admin-withdrawals-table thead th {
    padding: 13px 14px;
    color: #66716c;
    background: #f7faf8;
    border-bottom: 1px solid #dfe7e3;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-withdrawals-table tbody td {
    padding: 15px 14px;
    color: #4b5752;
    background: #ffffff;
    border-bottom: 1px solid #edf1ef;
    font-size: 0.78rem;
    line-height: 1.45;
    vertical-align: middle;
}

.admin-withdrawals-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-withdrawals-table tbody tr {
    transition: background-color 0.18s ease;
}

.admin-withdrawals-table tbody tr:hover td {
    background: #fbfdfc;
}


/* Table column emphasis */

.admin-withdrawals-table tbody td:nth-child(1) {
    color: #067a5b;
    font-weight: 750;
}

.admin-withdrawals-table tbody td:nth-child(2) {
    color: #17201d;
    font-weight: 700;
    white-space: nowrap;
}

.admin-withdrawals-table tbody td:nth-child(3) {
    max-width: 230px;
    overflow: hidden;
    color: #66716c;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-withdrawals-table tbody td:nth-child(4) {
    color: #17201d;
    font-weight: 750;
    white-space: nowrap;
}

.admin-withdrawals-table tbody td:nth-child(5),
.admin-withdrawals-table tbody td:nth-child(6) {
    white-space: nowrap;
}

.admin-withdrawals-table tbody td:nth-child(7) {
    color: #27312d;
    font-family: monospace;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.admin-withdrawals-table tbody td:nth-child(8),
.admin-withdrawals-table tbody td:nth-child(10) {
    max-width: 210px;
    overflow-wrap: anywhere;
}

.admin-withdrawals-table tbody td:nth-child(11),
.admin-withdrawals-table tbody td:nth-child(12) {
    color: #78827e;
    font-size: 0.73rem;
    white-space: nowrap;
}


/* Status badges */

.admin-withdrawals-table .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}

.admin-withdrawals-table .text-bg-warning {
    color: #92400e !important;
    background: #fef3c7 !important;
}

.admin-withdrawals-table .text-bg-success {
    color: #166534 !important;
    background: #dcfce7 !important;
}

.admin-withdrawals-table .text-bg-danger {
    color: #991b1b !important;
    background: #fee2e2 !important;
}


/* Withdrawal actions */

.admin-withdrawals-table .withdrawal-action-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 350px;
}

.admin-withdrawals-table .withdrawal-action-form .form-control {
    min-width: 235px;
    min-height: 35px;
    border-color: #d8e0dc;
    border-radius: 8px;
    font-size: 0.72rem;
}

.admin-withdrawals-table .withdrawal-action-form .form-control:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.1);
}

.admin-withdrawals-table .withdrawal-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 35px;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
    box-shadow: none;
}

.admin-withdrawals-table .btn-success {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}

.admin-withdrawals-table .btn-success:hover {
    color: #ffffff;
    background: #055f47;
    border-color: #055f47;
}

.admin-withdrawals-table .btn-danger {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

.admin-withdrawals-table .btn-danger:hover {
    color: #ffffff;
    background: #8f1c14;
    border-color: #8f1c14;
}


/* Empty state */

.admin-withdrawals-empty-state {
    padding: 55px 20px;
    text-align: center;
}

.admin-withdrawals-empty-state span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    color: #067a5b;
    background: #ecfdf5;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
}

.admin-withdrawals-empty-state strong,
.admin-withdrawals-empty-state p {
    display: block;
}

.admin-withdrawals-empty-state strong {
    margin-bottom: 5px;
    color: #27312d;
    font-size: 0.94rem;
}

.admin-withdrawals-empty-state p {
    margin: 0;
    color: #7b8581;
    font-size: 0.78rem;
}


/* Horizontal scrollbar */

.admin-withdrawals-table-wrap::-webkit-scrollbar {
    height: 10px;
}

.admin-withdrawals-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f3;
}

.admin-withdrawals-table-wrap::-webkit-scrollbar-thumb {
    background: #bdcbc5;
    border: 2px solid #f1f5f3;
    border-radius: 999px;
}

.admin-withdrawals-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #91a69d;
}


/* Responsive */

@media (max-width: 1199.98px) {
    .admin-withdrawals-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .admin-withdrawals-main {
        padding-top: 24px;
    }

    .admin-withdrawals-hero-content {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-withdrawals-hero-summary {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .admin-withdrawals-hero,
    .admin-withdrawals-overview,
    .admin-withdrawals-list-section {
        padding: 20px;
        border-radius: 15px;
    }

    .admin-withdrawals-section-heading,
    .admin-withdrawals-list-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-withdrawals-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .admin-withdrawals-main {
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-withdrawals-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-withdrawals-kpi-card {
        min-height: 120px;
    }
}
/* =========================================================
   WITHDRAWAL TABLE — MATCH RECENT ORDERS
========================================================= */

.admin-withdrawals-list-section
.admin-recent-orders-table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e6ebe8;
    border-radius: 14px;
}

.admin-withdrawals-list-section
.admin-recent-orders-table {
    width: 100%;
    min-width: 1500px;
    margin: 0;
    border-collapse: collapse;
}

.admin-withdrawals-list-section
.admin-recent-orders-table th {
    padding: 14px 16px;
    color: #64706b;
    background: #f7faf8;
    border-bottom: 1px solid #e6ebe8;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
}

.admin-withdrawals-list-section
.admin-recent-orders-table td {
    padding: 15px 16px;
    color: #4f5b56;
    background: #ffffff;
    border-bottom: 1px solid #edf1ef;
    font-size: 0.8rem;
    line-height: 1.45;
    vertical-align: middle;
}

.admin-withdrawals-list-section
.admin-recent-orders-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-withdrawals-list-section
.admin-recent-orders-table tbody tr:hover td {
    background: #fbfdfc;
}

.admin-withdrawal-request-id {
    color: #067a5b;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-withdrawal-provider {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 145px;
}

.admin-withdrawal-provider-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: #067a5b;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 750;
}

.admin-withdrawal-provider strong {
    color: #17201d;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-withdrawal-amount {
    color: #17201d;
    font-size: 0.82rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-withdrawal-processed {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    color: #52605b;
    background: #edf2ef;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 700;
    white-space: nowrap;
}
/* =========================================================
   PROVIDERS ADMIN — OPERATIONS CENTRE
========================================================= */

.admin-providers-main {
    max-width: 1440px;
    padding-top: 32px;
    padding-bottom: 70px;
    font-family: "DM Sans", sans-serif;
}


/* Provider hero */

.admin-providers-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 30px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at top right,
            rgba(110, 231, 183, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #043d2e 0%,
            #065f46 55%,
            #08705a 100%
        );
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(6, 78, 59, 0.16);
}

.admin-providers-hero::after {
    position: absolute;
    top: -95px;
    right: -75px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.admin-providers-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.admin-providers-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.admin-providers-hero h1 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.admin-providers-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.93rem;
    line-height: 1.65;
}

.admin-providers-hero-summary {
    flex: 0 0 220px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    backdrop-filter: blur(8px);
}

.admin-providers-hero-summary span,
.admin-providers-hero-summary strong,
.admin-providers-hero-summary small {
    display: block;
}

.admin-providers-hero-summary span {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-providers-hero-summary strong {
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.admin-providers-hero-summary small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.68rem;
    line-height: 1.4;
}


/* Provider overview */

.admin-providers-overview {
    margin-bottom: 22px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-providers-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-providers-section-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #067a5b;
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.admin-providers-section-heading h2,
.admin-providers-list-header h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.admin-providers-section-heading p,
.admin-providers-list-header p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-providers-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 6px 11px;
    color: #067a5b;
    background: #ecfdf5;
    border: 1px solid #c6e8da;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-providers-live-indicator > span {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}


/* Provider KPI cards */

.admin-providers-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.admin-providers-kpi-card {
    min-width: 0;
    min-height: 135px;
    padding: 17px;
    background: #fbfdfc;
    border: 1px solid #e2e9e5;
    border-radius: 14px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-providers-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 122, 91, 0.34);
    box-shadow: 0 11px 24px rgba(6, 78, 59, 0.08);
}

.admin-providers-kpi-card.is-success {
    background: #f5fdf8;
    border-color: #cfe9d8;
}

.admin-providers-kpi-card.is-danger {
    background: #fff8f8;
    border-color: #f0cece;
}

.admin-providers-kpi-label,
.admin-providers-kpi-value,
.admin-providers-kpi-card small {
    display: block;
}

.admin-providers-kpi-label {
    margin-bottom: 15px;
    color: #58645f;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.admin-providers-kpi-value {
    margin-bottom: 7px;
    color: #17201d;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.05;
}

.admin-providers-kpi-card small {
    color: #87918d;
    font-size: 0.67rem;
    line-height: 1.45;
}


/* Responsive */

@media (max-width: 1199.98px) {
    .admin-providers-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .admin-providers-main {
        padding-top: 24px;
    }

    .admin-providers-hero-content {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-providers-hero-summary {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .admin-providers-hero,
    .admin-providers-overview {
        padding: 20px;
        border-radius: 15px;
    }

    .admin-providers-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-providers-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .admin-providers-main {
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-providers-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-providers-kpi-card {
        min-height: 120px;
    }
}
/* =========================================================
   PROVIDERS ADMIN — DIRECTORY AND TABLE
========================================================= */

.admin-providers-list-section {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-providers-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
}

.admin-providers-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-providers-search-input {
    position: relative;
    width: min(380px, 40vw);
}

.admin-providers-search-input > span {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    color: #8b9591;
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.admin-providers-search-input .form-control {
    min-height: 42px;
    padding-left: 39px;
    border-color: #d8e0dc;
    border-radius: 10px;
    font-size: 0.8rem;
}

.admin-providers-search-input .form-control:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.1);
}

.admin-providers-search-button,
.admin-providers-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.admin-providers-search-button {
    color: #ffffff;
    background: #067a5b;
    border: 1px solid #067a5b;
}

.admin-providers-search-button:hover {
    color: #ffffff;
    background: #055f47;
    border-color: #055f47;
}

.admin-providers-reset-button {
    color: #58645f;
    background: #ffffff;
    border: 1px solid #d5ded9;
}

.admin-providers-reset-button:hover {
    color: #067a5b;
    background: #f4fbf8;
    border-color: #9fc9bb;
}


/* Provider table */

.admin-providers-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

.admin-providers-table {
    width: 100%;
    min-width: 1380px;
    margin: 0;
    border-collapse: collapse;
}

.admin-providers-table thead th {
    padding: 13px 14px;
    color: #66716c;
    background: #f7faf8;
    border-bottom: 1px solid #dfe7e3;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-providers-table tbody td {
    padding: 15px 14px;
    color: #4b5752;
    background: #ffffff;
    border-bottom: 1px solid #edf1ef;
    font-size: 0.78rem;
    line-height: 1.45;
    vertical-align: middle;
}

.admin-providers-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-providers-table tbody tr:hover td {
    background: #fbfdfc;
}


/* Provider ID */

.admin-provider-directory-id {
    color: #067a5b;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}


/* Provider identity */

.admin-provider-directory-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 165px;
}

.admin-provider-directory-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: #067a5b;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 750;
}

.admin-provider-directory-identity strong {
    color: #17201d;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Provider badges */

.admin-providers-table .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-providers-table .text-bg-primary {
    color: #1e40af !important;
    background: #dbeafe !important;
}

.admin-providers-table .text-bg-info {
    color: #075985 !important;
    background: #e0f2fe !important;
}

.admin-providers-table .text-bg-warning {
    color: #92400e !important;
    background: #fef3c7 !important;
}

.admin-providers-table .text-bg-success,
.admin-providers-table .bg-success {
    color: #166534 !important;
    background: #dcfce7 !important;
}

.admin-providers-table .text-bg-secondary {
    color: #52605b !important;
    background: #edf2ef !important;
}


/* Access status */

.admin-provider-access-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-provider-access-status.is-active {
    color: #166534;
    background: #dcfce7;
}

.admin-provider-access-status.is-banned {
    color: #991b1b;
    background: #fee2e2;
}


/* Date */

.admin-provider-directory-date {
    color: #78827e;
    font-size: 0.73rem;
    white-space: nowrap;
}


/* Action buttons */

.admin-providers-table .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.admin-providers-table .btn-outline-primary {
    color: #067a5b;
    background: #ffffff;
    border-color: #9fc9bb;
}

.admin-providers-table .btn-outline-primary:hover {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}

.admin-providers-table .btn-outline-danger {
    color: #b42318;
    background: #ffffff;
    border-color: #efb3ad;
}

.admin-providers-table .btn-outline-danger:hover {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

.admin-providers-table .btn-outline-warning {
    color: #92400e;
    background: #ffffff;
    border-color: #f1cf8c;
}

.admin-providers-table .btn-outline-warning:hover {
    color: #ffffff;
    background: #b7791f;
    border-color: #b7791f;
}

.admin-providers-table .btn-outline-secondary {
    color: #52605b;
    background: #ffffff;
    border-color: #cfd8d4;
}

.admin-providers-table .btn-outline-secondary:hover {
    color: #ffffff;
    background: #52605b;
    border-color: #52605b;
}


/* Pagination */

.admin-providers-list-section .pagination {
    margin-top: 20px;
    margin-bottom: 0;
}

.admin-providers-list-section .page-link {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #52605b;
    background: #ffffff;
    border-color: #dce4e0;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: none;
}

.admin-providers-list-section .page-link:hover {
    color: #067a5b;
    background: #f0faf6;
    border-color: #9fc9bb;
}

.admin-providers-list-section .page-item.active .page-link {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}


/* Scrollbar */

.admin-providers-table-wrap::-webkit-scrollbar {
    height: 10px;
}

.admin-providers-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f3;
}

.admin-providers-table-wrap::-webkit-scrollbar-thumb {
    background: #bdcbc5;
    border: 2px solid #f1f5f3;
    border-radius: 999px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .admin-providers-list-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-providers-search-form {
        width: 100%;
    }

    .admin-providers-search-input {
        flex: 1;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .admin-providers-list-section {
        padding: 20px;
        border-radius: 15px;
    }
}

@media (max-width: 575.98px) {
    .admin-providers-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-providers-search-input,
    .admin-providers-search-button,
    .admin-providers-reset-button {
        width: 100%;
    }
}
/* =========================================================
   CUSTOMERS ADMIN — OPERATIONS CENTRE
========================================================= */

.admin-customers-main {
    max-width: 1440px;
    padding-top: 32px;
    padding-bottom: 70px;
    font-family: "DM Sans", sans-serif;
}


/* Customer hero */

.admin-customers-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 30px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at top right,
            rgba(110, 231, 183, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #043d2e 0%,
            #065f46 55%,
            #08705a 100%
        );
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(6, 78, 59, 0.16);
}

.admin-customers-hero::after {
    position: absolute;
    top: -95px;
    right: -75px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.admin-customers-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.admin-customers-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.admin-customers-hero h1 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.admin-customers-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.93rem;
    line-height: 1.65;
}

.admin-customers-hero-summary {
    flex: 0 0 220px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    backdrop-filter: blur(8px);
}

.admin-customers-hero-summary span,
.admin-customers-hero-summary strong,
.admin-customers-hero-summary small {
    display: block;
}

.admin-customers-hero-summary span {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-customers-hero-summary strong {
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.admin-customers-hero-summary small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.68rem;
    line-height: 1.4;
}


/* Customer overview */

.admin-customers-overview {
    margin-bottom: 22px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-customers-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-customers-section-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #067a5b;
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.admin-customers-section-heading h2,
.admin-customers-list-header h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.admin-customers-section-heading p,
.admin-customers-list-header p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-customers-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 6px 11px;
    color: #067a5b;
    background: #ecfdf5;
    border: 1px solid #c6e8da;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-customers-live-indicator > span {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}


/* Customer KPI cards */

.admin-customers-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.admin-customers-kpi-card {
    min-width: 0;
    min-height: 135px;
    padding: 17px;
    background: #fbfdfc;
    border: 1px solid #e2e9e5;
    border-radius: 14px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-customers-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 122, 91, 0.34);
    box-shadow: 0 11px 24px rgba(6, 78, 59, 0.08);
}

.admin-customers-kpi-card.is-success {
    background: #f5fdf8;
    border-color: #cfe9d8;
}

.admin-customers-kpi-card.is-danger {
    background: #fff8f8;
    border-color: #f0cece;
}

.admin-customers-kpi-label,
.admin-customers-kpi-value,
.admin-customers-kpi-card small {
    display: block;
}

.admin-customers-kpi-label {
    margin-bottom: 15px;
    color: #58645f;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.admin-customers-kpi-value {
    margin-bottom: 7px;
    color: #17201d;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.05;
}

.admin-customers-kpi-card small {
    color: #87918d;
    font-size: 0.67rem;
    line-height: 1.45;
}


/* Responsive */

@media (max-width: 1199.98px) {
    .admin-customers-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .admin-customers-main {
        padding-top: 24px;
    }

    .admin-customers-hero-content {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-customers-hero-summary {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .admin-customers-hero,
    .admin-customers-overview {
        padding: 20px;
        border-radius: 15px;
    }

    .admin-customers-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-customers-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .admin-customers-main {
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-customers-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-customers-kpi-card {
        min-height: 120px;
    }
}
/* =========================================================
   CUSTOMERS ADMIN — DIRECTORY AND TABLE
========================================================= */

.admin-customers-list-section {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-customers-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
}

.admin-customers-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-customers-search-input {
    position: relative;
    width: min(360px, 40vw);
}

.admin-customers-search-input > span {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    color: #8b9591;
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.admin-customers-search-input .form-control {
    min-height: 42px;
    padding-left: 39px;
    border-color: #d8e0dc;
    border-radius: 10px;
    font-size: 0.8rem;
}

.admin-customers-search-input .form-control:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.1);
}

.admin-customers-search-button,
.admin-customers-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.admin-customers-search-button {
    color: #ffffff;
    background: #067a5b;
    border: 1px solid #067a5b;
}

.admin-customers-search-button:hover {
    color: #ffffff;
    background: #055f47;
    border-color: #055f47;
}

.admin-customers-reset-button {
    color: #58645f;
    background: #ffffff;
    border: 1px solid #d5ded9;
}

.admin-customers-reset-button:hover {
    color: #067a5b;
    background: #f4fbf8;
    border-color: #9fc9bb;
}


/* Customer table */

.admin-customers-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

.admin-customers-table {
    width: 100%;
    min-width: 1180px;
    margin: 0;
    border-collapse: collapse;
}

.admin-customers-table thead th {
    padding: 13px 14px;
    color: #66716c;
    background: #f7faf8;
    border-bottom: 1px solid #dfe7e3;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-customers-table tbody td {
    padding: 15px 14px;
    color: #4b5752;
    background: #ffffff;
    border-bottom: 1px solid #edf1ef;
    font-size: 0.78rem;
    line-height: 1.45;
    vertical-align: middle;
}

.admin-customers-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-customers-table tbody tr:hover td {
    background: #fbfdfc;
}


/* Customer ID */

.admin-customer-directory-id {
    color: #067a5b;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}


/* Customer identity */

.admin-customer-directory-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 165px;
}

.admin-customer-directory-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: #067a5b;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 750;
}

.admin-customer-directory-identity strong {
    color: #17201d;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Email and phone */

.admin-customers-table td:nth-child(3) {
    max-width: 240px;
    overflow: hidden;
    color: #66716c;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-customers-table td:nth-child(4) a {
    color: #067a5b;
    font-weight: 700;
    text-decoration: none;
}

.admin-customers-table td:nth-child(4) a:hover {
    text-decoration: underline;
}


/* Terms badges */

.admin-customers-table .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-customers-table .text-bg-success {
    color: #166534 !important;
    background: #dcfce7 !important;
}

.admin-customers-table .text-bg-secondary {
    color: #52605b !important;
    background: #edf2ef !important;
}

.admin-customers-table .text-bg-light {
    color: #52605b !important;
    background: #f1f5f3 !important;
}


/* Access status */

.admin-customer-access-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-customer-access-status.is-active {
    color: #166534;
    background: #dcfce7;
}

.admin-customer-access-status.is-banned {
    color: #991b1b;
    background: #fee2e2;
}


/* Date */

.admin-customer-directory-date {
    color: #78827e;
    font-size: 0.73rem;
    white-space: nowrap;
}


/* Action buttons */

.admin-customers-table .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.admin-customers-table .btn-outline-danger {
    color: #b42318;
    background: #ffffff;
    border-color: #efb3ad;
}

.admin-customers-table .btn-outline-danger:hover {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

.admin-customers-table .btn-outline-warning {
    color: #92400e;
    background: #ffffff;
    border-color: #f1cf8c;
}

.admin-customers-table .btn-outline-warning:hover {
    color: #ffffff;
    background: #b7791f;
    border-color: #b7791f;
}

.admin-customers-table .btn-outline-secondary {
    color: #52605b;
    background: #ffffff;
    border-color: #cfd8d4;
}

.admin-customers-table .btn-outline-secondary:hover {
    color: #ffffff;
    background: #52605b;
    border-color: #52605b;
}


/* Pagination */

.admin-customers-list-section .pagination {
    margin-top: 20px;
    margin-bottom: 0;
}

.admin-customers-list-section .page-link {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #52605b;
    background: #ffffff;
    border-color: #dce4e0;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: none;
}

.admin-customers-list-section .page-link:hover {
    color: #067a5b;
    background: #f0faf6;
    border-color: #9fc9bb;
}

.admin-customers-list-section .page-item.active .page-link {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}


/* Scrollbar */

.admin-customers-table-wrap::-webkit-scrollbar {
    height: 10px;
}

.admin-customers-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f3;
}

.admin-customers-table-wrap::-webkit-scrollbar-thumb {
    background: #bdcbc5;
    border: 2px solid #f1f5f3;
    border-radius: 999px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .admin-customers-list-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-customers-search-form {
        width: 100%;
    }

    .admin-customers-search-input {
        flex: 1;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .admin-customers-list-section {
        padding: 20px;
        border-radius: 15px;
    }
}

@media (max-width: 575.98px) {
    .admin-customers-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-customers-search-input,
    .admin-customers-search-button,
    .admin-customers-reset-button {
        width: 100%;
    }
}
/* =========================================================
   SERVICES ADMIN — OPERATIONS CENTRE
========================================================= */

.admin-services-main {
    max-width: 1440px;
    padding-top: 32px;
    padding-bottom: 70px;
    font-family: "DM Sans", sans-serif;
}


/* Services hero */

.admin-services-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 30px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at top right,
            rgba(110, 231, 183, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #043d2e 0%,
            #065f46 55%,
            #08705a 100%
        );
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(6, 78, 59, 0.16);
}

.admin-services-hero::after {
    position: absolute;
    top: -95px;
    right: -75px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.admin-services-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.admin-services-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.admin-services-hero h1 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.admin-services-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.93rem;
    line-height: 1.65;
}

.admin-services-hero-summary {
    flex: 0 0 220px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    backdrop-filter: blur(8px);
}

.admin-services-hero-summary span,
.admin-services-hero-summary strong,
.admin-services-hero-summary small {
    display: block;
}

.admin-services-hero-summary span {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-services-hero-summary strong {
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.admin-services-hero-summary small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.68rem;
    line-height: 1.4;
}


/* Services overview */

.admin-services-overview {
    margin-bottom: 22px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-services-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-services-section-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #067a5b;
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.admin-services-section-heading h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.admin-services-section-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-services-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 6px 11px;
    color: #067a5b;
    background: #ecfdf5;
    border: 1px solid #c6e8da;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-services-live-indicator > span {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}


/* Service KPI cards */

.admin-services-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.admin-services-kpi-card {
    min-width: 0;
    min-height: 135px;
    padding: 17px;
    background: #fbfdfc;
    border: 1px solid #e2e9e5;
    border-radius: 14px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-services-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 122, 91, 0.34);
    box-shadow: 0 11px 24px rgba(6, 78, 59, 0.08);
}

.admin-services-kpi-card.is-success {
    background: #f5fdf8;
    border-color: #cfe9d8;
}

.admin-services-kpi-card.is-warning {
    background: #fffaf2;
    border-color: #f1dfb9;
}

.admin-services-kpi-label,
.admin-services-kpi-value,
.admin-services-kpi-card small {
    display: block;
}

.admin-services-kpi-label {
    margin-bottom: 15px;
    color: #58645f;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.admin-services-kpi-value {
    margin-bottom: 7px;
    color: #17201d;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.05;
}

.admin-services-kpi-card small {
    color: #87918d;
    font-size: 0.67rem;
    line-height: 1.45;
}


/* Responsive */

@media (max-width: 1199.98px) {
    .admin-services-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .admin-services-main {
        padding-top: 24px;
    }

    .admin-services-hero-content {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-services-hero-summary {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .admin-services-hero,
    .admin-services-overview {
        padding: 20px;
        border-radius: 15px;
    }

    .admin-services-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-services-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .admin-services-main {
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-services-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-services-kpi-card {
        min-height: 120px;
    }
}
/* =========================================================
   SERVICES ADMIN — DIRECTORY AND TABLE
========================================================= */

.admin-services-list-section {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-services-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
}

.admin-services-list-header h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.admin-services-list-header p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.5;
}


/* Search */

.admin-services-search-wrap {
    position: relative;
    flex: 0 0 360px;
}

.admin-services-search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    color: #8b9591;
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.admin-services-search-input {
    min-height: 42px;
    padding-left: 39px;
    border-color: #d8e0dc;
    border-radius: 10px;
    font-size: 0.8rem;
}

.admin-services-search-input:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.1);
}


/* Table */

.admin-services-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

.admin-services-table {
    width: 100%;
    min-width: 1180px;
    margin: 0;
    border-collapse: collapse;
}

.admin-services-table thead th {
    padding: 13px 14px;
    color: #66716c;
    background: #f7faf8;
    border-bottom: 1px solid #dfe7e3;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-services-table tbody td {
    padding: 15px 14px;
    color: #4b5752;
    background: #ffffff;
    border-bottom: 1px solid #edf1ef;
    font-size: 0.78rem;
    line-height: 1.45;
    vertical-align: middle;
}

.admin-services-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-services-table tbody tr:hover td {
    background: #fbfdfc;
}


/* Service ID */

.admin-service-directory-id {
    color: #067a5b;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}


/* Service title */

.admin-service-directory-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 165px;
}

.admin-service-directory-title strong {
    color: #17201d;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-service-directory-title small {
    color: #909994;
    font-size: 0.66rem;
}


/* Category */

.admin-service-category {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    color: #52605b;
    background: #edf2ef;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Provider */

.admin-service-provider {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 160px;
}

.admin-service-provider-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: #ffffff;
    background: #067a5b;
    border-radius: 9px;
    font-size: 0.74rem;
    font-weight: 750;
}

.admin-service-provider strong {
    color: #17201d;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Price */

.admin-service-price {
    color: #17201d;
    font-size: 0.78rem;
    font-weight: 750;
    white-space: nowrap;
}


/* Status */

.admin-service-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-service-status.is-active {
    color: #166534;
    background: #dcfce7;
}

.admin-service-status.is-inactive {
    color: #52605b;
    background: #edf2ef;
}


/* Image button */

.admin-services-table .view-image-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    color: #52605b;
    background: #ffffff;
    border-color: #cfd8d4;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-services-table .view-image-btn:hover {
    color: #ffffff;
    background: #52605b;
    border-color: #52605b;
}


/* Created date */

.admin-service-created-date {
    color: #78827e;
    font-size: 0.73rem;
    white-space: nowrap;
}


/* Remove button */

.admin-services-table .remove-service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    color: #b42318;
    background: #ffffff;
    border-color: #efb3ad;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.admin-services-table .remove-service-btn:hover {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}


/* Pagination */

.admin-services-list-section .pagination {
    margin-top: 20px;
    margin-bottom: 0;
}

.admin-services-list-section .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    color: #52605b;
    background: #ffffff;
    border-color: #dce4e0;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: none;
}

.admin-services-list-section .page-link:hover {
    color: #067a5b;
    background: #f0faf6;
    border-color: #9fc9bb;
}

.admin-services-list-section .page-item.active .page-link {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}


/* Scrollbar */

.admin-services-table-wrap::-webkit-scrollbar {
    height: 10px;
}

.admin-services-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f3;
}

.admin-services-table-wrap::-webkit-scrollbar-thumb {
    background: #bdcbc5;
    border: 2px solid #f1f5f3;
    border-radius: 999px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .admin-services-list-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-services-search-wrap {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .admin-services-list-section {
        padding: 20px;
        border-radius: 15px;
    }
}
/* =========================================================
   ADMIN OPERATIONS CENTRE — TOPBAR FIX
========================================================= */

.admin-topbar {
    position: relative;
    z-index: 1050;
    width: 100%;
    min-height: 74px;
    padding: 0;
    background: #ffffff;
    border-bottom: 1px solid #e4ebe7;
    box-shadow: 0 4px 18px rgba(23, 32, 29, 0.06);
}

.admin-topbar-inner {
    display: flex;
    align-items: center;
    min-height: 74px;
    gap: 24px;
}

.admin-topbar-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.admin-topbar-brand img {
    display: block;
    width: 176px;
    height: auto;
    object-fit: contain;
}

.admin-topbar-collapse {
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.admin-topbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-topbar-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-topbar-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
    color: #52605b;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.admin-topbar-nav a:hover {
    color: #067a5b;
    background: #f0faf6;
}

.admin-topbar-nav a.is-active {
    color: #ffffff;
    background: #067a5b;
}

.admin-topbar-account {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: 16px;
}

.admin-topbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
}

.admin-topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: #ffffff;
    background: #067a5b;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-topbar-user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-topbar-user-text strong {
    color: #17201d;
    font-size: 0.75rem;
    font-weight: 750;
}

.admin-topbar-user-text small {
    margin-top: 3px;
    color: #7b8581;
    font-size: 0.63rem;
}

.admin-topbar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 13px;
    color: #ffffff;
    background: #054f3b;
    border: 1px solid #054f3b;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.admin-topbar-logout:hover {
    color: #ffffff;
    background: #043d2e;
    border-color: #043d2e;
}

.admin-topbar-toggler {
    margin-left: auto;
    border: 1px solid #d7e0dc;
    border-radius: 9px;
    box-shadow: none !important;
}

@media (max-width: 1199.98px) {
    .admin-topbar-inner {
        gap: 14px;
    }

    .admin-topbar-brand img {
        width: 155px;
    }

    .admin-topbar-nav a {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 0.67rem;
    }

    .admin-topbar-user-text {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .admin-topbar {
        min-height: 68px;
    }

    .admin-topbar-inner {
        position: relative;
        flex-wrap: wrap;
        min-height: 68px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .admin-topbar-collapse {
        flex-basis: 100%;
        width: 100%;
        padding: 14px 0 6px;
        border-top: 1px solid #edf1ef;
    }

    .admin-topbar-nav {
        align-items: stretch;
        flex-direction: column;
        gap: 3px;
    }

    .admin-topbar-nav a {
        justify-content: flex-start;
        width: 100%;
        min-height: 40px;
        padding: 10px 12px;
        font-size: 0.75rem;
    }

    .admin-topbar-account {
        justify-content: space-between;
        width: 100%;
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px solid #edf1ef;
    }

    .admin-topbar-user-text {
        display: flex;
    }
}
/* =========================================================
   ADMIN TOPBAR — CONSISTENT ALIGNMENT ACROSS ALL PAGES
========================================================= */

.admin-topbar > .container,
.admin-topbar .admin-topbar-inner {
    display: flex;
    align-items: center;
    min-height: 74px;
    gap: 20px;
}

.admin-topbar .navbar-collapse {
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}


/* Both navigation structures */

.admin-orders-topbar-links,
.admin-topbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.admin-topbar-nav {
    list-style: none;
}

.admin-topbar-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-orders-topbar-links a,
.admin-topbar-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
    color: #52605b;
    background: transparent;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.admin-orders-topbar-links a:hover,
.admin-topbar-nav a:hover {
    color: #067a5b;
    background: #f0faf6;
}

.admin-orders-topbar-links a.is-active,
.admin-topbar-nav a.is-active {
    color: #ffffff;
    background: #067a5b;
}


/* Both account structures */

.admin-topbar-profile,
.admin-topbar-account {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: 14px;
}

.admin-topbar-profile-copy,
.admin-topbar-user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-topbar-profile-copy span,
.admin-topbar-user-text strong {
    color: #17201d;
    font-size: 0.73rem;
    font-weight: 750;
}

.admin-topbar-profile-copy strong,
.admin-topbar-user-text small {
    margin-top: 3px;
    color: #7b8581;
    font-size: 0.62rem;
    font-weight: 600;
}

.admin-topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: #ffffff;
    background: #067a5b;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-topbar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-left: 10px;
    padding: 8px 13px;
    color: #ffffff;
    background: #054f3b;
    border: 1px solid #054f3b;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.admin-topbar-logout:hover {
    color: #ffffff;
    background: #043d2e;
    border-color: #043d2e;
}


/* Tablet */

@media (max-width: 1199.98px) {
    .admin-topbar > .container,
    .admin-topbar .admin-topbar-inner {
        gap: 13px;
    }

    .admin-orders-topbar-links a,
    .admin-topbar-nav a {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 0.67rem;
    }

    .admin-topbar-profile-copy,
    .admin-topbar-user-text {
        display: none;
    }
}


/* Mobile */

@media (max-width: 991.98px) {
    .admin-topbar > .container,
    .admin-topbar .admin-topbar-inner {
        flex-wrap: wrap;
        min-height: 68px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .admin-topbar .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        padding-top: 14px;
        border-top: 1px solid #edf1ef;
    }

    .admin-orders-topbar-links,
    .admin-topbar-nav {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        gap: 3px;
    }

    .admin-orders-topbar-links a,
    .admin-topbar-nav a {
        justify-content: flex-start;
        width: 100%;
        min-height: 40px;
        padding: 10px 12px;
        font-size: 0.75rem;
    }

    .admin-topbar-profile,
    .admin-topbar-account {
        width: 100%;
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px solid #edf1ef;
    }

    .admin-topbar-profile-copy,
    .admin-topbar-user-text {
        display: flex;
    }

    .admin-topbar-logout {
        margin-left: auto;
    }
}
/* =========================================================
   CATEGORIES ADMIN — OPERATIONS CENTRE
========================================================= */

.admin-categories-main {
    max-width: 1440px;
    padding-top: 32px;
    padding-bottom: 70px;
    font-family: "DM Sans", sans-serif;
}


/* Categories hero */

.admin-categories-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 30px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at top right,
            rgba(110, 231, 183, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #043d2e 0%,
            #065f46 55%,
            #08705a 100%
        );
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(6, 78, 59, 0.16);
}

.admin-categories-hero::after {
    position: absolute;
    top: -95px;
    right: -75px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.admin-categories-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.admin-categories-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.admin-categories-hero h1 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.admin-categories-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.93rem;
    line-height: 1.65;
}

.admin-categories-hero-summary {
    flex: 0 0 220px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    backdrop-filter: blur(8px);
}

.admin-categories-hero-summary span,
.admin-categories-hero-summary strong,
.admin-categories-hero-summary small {
    display: block;
}

.admin-categories-hero-summary span {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-categories-hero-summary strong {
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.admin-categories-hero-summary small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.68rem;
    line-height: 1.4;
}


/* Categories overview */

.admin-categories-overview {
    margin-bottom: 22px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-categories-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-categories-section-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #067a5b;
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.admin-categories-section-heading h2,
.admin-categories-create-copy h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.admin-categories-section-heading p,
.admin-categories-create-copy p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-categories-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 6px 11px;
    color: #067a5b;
    background: #ecfdf5;
    border: 1px solid #c6e8da;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-categories-live-indicator > span {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}


/* Category KPI cards */

.admin-categories-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-categories-kpi-card {
    min-width: 0;
    min-height: 135px;
    padding: 17px;
    background: #fbfdfc;
    border: 1px solid #e2e9e5;
    border-radius: 14px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-categories-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 122, 91, 0.34);
    box-shadow: 0 11px 24px rgba(6, 78, 59, 0.08);
}

.admin-categories-kpi-card.is-success {
    background: #f5fdf8;
    border-color: #cfe9d8;
}

.admin-categories-kpi-card.is-warning {
    background: #fffaf2;
    border-color: #f1dfb9;
}

.admin-categories-kpi-label,
.admin-categories-kpi-value,
.admin-categories-kpi-card small {
    display: block;
}

.admin-categories-kpi-label {
    margin-bottom: 15px;
    color: #58645f;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.admin-categories-kpi-value {
    margin-bottom: 7px;
    color: #17201d;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.05;
}

.admin-categories-kpi-card small {
    color: #87918d;
    font-size: 0.67rem;
    line-height: 1.45;
}


/* Create category */

.admin-categories-create-section {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-categories-create-copy {
    max-width: 470px;
}

.admin-categories-create-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex: 1;
    max-width: 620px;
}

.admin-categories-create-field {
    flex: 1;
}

.admin-categories-create-field label {
    display: block;
    margin-bottom: 6px;
    color: #4b5752;
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-categories-create-field .form-control {
    min-height: 43px;
    border-color: #d8e0dc;
    border-radius: 10px;
    font-size: 0.8rem;
}

.admin-categories-create-field .form-control:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.1);
}

.admin-categories-create-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 9px 17px;
    color: #ffffff;
    background: #067a5b;
    border: 1px solid #067a5b;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-categories-create-button:hover {
    background: #055f47;
    border-color: #055f47;
}


/* Responsive */

@media (max-width: 991.98px) {
    .admin-categories-main {
        padding-top: 24px;
    }

    .admin-categories-hero-content,
    .admin-categories-create-section {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-categories-hero-summary {
        flex-basis: auto;
        width: 100%;
    }

    .admin-categories-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-categories-create-form {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .admin-categories-hero,
    .admin-categories-overview,
    .admin-categories-create-section {
        padding: 20px;
        border-radius: 15px;
    }

    .admin-categories-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .admin-categories-main {
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-categories-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-categories-create-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-categories-create-button {
        width: 100%;
    }
}
/* =========================================================
   CATEGORIES ADMIN — DIRECTORY AND ACTIONS
========================================================= */

.admin-categories-list-section {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.admin-categories-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.admin-categories-list-header h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.admin-categories-list-header p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-categories-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 6px 11px;
    color: #067a5b;
    background: #ecfdf5;
    border: 1px solid #c6e8da;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Table */

.admin-categories-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

.admin-categories-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: collapse;
}

.admin-categories-table thead th {
    padding: 13px 14px;
    color: #66716c;
    background: #f7faf8;
    border-bottom: 1px solid #dfe7e3;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-categories-table tbody td {
    padding: 15px 14px;
    color: #4b5752;
    background: #ffffff;
    border-bottom: 1px solid #edf1ef;
    font-size: 0.78rem;
    line-height: 1.45;
    vertical-align: middle;
}

.admin-categories-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-categories-table tbody tr:hover td {
    background: #fbfdfc;
}


/* Category ID */

.admin-category-directory-id {
    color: #067a5b;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}


/* Edit form */

.admin-category-edit-form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.admin-category-name-input {
    min-height: 40px;
    border-color: #d8e0dc;
    border-radius: 9px;
    font-size: 0.78rem;
}

.admin-category-name-input:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.1);
}

.admin-category-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 13px;
    color: #067a5b;
    background: #ffffff;
    border: 1px solid #9fc9bb;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-category-save-button:hover {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}


/* Delete action */

.admin-category-delete-form {
    display: inline-flex;
}

.admin-category-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 13px;
    color: #b42318;
    background: #ffffff;
    border: 1px solid #efb3ad;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-category-delete-button:hover {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}


/* Empty state */

.admin-categories-table .text-muted {
    padding: 28px 14px;
    color: #8b9591 !important;
    font-size: 0.8rem;
}


/* Pagination */

.admin-categories-list-section .pagination {
    margin-top: 20px;
    margin-bottom: 0;
}

.admin-categories-list-section .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    color: #52605b;
    background: #ffffff;
    border-color: #dce4e0;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: none;
}

.admin-categories-list-section .page-link:hover {
    color: #067a5b;
    background: #f0faf6;
    border-color: #9fc9bb;
}

.admin-categories-list-section .page-item.active .page-link {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}


/* Scrollbar */

.admin-categories-table-wrap::-webkit-scrollbar {
    height: 10px;
}

.admin-categories-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f3;
}

.admin-categories-table-wrap::-webkit-scrollbar-thumb {
    background: #bdcbc5;
    border: 2px solid #f1f5f3;
    border-radius: 999px;
}


/* Responsive */

@media (max-width: 767.98px) {
    .admin-categories-list-section {
        padding: 20px;
        border-radius: 15px;
    }

    .admin-categories-list-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .admin-category-edit-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-category-save-button,
    .admin-category-delete-button {
        width: 100%;
    }
}
/* =========================================================
   ADMIN TOPBAR — FINAL PROFILE AND LOGOUT ALIGNMENT
========================================================= */

.admin-topbar .navbar-collapse {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.admin-topbar .admin-orders-topbar-links {
    margin-right: 20px !important;
}

.admin-topbar .admin-topbar-profile {
    display: flex;
    align-items: center;
    flex: 0 0 132px;
    width: 132px;
    gap: 10px;
    margin: 0 !important;
}

.admin-topbar .admin-topbar-profile-copy {
    min-width: 0;
}

.admin-topbar .admin-topbar-logout {
    min-width: 70px;
    margin: 0 0 0 14px !important;
    padding-right: 13px;
    padding-left: 13px;
}

@media (max-width: 1199.98px) {
    .admin-topbar .admin-orders-topbar-links {
        margin-right: 12px !important;
    }

    .admin-topbar .admin-topbar-profile {
        flex-basis: 40px;
        width: 40px;
    }
}

@media (max-width: 991.98px) {
    .admin-topbar .navbar-collapse {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-topbar .admin-orders-topbar-links {
        width: 100%;
        margin-right: 0 !important;
    }

    .admin-topbar .admin-topbar-profile {
        flex-basis: auto;
        width: 100%;
        margin-top: 12px !important;
    }

    .admin-topbar .admin-topbar-logout {
        width: 100%;
        margin: 10px 0 0 !important;
    }
}
/* =========================================================
   PROVIDER + CUSTOMER PHONE COLUMN — CONSISTENT STYLE
========================================================= */

.admin-providers-table td:nth-child(4),
.admin-customers-table td:nth-child(4) {
    min-width: 110px;
    white-space: nowrap;
}

.admin-providers-table td:nth-child(4) a,
.admin-customers-table td:nth-child(4) a {
    display: inline-flex;
    align-items: center;
    color: #067a5b !important;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    white-space: nowrap;
}

.admin-providers-table td:nth-child(4) a:hover,
.admin-customers-table td:nth-child(4) a:hover {
    color: #045c45 !important;
    text-decoration: underline !important;
}
/* =========================================================
   ADMIN DASHBOARD TOPBAR — NOTIFICATION ALIGNMENT
========================================================= */

.admin-topbar .admin-topbar-notification {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-left: 10px;
    padding: 0;
    color: #52605b;
    background: #f5f8f6;
    border: 1px solid #dce4e0;
    border-radius: 10px;
    text-decoration: none;
}

.admin-topbar .admin-topbar-notification:hover {
    color: #067a5b;
    background: #eef9f4;
    border-color: #a9d0c2;
}

.admin-topbar .admin-topbar-notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
}

.admin-topbar .admin-topbar-notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    color: #ffffff;
    background: #b42318;
    border: 2px solid #ffffff;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .admin-topbar .admin-topbar-notification {
        width: 100%;
        flex-basis: auto;
        margin: 10px 0 0;
    }
}
/* =========================================================
   LOGIN MODAL — PASSWORD TOGGLE
========================================================= */

.sb-login-password-wrap {
    position: relative;
}

.sb-login-password-input {
    min-height: 46px;
    padding-right: 74px;
    border-color: #d8e0dc;
    border-radius: 10px;
}

.sb-login-password-input:focus {
    border-color: #067a5b;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.12);
}

.sb-login-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 55px;
    min-height: 32px;
    padding: 5px 10px;
    color: #067a5b;
    background: #f0faf6;
    border: 1px solid #c5e4d8;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
}

.sb-login-password-toggle:hover {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}

.sb-login-password-toggle:focus-visible {
    outline: 3px solid rgba(6, 122, 91, 0.18);
    outline-offset: 2px;
}
/* =========================================================
   LOGIN MODAL — FORGOT PASSWORD LINK
========================================================= */

.sb-login-forgot-link {
    color: #067a5b;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}

.sb-login-forgot-link:hover {
    color: #045c45;
    text-decoration: underline;
}

.sb-login-forgot-link:focus-visible {
    outline: 3px solid rgba(6, 122, 91, 0.16);
    outline-offset: 3px;
    border-radius: 4px;
}
/* =========================================================
   LOGIN MODAL — FOOTER ACTIONS
========================================================= */

.sb-login-modal-footer {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

.sb-login-submit-button {
    width: 100%;
    min-height: 46px;
    color: #ffffff;
    background: #065f46;
    border: 1px solid #065f46;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
}

.sb-login-submit-button:hover {
    color: #ffffff;
    background: #054c39;
    border-color: #054c39;
}

.sb-login-cancel-button {
    width: 100%;
    min-height: 42px;
    color: #4b5752;
    background: #f7f9f8;
    border: 1px solid #dce4e0;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

.sb-login-cancel-button:hover {
    color: #17201d;
    background: #edf2ef;
    border-color: #cbd6d1;
}

.sb-login-signup-copy {
    margin: 4px 0 0;
    color: #7a8580;
    font-size: 0.75rem;
    text-align: center;
}

.sb-login-signup-link {
    margin-left: 3px;
    padding: 0;
    color: #067a5b;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
}

.sb-login-signup-link:hover {
    color: #045c45;
    text-decoration: underline;
}

.sb-login-signup-link:focus-visible {
    outline: 3px solid rgba(6, 122, 91, 0.16);
    outline-offset: 3px;
    border-radius: 4px;
}
/* =========================================================
   ADMIN DASHBOARD — MATCH OTHER ADMIN PAGE WIDTH
========================================================= */

.admin-dashboard-main {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 12px 70px;
    font-family: "DM Sans", sans-serif;
}

@media (max-width: 991.98px) {
    .admin-dashboard-main {
        padding-top: 24px;
    }
}

@media (max-width: 575.98px) {
    .admin-dashboard-main {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* =========================================================
   PROVIDER ADD SERVICE — PRICING OPTIONS
========================================================= */

.provider-price-option {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.provider-price-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.provider-price-option-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    height: 100%;
    padding: 18px;

    background: #ffffff;
    border: 1px solid #dfe7e3;
    border-radius: 14px;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.provider-price-option:hover
.provider-price-option-card {
    transform: translateY(-1px);
    border-color: rgba(0, 103, 79, 0.35);
}

.provider-price-radio:checked
+ .provider-price-option-card {
    background: #f1fbf7;
    border-color: #00674f;
    box-shadow: 0 0 0 2px rgba(0, 103, 79, 0.08);
}

.provider-price-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    border-radius: 11px;

    background: #e9faf3;
    color: #00674f;

    font-size: 1rem;
    font-weight: 700;
}

.provider-price-option-card strong {
    display: block;
    margin-bottom: 4px;

    color: #14231f;
    font-size: 1rem;
}

.provider-price-option-card small {
    display: block;

    color: #66736f;
    font-size: 0.88rem;
    line-height: 1.45;
}
/* =========================================================
   PROVIDER ADD SERVICE — PHOTO UPLOAD
========================================================= */

.provider-photo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.provider-photo-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px;
    border: 1.5px dashed #cfdcd7;
    border-radius: 14px;
    background: #fbfdfc;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.provider-photo-upload:hover {
    border-color: #00674f;
    background: #f4fbf8;
    box-shadow: 0 8px 20px rgba(0, 103, 79, 0.06);
}

.provider-photo-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    background: #e9faf3;
    font-size: 1.25rem;
}

.provider-photo-upload-copy {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.provider-photo-upload-copy strong {
    color: #14231f;
    margin-bottom: 2px;
}

.provider-photo-upload-copy span {
    color: #5f6d68;
    font-size: 0.92rem;
}

.provider-photo-upload-copy small {
    color: #89958f;
    margin-top: 3px;
}

.provider-photo-upload-button {
    padding: 9px 14px;
    border-radius: 10px;
    background: #00674f;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

.provider-photo-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #dfe7e3;
    border-radius: 12px;
    background: #ffffff;
}

.provider-photo-preview img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e2e8e5;
}

.provider-photo-preview > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.provider-photo-preview strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.provider-photo-preview small {
    color: #6b7773;
}

.provider-photo-remove {
    border: 1px solid #d7dfdb;
    background: #ffffff;
    border-radius: 9px;
    padding: 7px 10px;
    color: #b42318;
    font-size: 0.85rem;
    font-weight: 600;
}

.provider-photo-remove:hover {
    background: #fff5f5;
}

@media (max-width: 575.98px) {
    .provider-photo-upload {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .provider-photo-upload-button {
        width: 100%;
        text-align: center;
    }
}
/* =========================================================
   PROVIDER ADD SERVICE — DISTRICTS
========================================================= */

.provider-district-select-all {
    padding: 12px 14px;
    background: #f6faf8;
    border: 1px solid #e1e9e5;
    border-radius: 10px;
}

.provider-district-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.provider-district-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 14px;
    background: #ffffff;
    border: 1px solid #dfe7e3;
    border-radius: 11px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.provider-district-option:hover {
    border-color: rgba(0, 103, 79, 0.35);
    background: #f8fcfa;
}

.provider-district-option:has(.district-checkbox:checked) {
    border-color: #00674f;
    background: #f1fbf7;
    box-shadow: 0 0 0 1px rgba(0, 103, 79, 0.06);
}

.provider-district-option span {
    font-weight: 600;
    color: #273630;
}

@media (max-width: 767.98px) {
    .provider-district-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .provider-district-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   PROVIDER ADD SERVICE — DESCRIPTION
========================================================= */

.provider-service-description {
    min-height: 180px;
    resize: vertical;
    line-height: 1.6;
}

.provider-description-guide {
    padding: 16px;
    background: #f8fbfa;
    border: 1px solid #e1e9e5;
    border-radius: 12px;
}

.provider-description-guide-title {
    margin-bottom: 12px;
    color: #26352f;
    font-size: 0.9rem;
    font-weight: 700;
}

.provider-description-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.provider-description-guide-item {
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e3ebe7;
    border-radius: 10px;
}

.provider-description-guide-item strong {
    display: block;
    margin-bottom: 3px;
    color: #14231f;
    font-size: 0.88rem;
}

.provider-description-guide-item span {
    display: block;
    color: #6c7874;
    font-size: 0.82rem;
    line-height: 1.4;
}

@media (max-width: 767.98px) {
    .provider-description-guide-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   PROVIDER ADD SERVICE — COMPLETION TIME
========================================================= */

.provider-completion-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.provider-completion-option {
    display: block;
    width: 100%;
    cursor: pointer;
}

.provider-completion-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.provider-completion-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #dfe7e3;
    border-radius: 12px;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.provider-completion-option:hover
.provider-completion-card {
    border-color: rgba(0, 103, 79, 0.35);
    transform: translateY(-1px);
}

.provider-completion-radio:checked
+ .provider-completion-card {
    border-color: #00674f;
    background: #f1fbf7;
    box-shadow: 0 0 0 2px rgba(0, 103, 79, 0.07);
}

.provider-completion-card strong {
    color: #14231f;
    margin-bottom: 3px;
}

.provider-completion-card small {
    color: #6d7975;
    line-height: 1.4;
}

.provider-custom-delivery {
    max-width: 420px;
}

@media (max-width: 991.98px) {
    .provider-completion-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .provider-completion-options {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   PROVIDER ADD SERVICE — FINAL SERVICEBERSAMA LOOK
========================================================= */

.provider-add-service-page {
    background:
        linear-gradient(
            180deg,
            #f5fbf8 0%,
            #ffffff 280px
        );
}


/* Main width */

.provider-add-service-main {
    max-width: 1180px;
}


/* Main card */

.provider-add-service-panel {
    position: relative;
    overflow: hidden;

    padding: 32px;

    background: #ffffff;
    border: 1px solid #dfe9e4;
    border-radius: 18px;

    box-shadow:
        0 12px 32px rgba(17, 58, 47, 0.06);
}


/* Small ServiceBersama green accent */

.provider-add-service-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: #00674f;
}


/* Main heading */

.provider-add-service-page .provider-title {
    color: #13231e;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}


/* Service Details heading */

.provider-add-service-page .panel-head h2 {
    color: #00674f;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.provider-add-service-page .panel-head p {
    color: #6b7773;
}


/* More breathing room between form sections */

.provider-add-service-page .add-service-form {
    row-gap: 0.45rem;
}

.provider-add-service-page .add-service-form > .col-12,
.provider-add-service-page .add-service-form > .col-lg-12 {
    margin-top: 22px;
}


/* Form labels */

.provider-add-service-page .form-label {
    color: #20342d;
    font-weight: 700 !important;
    margin-bottom: 8px;
}


/* Inputs */

.provider-add-service-page .form-control,
.provider-add-service-page .form-select,
.provider-add-service-page .input-group-text {
    min-height: 46px;
    border-color: #d9e4df;
}

.provider-add-service-page .form-control,
.provider-add-service-page .form-select {
    border-radius: 11px;
}

.provider-add-service-page .input-group .form-control {
    border-radius: 0 11px 11px 0;
}

.provider-add-service-page .input-group-text {
    border-radius: 11px 0 0 11px;
    background: #f5faf7;
    color: #315248;
    font-weight: 600;
}


/* Focus state */

.provider-add-service-page .form-control:focus,
.provider-add-service-page .form-select:focus {
    border-color: #0b7a5e;

    box-shadow:
        0 0 0 3px rgba(0, 103, 79, 0.10);
}


/* Helper text */

.provider-add-service-page .text-muted {
    color: #6c7b75 !important;
}


/* Selected cards stronger ServiceBersama feel */

.provider-add-service-page
.provider-completion-radio:checked
+ .provider-completion-card,

.provider-add-service-page
.provider-price-radio:checked
+ .provider-price-option-card,

.provider-add-service-page
.provider-district-option:has(.district-checkbox:checked) {
    background: #edf9f4;
    border-color: #00785b;
}


/* Upload area */

.provider-add-service-page .provider-photo-upload {
    background: #f8fcfa;
    border-color: #cbded5;
}

.provider-add-service-page .provider-photo-upload:hover {
    background: #eff9f5;
    border-color: #00674f;
}


/* Description guide */

.provider-add-service-page .provider-description-guide {
    background: #f4faf7;
    border-color: #dce9e3;
}


/* Bottom action buttons */

.provider-add-service-page
.add-service-form
.btn-outline-secondary {
    min-height: 44px;
    padding-left: 20px;
    padding-right: 20px;

    border-radius: 10px;
    border-color: #b9c8c2;

    color: #40544d;
    font-weight: 600;
}

.provider-add-service-page
.add-service-form
.explore-btn {
    min-height: 44px;

    padding-left: 24px !important;
    padding-right: 24px !important;

    border-radius: 10px;

    background: #00674f;
    border-color: #00674f;

    color: #ffffff;

    font-weight: 700;

    box-shadow:
        0 8px 18px rgba(0, 103, 79, 0.16);
}

.provider-add-service-page
.add-service-form
.explore-btn:hover {
    background: #005640;
    border-color: #005640;

    transform: translateY(-1px);
}


/* Footer */

.provider-add-service-page .footer {
    margin-top: 20px;

    background: #10251f;
    color: rgba(255, 255, 255, 0.78);
}


/* Tablet */

@media (max-width: 991.98px) {

    .provider-add-service-main {
        max-width: 100%;
    }

    .provider-add-service-panel {
        padding: 26px;
    }

}


/* Mobile */

@media (max-width: 575.98px) {

    .provider-add-service-main {
        padding-left: 14px;
        padding-right: 14px;
    }

    .provider-add-service-panel {
        padding: 22px 16px;
        border-radius: 14px;
    }

    .provider-add-service-page .provider-title {
        font-size: 1.55rem;
    }

    .provider-add-service-page
    .add-service-form
    .col-12.d-flex.justify-content-end {
        flex-direction: column-reverse;
    }

    .provider-add-service-page
    .add-service-form
    .col-12.d-flex.justify-content-end
    .btn {
        width: 100%;
    }
}
/* =========================================================
   PROVIDER PUBLIC PROFILE — HOMEPAGE STYLE SERVICE CARDS
========================================================= */

.sb-profile-listing-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    height: 100%;

    background: #ffffff;

    border: 1px solid #dfe7e3;
    border-radius: 16px;

    box-shadow:
        0 8px 24px rgba(22, 52, 43, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.sb-profile-listing-card:hover {
    transform: translateY(-3px);

    border-color: rgba(0, 103, 79, 0.22);

    box-shadow:
        0 16px 34px rgba(22, 52, 43, 0.10);
}


/* IMAGE */

.sb-profile-listing-image-wrap {
    position: relative;
}

.sb-profile-listing-image {
    display: block;

    width: 100%;
    height: 275px;

    object-fit: cover;
}

.sb-profile-listing-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5f1;
    color: #74817c;
}


/* CATEGORY BADGE */

.sb-profile-listing-category {
    position: absolute;

    top: 16px;
    left: 16px;

    padding: 8px 13px;

    background: rgba(255, 255, 255, 0.92);
    color: #005d46;

    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 700;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.06);
}


/* BODY */

.sb-profile-listing-body {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 20px;
}


/* TITLE */

.sb-profile-listing-title {
    margin: 0 0 5px;

    color: #17221f;

    font-size: 1.13rem;
    font-weight: 700;

    line-height: 1.35;
}


/* PROVIDER */

.sb-profile-listing-provider {
    margin-bottom: 14px;

    color: #69756f;

    font-size: 0.9rem;
}

.sb-profile-listing-provider span {
    color: #68766f;
}


/* DESCRIPTION */

.sb-profile-listing-description {
    min-height: 55px;

    margin: 0 0 22px;

    color: #55635d;

    font-size: 0.92rem;
    line-height: 1.55;
}


/* RATING */

.sb-profile-listing-rating {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: auto;
    margin-bottom: 14px;

    color: #52605a;

    font-size: 0.86rem;
}

.sb-profile-listing-rating strong {
    color: #37443f;
}

.sb-profile-listing-star {
    color: #e79400;

    font-size: 1rem;
}


/* AVAILABILITY */

.sb-profile-listing-availability {
    margin-bottom: 17px;

    color: #66736e;

    font-size: 0.82rem;
    line-height: 1.5;
}

.sb-profile-listing-availability span {
    font-weight: 500;
}


/* BOTTOM */

.sb-profile-listing-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding-top: 15px;

    border-top: 1px solid #e5ebe8;
}


/* PRICE */

.sb-profile-listing-price strong {
    display: block;

    color: #00674f;

    font-size: 1rem;
    font-weight: 700;

    line-height: 1.3;
}


/* BOOK BUTTON */

.sb-profile-listing-book {
    min-width: 138px;

    padding: 11px 16px;

    border-radius: 10px;

    background: #00674f;
    border-color: #00674f;

    color: #ffffff;

    font-weight: 700;
}

.sb-profile-listing-book:hover {
    background: #005540;
    border-color: #005540;

    color: #ffffff;
}


/* MOBILE */

@media (max-width: 575.98px) {

    .sb-profile-listing-image {
        height: 230px;
    }

    .sb-profile-listing-body {
        padding: 17px;
    }

    .sb-profile-listing-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .sb-profile-listing-book {
        width: 100%;
    }

}
/* =========================================================
   CUSTOMER MARKETPLACE — PROVIDER PROFILE LINK
========================================================= */

.sb-dashboard-service-provider a {
    position: relative;
    z-index: 5;

    color: #00674f;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.sb-dashboard-service-provider a:hover {
    color: #004f3d;
    text-decoration: underline;
}
/* =========================================================
   PUBLIC PROVIDER PROFILE — HERO
========================================================= */

.sb-public-provider-hero {
    position: relative;
    overflow: hidden;

    padding: 36px;

    background:
        linear-gradient(
            135deg,
            #f0faf5 0%,
            #ffffff 58%
        );

    border: 1px solid #dce8e2;
    border-radius: 20px;

    box-shadow:
        0 12px 34px rgba(20, 58, 47, 0.07);
}

.sb-public-provider-hero::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background: #00674f;
}

.sb-public-provider-hero-content {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;

    align-items: center;
}


/* Profile image */

.sb-public-provider-avatar-wrap {
    display: flex;
    justify-content: center;
}

.sb-public-provider-avatar {
    width: 150px;
    height: 150px;

    object-fit: cover;

    border-radius: 50%;

    border: 5px solid #ffffff;

    box-shadow:
        0 8px 24px rgba(15, 66, 52, 0.12);
}

.sb-public-provider-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #e9f7f1;
    color: #00674f;

    font-size: 2rem;
    font-weight: 700;
}


/* Header */

.sb-public-provider-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.sb-public-provider-kicker {
    display: block;

    margin-bottom: 5px;

    color: #007357;

    font-size: 0.78rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sb-public-provider-name {
    margin: 0;

    color: #17231f;

    font-size: 2rem;
    font-weight: 700;

    letter-spacing: -0.03em;
}

.sb-public-provider-owner {
    margin: 6px 0 0;

    color: #69756f;

    font-size: 0.92rem;
}


/* Badges */

.sb-public-provider-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    justify-content: flex-end;
}

.sb-public-provider-verified,
.sb-public-provider-level {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 700;
}

.sb-public-provider-verified {
    background: #e9f8f1;
    color: #00674f;
}

.sb-public-provider-level {
    background: #fff7d8;
    color: #7e6300;
}


/* Rating */

.sb-public-provider-rating {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 18px;

    color: #55625d;
}

.sb-public-provider-stars {
    color: #e8a000;

    font-size: 1.15rem;
    letter-spacing: 2px;
}

.sb-public-provider-rating strong {
    color: #25332e;
}


/* Stats */

.sb-public-provider-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 20px;
}

.sb-public-provider-stat {
    min-width: 135px;

    padding: 12px 16px;

    background: #ffffff;

    border: 1px solid #dfe8e4;
    border-radius: 12px;
}

.sb-public-provider-stat strong {
    display: block;

    color: #00674f;

    font-size: 1.1rem;
}

.sb-public-provider-stat span {
    color: #69766f;

    font-size: 0.8rem;
}


/* Buttons */

.sb-public-provider-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 22px;
}

.sb-public-provider-primary-btn,
.sb-public-provider-secondary-btn {
    min-height: 42px;

    padding: 10px 18px;

    border-radius: 10px;

    font-weight: 700;
}

.sb-public-provider-primary-btn {
    background: #00674f;
    border: 1px solid #00674f;

    color: #ffffff;
}

.sb-public-provider-primary-btn:hover {
    background: #00533f;
    border-color: #00533f;

    color: #ffffff;
}

.sb-public-provider-secondary-btn {
    background: #ffffff;

    border: 1px solid #b9ccc4;

    color: #294d42;
}

.sb-public-provider-secondary-btn:hover {
    background: #f4faf7;

    color: #00674f;
}


/* Tablet */

@media (max-width: 767.98px) {

    .sb-public-provider-hero {
        padding: 28px 22px;
    }

    .sb-public-provider-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sb-public-provider-title-row {
        flex-direction: column;
        align-items: center;
    }

    .sb-public-provider-badges {
        justify-content: center;
    }

    .sb-public-provider-stats {
        justify-content: center;
    }

    .sb-public-provider-actions {
        justify-content: center;
    }

}


/* Mobile */

@media (max-width: 480px) {

    .sb-public-provider-avatar {
        width: 125px;
        height: 125px;
    }

    .sb-public-provider-name {
        font-size: 1.65rem;
    }

    .sb-public-provider-stat {
        flex: 1 1 calc(50% - 12px);
    }

    .sb-public-provider-actions {
        flex-direction: column;
    }

    .sb-public-provider-actions .btn {
        width: 100%;
    }

}
/* =========================================================
   MARKETPLACE — CLICKABLE PROVIDER NAME
========================================================= */

.sb-dashboard-service-provider {
    position: relative;
    z-index: 20;
}

.sb-dashboard-service-provider a {
    position: relative;
    z-index: 21;

    display: inline-block;

    color: #00674f !important;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    pointer-events: auto !important;
}

.sb-dashboard-service-provider a:hover {
    color: #004f3d !important;
    text-decoration: underline;
}
.sb-dashboard-service-provider {
    position: relative;
    z-index: 20;
}

.sb-provider-profile-link {
    position: relative;
    z-index: 21;

    display: inline-block;

    color: #00674f !important;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    pointer-events: auto !important;
}

.sb-provider-profile-link:hover {
    color: #004f3d !important;
    text-decoration: underline;
}
/* =========================================================
   FIX CLICKABLE PROVIDER LINK ON SERVICE CARDS
========================================================= */

.sb-dashboard-service-card {
    position: relative;
}

.sb-dashboard-service-body {
    position: relative;
    z-index: 2;
}

.sb-dashboard-service-provider {
    position: relative;
    z-index: 50;
}

.sb-provider-profile-link {
    position: relative;
    z-index: 100;

    display: inline-block;

    pointer-events: auto !important;
    cursor: pointer;

    color: #00674f !important;
    font-weight: 700;
    text-decoration: none;
}

.sb-provider-profile-link:hover {
    text-decoration: underline;
}


/* Prevent decorative/card layers from covering links */
.sb-dashboard-service-card::before,
.sb-dashboard-service-card::after,
.sb-dashboard-service-body::before,
.sb-dashboard-service-body::after {
    pointer-events: none !important;
}
/* =========================================================
   HOMEPAGE FEATURED SERVICES
   ========================================================= */

.sb-home-featured-services {
    padding: 50px 0 42px;
    background: #f7f8f7;
}

.sb-home-featured-heading {
    max-width: 650px;
    margin: 0 auto 30px;
    text-align: center;
}

.sb-home-featured-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #065f46;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sb-home-featured-heading h2 {
    margin: 0 0 10px;
    color: #111827;
    font-family: "DM Sans", sans-serif;
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.sb-home-featured-heading p {
    max-width: 600px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}


/* Service card */

.sb-home-service-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(17, 24, 39, 0.06);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.sb-home-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(6, 95, 70, 0.2);
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.1);
}


/* Image */

.sb-home-service-image-wrap {
    width: 100%;
    height: 175px;
    overflow: hidden;
    background: #f3f4f6;
}

.sb-home-service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.sb-home-service-card:hover .sb-home-service-image {
    transform: scale(1.03);
}


/* Card body */

.sb-home-service-card-body {
    padding: 18px;
}

.sb-home-service-category {
    display: inline-block;
    margin-bottom: 9px;
    color: #047857;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sb-home-service-card h3 {
    margin: 0 0 13px;
    color: #111827;
    font-family: "DM Sans", sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.4;
}


/* Provider + rating */

.sb-home-service-provider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    color: #6b7280;
    font-size: 0.9rem;
}

.sb-home-service-rating {
    flex-shrink: 0;
    color: #92400e;
    font-weight: 700;
}


/* Price + button */

.sb-home-service-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid #f0f1f3;
}

.sb-home-service-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-home-service-price small {
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 600;
}

.sb-home-service-price strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.sb-home-service-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 17px;
    color: #ffffff;
    background: #065f46;
    border: 1px solid #065f46;
    border-radius: 10px;
    font-size: 0.87rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.sb-home-service-view-btn:hover {
    color: #ffffff;
    background: #064e3b;
    border-color: #064e3b;
    transform: translateY(-1px);
}


/* View all */

.sb-home-featured-all {
    margin-top: 18px;
    margin-bottom: 0;
    text-align: center;
}

.sb-home-featured-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 11px 24px;
    color: #065f46;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 11px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.sb-home-featured-all-btn:hover {
    color: #064e3b;
    background: #f8faf9;
    border-color: #065f46;
}


/* Empty state */

.sb-home-featured-empty {
    max-width: 650px;
    margin: 0 auto;
    padding: 35px;
    text-align: center;
    background: #f8faf9;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.sb-home-featured-empty p {
    margin: 0;
    color: #6b7280;
}


/* Mobile */

@media (max-width: 767.98px) {

    .sb-home-featured-services {
        padding: 36px 0 30px;
    }

    .sb-home-featured-heading {
        margin-bottom: 22px;
        padding: 0 8px;
        text-align: center;
    }

    .sb-home-featured-heading h2 {
        font-size: 27px;
    }

    .sb-home-featured-heading p {
        margin: 0;
        font-size: 13px;
        line-height: 1.55;
    }

    .sb-home-service-image-wrap {
        height: 160px;
    }

    .sb-home-service-card-body {
        padding: 16px;
    }

    .sb-home-service-bottom {
        align-items: center;
    }

}

}
.sb-language-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    font-size: 14px;
    font-weight: 700;
}

.sb-language-switch a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sb-language-switch a:hover,
.sb-language-switch a.active {
    color: #00674f;
}

.sb-language-switch span {
    color: #cbd5e1;
}
/* =========================================================
   SERVICEBERSAMA — MOBILE FIRST NAVIGATION
   ========================================================= */

@media (max-width: 991.98px) {

    .sb-main-navbar {
        min-height: 68px;
        padding: 10px 0;
    }

    .sb-main-navbar .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sb-navbar-logo {
        width: 210px;
        max-width: 54vw;
        height: auto;
    }

    .sb-navbar-toggler {
        padding: 7px 9px;
        border: 1px solid #dfe8e3;
        border-radius: 10px;
        box-shadow: none !important;
    }

    #mainNav {
        margin-top: 10px;
        padding: 12px 0 4px;
        border-top: 1px solid #edf2ef;
    }

    .sb-main-menu {
        width: 100%;
        margin: 0 !important;
        padding: 0;
    }

    .sb-main-menu .nav-item {
        width: 100%;
    }

    .sb-main-menu .nav-link {
        width: 100%;
        margin: 0 !important;
        padding: 12px 4px !important;
        font-size: 16px;
        text-align: left;
    }

    .sb-main-menu .nav-link::after {
        display: none !important;
    }

    .sb-navbar-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px solid #edf2ef;
    }

    .sb-language-switch {
        justify-content: center;
        width: 100%;
        margin: 0 0 3px;
        padding: 8px 0;
        font-size: 15px;
    }

    .sb-nav-login-btn,
    .sb-nav-signup-btn,
    .sb-nav-dashboard-btn,
    .sb-nav-logout-btn {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sb-navbar-user {
        width: 100%;
        max-width: none;
        padding: 5px 0;
        text-align: center;
    }
}
/* =========================================================
   SERVICEBERSAMA — MOBILE SERVICE CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    .sb-home-featured-services {
        padding: 36px 0 30px;
    }

    .sb-home-featured-heading {
        margin-bottom: 24px;
        padding: 0 8px;
        text-align: left;
    }

    .sb-home-featured-heading h2 {
        font-size: 28px;
        line-height: 1.15;
        margin-bottom: 8px;
    }

    .sb-home-featured-heading p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .sb-home-service-card {
        border-radius: 16px;
        overflow: hidden;
    }

    .sb-home-service-image {
        width: 100%;
        height: 190px;
        object-fit: cover;
    }

    .sb-home-service-card-body {
        padding: 16px;
    }

    .sb-home-service-card h3 {
        font-size: 19px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .sb-home-service-provider {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
        font-size: 14px;
    }

    .sb-home-service-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .sb-home-service-price {
        min-width: 0;
    }

    .sb-home-service-price small {
        display: block;
        font-size: 12px;
    }

    .sb-home-service-price strong {
        font-size: 16px;
    }

    .sb-home-service-view-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        border-radius: 10px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
    }

    .sb-home-featured-all-btn {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* =========================================================
   SERVICEBERSAMA — MOBILE SERVICES PAGE
   ========================================================= */

@media (max-width: 767.98px) {

    .services-page .container,
    .sb-services-page .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .listing-card,
    .service-card {
        border-radius: 16px;
        padding: 14px;
        margin-bottom: 14px;
    }

    .service-image-wrap {
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .service-card-image {
        height: 180px;
        border-radius: 14px;
    }

    .listing-title,
    .listing-card h5 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .provider-inline {
        margin: 10px 0;
        gap: 10px;
    }

    .provider-avatar-sm {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        flex: 0 0 42px;
    }

    .listing-description-two-lines {
        font-size: 14px;
        line-height: 1.5;
    }

    .listing-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
        margin-top: 14px;
    }

    .listing-footer .price {
        width: 100%;
        font-size: 17px;
    }

    .listing-footer .btn {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 700;
    }
}
/* =========================================================
   SERVICEBERSAMA — MOBILE BOOKING MODAL
   ========================================================= */

@media (max-width: 767.98px) {

    #hireModal .modal-dialog,
    #bookingModal .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
    }

    #hireModal .modal-content,
    #bookingModal .modal-content {
        min-height: 100vh;
        border-radius: 0;
        border: 0;
    }

    #hireModal .modal-header,
    #bookingModal .modal-header {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 16px;
        background: #ffffff;
        border-bottom: 1px solid #edf2ef;
    }

    #hireModal .modal-body,
    #bookingModal .modal-body {
        padding: 18px 16px 110px;
    }

    #hireModal .form-label,
    #bookingModal .form-label {
        margin-bottom: 7px;
        font-size: 14px;
        font-weight: 700;
    }

    #hireModal .form-control,
    #hireModal .form-select,
    #bookingModal .form-control,
    #bookingModal .form-select {
        min-height: 50px;
        border-radius: 11px;
        font-size: 16px;
    }

    #hireModal textarea.form-control,
    #bookingModal textarea.form-control {
        min-height: 105px;
    }

    #hireModal .modal-footer,
    #bookingModal .modal-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6;
        padding: 12px 16px;
        background: rgba(255,255,255,.98);
        border-top: 1px solid #edf2ef;
    }

    #hireModal .modal-footer .btn-primary,
    #bookingModal .modal-footer .btn-primary {
        width: 100%;
        min-height: 52px;
        border-radius: 11px;
        font-size: 16px;
        font-weight: 700;
    }
}
/* =========================================================
   SERVICEBERSAMA — CUSTOMER MOBILE BOTTOM NAV
   ========================================================= */

.sb-customer-mobile-nav {
    display: none;
}

@media (max-width: 767.98px) {

    .sb-customer-dashboard {
        padding-bottom: 82px;
    }

    .sb-customer-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;

        display: grid;
        grid-template-columns: repeat(3, 1fr);

        min-height: 68px;
        padding:
            6px
            8px
            calc(6px + env(safe-area-inset-bottom));

        background: rgba(255,255,255,.98);
        border-top: 1px solid #e5ebe8;
        box-shadow: 0 -8px 24px rgba(15,23,42,.07);
    }

    .sb-customer-mobile-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        min-height: 54px;

        color: #69756f;
        text-decoration: none;

        font-size: 11px;
        font-weight: 700;
    }

    .sb-customer-mobile-nav a.active {
        color: #00674f;
    }

    .sb-mobile-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 27px;
        height: 27px;

        font-size: 20px;
        line-height: 1;
    }

}
/* =========================================================
   SERVICEBERSAMA — PROVIDER MOBILE REQUEST CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    .sb-provider-dashboard #providerIncomingContainer .table-responsive {
        overflow: visible;
    }

    .sb-provider-dashboard #providerIncomingContainer table {
        border: 0;
    }

    .sb-provider-dashboard #providerIncomingContainer thead {
        display: none;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody,
    .sb-provider-dashboard #providerIncomingContainer tr,
    .sb-provider-dashboard #providerIncomingContainer td {
        display: block;
        width: 100%;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody tr {
        margin-bottom: 14px;
        padding: 15px;
        background: #ffffff;
        border: 1px solid #e4ebe7;
        border-radius: 15px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    }

    .sb-provider-dashboard #providerIncomingContainer tbody td {
        padding: 6px 0;
        border: 0;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody td:first-child {
        display: none;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody td:nth-child(2) {
        padding-top: 0;
        font-size: 16px;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody td:nth-child(3) {
        margin-top: 5px;
        color: #66736d;
        font-size: 14px;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody td:nth-child(4) {
        margin-top: 8px;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody td:last-child {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #edf1ef;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody td:last-child .d-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        width: 100%;
    }

    .sb-provider-dashboard #providerIncomingContainer tbody td:last-child .btn {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }
}
/* =========================================================
   SERVICEBERSAMA — PROVIDER MOBILE BOTTOM NAV
   ========================================================= */

.sb-provider-mobile-nav {
    display: none;
}

@media (max-width: 767.98px) {

    .sb-provider-dashboard {
        padding-bottom: 82px;
    }

    .sb-provider-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;

        display: grid;
        grid-template-columns: repeat(3, 1fr);

        min-height: 68px;

        padding:
            6px
            8px
            calc(6px + env(safe-area-inset-bottom));

        background: rgba(255,255,255,.98);
        border-top: 1px solid #e5ebe8;
        box-shadow: 0 -8px 24px rgba(15,23,42,.07);
    }

    .sb-provider-mobile-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        min-height: 54px;

        color: #69756f;
        text-decoration: none;

        font-size: 11px;
        font-weight: 700;
    }

    .sb-provider-mobile-nav a.active {
        color: #00674f;
    }

    .sb-provider-mobile-nav .sb-mobile-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 27px;
        height: 27px;

        font-size: 20px;
        line-height: 1;
    }
}
/* =========================================================
   SERVICEBERSAMA LANGUAGE ENTRANCE
========================================================= */

.sb-language-entrance {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 30px;

    background: #ffffff;

    font-family: "DM Sans", sans-serif;

    animation: sbEntranceAppear 0.6s ease both;
}

.sb-language-entrance-inner {
    width: 100%;
    max-width: 560px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.sb-language-entrance-logo {
    display: block;

    width: min(310px, 78vw);
    height: auto;

    margin-bottom: 56px;

    opacity: 0;
    transform: translateY(12px) scale(0.96);

    animation:
        sbEntranceLogo 1s cubic-bezier(.22,.75,.25,1)
        0.15s forwards;
}

.sb-language-entrance-options {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    opacity: 0;
    transform: translateY(16px);

    animation:
        sbEntranceLanguages 0.8s ease
        0.75s forwards;
}

.sb-language-entrance-option {
    min-width: 145px;

    padding: 14px 18px;

    color: #111111;
    background: transparent;

    border: 1px solid transparent;
    border-radius: 12px;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.sb-language-entrance-option strong {
    display: block;

    color: inherit;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.sb-language-entrance-option span {
    display: block;

    margin-top: 4px;

    color: #8a9490;

    font-size: 11px;
    font-weight: 500;
}

.sb-language-entrance-option:hover {
    color: #065f46;

    background: #f2faf7;
    border-color: #cfe5dc;

    transform: translateY(-3px);
}

.sb-language-entrance.is-leaving {
    pointer-events: none;

    animation:
        sbEntranceLeave 0.45s ease forwards;
}


/* Entrance animations */

@keyframes sbEntranceAppear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sbEntranceLogo {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

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

@keyframes sbEntranceLanguages {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@keyframes sbEntranceLeave {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.015);
        visibility: hidden;
    }
}


/* Mobile */

@media (max-width: 575.98px) {

    .sb-language-entrance {
        padding: 24px;
    }

    .sb-language-entrance-logo {
        width: min(255px, 76vw);
        margin-bottom: 45px;
    }

    .sb-language-entrance-options {
        flex-direction: column;
        gap: 5px;
    }

    .sb-language-entrance-option {
        width: 100%;
        max-width: 280px;
        min-width: 0;

        padding: 13px 16px;
    }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .sb-language-entrance,
    .sb-language-entrance-logo,
    .sb-language-entrance-options {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}
/* =========================================================
   HOMEPAGE SERVICE CATEGORIES
========================================================= */

.sb-home-categories {
    padding: 50px 0 36px;
}

.sb-home-categories-heading {
    max-width: 650px;
    margin: 0 auto 30px;
}

.sb-home-categories-heading h2 {
    font-size: clamp(27px, 3vw, 36px);
}

.sb-home-categories-heading p {
    font-size: 14px;
}

.sb-home-category-grid {
    gap: 14px;
}

.sb-home-category-card {
    min-height: 150px;
    padding: 20px;
    border-radius: 16px;
}

.sb-home-category-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 21px;
}

.sb-home-category-card h3 {
    margin-bottom: 6px;
    font-size: 17px;
}

.sb-home-category-card p {
    font-size: 13px;
    line-height: 1.55;
}

.sb-home-categories-all {
    margin-top: 26px;
}

@media (max-width: 575.98px) {
    .sb-home-categories {
        padding: 36px 0 28px;
    }

    .sb-home-categories-heading {
        margin-bottom: 22px;
    }

    .sb-home-category-card {
        min-height: 0;
        padding: 16px;
    }
}
/* =========================================================
   HOMEPAGE HOW IT WORKS — COMPACT CARDS
========================================================= */

.sb-how-section {
    padding: 58px 0;
    background: #f7f8f7;
    font-family: "DM Sans", sans-serif;
}

.sb-how-heading {
    max-width: 650px;
    margin: 0 auto 30px;
    text-align: center;
}

.sb-how-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #065f46;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sb-how-heading h2 {
    margin: 0 0 10px;
    color: #111111;
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.sb-how-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}


/* Compact cards */

.sb-how-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 15px;

    min-height: 145px;
    padding: 20px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;

    box-shadow: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sb-how-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 95, 70, 0.28);
    box-shadow: 0 10px 24px rgba(6, 78, 59, 0.07);
}


/* Number icon */

.sb-how-number {
    grid-column: 1;
    grid-row: 1 / span 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0;

    color: #065f46;
    background: #ecfdf5;

    border-radius: 12px;

    font-size: 12px;
    font-weight: 800;
}


/* Title */

.sb-how-card h3 {
    grid-column: 2;

    align-self: end;

    margin: 2px 0 6px;

    color: #111111;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}


/* Description */

.sb-how-card p {
    grid-column: 2;

    align-self: start;

    margin: 0;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.55;
}


/* Tablet */

@media (max-width: 991.98px) {

    .sb-how-section {
        padding: 52px 0;
    }

    .sb-how-card {
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 13px;

        min-height: 135px;
        padding: 18px;
    }

    .sb-how-number {
        width: 42px;
        height: 42px;
    }

}


/* Mobile */

@media (max-width: 767.98px) {

    .sb-how-section {
        padding: 42px 0;
    }

    .sb-how-heading {
        margin-bottom: 22px;
        padding: 0 8px;
    }

    .sb-how-heading h2 {
        font-size: 27px;
    }

    .sb-how-heading p {
        font-size: 13px;
    }

    .sb-how-card {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 13px;

        min-height: 0;
        padding: 16px;

        border-radius: 14px;
    }

    .sb-how-number {
        width: 40px;
        height: 40px;

        border-radius: 10px;

        font-size: 11px;
    }

    .sb-how-card h3 {
        margin-bottom: 4px;
        font-size: 16px;
    }

    .sb-how-card p {
        font-size: 12.5px;
        line-height: 1.5;
    }

}
/* =========================================================
   EXPLORE SERVICES — COMPACT CARD FIX
========================================================= */

.sb-home-categories {
    padding: 58px 0;
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
}

.sb-home-categories-heading {
    max-width: 650px;
    margin: 0 auto 30px;
    text-align: center;
}

.sb-home-categories-eyebrow {
    display: inline-block;
    margin-bottom: 8px;

    color: #065f46;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sb-home-categories-heading h2 {
    margin: 0 0 10px;

    color: #111111;

    font-size: clamp(27px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.sb-home-categories-heading p {
    margin: 0;

    color: #6b7280;

    font-size: 14px;
    line-height: 1.6;
}


/* GRID */

.sb-home-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}


/* CARD */

.sb-home-category-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;

    column-gap: 15px;

    min-height: 140px;
    padding: 20px;

    color: #111111 !important;
    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sb-home-category-card:hover {
    color: #111111 !important;

    transform: translateY(-3px);

    border-color: rgba(6, 95, 70, 0.28);

    box-shadow:
        0 10px 24px rgba(6, 78, 59, 0.07);
}


/* ICON */

.sb-home-category-icon {
    grid-column: 1;
    grid-row: 1 / span 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0;

    background: #ecfdf5;
    border-radius: 12px;

    font-size: 21px;
    line-height: 1;
}


/* TITLE */

.sb-home-category-card h3 {
    grid-column: 2;

    align-self: end;

    margin: 2px 0 6px;

    color: #111111;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;
}


/* DESCRIPTION */

.sb-home-category-card p {
    grid-column: 2;

    align-self: start;

    margin: 0;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.55;

    text-decoration: none;
}


/* BROWSE ALL */

.sb-home-categories-all {
    margin-top: 26px;
    text-align: center;
}

.sb-home-categories-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 9px 18px;

    color: #065f46;
    background: #ffffff;

    border: 1px solid #065f46;
    border-radius: 9px;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.sb-home-categories-all-btn:hover {
    color: #ffffff;
    background: #065f46;
}


/* TABLET */

@media (max-width: 991.98px) {

    .sb-home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 575.98px) {

    .sb-home-categories {
        padding: 36px 0 28px;
    }

    .sb-home-categories-heading {
        margin-bottom: 22px;
        padding: 0 8px;
    }

    .sb-home-categories-heading h2 {
        font-size: 27px;
    }

    .sb-home-categories-heading p {
        font-size: 13px;
        line-height: 1.55;
    }

    .sb-home-category-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sb-home-category-card {
        grid-template-columns: 40px minmax(0, 1fr);

        column-gap: 13px;

        min-height: 0;
        padding: 16px;

        border-radius: 14px;
    }

    .sb-home-category-icon {
        width: 40px;
        height: 40px;

        border-radius: 10px;

        font-size: 18px;
    }

    .sb-home-category-card h3 {
        margin-bottom: 4px;
        font-size: 16px;
    }

    .sb-home-category-card p {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .sb-home-categories-all {
        margin-top: 20px;
    }

}
/* =========================================================
   WHY SERVICEBERSAMA — MATCH HOW IT WORKS
========================================================= */

.sb-why-section {
    padding: 42px 0 50px;
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
}

.sb-why-heading {
    max-width: 650px;
    margin: 0 auto 30px;
    text-align: center;
}

.sb-why-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #065f46;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sb-why-heading h2 {
    margin: 0 0 10px;
    color: #111111;
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.sb-why-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}


/* Cards */

.sb-why-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;

    column-gap: 15px;

    min-height: 145px;
    padding: 20px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;

    box-shadow: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sb-why-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 95, 70, 0.28);
    box-shadow: 0 10px 24px rgba(6, 78, 59, 0.07);
}


/* Icon */

.sb-why-icon {
    grid-column: 1;
    grid-row: 1 / span 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0;

    color: #065f46;
    background: #ecfdf5;

    border-radius: 12px;
}

.sb-why-icon svg {
    width: 23px;
    height: 23px;
}


/* Title */

.sb-why-card h3 {
    grid-column: 2;

    align-self: end;

    margin: 2px 0 6px;

    color: #111111;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}


/* Description */

.sb-why-card p {
    grid-column: 2;

    align-self: start;

    margin: 0;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.55;
}


/* Mobile */

@media (max-width: 767.98px) {

    .sb-why-section {
        padding: 42px 0;
    }

    .sb-why-heading {
        margin-bottom: 22px;
        padding: 0 8px;
    }

    .sb-why-heading h2 {
        font-size: 27px;
    }

    .sb-why-heading p {
        font-size: 13px;
    }

    .sb-why-card {
        grid-template-columns: 40px minmax(0, 1fr);

        column-gap: 13px;

        min-height: 0;
        padding: 16px;

        border-radius: 14px;
    }

    .sb-why-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .sb-why-icon svg {
        width: 20px;
        height: 20px;
    }

    .sb-why-card h3 {
        margin-bottom: 4px;
        font-size: 16px;
    }

    .sb-why-card p {
        font-size: 12.5px;
        line-height: 1.5;
    }

}
/* =========================================================
   NAVBAR BRAND — MATCH FOOTER LOGO STYLE
========================================================= */

.sb-navbar-brandmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 0;

    text-decoration: none;
}

.sb-navbar-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;
    width: 38px;
    height: 38px;

    color: #ffffff;
    background: #065f46;

    border-radius: 50%;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
}

.sb-navbar-brand-name {
    color: #111827;

    font-family: "DM Sans", sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.7px;
    white-space: nowrap;
}

.sb-navbar-brand-name > span {
    color: #059669;
}


/* Hover */

.sb-navbar-brandmark:hover {
    text-decoration: none;
}

.sb-navbar-brandmark:hover .sb-navbar-brand-icon {
    background: #047857;
}

.sb-navbar-brandmark:hover .sb-navbar-brand-name {
    color: #111827;
}


/* Tablet */

@media (max-width: 991.98px) {

    .sb-navbar-brand-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;

        font-size: 15px;
    }

    .sb-navbar-brand-name {
        font-size: 19px;
    }

}


/* Mobile */

@media (max-width: 575.98px) {

    .sb-navbar-brandmark {
        gap: 8px;
    }

    .sb-navbar-brand-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;

        font-size: 13px;
    }

    .sb-navbar-brand-name {
        font-size: 17px;
        letter-spacing: -0.5px;
    }

}
/* =========================================================
   MOBILE HERO — COMPACT HEIGHT
========================================================= */

@media (max-width: 575.98px) {

    .sb-home-hero {
        min-height: auto;
        padding: 38px 0 42px;
    }

    .sb-home-hero-content {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Trust badge */

    .sb-home-trust-badge {
        margin-bottom: 24px;
        padding: 9px 14px;
        font-size: 11px;
        letter-spacing: 0.09em;
    }

    /* Main title */

    .sb-home-hero-title {
        margin-bottom: 20px;
        font-size: clamp(40px, 11vw, 52px);
        line-height: 1.02;
        letter-spacing: -0.045em;
    }

    .sb-home-hero-title span {
        display: block;
    }

    /* Description */

    .sb-home-hero-description {
        max-width: 92%;
        margin: 0 auto 28px;

        font-size: 16px;
        line-height: 1.55;
    }

    /* Search container */

    .sb-home-service-selector {
        margin-top: 0;
        padding: 10px;

        border-radius: 20px;
    }

    .sb-home-select-wrap {
        min-height: 64px;
    }

    .sb-home-service-select {
        min-height: 64px;
        padding-top: 12px;
        padding-bottom: 12px;

        font-size: 16px;
    }

    .sb-home-service-button {
        min-height: 58px;
        margin-top: 8px;

        font-size: 16px;
    }
.sb-home-trust-badge {
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
}
}
/* =========================================================
   CUSTOMER BOOKING TIMING
========================================================= */

.sb-booking-timing-options {
    display: grid;
    gap: 9px;
}

.sb-booking-timing-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 13px 14px;

    background: #ffffff;

    border: 1px solid #dfe5e2;
    border-radius: 12px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.sb-booking-timing-option:hover {
    border-color: rgba(6, 95, 70, 0.4);
    background: #f8fcfa;
}

.sb-booking-timing-option input {
    margin-top: 4px;

    accent-color: #065f46;
}

.sb-booking-timing-option span {
    display: block;
}

.sb-booking-timing-option strong {
    display: block;

    color: #111827;

    font-size: 14px;
    font-weight: 700;
}

.sb-booking-timing-option small {
    display: block;

    margin-top: 2px;

    color: #6b7280;

    font-size: 12px;
    line-height: 1.4;
}
/* =========================================================
   SHARED DASHBOARD LOGO
   Customer + Provider + Admin
========================================================= */

.sb-dashboard-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.sb-dashboard-logo {
    display: block;
    width: auto;
    height: 52px;
    max-width: 240px;
    object-fit: contain;
}


/* Tablet */

@media (max-width: 991.98px) {

    .sb-dashboard-logo {
        height: 48px;
        max-width: 220px;
    }

}


/* Phone */

@media (max-width: 575.98px) {

    .sb-dashboard-logo {
        height: 44px;
        max-width: 200px;
    }

}
/* =========================================================
   SERVICEBERSAMA NEW DASHBOARD LOGO
========================================================= */

.sb-dashboard-brandmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    white-space: nowrap;
}

.sb-dashboard-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    background: #08785f;
    color: #ffffff;

    border-radius: 50%;

    font-family: "DM Sans", sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.sb-dashboard-brand-name {
    color: #111827;

    font-family: "DM Sans", sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.7px;
}

.sb-dashboard-brand-name > span {
    color: #10a77a;
}

.sb-dashboard-brandmark:hover,
.sb-dashboard-brandmark:focus {
    text-decoration: none;
}

.sb-dashboard-brandmark:hover .sb-dashboard-brand-name {
    color: #111827;
}


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

@media (max-width: 575.98px) {

    .sb-dashboard-brandmark {
        gap: 8px;
    }

    .sb-dashboard-brand-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;

        font-size: 15px;
    }

    .sb-dashboard-brand-name {
        font-size: 19px;
        letter-spacing: -0.5px;
    }
}
/* =========================================================
   CUSTOMER DASHBOARD NAVBAR — FINAL
   Mobile collapse pushes page content downward
========================================================= */

.sb-customer-dashboard .sb-dashboard-navbar {
    position: relative;
    top: auto;
    z-index: auto;

    width: 100%;

    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;

    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* Desktop */

@media (min-width: 992px) {

    .sb-customer-dashboard .sb-dashboard-navbar {
        min-height: 76px;
        padding: 0;
    }

    .sb-customer-dashboard
    .sb-dashboard-navbar
    > .container {
        min-height: 76px;
    }

}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .sb-customer-dashboard .sb-dashboard-navbar {
        display: block;

        min-height: 68px;
        height: auto !important;

        padding: 11px 0;
        overflow: visible;
    }


    /*
     * Critical:
     * container MUST be allowed to grow vertically.
     */

    .sb-customer-dashboard
    .sb-dashboard-navbar
    > .container {

        display: flex;
        flex-wrap: wrap;
        align-items: center;

        min-height: 68px;
        height: auto !important;

        overflow: visible;
    }


    /*
     * Critical:
     * Bootstrap collapse stays in normal document flow.
     * No absolute/fixed positioning.
     */

    .sb-customer-dashboard
    .sb-dashboard-navbar
    .navbar-collapse {

        position: static !important;
        inset: auto !important;

        flex-basis: 100%;
        flex-grow: 1;

        width: 100%;
        height: auto;

        margin-top: 14px;
        padding: 15px;

        background: #ffffff;

        border-top: 1px solid #e5e7eb;

        transform: none !important;

        z-index: auto !important;
    }


    /*
     * Bootstrap animation still works,
     * but the open menu occupies real page height.
     */

    .sb-customer-dashboard
    .sb-dashboard-navbar
    .navbar-collapse.show {

        display: block;
        height: auto !important;
    }


    .sb-customer-dashboard
    .sb-dashboard-navbar
    .navbar-collapsing {

        position: static !important;

        width: 100%;

        overflow: hidden;

        transition: height 0.25s ease;
    }


    /* Menu */

    .sb-customer-dashboard .sb-dashboard-menu {
        width: 100%;

        margin: 0 !important;
        padding: 0;

        gap: 0;
    }


    .sb-customer-dashboard
    .sb-dashboard-menu
    .nav-item {

        width: 100%;
    }


    .sb-customer-dashboard
    .sb-dashboard-menu
    .nav-link {

        display: block;

        width: 100%;

        margin: 0 !important;
        padding: 13px 4px !important;

        color: #111827;
        background: transparent;

        border-bottom: 1px solid #f1f1f1;
        border-radius: 0;

        font-size: 15px;
        font-weight: 600;
    }


    .sb-customer-dashboard
    .sb-dashboard-menu
    .nav-link.active {

        color: #065f46;
    }


    .sb-customer-dashboard
    .sb-dashboard-menu
    .nav-link::after {

        display: none !important;
    }


    /* Customer / logout */

    .sb-customer-dashboard
    .sb-dashboard-user-actions {

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        gap: 10px;

        margin-top: 18px;
    }


    .sb-customer-dashboard
    .sb-dashboard-user {

        width: 100%;

        padding: 8px 4px;
    }


    .sb-customer-dashboard
    .sb-dashboard-logout {

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 42px;

        margin: 0;
    }


    /*
     * Main content needs NO special position.
     * Navbar height naturally pushes it downward.
     */

    .sb-customer-dashboard .sb-dashboard-main {

        position: static !important;

        z-index: auto !important;

        padding-top: 28px;
    }

}


/* Phone */

@media (max-width: 575.98px) {

    .sb-customer-dashboard .sb-dashboard-navbar {
        min-height: 64px;
    }

    .sb-customer-dashboard
    .sb-dashboard-navbar
    > .container {

        min-height: 64px;
    }

}

    /* =========================
       LOGO — UPPER AREA
    ========================= */

    .sb-language-entrance-logo {
    position: static !important;

    display: block;

    width: min(300px, 84vw);
    max-width: 100%;
    height: auto;

    margin: 70px auto 0;

    transform: none !important;
}


    /* =========================
       LANGUAGES — CENTER
    ========================= */

    .sb-language-entrance-options {
        position: static !important;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 340px;

       margin: 0 auto;

        /*
         * Takes remaining screen space,
         * automatically centering language choices.
         */
        flex: 1;

        gap: 12px;

        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;

        text-align: center;
    }

    .sb-language-entrance-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;

        margin: 0;
        padding: 4px 0;

        color: #111827;

        text-align: center;
        text-decoration: none;
    }


    .sb-language-entrance-option strong {
        display: block;

        font-size: 17px;
        font-weight: 700;
        line-height: 1.25;
    }


    .sb-language-entrance-option span {
        display: block;

        margin-top: 4px;

        color: #98a19d;

        font-size: 13px;
        line-height: 1.25;
    }

}
/* =========================================================
   SERVICEBERSAMA LANGUAGE ENTRANCE — FINAL
========================================================= */

.sb-language-entrance {
    position: fixed;
    inset: 0;
    z-index: 9999;

    width: 100%;
    height: 100dvh;

    background: #ffffff;

    overflow: hidden;
}


.sb-language-entrance-inner {
    display: grid;
    grid-template-rows: auto 1fr;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding: 40px 24px 50px;
}


/* =========================================================
   LOGO
========================================================= */

.sb-language-entrance-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    justify-self: center;

    gap: 10px;

    margin-top: 20px;

    white-space: nowrap;
}


.sb-language-entrance-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    flex: 0 0 52px;

    border-radius: 50%;

    background: #06785f;
    color: #ffffff;

    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}


.sb-language-entrance-brand-name {
    color: #10212a;

    font-family: "DM Sans", sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -1px;
}


.sb-language-entrance-brand-name > span {
    color: #07865f;
}


/* =========================================================
   LANGUAGE AREA
========================================================= */

.sb-language-entrance-language-area {
    align-self: center;
    justify-self: center;

    width: 100%;
    max-width: 340px;

    text-align: center;

    transform: translateY(-10px);
}


.sb-language-entrance-title {
    margin: 0 0 24px;

    color: #111827;

    font-family: "DM Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}


.sb-language-entrance-options {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 10px;

    margin: 0;
    padding: 0;
}


.sb-language-entrance-option {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 52px;

    padding: 11px 16px;

    color: #111827;
    background: transparent;

    border: 1px solid transparent;
    border-radius: 12px;

    font-family: "DM Sans", sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.sb-language-entrance-option:hover {
    color: #065f46;

    background: #f0fdf7;
    border-color: #d1fae5;

    transform: translateY(-1px);
}


/* Existing transition when language is selected */

.sb-language-entrance.is-leaving {
    opacity: 0;

    transition: opacity 0.42s ease;
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 575.98px) {

    .sb-language-entrance-inner {
        padding:
            max(24px, env(safe-area-inset-top))
            22px
            max(70px, env(safe-area-inset-bottom));
    }


    /* Logo near top */

    .sb-language-entrance-brand {
        margin-top: 34px;

        gap: 8px;
    }


    .sb-language-entrance-brand-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;

        font-size: 16px;
    }


    .sb-language-entrance-brand-name {
        font-size: 22px;

        letter-spacing: -0.7px;
    }


    /* Language selector centered in remaining screen */

    .sb-language-entrance-language-area {
        align-self: center;

        max-width: 300px;

        transform: translateY(-20px);
    }


    .sb-language-entrance-title {
        margin-bottom: 22px;

        font-size: 20px;
    }


    .sb-language-entrance-options {
        gap: 8px;
    }


    .sb-language-entrance-option {
        min-height: 50px;

        padding: 10px 14px;

        font-size: 17px;
    }

}
@media (max-width: 575.98px) {

    .sb-language-entrance-inner {
        justify-content: flex-start;
    }

    .sb-language-entrance-logo {
        margin: 55px auto 0 !important;
    }

    .sb-language-entrance-title {
        margin: 90px 0 24px !important;
        font-size: 21px;
        font-weight: 700;
        text-align: center;
    }

    .sb-language-entrance-options {
        margin: 0 auto !important;
        gap: 12px !important;
    }
}
/* =========================================================
   LANGUAGE ENTRANCE — FINAL POSITION TWEAK
========================================================= */

@media (max-width: 575.98px) {

    .sb-language-entrance-inner {
        display: grid !important;
        grid-template-rows: auto 1fr !important;

        min-height: 100svh !important;

        padding:
            max(28px, env(safe-area-inset-top))
            22px
            max(70px, env(safe-area-inset-bottom)) !important;
    }

    .sb-language-entrance-logo {
        width: min(300px, 82vw) !important;
        margin: 35px auto 0 !important;
    }

    .sb-language-entrance-language-area {
        align-self: center;
        justify-self: center;

        width: 100%;
        max-width: 300px;

        text-align: center;
    }

    .sb-language-entrance-title {
        margin: 0 0 22px !important;
        font-size: 21px;
    }

    .sb-language-entrance-options {
        margin: 0 auto !important;
        gap: 10px !important;
    }
}
/* =========================================================
   LANGUAGE ENTRANCE — PHONE CLEAN FIX
========================================================= */

@media (max-width: 575.98px) {

    .sb-language-entrance {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;

        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;

        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;

        padding: 0 22px !important;

        overflow: hidden !important;

        background: #ffffff !important;
    }

    .sb-language-entrance-inner {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 420px !important;
        height: 100% !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        text-align: center;
    }

    /* Logo near the upper part */

    .sb-language-entrance-logo {
        position: absolute !important;

        top: 12% !important;
        left: 50% !important;

        width: min(300px, 82vw) !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;
    }

    /* Whole language group starts around screen centre */

    .sb-language-entrance-title {
        position: absolute !important;

        top: 48% !important;
        left: 50% !important;

        width: 100% !important;

        margin: 0 !important;

        transform: translate(-50%, -50%) !important;

        color: #111827;

        font-size: 21px !important;
        font-weight: 700;
        line-height: 1.25;

        text-align: center;
    }

    .sb-language-entrance-options {
        position: absolute !important;

        top: 54% !important;
        left: 50% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 300px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 6px !important;

        opacity: 1 !important;

        transform: translateX(-50%) !important;

        animation: none !important;
    }

    .sb-language-entrance-option {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;

        margin: 0 !important;
        padding: 10px 14px !important;

        color: #111827;

        text-align: center;
        text-decoration: none;
    }

    .sb-language-entrance-option strong {
        font-size: 17px !important;
        font-weight: 700;
    }
}
/* =========================================================
   LANGUAGE ENTRANCE — IOS FULL SCREEN FIX
========================================================= */

@media (max-width: 575.98px) {

    .sb-language-entrance {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: auto !important;

        /* IMPORTANT:
           don't use 100dvh / 100svh here */
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 22px !important;

        overflow: hidden !important;

        background: #ffffff !important;

        z-index: 999999 !important;
    }

    .sb-language-entrance-inner {
        position: relative !important;

        width: 100% !important;
        max-width: 420px !important;

        height: 100% !important;
        min-height: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

}
/* =========================================================
   SERVICEBERSAMA LANGUAGE ENTRANCE
   PHONE — LOGO TOP + LANGUAGE BOXES
========================================================= */

@media (max-width: 575.98px) {

    /* Full white entrance screen */

    .sb-language-entrance {
        position: fixed !important;
        inset: 0 !important;
        z-index: 999999 !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 100dvh !important;

        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;
    }


    /* Main positioning area */

    .sb-language-entrance-inner {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 24px !important;
    }


    /* =====================================================
       LOGO — TOP OF SCREEN
    ===================================================== */

    .sb-language-entrance-logo {
        position: absolute !important;

        top: 65px !important;
        left: 50% !important;

        display: block !important;

        width: min(300px, 78vw) !important;
        height: auto !important;

        margin: 0 !important;

        opacity: 1 !important;

        transform: translateX(-50%) !important;

        animation: none !important;
    }


    /* =====================================================
       CHOOSE YOUR LANGUAGE — MIDDLE AREA
    ===================================================== */

    .sb-language-entrance-title {
        position: absolute !important;

        top: 43% !important;
        left: 50% !important;

        width: calc(100% - 48px) !important;

        margin: 0 !important;

        color: #111827 !important;

        font-family: "DM Sans", sans-serif;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.25;

        text-align: center;

        transform: translate(-50%, -50%) !important;
    }


    /* =====================================================
       LANGUAGE BOX AREA
    ===================================================== */

    .sb-language-entrance-options {
        position: absolute !important;

        top: 49% !important;
        left: 50% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: calc(100% - 48px) !important;
        max-width: 330px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 12px !important;

        opacity: 1 !important;

        transform: translateX(-50%) !important;

        animation: none !important;
    }


    /* IMPORTANT:
       removes old generated "Choose your language" */

    .sb-language-entrance-options::before {
        display: none !important;
        content: none !important;
    }


    /* Each language = one box */

    .sb-language-entrance-option {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 330px !important;
        min-width: 0 !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 14px 20px !important;

        color: #111827 !important;
        background: #ffffff !important;

        border: 1px solid #dbe4df !important;
        border-radius: 12px !important;

        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04);

        text-align: center !important;
        text-decoration: none !important;

        transform: none !important;
    }


    .sb-language-entrance-option strong {
        display: block !important;

        color: #111827 !important;

        font-size: 17px !important;
        font-weight: 700 !important;
    }


    /* Hide duplicate small labels:
       English / English etc. */

    .sb-language-entrance-option span {
        display: none !important;
    }


    /* Touch / hover */

    .sb-language-entrance-option:hover,
    .sb-language-entrance-option:focus {
        color: #065f46 !important;

        background: #f2faf7 !important;
        border-color: #065f46 !important;

        transform: none !important;
    }

}
/* =========================================================
   SERVICEBERSAMA LANGUAGE ENTRANCE
   DESKTOP ONLY
========================================================= */

@media (min-width: 992px) {

    .sb-language-entrance {
        position: fixed !important;
        inset: 0 !important;
        z-index: 999999 !important;

        width: 100% !important;
        height: 100vh !important;

        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;
    }

    .sb-language-entrance-inner {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Logo */

    .sb-language-entrance-logo {
        position: absolute !important;

        top: 12% !important;
        left: 50% !important;

        width: 380px !important;
        max-width: 42vw !important;
        height: auto !important;

        margin: 0 !important;

        opacity: 1 !important;

        transform: translateX(-50%) !important;

        animation: none !important;
    }


    /* Heading */

    .sb-language-entrance-title {
        position: absolute !important;

        top: 43% !important;
        left: 50% !important;

        width: 100% !important;

        margin: 0 !important;

        color: #111827 !important;

        font-family: "DM Sans", sans-serif;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.2;

        text-align: center;

        transform: translate(-50%, -50%) !important;
    }


    /* Language boxes */

    .sb-language-entrance-options {
        position: absolute !important;

        top: 51% !important;
        left: 50% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 420px !important;
        max-width: 90vw !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 14px !important;

        opacity: 1 !important;

        transform: translateX(-50%) !important;

        animation: none !important;
    }


    .sb-language-entrance-options::before {
        display: none !important;
        content: none !important;
    }


    .sb-language-entrance-option {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 16px 24px !important;

        color: #111827 !important;
        background: #ffffff !important;

        border: 1px solid #dbe4df !important;
        border-radius: 12px !important;

        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);

        text-align: center !important;
        text-decoration: none !important;

        transform: none !important;
    }


    .sb-language-entrance-option strong {
        font-size: 18px !important;
        font-weight: 700 !important;
    }


    .sb-language-entrance-option span {
        display: none !important;
    }


    .sb-language-entrance-option:hover {
        color: #065f46 !important;

        background: #f2faf7 !important;
        border-color: #065f46 !important;
    }
    
}
@media (max-width: 575.98px) {

    #searchProblem::placeholder {
        font-size: 15px;
    }

}
@media (max-width: 575.98px) {

    .sb-featured-section .sb-section-heading {
        text-align: center !important;
        align-items: center !important;
    }

    .sb-featured-section .sb-section-eyebrow,
    .sb-featured-section .sb-section-title,
    .sb-featured-section .sb-section-description {
        text-align: center !important;
    }

}
/* =========================================================
   HOMEPAGE FEATURED SERVICES — MOBILE CENTER HEADING
========================================================= */

@media (max-width: 767.98px) {

    .sb-home-featured-heading {
        text-align: center !important;
    }

    .sb-home-featured-eyebrow {
        display: block;
        width: 100%;
        text-align: center !important;
    }

    .sb-home-featured-heading h2 {
        text-align: center !important;
    }

    .sb-home-featured-heading p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}
/* =========================================================
   FEATURED SERVICES - MOBILE 2-COLUMN CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    .sb-home-featured-services .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .sb-home-service-card {
        border-radius: 16px;
        overflow: hidden;
    }

    .sb-home-service-image-wrap {
        height: 150px;
    }

    .sb-home-service-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sb-home-service-card-body {
        padding: 16px 14px;
    }

    .sb-home-service-category {
        font-size: 11px;
        line-height: 1.3;
    }

    .sb-home-service-card h3 {
        font-size: 17px;
        line-height: 1.25;
        margin-top: 7px;
        margin-bottom: 10px;
    }

    .sb-home-service-provider {
        font-size: 13px;
        gap: 6px;
    }

    .sb-home-service-rating {
        font-size: 13px;
    }

    .sb-home-service-bottom {
        display: block;
        margin-top: 14px;
    }

    .sb-home-service-price {
        margin-bottom: 12px;
    }

    .sb-home-service-price small {
        font-size: 11px;
    }

    .sb-home-service-price strong {
        font-size: 16px;
    }

    .sb-home-service-view-btn {
        display: block;
        width: 100%;
        padding: 10px 8px;
        font-size: 13px;
        text-align: center;
    }

}
/* =========================================================
   HOMEPAGE — FEATURED PROVIDERS
========================================================= */

.sb-home-featured-providers {
    padding: 64px 0;
    background: #f7faf9;
}


.sb-home-provider-heading {
    max-width: 760px;

    margin: 0 auto 34px;

    text-align: center;
}


.sb-home-provider-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #06785f;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.sb-home-provider-heading h2 {
    margin: 0;

    color: #111827;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: -0.035em;
}


.sb-home-provider-heading p {
    max-width: 620px;

    margin: 12px auto 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.65;
}


/* CARD */

.sb-home-provider-card {
    display: flex;
    flex-direction: column;

    height: 100%;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e2e8e5;
    border-radius: 18px;

    box-shadow:
        0 8px 26px rgba(15, 23, 42, 0.045);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.sb-home-provider-card:hover {
    transform: translateY(-3px);

    border-color: rgba(6, 120, 95, 0.28);

    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.08);
}


/* LOGO */

.sb-home-provider-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 90px;
    height: 90px;

    margin: 0 auto 18px;

    overflow: hidden;

    background: #ffffff;

    border: 2px solid #dfe7e3;
    border-radius: 50%;
}


.sb-home-provider-logo {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.sb-home-provider-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #ffffff;
    background: #06785f;

    font-size: 30px;
    font-weight: 800;
}


/* NAME */

.sb-home-provider-name {
    margin: 0 0 7px;

    color: #111827;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;

    text-align: center;
}


/* RATING */

.sb-home-provider-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;

    min-height: 24px;
}


.sb-home-provider-rating-score {
    color: #c65d09;

    font-weight: 700;
}


.sb-home-provider-review-count {
    color: #667085;

    font-size: 13px;
}


.sb-home-provider-new {
    color: #667085;

    font-size: 13px;
    font-weight: 600;
}


/* BADGE */

.sb-home-provider-badges {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 12px;
}


.sb-home-provider-level {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 10px;

    color: #475467;
    background: #f2f4f7;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
}


.sb-home-provider-divider {
    width: 100%;
    height: 1px;

    margin: 17px 0;

    background: #edf0ef;
}


/* POPULAR SERVICE */

.sb-home-provider-popular {
    margin-bottom: 14px;
}


.sb-home-provider-meta-label {
    display: block;

    margin-bottom: 4px;

    color: #06785f;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
}


.sb-home-provider-popular strong {
    display: block;

    color: #111827;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}


/* AREA */

.sb-home-provider-area {
    display: flex;
    align-items: flex-start;

    gap: 6px;

    margin-bottom: 17px;

    color: #667085;

    font-size: 13px;
    line-height: 1.4;
}


/* BUTTON */

.sb-home-provider-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 44px;

    margin-top: auto;

    padding: 10px 14px;

    color: #ffffff;
    background: #06785f;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;
}


.sb-home-provider-view-btn:hover {
    color: #ffffff;
    background: #05664f;
}


/* VIEW ALL */

.sb-home-provider-all {
    margin-top: 28px;

    text-align: center;
}


.sb-home-provider-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 10px 22px;

    color: #06785f;
    background: #ffffff;

    border: 1px solid #06785f;
    border-radius: 10px;

    font-weight: 700;

    text-decoration: none;
}


.sb-home-provider-all-btn:hover {
    color: #ffffff;
    background: #06785f;
}


/* EMPTY */

.sb-home-provider-empty {
    max-width: 680px;

    margin: 0 auto;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e2e8e5;
    border-radius: 16px;

    color: #667085;

    text-align: center;
}
/* =========================================================
   FEATURED PROVIDERS — PHONE
========================================================= */

@media (max-width: 767.98px) {

    .sb-home-featured-providers {
        padding: 46px 0;
    }

    .sb-home-provider-heading {
        margin-bottom: 26px;

        padding: 0 10px;
    }

    .sb-home-provider-heading h2 {
        font-size: 29px;
    }

    .sb-home-provider-heading p {
        font-size: 14px;
    }


    /* Two cards across = four providers in a 2 x 2 grid */

    .sb-home-provider-grid {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }


    .sb-home-provider-card {
        padding: 14px 11px;

        border-radius: 15px;
    }


    .sb-home-provider-logo-wrap {
        width: 64px;
        height: 64px;

        margin-bottom: 11px;
    }


    .sb-home-provider-logo-fallback {
        font-size: 22px;
    }


    .sb-home-provider-name {
        font-size: 15px;
        line-height: 1.25;
    }


    .sb-home-provider-rating {
        gap: 3px;
    }


    .sb-home-provider-rating-score {
        font-size: 13px;
    }


    .sb-home-provider-review-count,
    .sb-home-provider-new {
        font-size: 10px;
    }


    .sb-home-provider-badges {
        margin-top: 8px;
    }


    .sb-home-provider-level {
        padding: 4px 7px;

        font-size: 10px;
    }


    .sb-home-provider-divider {
        margin: 11px 0;
    }


    .sb-home-provider-meta-label {
        font-size: 9px;
    }


    .sb-home-provider-popular {
        margin-bottom: 10px;
    }


    .sb-home-provider-popular strong {
        font-size: 12px;
        line-height: 1.3;
    }


    .sb-home-provider-area {
        gap: 4px;

        margin-bottom: 11px;

        font-size: 10px;
    }


    .sb-home-provider-view-btn {
        min-height: 38px;

        padding: 8px 6px;

        border-radius: 8px;

        font-size: 11px;
    }


    .sb-home-provider-all {
        margin-top: 22px;
    }

}
/* =========================================================
   FEATURED PROVIDER PLACEHOLDER
========================================================= */

.sb-home-provider-placeholder {
    align-items: center;
    justify-content: center;

    min-height: 100%;

    text-align: center;

    border-style: dashed;

    background: rgba(255,255,255,0.6);
}

.sb-home-provider-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 18px;

    border-radius: 50%;

    color: #06785f;
    background: #ecfdf5;

    font-size: 34px;
    font-weight: 400;
}

.sb-home-provider-placeholder h3 {
    margin: 0 0 10px;

    color: #111827;

    font-size: 18px;
    font-weight: 700;
}

.sb-home-provider-placeholder p {
    margin: 0 0 20px;

    color: #667085;

    font-size: 13px;
    line-height: 1.55;
}
/* =========================================================
   CUSTOMER BOOKING MODAL BRAND
   ========================================================= */

.sb-booking-brand {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 26px;
    padding-bottom: 22px;

    border-bottom: 1px solid #e5ebe8;

    text-align: center;
}

.sb-booking-brandmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sb-booking-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffffff;
    background: #065f46;

    border-radius: 50%;

    font-size: 16px;
    font-weight: 800;
}

.sb-booking-brand-name {
    color: #111827;

    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sb-booking-brand-name span {
    color: #059669;
}

.sb-booking-brand-text {
    margin: 8px 0 0;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.4;
}
@media (max-width: 576px) {

    .sb-booking-brand {
        margin-bottom: 20px;
        padding-bottom: 18px;
    }

    .sb-booking-brand-icon {
        width: 38px;
        height: 38px;

        font-size: 14px;
    }

    .sb-booking-brand-name {
        font-size: 19px;
    }

    .sb-booking-brand-text {
        font-size: 12px;
    }

}
.sb-active-bookings-card {
    cursor: pointer;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sb-active-bookings-card:hover {
    transform: translateY(-2px);

    border-color: rgba(6, 95, 70, 0.25);

    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.07);
}

.sb-active-bookings-card:focus-visible {
    outline: 3px solid rgba(6, 95, 70, 0.18);
    outline-offset: 3px;
}
/* Provider incoming request action buttons */

.sb-provider-dashboard #providerIncomingContainer .sb-provider-accept-btn,
.sb-provider-dashboard #providerIncomingContainer .sb-provider-reject-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 64px;
    min-height: 34px;
    padding: 6px 12px !important;
    font-size: 0.76rem !important;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 9px;
}

.sb-provider-dashboard #providerIncomingContainer .sb-provider-accept-btn {
    color: #ffffff !important;
    background: #067a5b !important;
    border-color: #067a5b !important;
}

.sb-provider-dashboard #providerIncomingContainer .sb-provider-reject-btn {
    color: #ffffff !important;
    background: #dc3545 !important;
    border-color: #dc3545 !important;
}
/* =========================================================
   PROVIDER DASHBOARD — TYPOGRAPHY CONSISTENCY
   ========================================================= */

.sb-provider-dashboard {
    font-family: 'DM Sans', sans-serif;
    color: #111827;
}


/* Section headings */

.sb-provider-dashboard .provider-panel .panel-head h2,
.sb-provider-dashboard .provider-panel h2 {
    margin: 0 0 4px;

    color: #111827;

    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.015em;
}


/* Section descriptions */

.sb-provider-dashboard .provider-panel .panel-head p,
.sb-provider-dashboard .provider-panel > p {
    margin: 0;

    color: #667085;

    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}


/* Dropdown filter buttons */

.sb-provider-dashboard .provider-panel .dropdown .btn {
    min-height: 40px;
    padding: 8px 14px;

    font-family: 'DM Sans', sans-serif;

    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;

    border-radius: 9px;
}


/* Dropdown items */

.sb-provider-dashboard .provider-panel .dropdown-item {
    font-size: 0.82rem;
    font-weight: 500;
}


/* Table */

.sb-provider-dashboard .provider-panel table {
    font-family: 'DM Sans', sans-serif;

    font-size: 0.82rem;
}


/* Table headings */

.sb-provider-dashboard .provider-panel table thead th {
    color: #475467;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: 0.025em;
}


/* Normal table text */

.sb-provider-dashboard .provider-panel table tbody td {
    color: #111827;

    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;

    vertical-align: middle;
}


/* Main service / task names */

.sb-provider-dashboard .provider-panel table .fw-semibold {
    font-size: 0.82rem;
    font-weight: 600 !important;
}


/* Secondary information */

.sb-provider-dashboard .provider-panel table small,
.sb-provider-dashboard .provider-panel table .text-muted {
    color: #667085 !important;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
}


/* Status badges */

.sb-provider-dashboard .provider-panel .badge {
    padding: 5px 8px;

    font-family: 'DM Sans', sans-serif;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;

    border-radius: 6px;
}


/* Table buttons */

.sb-provider-dashboard .provider-panel table .btn {
    font-family: 'DM Sans', sans-serif;

    font-size: 0.75rem !important;
    font-weight: 600 !important;

    line-height: 1.2;
}


/* Review KPI cards */

.sb-provider-dashboard #reviewsSection .stat-box p {
    margin-bottom: 5px;

    color: #667085;

    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.sb-provider-dashboard #reviewsSection .stat-box h3 {
    margin: 0;

    color: #111827;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}


/* Empty states */

.sb-provider-dashboard .empty-state h5 {
    color: #344054;

    font-size: 0.95rem;
    font-weight: 600;
}

.sb-provider-dashboard .empty-state p {
    color: #667085;

    font-size: 0.8rem;
    font-weight: 400;
}


/* Live update / error text */

.sb-provider-dashboard #providerIncomingStatus,
.sb-provider-dashboard #providerReviewsStatus,
.sb-provider-dashboard #providerWithdrawalsStatus {
    font-size: 0.72rem;
    font-weight: 400;
}


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

@media (max-width: 767.98px) {

    .sb-provider-dashboard .provider-panel .panel-head h2,
    .sb-provider-dashboard .provider-panel h2 {
        font-size: 1rem;
    }

    .sb-provider-dashboard .provider-panel .panel-head p {
        font-size: 0.78rem;
    }

    .sb-provider-dashboard .provider-panel table {
        font-size: 0.78rem;
    }

    .sb-provider-dashboard .provider-panel table tbody td,
    .sb-provider-dashboard .provider-panel table .fw-semibold {
        font-size: 0.78rem;
    }

    .sb-provider-dashboard .provider-panel table small,
    .sb-provider-dashboard .provider-panel table .text-muted {
        font-size: 0.72rem;
    }

    .sb-provider-dashboard .provider-panel .dropdown .btn {
        font-size: 0.78rem;
    }

}
/* =========================================================
   PROVIDER DASHBOARD - FINAL TABLE FONT CONSISTENCY
   ========================================================= */

.sb-provider-dashboard .provider-panel table,
.sb-provider-dashboard .provider-panel table tbody,
.sb-provider-dashboard .provider-panel table tbody tr,
.sb-provider-dashboard .provider-panel table tbody td {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Main names / important text */
.sb-provider-dashboard .provider-panel table .fw-semibold {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Secondary text */
.sb-provider-dashboard .provider-panel table small,
.sb-provider-dashboard .provider-panel table .text-muted {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Table headings */
.sb-provider-dashboard .provider-panel table thead th {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase;
}

/* Section title */
.sb-provider-dashboard .provider-panel .panel-head h2 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Section description */
.sb-provider-dashboard .provider-panel .panel-head p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Dropdown */
.sb-provider-dashboard .provider-panel .dropdown .btn {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
/* =========================================================
   PROVIDER DASHBOARD MOBILE TABLES
   No horizontal scrolling
   ========================================================= */

@media (max-width: 767.98px) {

    /* Never allow provider panels to overflow screen */
    .sb-provider-dashboard .provider-panel {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .sb-provider-dashboard .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }


    /* =====================================================
       CUSTOMER REVIEWS
       ===================================================== */

    .sb-provider-dashboard #reviewsSection table {
        display: block;
        width: 100%;
    }

    .sb-provider-dashboard #reviewsSection thead {
        display: none;
    }

    .sb-provider-dashboard #reviewsSection tbody {
        display: block;
        width: 100%;
    }

    .sb-provider-dashboard #reviewsSection tbody tr {
        display: grid;

        grid-template-columns: 1fr auto;

        gap: 7px 14px;

        width: 100%;

        padding: 16px 0;

        border-bottom: 1px solid #e5e7eb;
    }

    .sb-provider-dashboard #reviewsSection tbody td {
        display: block;

        width: auto !important;
        min-width: 0;

        padding: 0 !important;

        border: 0 !important;

        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Service */
    .sb-provider-dashboard #reviewsSection tbody td:nth-child(1) {
        grid-column: 1 / -1;

        font-size: 14px !important;
        font-weight: 700 !important;
    }

    /* Customer */
    .sb-provider-dashboard #reviewsSection tbody td:nth-child(2) {
        grid-column: 1 / -1;

        color: #667085 !important;

        font-size: 13px !important;
    }

    /* Rating */
    .sb-provider-dashboard #reviewsSection tbody td:nth-child(3) {
        grid-column: 1;
    }

    .sb-provider-dashboard #reviewsSection tbody td:nth-child(3)::before {
        content: "Rating";
    }

    /* Comment */
    .sb-provider-dashboard #reviewsSection tbody td:nth-child(4) {
        grid-column: 1 / -1;

        margin-top: 5px;
    }

    .sb-provider-dashboard #reviewsSection tbody td:nth-child(4)::before {
        content: "Comment";
    }

    /* Date */
    .sb-provider-dashboard #reviewsSection tbody td:nth-child(5) {
        grid-column: 1 / -1;
    }

    .sb-provider-dashboard #reviewsSection tbody td:nth-child(5)::before {
        content: "Date";
    }

    .sb-provider-dashboard #reviewsSection tbody td:nth-child(3)::before,
    .sb-provider-dashboard #reviewsSection tbody td:nth-child(4)::before,
    .sb-provider-dashboard #reviewsSection tbody td:nth-child(5)::before {
        display: inline-block;

        min-width: 72px;
        margin-right: 8px;

        color: #667085;

        font-size: 11px;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.03em;
    }


    /* =====================================================
       YOUR SERVICES
       ===================================================== */

    .sb-provider-dashboard #servicesSection table {
        display: block;
        width: 100%;
    }

    .sb-provider-dashboard #servicesSection thead {
        display: none;
    }

    .sb-provider-dashboard #servicesSection tbody {
        display: block;
        width: 100%;
    }

    .sb-provider-dashboard #servicesSection tbody tr {
        display: grid;

        grid-template-columns: 1fr auto;

        gap: 8px 12px;

        width: 100%;

        padding: 16px 0;

        border-bottom: 1px solid #e5e7eb;
    }

    .sb-provider-dashboard #servicesSection tbody td {
        width: auto !important;
        min-width: 0;

        padding: 0 !important;

        border: 0 !important;

        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Service ID */
    .sb-provider-dashboard #servicesSection tbody td:nth-child(1) {
        grid-column: 1 / -1;

        color: #667085 !important;

        font-size: 12px !important;
        font-weight: 600 !important;
    }

    /* Service name */
    .sb-provider-dashboard #servicesSection tbody td:nth-child(2) {
        grid-column: 1 / -1;

        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* Status */
    .sb-provider-dashboard #servicesSection tbody td:nth-child(3) {
        grid-column: 1;
        align-self: center;
    }

    /* Action */
    .sb-provider-dashboard #servicesSection tbody td:nth-child(4) {
        grid-column: 2;

        text-align: right !important;
        align-self: center;
    }

    .sb-provider-dashboard #servicesSection tbody td:nth-child(4) .btn {
        width: auto !important;
        min-width: 110px;

        padding: 9px 12px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       SECTION SPACING
       ===================================================== */

    .sb-provider-dashboard .provider-panel {
        padding-left: 16px;
        padding-right: 16px;
    }

}
/* =========================================
   SERVICEBERSAMA DASHBOARD LOGO
   ========================================= */

.sb-navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.sb-navbar-logo-circle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #06785f;
    color: #ffffff;

    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.sb-navbar-logo-text {
    color: #111827;

    font-family: 'DM Sans', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;

    white-space: nowrap;
}

.sb-navbar-logo-text span {
    color: #079669;
}


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

    .sb-navbar-brand {
        gap: 8px;
    }

    .sb-navbar-logo-circle {
        width: 38px;
        height: 38px;
        flex-basis: 38px;

        font-size: 14px;
    }

    .sb-navbar-logo-text {
        font-size: 18px;
    }

}
/* =========================================================
   WITHDRAWAL HISTORY - MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    #withdrawalsSection .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow: hidden !important;
    }

    #withdrawalsSection table {
        display: block;
        width: 100% !important;
        margin: 0;
    }

    #withdrawalsSection thead {
        display: none;
    }

    #withdrawalsSection tbody {
        display: block;
        width: 100%;
    }

    #withdrawalsSection tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 14px;

        width: 100%;
        padding: 18px 0;

        border-bottom: 1px solid #e5e7eb;
    }

    #withdrawalsSection tbody td {
        display: block;
        width: auto !important;
        min-width: 0 !important;

        padding: 0 !important;
        border: 0 !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        overflow-wrap: anywhere;

        font-size: 14px !important;
        line-height: 1.4;
    }

    /* Request ID */
    #withdrawalsSection tbody td:nth-child(1) {
        grid-column: 1;
    }

    #withdrawalsSection tbody td:nth-child(1)::before {
        content: "Request ID";
    }

    /* Amount */
    #withdrawalsSection tbody td:nth-child(2) {
        grid-column: 2;
    }

    #withdrawalsSection tbody td:nth-child(2)::before {
        content: "Amount";
    }

    /* Status */
    #withdrawalsSection tbody td:nth-child(3) {
        grid-column: 1 / -1;
    }

    #withdrawalsSection tbody td:nth-child(3)::before {
        content: "Status";
    }

    /* Admin Notes */
    #withdrawalsSection tbody td:nth-child(4) {
        grid-column: 1 / -1;
    }

    #withdrawalsSection tbody td:nth-child(4)::before {
        content: "Admin Notes";
    }

    /* Requested At */
    #withdrawalsSection tbody td:nth-child(5) {
        grid-column: 1;
    }

    #withdrawalsSection tbody td:nth-child(5)::before {
        content: "Requested At";
    }

    /* Processed At */
    #withdrawalsSection tbody td:nth-child(6) {
        grid-column: 2;
    }

    #withdrawalsSection tbody td:nth-child(6)::before {
        content: "Processed At";
    }

    #withdrawalsSection tbody td::before {
        display: block;

        margin-bottom: 5px;

        color: #667085;

        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;

        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Hide empty admin notes */
    #withdrawalsSection tbody td:nth-child(4):empty {
        display: none;
    }

}
/* =========================================================
   WITHDRAWAL HISTORY - MOBILE CARD LAYOUT
   ========================================================= */

@media (max-width: 767.98px) {

    #withdrawalsSection .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }

    #withdrawalsSection .withdrawal-history-table {
        display: block;
        width: 100%;
        margin: 0;
    }

    #withdrawalsSection .withdrawal-history-table thead {
      display: none !important;
    }

    #withdrawalsSection .withdrawal-history-table tbody {
        display: block;
        width: 100%;
    }

    #withdrawalsSection .withdrawal-history-table tr {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 16px 18px;

        width: 100%;
        padding: 18px 0;

        border-bottom: 1px solid #e5e7eb;
    }

    #withdrawalsSection .withdrawal-history-table td {
        display: block;

        width: auto !important;
        min-width: 0 !important;

        padding: 0 !important;
        border: 0 !important;

        white-space: normal !important;
        overflow: visible !important;

        font-size: 14px !important;
        line-height: 1.4;
    }

    #withdrawalsSection .withdrawal-history-table td::before {
        content: attr(data-label);

        display: block;

        margin-bottom: 5px;

        color: #667085;

        font-size: 11px;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Status takes full row */
    #withdrawalsSection .withdrawal-history-table td:nth-child(3) {
        grid-column: 1 / -1;
    }

    /* Admin notes takes full row */
    #withdrawalsSection .withdrawal-history-table td:nth-child(4) {
        grid-column: 1 / -1;
    }

    /* Requested */
    #withdrawalsSection .withdrawal-history-table td:nth-child(5) {
        grid-column: 1;
    }

    /* Processed */
    #withdrawalsSection .withdrawal-history-table td:nth-child(6) {
        grid-column: 2;
    }

}
.terms-section-card {
    scroll-margin-top: 100px;
}

@media (max-width: 767.98px) {

    .terms-page-wrap {
        padding-top: 32px !important;
    }

    .terms-hero {
        margin-bottom: 20px;
    }

    .terms-hero-title {
        font-size: 2rem;
    }

    .terms-hero-subtitle {
        font-size: .9rem;
        line-height: 1.5;
    }

    .terms-hero-description {
        font-size: .88rem;
    }

    .terms-meta {
        flex-direction: column;
        gap: 4px;

        font-size: .78rem;
    }

    .terms-nav {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 5px;

        -webkit-overflow-scrolling: touch;
    }

    .terms-nav a {
        flex: 0 0 auto;

        font-size: .82rem;

        white-space: nowrap;
    }

}
/* Terms page top navigation */
@media (min-width: 992px) {

    .terms-topbar .container {
        display: flex;
        align-items: center;
    }

    .terms-topbar .navbar-collapse {
        flex-grow: 1;
    }

    .terms-topbar .navbar-nav {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .terms-topbar .nav-item {
        margin-left: auto;
    }
}
/* =========================================================
   TERMS PAGE TOPBAR — RIGHT ALIGN CUSTOMER SUPPORT
========================================================= */

@media (min-width: 992px) {

    body > .terms-topbar .navbar-collapse {
        flex-grow: 1;
    }

    body > .terms-topbar .navbar-nav {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

}
/* =========================================================
   TERMS PAGE TOPBAR — CUSTOMER SUPPORT ON RIGHT
========================================================= */

@media (min-width: 992px) {

    body > .terms-topbar .navbar-collapse {
        flex-grow: 1;
    }

    body > .terms-topbar .navbar-nav {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

}
/* =========================================================
   TERMS PAGE TOPBAR — SERVICEBERSAMA THEME
========================================================= */

.terms-topbar {
    font-family: "DM Sans", sans-serif;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 18px rgba(6, 78, 59, 0.04) !important;
}

.terms-topbar .navbar-brand {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
}

.terms-topbar .sb-navbar-logo-circle {
    background: #065f46;
    color: #ffffff;
}

.terms-topbar .sb-navbar-logo-text {
    color: #111827;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
}

.terms-topbar .sb-navbar-logo-text span {
    color: #059669;
}

.terms-topbar .nav-link {
    margin: 0 !important;
    padding: 10px 4px !important;

    color: #111827 !important;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.terms-topbar .nav-link:hover {
    color: #065f46 !important;
    transform: translateY(-1px);
}

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

    .terms-topbar .nav-link {
        padding: 12px 0 !important;
        font-size: 14px;
    }

}
/* =========================================================
   NOTIFICATION MODAL — RIGHT-ALIGNED HEADER ACTIONS
========================================================= */

.admin-notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
}

.admin-notifications-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-left: auto;
}


/* Phone */

@media (max-width: 575.98px) {

    .admin-notifications-header {
        align-items: flex-start;
        gap: 10px;
    }

    .admin-notifications-header-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-left: auto;
    }

    .admin-notifications-read-all {
        white-space: nowrap;
    }

}
/* =========================================================
   PROVIDER PROFILE — SERVICEBERSAMA THEME
========================================================= */

.sb-provider-profile-page {
    min-height: 100vh;
    color: #101828;
    background:
        radial-gradient(
            circle at top left,
            rgba(16, 185, 129, 0.08),
            transparent 32%
        ),
        #f6f9f7;
    font-family: "DM Sans", sans-serif;
}


/* Navbar */

.sb-provider-profile-navbar {
    min-height: 92px;
    background: #ffffff;
    border-bottom: 1px solid #e3ebe7;
    box-shadow: 0 4px 18px rgba(15, 41, 31, 0.04);
}

.sb-provider-profile-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-provider-profile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 15px;
    color: #06694f;
    background: #effaf5;
    border: 1px solid #c5e3d7;
    border-radius: 10px;
    font-weight: 700;
}

.sb-provider-profile-back:hover {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}


/* Main content */

.sb-provider-profile-main {
    padding-top: 46px;
    padding-bottom: 60px;
}

.sb-provider-profile-card {
    padding: 30px;
    background: #ffffff;
    border: 1px solid #e0e9e5;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 41, 31, 0.08);
}

.sb-provider-profile-card .panel-head {
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8eeeb;
}

.sb-provider-profile-card .panel-head::before {
    display: block;
    margin-bottom: 7px;
    color: #067a5b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    content: "Provider Account";
}

.sb-provider-profile-card .panel-head h2 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 1.55rem;
    font-weight: 750;
}

.sb-provider-profile-card .panel-head p {
    margin: 0;
    color: #667085;
}


/* Profile image */

.sb-provider-profile-photo-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
    padding: 18px;
    background: linear-gradient(
        135deg,
        #f0fbf6,
        #ffffff
    );
    border: 1px solid #d6e9e1;
    border-radius: 15px;
}

.sb-provider-profile-photo {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 4px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 2px #b9dacd,
        0 10px 22px rgba(6, 95, 70, 0.14);
}

.sb-provider-profile-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 110px;
    flex-direction: column;
    gap: 7px;
    width: 110px;
    height: 110px;
    color: #718079;
    background: #e9f5f0;
    border: 2px dashed #a9cfc0;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.sb-provider-profile-photo-empty i {
    color: #067a5b;
    font-size: 1.5rem;
}

.sb-provider-profile-photo-wrap strong {
    display: block;
    margin-bottom: 4px;
    color: #17201d;
    font-size: 1rem;
}

.sb-provider-profile-photo-wrap p {
    max-width: 510px;
    margin: 0;
    color: #6b7671;
    font-size: 0.86rem;
    line-height: 1.5;
}


/* Form */

.sb-provider-profile-card .form-label {
    margin-bottom: 7px;
    color: #26332e;
    font-size: 0.88rem;
    font-weight: 700;
}

.sb-provider-profile-card .form-control {
    min-height: 48px;
    padding: 10px 13px;
    color: #17201d;
    background: #ffffff;
    border: 1px solid #d6e0db;
    border-radius: 10px;
    box-shadow: none;
}

.sb-provider-profile-card .form-control:focus {
    border-color: #168a69;
    box-shadow: 0 0 0 3px rgba(6, 122, 91, 0.12);
}

.sb-provider-profile-card .form-control:disabled {
    color: #68736e;
    background: #f1f5f3;
    border-color: #dde5e1;
    opacity: 1;
}

.sb-provider-profile-card input[type="file"] {
    padding: 7px;
}

.sb-provider-profile-card input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    color: #06694f;
    background: #eef9f4;
    border: 0;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
}


/* Save button */

.sb-provider-profile-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 18px;
    color: #ffffff;
    background: #067a5b;
    border: 1px solid #067a5b;
    border-radius: 10px;
    font-weight: 750;
    box-shadow: 0 8px 18px rgba(6, 122, 91, 0.17);
}

.sb-provider-profile-save:hover,
.sb-provider-profile-save:focus {
    color: #ffffff;
    background: #055f47;
    border-color: #055f47;
    transform: translateY(-1px);
}


/* Phone */

@media (max-width: 767.98px) {

    .sb-provider-profile-navbar {
        min-height: 76px;
    }

    .sb-provider-profile-nav-actions {
        gap: 7px;
    }

    .sb-provider-profile-back,
    .sb-provider-profile-navbar .sb-nav-logout-btn {
        min-height: 40px;
        padding: 8px 11px;
        font-size: 0.78rem;
    }

    .sb-provider-profile-back i {
        display: none;
    }

    .sb-provider-profile-main {
        padding-top: 24px;
        padding-bottom: 38px;
    }

    .sb-provider-profile-card {
        padding: 20px 16px;
        border-radius: 15px;
    }

    .sb-provider-profile-photo-wrap {
        align-items: center;
        flex-direction: column;
        padding: 20px 16px;
        text-align: center;
    }

    .sb-provider-profile-card .panel-head h2 {
        font-size: 1.35rem;
    }

    .sb-provider-profile-save {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .sb-provider-profile-navbar .sb-navbar-brand-name {
        font-size: 1rem;
    }

    .sb-provider-profile-navbar .sb-navbar-brand-icon {
        width: 38px;
        height: 38px;
        font-size: 0.82rem;
    }

    .sb-provider-profile-back span {
        font-size: 0;
    }

    .sb-provider-profile-back span::after {
        font-size: 0.78rem;
        content: "Dashboard";
    }

}
/* Provider profile — enforce ServiceBersama typography */

.sb-provider-profile-page,
.sb-provider-profile-page button,
.sb-provider-profile-page input,
.sb-provider-profile-page select,
.sb-provider-profile-page textarea,
.sb-provider-profile-page label,
.sb-provider-profile-page .btn,
.sb-provider-profile-page .form-control {
    font-family: "DM Sans", sans-serif;
}
/* =========================================================
   CUSTOMER DASHBOARD — ADMIN-INSPIRED SB THEME
========================================================= */

.sb-customer-dashboard {
    color: #101828;
    background:
        linear-gradient(
            180deg,
            #f3f8f5 0%,
            #f7f9f8 100%
        );
    font-family: "DM Sans", sans-serif;
}

.sb-customer-dashboard .sb-dashboard-main {
    padding-top: 38px;
    padding-bottom: 55px;
}


/* Welcome hero */

.sb-customer-hero {
    position: relative;
    min-height: 210px;
    overflow: hidden;
    padding: 34px 38px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 94% 22%,
            rgba(255, 255, 255, 0.10),
            transparent 25%
        ),
        linear-gradient(
            110deg,
            #043f32 0%,
            #06684f 58%,
            #16866a 100%
        );
    border: 1px solid rgba(4, 85, 64, 0.34);
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(5, 70, 53, 0.13);
}

.sb-customer-hero::after {
    position: absolute;
    top: -95px;
    right: -65px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.sb-customer-hero > * {
    position: relative;
    z-index: 1;
}

.sb-customer-hero p:first-child {
    color: #a7e4cf !important;
}

.sb-customer-hero h1 {
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 750;
    letter-spacing: -0.035em;
}

.sb-customer-hero .text-muted {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 1rem;
}

.sb-customer-hero .sb-dashboard-browse-button {
    min-height: 48px !important;
    padding: 11px 19px !important;
    color: #075f49 !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
    border-radius: 11px !important;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.13);
}

.sb-customer-hero .sb-dashboard-browse-button:hover {
    color: #ffffff !important;
    background: #0b8a68 !important;
    border-color: #a6dfcc !important;
    transform: translateY(-1px);
}


/* KPI cards */

.sb-customer-kpis {
    gap: 16px;
}

.sb-customer-kpis .stat-box {
    min-height: 178px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #dfe8e3;
    border-radius: 17px;
    box-shadow: 0 12px 30px rgba(15, 41, 31, 0.065);
}

.sb-customer-kpis .stat-box:hover {
    border-color: #b8d8cc;
    box-shadow: 0 17px 36px rgba(15, 75, 55, 0.10);
    transform: translateY(-2px);
}

.sb-customer-kpis .stat-box.active {
    background:
        linear-gradient(
            135deg,
            #effbf6,
            #ffffff
        );
    border-color: #bfe0d3;
}

.sb-customer-kpis .stat-box.paused {
    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );
    border-color: #f0d99a;
}

.sb-customer-kpis .stat-box p {
    color: #687386;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.sb-customer-kpis .stat-box h3 {
    color: #101828;
    font-size: 2rem;
    font-weight: 750;
}

.sb-customer-kpis .stat-box small {
    color: #707b89 !important;
}


/* Bookings panel */

.sb-customer-bookings-panel {
    overflow: visible;
    background: #ffffff;
    border: 1px solid #dfe8e3 !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(15, 41, 31, 0.075);
}

.sb-customer-bookings-panel .sb-bookings-heading {
    padding-bottom: 20px;
    border-bottom: 1px solid #e9efec;
}

.sb-customer-bookings-panel .sb-dashboard-eyebrow {
    color: #07805f !important;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.sb-customer-bookings-panel h2 {
    color: #101828;
    font-size: 1.3rem;
    font-weight: 750;
}

.sb-customer-bookings-panel
.btn-outline-success {
    min-height: 44px;
    padding: 9px 15px;
    color: #067a5b;
    background: #f5fbf8;
    border-color: #9fcfbe;
    border-radius: 10px;
    font-weight: 700;
}

.sb-customer-bookings-panel
.btn-outline-success:hover,
.sb-customer-bookings-panel
.btn-outline-success:focus {
    color: #ffffff;
    background: #067a5b;
    border-color: #067a5b;
}

.sb-customer-bookings-panel
.dropdown-item.active {
    color: #ffffff;
    background: #07805f;
}


/* Phone */

@media (max-width: 767.98px) {

    .sb-customer-dashboard .sb-dashboard-main {
        padding-top: 22px;
    }

    .sb-customer-hero {
        align-items: flex-start !important;
        flex-direction: column;
        min-height: 0;
        padding: 26px 22px;
        border-radius: 16px;
    }

    .sb-customer-hero h1 {
        font-size: 1.75rem;
    }

    .sb-customer-hero
    .sb-dashboard-browse-button {
        width: 100%;
    }

    .sb-customer-kpis {
        gap: 12px;
    }

    .sb-customer-kpis .stat-box {
        min-height: 158px;
        padding: 18px;
    }

    .sb-customer-bookings-panel {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .sb-customer-bookings-panel
    .sb-bookings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .sb-customer-bookings-panel
    .sb-customer-booking-view,
    .sb-customer-bookings-panel
    .sb-customer-booking-view > button {
        width: 100%;
    }

}
/* =========================================================
   CUSTOMER DASHBOARD — MATCH ADMIN SUMMARY THEME
========================================================= */

/* Ensure hero typography matches admin */

.sb-customer-dashboard
.sb-customer-hero h1 {
    color: #ffffff !important;
}

.sb-customer-dashboard
.sb-customer-hero > div > p:first-child {
    color: rgba(255, 255, 255, 0.68) !important;
}

.sb-customer-dashboard
.sb-customer-hero > div > .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}


/* Admin-style KPI container */

.sb-customer-dashboard
.sb-customer-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 28px 30px 30px;
    background: #ffffff;
    border: 1px solid #dfe7e3;
    border-radius: 18px;
    box-shadow: 0 15px 38px rgba(15, 41, 31, 0.075);
}


/* KPI heading spans the full row */

.sb-customer-kpi-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    grid-column: 1 / -1;
    gap: 20px;
    margin-bottom: 4px;
}

.sb-customer-kpi-eyebrow {
    margin: 0 0 5px;
    color: #07805f !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase;
}

.sb-customer-kpi-header h2 {
    margin: 0 0 5px;
    color: #17201d;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.sb-customer-kpi-header > div > span {
    color: #6f7a75;
    font-size: 0.9rem;
}


/* Live indicator */

.sb-customer-live-status {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 7px;
    min-height: 35px;
    padding: 7px 12px;
    color: #087655;
    background: #edfbf5;
    border: 1px solid #bfe6d7;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 750;
}

.sb-customer-live-status > span {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}


/* KPI cards now match admin cards */

.sb-customer-dashboard
.sb-customer-kpis
.stat-box {
    width: 100%;
    min-height: 165px;
    padding: 21px;
    background: #f9fcfa;
    border: 1px solid #dfe8e3;
    border-radius: 15px;
    box-shadow: none;
}

.sb-customer-dashboard
.sb-customer-kpis
.stat-box.active {
    background: #f3fbf7;
    border-color: #bee0d2;
}

.sb-customer-dashboard
.sb-customer-kpis
.stat-box.paused {
    background: #fffbf2;
    border-color: #f0d391;
}

.sb-customer-dashboard
.sb-customer-kpis
.stat-box:hover {
    border-color: #a9cfc0;
    box-shadow: 0 9px 22px rgba(6, 95, 70, 0.07);
}


/* Desktop width */

@media (min-width: 992px) {

    .sb-customer-dashboard
    .sb-customer-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/* Tablet */

@media (max-width: 991.98px) {

    .sb-customer-dashboard
    .sb-customer-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 22px;
    }

}


/* Phone */

@media (max-width: 767.98px) {

    .sb-customer-dashboard
    .sb-customer-kpis {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 16px;
    }

    .sb-customer-kpi-header {
        flex-direction: column;
        gap: 12px;
    }

    .sb-customer-live-status {
        align-self: flex-start;
    }

    .sb-customer-dashboard
    .sb-customer-kpis
    .stat-box {
        min-height: 145px;
    }

}
/* =========================================================
   CUSTOMER TOPBAR + TABLE — MATCH ADMIN DASHBOARD
========================================================= */

/* Top bar */

.sb-customer-dashboard .sb-main-navbar {
    min-height: 82px;
    padding: 0;
    background: #ffffff;
    border-bottom: 1px solid #dfe7e3;
    box-shadow: 0 4px 18px rgba(15, 41, 31, 0.035);
}

.sb-customer-dashboard
.sb-main-navbar > .container {
    min-height: 82px;
}


/* Navigation links */

.sb-customer-dashboard
.sb-main-menu {
    gap: 7px;
}

.sb-customer-dashboard
.sb-main-menu .nav-link {
    min-height: 42px;
    padding: 10px 15px !important;
    color: #52605a;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.sb-customer-dashboard
.sb-main-menu .nav-link::after {
    display: none !important;
}

.sb-customer-dashboard
.sb-main-menu .nav-link:hover {
    color: #067a5b;
    background: #f0faf6;
}

.sb-customer-dashboard
.sb-main-menu .nav-link.active {
    color: #ffffff !important;
    background: #07805f;
}


/* User actions */

.sb-customer-dashboard
.sb-navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-customer-dashboard
.sb-navbar-user {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 13px;
    color: #26332e;
    background: #f5f8f6;
    border: 1px solid #dfe7e3;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
}

.sb-customer-dashboard
.sb-navbar-actions
.admin-topbar-notification {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    color: #067a5b;
    background: #ecfaf4;
    border: 1px solid #c8e8dc;
    border-radius: 11px;
}

.sb-customer-dashboard
.sb-navbar-actions
.admin-topbar-notification:hover {
    color: #ffffff;
    background: #07805f;
    border-color: #07805f;
    transform: translateY(-1px);
}

.sb-customer-dashboard
.sb-navbar-actions
.admin-topbar-notification-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    color: #ffffff;
    background: #b42318;
    border: 2px solid #ffffff;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
}

.sb-customer-dashboard
.sb-nav-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 16px;
    color: #ffffff;
    background: #05664e;
    border: 1px solid #05664e;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
}

.sb-customer-dashboard
.sb-nav-logout-btn:hover {
    color: #ffffff;
    background: #044c3b;
    border-color: #044c3b;
}


/* Booking table container */

.sb-customer-dashboard
#ordersTableContainer {
    overflow: hidden;
    border: 1px solid #dfe7e3;
    border-radius: 14px;
}

.sb-customer-dashboard
#ordersAjaxStatus {
    margin: 0 0 12px;
    color: #78837e !important;
    font-size: 0.76rem;
}


/* Desktop table */

@media (min-width: 768px) {

    .sb-customer-dashboard
    .customer-orders-table {
        width: 100%;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .sb-customer-dashboard
    .customer-orders-table thead th {
        padding: 15px 12px;
        color: #5e6964;
        background: #f5f8f6;
        border-bottom: 1px solid #dfe7e3;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.045em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .sb-customer-dashboard
    .customer-orders-table tbody td {
        padding: 16px 12px;
        color: #27332e;
        background: #ffffff;
        border-bottom: 1px solid #e8eeeb;
        font-size: 0.79rem;
        line-height: 1.45;
        vertical-align: middle;
    }

    .sb-customer-dashboard
    .customer-orders-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .sb-customer-dashboard
    .customer-orders-table tbody tr:hover td {
        background: #f8fcfa;
    }

    .sb-customer-dashboard
    .customer-orders-table tbody td:nth-child(2),
    .sb-customer-dashboard
    .customer-orders-table tbody td:nth-child(3) {
        color: #17201d;
        font-weight: 700;
    }

    .sb-customer-dashboard
    .customer-orders-table .badge {
        padding: 6px 9px;
        border-radius: 999px;
        font-size: 0.66rem;
        font-weight: 800;
    }

    .sb-customer-dashboard
    .customer-orders-table small {
        margin-top: 5px;
        color: #75807b !important;
        font-size: 0.7rem;
        line-height: 1.4;
    }

}


/* Search controls */

.sb-customer-dashboard
.sb-bookings-search-input .form-control {
    min-height: 44px;
    background: #ffffff;
    border: 1px solid #d8e1dc;
    border-radius: 10px;
}

.sb-customer-dashboard
.sb-bookings-search-input .form-control:focus {
    border-color: #19906e;
    box-shadow: 0 0 0 3px rgba(7, 128, 95, 0.11);
}

.sb-customer-dashboard
.sb-bookings-clear {
    min-height: 44px;
    color: #4e5a55;
    background: #ffffff;
    border: 1px solid #d2dcd7;
    border-radius: 10px;
}

.sb-customer-dashboard
.sb-bookings-clear:hover {
    color: #067a5b;
    background: #eff9f5;
    border-color: #abd2c3;
}


/* Phone top bar */

@media (max-width: 991.98px) {

    .sb-customer-dashboard
    .sb-main-navbar {
        min-height: 70px;
        padding: 10px 0;
    }

    .sb-customer-dashboard
    .sb-main-navbar > .container {
        min-height: 50px;
    }

    .sb-customer-dashboard
    .sb-main-menu .nav-link {
        width: 100%;
        border-radius: 9px;
    }

    .sb-customer-dashboard
    .sb-navbar-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        margin-top: 13px;
    }

    .sb-customer-dashboard
    .sb-navbar-user,
    .sb-customer-dashboard
    .sb-nav-logout-btn,
    .sb-customer-dashboard
    .sb-navbar-actions
    .admin-topbar-notification {
        width: 100%;
        flex-basis: auto;
    }

}
/* Customer bookings empty state — SB theme */
.sb-customer-dashboard .sb-customer-bookings-panel .customer-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    padding: 32px 24px;
    text-align: center;
    background: #f8fbfa;
    border: 1px dashed #cfe2dc;
    border-radius: 16px;
    color: #667085;
}

.sb-customer-dashboard .sb-customer-bookings-panel .customer-empty-state::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #e8faf3;
    color: #087558;
    font-size: 22px;
    font-weight: 800;
}

.sb-customer-dashboard .sb-customer-bookings-panel .customer-empty-state strong {
    margin-bottom: 6px;
    color: #101828;
    font-size: 18px;
    font-weight: 700;
}

.sb-customer-dashboard .sb-customer-bookings-panel .customer-empty-state p {
    margin: 0;
    color: #667085;
    font-size: 15px;
}
/* =========================================================
   CUSTOMER TOP BAR — ADMIN DASHBOARD THEME
   ========================================================= */

.sb-customer-dashboard .sb-main-navbar {
    min-height: 86px;
    padding: 14px 0;
    background: #ffffff;
    border-bottom: 1px solid #e4ebe8;
    box-shadow: none;
}

.sb-customer-dashboard .sb-main-navbar > .container {
    width: min(100% - 48px, 1880px);
    max-width: none;
}

/* Brand */

.sb-customer-dashboard .sb-navbar-brandmark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0;
}

.sb-customer-dashboard .sb-navbar-brand-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    color: #ffffff;
    background: #006b50;
    font-size: 15px;
    font-weight: 800;
}

.sb-customer-dashboard .sb-navbar-brand-name {
    color: #101828;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.sb-customer-dashboard .sb-navbar-brand-name span {
    color: #07966d;
}

/* Central navigation */

.sb-customer-dashboard .sb-main-menu {
    align-items: center;
    gap: 5px;
}

.sb-customer-dashboard .sb-main-menu .nav-link {
    padding: 11px 17px;
    color: #34443f;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.sb-customer-dashboard .sb-main-menu .nav-link::after {
    display: none;
}

.sb-customer-dashboard .sb-main-menu .nav-link:hover {
    color: #006b50;
    background: #f0f8f5;
}

.sb-customer-dashboard .sb-main-menu .nav-link.active {
    color: #ffffff;
    background: #078763;
    box-shadow: none;
}

/* Right-hand account controls */

.sb-customer-dashboard .sb-navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-customer-dashboard .admin-topbar-notification {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: #006b50;
    background: #edfaf5;
    border: 1px solid #d5eee5;
    border-radius: 11px;
    text-decoration: none;
}

.sb-customer-dashboard .admin-topbar-notification i {
    font-size: 18px;
}

.sb-customer-dashboard .admin-topbar-notification:hover {
    color: #ffffff;
    background: #078763;
    border-color: #078763;
}

.sb-customer-dashboard .admin-topbar-notification-count {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    color: #ffffff;
    background: #dc2626;
    border: 2px solid #ffffff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

/* Customer identity */

.sb-customer-dashboard .sb-customer-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 14px;
    border-right: 1px solid #dce5e1;
}

.sb-customer-dashboard .sb-customer-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: #ffffff;
    background: #078763;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.sb-customer-dashboard .sb-customer-account-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sb-customer-dashboard .sb-customer-account-details strong {
    max-width: 180px;
    overflow: hidden;
    color: #16201d;
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-customer-dashboard .sb-customer-account-details small {
    margin-top: 3px;
    color: #7a8984;
    font-size: 11px;
    font-weight: 600;
}

/* Logout */

.sb-customer-dashboard .sb-nav-logout-btn {
    min-height: 44px;
    padding: 10px 18px;
    color: #ffffff;
    background: #006b50;
    border: 1px solid #006b50;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}

.sb-customer-dashboard .sb-nav-logout-btn:hover {
    color: #ffffff;
    background: #004f3c;
    border-color: #004f3c;
}

/* Mobile */

@media (max-width: 991.98px) {
    .sb-customer-dashboard .sb-main-navbar {
        min-height: 74px;
        padding: 12px 0;
    }

    .sb-customer-dashboard .sb-main-navbar > .container {
        width: min(100% - 28px, 1880px);
    }

    .sb-customer-dashboard .sb-navbar-brand-name {
        font-size: 20px;
    }

    .sb-customer-dashboard #customerNav {
        margin-top: 14px;
        padding: 14px;
        background: #ffffff;
        border: 1px solid #dfe9e5;
        border-radius: 14px;
        box-shadow: 0 16px 34px rgba(10, 49, 38, 0.1);
    }

    .sb-customer-dashboard .sb-main-menu {
        align-items: stretch;
        gap: 7px;
    }

    .sb-customer-dashboard .sb-main-menu .nav-link {
        width: 100%;
        padding: 13px 15px;
    }

    .sb-customer-dashboard .sb-navbar-actions {
        align-items: stretch;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .sb-customer-dashboard .sb-customer-account {
        flex: 1;
        padding: 0 12px;
        border-right: 0;
    }

    .sb-customer-dashboard .sb-nav-logout-btn {
        display: grid;
        place-items: center;
    }
}

@media (max-width: 575.98px) {
    .sb-customer-dashboard .sb-navbar-brand-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .sb-customer-dashboard .sb-navbar-brand-name {
        font-size: 18px;
    }

    .sb-customer-dashboard .sb-customer-account-details strong {
        max-width: 135px;
    }
}
/* Match customer top-bar typography with admin dashboard */
.sb-customer-dashboard .sb-main-navbar,
.sb-customer-dashboard .sb-main-navbar a,
.sb-customer-dashboard .sb-main-navbar button,
.sb-customer-dashboard .sb-main-navbar span,
.sb-customer-dashboard .sb-main-navbar strong,
.sb-customer-dashboard .sb-main-navbar small {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Admin-style brand sizing */
.sb-customer-dashboard .sb-navbar-brand-name {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.7px !important;
}

/* Admin-style navigation typography */
.sb-customer-dashboard .sb-main-menu .nav-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* Admin-style account typography */
.sb-customer-dashboard .sb-customer-account-details strong {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.sb-customer-dashboard .sb-customer-account-details small {
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Admin-style logout typography */
.sb-customer-dashboard .sb-nav-logout-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Grouped service category management */

.admin-categories-create-form {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(240px, 1fr)
        auto;
    gap: 16px;
    align-items: end;
}

.admin-categories-create-field {
    min-width: 0;
}

.admin-categories-create-field label,
.admin-category-edit-field label {
    display: block;
    margin-bottom: 7px;
    color: #52605b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.admin-category-grouped-form {
    display: grid;
    grid-template-columns:
        minmax(210px, 1.2fr)
        minmax(210px, 1fr)
        minmax(125px, 0.55fr)
        auto;
    gap: 12px;
    align-items: end;
}

.admin-category-edit-field {
    min-width: 0;
}

.admin-category-grouped-form .form-control,
.admin-category-grouped-form .form-select {
    min-height: 48px;
    border-color: #d7e2de;
    border-radius: 10px;
}

.admin-category-status-select.is-active {
    color: #087454;
    background-color: #effaf5;
    border-color: #a8ddca;
    font-weight: 700;
}

.admin-category-status-select.is-inactive {
    color: #9b3d32;
    background-color: #fff3f1;
    border-color: #efbbb4;
    font-weight: 700;
}

.admin-category-grouped-form
.admin-category-save-button {
    min-height: 48px;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .admin-categories-create-form {
        grid-template-columns: 1fr 1fr;
    }

    .admin-categories-create-button {
        grid-column: 1 / -1;
    }

    .admin-category-grouped-form {
        grid-template-columns: 1fr 1fr;
    }

    .admin-category-grouped-form
    .admin-category-save-button {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .admin-categories-create-form,
    .admin-category-grouped-form {
        grid-template-columns: 1fr;
    }

    .admin-categories-table {
        min-width: 760px;
    }
}
/* Bulk category creation */

.admin-categories-bulk-form {
    align-items: end;
}

.admin-categories-bulk-names textarea {
    min-height: 180px;
    resize: vertical;
    border-color: #d7e2de;
    border-radius: 12px;
    line-height: 1.6;
}

.admin-categories-bulk-names textarea:focus {
    border-color: #168365;
    box-shadow: 0 0 0 0.2rem rgba(22, 131, 101, 0.12);
}

.admin-categories-field-help {
    display: block;
    margin-top: 7px;
    color: #718078;
    font-size: 0.8rem;
}

@media (min-width: 992px) {
    .admin-categories-bulk-form {
        grid-template-columns:
            minmax(320px, 1.4fr)
            minmax(230px, 0.8fr)
            auto;
    }
}
/* Fix bulk category form width and alignment */

.admin-categories-create-section {
    overflow: hidden;
}

.admin-categories-bulk-form {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.admin-categories-bulk-names {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.admin-categories-bulk-names textarea {
    width: 100%;
    min-height: 160px;
}

.admin-categories-bulk-form
.admin-categories-create-button {
    width: auto;
    min-width: 190px;
    min-height: 50px;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .admin-categories-bulk-form {
        grid-template-columns: 1fr;
    }

    .admin-categories-bulk-names {
        grid-column: auto;
    }

    .admin-categories-bulk-form
    .admin-categories-create-button {
        width: 100%;
    }
}
/* Main category directory filters */

.admin-category-group-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 4px 0;
}

.admin-category-group-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 43px;
    padding: 9px 15px;
    color: #46554f;
    background: #ffffff;
    border: 1px solid #d7e2de;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-category-group-filter:hover {
    color: #087454;
    background: #f3fbf7;
    border-color: #9fd7c3;
    transform: translateY(-1px);
}

.admin-category-group-filter.is-active {
    color: #ffffff;
    background: #087454;
    border-color: #087454;
    box-shadow: 0 7px 18px rgba(8, 116, 84, 0.18);
}

.admin-category-group-filter > span:not(
    .admin-category-filter-icon
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    color: #087454;
    background: #eaf8f2;
    border-radius: 999px;
    font-size: 0.74rem;
}

.admin-category-filter-icon {
    line-height: 1;
}

@media (max-width: 767.98px) {
    .admin-category-group-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }

    .admin-category-group-filter {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
/* Admin business milestones */

.admin-milestone-section {
    padding: 28px;
    background: #ffffff;
    border: 1px solid #dfe8e4;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(20, 56, 45, 0.06);
}

.admin-milestone-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.admin-milestone-period {
    padding: 9px 14px;
    color: #087454;
    background: #edf9f4;
    border: 1px solid #bee5d5;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-daily-focus {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 19px 21px;
    color: #ffffff;
    background: linear-gradient(135deg, #075b46, #0a8061);
    border-radius: 16px;
}

.admin-daily-focus.is-complete {
    background: linear-gradient(135deg, #9b7616, #c69b2d);
}

.admin-daily-focus-icon {
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    font-size: 1.45rem;
}

.admin-daily-focus-content {
    flex: 1;
}

.admin-daily-focus-content span {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-daily-focus-content h3 {
    margin: 0 0 3px;
    font-size: 1.08rem;
    font-weight: 800;
}

.admin-daily-focus-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.83);
    font-size: 0.88rem;
}

.admin-daily-focus-progress {
    font-size: 1.45rem;
}

.admin-milestone-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.admin-milestone-card {
    min-width: 0;
    padding: 19px;
    background: #fbfdfc;
    border: 1px solid #e0e9e5;
    border-radius: 15px;
}

.admin-milestone-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.admin-milestone-icon {
    font-size: 1.4rem;
}

.admin-milestone-percent {
    color: #087454;
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-milestone-card h3 {
    margin: 0 0 7px;
    color: #15251f;
    font-size: 0.98rem;
    font-weight: 800;
}

.admin-milestone-card p {
    min-height: 42px;
    margin: 0 0 14px;
    color: #6b7873;
    font-size: 0.8rem;
    line-height: 1.5;
}

.admin-milestone-values {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 10px;
}

.admin-milestone-values strong {
    color: #172821;
    font-size: 1.08rem;
}

.admin-milestone-values span {
    color: #7a8782;
    font-size: 0.76rem;
}

.admin-milestone-progress {
    height: 8px;
    overflow: hidden;
    background: #e4ece8;
    border-radius: 999px;
}

.admin-milestone-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #087454, #20a77e);
    border-radius: inherit;
}

@media (max-width: 1199.98px) {
    .admin-milestone-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-milestone-section {
        padding: 20px;
    }

    .admin-milestone-header {
        flex-direction: column;
    }

    .admin-daily-focus {
        align-items: flex-start;
    }

    .admin-daily-focus-progress {
        margin-left: auto;
    }

    .admin-milestone-grid {
        grid-template-columns: 1fr;
    }
}
/* Homepage navigation — admin dashboard theme */

.sb-home-topbar-links {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
}

.sb-home-topbar-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 10px 17px;
    color: #46534e;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.sb-home-topbar-links a:hover {
    color: #075f49;
    background: #edf7f3;
    transform: translateY(-1px);
}

.sb-home-topbar-links a.is-active {
    color: #ffffff;
    background: #087454;
    box-shadow: 0 6px 15px rgba(8, 116, 84, 0.18);
}

.sb-home-topbar-links a.is-active:hover {
    color: #ffffff;
    background: #06664a;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .sb-home-topbar-links a {
        padding-inline: 11px;
        font-size: 0.82rem;
    }

    .sb-navbar-actions {
        gap: 8px;
    }

    .sb-navbar-user {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    .sb-home-topbar-links {
        width: 100%;
        margin: 18px 0 12px !important;
        padding: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .sb-home-topbar-links a {
        width: 100%;
        justify-content: flex-start;
        padding: 13px 15px;
    }

    .sb-home-topbar-links a.is-active {
        justify-content: flex-start;
    }
}
/* =========================================================
   ADMIN DASHBOARD — MOBILE NO-HORIZONTAL-SCROLL FIX
   ========================================================= */

@media (max-width: 767.98px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .admin-dashboard-main,
    .admin-recent-orders-section,
    .admin-analytics-section,
    .admin-provider-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    /* Recent orders mobile cards */

    .admin-recent-orders-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .admin-recent-orders-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .admin-recent-orders-table thead {
        display: none;
    }

    .admin-recent-orders-table tbody {
        display: grid;
        gap: 14px;
    }

    .admin-recent-orders-table tbody tr {
        display: block;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dfe8e4;
        border-radius: 14px;
        box-shadow: 0 5px 14px rgba(22, 54, 44, 0.04);
    }

    .admin-recent-orders-table td {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        width: 100%;
        padding: 11px 14px;
        border-bottom: 1px solid #edf2ef;
        overflow-wrap: anywhere;
    }

    .admin-recent-orders-table td:last-child {
        border-bottom: 0;
    }

    .admin-recent-orders-table td::before {
        color: #75817c;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .admin-recent-orders-table td:nth-child(1)::before {
        content: "Order";
    }

    .admin-recent-orders-table td:nth-child(2)::before {
        content: "Service";
    }

    .admin-recent-orders-table td:nth-child(3)::before {
        content: "Customer";
    }

    .admin-recent-orders-table td:nth-child(4)::before {
        content: "Provider";
    }

    .admin-recent-orders-table td:nth-child(5)::before {
        content: "Status";
    }

    .admin-recent-orders-table td:nth-child(6)::before {
        content: "Payment";
    }

    .admin-recent-orders-table td:nth-child(7)::before {
        content: "Amount";
    }

    .admin-recent-orders-table td:nth-child(8)::before {
        content: "Date";
    }

    .admin-recent-order-service {
        max-width: none;
        overflow: visible;
        text-overflow: initial;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-recent-order-amount,
    .admin-recent-order-date {
        white-space: normal;
    }

    .admin-order-status,
    .admin-payment-status {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }


    /* Earnings chart mobile containment */

    .admin-analytics-chart-wrap {
        width: 100%;
        max-width: 100%;
        min-height: 240px;
        height: 240px;
        padding: 0;
        overflow: hidden;
    }

    .admin-analytics-chart-wrap canvas {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 240px !important;
    }


    /* Top providers mobile cards */

    .admin-provider-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .admin-provider-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .admin-provider-table thead {
        display: none;
    }

    .admin-provider-table tbody {
        display: grid;
        gap: 14px;
    }

    .admin-provider-table tbody tr {
        display: block;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dfe8e4;
        border-radius: 14px;
        box-shadow: 0 5px 14px rgba(22, 54, 44, 0.04);
    }

    .admin-provider-table td {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        width: 100%;
        padding: 11px 14px;
        border-bottom: 1px solid #edf2ef;
        overflow-wrap: anywhere;
    }

    .admin-provider-table td:last-child {
        border-bottom: 0;
    }

    .admin-provider-table td::before {
        color: #75817c;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .admin-provider-table td:nth-child(1)::before {
        content: "Rank";
    }

    .admin-provider-table td:nth-child(2)::before {
        content: "Provider";
    }

    .admin-provider-table td:nth-child(3)::before {
        content: "Jobs";
    }

    .admin-provider-table td:nth-child(4)::before {
        content: "Earned";
    }

    .admin-provider-identity {
        width: 100%;
        min-width: 0;
    }

    .admin-provider-identity div {
        width: 100%;
        min-width: 0;
    }

    .admin-provider-identity strong,
    .admin-provider-identity span {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /* Mobile section spacing */

    .admin-recent-orders-section,
    .admin-analytics-section,
    .admin-provider-section {
        padding: 20px;
    }

    .admin-provider-header {
        flex-direction: column;
    }

    .admin-provider-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .admin-provider-primary-button,
    .admin-provider-secondary-button {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 420px) {

    .admin-recent-orders-section,
    .admin-analytics-section,
    .admin-provider-section {
        padding: 17px;
    }

    .admin-recent-orders-table td,
    .admin-provider-table td {
        grid-template-columns: 76px minmax(0, 1fr);
        padding: 10px 12px;
    }
}
/* =========================================================
   ORDERS ADMIN — MOBILE VERTICAL CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    .admin-orders-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .admin-orders-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .admin-orders-table thead {
        display: none;
    }

    .admin-orders-table tbody {
        display: grid;
        gap: 16px;
        width: 100%;
    }

    .admin-orders-table tbody tr {
        display: block;
        width: 100%;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dce7e2;
        border-radius: 15px;
        box-shadow: 0 6px 17px rgba(24, 56, 46, 0.05);
    }

    .admin-orders-table tbody td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 13px;
        align-items: start;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        padding: 11px 14px;
        border-bottom: 1px solid #edf2ef;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .admin-orders-table tbody td:last-child {
        border-bottom: 0;
    }

    .admin-orders-table tbody td::before {
        color: #77847e;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    .admin-orders-table tbody td:nth-child(1)::before {
        content: "No.";
    }

    .admin-orders-table tbody td:nth-child(2)::before {
        content: "Order ID";
    }

    .admin-orders-table tbody td:nth-child(3)::before {
        content: "Service";
    }

    .admin-orders-table tbody td:nth-child(4)::before {
        content: "Customer";
    }

    .admin-orders-table tbody td:nth-child(5)::before {
        content: "Provider";
    }

    .admin-orders-table tbody td:nth-child(6)::before {
        content: "Order Status";
    }

    .admin-orders-table tbody td:nth-child(7)::before {
        content: "Payment";
    }

    .admin-orders-table tbody td:nth-child(8)::before {
        content: "Total";
    }

    .admin-orders-table tbody td:nth-child(9)::before {
        content: "Paid";
    }

    .admin-orders-table tbody td:nth-child(10)::before {
        content: "Commission";
    }

    .admin-orders-table tbody td:nth-child(11)::before {
        content: "Provider Amount";
    }

    .admin-orders-table tbody td:nth-child(12)::before {
        content: "Created";
    }

    .admin-orders-table tbody td:nth-child(13)::before {
        content: "Proof";
    }

    .admin-orders-table tbody td:nth-child(14)::before {
        content: "Action";
    }

    .admin-orders-table tbody td:nth-child(2) {
        color: #087454;
        font-weight: 800;
    }

    .admin-orders-table .badge {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    .admin-orders-table td .d-flex {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 8px !important;
    }

    .admin-orders-table td .btn,
    .admin-orders-table .admin-view-proof-btn {
        width: 100%;
        min-height: 42px;
        white-space: normal;
    }

    .admin-orders-pagination-wrap {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .admin-orders-pagination-wrap .pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {

    .admin-orders-table tbody td {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }
}
/* Orders mobile — restore full width for names and services */

@media (max-width: 767.98px) {

    .admin-orders-table tbody td:nth-child(3),
    .admin-orders-table tbody td:nth-child(4),
    .admin-orders-table tbody td:nth-child(5) {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .admin-orders-table tbody td:nth-child(3) {
        overflow-wrap: break-word;
        word-break: normal;
    }

    .admin-orders-table tbody td:nth-child(4),
    .admin-orders-table tbody td:nth-child(5) {
        overflow-wrap: normal;
        word-break: normal;
    }
}
/* =========================================================
   WITHDRAWALS ADMIN — MOBILE VERTICAL CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    .admin-withdrawals-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .admin-withdrawals-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .admin-withdrawals-table thead {
        display: none;
    }

    .admin-withdrawals-table tbody {
        display: grid;
        gap: 16px;
        width: 100%;
    }

    .admin-withdrawals-table tbody tr {
        display: block;
        width: 100%;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dce7e2;
        border-radius: 15px;
        box-shadow: 0 6px 17px rgba(24, 56, 46, 0.05);
    }

    .admin-withdrawals-table tbody td {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 13px;
        align-items: start;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        padding: 11px 14px;
        border-bottom: 1px solid #edf2ef;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .admin-withdrawals-table tbody td:last-child {
        border-bottom: 0;
    }

    .admin-withdrawals-table tbody td::before {
        color: #77847e;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    .admin-withdrawals-table tbody td:nth-child(1)::before {
        content: "Request";
    }

    .admin-withdrawals-table tbody td:nth-child(2)::before {
        content: "Provider";
    }

    .admin-withdrawals-table tbody td:nth-child(3)::before {
        content: "Email";
    }

    .admin-withdrawals-table tbody td:nth-child(4)::before {
        content: "Amount";
    }

    .admin-withdrawals-table tbody td:nth-child(5)::before {
        content: "Bank";
    }

    .admin-withdrawals-table tbody td:nth-child(6)::before {
        content: "Account Name";
    }

    .admin-withdrawals-table tbody td:nth-child(7)::before {
        content: "Account No.";
    }

    .admin-withdrawals-table tbody td:nth-child(8)::before {
        content: "Provider Notes";
    }

    .admin-withdrawals-table tbody td:nth-child(9)::before {
        content: "Status";
    }

    .admin-withdrawals-table tbody td:nth-child(10)::before {
        content: "Admin Notes";
    }

    .admin-withdrawals-table tbody td:nth-child(11)::before {
        content: "Requested";
    }

    .admin-withdrawals-table tbody td:nth-child(12)::before {
        content: "Processed";
    }

    .admin-withdrawals-table tbody td:nth-child(13)::before {
        content: "Action";
    }

    .admin-withdrawal-provider {
        width: 100%;
        min-width: 0;
    }

    .admin-withdrawal-provider strong {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-withdrawals-table .badge {
        justify-self: start;
        white-space: normal;
    }

    .admin-withdrawals-table .withdrawal-action-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .admin-withdrawals-table
    .withdrawal-action-form .form-control {
        width: 100%;
        min-height: 42px;
    }

    .admin-withdrawals-table
    .withdrawal-action-btn {
        width: 100%;
        min-height: 42px;
    }

    .admin-withdrawals-table td > .d-flex {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 12px !important;
    }
}

@media (max-width: 420px) {

    .admin-withdrawals-table tbody td {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }
}
/* Withdrawals mobile — remove inherited desktop column limits */

@media (max-width: 767.98px) {

    .admin-withdrawals-table tbody td {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .admin-withdrawals-table tbody td:nth-child(3) {
        font-size: 0.78rem;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .admin-withdrawals-table tbody td:nth-child(2),
    .admin-withdrawals-table tbody td:nth-child(5),
    .admin-withdrawals-table tbody td:nth-child(6),
    .admin-withdrawals-table tbody td:nth-child(7) {
        overflow-wrap: normal;
        word-break: normal;
    }
}
/* =========================================================
   PROVIDERS ADMIN — MOBILE VERTICAL CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    .admin-providers-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .admin-providers-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .admin-providers-table thead {
        display: none;
    }

    .admin-providers-table tbody {
        display: grid;
        gap: 16px;
        width: 100%;
    }

    .admin-providers-table tbody tr {
        display: block;
        width: 100%;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dce7e2;
        border-radius: 15px;
        box-shadow: 0 6px 17px rgba(24, 56, 46, 0.05);
    }

    .admin-providers-table tbody td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 13px;
        align-items: start;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 11px 14px;
        overflow: visible !important;
        border-bottom: 1px solid #edf2ef;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .admin-providers-table tbody td:last-child {
        border-bottom: 0;
    }

    .admin-providers-table tbody td::before {
        color: #77847e;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    .admin-providers-table tbody td:nth-child(1)::before {
        content: "Provider ID";
    }

    .admin-providers-table tbody td:nth-child(2)::before {
        content: "Provider";
    }

    .admin-providers-table tbody td:nth-child(3)::before {
        content: "Email";
    }

    .admin-providers-table tbody td:nth-child(4)::before {
        content: "Phone";
    }

    .admin-providers-table tbody td:nth-child(5)::before {
        content: "Business";
    }

    .admin-providers-table tbody td:nth-child(6)::before {
        content: "Verification";
    }

    .admin-providers-table tbody td:nth-child(7)::before {
        content: "Rank";
    }

    .admin-providers-table tbody td:nth-child(8)::before {
        content: "Access";
    }

    .admin-providers-table tbody td:nth-child(9)::before {
        content: "Registered";
    }

    .admin-providers-table tbody td:nth-child(10)::before {
        content: "Action";
    }

    .admin-provider-directory-identity {
        width: 100%;
        min-width: 0;
    }

    .admin-provider-directory-identity strong {
        min-width: 0;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .admin-providers-table tbody td:nth-child(3) {
        font-size: 0.78rem;
        overflow-wrap: anywhere;
    }

    .admin-providers-table tbody td:nth-child(4) {
        white-space: normal !important;
    }

    .admin-providers-table tbody td:nth-child(4) a {
        white-space: normal !important;
    }

    .admin-providers-table tbody td:nth-child(5) {
        overflow-wrap: break-word;
    }

    .admin-providers-table .badge,
    .admin-provider-access-status {
        justify-self: start;
        white-space: normal;
    }

    .admin-providers-table tbody td:nth-child(6) .d-flex {
        justify-content: flex-start;
        width: 100%;
    }

    .admin-providers-table tbody td:nth-child(10) > .d-flex {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px !important;
    }

    .admin-providers-table tbody td:nth-child(10) form,
    .admin-providers-table tbody td:nth-child(10) a,
    .admin-providers-table tbody td:nth-child(10) button {
        width: 100%;
        min-width: 0;
    }

    .admin-providers-table tbody td:nth-child(10) .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        white-space: normal;
    }

    .admin-providers-list-section .pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {

    .admin-providers-table tbody td {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }

    .admin-providers-table tbody td:nth-child(10) > .d-flex {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   CUSTOMERS ADMIN — MOBILE VERTICAL CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    .admin-customers-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .admin-customers-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .admin-customers-table thead {
        display: none;
    }

    .admin-customers-table tbody {
        display: grid;
        gap: 16px;
        width: 100%;
    }

    .admin-customers-table tbody tr {
        display: block;
        width: 100%;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dce7e2;
        border-radius: 15px;
        box-shadow: 0 6px 17px rgba(24, 56, 46, 0.05);
    }

    .admin-customers-table tbody td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 13px;
        align-items: start;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 11px 14px;
        overflow: visible !important;
        border-bottom: 1px solid #edf2ef;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .admin-customers-table tbody td:last-child {
        border-bottom: 0;
    }

    .admin-customers-table tbody td::before {
        color: #77847e;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    .admin-customers-table tbody td:nth-child(1)::before {
        content: "Customer ID";
    }

    .admin-customers-table tbody td:nth-child(2)::before {
        content: "Customer";
    }

    .admin-customers-table tbody td:nth-child(3)::before {
        content: "Email";
    }

    .admin-customers-table tbody td:nth-child(4)::before {
        content: "Phone";
    }

    .admin-customers-table tbody td:nth-child(5)::before {
        content: "Date of Birth";
    }

    .admin-customers-table tbody td:nth-child(6)::before {
        content: "Terms";
    }

    .admin-customers-table tbody td:nth-child(7)::before {
        content: "Access";
    }

    .admin-customers-table tbody td:nth-child(8)::before {
        content: "Registered";
    }

    .admin-customers-table tbody td:nth-child(9)::before {
        content: "Action";
    }

    .admin-customer-directory-identity {
        width: 100%;
        min-width: 0;
    }

    .admin-customer-directory-identity strong {
        min-width: 0;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .admin-customers-table tbody td:nth-child(3) {
        font-size: 0.78rem;
        overflow-wrap: anywhere;
    }

    .admin-customers-table tbody td:nth-child(4),
    .admin-customers-table tbody td:nth-child(4) a {
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
    }

    .admin-customers-table .badge,
    .admin-customer-access-status {
        justify-self: start;
        white-space: normal;
    }

    .admin-customers-table tbody td:nth-child(9) > .d-flex {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px !important;
    }

    .admin-customers-table tbody td:nth-child(9) form,
    .admin-customers-table tbody td:nth-child(9) button {
        width: 100%;
        min-width: 0;
    }

    .admin-customers-table tbody td:nth-child(9) .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        white-space: normal;
    }

    .admin-customers-list-section .pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {

    .admin-customers-table tbody td {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }

    .admin-customers-table tbody td:nth-child(9) > .d-flex {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   SERVICES ADMIN — MOBILE VERTICAL CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    .admin-services-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .admin-services-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .admin-services-table thead {
        display: none;
    }

    .admin-services-table tbody {
        display: grid;
        gap: 16px;
        width: 100%;
    }

    .admin-services-table tbody tr {
        display: block;
        width: 100%;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dce7e2;
        border-radius: 15px;
        box-shadow: 0 6px 17px rgba(24, 56, 46, 0.05);
    }

    .admin-services-table tbody td {
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 13px;
        align-items: start;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 11px 14px;
        overflow: visible !important;
        border-bottom: 1px solid #edf2ef;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .admin-services-table tbody td:last-child {
        border-bottom: 0;
    }

    .admin-services-table tbody td::before {
        color: #77847e;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    .admin-services-table tbody td:nth-child(1)::before {
        content: "Service ID";
    }

    .admin-services-table tbody td:nth-child(2)::before {
        content: "Service";
    }

    .admin-services-table tbody td:nth-child(3)::before {
        content: "Category";
    }

    .admin-services-table tbody td:nth-child(4)::before {
        content: "Provider";
    }

    .admin-services-table tbody td:nth-child(5)::before {
        content: "Price";
    }

    .admin-services-table tbody td:nth-child(6)::before {
        content: "Status";
    }

    .admin-services-table tbody td:nth-child(7)::before {
        content: "Image";
    }

    .admin-services-table tbody td:nth-child(8)::before {
        content: "Created";
    }

    .admin-services-table tbody td:nth-child(9)::before {
        content: "Action";
    }

    .admin-service-directory-title,
    .admin-service-provider {
        width: 100%;
        min-width: 0;
    }

    .admin-service-directory-title strong,
    .admin-service-provider strong {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .admin-service-directory-title small {
        margin-top: 4px;
    }

    .admin-service-category,
    .admin-service-status {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .admin-service-price,
    .admin-service-created-date {
        white-space: normal;
    }

    .admin-services-table .view-image-btn,
    .admin-services-table .remove-service-btn,
    .admin-services-table .remove-service-form {
        width: 100%;
        min-width: 0;
    }

    .admin-services-table .view-image-btn,
    .admin-services-table .remove-service-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        white-space: normal;
    }

    .admin-services-list-section .pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {

    .admin-services-table tbody td {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }
}
/* =========================================================
   CATEGORIES ADMIN — MOBILE VERTICAL CARDS
   ========================================================= */

@media (max-width: 767.98px) {

    /* Prevent horizontal page scrolling */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .admin-categories-main,
    .admin-categories-list-section,
    .admin-categories-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Main-category filter buttons */
    .admin-category-group-filters {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        overflow: visible;
    }

    .admin-category-group-filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        margin: 0;
        white-space: normal;
    }

    /* Remove desktop table behaviour */
    .admin-categories-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .admin-categories-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border: 0;
    }

    .admin-categories-table thead {
        display: none;
    }

    .admin-categories-table tbody {
        display: grid;
        gap: 18px;
        width: 100%;
    }

    /* Each category becomes one vertical card */
    .admin-categories-table tbody tr {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid #dbe7e2;
        border-radius: 18px;
        background: #ffffff;
    }

    .admin-categories-table tbody td {
        display: block;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 16px;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        border: 0;
    }

    .admin-categories-table tbody td + td {
        border-top: 1px solid #e6eeeb;
    }

    /* Mobile field headings */
    .admin-categories-table tbody td::before {
        display: block;
        margin-bottom: 8px;
        color: #68766f;
        font-size: 0.76rem;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .admin-categories-table tbody td:nth-child(1)::before {
        content: "Category ID";
    }

    .admin-categories-table tbody td:nth-child(2)::before {
        content: "Category Information";
    }

    .admin-categories-table tbody td:nth-child(3)::before {
        content: "Delete";
    }

    .admin-category-directory-id {
        display: inline-block;
        font-size: 1rem;
    }

    /* Stack all editing fields vertically */
    .admin-category-edit-form,
    .admin-category-grouped-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .admin-category-edit-field,
    .admin-category-status-field {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .admin-category-edit-field label {
        display: block;
        margin-bottom: 7px;
    }

    .admin-category-edit-field input,
    .admin-category-edit-field select,
    .admin-category-name-input,
    .admin-category-status-select {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Full-width actions */
    .admin-category-save-button,
    .admin-category-delete-form,
    .admin-category-delete-button {
        display: block;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .admin-category-save-button,
    .admin-category-delete-button {
        min-height: 48px;
    }
}
/* =========================================================
   ADMIN TOPBAR QUICK SEARCH
   ========================================================= */

.admin-quick-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 15px;
    color: #006b52;
    background: #ffffff;
    border: 1px solid #cfe0da;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-quick-search-button:hover {
    color: #ffffff;
    background: #007f61;
    border-color: #007f61;
    transform: translateY(-1px);
}

.admin-quick-search-button > span:first-child {
    font-size: 1.35rem;
    line-height: 1;
}

.admin-quick-search-modal .modal-dialog {
    width: calc(100% - 30px);
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
}

.admin-quick-search-modal .modal-content {
    overflow: hidden;
    border: 1px solid #dce8e3;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 45, 34, 0.2);
}

.admin-quick-search-modal .modal-header {
    align-items: flex-start;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e4ece9;
}

.admin-search-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #008264;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.admin-quick-search-modal .modal-title {
    color: #14201c;
    font-size: 1.4rem;
    font-weight: 800;
}

.admin-quick-search-modal .modal-body {
    padding: 20px 24px 24px;
}

.admin-page-search-field {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid #cadbd5;
    border-radius: 13px;
    background: #ffffff;
}

.admin-page-search-field:focus-within {
    border-color: #008264;
    box-shadow: 0 0 0 3px rgba(0, 130, 100, 0.12);
}

.admin-page-search-field > span {
    color: #008264;
    font-size: 1.35rem;
}

.admin-page-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #14201c;
    font: inherit;
}

.admin-page-search-results {
    display: grid;
    gap: 8px;
    max-height: 420px;
    margin-top: 16px;
    overflow-y: auto;
}

.admin-page-search-result {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    color: #14201c;
    border: 1px solid #e1eae6;
    border-radius: 13px;
    text-decoration: none;
}

.admin-page-search-result:hover {
    color: #14201c;
    background: #effaf6;
    border-color: #acd8c9;
}

.admin-page-search-result[hidden] {
    display: none !important;
}

.admin-page-search-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: #eaf8f3;
    border-radius: 11px;
    font-size: 1.15rem;
}

.admin-page-search-result strong,
.admin-page-search-result small {
    display: block;
}

.admin-page-search-result strong {
    font-size: 0.96rem;
    font-weight: 800;
}

.admin-page-search-result small {
    margin-top: 2px;
    color: #718078;
    font-size: 0.79rem;
}

.admin-page-search-arrow {
    color: #008264;
    font-size: 1.1rem;
    font-weight: 800;
}

.admin-page-search-empty {
    padding: 25px 15px;
    color: #718078;
    text-align: center;
}

/* Phone layout */
@media (max-width: 767.98px) {

    .admin-quick-search-button {
        width: 100%;
        margin: 8px 0;
    }

    .admin-quick-search-button-text {
        display: inline;
    }

    .admin-quick-search-modal .modal-header {
        padding: 19px 18px 15px;
    }

    .admin-quick-search-modal .modal-body {
        padding: 16px 18px 20px;
    }

    .admin-page-search-results {
        max-height: 55vh;
    }

    .admin-page-search-result {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        padding: 11px;
    }

    .admin-page-search-icon {
        width: 40px;
        height: 40px;
    }

    .admin-page-search-result small {
        white-space: normal;
        overflow-wrap: break-word;
    }
}
/* =========================================================
   ADMIN GLOBAL RECORD SEARCH
   ========================================================= */

.admin-global-search {
    display: flex;
    align-items: center;
    width: 270px;
    min-height: 46px;
    margin-right: 14px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cfded9;
    border-radius: 12px;
}

.admin-global-search:focus-within {
    border-color: #008264;
    box-shadow: 0 0 0 3px rgba(0, 130, 100, 0.1);
}

.admin-global-search-icon {
    flex: 0 0 auto;
    padding-left: 13px;
    color: #008264;
    font-size: 1.2rem;
}

.admin-global-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 9px;
    color: #15201c;
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 0.82rem;
}

.admin-global-search button {
    align-self: stretch;
    flex: 0 0 auto;
    padding: 0 13px;
    color: #ffffff;
    background: #007f61;
    border: 0;
    font: inherit;
    font-size: 0.79rem;
    font-weight: 800;
    cursor: pointer;
}

.admin-global-search button:hover {
    background: #006d53;
}

@media (max-width: 991.98px) {

    .admin-global-search {
        width: 100%;
        margin: 10px 0;
    }

    .admin-global-search input {
        min-height: 48px;
        font-size: 1rem;
    }

    .admin-global-search button {
        padding-right: 18px;
        padding-left: 18px;
    }
}
/* =========================================================
   KEEP ADMIN LOGOUT BUTTON INSIDE SCREEN
   ========================================================= */

.admin-topbar .container {
    width: 100%;
    max-width: 100%;
    padding-right: 18px;
    padding-left: 18px;
}

.admin-topbar .navbar-collapse {
    min-width: 0;
}

.admin-orders-topbar-links {
    flex-shrink: 1;
}

.admin-global-search {
    flex: 0 1 230px;
    width: 230px;
    min-width: 190px;
    margin-right: 10px;
}

.admin-topbar-profile {
    flex-shrink: 0;
}

.admin-topbar-notification,
.admin-topbar-logout {
    flex-shrink: 0;
}

/* Medium desktop and iPad landscape */
@media (max-width: 1450px) {

    .admin-orders-topbar-links {
        gap: 3px;
    }

    .admin-orders-topbar-links a {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 0.82rem;
    }

    .admin-global-search {
        flex-basis: 205px;
        width: 205px;
        min-width: 170px;
    }

    
}

/* Collapsed phone/tablet navigation */
@media (max-width: 991.98px) {

    .admin-topbar .navbar-collapse {
        overflow: visible;
    }

    .admin-global-search {
        width: 100%;
        min-width: 0;
        margin: 10px 0;
    }

    .admin-topbar-profile-copy {
        display: block;
    }

    .admin-topbar-logout {
        display: flex;
        width: 100%;
        margin-top: 8px;
        justify-content: center;
    }
}
/* Give the admin Logout button space from the screen edge */

.admin-topbar {
    box-sizing: border-box;
    padding-right: 24px !important;
    padding-left: 16px !important;
}

.admin-topbar .container {
    box-sizing: border-box;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.admin-topbar-logout {
    margin-right: 0 !important;
}
/* Restore administrator information */

@media (min-width: 992px) {

    .admin-topbar-profile-copy {
        display: flex !important;
        flex-direction: column;
        min-width: 105px;
        margin-left: 8px;
        line-height: 1.2;
    }

    .admin-topbar-profile-copy span {
        font-size: 0.78rem;
        font-weight: 700;
    }

    .admin-topbar-profile-copy strong {
        margin-top: 3px;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .admin-topbar-profile {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
}
/* Clean administrator profile display */

@media (min-width: 992px) {

    .admin-topbar-profile {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 155px;
        max-width: none !important;
    }

    .admin-topbar-profile-copy {
        display: flex !important;
        flex: 1 0 auto;
        flex-direction: column;
        width: auto !important;
        min-width: 95px;
        max-width: none !important;
        margin: 0;
        overflow: visible !important;
    }

    .admin-topbar-profile-copy span,
    .admin-topbar-profile-copy strong {
        display: block;
        width: auto;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .admin-topbar-profile-copy span {
        color: #17221e;
        font-size: 0.78rem;
        font-weight: 800;
    }

    .admin-topbar-profile-copy strong {
        margin-top: 3px;
        color: #7a8781;
        font-size: 0.69rem;
        font-weight: 700;
    }

    /* Recover space for the complete administrator name */
    .admin-global-search {
        flex-basis: 215px;
        width: 215px;
        min-width: 180px;
    }
}
/* Provider bottom navigation — show section titles on phone */
@media (max-width: 767.98px) {
    .sb-provider-dashboard #incomingRequestsSection,
    .sb-provider-dashboard #servicesSection,
    .sb-provider-dashboard #withdrawalsSection {
        scroll-margin-top: 110px;
    }
}