/* Integrations full layout — adapted from just2pay-integrations-directory-logistics-v2.html
   Uses Just2Pay V3 tokens. Does not replace site header/footer chrome. */

body.int-page.int-full-layout{
  --int-navy:var(--navy,#0B1F4D);
  --int-navy2:#071536;
  --int-blue:var(--blue,#1D4ED8);
  --int-champagne:var(--champagne,#E7CFA3);
  --int-ink:var(--ink,#0F172A);
  --int-slate:var(--slate,#475569);
  --int-muted:var(--muted,#94A3B8);
  --int-line:var(--line,#E2E8F0);
  --int-surface:var(--surface,#F8FAFC);
  --int-shadow:0 24px 70px rgba(2,6,23,.12);
  --int-shadow-soft:0 12px 40px rgba(2,6,23,.08);
  --int-max:1220px;
  background:#fff;
}

body.int-full-layout main.v3h{
  background:#fff;
}

/* —— Legacy logistics hero (unused; Integrations uses site hero--stacked) —— */
.int-full-hero{display:none}

/* —— Directory shell —— */
.int-full-directory{margin-top:8px;position:relative;z-index:5;padding:0 0 8px}
.int-full-directory .container{max-width:var(--int-max)}
.int-directory-shell{
  background:#fff;border:1px solid var(--int-line);border-radius:24px;
  box-shadow:var(--int-shadow);overflow:hidden;
}
.int-directory-top{
  padding:22px 22px 18px;border-bottom:1px solid var(--int-line);
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
}
.int-search-wrap{position:relative}
.int-search-wrap > .ph,
.int-search-wrap > i{
  position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);
  font-size:18px;color:var(--int-muted);pointer-events:none;
}
.int-full-search{
  width:100%;height:50px;border:1px solid var(--int-line);border-radius:14px;
  padding:0 16px 0 45px;outline:none;background:var(--int-surface);color:var(--int-ink);
  font-size:15px;
}
html[dir="rtl"] .int-full-search{padding:0 45px 0 16px}
.int-full-search:focus{
  border-color:#93B4FF;box-shadow:0 0 0 4px rgba(29,78,216,.08);background:#fff;
}
.int-view-toggle{
  display:flex;border:1px solid var(--int-line);border-radius:13px;
  background:var(--int-surface);padding:4px;
}
.int-view-toggle button{
  border:0;background:transparent;min-height:44px;padding:10px 14px;border-radius:10px;
  color:var(--int-slate);font-weight:900;font-size:12px;cursor:pointer;
}
.int-view-toggle button.is-active{
  background:var(--int-navy);color:#fff;box-shadow:0 5px 12px rgba(11,31,77,.18);
}
.int-view-toggle button:focus-visible{outline:2px solid var(--int-blue);outline-offset:2px}

.int-full-filters{
  padding:18px 22px 22px;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:12px;align-items:end;
}
.int-field label{
  display:block;font-size:10px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--int-muted);margin:0 0 7px 3px;
}
.int-field select{
  width:100%;height:44px;border:1px solid var(--int-line);border-radius:12px;
  background:#fff;color:var(--int-ink);padding:0 11px;outline:none;
}
.int-clear-btn{
  height:44px;border:1px solid var(--int-line);border-radius:12px;background:#fff;
  color:var(--int-slate);font-weight:900;padding:0 14px;cursor:pointer;
}
.int-clear-btn:hover{background:var(--int-surface)}
.int-clear-btn:focus-visible{outline:2px solid var(--int-blue);outline-offset:2px}

/* —— Results —— */
.int-full-main{padding:34px 0 72px}
.int-full-main .container{max-width:var(--int-max)}
/* Override directory.css column/end alignment so title stays on the start edge */
body.int-full-layout .int-results-head{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px 20px;
  margin:0 0 22px;
  margin-inline-end:0;
}
body.int-full-layout .int-results-head > div:first-child{
  flex:1 1 280px;
  min-width:0;
  text-align:start;
}
body.int-full-layout .int-results-head h2{
  font-size:clamp(28px,3.4vw,34px);margin:0;color:var(--int-navy);letter-spacing:-.035em;
}
body.int-full-layout .int-results-head p{
  margin:4px 0 0;color:var(--int-slate);font-size:14px;max-width:62ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
body.int-full-layout .int-result-count{
  font-size:12px;color:var(--int-slate);font-weight:800;white-space:nowrap;
  flex:0 0 auto;margin-inline-start:auto;
}

.int-full-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.int-full-card{
  border:1px solid var(--int-line);border-radius:20px;background:#fff;padding:20px;
  transition:.2s;display:flex;flex-direction:column;min-height:275px;text-align:start;
  color:inherit;cursor:pointer;font:inherit;
}
button.int-full-card{width:100%}
.int-full-card:hover{
  transform:translateY(-3px);box-shadow:var(--int-shadow-soft);border-color:#C9D7F7;
}
.int-full-card:focus-visible{outline:2px solid var(--int-blue);outline-offset:2px}
.int-full-card-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.int-identity{display:flex;gap:13px;align-items:center;min-width:0}
.int-logo-tile{
  width:88px;height:60px;border-radius:14px;padding:8px 10px;box-sizing:border-box;
  display:grid;place-items:center;flex:none;
  background:#fff;border:1px solid #E7EDF7;
  color:var(--int-navy);font-weight:950;font-size:16px;letter-spacing:-.04em;overflow:hidden;
}
.int-logo-tile img{
  width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;
}
.int-identity h3{margin:0;color:var(--int-navy);font-size:18px;line-height:1.2;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.int-soon{
  display:inline-flex;align-items:center;min-height:18px;padding:0 8px;
  border-radius:999px;background:var(--champagne,#E7CFA3);color:var(--navy,#0B1F4D);
  font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;line-height:1
}
html[dir="rtl"] .int-soon{letter-spacing:0;text-transform:none}
.int-type-pill{
  display:inline-flex;margin-top:6px;padding:5px 8px;border-radius:999px;
  background:#EEF4FF;color:var(--int-blue);font-size:9px;font-weight:950;
  letter-spacing:.06em;text-transform:uppercase;
}
.int-type-pill.bank{background:#FFF7E8;color:#9A5D06}
.int-type-pill.finance{background:#ECFDF5;color:#166534}
.int-type-pill.open{background:#F5F3FF;color:#6D28D9}
.int-type-pill.logistics{background:#FFF1F2;color:#BE123C}
.int-type-pill.method{background:#EEF4FF;color:var(--int-blue)}

.int-markets{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 14px}
.int-market{
  padding:5px 8px;border-radius:999px;background:var(--int-surface);
  border:1px solid var(--int-line);font-size:10px;font-weight:850;color:var(--int-slate);
}
.int-service-line{font-size:12px;color:var(--int-slate);margin:0 0 12px;line-height:1.45}
.int-service-line b{color:var(--int-navy)}
.int-chips{display:flex;gap:6px;flex-wrap:wrap}
.int-chip{
  padding:5px 7px;border-radius:8px;background:#F8FAFC;border:1px solid #E8EDF4;
  color:#40506A;font-size:9px;font-weight:750;
}
.int-chip.more{background:#EEF4FF;color:var(--int-blue)}
.int-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:18px;
}
.int-status{font-size:10px;color:#166534;font-weight:900}
.int-status:before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#16A34A;margin-inline-end:6px;vertical-align:middle;
}
.int-view-link{border:0;background:none;color:var(--int-blue);font-size:12px;font-weight:950;padding:4px 0;cursor:pointer}
.int-view-link:hover{text-decoration:underline}

.int-method-card{min-height:240px}
.int-method-symbol{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--int-navy);color:#fff;font-size:15px;font-weight:950;letter-spacing:-.05em;
}
.int-method-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.int-meta-box{background:var(--int-surface);border-radius:12px;padding:10px}
.int-meta-box small{
  display:block;color:var(--int-muted);font-size:9px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:900;
}
.int-meta-box b{display:block;margin-top:3px;color:var(--int-navy);font-size:11px}

.int-full-empty{
  display:none;border:1px dashed #CBD5E1;border-radius:20px;padding:48px;
  text-align:center;background:var(--int-surface);
}
.int-full-empty.is-visible{display:block}
.int-full-empty h3{color:var(--int-navy);margin:0 0 8px}
.int-full-empty p{color:var(--int-slate);margin:0 0 18px}

/* —— Explainer + CTAs —— */
.int-full-section{padding:72px 0}
.int-full-section.soft{background:var(--int-surface)}
.int-full-section .container{max-width:var(--int-max)}
.int-logic-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
.int-logic-copy h2{
  font-size:clamp(32px,4.2vw,52px);line-height:1.05;margin:12px 0 18px;
  color:var(--int-navy);letter-spacing:-.035em;
}
.int-logic-copy p{font-size:16px;color:var(--int-slate);line-height:1.6}
.int-logic-flow{
  border-radius:26px;background:linear-gradient(140deg,#071738,#0E2D6C);
  padding:28px;color:#fff;box-shadow:var(--int-shadow);
}
.int-flow-step{
  display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.int-flow-step:last-child{border-bottom:0}
.int-flow-num{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:var(--int-champagne);font-weight:950;font-size:11px;
}
.int-flow-step b{display:block;font-size:13px}
.int-flow-step span{font-size:11px;color:rgba(255,255,255,.58)}
.int-flow-arrow{color:var(--int-champagne);font-weight:950}

.int-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.int-cta-card{
  border-radius:24px;padding:30px;border:1px solid var(--int-line);background:#fff;
}
.int-cta-card.dark{background:var(--int-navy);color:#fff;border-color:var(--int-navy)}
.int-cta-card h3{font-size:26px;margin:8px 0 10px;letter-spacing:-.03em}
.int-cta-card p{color:var(--int-slate);margin:0 0 22px}
.int-cta-card.dark p{color:rgba(255,255,255,.68)}
.int-cta-card.dark .int-full-eyebrow{color:var(--int-champagne)}

/* —— Detail drawer —— */
.int-full-drawer-backdrop{
  position:fixed;inset:0;background:rgba(2,6,23,.46);backdrop-filter:blur(3px);
  z-index:220;opacity:0;visibility:hidden;transition:.2s;
}
.int-full-drawer-backdrop.is-open{opacity:1;visibility:visible}
.int-full-drawer{
  position:absolute;inset-inline-end:0;top:0;height:100%;width:min(680px,94vw);
  background:#fff;box-shadow:-30px 0 80px rgba(2,6,23,.25);
  transform:translateX(100%);transition:.25s;overflow:auto;
}
html[dir="rtl"] .int-full-drawer{transform:translateX(-100%);box-shadow:30px 0 80px rgba(2,6,23,.25)}
.int-full-drawer-backdrop.is-open .int-full-drawer{transform:none}
.int-full-drawer-head{
  position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  z-index:4;padding:20px 24px;border-bottom:1px solid var(--int-line);
  display:flex;justify-content:space-between;align-items:center;
}
.int-full-drawer-close{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--int-line);
  background:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;
}
.int-full-drawer-close:focus-visible{outline:2px solid var(--int-blue);outline-offset:2px}
.int-full-drawer-body{padding:26px}
.int-drawer-identity{display:flex;gap:16px;align-items:center}
.int-drawer-identity .int-logo-tile{width:96px;height:72px;font-size:20px;padding:10px}
.int-drawer-identity .int-logo-tile img{max-width:100%;max-height:100%}
.int-drawer-identity h2{margin:0;color:var(--int-navy);font-size:28px;letter-spacing:-.03em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.int-drawer-summary{margin:22px 0;color:var(--int-slate);line-height:1.55}
.int-market-select{margin:20px 0}
.int-market-select label{
  display:block;font-size:10px;font-weight:900;color:var(--int-muted);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;
}
.int-market-select select{
  height:46px;width:100%;border:1px solid var(--int-line);border-radius:12px;
  padding:0 12px;background:#fff;
}
.int-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.int-detail-box{
  border:1px solid var(--int-line);border-radius:16px;padding:15px;background:var(--int-surface);
}
.int-detail-box small{
  display:block;color:var(--int-muted);font-size:9px;font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;
}
.int-detail-box p{margin:6px 0 0;font-size:12px;color:#334155;line-height:1.5}
.int-drawer-section{margin-top:28px}
.int-drawer-section h3{font-size:16px;color:var(--int-navy);margin:0 0 13px}
.int-connection{display:grid;gap:10px}
.int-connect-step{
  display:flex;gap:12px;align-items:flex-start;border:1px solid var(--int-line);
  border-radius:14px;padding:13px;background:#fff;text-align:start;width:100%;
  cursor:pointer;font:inherit;color:inherit;
}
.int-connect-step i{
  font-style:normal;width:26px;height:26px;border-radius:8px;background:#EEF4FF;
  color:var(--int-blue);display:grid;place-items:center;font-size:10px;font-weight:950;flex:0 0 26px;
}
.int-connect-step b{display:block;color:var(--int-navy);font-size:12px}
.int-connect-step span{display:block;color:var(--int-slate);font-size:11px;margin-top:2px}
.int-availability{
  margin-top:22px;border-radius:14px;background:#FFF8EA;border:1px solid #F4DFC0;
  padding:13px;color:#80560D;font-size:12px;line-height:1.5;
}
.int-drawer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* Logistics panels reuse classes from directory.css when present; local fallbacks: */
.int-logistics-hero{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:18px 0 8px;padding:14px;border-radius:16px;border:1px solid var(--int-line);
  background:linear-gradient(145deg,#F8FAFC,#FFF8EA);
}
.int-logistics-kpi{padding:12px;border-radius:12px;border:1px solid #E7EDF7;background:#fff}
.int-logistics-kpi small{
  display:block;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--int-muted);
}
.int-logistics-kpi b{display:block;margin-top:6px;font-size:13px;font-weight:800;color:var(--int-navy);line-height:1.35}
.int-logistics-tabs{
  display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;margin:12px 0 4px;scrollbar-width:thin;
}
.int-logistics-tab{
  flex:0 0 auto;min-height:40px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--int-line);background:#fff;color:var(--int-slate);
  font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer;
}
.int-logistics-tab.is-active{background:var(--int-navy);border-color:var(--int-navy);color:#fff}
.int-logistics-panel[hidden]{display:none !important}
.int-logistics-list{display:grid}
.int-logistics-row{
  display:grid;grid-template-columns:minmax(110px,140px) minmax(0,1fr);gap:12px;
  padding:11px 0;border-bottom:1px solid var(--int-line);font-size:13px;
}
.int-logistics-row:last-child{border-bottom:0}
.int-logistics-row b{color:var(--int-navy);font-weight:800}
.int-logistics-row span{color:var(--int-slate);line-height:1.5}
.int-logistics-tags{display:flex;flex-wrap:wrap;gap:8px}
.int-logistics-tag{
  padding:6px 10px;border-radius:999px;border:1px solid #DDE6F3;background:#fff;
  color:#334155;font-size:12px;font-weight:750;
}
.int-logistics-badge{
  display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;
  font-size:11px;font-weight:800;
}
.int-logistics-badge--yes{background:#ECFDF5;color:#166534}
.int-logistics-badge--no{background:#F8FAFC;color:#64748B}
.int-logistics-badge--verify{background:#FFF7E8;color:#9A5D06}
.int-logistics-source{
  margin:16px 0 0;padding:12px 13px;border-radius:12px;border:1px dashed #C9D7F7;
  background:#F8FAFF;font-size:12px;line-height:1.5;color:#52627A;
}

html.int-full-drawer-open,html.int-full-drawer-open body{overflow:hidden}

@media(max-width:1050px){
  .int-full-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .int-full-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .int-full-hero-grid,.int-logic-grid{grid-template-columns:1fr}
  .int-full-hero-map{min-height:380px}
}
@media(max-width:720px){
  .int-full-hero{padding:72px 0 62px}
  .int-full-hero h1{font-size:40px}
  .int-full-hero-map{min-height:340px}
  .int-ecosystem{width:100%;position:relative}
  .int-directory-top{grid-template-columns:1fr}
  .int-view-toggle{width:max-content}
  .int-full-filters{grid-template-columns:1fr 1fr}
  .int-full-cards{grid-template-columns:1fr}
  .int-logic-grid,.int-cta-grid{grid-template-columns:1fr}
  .int-detail-grid{grid-template-columns:1fr}
  .int-n1{inset-inline-start:8px}
  .int-n2{inset-inline-end:6px}
  .int-n3{inset-inline-start:8px}
  .int-n4{inset-inline-end:8px}
}
@media(max-width:470px){
  .int-full-filters{grid-template-columns:1fr}
  .int-full-hero h1{font-size:34px}
  .int-hub{width:112px;height:112px}
  .int-orbit{inset:70px 35px 32px}
  .int-logistics-hero{grid-template-columns:1fr}
  .int-logistics-row{grid-template-columns:1fr;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .int-full-card,.int-full-drawer,.int-full-drawer-backdrop{transition:none}
  .int-full-card:hover{transform:none}
}