/*
 * TopUpin UI Readability & Consistency Patch v11.1.0
 * Loaded last. The rules are intentionally scoped to public, admin, and login
 * surfaces so legacy version files can remain compatible without leaking styles.
 */

:root{
  --ui-readable-xs:.78rem;
  --ui-readable-sm:.84rem;
  --ui-readable-md:.94rem;
  --ui-control-height:46px;
  --ui-focus-ring:0 0 0 3px rgba(168,85,247,.22);
}

html{
  font-size:16px;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.site-body,
body.admin-body,
body.login-body{
  font-size:1rem;
  line-height:1.6;
}

body.site-body :where(h1,h2,h3,h4),
body.admin-body :where(h1,h2,h3,h4),
body.login-body :where(h1,h2,h3,h4){
  text-wrap:balance;
}

body.site-body :where(p,li,dd,td),
body.admin-body :where(p,li,dd,td),
body.login-body :where(p,li,dd,td){
  overflow-wrap:anywhere;
}

body.site-body :where(a,button,input,select,textarea),
body.admin-body :where(a,button,input,select,textarea),
body.login-body :where(a,button,input,select,textarea){
  -webkit-tap-highlight-color:transparent;
}

body.site-body :where(a,button,input,select,textarea,summary):focus-visible,
body.admin-body :where(a,button,input,select,textarea,summary):focus-visible,
body.login-body :where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid #a855f7!important;
  outline-offset:3px!important;
  box-shadow:var(--ui-focus-ring)!important;
}

/* ------------------------------ Public site ------------------------------ */
body.site-body{
  letter-spacing:.002em;
}

body.site-body small{
  font-size:var(--ui-readable-xs)!important;
  line-height:1.45!important;
}

body.site-body :where(.eyebrow,.hero-kicker,.section-kicker,.admin-eyebrow,.blog-meta,.article-breadcrumb,.catalog-active-filters){
  font-size:.8rem!important;
  line-height:1.45!important;
}

body.site-body .brand-copy strong{
  font-size:1.16rem!important;
}
body.site-body .brand-copy small{
  font-size:.76rem!important;
  margin-top:4px!important;
}

body.site-body .store-desktop-nav a{
  font-size:.9rem!important;
  font-weight:700!important;
}

body.site-body .store-icon-btn small{
  font-size:.72rem!important;
  font-weight:700!important;
}

body.site-body :where(.btn,button.btn){
  min-height:var(--ui-control-height)!important;
  padding-inline:18px!important;
  font-size:.9rem!important;
  line-height:1.2!important;
}
body.site-body .btn-sm{
  min-height:40px!important;
  font-size:.84rem!important;
}
body.site-body .btn-xs{
  min-height:36px!important;
  font-size:.8rem!important;
}
body.site-body .btn-lg{
  min-height:52px!important;
  font-size:.96rem!important;
}

body.site-body :where(.form-control,input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  font-size:.94rem!important;
  line-height:1.45!important;
}
body.site-body .form-control{
  min-height:46px!important;
  padding:11px 14px!important;
}
body.site-body textarea.form-control{
  min-height:96px!important;
  resize:vertical;
}
body.site-body :where(label,.field-label,.store-field>span,.form-field>label){
  font-size:.86rem!important;
  line-height:1.45!important;
}
body.site-body :where(input[type="checkbox"],input[type="radio"]){
  width:18px;
  height:18px;
  min-width:18px;
  accent-color:#d946ef;
}

body.site-body :where(.section-heading p,.section-heading small,.store-catalog-result-head p,.store-product-description,.store-product-profile__copy>p){
  font-size:.9rem!important;
  line-height:1.7!important;
}

body.site-body :where(.category-card,.market-product-card,.flash-product-card,.store-article-card,.help-card,.help-article-card){
  min-width:0;
}
body.site-body :where(.category-card,.market-product-card,.flash-product-card,.store-article-card,.help-card,.help-article-card) h2,
body.site-body :where(.category-card,.market-product-card,.flash-product-card,.store-article-card,.help-card,.help-article-card) h3{
  font-size:clamp(.96rem,1.35vw,1.08rem)!important;
  line-height:1.4!important;
  overflow-wrap:anywhere;
}
body.site-body :where(.market-product-card__body,.flash-product-card,.store-article-card__body) p{
  font-size:.84rem!important;
  line-height:1.58!important;
}
body.site-body :where(.market-product-card__price,.flash-product-card__price){
  font-size:.96rem!important;
  line-height:1.35!important;
}
body.site-body :where(.market-product-card__badge,.flash-product-card__badge,.status-badge,.public-popup__badge){
  min-height:27px!important;
  padding:5px 9px!important;
  font-size:.76rem!important;
  line-height:1.2!important;
  white-space:normal!important;
}

body.site-body .product-service-panel{
  line-height:1.58;
}
body.site-body .product-service-panel :where(p,small,.product-service-panel__note){
  font-size:.84rem!important;
}
body.site-body .product-service-panel__metrics :where(span,small){
  font-size:.78rem!important;
}
body.site-body .product-service-panel__metrics strong{
  font-size:.96rem!important;
}

body.site-body :where(.checkout-step-card,.checkout-summary,.checkout-review,.order-info-card,.order-status-card,.order-lookup-card){
  line-height:1.6;
}
body.site-body :where(.checkout-step-card,.checkout-summary,.checkout-review,.order-info-card,.order-status-card,.order-lookup-card) p,
body.site-body :where(.checkout-guide,.checkout-consent,.checkout-privacy-control,.checkout-promo-box__message){
  font-size:.86rem!important;
  line-height:1.65!important;
}
body.site-body .checkout-step-card__head h2,
body.site-body .order-lookup-card__head h2{
  font-size:1.2rem!important;
}

body.site-body .article-reader__header>p{
  font-size:1rem!important;
  line-height:1.75!important;
}
body.site-body .article-reader__content,
body.site-body .article-content,
body.site-body .help-article-body{
  font-size:1rem!important;
  line-height:1.85!important;
}
body.site-body .article-reader__content h2,
body.site-body .article-content h2,
body.site-body .help-article-body h2{
  font-size:clamp(1.35rem,2.4vw,1.65rem)!important;
}
body.site-body .article-reader__content h3,
body.site-body .article-content h3,
body.site-body .help-article-body h3{
  font-size:clamp(1.12rem,2vw,1.32rem)!important;
}
body.site-body .article-reader__aside strong{
  font-size:.9rem!important;
}
body.site-body .article-reader__aside small,
body.site-body .article-reader__aside a{
  font-size:.8rem!important;
}

body.site-body .public-data-table :where(th,td){
  padding:14px 13px!important;
  font-size:.88rem!important;
  line-height:1.5!important;
  vertical-align:top;
}
body.site-body .public-data-table th{
  font-size:.8rem!important;
  letter-spacing:.025em;
}

body.site-body .store-footer-v97 :where(p,a){
  font-size:.86rem!important;
  line-height:1.6!important;
}
body.site-body .store-footer-v97 h3{
  font-size:1rem!important;
}
body.site-body .store-footer-v97__bottom span{
  font-size:.78rem!important;
}

body.site-body .floating-chat strong{
  font-size:.86rem!important;
}
body.site-body .floating-chat strong small{
  font-size:.72rem!important;
}
body.site-body .live-chat-panel{
  font-size:.9rem!important;
}
body.site-body .live-chat-panel :where(p,strong,textarea,input,button){
  line-height:1.45!important;
}
body.site-body .live-chat-panel__agent strong{
  font-size:.9rem!important;
}
body.site-body .live-chat-panel__agent small,
body.site-body .live-chat-panel__footer{
  font-size:.75rem!important;
}
body.site-body .live-chat-messages{
  font-size:.86rem!important;
}

body.site-body .mobile-bottom-nav a{
  min-height:58px!important;
}
body.site-body .mobile-bottom-nav small{
  font-size:.7rem!important;
  font-weight:750!important;
}

body.site-body .toast{
  min-width:min(360px,calc(100vw - 24px));
}
body.site-body .toast__body strong{
  font-size:.9rem!important;
}
body.site-body .toast__body p{
  font-size:.82rem!important;
  line-height:1.5!important;
}

/* ------------------------------ Admin panel ------------------------------ */
body.admin-body{
  color:var(--admin-ink,#2d2033);
}

body.admin-body .admin-sidebar{
  --admin-sidebar-readable:.86rem;
}
body.admin-body .admin-sidebar .brand-copy strong{
  font-size:1.08rem!important;
}
body.admin-body .admin-sidebar .brand-copy small{
  font-size:.75rem!important;
}
body.admin-body .admin-nav-group>small{
  font-size:.7rem!important;
  line-height:1.35!important;
  letter-spacing:.09em!important;
}
body.admin-body .admin-nav a{
  min-height:46px!important;
  padding:8px 12px!important;
  font-size:var(--admin-sidebar-readable)!important;
  line-height:1.35!important;
}
body.admin-body .admin-nav a b{
  min-width:0;
  overflow-wrap:anywhere;
}
body.admin-body .admin-nav a>span{
  flex:0 0 auto;
}
body.admin-body .admin-nav-badge{
  min-width:24px!important;
  min-height:24px!important;
  padding:3px 7px!important;
  font-size:.72rem!important;
}

body.admin-body .admin-topbar__title>div>span{
  font-size:.72rem!important;
  line-height:1.3!important;
}
body.admin-body .admin-topbar__title h1{
  font-size:clamp(1.15rem,2vw,1.45rem)!important;
  line-height:1.25!important;
}
body.admin-body .admin-topbar__site,
body.admin-body .admin-menu-toggle{
  font-size:.86rem!important;
}
body.admin-body .admin-user strong{
  font-size:.86rem!important;
}
body.admin-body .admin-user small{
  font-size:.72rem!important;
}

body.admin-body .admin-content{
  line-height:1.58;
}
body.admin-body .admin-page-head h1,
body.admin-body .admin-page-head h2{
  font-size:clamp(1.35rem,2.4vw,1.8rem)!important;
}
body.admin-body .admin-page-head p,
body.admin-body .admin-kicker,
body.admin-body .admin-eyebrow{
  font-size:.86rem!important;
  line-height:1.6!important;
}

body.admin-body .admin-card{
  min-width:0;
}
body.admin-body .admin-card__head h2,
body.admin-body .integration-subcard__head h3,
body.admin-body .settings-subcard h3,
body.admin-body .admin-form-section h2,
body.admin-body .admin-form-section h3{
  font-size:clamp(1.05rem,1.65vw,1.25rem)!important;
  line-height:1.35!important;
}
body.admin-body .admin-card__head p,
body.admin-body .admin-card p,
body.admin-body .settings-subcard p,
body.admin-body .integration-subcard p{
  font-size:.86rem!important;
  line-height:1.62!important;
}
body.admin-body .admin-card small,
body.admin-body .admin-content small,
body.admin-body .field-help,
body.admin-body .form-help,
body.admin-body .form-note,
body.admin-body .table-subtext{
  font-size:.78rem!important;
  line-height:1.5!important;
}

body.admin-body .admin-content :where(label,.form-field>label,.settings-fieldset>legend){
  font-size:.86rem!important;
  line-height:1.45!important;
  font-weight:700!important;
}
body.admin-body .admin-content :where(.form-control,input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  font-size:.92rem!important;
  line-height:1.45!important;
}
body.admin-body .admin-content .form-control,
body.admin-body .admin-content input:not([type="checkbox"]):not([type="radio"]),
body.admin-body .admin-content select{
  min-height:46px!important;
  padding:10px 13px!important;
}
body.admin-body .admin-content textarea{
  min-height:104px!important;
  padding:11px 13px!important;
  resize:vertical;
}
body.admin-body .admin-content :where(input[type="checkbox"],input[type="radio"]){
  width:18px;
  height:18px;
  min-width:18px;
  accent-color:#a855f7;
}

body.admin-body .admin-content :where(.btn,button.btn){
  min-height:44px!important;
  padding-inline:16px!important;
  font-size:.86rem!important;
  line-height:1.25!important;
}
body.admin-body .admin-content .btn-sm{
  min-height:38px!important;
  font-size:.8rem!important;
}
body.admin-body .admin-content .btn-xs{
  min-height:34px!important;
  font-size:.76rem!important;
}
body.admin-body .admin-content .btn-lg{
  min-height:50px!important;
  font-size:.92rem!important;
}
body.admin-body .form-actions,
body.admin-body .admin-card__actions,
body.admin-body .admin-actions-row,
body.admin-body .table-actions{
  gap:10px!important;
}

body.admin-body :where(.admin-stats,.admin-stat-grid,.metric-grid) span,
body.admin-body .metric-card span{
  font-size:.8rem!important;
  line-height:1.4!important;
}
body.admin-body :where(.admin-stats,.admin-stat-grid,.metric-grid) strong,
body.admin-body .metric-card strong{
  line-height:1.25!important;
}
body.admin-body :where(.admin-stats,.admin-stat-grid,.metric-grid) small,
body.admin-body .metric-card small{
  font-size:.75rem!important;
}

body.admin-body .admin-content :where(.status-badge,[class*="status-badge"],.status,.badge){
  min-height:27px!important;
  padding:5px 9px!important;
  font-size:.76rem!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}

body.admin-body .admin-content :where(.table-wrap,.table-scroll,.admin-table-wrap,.admin-table-scroll,.provider-catalog-table-wrap,.flash-table-wrap){
  max-width:100%;
  overflow:auto!important;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}
body.admin-body .admin-content :where(.data-table,.admin-data-table,.admin-table,.provider-catalog-table,.payment-method-table){
  border-collapse:separate;
  border-spacing:0;
  font-size:.86rem!important;
  line-height:1.5!important;
}
body.admin-body .admin-content :where(.data-table,.admin-data-table,.admin-table,.provider-catalog-table,.payment-method-table) th{
  position:sticky;
  top:0;
  z-index:2;
  padding:13px 12px!important;
  font-size:.78rem!important;
  line-height:1.35!important;
  letter-spacing:.025em;
  white-space:nowrap;
}
body.admin-body .admin-content :where(.data-table,.admin-data-table,.admin-table,.provider-catalog-table,.payment-method-table) td{
  padding:13px 12px!important;
  font-size:.86rem!important;
  line-height:1.5!important;
  vertical-align:top!important;
}
body.admin-body .admin-content :where(.data-table,.admin-data-table,.admin-table,.provider-catalog-table,.payment-method-table) td small{
  margin-top:5px!important;
  font-size:.76rem!important;
}
body.admin-body .admin-content .table-actions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  min-width:max-content;
}
body.admin-body .admin-content .table-actions .btn{
  min-height:36px!important;
  padding-inline:11px!important;
  font-size:.76rem!important;
}

body.admin-body .admin-empty-state,
body.admin-body .admin-empty-cell{
  padding:28px 18px!important;
  font-size:.88rem!important;
  line-height:1.6!important;
}
body.admin-body :where(.admin-notice,.notice,.admin-inline-warning,.admin-notice-card){
  font-size:.86rem!important;
  line-height:1.6!important;
}

body.admin-body .toast__body strong{
  font-size:.9rem!important;
}
body.admin-body .toast__body p{
  font-size:.82rem!important;
  line-height:1.5!important;
}

/* Switch hotfix: only the dedicated/empty span is rendered as the track. */
body.admin-body .admin-main .switch-row>span{
  width:auto!important;
  height:auto!important;
  min-width:0;
  border-radius:0!important;
  background:transparent!important;
  position:static!important;
  flex:initial;
  transition:none;
}
body.admin-body .admin-main .switch-row>span::after{
  display:none!important;
  content:none!important;
}
body.admin-body .admin-main .switch-row>input+.switch-row__track,
body.admin-body .admin-main .switch-row>input+span:empty{
  display:block!important;
  width:46px!important;
  height:26px!important;
  min-width:46px!important;
  border:1px solid #cbc2d0;
  border-radius:999px!important;
  background:#d9d2dd!important;
  position:relative!important;
  flex:0 0 46px!important;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body.admin-body .admin-main .switch-row>input+.switch-row__track::after,
body.admin-body .admin-main .switch-row>input+span:empty::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  width:20px!important;
  height:20px!important;
  left:2px!important;
  top:2px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 2px 6px rgba(35,24,43,.22)!important;
  transition:transform .2s ease!important;
}
body.admin-body .admin-main .switch-row>input:checked+.switch-row__track,
body.admin-body .admin-main .switch-row>input:checked+span:empty{
  border-color:transparent;
  background:linear-gradient(90deg,#8b5cf6,#d946ef)!important;
}
body.admin-body .admin-main .switch-row>input:checked+.switch-row__track::after,
body.admin-body .admin-main .switch-row>input:checked+span:empty::after{
  left:2px!important;
  transform:translateX(20px)!important;
}
body.admin-body .admin-main .switch-row__copy{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  font-size:.86rem!important;
  font-weight:700!important;
  line-height:1.48!important;
  overflow-wrap:anywhere;
}
body.admin-body .admin-main .team-create-form{
  display:grid;
  gap:18px;
}
body.admin-body .admin-main .team-create-form__switch{
  align-self:stretch!important;
  justify-self:stretch;
  min-height:56px;
  margin:0!important;
  padding:13px 14px;
}
body.admin-body .admin-main .team-create-form__actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-width:0;
}

/* ------------------------------ Login page ------------------------------- */
body.login-body .login-card p,
body.login-body .login-brand p,
body.login-body .login-features span{
  font-size:.9rem!important;
  line-height:1.65!important;
}
body.login-body .login-card label{
  font-size:.86rem!important;
  font-weight:700!important;
}
body.login-body .login-card .form-control{
  min-height:50px!important;
  padding:12px 14px!important;
  font-size:1rem!important;
}
body.login-body .login-card .btn{
  min-height:50px!important;
  font-size:.92rem!important;
}

/* ----------------------------- Responsive UI ----------------------------- */
@media(max-width:900px){
  body.site-body .store-header__actions .store-icon-btn small{
    font-size:.68rem!important;
  }
  body.admin-body .admin-content :where(.data-table,.admin-data-table,.admin-table,.provider-catalog-table,.payment-method-table){
    min-width:720px!important;
  }
}

@media(max-width:620px){
  :root{
    --ui-control-height:47px;
  }
  body.site-body,
  body.admin-body,
  body.login-body{
    font-size:1rem;
  }
  body.site-body :where(.form-control,input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  body.admin-body .admin-content :where(.form-control,input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  body.login-body .form-control{
    font-size:16px!important; /* avoids browser zoom and remains readable */
  }
  body.site-body small,
  body.admin-body .admin-content small{
    font-size:.76rem!important;
  }
  body.site-body :where(.market-product-card,.flash-product-card,.store-article-card) h2,
  body.site-body :where(.market-product-card,.flash-product-card,.store-article-card) h3{
    font-size:.92rem!important;
  }
  body.site-body .article-reader__content,
  body.site-body .article-content,
  body.site-body .help-article-body{
    font-size:.96rem!important;
    line-height:1.8!important;
  }
  body.site-body .article-reader__content{
    padding:21px 18px!important;
  }
  body.admin-body .admin-nav a{
    min-height:48px!important;
    font-size:.88rem!important;
  }
  body.admin-body .admin-topbar__title h1{
    font-size:1.15rem!important;
    max-width:60vw!important;
  }
  body.admin-body .admin-main .admin-card{
    padding:16px!important;
  }
  body.admin-body .admin-main .admin-card__head{
    gap:10px!important;
  }
  body.admin-body .admin-main .admin-card__head>.btn{
    min-height:44px!important;
  }
  body.admin-body .admin-main .team-create-form__actions{
    display:grid;
    grid-template-columns:1fr;
  }
  body.admin-body .admin-main .team-create-form__actions .btn{
    width:100%;
  }
  body.admin-body .table-wrap::after{
    font-size:.72rem!important;
    padding:5px 9px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.site-body *,body.admin-body *,body.login-body *{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Exact table selectors outrank legacy mobile !important rules. */
body.admin-body .admin-main table.data-table th,
body.admin-body .admin-main table.admin-table th,
body.admin-body .admin-main table.flash-variant-table th,
body.admin-body .admin-main table.provider-catalog-table th,
body.admin-body .admin-main table.payment-method-table th{
  padding:13px 12px!important;
  background:var(--admin-table-head,#f5f1f7)!important;
  color:var(--admin-muted,#706678)!important;
  font-size:.78rem!important;
  line-height:1.4!important;
  letter-spacing:.025em!important;
  vertical-align:middle!important;
}
body.admin-body .admin-main table.data-table td,
body.admin-body .admin-main table.admin-table td,
body.admin-body .admin-main table.flash-variant-table td,
body.admin-body .admin-main table.provider-catalog-table td,
body.admin-body .admin-main table.payment-method-table td{
  padding:13px 12px!important;
  background:var(--admin-surface,#fff)!important;
  color:var(--admin-ink,#291f30)!important;
  font-size:.86rem!important;
  line-height:1.5!important;
  vertical-align:top!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
body.admin-body .admin-main table.data-table td small,
body.admin-body .admin-main table.admin-table td small,
body.admin-body .admin-main table.flash-variant-table td small,
body.admin-body .admin-main table.provider-catalog-table td small,
body.admin-body .admin-main table.payment-method-table td small{
  font-size:.76rem!important;
  line-height:1.45!important;
}
body.admin-body .admin-main table .table-actions .btn{
  min-height:36px!important;
  padding:8px 11px!important;
  font-size:.76rem!important;
  line-height:1.2!important;
}

@media(max-width:760px){
  body.admin-body .admin-main table.data-table th,
  body.admin-body .admin-main table.admin-table th,
  body.admin-body .admin-main table.flash-variant-table th,
  body.admin-body .admin-main table.provider-catalog-table th,
  body.admin-body .admin-main table.payment-method-table th{
    padding:11px 10px!important;
    font-size:.76rem!important;
  }
  body.admin-body .admin-main table.data-table td,
  body.admin-body .admin-main table.admin-table td,
  body.admin-body .admin-main table.flash-variant-table td,
  body.admin-body .admin-main table.provider-catalog-table td,
  body.admin-body .admin-main table.payment-method-table td{
    padding:11px 10px!important;
    font-size:.82rem!important;
  }
  body.admin-body .admin-main table td small{
    font-size:.74rem!important;
  }
  body.admin-body .admin-main table .table-actions .btn{
    min-height:38px!important;
    font-size:.74rem!important;
  }
}