/* =====================================================================
   store.css — Map Store, My purchases, Team projects, Admin → Store
   15-Sep-2026. Uses the tokens from style.css (--brand, --muted, --line-2).
   ===================================================================== */
.st-wrap{max-width:1100px;margin:0 auto;padding:8px 16px 48px}
.st-h1{font-size:30px;font-weight:800;margin:10px 0 4px;letter-spacing:-.01em}
.st-h1 .bn{font-size:.55em;color:var(--muted);font-weight:600;margin-left:6px}
.st-lead{color:var(--muted);margin:0 0 18px;max-width:760px}
.st-h2{font-size:20px;font-weight:800;margin:30px 0 12px}
.st-note{font-size:13px;color:var(--muted)}
.st-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* flashcards */
.st-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:18px 0 8px}
.st-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 18px 18px;border:1px solid var(--line-2,#e2e8f0);
  border-radius:16px;background:#fff;color:inherit;text-decoration:none!important;transition:border-color .15s,box-shadow .15s,transform .15s}
.st-card:hover{border-color:var(--brand);box-shadow:0 12px 30px -18px rgba(11,122,59,.55);transform:translateY(-2px)}
.st-card.is-on{border:2px solid var(--brand);padding:19px 17px 17px}
.st-card.is-off{opacity:.6;background:#f8fafc}
.st-badge{position:absolute;top:-11px;right:14px;background:linear-gradient(90deg,#0b7a3b,#0ea85c);color:#fff;font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.st-name{font-weight:800;font-size:16px;color:var(--ink,#0f172a)}
.st-name .bn{display:block;font-size:12px;color:var(--muted);font-weight:600}
.st-price{font-size:30px;font-weight:800;color:var(--brand-2,#075e2e);line-height:1.1}
.st-price small{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.st-tag{font-size:12.5px;color:var(--muted)}
.st-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.st-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;background:#f1f5f9;color:#334155;border-radius:999px;padding:3px 9px}
.st-chip.g{background:#dcfce7;color:#166534}
.st-card ul{margin:8px 0 12px;padding-left:18px;font-size:13px;color:#334155;flex:1}
.st-card ul li{margin:3px 0}
.st-go{display:block;text-align:center;font-size:14px;font-weight:800;color:#fff;background:var(--brand);border-radius:10px;padding:9px}
.st-card.is-on .st-go{background:var(--brand-2,#075e2e)}
.st-card.custom .st-go{background:#fff;color:var(--brand);border:1px solid var(--brand)}

/* contact strip */
.st-contact{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;
  background:linear-gradient(90deg,#ecfdf5,#f0fdfa);border:1px solid #bbf7d0;margin:18px 0}
.st-contact b{font-size:15px}
.st-contact .bn{display:block;font-size:12.5px;color:#475569}
.st-cbtn{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;padding:9px 14px;border-radius:10px;text-decoration:none!important}
.st-cbtn.call{background:#0f172a;color:#fff}
.st-cbtn.wa{background:#16a34a;color:#fff}
.st-cbtn svg{width:16px;height:16px}

/* account box */
.st-acct{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:14px 0}
.st-tile{background:#fff;border:1px solid var(--line-2,#e2e8f0);border-radius:12px;padding:12px 14px}
.st-tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;font-weight:800}
.st-tile .v{font-size:22px;font-weight:800;margin-top:2px}
.st-tile .s{font-size:12px;color:var(--muted)}

/* pay */
.st-pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;margin-top:10px}
@media (max-width:860px){.st-pay{grid-template-columns:1fr}}
.st-box{background:#fff;border:1px solid var(--line-2,#e2e8f0);border-radius:16px;padding:18px}
.st-steps{margin:0;padding-left:20px;font-size:14px}
.st-steps li{margin:8px 0}
.st-num{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:#f8fafc;border:1px dashed #cbd5e1;margin:6px 0;font-size:14px}
.st-num b{font-family:ui-monospace,Consolas,monospace;font-size:15px;letter-spacing:.02em}
.st-num button{font-size:12px;padding:4px 9px;border-radius:7px;border:1px solid #cbd5e1;background:#fff;cursor:pointer}
.st-f{margin:0 0 12px}
.st-f label{display:block;font-weight:700;font-size:13px;margin-bottom:5px}
.st-f label .bn{font-weight:600;color:var(--muted);font-size:12px}
.st-f input,.st-f select,.st-f textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #cbd5e1;border-radius:9px;font:inherit;font-size:14px;background:#fff}
.st-f input:focus,.st-f select:focus,.st-f textarea:focus{outline:2px solid rgba(11,122,59,.25);border-color:var(--brand)}
.st-f .hint{font-size:12px;color:var(--muted);margin:4px 0 0}
.st-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.st-2{grid-template-columns:1fr}}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:14px;padding:10px 16px;border-radius:10px;
  border:1px solid var(--brand);background:var(--brand);color:#fff;cursor:pointer;text-decoration:none!important}
.st-btn.ghost{background:#fff;color:var(--brand)}
.st-btn.danger{background:#fff;color:#b91c1c;border-color:#fecaca}
.st-btn.sm{font-size:12.5px;padding:6px 10px;border-radius:8px}
.st-btn.wide{width:100%}
.st-btn[disabled]{opacity:.55;cursor:default}
.st-alert{border-radius:12px;padding:12px 14px;font-size:14px;margin:12px 0}
.st-alert.ok{background:#dcfce7;border:1px solid #86efac;color:#14532d}
.st-alert.err{background:#fee2e2;border:1px solid #fca5a5;color:#7f1d1d}
.st-alert.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a}
.st-alert.warn{background:#fef3c7;border:1px solid #fcd34d;color:#78350f}

/* tables */
.st-table-wrap{overflow-x:auto;border:1px solid var(--line-2,#e2e8f0);border-radius:12px;background:#fff}
.st-table{width:100%;border-collapse:collapse;font-size:13.5px}
.st-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#64748b;padding:10px 10px;border-bottom:1px solid #e2e8f0;white-space:nowrap;background:#f8fafc}
.st-table td{padding:10px;border-bottom:1px solid #f1f5f9;vertical-align:top}
.st-table tr:last-child td{border-bottom:0}
.st-mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.st-pill{display:inline-block;font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 9px;text-transform:capitalize}
.st-pill.pending{background:#fef3c7;color:#92400e}
.st-pill.approved,.st-pill.active{background:#dcfce7;color:#166534}
.st-pill.rejected,.st-pill.revoked{background:#fee2e2;color:#991b1b}
.st-pill.cancelled,.st-pill.expired,.st-pill.invited{background:#e2e8f0;color:#334155}
.st-pill.owner{background:#0f172a;color:#fff}
.st-pill.editor{background:#dbeafe;color:#1e40af}
.st-pill.viewer{background:#f1f5f9;color:#475569}
.st-bar{height:7px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin-top:6px}
.st-bar i{display:block;height:100%;background:var(--brand)}

/* tabs */
.st-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 16px;border-bottom:1px solid #e2e8f0}
.st-tabs a{padding:9px 14px;font-weight:700;font-size:14px;color:#475569;text-decoration:none!important;border-bottom:2px solid transparent;margin-bottom:-1px}
.st-tabs a.on{color:var(--brand);border-color:var(--brand)}
.st-tabs a .n{display:inline-block;min-width:18px;text-align:center;font-size:11px;background:#fee2e2;color:#991b1b;border-radius:99px;padding:0 5px;margin-left:4px}

/* admin package editor */
.st-edit{border:1px dashed #94a3b8;background:#f8fafc}
.st-edit .st-f{margin-bottom:9px}
.st-edit .st-f input,.st-edit .st-f textarea,.st-edit .st-f select{font-size:13px;padding:7px 9px}
.st-chk{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;margin:4px 0}
.st-chk input{width:auto}

/* projects */
.st-plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.st-proj{display:block;background:#fff;border:1px solid var(--line-2,#e2e8f0);border-radius:14px;padding:16px;color:inherit;text-decoration:none!important}
.st-proj:hover{border-color:var(--brand)}
.st-proj h3{margin:0 0 4px;font-size:16px}
.st-proj p{margin:0;font-size:13px;color:var(--muted)}
.st-avatars{display:flex;margin-top:8px}
.st-avatars span{width:26px;height:26px;border-radius:50%;background:#0b7a3b;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;margin-left:-6px}
.st-avatars span:first-child{margin-left:0}

/* ready files (admin) */
.st-delivbox{margin-top:12px;padding:10px 12px;border:1px dashed #94a3b8;border-radius:10px;background:#f8fafc;font-size:13px}
.st-deliv{display:grid;gap:6px;margin-top:8px;max-width:520px}
.st-deliv input,.st-deliv textarea{padding:6px 8px;border:1px solid #cbd5e1;border-radius:7px;font:inherit;font-size:13px;background:#fff}
.st-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.st-file{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line-2,#e2e8f0);border-radius:12px;background:#fff}
.st-file .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#dcfce7;color:#166534;font-weight:800;font-size:11px;flex:none}
.st-file b{display:block;font-size:14px;word-break:break-word}
.st-pill.new,.st-pill.quoted{background:#fef3c7;color:#92400e}
.st-pill.paid,.st-pill.in.progress{background:#dbeafe;color:#1e40af}
.st-pill.delivered{background:#dcfce7;color:#166534}

/* the saved map on the payment page */
.st-mapnote{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-radius:14px;border:1.5px solid #86efac;background:#f0fdf4;margin:14px 0}
.st-mapnote .ic{font-size:26px}
.st-mapnote div{flex:1;min-width:240px}
.st-mapnote b{display:block;font-size:15px}
.st-mapnote span{font-size:13px;color:#334155}
.st-mapnote .bn{display:block;font-style:normal;color:#64748b}
.st-steps-next{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
@media (max-width:640px){.st-steps-next{grid-template-columns:1fr 1fr}}
.st-steps-next div{display:flex;gap:8px;align-items:center;padding:10px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;font-size:13px}
.st-steps-next b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e2e8f0;flex:none}
.st-steps-next .on b{background:#16a34a;color:#fff}
.st-steps-next .now{border-color:#f59e0b;background:#fffbeb}
.st-steps-next .now b{background:#f59e0b;color:#fff}
.st-steps-next small{color:#64748b}

/* 18-Sep-2026 · mobile-banking badges (bKash, Nagad, Rocket, Upay) */
.mfs{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:#0f172a}
.mfs:before{content:"";width:22px;height:22px;border-radius:6px;flex:0 0 auto;background:#94a3b8;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background-size:contain}
.mfs-bkash:before{background:#E2136E;-webkit-mask:var(--m);mask:var(--m)}
.mfs-bkash:before,.mfs-nagad:before,.mfs-rocket:before,.mfs-upay:before{position:relative}
.mfs-bkash:before{background:#E2136E}
.mfs-nagad:before{background:#F05A28}
.mfs-rocket:before{background:#8A2BE2}
.mfs-upay:before{background:#0FA958}
.mfs-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}

/* ---- payment marks, bank transfer block            18 Sep 2026 ------ */
.mfs-logo{height:30px;width:auto;max-width:96px;object-fit:contain;display:inline-block;vertical-align:middle;margin-right:9px}
.st-num .mfs-logo{flex:0 0 auto}
.st-num{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:5px 0}
.st-bankblk{margin-top:6px}
.st-bank{width:100%;border-collapse:collapse;margin:7px 0 4px;font-size:13px;
  background:linear-gradient(180deg,#f5f3ff,#fff 70%);border:1px solid #ddd6fe;border-radius:10px;overflow:hidden}
.st-bank th{text-align:left;font-weight:600;color:#4c1d95;padding:6px 10px;width:38%;white-space:nowrap;
  border-bottom:1px solid #ede9fe;font-size:12px}
.st-bank td{padding:6px 10px;border-bottom:1px solid #ede9fe}
.st-bank tr:last-child th,.st-bank tr:last-child td{border-bottom:0}
.st-bank td b{letter-spacing:.03em}
.st-bank button{margin-left:8px;border:1px solid #ddd6fe;background:#fff;border-radius:7px;
  padding:3px 9px;font-size:11.5px;font-weight:600;color:#5A33F2;cursor:pointer}
.st-bankfields{border:1px dashed #c7d2fe;border-radius:12px;padding:12px 13px;margin:6px 0 12px;background:#f8fafc}
.st-bankfields[hidden]{display:none}
.st-bankfields select optgroup{font-style:normal;font-weight:700;color:#4c1d95}

/* =====================================================================
   Price cards — premium                              18 Sep 2026
   Every card used to be the same white box, so the reader had to do the
   arithmetic to see which package was the good deal. Each one now carries
   its own colour, the price PER MAP, and how much it saves against a
   single map — the two numbers a buyer is actually comparing.
   ===================================================================== */
.st-cards{gap:18px}
.st-card{border-radius:18px;padding:22px 18px 18px;overflow:hidden;
  background:linear-gradient(180deg,#fff,#fcfbff);
  border:1px solid #e9e6f7;box-shadow:0 14px 34px -28px rgba(15,23,42,.8)}
.st-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--c1,#0d9488),var(--c2,#2dd4bf))}
.st-card:hover{transform:translateY(-3px);border-color:var(--c1,#0d9488);
  box-shadow:0 22px 44px -26px color-mix(in srgb,var(--c1,#0d9488) 70%,transparent)}
.st-card.is-on{border:2px solid var(--c1,#0d9488);padding:21px 17px 17px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c1,#0d9488) 7%,#fff),#fff 60%)}
.st-card .st-name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.st-card .st-name .bn{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:2px}
.st-card .st-price{font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.03em;margin-top:2px;
  background:linear-gradient(120deg,var(--c1,#0d9488),var(--c2,#2dd4bf));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.st-card .st-price i{font-style:normal;font-size:.62em;font-weight:700;margin-right:1px}
.st-unit{display:inline-block;font-size:11.5px;font-weight:700;color:color-mix(in srgb,var(--c1,#0d9488) 80%,#0f172a);
  background:color-mix(in srgb,var(--c1,#0d9488) 10%,#fff);border-radius:999px;padding:3px 10px;margin-top:-2px}
.st-save{position:absolute;top:13px;left:-32px;transform:rotate(-38deg);
  background:linear-gradient(90deg,#16a34a,#22c55e);color:#fff;font:800 10px/1 var(--sam-sans,inherit);
  letter-spacing:.06em;text-transform:uppercase;padding:5px 34px;box-shadow:0 6px 14px -8px rgba(22,163,74,.9)}
.st-badge{background:linear-gradient(90deg,var(--c1,#0d9488),var(--c2,#2dd4bf));color:#fff;border:0}
.st-card .st-go{background:linear-gradient(135deg,var(--c1,#0d9488),var(--c2,#2dd4bf));border:0;color:#fff;
  border-radius:11px;font-weight:700;box-shadow:0 12px 24px -16px color-mix(in srgb,var(--c1,#0d9488) 90%,transparent)}
.st-card.is-on .st-go{background:linear-gradient(135deg,#16a34a,#22c55e)}
.st-card.custom{--c1:#5A33F2;--c2:#0EA5E9}

/* coupon */
.st-coupon{border:1px dashed #c7d2fe;border-radius:12px;padding:10px 12px;margin:0 0 12px;background:#f8fafc}
.st-coupon.is-on{border-color:#86efac;background:#f0fdf4;border-style:solid}
.st-coupon-row{display:flex;gap:8px}
.st-coupon-row input{flex:1;min-width:0;padding:9px 11px;border:1px solid #d9d5ee;border-radius:9px;font:inherit;font-size:13.5px;letter-spacing:.06em}
.st-coupon-ok{margin-top:7px;font-size:12.5px;color:#166534;line-height:1.5}
.st-coupon-no{margin-top:7px;font-size:12.5px;color:#b91c1c;line-height:1.5}
.st-was{color:var(--muted);font-weight:500}
.st-now{color:#166534}
.st-off{display:inline-block;font-size:11.5px;font-weight:700;color:#fff;background:#16a34a;border-radius:999px;padding:3px 10px;margin-left:6px;vertical-align:middle}