/* Homepage icons — match light/dark mockups (flat colored circles + line glyphs) */

.ico,.tab-ico,.tool-icon,.panel-ico,.step-ico,.btn-ico{
  display:inline-grid;place-items:center;line-height:0;flex:0 0 auto;
}
.ico svg,.tab-ico svg,.tool-icon svg,.panel-ico svg,.step-ico svg,.btn-ico svg,
.benefit .circle svg,.indico svg{
  width:1em;height:1em;display:block;
}

/* Hero benefit pills */
.benefits{gap:18px 22px;margin-bottom:18px}
.benefit{gap:9px}
.benefit .circle{
  width:36px;height:36px;border-radius:50%;
  font-size:18px;color:#fff;
  box-shadow:0 6px 14px rgba(16,45,95,.14),inset 0 0 0 1px rgba(255,255,255,.2);
}
.benefit .circle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.benefit b{font-size:12px;font-weight:800;letter-spacing:-.01em}
.benefit small{font-size:10px;color:#5b6b82}
.benefit .circle.green{background:linear-gradient(180deg,#22c55e,#16a34a)}
.benefit .circle.red{background:linear-gradient(180deg,#ff5a5f,#e11d2e)}
.benefit .circle.blue{background:linear-gradient(180deg,#3b82ff,#0868ff)}
.benefit .circle.purple{background:linear-gradient(180deg,#a855f7,#7e22ce)}
.benefit .circle.teal{background:linear-gradient(180deg,#14b8a6,#0d9488)}

/* Doc tabs — icon + label centered, no crush/overlap */
.doc-tab{
  display:inline-flex;align-items:center;justify-content:center;
  gap:5px;padding:0 8px;min-width:0;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.doc-tab .tab-ico{
  width:14px;height:14px;flex:0 0 14px;margin:0;opacity:.95;
  display:inline-grid;place-items:center;line-height:0;
}
.doc-tab .tab-ico svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;
}

/* Panel titles */
.panel-title .panel-ico,
.items-title .panel-ico{
  width:22px;height:22px;border-radius:7px;font-size:13px;
  background:rgba(8,104,255,.12);color:#0868ff;
}
.panel-title .panel-ico svg,
.items-title .panel-ico svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.items-title{gap:8px}

/* Tool cards — colorful rounded squares */
.tool-icon{
  width:36px;height:36px;border-radius:10px;font-size:18px;margin-bottom:8px;
  box-shadow:0 6px 14px rgba(25,80,150,.16);
}
.tool-icon svg{stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool-icon.filled svg{fill:#fff;stroke:none}
.bluebg{background:linear-gradient(160deg,#3b82ff,#0868ff)}
.greenbg{background:linear-gradient(160deg,#22c55e,#16a34a)}
.purplebg{background:linear-gradient(160deg,#a855f7,#7e22ce)}
.orangebg{background:linear-gradient(160deg,#fb923c,#f97316)}
.redbg{background:linear-gradient(160deg,#fb7185,#e11d48)}
.tealbg{background:linear-gradient(160deg,#2dd4bf,#0d9488)}

/* Industry cards */
.ind-card .indico{
  width:40px;height:40px;margin:0 auto 6px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;
  background:rgba(8,104,255,.08);
}
.ind-card .indico svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* How-it-works step glyphs beside titles */
.step b{display:flex;align-items:center;gap:7px;font-size:12px}
.step-ico{
  width:28px;height:28px;border-radius:8px;font-size:14px;
  background:rgba(8,104,255,.12);color:#0868ff;
}
.step-ico svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.download-circle{font-size:0}
.download-circle svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Preview / action buttons — icon + label side-by-side, no overlap */
.preview-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch;
}
/* Workspace inject + primary CTA each get a full row so nothing is crushed */
.preview-actions > span,
.preview-actions .workspace-actions{
  grid-column:1 / -1!important;
  display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0!important;width:100%;
}
.preview-actions > span > button,
.preview-actions > span > a,
.preview-actions .workspace-actions > button,
.preview-actions .workspace-actions > a{
  height:36px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;box-sizing:border-box;
}
#downloadBtn,
.preview-actions #downloadBtn.primary{
  grid-column:1 / -1!important;
  box-shadow:0 8px 18px rgba(8,104,255,.28);
}
.preview-actions button,
.preview-actions .primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  white-space:nowrap!important;
  line-height:1!important;
  min-width:0;
  padding:0 12px!important;
  box-sizing:border-box;
  overflow:hidden;
}
.preview-actions .btn-ico{
  position:static!important;
  width:16px!important;height:16px!important;flex:0 0 16px!important;
  margin:0!important;font-size:16px;line-height:0;
  display:inline-grid!important;place-items:center;
}
.preview-actions .btn-ico svg,
.preview-actions button > svg{
  width:16px!important;height:16px!important;display:block;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  flex:0 0 auto;
}
@media (max-width:720px){
  .preview-actions{grid-template-columns:1fr 1fr!important}
  #downloadBtn,.preview-actions #downloadBtn.primary{grid-column:1/-1!important}
}

/* Payment + templates strip (match mockup) */
.hero-strip{
  display:flex;justify-content:space-between;align-items:center;
  gap:clamp(14px,2vw,28px);flex-wrap:wrap;
  padding:18px 2px 8px;
}
.payments,.template-choice{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:8px;font-size:12px;color:#64748b;
}
.strip-label{font-size:12px;font-weight:600;color:#64748b;white-space:nowrap;margin-right:2px}
.pay-badge{
  height:34px;min-width:0;padding:0 11px;flex:0 0 auto;
  border:1px solid #e2e8f0;background:#fff;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  font-weight:700;font-size:11px;line-height:1;color:#0f172a;
  white-space:nowrap;overflow:visible;
}
.pay-badge .pay-logo{display:block;height:16px;width:auto;max-width:none}
.pay-badge .pay-ico{width:14px;height:14px;flex:0 0 14px;display:block}
.pay-badge.visa{padding:0 12px}
.pay-badge.visa .pay-logo{width:42px;height:14px}
.pay-badge.mc{padding:0 9px}
.pay-badge.mc .pay-logo{width:34px;height:18px}
.pay-badge.pp{padding:0 10px}
.pay-badge.pp .pay-logo{width:72px;height:16px}
.pay-badge.stripe{padding:0 11px}
.pay-badge.stripe .pay-logo{width:48px;height:16px}
.pay-badge.bank{color:#334155;font-size:11px;font-weight:650;padding:0 12px}
.pay-badge.apple{color:#0f172a;font-size:12px;font-weight:600;gap:4px;padding:0 11px}
.small-temp{
  width:34px;height:44px;padding:5px 4px 4px;
  border:1px solid #e2e8f0;background:#fff;border-radius:5px;
  box-shadow:0 2px 6px rgba(15,40,80,.08);
  display:flex;flex-direction:column;gap:3px;cursor:pointer;
  box-sizing:border-box;
}
.small-temp i{
  display:block;height:3px;border-radius:2px;background:#dbe4f0;
}
.small-temp .temp-bar{height:5px;background:#0868ff;opacity:.85}
.small-temp .temp-box{height:8px;width:55%;margin-top:auto;background:#e8eef7}
.small-temp.template-selected,
.small-temp:hover{border-color:#0868ff;box-shadow:0 0 0 2px rgba(8,104,255,.18)}
.small-temp[data-template="classic"] .temp-bar{background:#0ea5e9}
.small-temp[data-template="professional"] .temp-bar{background:#6366f1}
.template-choice .link{
  margin-left:4px;color:#0868ff;font-size:12px;font-weight:700;
  text-decoration:none;white-space:nowrap;
}
.template-choice .link:hover{text-decoration:underline}

/* Dark theme icon surfaces */
body.dark-theme .panel-title .panel-ico,
body.dark-theme .items-title .panel-ico,
body.dark-theme .step-ico{
  background:rgba(59,130,255,.18);color:#8cbcff;
}
body.dark-theme .ind-card .indico{background:rgba(59,130,255,.12)}
body.dark-theme .benefit .circle{
  box-shadow:0 8px 18px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.14);
}
body.dark-theme .tool-icon{box-shadow:0 8px 18px rgba(0,0,0,.4)}
body.dark-theme .strip-label{color:#94a3b8}
body.dark-theme .payments,
body.dark-theme .template-choice{color:#94a3b8}
body.dark-theme .pay-badge{
  background:#0b1220;border-color:#243049;color:#e2e8f0;
  box-shadow:none;
}
body.dark-theme .pay-badge.visa text{fill:#8eb6ff}
body.dark-theme .pay-badge.bank{color:#e2e8f0}
body.dark-theme .pay-badge.apple{color:#f8fafc}
body.dark-theme .small-temp{
  background:#101a2e;border-color:#243049;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
body.dark-theme .small-temp i{background:#334155}
body.dark-theme .small-temp .temp-bar{background:#3b82ff}
body.dark-theme .small-temp .temp-box{background:#1e293b}
body.dark-theme .small-temp.template-selected,
body.dark-theme .small-temp:hover{border-color:#3b82ff;box-shadow:0 0 0 2px rgba(59,130,255,.25)}
body.dark-theme .template-choice .link{color:#60a5fa}

/* Countries — flag cards (mockup) */
.country-grid{gap:10px}
#countries .country-card,
.country-card{
  min-height:68px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;
  display:flex!important;align-items:center;gap:10px;padding:10px 11px;
  text-decoration:none;color:inherit;transition:.15s ease;box-sizing:border-box;
}
.country-card:hover{border-color:#93c5fd;box-shadow:0 8px 18px rgba(15,55,120,.1);transform:translateY(-2px)}
#countries .country-card .flag,
.country-card .flag{
  width:32px!important;min-width:32px!important;height:32px!important;
  flex:0 0 32px!important;border-radius:7px;overflow:hidden;
  display:inline-block!important;line-height:0;vertical-align:middle;
  box-shadow:0 0 0 1px rgba(15,23,42,.08);font-size:0!important;
}
#countries .country-card .flag svg,
.country-card .flag svg{
  width:32px!important;height:32px!important;display:block;
}
#countries .country-card .flag-globe,
.country-card .flag-globe{
  width:32px!important;min-width:32px!important;height:32px!important;
  flex:0 0 32px!important;border-radius:50%;overflow:hidden;
  box-shadow:0 4px 10px rgba(37,99,235,.3);
}
.country-card .flag-globe svg{width:32px!important;height:32px!important}
.country-card b{display:block;font-size:12px;font-weight:750;line-height:1.15;color:#0f172a}
.country-card small{display:block;font-size:10.5px;color:#64748b;margin-top:2px;line-height:1.2}

body.dark-theme #countries .country-card,
body.dark-theme .country-card{
  background:#101a2e;border-color:#1e2a44;color:#e8eefc;
}
body.dark-theme .country-card:hover{
  border-color:#3b6fbf;box-shadow:0 10px 24px rgba(0,0,0,.35);
}
body.dark-theme .country-card b{color:#f1f5f9}
body.dark-theme .country-card small{color:#94a3b8}
body.dark-theme .country-card .flag{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
body.dark-theme .country-card .flag-globe{
  box-shadow:0 6px 14px rgba(0,0,0,.4);
}