/* ================================================================
   EffiQ Theme — Service Pages
   Shared classes for all service/solution inner-page templates:
   WMS, D365, Staffing, NaviQ, VisiQ, Data, Industries.
   Loaded on all is_page() contexts.
================================================================ */

/* ── FEATURE LIST (WMS, D365) ───────────────────────────────────── */
/* .fl / .fr / .fd / .ftx — feature checklist rows inside .dc cards */
.fl  { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fr  { display: flex; align-items: flex-start; gap: 10px; }
.fd  { width: 6px; height: 6px; border-radius: 50%; background: var(--bl); flex-shrink: 0; margin-top: 6px; }
.ftx { font-size: 13px; color: var(--mid); line-height: 1.6; }

/* ── STEP NUMBER (WMS) ──────────────────────────────────────────── */
/* .sn — styled in cards.css .steps grid */

/* ── NAVIQ CHAT DEMO (NaviQ + Front page) ───────────────────────── */
/* Mirrors front-page.css chat widget — needed on page-naviq.php too */
.chat       { margin-top: 28px; background: rgba(15,23,42,.7); border: 1px solid rgba(107,79,211,.25); border-radius: 14px; padding: 18px; }
.chat-hdr   { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.chat-dot   { width: 7px; height: 7px; border-radius: 50%; background: #A78BFA; animation: pulseDot 1.5s infinite; flex-shrink: 0; }
.chat-lbl   { font-family: var(--fh); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A78BFA; }
.crow       { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-start; }
.crow-u     { flex-direction: row-reverse; }
.cav        { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.cav-u      { background: rgba(255,255,255,.06); }
.cav-a      { background: rgba(107,79,211,.3); }
.cbub       { background: rgba(255,255,255,.06); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: rgba(255,255,255,.7); flex: 1; }
.crow-u .cbub { text-align: right; }
.crow-last  { margin-bottom: 0; }
.ctag       { display: inline-flex; align-items: center; font-family: var(--fh); font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-right: 6px; margin-top: 8px; cursor: pointer; }
.ct-pur     { background: rgba(107,79,211,.25); color: #C4B5FD; }
.ct-bl      { background: rgba(26,115,232,.2);  color: #7BAEF8; }
.ct-wh      { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }

/* ── INDUSTRIES PAGE ────────────────────────────────────────────── */
.ind-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media(max-width:900px) { .ind-grid { grid-template-columns: 1fr; } }
.icard { background: var(--wh); border: 1px solid var(--bd); border-radius: 16px; padding: 36px; transition: all .25s; }
.icard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15,43,70,.08); }
.ibul  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.idot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cm    { display: flex; gap: 24px; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.mn    { font-family: var(--fh); font-size: 28px; font-weight: 800; letter-spacing: -.04em; color: var(--bl); line-height: 1; }
.ml    { font-size: 11px; color: var(--lt); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.isnip { border-radius: 10px; padding: 14px 16px; margin-top: 16px; }

/* ── VISIQ PAGE — WHY GRID ──────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; }
.why  { display: flex; flex-direction: column; gap: 16px; background: var(--wh); border: 1px solid var(--bd); border-radius: 14px; padding: 28px; transition: all .2s; }
.why:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,43,70,.08); }
.why-top { display: flex; align-items: center; gap: 16px; }
.why-n { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(26,115,232,.1), rgba(107,79,211,.1)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--bl); transition: all .3s; }
.why:hover .why-n { background: var(--grad-bl-pur); color: var(--wh); }
.why .sm { margin: 0; }

/* ── DATA PAGE — CHAPTER HEADERS ────────────────────────────────── */
.data-hero-tagline  { font-family: var(--fh); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 20px; display: block; }
.data-chapter-hdr   { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 48px; }
@media(max-width:640px) { .data-chapter-hdr { flex-direction: column; } }
.data-chapter-icon  { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.data-section-label { font-family: var(--fh); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bl); margin-bottom: 10px; display: block; }
.data-section-label.purple { color: var(--pur); }
.data-section-label.green  { color: #10B981; }
.data-chapter-title { font-family: var(--fh); font-size: clamp(24px,3vw,36px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.15; margin-bottom: 12px; }
.data-chapter-sub   { font-size: 15px; color: var(--mid); line-height: 1.75; max-width: 620px; }

/* ── DATA PAGE — CAPABILITY CARDS ──────────────────────────────── */
.data-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; }
.data-card      { background: var(--wh); border: 1px solid var(--bd); border-radius: 16px; padding: 28px; position: relative; overflow: hidden; transition: all .25s; }
.data-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--dc-color, var(--grad-bl-pur)); border-radius: 16px 16px 0 0; }
.data-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15,43,70,.09); }
.data-card-icon { font-size: 28px; margin-bottom: 14px; display: block; }
.data-card-name { font-family: var(--fh); font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-bottom: 10px; }
.data-card-desc { font-size: 13px; color: var(--mid); line-height: 1.65; margin-bottom: 14px; }
.data-card-tag  { display: inline-block; font-family: var(--fh); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--bl); background: var(--bls); border: 1px solid var(--blb); border-radius: 6px; padding: 3px 9px; }

/* ── DATA PAGE — SPECIALIZED AI SECTION ────────────────────────── */
.data-specialized   { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; }
.spec-card          { background: var(--wh); border: 1px solid var(--bd); border-radius: 16px; padding: 28px; }
.spec-card-head     { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.spec-card-icon     { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.spec-card-title    { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--ink); }
.spec-card ul       { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.spec-card li       { font-size: 13px; color: var(--mid); line-height: 1.65; padding-left: 16px; position: relative; }
.spec-card li::before { content: "→"; position: absolute; left: 0; color: var(--bl); font-size: 11px; top: 1px; }

/* ── DATA PAGE — WHY EFFIQ CARDS ────────────────────────────────── */
.why-card  { background: var(--wh); border: 1px solid var(--bd); border-radius: 14px; padding: 28px; transition: all .2s; }
.why-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,43,70,.08); }
.why-icon  { font-size: 32px; margin-bottom: 14px; }
.why-title { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.why-desc  { font-size: 13px; color: var(--mid); line-height: 1.65; }

/* ── NAVIQ PAGE OVERRIDES ──────────────────────────────────────── */
#page-naviq .chat { background: rgb(15,23,42); }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:800px) {
  #page-visiq .sec > .wrap > [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media(max-width:640px) {
  .ind-grid, .data-card-grid, .data-specialized, .why-grid { grid-template-columns: 1fr; }
}