/* LelangPet Finishing Layer v3
   Loaded after app.css so the original visual identity stays intact. */

:root{
  --lp-ease:cubic-bezier(.22,.72,.18,1);
  --lp-ease-out:cubic-bezier(.16,1,.3,1);
  --lp-glass:rgba(255,255,255,.78);
  --lp-overlay:rgba(33,28,25,.28);
  --lp-focus:0 0 0 4px rgba(245,161,38,.12);
}

/* Typography refinement: keep hierarchy without making every label look bold. */
body{font-weight:400;letter-spacing:-.003em}
h1,h2,h3,h4,h5,h6{font-weight:720;text-wrap:balance}
strong,b{font-weight:650}
.eyebrow,.hero-kicker,.live-pill,.category-pill,.sidebar-kicker,.nav-label{font-weight:700;letter-spacing:.14em}
.btn{font-weight:650;letter-spacing:-.01em}
label{font-weight:600}
.brand-copy strong{font-weight:760}
.site-nav nav a,.login-link,.text-link,.link-button,.link-danger{font-weight:600}
.hero-copy h1{font-weight:730}
.hero-proof strong,.current-price strong,.amount-due strong{font-weight:720}
.metric-card strong,.seller-stats strong,.admin-kpi-strip strong{font-weight:690}
.table-wrap th{font-weight:650}
.compact-main span,.table-pet strong,.notification-row strong{font-weight:620}
.profile-copy strong{font-weight:620}

/* Accessible interactive polish. */
a,button,input,textarea,select,.auction-card,.category-card,.dash-card,.metric-card{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  box-shadow:var(--lp-focus)!important;
  outline:2px solid rgba(245,161,38,.35)!important;
  outline-offset:2px;
}
button:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.66;transform:none!important}

/* Page boot / navigation transition. */
#lpBootLoader,#lpPageTransition{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:rgba(249,251,255,.88);backdrop-filter:blur(14px);
  transition:opacity .28s var(--lp-ease),visibility .28s var(--lp-ease);
}
#lpBootLoader.is-hidden,#lpPageTransition.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.lp-loader-card{
  min-width:178px;padding:18px 20px;border:1px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.86);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:13px;
}
.lp-loader-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--orange),var(--orange2));display:grid;place-items:center;color:white;position:relative;box-shadow:0 10px 28px rgba(245,161,38,.22)}
.lp-loader-mark svg{width:22px;fill:#fff;animation:lpPawPulse 1.15s ease-in-out infinite}
.lp-loader-copy{display:flex;flex-direction:column;gap:4px}
.lp-loader-copy strong{font-size:12px;font-weight:680}
.lp-loader-copy span{font-size:9px;color:var(--muted)}
.lp-progress{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;background:rgba(245,161,38,.08)}
.lp-progress:after{content:"";display:block;height:100%;width:34%;background:linear-gradient(90deg,transparent,var(--orange),var(--orange2),transparent);animation:lpProgress 1.05s linear infinite}
.lp-transition-skeleton{position:absolute;inset:auto 5vw 8vh;display:grid;grid-template-columns:1.25fr .75fr;gap:18px;opacity:.28;pointer-events:none}
.lp-transition-skeleton>div{height:110px;border-radius:22px;background:linear-gradient(105deg,#fff3df 8%,#fff 18%,#fff3df 33%);background-size:240% 100%;animation:lpShimmer 1.35s linear infinite}

/* Global modal system: replaces native alert/confirm UX. */
#lpModalRoot{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;padding:18px}
#lpModalRoot.is-open{display:flex}
.lp-modal-backdrop{position:absolute;inset:0;background:var(--lp-overlay);backdrop-filter:blur(8px);animation:lpFade .18s ease both}
.lp-modal{
  position:relative;width:min(460px,100%);max-height:min(86vh,700px);overflow:auto;
  border:1px solid rgba(31,47,105,.1);border-radius:26px;background:rgba(255,255,255,.96);
  box-shadow:0 34px 110px rgba(56,37,26,.24);padding:24px;animation:lpModalIn .34s var(--lp-ease-out) both;
}
.lp-modal-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;background:var(--orange-soft);color:var(--orange);font-size:23px}
.lp-modal-icon.danger{background:var(--red-soft);color:var(--red)}
.lp-modal-icon.success{background:var(--green-soft);color:var(--green)}
.lp-modal-kicker{font-size:8px;color:var(--orange);letter-spacing:.14em;font-weight:700;text-transform:uppercase}
.lp-modal h3{font-size:24px;letter-spacing:-.8px;margin:6px 0 9px}
.lp-modal p{margin:0;color:var(--muted);font-size:11px;line-height:1.7;white-space:pre-line}
.lp-modal-slot{margin-top:15px}
.lp-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;padding-top:17px;border-top:1px solid var(--line)}
.lp-modal-close{position:absolute;right:15px;top:15px;width:34px;height:34px;border:0;border-radius:11px;background:var(--bg);font-size:17px;color:var(--muted);transition:.2s var(--lp-ease)}
.lp-modal-close:hover{background:var(--orange-soft);color:var(--orange);transform:rotate(4deg)}
body.lp-modal-open{overflow:hidden}

/* Toast stack. */
#lpToastStack{position:fixed;right:18px;bottom:18px;z-index:2200;display:flex;flex-direction:column;gap:9px;width:min(360px,calc(100vw - 36px));pointer-events:none}
.lp-toast{pointer-events:auto;display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 16px 55px rgba(50,34,24,.14);backdrop-filter:blur(14px);animation:lpToastIn .35s var(--lp-ease-out) both}
.lp-toast.is-leaving{animation:lpToastOut .24s ease both}
.lp-toast-icon{width:35px;height:35px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-weight:700}
.lp-toast-error .lp-toast-icon{background:var(--red-soft);color:var(--red)}
.lp-toast-warning .lp-toast-icon{background:var(--yellow-soft);color:#a86b0a}
.lp-toast-info .lp-toast-icon{background:var(--blue-soft);color:#395ea8}
.lp-toast-copy strong{display:block;font-size:10px;font-weight:650;margin-bottom:2px}
.lp-toast-copy span{display:block;font-size:9px;line-height:1.45;color:var(--muted)}
.lp-toast button{width:26px;height:26px;border:0;background:transparent;border-radius:8px;color:var(--muted)}

/* Button / form loading. */
.lp-busy{position:relative;pointer-events:none}
.lp-busy .lp-button-label{opacity:.55}
.lp-spinner{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lpSpin .7s linear infinite;vertical-align:-2px}
.lp-btn-spinner{margin-right:2px}
form.lp-submitting{pointer-events:none}
form.lp-submitting input,form.lp-submitting textarea,form.lp-submitting select{opacity:.78}

/* Skeletons and async content. */
.lp-skeleton{position:relative;overflow:hidden;background:#eef2fa!important;color:transparent!important;border-color:transparent!important}
.lp-skeleton:after,.lp-image-loading:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);animation:lpSkeleton 1.25s infinite}
.lp-skeleton-line{height:11px;border-radius:7px;background:#e4e9f5;overflow:hidden;position:relative}
.lp-skeleton-line.w70{width:70%}.lp-skeleton-line.w45{width:45%}.lp-skeleton-line.w90{width:90%}
.lp-attribute-skeleton{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:13px}
.lp-attribute-skeleton>div{height:66px;border-radius:14px;background:linear-gradient(100deg,#eef2fb 10%,#f7f8ff 20%,#eef2fb 35%);background-size:220% 100%;animation:lpShimmer 1.25s linear infinite}
img[data-lp-image]{transition:opacity .35s var(--lp-ease),transform .45s var(--lp-ease)}
img[data-lp-image].is-loading{opacity:.18}
img[data-lp-image].is-ready{opacity:1}

/* Reveal animation. JS only adds the hidden state when IntersectionObserver is available. */
.lp-reveal-ready{opacity:0;transform:translateY(14px) scale(.992);transition:opacity .58s var(--lp-ease-out),transform .58s var(--lp-ease-out)}
.lp-reveal-ready.lp-reveal-in{opacity:1;transform:none}
.auction-card,.category-card,.metric-card,.dash-card,.content-card,.listing-table-card,.action-panel{will-change:transform}
.auction-card:hover,.category-card:hover,.metric-card:hover{transform:translateY(-4px)}
.dash-card,.content-card,.listing-table-card,.action-panel{transition:transform .26s var(--lp-ease),box-shadow .26s var(--lp-ease),border-color .26s var(--lp-ease)}
.dash-card:hover,.content-card:hover{border-color:rgba(245,161,38,.12);box-shadow:0 16px 45px rgba(31,47,105,.06)}

/* Hero and pet micro-motion. */
.hero-orbit{animation:lpHeroFloat 7s ease-in-out infinite}
.center-paw{animation:lpCenterFloat 4.8s ease-in-out infinite}
.pet-node{transition:transform .35s var(--lp-ease),box-shadow .35s var(--lp-ease)}
.pet-node:hover{box-shadow:0 18px 45px rgba(31,47,105,.11)}
.mini-auction{animation:lpMiniCard 5.6s ease-in-out infinite}
.live-dot{position:relative}
.live-dot:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#df5a51;left:-1px;top:1px;animation:lpLivePulse 1.8s infinite;opacity:.4}

/* Header / navigation smoothness. */
.site-header,.app-header{transition:background .25s var(--lp-ease),box-shadow .25s var(--lp-ease),border-color .25s var(--lp-ease)}
body.lp-scrolled .site-header,body.lp-scrolled .app-header{background:rgba(249,251,255,.92);box-shadow:0 8px 30px rgba(31,47,105,.04)}
.profile-dropdown{transform-origin:top right;transition:opacity .18s ease,transform .18s var(--lp-ease);opacity:0;transform:translateY(-5px) scale(.98);pointer-events:none}
.profile-dropdown.open{opacity:1;transform:none;pointer-events:auto}
#lpSidebarBackdrop{display:none;position:fixed;inset:0;z-index:89;background:rgba(33,28,25,.22);backdrop-filter:blur(4px)}
#lpSidebarBackdrop.open{display:block;animation:lpFade .2s ease both}

/* Forms: softer labels and better feedback. */
input,textarea,select{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease}
input:hover,textarea:hover,select:hover{border-color:rgba(31,47,105,.2)}
input:focus,textarea:focus,select:focus{background:#fff;transform:translateY(-1px)}
.lp-invalid{border-color:rgba(223,105,95,.72)!important;box-shadow:0 0 0 3px rgba(223,105,95,.09)!important}
.lp-field-error{font-size:8px;color:var(--red);margin-top:-2px;animation:lpFadeUp .2s ease both}
.password-wrap button{transition:.2s var(--lp-ease)}
.password-wrap button:hover{background:var(--orange-soft);color:var(--orange)}

/* Auth finishing. */
.auth-panel{position:relative;overflow:hidden}
.auth-panel:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-140px;top:-130px;background:rgba(43,68,143,.07);filter:blur(6px);pointer-events:none}
.auth-form{position:relative;z-index:1;animation:lpAuthIn .55s var(--lp-ease-out) both}
.auth-visual>div:last-child{animation:lpFadeUp .7s .08s var(--lp-ease-out) both}
.auth-orbit{box-shadow:inset 0 0 70px rgba(255,255,255,.52)}
.auth-paw{animation:counterRotate 28s linear infinite,lpPawBreathe 3.8s ease-in-out infinite}
.auth-form form .btn{min-height:45px}
/* Upload preview. */
.lp-upload-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.lp-upload-preview-item{position:relative;aspect-ratio:1;border-radius:13px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.lp-upload-preview-item img,.lp-upload-preview-item video{width:100%;height:100%;object-fit:cover}
.lp-upload-preview-item span{position:absolute;left:7px;bottom:7px;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px;background:rgba(33,28,25,.72);color:white;padding:4px 6px;border-radius:7px}
.upload-box.is-dragging{border-color:var(--orange);background:var(--orange-soft);transform:translateY(-2px)}

/* Flash messages enter softly and are also mirrored as toasts by JS. */
.flash{animation:lpFlashIn .35s var(--lp-ease-out) both}

/* Custom error pages. */
.lp-error-page{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:50px 18px}
.lp-error-card{width:min(620px,100%);text-align:center;padding:42px;border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.82);box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.lp-error-code{font-size:72px;line-height:1;color:var(--orange);font-weight:760;letter-spacing:-5px}
.lp-error-card h1{font-size:30px;margin:12px 0 8px}
.lp-error-card p{font-size:11px;color:var(--muted);line-height:1.7;max-width:460px;margin:0 auto 22px}
.lp-error-pet{font-size:42px;animation:lpPawBreathe 3s ease-in-out infinite}

/* Responsive finishing. */
@media(max-width:900px){
  #lpSidebarBackdrop{z-index:89}.sidebar{z-index:90}
  .lp-transition-skeleton{grid-template-columns:1fr}
  .lp-upload-preview{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
  #lpToastStack{right:12px;bottom:12px;width:calc(100vw - 24px)}
  .lp-modal{padding:20px;border-radius:22px}
  .lp-modal-actions{flex-direction:column-reverse}.lp-modal-actions .btn{width:100%}
  .lp-transition-skeleton{inset:auto 14px 7vh}
  .lp-upload-preview{grid-template-columns:repeat(2,1fr)}
  .lp-error-card{padding:30px 20px}.lp-error-code{font-size:58px}
}

@keyframes lpSpin{to{transform:rotate(360deg)}}
@keyframes lpProgress{from{transform:translateX(-120%)}to{transform:translateX(390%)}}
@keyframes lpSkeleton{100%{transform:translateX(100%)}}
@keyframes lpShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes lpFade{from{opacity:0}to{opacity:1}}
@keyframes lpFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lpModalIn{from{opacity:0;transform:translateY(12px) scale(.965)}to{opacity:1;transform:none}}
@keyframes lpToastIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes lpToastOut{to{opacity:0;transform:translateX(14px) scale(.97)}}
@keyframes lpPawPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(-4deg)}}
@keyframes lpPawBreathe{0%,100%{scale:1}50%{scale:1.045}}
@keyframes lpHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes lpCenterFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-54%) scale(1.035)}}
@keyframes lpMiniCard{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes lpLivePulse{0%{box-shadow:0 0 0 0 rgba(223,90,81,.3)}70%{box-shadow:0 0 0 8px rgba(223,90,81,0)}100%{box-shadow:0 0 0 0 rgba(223,90,81,0)}}
@keyframes lpAuthIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@keyframes lpFlashIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  #lpBootLoader,#lpPageTransition,.lp-modal,.lp-toast,.lp-reveal-ready,.hero-orbit,.center-paw,.mini-auction,.auth-form,.auth-visual>div:last-child{animation:none!important;transition:none!important;transform:none!important}
  .lp-reveal-ready{opacity:1!important}
}