/* apps/static/css/topup.css
 *
 * The Bootstrap component classes still used in the templates, rewritten by
 * hand. bootstrap-grid.min.css covers container/row/col/g-*/flex; these are
 * the pieces it leaves out.
 *
 * Scoped tightly so it never fights the project's own jt-* styles.
 */

/* ── spacing utilities (mb-3 is used 67x, mb-4 13x) ── */
.m-0{margin:0!important}
.mb-1{margin-bottom:.25rem!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}
.mb-5{margin-bottom:3rem!important}
.mt-1{margin-top:.25rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}
.mt-4{margin-top:1.5rem!important}
.mt-5{margin-top:3rem!important}
.me-1{margin-right:.25rem!important}
.me-2{margin-right:.5rem!important}
.ms-1{margin-left:.25rem!important}
.ms-2{margin-left:.5rem!important}
.ms-auto{margin-left:auto!important}
.p-0{padding:0!important}
.p-2{padding:.5rem!important}
.p-3{padding:1rem!important}
.p-4{padding:1.5rem!important}
.py-2{padding-block:.5rem!important}
.py-3{padding-block:1rem!important}
.px-3{padding-inline:1rem!important}

/* ── text utilities ── */
.text-center{text-align:center!important}
.text-end{text-align:right!important}
.text-start{text-align:left!important}
.text-muted{opacity:.7}
.fw-bold{font-weight:700!important}
.small{font-size:.875em}
.w-100{width:100%!important}
.h-100{height:100%!important}

/* ── form controls (8 uses) ── */
.form-control,.form-select{
  display:block;width:100%;padding:.6rem .85rem;font-size:1rem;font-family:inherit;
  line-height:1.5;color:inherit;background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);border-radius:.55rem;
  transition:border-color .15s,box-shadow .15s}
.form-control:focus,.form-select:focus{
  outline:0;border-color:#00d4ff;box-shadow:0 0 0 3px rgba(0,212,255,.15)}
.form-control::placeholder{color:currentColor;opacity:.45}
.form-label{display:block;margin-bottom:.4rem;font-size:.85rem;opacity:.75}
.form-group{margin-bottom:1rem}
.form-select{appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23888' d='M8 11 3 6h10z'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right .7rem center;
  background-size:14px;padding-right:2rem}
textarea.form-control{min-height:6rem;resize:vertical}

/* ── card (8 uses) ── */
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  border-radius:.9rem;overflow:hidden}
.card-body{padding:1.25rem}
.card-head,.card-header{padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08)}
.card-footer{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
.card-title{font-weight:600;margin-bottom:.5rem}

/* ── alert (12 uses) ── */
.alert{position:relative;padding:.85rem 1.1rem;border:1px solid transparent;
  border-radius:.7rem;margin-bottom:1rem;font-size:.925rem}
.alert-info{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.25);color:#7fdcff}
.alert-success{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.25);color:#7ff0a8}
.alert-warning{background:rgba(245,166,35,.09);border-color:rgba(245,166,35,.28);color:#f5c46a}
.alert-danger,.alert-error{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.26);color:#ffa0a0}

/* ── badge (7 uses) ── */
.badge{display:inline-flex;align-items:center;gap:.35em;padding:.3em .6em;
  font-size:.72em;font-weight:600;line-height:1;border-radius:.4rem;
  background:rgba(255,255,255,.1)}

/* ── table ── */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.7rem .8rem;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.07)}
.table th{font-weight:600;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;opacity:.65}

/* ── list-group ── */
.list-group{display:flex;flex-direction:column}
.list-group-item{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.07)}
.list-group-item:last-child{border-bottom:0}

/* ── dropdown-item (6 uses, static markup only — no JS needed) ── */
.dropdown-item{display:block;padding:.5rem .9rem;white-space:nowrap}
.dropdown-item:hover{background:rgba(255,255,255,.07)}