/* =================================
   ZP OFFICE & BRANCHES – FLUID LAYOUT
   ================================= */

/* COLOR THEME */
:root {
  --zp-primary: #0066cc;
  --zp-bg: #f4f6fb;
  --zp-white: #ffffff;
  --zp-text: #222;
  --zp-border: #ddd;
}

/* SECTION (FULL WIDTH LIKE CONTAINER-FLUID) */
#zp-office-branches {
  width: 100%;
  padding: 40px 12px; /* small side padding */
  font-family: Arial, sans-serif;
  color: var(--zp-text);
 
}

/* WRAPPER (FLUID CONTAINER) */
#zp-office-branches .zp-wrapper {
  width: 100%;
  max-width: 1127px; /* wide but controlled */
  margin: 0 auto;
  background: var(--zp-white);
  padding: 35px 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06);
}

/* TITLES */
#zp-office-branches .zp-title {
  text-align: center;
  color: var(--zp-primary);
  margin: 35px 0 10px;
  font-size: 22px;
}

/* DIVIDER */
#zp-office-branches .zp-divider {
  width: 70px;
  height: 3px;
  background: var(--zp-primary);
  margin: 0 auto 25px;
  border-radius: 3px;
}

/* TEXT */
#zp-office-branches p {
  line-height: 1.7;
  margin-bottom: 12px;
  text-align: left;
}

#zp-office-branches .zp-highlight {
  font-weight: bold;
  color: var(--zp-primary);
  margin-bottom: 30px;
}

/* CONTACT LIST */
#zp-office-branches .zp-contact {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

#zp-office-branches .zp-contact li {
  margin-bottom: 8px;
}

/* ==============================
   BRANCHES TABLE – FRONTEND ONLY
   ============================== */

#zp-office-branches .zp-table-wrap {
  overflow-x: auto;
}

/* Table base */
#zp-office-branches table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #ffffff;
}

/* Header + cells */
#zp-office-branches th,
#zp-office-branches td {
  border: 1px solid var(--zp-border);
  padding: 12px 10px;
  text-align: center;          /* horizontal center */
  vertical-align: middle;      /* vertical center */
  line-height: 1.4;
}

/* Header styling */
#zp-office-branches th {
  background: #e8f1fb;
  font-weight: 600;
  color: #1a2b4c;
}

/* Body rows */
#zp-office-branches tbody tr {
  transition: background 0.2s ease;
}

/* Hover effect */
#zp-office-branches tbody tr:hover {
  background: #f4f8ff;
}

/* Zebra striping */
#zp-office-branches tbody tr:nth-child(even) {
  background: #fafbfd;
}

/* Address column readability */
#zp-office-branches td:last-child {
  text-align: center;
  max-width: 280px;
  word-wrap: break-word;
}

/* Mobile improvement */
@media (max-width: 768px) {
  #zp-office-branches th,
  #zp-office-branches td {
    font-size: 13px;
    padding: 10px 8px;
  }
}

/* RESPONSIVE (MOBILE) */
@media (max-width: 768px) {
  #zp-office-branches {
    padding: 25px 6px;
  }

  #zp-office-branches .zp-wrapper {
    padding: 25px 12px;
  }

  #zp-office-branches .zp-title {
    font-size: 20px;
  }
}

/* DARK MODE (OPTIONAL) */
.zp-dark {
  --zp-bg: #0f172a;
  --zp-white: #111827;
  --zp-text: #e5e7eb;
  --zp-border: #334155;
}

.zp-dark #zp-office-branches th {
  background: #1e293b;
}