/* =========================================================
   WINLONG Inquiry Popup — shared styles
   Used by index.html (home) and products.html (product)
   ========================================================= */
.wlp-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(13,30,60,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.wlp-overlay.open{display:flex;animation:wlpFade .2s ease both}

.wlp-dialog{
  background:#fff;border-radius:16px;width:100%;max-width:460px;
  max-height:92vh;overflow-y:auto;position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,.32);
  animation:wlpPop .26s cubic-bezier(.2,.8,.25,1) both;
}
.wlp-close{
  position:absolute;top:12px;right:13px;width:34px;height:34px;
  border:none;border-radius:50%;background:#eef2f7;color:var(--ink,#1a2332);
  font-size:20px;line-height:1;cursor:pointer;z-index:3;transition:background .2s;
}
.wlp-close:hover{background:#e0e6ee}

.wlp-head{
  background:linear-gradient(135deg,#0d47a1 0%,#1565c0 60%,#1976d2 100%);
  color:#fff;padding:22px 24px;border-radius:16px 16px 0 0;
}
.wlp-head h3{font-size:20px;font-weight:700;margin-bottom:5px;letter-spacing:-.2px}
.wlp-head p{font-size:13.5px;opacity:.92;line-height:1.5}

.wlp-body{padding:20px 24px 24px}
.wlp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wlp-body label{display:block;font-size:13px;font-weight:600;margin:13px 0 5px;color:var(--ink,#1a2332)}
.wlp-body input,.wlp-body select,.wlp-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line,#dde2ea);border-radius:10px;
  font-size:14.5px;font-family:inherit;color:var(--ink,#1a2332);background:#fff;transition:border-color .2s,box-shadow .2s;
}
.wlp-body textarea{resize:vertical;min-height:78px}
.wlp-body input:focus,.wlp-body select:focus,.wlp-body textarea:focus{
  outline:none;border-color:var(--brand,#1565c0);box-shadow:0 0 0 3px rgba(21,101,192,.14);
}
.wlp-submit{
  margin-top:18px;width:100%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--brand,#1565c0),var(--brand2,#0d47a1));
  color:#fff;padding:13px;border-radius:10px;font-weight:600;font-size:15px;transition:transform .15s,box-shadow .2s;
}
.wlp-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(21,101,192,.32)}
.wlp-note{margin-top:12px;font-size:12px;color:var(--muted,#5a6a7a);line-height:1.5}

.wlp-success{padding:46px 28px 40px;text-align:center}
.wlp-success .ic{font-size:46px;line-height:1;margin-bottom:12px}
.wlp-success h3{font-size:21px;color:var(--brand2,#0d47a1);margin-bottom:8px;font-weight:700}
.wlp-success p{font-size:14.5px;color:var(--muted,#5a6a7a);line-height:1.6;max-width:320px;margin:0 auto}

@keyframes wlpFade{from{opacity:0}to{opacity:1}}
@keyframes wlpPop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

/* ===================== MOBILE: bottom sheet ===================== */
@media (max-width:768px){
  .wlp-overlay{align-items:flex-end;padding:0}
  .wlp-dialog{max-width:100%;border-radius:20px 20px 0 0;max-height:88vh;animation:wlpSheet .3s cubic-bezier(.2,.8,.25,1) both}
  .wlp-head{border-radius:20px 20px 0 0}
}
@keyframes wlpSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media (max-width:480px){
  .wlp-row{grid-template-columns:1fr}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  .wlp-overlay,.wlp-dialog{animation:none !important}
}