:root{
  /* hero background + overlay */
  --rb-customer-hero:url('hero.webp');
  --rb-customer-overlay:rgba(15,23,42,0.90);
  --rb-customer-bg:#212d45;

  /* bottom nav */
  --rb-nav-btn-bg:#ffc03d;
  --rb-nav-btn-text:#111827;

  /* top menu cards */
  --rb-top-card-active:#212d45;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* PAGE BACKGROUND: hero + overlay */
.customer-body{
  min-height:100vh;
  background-color:var(--rb-customer-bg);
  background-image:var(--rb-customer-hero);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:relative;
  display:flex;
  justify-content:center;
  color:#0f172a;
}
.customer-body::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--rb-customer-overlay);
  pointer-events:none;
  z-index:0;
}
.customer-shell{
  position:relative;
  z-index:1;
}

.screen.hidden{display:none;}

/* TOP MENU BUTTON WRAPPER */
.menu-btn{
  background:none;
  border:none;
  padding:0;
  margin:0;
  text-align:inherit;
}
.menu-btn:focus{
  outline:none;
  box-shadow:none;
}

/* TOP MENU CARDS */
.top-menu-card{
  border-radius:1rem;
}

.menu-card{
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(226,232,240,1);
  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease,
    border-color .15s ease;
}

.menu-card:hover,
.menu-card--default-active{
  background:var(--rb-top-card-active) !important;
  border-color:var(--rb-top-card-active) !important;
  color:#ffffff;
  box-shadow:0 18px 40px rgba(15,23,42,0.7);
  transform:translateY(-1px);
}

.menu-card:hover h2,
.menu-card:hover p,
.menu-card:hover span,
.menu-card:hover i,
.menu-card--default-active h2,
.menu-card--default-active p,
.menu-card--default-active span,
.menu-card--default-active i{
  color:#ffffff !important;
}

/* Pills on top cards */
.pill-tag{
  border-radius:999px;
}
.menu-card:hover .pill-tag,
.menu-card.menu-card--default-active .pill-tag{
  background:rgba(255,255,255,0.15) !important;
  border-color:rgba(255,255,255,0.75) !important;
  color:#ffffff !important;
}

/* BOTTOM NAV BUTTONS */
.tab-btn{
  border-radius:9999px;
  transition:
    background-color .15s ease,
    color .15s ease,
    transform .15s ease;
}
.tab-btn:hover,
.tab-btn.tab-active{
  background:var(--rb-nav-btn-bg);
  color:var(--rb-nav-btn-text) !important;
  transform:translateY(-1px);
}

/* Payment status badges */
.badge-status{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  border-width:1px;
  border-style:solid;
}
.bg-green{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.bg-amber{background:#fff7ed;color:#92400e;border-color:#fed7aa}
.bg-gray{background:#f1f5f9;color:#334155;border-color:#e2e8f0}

/* optional – makes the inline map look a bit crisper */
.map-shell svg {
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Distance pill on map */
.rb-distance-pill {
  background: rgba(15, 23, 42, 0.92);
  color: #e5e7eb;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.6);
}

/* Always-visible marker captions */
.rb-marker-label {
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  font-size: 11px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.6);
}
.leaflet-tooltip.rb-marker-label {
  margin-top: -4px;
}

/* Photo preview thumbnails */
.rb-photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.rb-photo-thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.8);
  background: #f8fafc;
}

.rb-photo-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rb-photo-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: none;
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rb-photo-thumb-remove:hover {
  background: rgba(220,38,38,0.95);
}

/* Job summary modal layout */
.rb-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 0.75rem;
}

.rb-summary-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  margin-bottom: 2px;
}

.rb-summary-text {
  font-size: 12px;
  color: #0f172a;
  margin-bottom: 0;
}

.rb-summary-notes {
  grid-column: 1 / -1;
}

.rb-summary-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rb-summary-photo-item {
  width: 72px;
  height: 72px;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.6);
  background: #f8fafc;
}

.rb-summary-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tab-btn-disabled,
.menu-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}