@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");

:root {
  --bg: #f3f3f3;
  --surface: #ffffff;
  --surface-2: #ebf2f7;
  --border: #dee2e4;
  --border-strong: #d1dfe5;
  --text: #28363e;
  --text-muted: #6c8ea0;
  --brand: #00b53f;
  --brand-hover: #009c36;
  --brand-dark: #006304;
  --brand-tint: #e5f6e8;
  --brand-tint-strong: #c2e8c6;
  --success: #00b53f;
  --danger: #fc2533;
  --danger-tint: #fde6e7;
  --warning: #fea03c;
  --radius: 8px;
  --shadow-sm: 0 2px 3px rgba(50, 46, 40, 0.1), 0 4px 16px rgba(50, 46, 40, 0.02);
  --shadow-md: 0 6px 14px -6px rgba(24, 39, 75, 0.08), 0 10px 32px -4px rgba(24, 39, 75, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

header.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.brand {
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--brand);
  letter-spacing: -0.02em;
}
.brand span {
  color: var(--warning);
}
.brand:hover {
  text-decoration: none;
  color: var(--brand-hover);
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
nav.main-nav a {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
}
nav.main-nav a:hover {
  color: var(--brand);
  text-decoration: none;
}
nav.main-nav a.nav-cta {
  background: var(--brand);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
}
nav.main-nav a.nav-cta:hover {
  background: var(--brand-hover);
  color: #fff;
}

/* EN/SW toggle in the site header - a plain pill of two links (see
   partials/language-toggle.ejs), each just GET /language/:lang?returnTo=...
   which sets a cookie and redirects back. Styled to sit inline with the
   rest of the nav rather than mjengoni-mobile/web's version of this same
   toggle, which sits in a colored header block and can use translucent-
   white pill styling that would have no contrast here. */
.language-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.language-toggle a {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}
.language-toggle a:hover {
  text-decoration: none;
  color: var(--text);
}
.language-toggle a.active {
  background: var(--brand);
  color: #fff;
}

.nav-avatar-link {
  display: flex;
  align-items: center;
}
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-strong);
}

.notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.notif-bell-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.notif-bell-btn:hover {
  color: var(--brand);
}
.notif-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  overflow: hidden;
}
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.9rem;
}
.notif-mark-all-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.notif-mark-all-btn:hover {
  text-decoration: underline;
}

.notif-list {
  max-height: 340px;
  overflow-y: auto;
}
.notif-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.notif-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.notif-item:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.notif-item:last-child {
  border-bottom: none;
}
.notif-item.unread {
  background: var(--brand-tint);
}
.notif-item-title {
  font-size: 0.85rem;
  font-weight: 600;
}
.notif-item-message {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.notif-item-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.notif-item-images {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.notif-item-images img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.notif-item-images-more {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.notif-view-all {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.nav-link-button {
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.nav-link-button:hover {
  color: var(--brand);
  text-decoration: underline;
}

main {
  padding: 32px 0 64px;
  min-height: 60vh;
}

footer.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.88rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding: 40px 0 32px;
}

.footer-col .brand {
  font-size: 1.3rem;
}

.footer-blurb {
  margin: 12px 0 0;
  max-width: 320px;
  line-height: 1.6;
}

.footer-heading {
  margin: 0 0 14px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  font-weight: 700;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  color: var(--text-muted);
}
.footer-links a:hover {
  color: var(--brand);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 16px 0;
  text-align: center;
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

h1 {
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
}
p.lead {
  color: var(--text-muted);
  margin-top: 0;
}

.slideshow {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
  height: 320px;
  box-shadow: var(--shadow-sm);
}

.slideshow-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
.slide.active {
  opacity: 1;
  visibility: visible;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 48px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 65%, transparent 100%);
  color: #fff;
  max-width: 640px;
}
.slide-caption h2 {
  color: #fff;
  font-size: 1.6rem;
  margin: 0;
}
.slide-caption p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  max-width: 440px;
}
.slide-caption .btn {
  width: fit-content;
  margin-top: 6px;
}

.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.slide-nav:hover {
  background: rgba(0, 0, 0, 0.55);
}
.slide-nav.prev {
  left: 16px;
}
.slide-nav.next {
  right: 16px;
}

.slide-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.slide-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}
.slide-dot.active {
  background: #fff;
}

@media (max-width: 720px) {
  .slideshow {
    height: 260px;
  }
  .slide-caption {
    padding: 0 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%);
    max-width: 100%;
  }
  .slide-caption h2 {
    font-size: 1.25rem;
  }
}

.hero {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-strong);
  border-radius: var(--radius);
  padding: 48px 32px;
  margin-bottom: 40px;
}
.hero h1 {
  font-size: 2.1rem;
  max-width: 640px;
  color: var(--brand-dark);
}
.hero p.lead {
  max-width: 560px;
  color: var(--text);
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover {
  background: var(--brand-hover);
  text-decoration: none;
  color: #fff;
}
.btn.secondary {
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn.secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: #fff;
}
.btn:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-facebook {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1877f2;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  width: 100%;
}
.btn-facebook:hover {
  background: #166fe5;
  color: #fff;
  text-decoration: none;
}

.auth-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #3c4043;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  width: 100%;
}
.btn-google:hover {
  background: #f7f7f8;
  color: #3c4043;
  text-decoration: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2);
}

/* Shimmer sweep shown while a laptop photo is still loading - the
   onload/onerror handlers on each <img> add .loaded the moment the browser
   has something to paint (including an instant fire for an already-cached
   image), which is what stops the animation and clears the placeholder
   fill; a plain static gray background alone doesn't communicate that
   something is actually in progress the way a moving sweep does. */
.img-shimmer {
  background: linear-gradient(100deg, var(--surface-2) 30%, #f5f7f8 50%, var(--surface-2) 70%);
  background-size: 400% 100%;
  animation: img-shimmer-sweep 1.4s ease-in-out infinite;
}
.img-shimmer.loaded {
  animation: none;
  background: none;
}
@keyframes img-shimmer-sweep {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Centered spinner shown on top of the shimmer while a laptop photo card
   or the detail page's main photo is loading - a sibling <span> (not a
   pseudo-element) since ::before/::after don't reliably render on replaced
   elements like <img>. Positioned relative to the nearest positioned
   ancestor (.card / .detail-gallery), toggled the same way as the shimmer:
   the <img>'s onload/onerror adds .loaded to this element directly. */
.img-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  animation: img-spinner-spin 0.7s linear infinite;
  pointer-events: none;
}
.img-spinner.loaded {
  display: none;
}
@keyframes img-spinner-spin {
  to { transform: rotate(360deg); }
}
.card h3 {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.card .brand-tag {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.card .price {
  font-weight: 900;
  color: var(--text);
  font-size: 1.15rem;
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.price-strike {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
}
.price-discount {
  color: var(--danger);
}
.offer-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--danger);
  color: #fff;
}
.new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fea03c;
  color: #fff;
}
.detail-offer-countdown {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.offer-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--danger-tint);
  color: var(--danger);
}
.offer-countdown.offer-expired {
  background: var(--surface-2);
  color: var(--text-muted);
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge.in-stock {
  background: var(--brand-tint-strong);
  color: var(--brand-dark);
}
.badge.out-of-stock {
  background: var(--danger-tint);
  color: var(--danger);
}
.badge.pending {
  background: #fff3e0;
  color: #a65c00;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

input, select, textarea {
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.95rem;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

form.stacked {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
}

.auth-card {
  max-width: 400px;
  margin: 40px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.auth-card h1 {
  margin-top: 0;
  text-align: center;
}
.auth-card .lead {
  text-align: center;
  margin-bottom: 20px;
}
.auth-card form.stacked {
  max-width: none;
}
form.stacked label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.detail-gallery {
  position: relative;
}
.detail-main-image {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  cursor: zoom-in;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--surface-2);
}
.zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}
.laptop-thumb-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.laptop-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.laptop-thumb:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.laptop-thumb.active {
  opacity: 1;
  border-color: var(--brand);
}
.detail-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.spec-section-title {
  font-size: 0.95rem;
  margin: 22px 0 4px;
  color: var(--text);
}
.spec-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.spec-list li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85rem;
}
.spec-list li strong {
  display: block;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.feature-chip {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-strong);
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.badge.condition-new {
  background: var(--brand-tint-strong);
  color: var(--brand-dark);
}
.badge.condition-refurbished {
  background: #fff3e0;
  color: #a65c00;
}
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: rgba(20, 24, 27, 0.9);
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.alert {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}
.alert.error {
  background: var(--danger-tint);
  border: 1px solid #fbb;
  color: var(--danger);
}
.alert.success {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-strong);
  color: var(--brand-dark);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

table.summary {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
table.summary th, table.summary td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
table.summary th {
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.total-row td {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--brand-dark);
  border-top: 2px solid var(--border);
  border-bottom: none;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  border-left: 2px solid var(--border);
}
.timeline li {
  position: relative;
  padding: 0 0 22px 22px;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--surface);
}
.timeline li:first-child::before {
  background: var(--warning);
}
.timeline .status {
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text);
}
.timeline .meta {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 32px 0;
}
.page-link {
  color: var(--brand);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.page-link:hover {
  background: var(--brand-tint);
  text-decoration: none;
}
.page-link.disabled {
  color: var(--text-muted);
  border-color: var(--border);
  pointer-events: none;
  opacity: 0.5;
}
.page-info {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.ref-code {
  font-family: "SFMono-Regular", Consolas, monospace;
  background: var(--brand-tint);
  color: var(--brand-dark);
  border: 1px solid var(--brand-tint-strong);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 720px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Floating chat widget --- */
.chat-widget-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  border: none;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
}
.chat-widget-btn:hover {
  background: var(--brand-hover);
}

.chat-widget-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid #fff;
}

.chat-widget-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 460px;
  max-height: calc(100vh - 140px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  flex-direction: column;
  overflow: hidden;
}

.chat-widget-header {
  background: var(--brand);
  color: #fff;
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-widget-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.chat-widget-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chat-widget-call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.chat-widget-call:hover {
  background: rgba(255, 255, 255, 0.3);
}

.chat-widget-name-form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-widget-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-widget-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 20px;
}

/* Shared by both the customer widget thread and the admin chat-detail
   thread - a missed/declined call logged as a centered system notice
   instead of a regular left/right message bubble. */
.chat-system-row {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
  margin: 6px 0;
}

/* Admin-side customer online/offline indicator, used on both the chats
   list rows and the chat-detail header badge. */
.presence-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa0a6;
  display: inline-block;
  flex-shrink: 0;
}
.presence-dot.online {
  background: #34a853;
  box-shadow: 0 0 0 2px rgba(52, 168, 83, 0.2);
}
.presence-dot.offline {
  background: #9aa0a6;
}

.chat-widget-bubble-row {
  display: flex;
  max-width: 85%;
}
.chat-widget-bubble-row.from-customer {
  align-self: flex-end;
}
.chat-widget-bubble-row.from-admin {
  align-self: flex-start;
}

.chat-widget-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.87rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.from-customer .chat-widget-bubble {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.from-admin .chat-widget-bubble {
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.chat-widget-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
}
.chat-widget-input-row input {
  flex: 1;
}

.chat-widget-call-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  text-align: center;
}
.chat-widget-call-panel .call-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  animation: call-pulse 1.6s ease-in-out infinite;
}
.call-status-text {
  font-weight: 600;
  font-size: 0.95rem;
}
.call-timer {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.call-controls {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* Video call - replaces the pulsing avatar with the actual video feeds
   while a video call is active; the avatar element itself is just hidden
   rather than removed, so falling back to audio (camera denied/unavailable)
   can show it again with no extra markup. */
.chat-widget-video-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #0f141a;
  margin-bottom: 8px;
}
.chat-widget-remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f141a;
}
.chat-widget-local-video {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  transform: scaleX(-1);
  background: #1c242d;
}

@keyframes call-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 181, 63, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(0, 181, 63, 0); }
}

/* Mobile site gate - shown full-screen to mobile-browser visitors only (see
   middleware/deviceDetect.js) briefly before redirecting to the mobile web
   app (mjengoni-mobile's web export); "Continue in browser" opts out and is
   remembered via localStorage. */
.app-gate {
  position: fixed;
  /* Longhand instead of the `inset` shorthand (unsupported before ~2020) -
     this overlay needs to cover the screen even on browsers old enough to
     silently drop the whole declaration rather than fall back. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  /* Plain-color fallback before the var() line: a browser without CSS
     custom property support (pre-Chrome 49 / pre-Safari 9.1) can't parse
     `var(...)` at all and drops that whole declaration, so without this
     first line the overlay would have no background rather than falling
     back to something reasonable. */
  background: #006304;
  background: var(--brand-dark);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.app-gate-card {
  max-width: 340px;
  text-align: center;
  color: #fff;
}
.app-gate-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  /* Unprefixed `animation` wasn't usable in Chrome until ~43 - this page
     targets Chrome 29+, so the -webkit- prefixed form (supported since
     Chrome 4) has to carry it on anything older than that. Missing this
     just leaves the spinner static rather than breaking anything, but
     it's cheap to cover. */
  -webkit-animation: app-gate-spin 0.8s linear infinite;
  animation: app-gate-spin 0.8s linear infinite;
}
@-webkit-keyframes app-gate-spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes app-gate-spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.app-gate-card h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: #fff;
}
.app-gate-sub {
  margin: 0;
  color: #e5f6e8; /* fallback for browsers without CSS custom properties */
  color: var(--brand-tint);
  font-size: 0.9rem;
}
.app-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.app-gate-btn {
  border-radius: 8px; /* fallback for browsers without CSS custom properties */
  border-radius: var(--radius);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.app-gate-btn.secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.app-gate-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}