/* ==========================================================================
   Lane D — Dealer program (page-dealer.php) + Quality certificate wall
   (page-quality.php). Everything on page-dealer.php reuses existing global
   classes (.cards/.card, .checklist/.checkitem, .method__steps/.mstep,
   .pill-row/.pill, .faq, .rfq, .docwall) already styled in main.css, so this
   file only adds the two things that don't exist anywhere else yet: the
   certificate-image zoom trigger and the native <dialog> lightbox panel.

   Reduced motion: every transition/animation below is already covered by
   main.css's global `@media (prefers-reduced-motion:reduce){ *,*::before,
   *::after{ transition:none!important;animation:none!important } }` rule —
   nothing extra to add here.
   ========================================================================== */

/* ---- Certificate zoom trigger (inside .docwall__shot, quality page) ----- */
.docwall__zoom{
	display:block;position:relative;border-radius:var(--radius);overflow:hidden;
	cursor:zoom-in;
}
.docwall__zoom img{transition:transform var(--t-mid) var(--ease),filter var(--t-mid) var(--ease)}
.docwall__zoom:hover img,.docwall__zoom:focus-visible img{transform:scale(1.02)}
.docwall__zoom:focus-visible{outline:2px solid var(--ir);outline-offset:3px}
.docwall__zoomhint{
	position:absolute;right:10px;bottom:10px;z-index:1;
	font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;
	background:rgba(11,18,32,.72);border:1px solid rgba(255,255,255,.18);
	padding:5px 9px;border-radius:100px;
	opacity:0;transform:translateY(4px);transition:opacity var(--t-fast),transform var(--t-fast);
}
.docwall__zoom:hover .docwall__zoomhint,.docwall__zoom:focus-visible .docwall__zoomhint{opacity:1;transform:none}

/* ---- Certificate lightbox: native <dialog>, opened via showModal() ------
   Esc-to-close and focus-return-to-trigger come from the browser for free
   once JS calls showModal(); the CSS below only resets the UA chrome and
   sizes the panel so it never overflows a 360px viewport. */
dialog.certdialog{
	margin:auto;padding:0;border:none;max-width:min(760px,92vw);width:100%;
	max-height:min(88vh,720px);background:transparent;border-radius:var(--radius);
	box-shadow:var(--sh-3);
}
dialog.certdialog::backdrop{background:rgba(11,18,32,.78)}
.certdialog__panel{
	position:relative;background:var(--night);color:#fff;
	border-radius:var(--radius);box-shadow:var(--bevel-night);
	padding:clamp(16px,3vw,28px);
	max-height:min(88vh,720px);overflow-y:auto;
}
.certdialog__panel img{width:100%;height:auto;display:block;border-radius:2px;box-shadow:0 0 0 1px var(--line-night)}
.certdialog__note{margin-top:12px;font-size:.66rem;letter-spacing:.05em;line-height:1.6;color:#8A96A2}
.certdialog__close{
	position:absolute;top:10px;right:10px;z-index:1;
	width:34px;height:34px;display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.06);border:1px solid var(--line-night);border-radius:2px;
	color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;
	transition:background var(--t-fast),border-color var(--t-fast);
}
.certdialog__close:hover{background:var(--ir);border-color:var(--ir)}
.certdialog__close:focus-visible{outline:2px solid var(--ir);outline-offset:2px}

/* ---- Small-viewport safety: 360px width, no horizontal scroll ----------- */
@media (max-width:480px){
	.certdialog__panel{padding:14px}
	.certdialog__close{width:30px;height:30px;font-size:1.1rem}
	.docwall__zoomhint{right:8px;bottom:8px;font-size:.58rem;padding:4px 7px}
}

/* Dealer page: give the FAQ block a bit more breathing room after the
   process steps above it — matches the spacing page-faq.php already uses
   between its own sections, no new pattern introduced. */
#d-faq{scroll-margin-top:90px}