/* Integrations pages — self-contained styles (loaded only on integration pages via extraHead).
   Kept separate from mp.css so these review pages don't touch the live stylesheet. */

/* Step list */
.int-steps{counter-reset:istep;margin:8px 0 0;padding:0;list-style:none}
.int-steps>li{position:relative;padding:0 56px 22px 0;margin:0}
.int-steps>li:before{counter-increment:istep;content:counter(istep);position:absolute;inset-inline-start:0;top:-2px;
  width:36px;height:36px;border-radius:50%;background:#D51A78;color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px}
.int-steps>li:not(:last-child):after{content:"";position:absolute;inset-inline-start:17px;top:36px;bottom:2px;width:2px;background:#f0d4e2}
.int-steps>li h3{margin:4px 0 6px;font-size:16px;color:var(--ink,#1a1f36)}
.int-steps>li p{margin:0;color:var(--c-text-soft,#5b6478)}

/* Sub-heading inside a section (smaller than mpSectionHead's h2), with top spacing */
.int-subhead{font-size:19px;font-weight:700;color:var(--ink,#1a1f36);margin:36px 0 6px;text-align:right}

/* Faux plugin settings panel — a self-built replica of the WP SMS "Custom Gateway"
   screen, pre-filled with MicroPay values. Illustration only (not a real screenshot). */
.int-mock{border:1px solid #dfe4ee;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(20,30,60,.07);margin:14px 0}
.int-mock__bar{display:flex;align-items:center;gap:7px;background:#f1f3f8;border-bottom:1px solid #e3e8f0;padding:9px 14px}
.int-mock__dot{width:10px;height:10px;border-radius:50%;background:#cfd6e4;display:inline-block}
.int-mock__ttl{margin-left:8px;font-size:12px;color:#6b7385;font-family:Menlo,Consolas,monospace}
.int-mock__body{padding:14px 18px}
.int-mock__row{display:flex;align-items:flex-start;gap:14px;padding:10px 0;border-bottom:1px solid #f0f2f7}
.int-mock__row:last-child{border-bottom:0}
.int-mock__row>label{flex:0 0 130px;font-size:13px;font-weight:600;color:#1a1f36;padding-top:9px;text-align:left}
.int-mock__field{flex:1;min-width:0;background:#fff;border:1px solid #d5dbe7;border-radius:7px;padding:9px 11px;
  font-family:Menlo,Consolas,monospace;font-size:13px;color:#0f2c54;direction:ltr;text-align:left;overflow-x:auto}
.int-mock__select{display:flex;align-items:center;justify-content:space-between;background:#fbfcfe}
.int-mock__chev{color:#9aa3b5;font-size:11px;padding-left:8px}
.int-mock__area{white-space:pre;line-height:1.75;background:#0f172a;color:#e6edf3;border-color:#0f172a}
.int-mock__field .ph{color:#1a8f5a;font-weight:600}
.int-mock__area .ph{color:#7ee0c0;font-weight:600}
.int-mock__foot{padding:12px 18px;border-top:1px solid #e3e8f0;background:#f8fafc}
.int-mock__btn{display:inline-block;background:#2271b1;color:#fff;font-size:13px;font-weight:600;padding:7px 16px;border-radius:6px}
.int-mock__cap{font-size:12.5px;color:var(--c-text-soft,#5b6478);margin:6px 2px 0;text-align:center}

/* Feature list with check bullets */
.int-flist{list-style:none;margin:12px 0 0;padding:0}
.int-flist li{position:relative;padding:0 26px 8px 0;color:var(--ink,#1a1f36);font-size:14.5px}
.int-flist li:before{content:"";position:absolute;inset-inline-start:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:#eafaf3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2321a97a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* Code block — always LTR */
.int-code{direction:ltr;text-align:left;background:#0f172a;color:#e6edf3;border-radius:12px;
  padding:16px 18px;overflow-x:auto;font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace;
  font-size:13px;line-height:1.6;margin:12px 0;white-space:pre}
.int-code__label{display:block;direction:rtl;text-align:right;font-size:12px;color:var(--c-text-soft,#5b6478);
  margin:14px 0 4px;font-weight:600}

/* Param / field tables */
.int-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.int-table th,.int-table td{border:1px solid #e3e8f0;padding:9px 12px;text-align:right;vertical-align:top}
.int-table th{background:#f5f7fb;color:var(--ink,#1a1f36);font-weight:700}
/* display:table-cell overrides the global .ltr{display:inline-block} in mp.css, which would otherwise drop these cells out of table layout */
.int-table td.ltr{display:table-cell;direction:ltr;unicode-bidi:isolate;font-family:Menlo,Consolas,monospace;font-size:13px}
.int-table tr:nth-child(even) td{background:#fafbfe}

/* Inline note / callout */
.int-note{border-inline-start:4px solid #3EC6EA;background:#f2fbff;border-radius:10px;padding:12px 16px;margin:14px 0;color:var(--ink,#1a1f36)}
.int-note.warn{border-inline-start-color:#e0a43a;background:#fff9ef}
.int-note.pink{border-inline-start-color:#D51A78;background:#fdf2f8}

/* Inline code chip */
code.int-chip{direction:ltr;unicode-bidi:isolate;background:#f0f2f7;border:1px solid #e3e8f0;border-radius:6px;
  padding:1px 6px;font-family:Menlo,Consolas,monospace;font-size:13px;color:#0f2c54}