/* ── "More" Section ──────────────────────────────────────── */
.more-header {
  position: relative;
  background: linear-gradient(135deg, #5E35B1 0%, #3949AB 100%);
  color: #fff;
  padding: 18px 60px 18px;
  text-align: center;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.more-header-ta { font-family: 'Noto Sans Tamil', sans-serif; font-size: 1.3rem; font-weight: 800; margin: 0; }
.more-header-en { font-size: 0.82rem; opacity: 0.9; margin: 4px 0 0; }
.more-refresh-btn {
  position: absolute; top: 16px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.2); color: #fff; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.more-refresh-btn.spinning { animation: more-spin 0.5s linear; }
@keyframes more-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── Acting drivers — prominent white panel with indigo accent ── */
.more-feature.acting-panel {
  margin: 16px 12px 0;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(20, 30, 70, 0.07);
  border-top: 3px solid #5E35B1;
}
.more-feature-head {
  display: flex; align-items: center; gap: 10px;
}
.more-feature-emoji {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #EFEAF8;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.more-feature-titles { display: flex; flex-direction: column; }
.more-feature-ta { font-family: 'Noto Sans Tamil', sans-serif; font-size: 1.12rem; font-weight: 800; color: #311B92; line-height: 1.15; }
.more-feature-en { font-size: 0.7rem; color: #757575; }
.more-feature-desc {
  font-family: 'Noto Sans Tamil', sans-serif;
  font-size: 0.84rem;
  color: #666;
  margin: 9px 0 4px;
  line-height: 1.45;
}

/* Acting driver rows — avatar circle + details + call */
.acting-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid #F2F2F4;
}
.acting-row .more-call { margin-top: 5px; }
.acting-row:last-child { border-bottom: none; padding-bottom: 4px; }
.acting-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EFEAF8, #E3F2FD);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
  overflow: hidden;
}
.acting-info { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.acting-ta { font-family: 'Noto Sans Tamil', sans-serif; font-size: 1.02rem; font-weight: 700; color: #1A1A1A; line-height: 1.3; overflow-wrap: anywhere; }
.acting-en { font-size: 0.72rem; color: #8A8A8E; }
.acting-meta { font-family: 'Noto Sans Tamil', sans-serif; font-size: 0.8rem; color: #666; margin-top: 2px; }
.acting-dl-chip {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Noto Sans Tamil', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1B5E20;
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  border-radius: 8px;
  padding: 2px 8px;
  margin-top: 3px;
}
.acting-veh-chip {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  color: #5E35B1;
  background: #EFEAF8;
  border-radius: 7px;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Acting driver registration (collapsible) ────────────── */
.acting-reg { margin-top: 12px; border-top: 1px dashed #E6E2F2; padding-top: 10px; }
/* Service registration sits directly in the section (no white panel) —
   give it its own card look so it doesn't float on the page background */
.svc-reg {
  margin-top: 14px;
  border-top: none;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.acting-reg summary { list-style: none; cursor: pointer; }
.acting-reg summary::-webkit-details-marker { display: none; }
.acting-reg-cta {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #F4F1FB, #EDF3FE);
  border: 1px dashed #C9BFE8;
  border-radius: 12px;
  padding: 11px 13px;
}
.acting-reg-ic { font-size: 20px; }
.acting-reg-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.acting-reg-ta { font-family: 'Noto Sans Tamil', sans-serif; font-size: 0.95rem; font-weight: 700; color: #311B92; }
.acting-reg-en { font-size: 0.68rem; color: #757575; }
.acting-reg-caret { color: #5E35B1; font-size: 0.9rem; transition: transform 180ms ease; }
.acting-reg[open] .acting-reg-caret { transform: rotate(180deg); }
.acting-reg-form { padding: 12px 2px 2px; }
/* The shared .auto-form-* styles are designed for the DARK auto card
   (white text). Re-theme them for this light panel. */
.acting-reg-form .auto-form-label {
  display: block;
  color: #444;
  margin: 12px 0 6px;
}
.acting-reg-form .auto-form-input {
  border: 1.5px solid #DDE2EC;
  background: #F7F8FA;
  color: #1A1A1A;
}
.acting-reg-form .auto-form-input::placeholder { color: #9AA3B3; }
.acting-reg-form .auto-form-input:focus {
  border-color: #5E35B1;
  background: #fff;
  outline: none;
}
.acting-reg-form select.auto-form-input { appearance: auto; -webkit-appearance: menulist; }
.acting-reg-form .auto-form-required { color: #D32F2F; }
.acting-reg-form .auto-form-field-err { color: #D32F2F; font-family: 'Noto Sans Tamil', sans-serif; font-size: 0.8rem; margin: 5px 0 0; }
.acting-reg-btn {
  width: 100%;
  margin-top: 12px;
  background: #5E35B1;
  color: #fff;
  font-family: 'Noto Sans Tamil', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 13px;
  border-radius: 12px;
  min-height: 48px;
}
.acting-reg-btn:disabled { opacity: 0.6; }

/* ── Local Services — section head + compact category panels ── */
/* Head is centred — reads as a section divider, not stuck in the corner */
.more-svc-section-head {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 24px 12px 10px;
  text-align: center;
}
.svc-panel {
  margin: 0 12px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(20, 30, 70, 0.06);
  overflow: hidden;
}
.svc-panel-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px;
}
.svc-panel-ic { font-size: 17px; }
.svc-panel-ta {
  font-family: 'Noto Sans Tamil', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #333;
  flex: 1;
}
.svc-panel-count {
  min-width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: #555;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 7px;
}
.svc-rows { display: flex; flex-direction: column; }
.svc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px;
  border-bottom: 1px solid #F2F2F4;
}
.svc-row:last-child { border-bottom: none; }
.svc-row-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.svc-row-ta { font-family: 'Noto Sans Tamil', sans-serif; font-size: 0.98rem; font-weight: 700; color: #1A1A1A; line-height: 1.3; }
.svc-row-en { font-size: 0.7rem; color: #8A8A8E; }
.svc-row-meta { font-family: 'Noto Sans Tamil', sans-serif; font-size: 0.78rem; color: #777; margin-top: 1px; }
/* Extra details entered by admin (timing, price, etc.) — wraps fully */
.svc-row-notes { color: #5E35B1; line-height: 1.4; white-space: normal; overflow-wrap: break-word; }

/* Shared call pill */
.more-call {
  flex-shrink: 0; background: #16A34A; color: #fff;
  font-family: 'Noto Sans Tamil', sans-serif; font-size: 0.86rem; font-weight: 700;
  padding: 8px 13px; border-radius: 999px; white-space: nowrap;
  min-height: 38px; display: flex; align-items: center; text-decoration: none;
}
.more-call-pending { background: #ECEFF1; color: #90A4AE; }

.more-empty {
  font-family: 'Noto Sans Tamil', sans-serif; font-size: 0.9rem; color: #999;
  text-align: center; padding: 18px 16px;
}

#section-more { padding-bottom: 90px; }
