/* e-OCI Wallet — v2 feature UI (reuses app tokens + .set-* classes) */

/* Reminder banner on the wallet */
.feat-banner{ margin:12px 0 2px; padding:13px 15px; border-radius:16px; display:flex; gap:11px; align-items:flex-start;
  background:linear-gradient(135deg, rgba(255,153,51,.15), rgba(255,153,51,.06));
  border:1px solid rgba(255,153,51,.34); color:var(--txt); font-size:13px; line-height:1.45; }
.feat-banner.warn{ background:linear-gradient(135deg, rgba(229,72,77,.15), rgba(229,72,77,.05)); border-color:rgba(229,72,77,.42); }
.feat-banner .fb-ic{ flex:0 0 auto; margin-top:1px; }
.feat-banner b{ font-weight:600; }
.feat-banner a{ color:var(--saffron-soft,#FFB865); text-decoration:none; white-space:nowrap; }

/* Bottom-sheet modal */
#featModal{ position:fixed; inset:0; z-index:9300; display:none; align-items:flex-end; justify-content:center; }
#featModal.show{ display:flex; }
#featModal .fm-bg{ position:absolute; inset:0; background:rgba(2,7,18,.62); backdrop-filter:blur(3px); }
.fm-card{ position:relative; width:100%; max-width:440px; background:var(--panel,#0C1A34);
  border:1px solid var(--line-strong,rgba(255,255,255,.16)); border-radius:24px 24px 0 0;
  padding:22px 20px calc(env(safe-area-inset-bottom) + 22px); max-height:88vh; overflow-y:auto;
  font-family:"Space Grotesk",system-ui,sans-serif; animation:fmUp .3s cubic-bezier(.22,.61,.36,1) both; }
@keyframes fmUp{ from{transform:translateY(100%)} to{transform:none} }
.fm-card h3{ margin:0 0 4px; font-size:19px; font-weight:600; color:var(--txt); }
.fm-sub{ margin:0 0 18px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.fm-field{ margin-bottom:13px; }
.fm-field label{ display:block; font-size:12px; color:var(--head); margin:0 0 6px 2px; }
.fm-field input{ width:100%; padding:13px 14px; border-radius:13px; font-size:16px; color:var(--txt);
  background:var(--surface); border:1px solid var(--line); }
.fm-field input:focus{ outline:none; border-color:var(--saffron); }
.fm-btn{ width:100%; padding:14px; border-radius:14px; font-size:15.5px; font-weight:600; color:#241200; margin-top:6px;
  background:linear-gradient(135deg,var(--saffron-soft,#FFB865),var(--saffron,#FF9933)); }
.fm-btn.ghost{ background:var(--surface); color:var(--txt); border:1px solid var(--line); }
.fm-btn.danger{ background:linear-gradient(135deg,#F16A6E,#E5484D); color:#fff; }
.fm-btn:active{ transform:scale(.98); }
.fm-btn:disabled{ opacity:.6; }
.fm-err{ min-height:17px; font-size:13px; color:var(--danger-soft,#F16A6E); text-align:center; margin-top:9px; }
.fm-err.ok{ color:#8fdc86; }
.fm-list{ display:flex; flex-direction:column; gap:8px; }
.fm-row{ display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:13px;
  background:var(--surface); border:1px solid var(--line); }
.fm-row .fm-meta{ flex:1; min-width:0; }
.fm-row .fm-meta b{ display:block; font-size:13.5px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-row .fm-meta span{ color:var(--muted); font-size:11.5px; }
.fm-row button{ color:var(--danger-soft,#F16A6E); font-size:13px; font-weight:600; }
.fm-url{ word-break:break-all; font-family:"IBM Plex Mono",monospace; font-size:12px; line-height:1.5;
  background:var(--surface); padding:12px; border-radius:12px; border:1px solid var(--line); color:var(--head); margin-bottom:12px; }
.fm-check{ display:flex; align-items:flex-start; gap:11px; padding:11px 3px; font-size:14px; color:var(--txt); cursor:pointer; }
.fm-check input{ width:20px; height:20px; margin-top:1px; accent-color:var(--saffron); flex:0 0 auto; }
.fm-check.done .fm-ct{ color:var(--muted); text-decoration:line-through; }

/* Plan modal */
.pm-list{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.pm-tier{ border:1px solid var(--line); border-radius:14px; padding:15px 16px; background:var(--surface); }
.pm-tier.cur{ border-color:var(--saffron); }
.pm-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.pm-top b{ font-size:16px; color:var(--txt); }
.pm-top span{ font-size:20px; font-weight:700; color:var(--txt); }
.pm-top span i{ font-size:12px; font-weight:500; color:var(--muted); font-style:normal; margin-left:2px; }
.pm-tier ul{ list-style:none; padding:0; margin:0 0 12px; }
.pm-tier li{ font-size:13px; color:var(--head); padding:4px 0 4px 19px; position:relative; }
.pm-tier li::before{ content:"✓"; position:absolute; left:0; color:#8fdc86; font-weight:700; }
.pm-current{ text-align:center; font-size:13px; font-weight:600; color:var(--saffron-soft); padding:7px; }

/* Mini toast */
#featToast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 88px); transform:translateX(-50%) translateY(18px);
  background:var(--panel,#0C1A34); border:1px solid var(--line-strong,rgba(255,255,255,.2)); color:var(--txt);
  padding:11px 18px; border-radius:12px; font:500 13.5px "Space Grotesk",system-ui,sans-serif; z-index:9600;
  opacity:0; transition:.25s; pointer-events:none; box-shadow:0 16px 40px -14px rgba(0,0,0,.7); max-width:90vw; text-align:center; }
#featToast.show{ opacity:1; transform:translateX(-50%) translateY(0); }