/* Інтеграції товарки (js/pages/ShopIntegrations.js), 08.11.2026.
   Лише змінні з :root у styles.css — темна тема підхоплюється сама. Префікс .shi- щоб не
   зачепити сусідні сторінки. */

.shi{max-width:1240px;}
.shi-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px;}
.shi-head-stat{display:flex; flex-direction:column; align-items:flex-end; line-height:1.1;}
.shi-head-stat b{font-size:26px; font-weight:800; color:var(--visa);}
.shi-head-stat span{font-size:12px; color:var(--slate);}

.shi-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px;}
.shi-search{position:relative; flex:1 1 260px; max-width:380px;}
.shi-search input{width:100%; padding:9px 12px 9px 34px; border:1px solid var(--sky-line); border-radius:var(--radius-md); background:var(--paper); color:var(--ink); font:inherit;}
.shi-search input:focus{outline:none; border-color:var(--visa); box-shadow:0 0 0 3px var(--visa-soft);}
.shi-search-ico{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--slate); pointer-events:none;}
.shi-search-ico svg{width:16px; height:16px;}
.shi-chips{display:flex; flex-wrap:wrap; gap:6px;}
.shi-chip{border:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft); padding:6px 12px; border-radius:999px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s;}
.shi-chip:hover{background:var(--sky);}
.shi-chip.on{background:var(--visa); border-color:var(--visa); color:var(--visa-on, #fff);}
.shi-chip.sm{padding:3px 9px; font-size:12px;}
.shi-chip:disabled{opacity:.5; cursor:default;}

.shi-note{background:var(--amber-soft); color:var(--ink-soft); border-radius:var(--radius-md); padding:10px 14px; font-size:13px; margin-bottom:14px;}
.shi-alert{background:var(--stamp-soft); color:var(--stamp); border-radius:var(--radius-md); padding:10px 14px; font-size:13px; margin-bottom:14px; font-weight:600;}

.shi-group{margin-bottom:22px;}
.shi-group-title{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:0 0 10px;}
.shi-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px;}

.shi-card{position:relative; display:flex; flex-direction:column; gap:10px; background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-card); cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;}
.shi-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-pop); border-color:color-mix(in srgb, var(--visa) 35%, var(--sky-line));}
.shi-card.is-ok{border-color:color-mix(in srgb, var(--good) 40%, var(--sky-line));}
.shi-card.is-ok::before{content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--good);}
.shi-card.is-error::before{content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--stamp);}
.shi-card-top{display:flex; align-items:center; gap:12px;}
.shi-card-name{min-width:0; display:flex; flex-direction:column; gap:4px; align-items:flex-start;}
.shi-name{font-weight:700; font-size:14px; color:var(--ink);}
.shi-desc{font-size:12.5px; color:var(--slate); line-height:1.45; margin:0; flex:1;}
.shi-tile{flex:none; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:-.02em; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);}
.shi-conns{display:flex; flex-wrap:wrap; gap:5px;}
.shi-conn-tag{font-size:11.5px; padding:2px 8px; border-radius:999px; background:var(--good-soft); color:var(--good); font-weight:600;}
.shi-conn-tag.off{background:var(--sky); color:var(--slate);}
.shi-conn-tag.err{background:var(--stamp-soft); color:var(--stamp);}
.shi-card-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; border-top:1px dashed var(--sky-line); padding-top:10px;}
.shi-soon{color:var(--amber); font-weight:600; line-height:1.3;}
.shi-ready{color:var(--good); font-weight:600;}
.shi-go{color:var(--visa); font-weight:700; white-space:nowrap;}

/* Панелі API і вебхуків */
.shi-panel{background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg); padding:20px; margin:26px 0; box-shadow:var(--shadow-card); scroll-margin-top:80px;}
.shi-panel-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px;}
.shi-panel-head h3{margin:0 0 4px; font-size:16px; color:var(--ink);}
.shi-endpoint{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--sky); border-radius:var(--radius-md); padding:10px 12px; margin-bottom:14px;}
.shi-endpoint code{font-family:var(--font-mono); font-size:13px; color:var(--ink); word-break:break-all; flex:1; min-width:200px;}
.shi-method{font-family:var(--font-mono); font-size:11px; font-weight:700; background:var(--visa); color:var(--visa-on, #fff); padding:3px 7px; border-radius:6px;}
.shi-issue{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.shi-issue input, .shi-issue select, .shi-hook-add input, .shi-inline input{flex:1 1 220px; padding:9px 12px; border:1px solid var(--sky-line); border-radius:var(--radius-md); background:var(--paper); color:var(--ink); font:inherit;}
.shi-issue select{flex:0 1 240px;}
.shi-newkey{border:2px solid var(--visa); background:var(--visa-soft); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:14px;}
.shi-newkey-title{font-weight:700; font-size:13px; color:var(--visa-ink); margin-bottom:8px;}
.shi-newkey-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.shi-newkey-row code{font-family:var(--font-mono); font-size:13.5px; background:var(--paper); padding:6px 10px; border-radius:8px; word-break:break-all; flex:1; min-width:220px; color:var(--ink);}

.shi-table-wrap{overflow-x:auto; margin-bottom:12px;}
.shi-table{width:100%; border-collapse:collapse; font-size:13px;}
.shi-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--sky-line);}
.shi-table td{padding:8px; border-bottom:1px solid var(--sky-line); color:var(--ink-soft); vertical-align:top;}
.shi-table tr.revoked td{opacity:.55;}
.shi-td-act{text-align:right; white-space:nowrap;}

.shi-docs{margin-top:16px;}
.shi-tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--sky-line);}
.shi-tabs button{border:0; background:none; padding:8px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--slate); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.shi-tabs button.on{color:var(--visa); border-bottom-color:var(--visa);}
.shi-tabs .shi-tabs-copy{margin-left:auto; display:inline-flex; align-items:center; gap:5px;}
.shi-tabs-copy svg, .shi-endpoint .btn svg, .shi-newkey .btn svg, .shi-issue .btn svg, .shi-hook-add .btn svg, .shi-conn-tabs svg{width:14px; height:14px;}
.shi-code{background:var(--ink-invert); color:#e8f4ef; font-family:var(--font-mono); font-size:12.5px; line-height:1.55; padding:14px 16px; border-radius:0 0 var(--radius-md) var(--radius-md); overflow-x:auto; margin:0 0 10px; white-space:pre;}
.shi-fields{margin-top:10px;}
.shi-fields summary{cursor:pointer; font-weight:700; font-size:13px; color:var(--ink-soft); margin-bottom:8px;}
.shi-fields td.mono{white-space:nowrap; color:var(--ink); font-size:12px;}

/* Вебхуки */
.shi-hook{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; border:1px solid var(--sky-line); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px;}
.shi-hook.off{opacity:.6;}
.shi-hook-main{min-width:0; display:flex; flex-direction:column; gap:6px;}
.shi-hook-url{font-family:var(--font-mono); font-size:13px; color:var(--ink); word-break:break-all;}
.shi-hook-events{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.shi-hook-main .hint a{margin-left:6px;}
.shi-hook-act{display:flex; gap:8px; align-items:center; flex:none;}
.shi-hook-add{display:flex; flex-wrap:wrap; gap:10px; align-items:center; border:1px dashed var(--sky-line); border-radius:var(--radius-md); padding:12px 14px;}
.shi-bad{color:var(--stamp);}
.shi-check{display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-soft); cursor:pointer; font-weight:500;}

/* Перемикач */
.shi-switch{position:relative; display:inline-block; width:40px; height:22px; flex:none; cursor:pointer;}
.shi-switch input{opacity:0; width:0; height:0; position:absolute;}
.shi-switch span{position:absolute; inset:0; background:var(--sky-line); border-radius:999px; transition:background .18s;}
.shi-switch span::after{content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--paper); box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .18s;}
.shi-switch input:checked + span{background:var(--good);}
.shi-switch input:checked + span::after{transform:translateX(18px);}
.shi-switch input:disabled + span{opacity:.5;}

/* Шухляда */
.shi-drawer{max-width:640px; width:min(640px, 100vw);}
.shi-drawer-title{display:flex; gap:12px; align-items:center;}
.shi-drawer-title h3{margin:0 0 2px; font-size:17px;}
.shi-conn-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
.shi-conn-tabs button{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft); padding:6px 11px; border-radius:var(--radius-sm); font:inherit; font-size:13px; font-weight:600; cursor:pointer;}
.shi-conn-tabs button.on{border-color:var(--visa); background:var(--visa-soft); color:var(--visa-ink);}
.shi-dot{width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--slate);}
.shi-dot.ok{background:var(--good);} .shi-dot.err{background:var(--stamp);} .shi-dot.off{background:var(--sky-line);}
.shi-row2{display:flex; gap:14px; align-items:flex-end;}
.shi-row2 .field:first-child{flex:1;}
.shi-enabled{display:flex; flex-direction:column; align-items:flex-start;}
.shi-enabled .shi-switch{margin:8px 0;}
.shi-saved{margin-left:8px; font-size:11.5px; font-weight:700; color:var(--good); background:var(--good-soft); padding:1px 7px; border-radius:999px;}
.shi-clear{margin-left:8px; font-size:12px; font-weight:500;}
.shi-help{margin-top:4px; line-height:1.4;}
.shi-inline{display:flex; gap:8px; align-items:center;}
.shi-picked{font-size:13px; font-weight:600; color:var(--visa-ink); background:var(--visa-soft); border-radius:8px; padding:6px 10px; margin-bottom:6px;}
.shi-pick-list{display:flex; flex-direction:column; max-height:220px; overflow-y:auto; border:1px solid var(--sky-line); border-radius:var(--radius-sm); margin-top:6px;}
.shi-pick-list button{text-align:left; border:0; border-bottom:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft); padding:8px 10px; font:inherit; font-size:13px; cursor:pointer;}
.shi-pick-list button:hover{background:var(--sky);}
.shi-np-found{margin:6px 0 12px;}
.shi-pick{display:inline-block; margin:0 6px 6px 0; border:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft); padding:6px 10px; border-radius:var(--radius-sm); font:inherit; font-size:13px; cursor:pointer;}
.shi-pick.on{border-color:var(--good); background:var(--good-soft); color:var(--good); font-weight:600;}
.shi-test{border-radius:var(--radius-md); padding:10px 14px; font-size:13px; font-weight:600; margin-top:6px;}
.shi-test.ok{background:var(--good-soft); color:var(--good);}
.shi-test.bad{background:var(--stamp-soft); color:var(--stamp);}
.shi-foot{align-items:center;}
.shi-spacer{flex:1;}

@media (max-width:720px){
  .shi-head{flex-direction:column;}
  .shi-head-stat{align-items:flex-start;}
  .shi-grid{grid-template-columns:1fr;}
  .shi-panel{padding:14px;}
  .shi-hook{flex-direction:column;}
  .shi-drawer{min-width:0; width:100vw;}
  .shi-row2{flex-direction:column; align-items:stretch;}
  .shi-tabs .shi-tabs-copy{margin-left:0;}
}