/* Shared UI typography normalization for FalaaDealz pages. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

h1,
.h1 {
  font-size: 20px !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

h2,
.h2 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

h3,
.h3 {
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-size: 14px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

p,
label,
small,
td,
th,
li,
input,
select,
textarea,
button,
.btn,
.form-control,
.input,
.finput,
.fc,
.form-ctrl {
  letter-spacing: 0 !important;
}

input,
select,
textarea,
.form-control,
.input,
.finput,
.fc,
.form-ctrl {
  font-size: 13px !important;
}

button,
.btn,
.btn-save,
.btn-submit,
.btn-topup,
.fbtn,
.filter-btn,
.copy-btn {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

table,
td,
th,
.rtbl,
.ptable {
  font-size: 12.5px !important;
}

.pg-title,
.card-title,
.card-head,
.section-title,
.modal-title,
.drop-head h6,
.banner h1,
.banner h2,
.hero h1,
.hero h2,
.doc-hero h2,
.api-hero h2,
.afa-hero h2,
.bn-name,
.w-name,
.hero-name,
.site-title {
  letter-spacing: 0 !important;
}

.pg-title,
.card-title,
.section-title,
.modal-title,
.drop-head h6 {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.banner h1,
.banner h2,
.hero h1,
.hero h2,
.doc-hero h2,
.api-hero h2,
.afa-hero h2,
.bn-name,
.w-name {
  font-size: 17px !important;
  line-height: 1.28 !important;
}

.hero-name,
.site-title {
  font-size: 18px !important;
  line-height: 1.25 !important;
}

.sc-val,
.stat strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.badge,
.status,
.badge-status,
.pill {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

@media (max-width: 600px) {
  body {
    font-size: 12.5px !important;
    overflow-x: hidden !important;
  }

  h1,
  .h1 {
    font-size: 18px !important;
  }

  h2,
  .h2 {
    font-size: 16.5px !important;
  }

  h3,
  .h3 {
    font-size: 15px !important;
  }

  .banner h1,
  .banner h2,
  .hero h1,
  .hero h2,
  .doc-hero h2,
  .api-hero h2,
  .afa-hero h2,
  .bn-name,
  .w-name {
    font-size: 16px !important;
  }

  .main,
  .content,
  main,
  .wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .content,
  .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .tb {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }

  .tb-l,
  .tb-r,
  .top-actions,
  .nav,
  .share,
  .hero {
    min-width: 0 !important;
  }

  .pg-title,
  .brand span,
  .sb-un,
  .txn-desc,
  .card-title,
  .store-status,
  .hero-name,
  .site-title {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tbtn,
  .ham,
  .top-pill,
  .btn-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .bal,
  .bal-pill {
    max-width: 118px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .grid,
  .form-grid,
  .wallet-grid,
  .two-col,
  .layout-grid,
  .checkout-grid,
  .api-grid,
  .store-grid {
    grid-template-columns: 1fr !important;
  }

  .sg3,
  .stats,
  .stat-grid,
  .quick-actions,
  .action-grid,
  .summary-grid,
  .dash-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .card,
  .stat,
  .sc,
  .hcard,
  .pm-btn,
  .mm-card,
  .dash-tile {
    border-radius: 14px !important;
  }

  .card,
  .stat,
  .sc,
  .hcard {
    max-width: 100% !important;
  }

  .card-head,
  .card-h {
    padding: 13px 14px !important;
  }

  .card-body,
  .card-b {
    padding: 14px !important;
  }

  input,
  select,
  textarea,
  .form-control,
  .input,
  .finput,
  .fc,
  .form-ctrl {
    max-width: 100% !important;
    min-height: 44px !important;
  }

  button,
  .btn,
  .btn-save,
  .btn-submit,
  .btn-topup,
  .fbtn,
  .filter-btn,
  .copy-btn {
    min-height: 42px !important;
    white-space: normal !important;
  }

  table {
    min-width: 560px;
  }

  .table-wrap,
  .table-responsive,
  .rtbl,
  .ptable,
  .orders-table,
  .txn-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .drop {
    max-width: calc(100vw - 24px) !important;
  }

  .wa-wrap {
    right: 14px !important;
    bottom: 82px !important;
  }
}

@media (max-width: 380px) {
  .sg3,
  .stats,
  .stat-grid,
  .quick-actions,
  .action-grid,
  .summary-grid,
  .dash-strip {
    grid-template-columns: 1fr !important;
  }

  .bal,
  .bal-pill {
    display: none !important;
  }
}


/* Icon and mobile toolbar normalization.
   Keeps Bootstrap Icons aligned and visible on small screens. */
.bi {
  font-family: "bootstrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: -0.125em !important;
  speak: never;
  flex: 0 0 auto !important;
}

.na .bi,
.btn .bi,
.tbtn .bi,
.ham .bi,
.admin-chip .bi,
.bal .bi,
.badge .bi,
.alert .bi,
.card-title .bi,
.card-head .bi,
.card-h .bi {
  width: 1.15em !important;
  min-width: 1.15em !important;
  height: 1.15em !important;
}

.tbtn,
.ham,
.btn-icon {
  flex: 0 0 auto !important;
  aspect-ratio: 1 / 1;
}

.tb-l,
.tb-r {
  min-width: 0 !important;
}

.tb-r {
  flex-shrink: 0 !important;
}

@media (max-width: 600px) {
  .na .bi {
    width: 18px !important;
    min-width: 18px !important;
    font-size: 16px !important;
  }

  .tbtn .bi,
  .ham .bi,
  .btn-icon .bi {
    font-size: 18px !important;
  }

  .btn .bi,
  button .bi,
  .badge .bi,
  .alert .bi {
    margin-right: 2px;
  }

  .tb-l {
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }
}

/* Client mobile topbar hardening.
   Keeps theme, notification and user menu buttons compact on small screens. */
@media (max-width: 600px) {
  .tb {
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .tb-l {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .tb-r {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 6px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  #themeBtn,
  #notifBtn,
  #userBtn,
  .tb-r > .tbtn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
  }

  #userBtn span,
  #userBtn .bi-chevron-down,
  #userBtn > i:last-child {
    display: none !important;
  }

  #userBtn > div:first-child,
  #userBtn .avatar,
  #userBtn .sb-av {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin: 0 !important;
  }

  #notifBtn .ndot {
    top: -6px !important;
    right: -6px !important;
    z-index: 2 !important;
  }

  .tb-r > div[style*="position:relative"],
  .tb-r > div[style*="position: relative"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #notifDrop.drop {
    right: -48px !important;
  }

  #userDrop.drop {
    right: 0 !important;
  }
}

@media (max-width: 390px) {
  .tb {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pg-title {
    max-width: calc(100vw - 180px) !important;
  }

  .tb-r {
    gap: 4px !important;
  }

  #themeBtn,
  #notifBtn,
  #userBtn,
  .tb-r > .tbtn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
  }
}