/* TSL-METRONET-MEGAWAN-COMMERCE-V1 — commerce block styles (additive, page-scoped .tsl).
   Mobile-first; no horizontal overflow at 360/390/412; matches the DI/site design tokens. */
.tsl { --tsl-blue:#0066CC; --tsl-ink:#0f172a; --tsl-mut:#64748b; --tsl-line:#e2e8f0; --tsl-bg:#f8fafc;
  max-width:1180px; margin:0 auto; padding:8px 16px 40px; box-sizing:border-box; }
.tsl *{ box-sizing:border-box; }
.tsl-region{ margin:26px 0; padding:20px; border:1px solid var(--tsl-line); border-radius:14px; background:#fff; }
.tsl-r-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.tsl-r-num{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--tsl-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.tsl-r-head h2{ font-size:1.15rem; line-height:1.3; margin:0; color:var(--tsl-ink); }
.tsl-r-sub{ color:var(--tsl-mut); margin:6px 0 16px; font-size:.95rem; line-height:1.55; }
.tsl-r-sub strong{ color:var(--tsl-ink); }

/* buttons */
.tsl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:9px;
  padding:10px 14px; font-size:.9rem; font-weight:600; cursor:pointer; border:1px solid transparent;
  text-decoration:none; min-height:44px; }
.tsl-btn-primary{ background:var(--tsl-blue); color:#fff; }
.tsl-btn-primary:hover{ background:#0053a6; }
.tsl-btn-primary:disabled{ background:#94a3b8; cursor:not-allowed; }
.tsl-btn-ghost{ background:#fff; color:var(--tsl-blue); border-color:var(--tsl-blue); }
.tsl-btn-link{ background:none; color:var(--tsl-blue); border:0; text-decoration:underline; min-height:auto; padding:8px 4px; }
.tsl-btn-sm{ min-height:auto; padding:6px 10px; font-size:.82rem; }
.tsl-btn.tsl-added{ background:#059669; }

/* renewal */
.tsl-renew-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.tsl-renew-result{ margin-top:12px; }
.tsl-renew-result.tsl-ok{ padding:12px 14px; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:10px; color:#065f46; }

/* configurator */
.tsl-cfg{ border:1px solid var(--tsl-line); border-radius:12px; padding:16px; background:var(--tsl-bg); }
.tsl-cfg-lbl{ display:block; font-weight:700; color:var(--tsl-ink); font-size:.92rem; margin-bottom:6px; }
.tsl-sel{ width:100%; padding:11px 12px; border:1px solid var(--tsl-line); border-radius:9px; background:#fff;
  font-size:.95rem; color:var(--tsl-ink); min-height:44px; }
.tsl-cfg-hub{ margin-bottom:16px; }
.tsl-cfg-branches{ margin-bottom:16px; }
.tsl-branch-list{ display:flex; flex-direction:column; gap:12px; }
.tsl-branch{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start;
  border:1px solid var(--tsl-line); border-radius:10px; padding:12px; background:#fff; position:relative; }
.tsl-branch-bw{ display:flex; align-items:center; gap:6px; }
.tsl-branch-bw input{ width:120px; padding:10px 12px; border:1px solid var(--tsl-line); border-radius:9px; font-size:.95rem; min-height:44px; }
.tsl-unit{ color:var(--tsl-mut); font-size:.85rem; }
.tsl-branch-chips{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.tsl-chip{ border:1px solid var(--tsl-line); background:#fff; border-radius:20px; padding:6px 12px; font-size:.82rem;
  cursor:pointer; color:var(--tsl-ink); }
.tsl-chip.on{ border-color:var(--tsl-blue); color:var(--tsl-blue); background:#eff6ff; }
.tsl-branch-x{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; border:1px solid var(--tsl-line);
  background:#fff; color:var(--tsl-mut); font-size:18px; line-height:1; cursor:pointer; }
.tsl-branch-x:hover{ color:#dc2626; border-color:#fecaca; }
.tsl-add-branch{ margin-top:12px; }
.tsl-cfg-ip{ margin-bottom:16px; }
.tsl-ip-row{ display:flex; flex-wrap:wrap; gap:12px; }
.tsl-ip-f{ display:flex; flex-direction:column; gap:4px; font-size:.86rem; color:var(--tsl-mut); }
.tsl-ip-f input{ width:110px; padding:9px 12px; border:1px solid var(--tsl-line); border-radius:9px; min-height:40px; }
.tsl-ip-note{ font-size:.82rem; color:var(--tsl-mut); margin:8px 0 0; line-height:1.5; }

/* result */
.tsl-cfg-result{ margin-top:16px; padding:14px 16px; border-radius:10px; background:#fff; border:1px solid var(--tsl-line); }
.tsl-cfg-hint{ color:var(--tsl-mut); font-size:.9rem; }
.tsl-cfg-result.tsl-cfg-warn{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.tsl-cfg-result.tsl-cfg-consult{ background:#fff7ed; border-color:#fed7aa; }
.tsl-cfg-lines{ list-style:none; margin:0 0 12px; padding:0; }
.tsl-cfg-lines li{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--tsl-line); font-size:.9rem; }
.tsl-cfg-lines li span{ color:var(--tsl-ink); }
.tsl-cfg-lines li b{ color:var(--tsl-blue); white-space:nowrap; }
.tsl-cfg-lines li em{ color:#b45309; font-style:normal; font-size:.82rem; }
.tsl-line-consult span{ color:#92400e !important; }
.tsl-cfg-tot{ margin:12px 0; padding:12px 14px; background:var(--tsl-bg); border-radius:10px; }
.tsl-cfg-row{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:.92rem; color:var(--tsl-mut); }
.tsl-cfg-row b{ color:var(--tsl-ink); }
.tsl-cfg-grand{ border-top:1px solid var(--tsl-line); margin-top:6px; padding-top:10px; font-size:1.02rem; }
.tsl-cfg-grand b{ color:var(--tsl-blue); font-size:1.15rem; }
.tsl-cfg-hubnote,.tsl-cfg-fee,.tsl-cfg-ip-sum,.tsl-cfg-fee-note,.tsl-cfg-foot{ font-size:.84rem; color:var(--tsl-mut); line-height:1.5; margin:8px 0 0; }
.tsl-cfg-fee b,.tsl-cfg-ip-sum b{ color:var(--tsl-ink); }
.tsl-cfg-gate{ padding:4px 0; }
.tsl-cfg-gate b{ color:#9a3412; }
.tsl-cfg-gate p{ color:var(--tsl-mut); font-size:.9rem; margin:6px 0 10px; line-height:1.5; }
.tsl-cfg-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.tsl-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }

/* how (geo) */
.tsl-geo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:6px 0 14px; }
.tsl-geo-card{ border:1px solid var(--tsl-line); border-radius:10px; padding:12px 14px; background:#fff; display:flex; flex-direction:column; gap:4px; }
.tsl-geo-card b{ color:var(--tsl-blue); }
.tsl-geo-card span{ color:var(--tsl-mut); font-size:.86rem; line-height:1.5; }
.tsl-how-notes{ margin:0 0 14px; padding-left:18px; color:var(--tsl-mut); font-size:.9rem; line-height:1.6; }

/* reference table */
.tsl-table-ref{ margin-top:8px; }
.tsl-table-ref summary{ cursor:pointer; font-weight:600; color:var(--tsl-blue); padding:8px 0; }
.tsl-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:10px; }
.tsl-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:520px; }
.tsl-table th,.tsl-table td{ padding:8px 10px; border:1px solid var(--tsl-line); text-align:right; white-space:nowrap; }
.tsl-table thead th{ background:var(--tsl-bg); color:var(--tsl-ink); text-align:right; }
.tsl-table tbody th{ text-align:left; color:var(--tsl-ink); font-weight:600; }
.tsl-table td{ color:var(--tsl-mut); }
.tsl-table-foot{ font-size:.8rem; color:var(--tsl-mut); margin:8px 0 0; line-height:1.5; }

/* notes */
.tsl-notes{ display:flex; flex-direction:column; gap:8px; }
.tsl-note{ font-size:.86rem; color:var(--tsl-mut); line-height:1.5; padding:10px 12px; background:var(--tsl-bg);
  border:1px solid var(--tsl-line); border-radius:9px; }
.tsl-note b{ color:var(--tsl-ink); }
.tsl-note-muted{ background:#fffbeb; border-color:#fde68a; color:#92400e; }

/* connectivity */
.tsl-conn-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.tsl-conn-card{ border:1px solid var(--tsl-line); border-radius:12px; padding:16px; background:#fff;
  display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.tsl-conn-card b{ color:var(--tsl-ink); }
.tsl-conn-card span{ color:var(--tsl-mut); font-size:.86rem; line-height:1.5; }
.tsl-conn-cta{ color:var(--tsl-blue); font-style:normal; font-weight:600; font-size:.86rem; margin-top:auto; }
.tsl-chip-soon{ font-size:.72rem; background:#fef3c7; color:#92400e; padding:3px 8px; border-radius:20px; font-weight:600; }

/* modal */
.tsl-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:16px; }
.tsl-modal[hidden]{ display:none; }
.tsl-modal-back{ position:absolute; inset:0; background:rgba(15,23,42,.5); }
.tsl-modal-box{ position:relative; background:#fff; border-radius:14px; padding:22px; width:100%; max-width:460px;
  max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.tsl-modal-x{ position:absolute; top:12px; right:14px; border:0; background:none; font-size:26px; line-height:1; color:var(--tsl-mut); cursor:pointer; }
.tsl-modal-box h3{ margin:0 8px 6px 0; color:var(--tsl-ink); font-size:1.15rem; }
.tsl-modal-sub{ color:var(--tsl-mut); font-size:.9rem; line-height:1.5; margin:0 0 14px; }
.tsl-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.tsl-field span{ font-size:.85rem; color:var(--tsl-ink); font-weight:600; }
.tsl-field b{ color:#dc2626; }
.tsl-field input,.tsl-field textarea{ padding:11px 12px; border:1px solid var(--tsl-line); border-radius:9px; font-size:.95rem; min-height:44px; }
.tsl-field textarea{ min-height:auto; resize:vertical; }
.tsl-modal-msg{ font-size:.86rem; margin:4px 0; min-height:1em; }
.tsl-modal-msg.tsl-err{ color:#dc2626; }
.tsl-modal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
body.tsl-modal-open{ overflow:hidden; }

@media (max-width:560px){
  .tsl-region{ padding:16px 14px; }
  .tsl-branch{ grid-template-columns:1fr; }
  .tsl-branch-bw input{ width:100%; }
  .tsl-cfg-actions .tsl-btn,.tsl-actions .tsl-btn{ flex:1 1 auto; }
}