/* ============================================================================
   zukro-features.css — styles for the new storefront features (Subscribe & Save,
   bundles/kits, VIP tier, data-deletion). Included on product.html + account.html.
   Brand: green #123D2A, gold #E8A92E. Self-contained, responsive, a11y-friendly.
   ============================================================================ */
:root { --zkf-green:#123D2A; --zkf-green-d:#123D2A; --zkf-gold:#E8A92E; --zkf-bd:#e3e9e4; }

/* --- Subscribe & Save (PDP option) --- */
.zk-sub-card{ border:1px solid #cfe0d3; background:#F3EEE3; border-radius:14px; padding:14px 16px; margin:14px 0; }
.zk-sub-head{ font-weight:700; color:var(--zkf-green-d); font-size:15px; display:flex; align-items:center; gap:8px; }
.zk-sub-head b{ color:var(--zkf-green); }
.zk-sub-sub{ font-size:12.5px; color:#5b6b5e; margin:6px 0 10px; }
.zk-sub-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.zk-sub-row label{ font-size:13px; color:#43534a; font-weight:600; }
.zk-sub-row select{ flex:1 1 130px; padding:9px 10px; border:1px solid var(--zkf-bd); border-radius:9px; font:inherit; font-size:14px; background:#fff; }
.zk-sub-row #zkSubBtn{ background:var(--zkf-green); color:#fff; border:none; border-radius:9px; padding:10px 18px; font-weight:700; cursor:pointer; }
.zk-sub-row #zkSubBtn:hover{ background:var(--zkf-green-d); }
.zk-sub-row #zkSubBtn:disabled{ opacity:.6; cursor:default; }
.zk-sub-msg{ font-size:12.5px; margin-top:8px; color:#5b6b5e; }
.zk-sub-ok{ color:var(--zkf-green); font-weight:600; }
.zk-sub-ok a{ color:var(--zkf-green-d); }

/* --- Bundle / kit (PDP) --- */
.zk-kit{ border:1px solid #CED6C9; background:#F3EEE3; border-radius:14px; padding:14px 16px; margin:14px 0; }
.zk-kit-head{ font-weight:700; color:#9a3412; font-size:14px; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.zk-kit-list{ list-style:none; margin:0; padding:0; }
.zk-kit-list li{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed #CED6C9; font-size:13.5px; color:#123D2A; }
.zk-kit-list li:last-child{ border-bottom:none; }
.zk-kit-price{ color:#123D2A; white-space:nowrap; }
.zk-kit-save{ margin-top:10px; background:#e7f1e9; color:var(--zkf-green-d); border:1px solid #CED6C9; border-radius:9px; padding:9px 12px; font-size:13px; font-weight:700; text-align:center; }
.zk-kit-save span{ font-weight:500; color:#5b6b5e; }

/* --- VIP tier (account) --- */
.zk-vip-card{ border:1px solid #CED6C9; background:linear-gradient(135deg,#F3EEE3,#F3EEE3); border-radius:14px; padding:16px 18px; }
.zk-vip-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.zk-vip-badge{ font-weight:800; color:#9a3412; font-size:16px; display:inline-flex; align-items:center; gap:8px; }
.zk-vip-mult{ background:var(--zkf-gold); color:#fff; border-radius:30px; padding:4px 12px; font-size:12.5px; font-weight:700; }
.zk-vip-perks{ list-style:none; margin:12px 0 0; padding:0; }
.zk-vip-perks li{ font-size:13.5px; color:#123D2A; padding:4px 0 4px 22px; position:relative; }
.zk-vip-perks li::before{ content:"\2713"; position:absolute; left:0; color:var(--zkf-green); font-weight:700; }
.zk-vip-progress{ margin-top:14px; }
.zk-vip-bar{ height:8px; background:#CED6C9; border-radius:30px; overflow:hidden; }
.zk-vip-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--zkf-green),var(--zkf-gold)); border-radius:30px; }
.zk-vip-next{ font-size:12.5px; color:#5b6b5e; margin-top:8px; }
.zk-vip-next b{ color:#9a3412; }

/* --- Subscriptions manager (account) --- */
.zk-subs-loading,.zk-subs-empty{ font-size:13.5px; color:#5b6b5e; padding:10px 0; }
.zk-subs-empty i{ color:var(--zkf-green); margin-right:6px; }
.zk-sub-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border:1px solid var(--zkf-bd); border-radius:12px; padding:12px 14px; margin-bottom:10px; background:#fff; }
.zk-sub-paused{ background:#F3EEE3; opacity:.85; }
.zk-sub-info strong{ display:block; color:var(--zkf-green-d); font-size:14px; }
.zk-sub-info span{ font-size:12.5px; color:#6b7b6e; }
.zk-sub-actions{ display:flex; gap:8px; }
.zk-sub-actions button{ border:1px solid var(--zkf-bd); background:#fff; border-radius:8px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--zkf-green-d); }
.zk-sub-actions button:hover{ background:#F3EEE3; }
.zk-sub-actions button.danger{ color:#9a3412; border-color:#F3EEE3; }
.zk-sub-actions button.danger:hover{ background:#F3EEE3; }
.zk-sub-actions button:disabled{ opacity:.5; cursor:default; }

/* --- Data deletion (account, danger zone) --- */
.zk-danger{ border:1px solid #F3EEE3; background:#F3EEE3; border-radius:14px; padding:16px 18px; }
.zk-danger h4{ color:#9a3412; font-size:15px; margin:0 0 6px; display:flex; align-items:center; gap:8px; }
.zk-danger p{ font-size:12.5px; color:#123D2A; margin:0 0 12px; line-height:1.5; }
.zk-danger-btn{ background:#fff; color:#9a3412; border:1px solid #E8A92E; border-radius:9px; padding:9px 16px; font-weight:700; cursor:pointer; }
.zk-danger-btn:hover{ background:#9a3412; color:#fff; }
.zk-danger-btn:disabled{ opacity:.6; cursor:default; }
.zk-del-msg{ font-size:12.5px; margin-top:10px; color:#123D2A; }

/* focus visibility (WCAG 2.4.7) for the new interactive controls */
.zk-sub-row select:focus-visible,.zk-sub-row button:focus-visible,
.zk-sub-actions button:focus-visible,.zk-danger-btn:focus-visible{ outline:2px solid var(--zkf-green); outline-offset:2px; }

@media (max-width:520px){
  .zk-sub-item{ flex-direction:column; align-items:flex-start; }
  .zk-sub-actions{ width:100%; }
  .zk-sub-actions button{ flex:1; }
}