/* Batch C9 (478): customer care — Help & Support tiles, messages, the Notifications inbox, the premium WhatsApp button,
 * the slim "Invite a friend" card, the paused Delivery button. Loaded after styles.css and the module sheets. */

/* ---- The WhatsApp button everywhere (.btn-wa): a dark neutral surface, a thin border, the real logo in a small green circle ---- */
#app .btn-wa, .btn-wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--card, #161616);
  color: var(--text);
  border: 1px solid var(--line, #2a2a2a);
  font-weight: 600;
}
#app .btn-wa::before, .btn-wa::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #25d366;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.6a7.3 7.3 0 0 0-6.3 11l-1 3.8 3.9-1a7.3 7.3 0 1 0 3.4-13.8z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9.4 8.6c.2-.4.5-.4.7-.4h.4c.2 0 .3 0 .5.4l.6 1.4c0 .2 0 .3-.1.5l-.4.5c-.1.1-.1.3 0 .4.5.9 1.3 1.6 2.2 2 .2.1.3.1.4-.1l.5-.6c.1-.2.3-.2.5-.1l1.4.7c.2.1.3.2.3.3 0 .4-.1.9-.5 1.2-.4.4-1.2.6-2 .4-1.6-.4-3.3-1.9-4.1-3.3-.6-1-.8-2.2-.4-3.3z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 17px 17px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.14);
}
#app .btn-wa:active, .btn-wa:active { transform: translateY(1px); }
body.light-theme .btn-wa, body.light-theme #app .btn-wa { background: #fff; border-color: #e3dfd6; color: #1b1b1b; }
.feedback-screen .feedback-whatsapp { margin-top: 10px; }
.branch-action-wa { gap: 8px; }

/* ---- Help & Support: three equal tiles, the reply promise ---- */
.care-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.care-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 112px; padding: 14px 8px;
  background: var(--card, #161616); color: var(--text);
  border: 1px solid var(--line, #2a2a2a); border-radius: 16px;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.care-tile:active { transform: translateY(1px); }
.care-tile strong { font-size: 14px; line-height: 1.2; }
.care-tile > span:last-child { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.care-tile-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: var(--gold); }
.care-tile-icon svg { width: 22px; height: 22px; }
.care-tile-wa .care-tile-icon { background: #25d366; color: #fff; box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.14); }
.care-tile-msg .care-tile-icon { background: rgba(224, 177, 90, 0.16); }
.care-tile-call .care-tile-icon { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.care-tile-off { opacity: 0.55; }
.care-promise { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.care-promise svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.care-section-title { margin-top: 6px; }
.care-note { margin: 10px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.care-note .link { padding: 0; }
body.light-theme .care-tile { background: #fff; border-color: #e3dfd6; }
body.light-theme .care-tile-icon { background: #f3efe7; }

/* ---- "Your messages" and a thread ---- */
.care-threads { display: grid; gap: 8px; margin-bottom: 14px; }
.care-thread {
  width: 100%; display: grid; gap: 4px; padding: 12px 14px; text-align: start;
  background: var(--card, #161616); color: var(--text); border: 1px solid var(--line, #2a2a2a); border-radius: 14px; cursor: pointer;
}
.care-thread-new { border-color: rgba(224, 177, 90, 0.7); }
.care-thread-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.care-thread-top strong { font-size: 14px; }
.care-thread p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.care-thread p em { font-style: normal; color: var(--gold); }
.care-thread small { color: var(--muted); font-size: 11.5px; }
.care-thread small b { color: var(--gold); font-weight: 700; }
.care-thread-status { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.care-status-open { background: rgba(224, 177, 90, 0.16); color: var(--gold); }
.care-status-answered { background: rgba(61, 204, 122, 0.16); color: var(--green, #3dcc7a); }
.care-thread-meta { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.care-posts { display: grid; gap: 8px; margin-bottom: 12px; }
.care-post { max-width: 88%; justify-self: end; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: rgba(224, 177, 90, 0.16); }
.care-post-staff { justify-self: start; border-radius: 14px 14px 14px 4px; background: var(--card, #161616); border: 1px solid var(--line, #2a2a2a); }
[dir="rtl"] .care-post { border-radius: 14px 14px 14px 4px; }
[dir="rtl"] .care-post-staff { border-radius: 14px 14px 4px 14px; }
.care-post small { display: block; margin-bottom: 3px; color: var(--gold); font-size: 11px; font-weight: 700; }
.care-post p { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.care-post time { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; text-align: end; }
.care-reply-box { display: grid; gap: 8px; }
.care-reply-box .btn { margin: 0; }
body.light-theme .care-thread, body.light-theme .care-post-staff { background: #fff; border-color: #e3dfd6; }

/* ---- Send a message ---- */
.care-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.care-reason {
  min-height: 42px; padding: 8px 6px; border-radius: 12px; font-size: 13px; font-weight: 600;
  background: var(--card, #161616); color: var(--text); border: 1px solid var(--line, #2a2a2a); cursor: pointer;
}
.care-reason.on { border-color: var(--gold); color: var(--gold); background: rgba(224, 177, 90, 0.12); }
.care-order-select { margin-bottom: 14px; }
#app .care-body { min-height: 110px; height: auto; resize: none; line-height: 1.45; }
.care-count { display: block; margin: 4px 2px 10px; color: var(--muted); font-size: 11.5px; text-align: end; }
.care-send { margin-top: 2px; }
.care-wa { margin-top: 10px; width: 100%; }
body.light-theme .care-reason { background: #fff; border-color: #e3dfd6; }

/* ---- Notifications (inbox) ---- */
.care-inbox { display: grid; gap: 8px; margin-bottom: 14px; }
.care-inbox-item {
  width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: start;
  background: var(--card, #161616); color: var(--text); border: 1px solid var(--line, #2a2a2a); border-radius: 14px;
}
button.care-inbox-item { cursor: pointer; }
.care-unread { border-color: rgba(224, 177, 90, 0.6); }
.care-unread .care-inbox-copy strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.care-inbox-icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--gold); }
.care-inbox-icon svg { width: 20px; height: 20px; }
.care-kind-reply .care-inbox-icon, .care-kind-feedback_reply .care-inbox-icon { background: rgba(61, 204, 122, 0.14); color: var(--green, #3dcc7a); }
.care-inbox-copy { display: grid; gap: 2px; min-width: 0; }
.care-inbox-copy strong { font-size: 14px; line-height: 1.3; }
.care-inbox-copy span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.care-inbox-copy small { color: var(--muted); font-size: 11px; }
.care-empty { padding: 26px 10px; }
.care-pref .account-list-copy span { white-space: normal; }
body.light-theme .care-inbox-item { background: #fff; border-color: #e3dfd6; }
body.light-theme .care-inbox-icon { background: #f3efe7; }

/* ---- The unread badges (Account tab, the Notifications row) ---- */
.care-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.nav button { position: relative; }
.care-nav-badge { position: absolute; top: 6px; inset-inline-start: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

/* ---- Slim "Invite a friend" card: the link with copy, share and WhatsApp icons ---- */
.referral-card { padding: 12px 14px; }
.referral-card > p { margin: 4px 0 8px; }
.referral-link-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px 40px; gap: 6px; align-items: center; }
.referral-link-row input.field { margin: 0; min-height: 40px; height: 40px; padding: 0 10px; font-size: 12.5px; }
.referral-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--card, #161616); color: var(--text); border: 1px solid var(--line, #2a2a2a); cursor: pointer; text-decoration: none;
}
.referral-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.referral-icon-wa { background: #25d366; border-color: #25d366; color: #fff; }
.referral-icon-wa svg { stroke: none; }
.referral-stats { margin-top: 10px; gap: 5px; }
.referral-stats div { padding: 6px 4px; }
body.light-theme .referral-icon-btn { background: #fff; border-color: #e3dfd6; }
body.light-theme .referral-icon-wa { background: #25d366; border-color: #25d366; color: #fff; }

/* ---- Home: Delivery paused in Admin ---- */
.home-order-toggle button.care-delivery-paused { position: relative; opacity: 0.55; cursor: not-allowed; }
.care-paused-badge { position: absolute; top: -8px; inset-inline-end: 6px; padding: 1px 7px; border-radius: 999px; background: var(--danger, #e85d4c); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.2px; line-height: 14px; }
.care-paused-note { margin: -6px 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@media (min-width: 900px) { .home-screen .care-paused-note { margin-top: 0; } }