/* =================================================================
 * contact-ux.css — small UI components for client/associate forms
 * v1.31.0
 *
 * Provides:
 *  .wa-confirm        — WhatsApp-confirmation checkbox under phone field
 *  .tips-card         — sidebar "Reach out faster" panel on form pages
 *  .contact-icon      — circular email / WhatsApp action icons (also in
 *                       views/clients/index.php inline <style>; this is the
 *                       canonical source if other lists ever want them)
 * ================================================================= */

/* ── WhatsApp confirmation checkbox ────────────────────────────── */

/* Hidden by default — only appears once the phone field has validated
   as a mobile number. The .wa-confirm-show class is added by the phone
   validator (intl-phone.js) when it sets .iphone-wrap.is-mobile, so
   the checkbox appears in the same beat as the "Valid mobile number"
   green confirmation. Avoids cluttering the form before there's
   anything to confirm. */
.wa-confirm{
  display:none;
  align-items:center;gap:8px;
  padding:7px 10px;
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;
  cursor:pointer;
  font-size:12px;font-weight:500;color:#166534;
  transition:background .15s, border-color .15s, color .15s, transform .25s, opacity .25s;
  user-select:none;
  opacity:0;transform:translateY(-4px);
}
.wa-confirm.wa-confirm-show{
  display:flex;opacity:1;transform:none;
}
/* Persist visibility for already-checked state on edit page (server-rendered) */
.wa-confirm:has(input[type="checkbox"]:checked){
  display:flex;opacity:1;transform:none;
  background:#22c55e;border-color:#16a34a;color:#fff;
}
.wa-confirm:hover{background:#dcfce7;border-color:#86efac}
.wa-confirm input[type="checkbox"]{
  width:16px;height:16px;accent-color:#22c55e;cursor:pointer;flex-shrink:0;
}
.wa-confirm-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:#22c55e;color:#fff;font-size:12px;flex-shrink:0;
}
.wa-confirm-icon i{font-size:12px;line-height:1}
.wa-confirm-text{flex:1;line-height:1.3}

.wa-confirm:has(input:checked) .wa-confirm-icon{
  background:#fff;color:#16a34a;
}

/* ── Tips card on form sidebars ─────────────────────────────────── */
.tips-card{
  background:#fafbfc;border:1px solid #e9ebec;
}
.tips-card-hd{
  font-size:13px;font-weight:600;color:#343a40;
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
}
.tips-card-hd i{color:#f59e0b;font-size:16px}
.tips-card-lede{
  font-size:12px;color:#6b7280;line-height:1.55;margin:0 0 12px;
}
.tips-list{
  list-style:none;padding:0;margin:0 0 12px;
}
.tips-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:12px;color:#495057;line-height:1.45;
  padding:6px 0;
}
.tips-list li i{
  font-size:14px;flex-shrink:0;margin-top:1px;
  width:18px;text-align:center;
}
.tips-ico-wa{color:#25d366}
.tips-ico-mail{color:#405189}
.tips-ico-bell{color:#f59e0b}
.tips-foot{
  font-size:11px;color:#878a99;line-height:1.5;
  padding:8px 10px;background:#fff8e1;border-radius:5px;
  border-left:3px solid #fbbf24;
}
.tips-foot i{color:#f59e0b;margin-right:3px}

/* ── Contact action icons (canonical CSS — list pages may inline this) ─ */
.contact-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  text-decoration:none;font-size:13px;line-height:1;
  transition:.15s;flex-shrink:0;
}
.contact-icon i{font-size:13px;line-height:1}
.contact-icon-email{background:rgba(64,81,137,.1);color:#405189}
.contact-icon-email:hover{background:#405189;color:#fff;transform:scale(1.08)}
.contact-icon-whatsapp{background:rgba(37,211,102,.12);color:#25d366}
.contact-icon-whatsapp:hover{background:#25d366;color:#fff;transform:scale(1.08)}
.contact-icon-whatsapp-off{background:#f3f3f5;color:#adb5bd;cursor:help}