/* =========================================================
   LelangPet V5 — Production UI Polish
   Final cascade layer: accessibility, optical alignment,
   human-readable type scale, consistent icon geometry.
   ========================================================= */

:root{
  --lp-text-xs:10px;
  --lp-text-sm:11.5px;
  --lp-text-md:12.5px;
  --lp-text-body:14px;
  --lp-text-lg:15px;
  --lp-focus:0 0 0 3px rgba(245,161,38,.15);
}

/* Baseline readability */
body{font-size:14px;line-height:1.55}
button,input,select,textarea{font-size:13px}
small{line-height:1.45}
.ui-icon{display:block;flex:0 0 auto;pointer-events:none}

/* Header / navigation optical alignment */
.header-icon{
  width:42px;height:42px;display:inline-grid;place-items:center;
  padding:0;line-height:0;vertical-align:middle;
  color:#626c89;
}
.header-icon .ui-icon{width:19px;height:19px}
.header-icon:hover{color:var(--orange);border-color:rgba(245,161,38,.22);background:#fff}
.header-icon .notification-count-badge{
  position:absolute;
  right:-4px;top:-5px;
  min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:9px;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px var(--bg);
}

/* Defensive fallback: empty badge can never render as an orange dot. */
.header-icon .notification-count-badge:empty{display:none!important}
.nav-actions,.app-actions{align-items:center}
.public-bell{display:inline-grid!important;place-items:center!important}
.mobile-menu,.public-menu{
  width:42px;height:42px;padding:0;place-items:center;border-radius:12px;
  color:#56607f;
}
.mobile-menu{align-items:center;justify-content:center}
.mobile-menu .ui-icon,.public-menu .ui-icon{width:21px;height:21px}
.app-search>span{display:grid;place-items:center;line-height:0}
.app-search>span .ui-icon{width:17px;height:17px}
.profile-menu>button>span:last-child{display:grid;place-items:center}
.profile-menu>button>span:last-child .ui-icon{width:16px;height:16px}

/* Sidebar: replace glyph feel with geometrically consistent icons */
.sidebar-nav>a>span{
  width:24px;height:24px;display:grid;place-items:center;text-align:center;
}
.sidebar-nav>a>span .ui-icon{width:16px;height:16px}
.sidebar-nav>a{font-size:12.5px;line-height:1.25;padding:10px 11px}
.sidebar-kicker,.nav-label{font-size:9px;letter-spacing:.12em}
.sidebar-foot a{font-size:11px}
.admin-chip{font-size:9px;padding:7px 10px}
.app-search input{font-size:12.5px}
.profile-copy strong{font-size:12px}
.profile-copy small{font-size:10px}
.profile-dropdown a,.profile-dropdown button{font-size:11.5px}

/* Public nav */
.brand-copy small{font-size:9px}
.site-nav nav a,.login-link{font-size:13px}
.mobile-public-nav a{font-size:13px}

/* Page hierarchy */
.eyebrow{font-size:9.5px;letter-spacing:.14em}
.page-head p{font-size:12.5px;line-height:1.6}
.page-head h1{line-height:1.05}
.dash-card-head>a,.section-head>a,.text-link{font-size:11.5px}

/* Dashboard metrics: fix the too-small labels/descriptions */
.metric-card{min-height:94px;padding:19px}
.metric-card small{
  font-size:11px;line-height:1.25;letter-spacing:.045em;
  text-transform:none;font-weight:650;color:#697391;
}
.metric-card strong{font-size:28px;margin-top:2px}
.metric-card p{font-size:11.5px;line-height:1.35;margin-top:4px;color:#7a84a1}
.metric-card>b{display:grid;place-items:center;width:28px;height:28px}
.metric-card>b .ui-icon{width:17px;height:17px}
.metric-icon{width:43px;height:43px}
.metric-icon .ui-icon{width:18px;height:18px}
.seller-stats span{font-size:11px}
.seller-stats strong{font-size:18px}

/* Member lists / compact auctions */
.compact-main span{font-size:12.5px}
.compact-auction small{font-size:10.5px}
.compact-auction strong{font-size:11.5px}
.good-text,.bad-text{font-size:9.5px}
.mini-empty,.empty-state{font-size:11.5px;line-height:1.6}

/* Cards & marketplace */
.live-pill,.category-pill{font-size:9.5px}
.auction-photo-count{font-size:9.5px}
.price-row small,.current-price small,.current-price span{font-size:10.5px}
.category-card small,.hero-proof span,.mini-auction small,.live-dot{font-size:9.5px}
.hero-real-info small,.hero-real-live{font-size:9.5px}
.lp-gallery-count,.lp-gallery-photo-badge{font-size:10.5px}
.lp-gallery-expand small{font-size:10px}

/* Tables should remain dense, not microscopic */
.table-wrap th{font-size:9.5px;letter-spacing:.075em}
.table-wrap td{font-size:11.5px;line-height:1.45}
.table-pet strong,.user-cell strong{font-size:11.5px}
.table-pet small,.user-cell small{font-size:9.5px}
.status-badge{font-size:9px;padding:6px 9px}

/* Transaction / admin / audit */
.info-strip small,.party-grid small,.shipment-ticket small,.amount-due small,
.admin-kpi-strip small,.admin-kpi-strip span,.timeline small,.notification-row small,
.win-card small,.strike-list small,.audit-list small,.attribute-list small{
  font-size:9.5px;
}
.attribute-grid small,.bid-history small,.big-timer small,.admin-status-list small,
.history-note p,.timeline p,.audit-list p,.party-grid p,.transaction-item small{
  font-size:10.5px;
}
.notification-row p,.transaction-item p,.address-card p,.win-card p,
.seller-card-large p,.profile-hero p,.rejection-banner p,.action-panel>p{
  font-size:11.5px;line-height:1.55;
}
.notification-row strong,.audit-list strong,.timeline strong,.strike-list strong{
  font-size:11.5px;
}
.audit-list code{font-size:9.5px}

/* Forms / wizard */
label{font-size:12px}
.terms,.form-between,.auth-switch,.auth-back{font-size:11px}
.upload-box small,.pet-selector small,.duration-options small,
.lp-existing-media-head p,.lp-media-limit-note{font-size:10.5px}
.wizard-progress button{font-size:10px}
.lp-cover-radio,.lp-remove-photo{font-size:10px}
.lp-new-photo-card span{font-size:9.5px}
.lp-new-photo-card:first-child::after{font-size:9px}
.lp-field-error{font-size:10px;line-height:1.35}

/* Toast / modal / errors */
.lp-loader-copy strong{font-size:12.5px}
.lp-loader-copy span{font-size:10.5px}
.lp-modal-kicker{font-size:9.5px}
.lp-modal p{font-size:12px}
.lp-toast-copy strong{font-size:11.5px}
.lp-toast-copy span{font-size:10.5px}
.lp-error-card p{font-size:12px}
.lp-gallery-lightbox-head small{font-size:9px}
.lp-gallery-lightbox-head>span{font-size:11px}
.lp-gallery-lightbox-hint{font-size:9.5px}

/* Gallery: perfectly symmetric SVG navigation */
.lp-gallery-nav,.lp-lightbox-nav{
  display:grid;place-items:center;padding:0;line-height:0;
}
.lp-gallery-nav svg{width:21px;height:21px}
.lp-lightbox-nav svg{width:23px;height:23px}
.lp-gallery-nav span,.lp-lightbox-nav span{display:contents}
.lp-gallery-expand span{display:grid;place-items:center;line-height:0}
.lp-gallery-expand .ui-icon{width:16px;height:16px}
.lp-gallery-lightbox-head button{
  display:grid;place-items:center;padding:0;line-height:0;
}
.lp-gallery-lightbox-head button svg{width:19px;height:19px}

/* Focus visibility & accessible pointer targets */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--lp-focus);
}
.sidebar-nav>a:focus-visible,.header-icon:focus-visible,.lp-gallery-nav:focus-visible,
.lp-gallery-thumb:focus-visible,.lp-lightbox-nav:focus-visible{
  outline:2px solid rgba(245,161,38,.55);outline-offset:2px;
}
.notification-action{
  width:100%;border:0;background:transparent;padding:0;margin:0;text-align:left;color:inherit;
}
.notification-action .notification-row{width:100%}


/* Remaining micro-copy normalized: no production UI below ~9px. */
.cta-section small,.process-title span,
.media-count,.seller-inline small,.bid-box p,.rule-note,.integration-note,.listing-preview span,
.transaction-progress strong,.verified-chip,.address-card>span,.admin-live-chip,
.moderation-list span,.moderation-list small,.moderation-list>a>b,.mini-transactions small,
.filter-tabs a,.seller-risk small,.review-checks>div,.category-admin-head small,
.category-admin-head p,.attribute-list-head,.lp-gallery-thumb span{
  font-size:9.5px;
}

/* Small screens remain readable without blowing up layouts */
@media(max-width:650px){
  body{font-size:13.5px}
  .sidebar-nav>a{font-size:12px}
  .page-head p{font-size:12px}
  .metric-card small{font-size:10.5px}
  .metric-card p{font-size:11px}
  .table-wrap td{font-size:11px}
  .site-nav nav a,.login-link{font-size:12px}
}

/* Touch targets */
@media(pointer:coarse){
  .header-icon,.mobile-menu,.public-menu,.lp-gallery-nav,.lp-lightbox-nav{min-width:44px;min-height:44px}
  .lp-gallery-thumb{min-height:60px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
}

/* =========================================================
   LelangPet V5.0.4 — Composite form controls
   One bordered shell owns the visual focus state.
   ========================================================= */

[data-composite-control]{
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
[data-composite-control] input,
[data-composite-control] input:focus,
[data-composite-control] input:focus-visible{
  min-width:0;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
}
[data-composite-control]:focus-within{
  border-color:rgba(245,161,38,.58)!important;
  box-shadow:var(--lp-focus)!important;
}

input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.money-input{
  min-height:64px;
  padding:0 8px 0 14px;
  gap:0;
  overflow:visible;
}
.money-input>span{
  flex:0 0 auto;
  margin-right:2px;
  font-size:13px;
  line-height:1;
}
.money-input input{
  height:62px;
  padding:0 10px;
  font-size:18px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.money-input>.bid-step-actions{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 0 0 9px;
  margin-left:3px;
  border-left:1px solid var(--line);
}
.money-input .bid-step-btn{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:11px;
  background:var(--bg);
  color:var(--ink);
  line-height:0;
  transition:background-color .16s ease,color .16s ease,transform .16s ease,opacity .16s ease;
}
.money-input .bid-step-btn .ui-icon{width:16px;height:16px}
.money-input .bid-step-btn:hover:not(:disabled){
  background:var(--orange-soft);
  color:var(--orange);
}
.money-input .bid-step-btn:active:not(:disabled){transform:scale(.96)}
.money-input .bid-step-btn:focus-visible{
  outline:2px solid rgba(245,161,38,.48);
  outline-offset:2px;
  box-shadow:none;
}
.money-input .bid-step-btn:disabled{
  cursor:not-allowed;
  opacity:.38;
}
.money-input.is-disabled{
  background:#f8faff;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
.money-input.is-disabled input{
  color:#697391;
  -webkit-text-fill-color:#697391;
  opacity:1;
}

.money-field{
  min-height:48px;
  background:#fff;
}
.money-field>span{
  flex:0 0 auto;
  font-size:12px;
}
.money-field input{
  height:46px;
  padding:0 11px;
  font-variant-numeric:tabular-nums;
}

.app-search,
.browse-search{position:relative}
.app-search input,
.browse-search input{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
}
.browse-search>span,
.app-search>span{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  line-height:0;
}
.browse-search>span .ui-icon{width:18px;height:18px}

.password-wrap>input{padding-right:50px}
.password-wrap>button{
  display:grid;
  place-items:center;
  line-height:1;
}
[data-composite-control] input:disabled{cursor:not-allowed}

@media(max-width:650px){
  .money-input{
    min-height:58px;
    padding-left:12px;
  }
  .money-input input{
    height:56px;
    font-size:17px;
  }
  .money-input .bid-step-btn{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
}

/* =========================================================
   LelangPet V5.0.5 — Long-content containment
   User/admin supplied text must never enlarge a grid/flex
   track beyond its card. Long unbroken tokens wrap instead.
   ========================================================= */

:is(
  .dashboard-grid,
  .detail-dashboard-grid,
  .moderation-grid,
  .transaction-grid,
  .settings-grid,
  .category-grid,
  .category-admin-grid,
  .auction-grid,
  .member-cards,
  .address-grid,
  .party-grid,
  .info-strip,
  .attribute-grid
)>*{
  min-width:0;
}

:is(
  .page-head,
  .dash-card-head,
  .listing-preview-v4,
  .listing-preview,
  .profile-hero,
  .seller-card-large,
  .rejection-banner,
  .auction-title-row,
  .price-row
)>*{
  min-width:0;
}

.listing-preview-v4>div,
.listing-preview>div,
.timeline>div>div,
.notification-row>span:nth-child(2),
.table-pet>div,
.user-cell>div,
.category-card>div,
.category-admin-head>div,
.moderation-list>a>div,
.mini-transactions>a>div,
.transaction-item>div,
.party-grid>div>div,
.shipment-ticket>div,
.address-card,
.attribute-grid>div,
.audit-list>div>div,
.strike-list>div>div{
  min-width:0;
  max-width:100%;
}

:is(
  .page-head h1,
  .page-head p,
  .listing-preview-v4 h2,
  .listing-preview-v4 p,
  .listing-preview h2,
  .listing-preview p,
  .description-box p,
  .rejection-banner p,
  .timeline strong,
  .timeline p,
  .timeline small,
  .notification-row strong,
  .notification-row p,
  .category-card h3,
  .category-card p,
  .category-admin-head h2,
  .category-admin-head p,
  .table-pet strong,
  .table-pet small,
  .user-cell strong,
  .user-cell small,
  .profile-hero h2,
  .profile-hero p,
  .address-card strong,
  .address-card p,
  .attribute-grid strong,
  .moderation-list strong,
  .moderation-list span,
  .moderation-list small,
  .mini-transactions strong,
  .seller-card-large h3,
  .seller-card-large p,
  .transaction-item h2,
  .transaction-item p,
  .party-grid strong,
  .party-grid p,
  .shipment-ticket strong,
  .info-strip strong,
  .audit-list strong,
  .audit-list p,
  .audit-list code,
  .strike-list strong,
  .strike-list small
){
  overflow-wrap:anywhere;
  word-break:break-word;
}

.listing-preview-v4 p,
.listing-preview p,
.description-box p,
.rejection-banner p,
.timeline p,
.notification-row p,
.address-card p{
  white-space:pre-wrap;
  max-width:100%;
}

.listing-preview-v4{
  width:100%;
  min-width:0;
}

.listing-preview-v4>div:last-child{
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.listing-preview-v4>div:last-child p{
  display:block;
  margin:0 0 16px;
  line-height:1.7;
}

.dash-card,
.content-card,
.action-panel,
.listing-table-card{
  min-width:0;
  max-width:100%;
}

form,
label,
input,
textarea,
select{
  min-width:0;
}

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}

.audit-list code{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

@media(max-width:650px){
  .page-head,
  .dash-card-head{
    min-width:0;
  }

  .listing-preview-v4>div:last-child{
    width:100%;
  }
}

/* =========================================================
   LelangPet V5.1.0 — Deferred explore filters
   Sidebar controls can be composed first and applied once.
   ========================================================= */
[data-explore-filter-form]{position:relative}
[data-explore-filter-form].is-dirty [data-filter-apply]{
  box-shadow:0 8px 22px rgba(52,43,38,.14);
}
.filter-apply-meta{
  min-height:18px;
  margin-top:7px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.filter-dirty-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  line-height:1.4;
  color:var(--muted);
}
.filter-dirty-status::before{
  content:"";
  width:6px;height:6px;flex:0 0 6px;
  border-radius:999px;
  background:var(--orange);
}
.filter-deferred-hint{
  display:block;
  margin-top:6px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--muted);
}
.filter-deferred-hint[hidden],
.filter-dirty-status[hidden]{display:none!important}
[data-category-specs]{transition:opacity .16s ease}
[data-category-specs].is-pending-category{
  opacity:.48;
  pointer-events:none;
}
[data-filter-apply][aria-busy="true"]{cursor:wait}

/* =========================================================
   LelangPet V5.2.0 — Production surface polish
   ========================================================= */

/* Flash messages: optically centered on every shell/page. */
.flash{
  width:min(1320px,calc(100% - 44px));
  min-height:64px;
  margin:18px auto 0!important;
  padding:14px 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  text-align:center;
  overflow:hidden;
  transition:opacity .2s ease,transform .2s ease;
}
.app-content>.flash{
  margin:0 auto 18px!important;
}
.flash-center{
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:auto;
}
.flash-symbol{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px;
  display:grid!important;
  place-items:center;
  border-radius:999px;
}
.flash-symbol .ui-icon{
  width:17px;
  height:17px;
}
.flash-message{
  min-width:0;
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  text-align:center;
  overflow-wrap:anywhere;
}
.flash-close{
  position:absolute;
  top:50%;
  right:16px;
  width:34px;
  height:34px;
  margin:0!important;
  padding:0;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:0;
  border-radius:10px;
  background:transparent;
  color:currentColor;
  cursor:pointer;
  opacity:.72;
}
.flash-close:hover{opacity:1;background:rgba(255,255,255,.42)}
.flash-close:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
.flash.is-leaving{
  opacity:0;
  transform:translateY(-6px);
}

/* Keep hero lines separate at large display sizes.
   The previous .92 line-height caused descenders/dots to visually collide. */
.hero-copy h1{
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}
.hero-copy h1 em{
  line-height:inherit;
}

/* Integration/fallback notes use neutral production copy/classes. */
.integration-note{
  display:flex;
  gap:9px;
  padding:13px;
  margin-top:18px;
  border-radius:13px;
  background:var(--blue-soft);
  color:#5972a8;
  font-size:11.5px;
  line-height:1.55;
}

.media-attribution-link{
  font-size:11px;
  color:var(--muted);
  text-decoration:none;
  opacity:.82;
}
.media-attribution-link:hover{opacity:1}

@media(max-width:650px){
  .flash{
    width:calc(100% - 24px);
    min-height:58px;
    padding:12px 48px 12px 14px;
  }
  .flash-center{
    width:100%;
    justify-content:flex-start;
  }
  .flash-message{
    text-align:left;
  }
  .hero-copy h1{
    line-height:1.04!important;
    letter-spacing:-.038em!important;
  }
}

/* =========================================================
   LelangPet V5.2.4 — Auth back-link safe spacing
   Keep navigation and variable-height auth forms separated.
   ========================================================= */
.auth-panel{
  overflow-y:auto;
  scrollbar-gutter:stable;
}

.auth-panel > .auth-back{
  flex:0 0 auto;
  align-self:flex-start;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  margin-bottom:clamp(30px,4vh,48px);
  position:relative;
  z-index:3;
}

.auth-panel > .auth-form{
  flex:0 0 auto;
  margin-top:auto;
  margin-bottom:auto;
}

@media(max-width:1024px){
  .auth-panel{
    min-height:calc(100vh - 83px);
    justify-content:flex-start;
  }

  .auth-panel > .auth-back{
    margin-bottom:36px;
  }

  .auth-panel > .auth-form{
    margin-top:0;
    margin-bottom:32px;
  }
}

@media(max-width:650px){
  .auth-panel{
    min-height:calc(100vh - 68px);
  }

  .auth-panel > .auth-back{
    min-height:30px;
    margin-bottom:26px;
  }

  .auth-panel > .auth-form{
    margin-bottom:24px;
  }
}