/* Gallery Plus — Styles (no-crop grid + lightbox + share modal) */

/* Grid */
.mgp-grid{display:grid;gap:10px}
.mgp-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.mgp-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mgp-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mgp-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mgp-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mgp-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1024px){ .mgp-cols-5,.mgp-cols-6{grid-template-columns:repeat(4,1fr)} }
@media (max-width:768px){ .mgp-cols-4,.mgp-cols-5,.mgp-cols-6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:540px){ .mgp-grid{grid-template-columns:repeat(2,1fr)} }

/* Card (no crop) */
.mgp-card{position:relative;display:block;border:1px solid #ddd;border-radius:14px;overflow:hidden;background:#fff}
.mgp-card img.mgp-img-el{
  display:block;
  width:100%;
  height:auto;           /* لا تقص الصورة */
  object-fit:contain;    /* تظهر كاملة */
  background:#eee;
  border-radius:14px;
}

/* Pagination */
.mgp-pagination{display:flex;gap:8px;justify-content:center;margin:16px 0}
.mgp-pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid #ddd;border-radius:10px;text-decoration:none;color:#111;background:#fff}
.mgp-pagination a.current{background:#111;color:#fff;border-color:#111}

/* ---------- Single page (mgp-image/{id}) ---------- */
.mgp-single .mgp-single-wrap{max-width:900px;margin:48px auto 24px;padding:0 16px}
.mgp-single .mgp-hero{border-radius:16px;overflow:hidden;border:1px solid #cfcfcf;background:#e5e5e5}
.mgp-single .mgp-hero img{display:block;width:100%;height:auto;border-radius:16px}

.mgp-single .mgp-footerbar{margin:18px 0 0;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.mgp-single .mgp-actions{display:flex;gap:12px}
.mgp-single .mgp-close-page{display:none}

/* ---------- Counts UI (numbers then icon) ---------- */
.mgp-counts-ui{display:flex;gap:42px;align-items:center;justify-content:center}
.mgp-count{display:inline-flex;align-items:center;gap:8px;font-size:22px;color:#7a7a7a}
.mgp-count b{font-weight:500;color:#666}

/* Icons via mask */
.mgp-count i{width:28px;height:28px;display:inline-block;background:#d0652d;border-radius:50%;mask-repeat:no-repeat;mask-position:center;mask-size:22px}
.mgp-count i.ico-download{background:#ef6d2e}
.mgp-count i.ico-eye{background:#111;border-radius:6px}
.mgp-count i.ico-share{mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23000' viewBox='0 0 24 24'><path d='M18 8a3 3 0 1 0-2.816-4H15a3 3 0 0 0 0 6c.37 0 .723-.07 1.047-.198l-7.1 3.55A3.002 3.002 0 0 0 6 13a3 3 0 1 0 2.816 4H9a3 3 0 0 0 0-6c-.37 0-.723.07-1.047.198l7.1-3.55C15.59 7.444 16.27 8 17.096 8H18Z'/></svg>");}
.mgp-count i.ico-download{mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23000' viewBox='0 0 24 24'><path d='M12 3v10.586l3.293-3.293 1.414 1.414L12 17.414l-4.707-4.707 1.414-1.414L11 13.586V3h2zM5 19h14v2H5z'/></svg>");}
.mgp-count i.ico-eye{mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23000' viewBox='0 0 24 24'><path d='M12 5c5.523 0 10 4.477 10 7s-4.477 7-10 7S2 14.523 2 12s4.477-7 10-7zm0 2C8.134 7 5 10.134 5 12s3.134 5 7 5 7-3.134 7-5-3.134-5-7-5zm0 3a2 2 0 110 4 2 2 0 010-4z'/></svg>");background:#111}

/* ---------- Lightbox ---------- */
.mgp-lightbox{position:fixed;inset:0;background:rgba(15,23,42,.8);backdrop-filter:saturate(120%) blur(2px);display:none;z-index:99999}
.mgp-lightbox.on{display:block}
.mgp-lb-inner{position:absolute;inset:30px;display:flex;flex-direction:column;gap:10px}
.mgp-lb-close{position:absolute;top:10px;left:10px;width:38px;height:38px;border:0;border-radius:10px;background:#111;color:#fff;font-size:22px;cursor:pointer}
.mgp-lb-media{
  display:grid;place-items:center;background:#000;border-radius:14px;overflow:hidden;cursor:zoom-in;
  height:calc(100vh - 140px);
}
.mgp-lb-img{max-width:100%;max-height:100%;width:auto;height:auto;display:none;object-fit:contain}
.mgp-lb-video{max-width:100%;max-height:100%;width:auto;height:auto;display:none;background:#000;object-fit:contain}
.mgp-lb-iframe-wrap{position:relative;width:min(100%,1100px);aspect-ratio:16/9;display:none}
.mgp-lb-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:8px}
.mgp-lb-bar{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:4px;flex-wrap:wrap}
.mgp-lb-actions{display:flex;gap:8px}
.mgp-lb-actions .mgp-lb-share,
.mgp-lb-actions .mgp-lb-download,
.mgp-share-page{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;text-decoration:none;border:0;background:#fff;color:#111;cursor:pointer}
.mgp-lb-actions .mgp-lb-share:hover,
.mgp-lb-actions .mgp-lb-download:hover,
.mgp-share-page:hover{filter:brightness(.95)}
.mgp-lightbox:-webkit-full-screen .mgp-lb-media,
.mgp-lightbox:fullscreen .mgp-lb-media{cursor:zoom-out}

/* Toast */
.mgp-toast{position:fixed;bottom:16px;right:16px;background:#111;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.18s}
.mgp-toast.on{opacity:1;transform:none}

/* ---------- Share Modal ---------- */
.mgp-share-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:100000}
.mgp-share-modal.on{display:block}
.mgp-sm-dialog{position:absolute;inset:auto 0 0 0;margin:auto;top:20%;max-width:560px;background:#fff;border-radius:14px;padding:16px;border:1px solid #e5e5e5;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.mgp-sm-title{font-weight:700;margin-bottom:10px}
.mgp-sm-row{display:flex;gap:8px}
.mgp-sm-input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:10px}
.mgp-sm-copy{padding:10px 12px;border:0;border-radius:10px;background:#111;color:#fff;cursor:pointer}
.mgp-sm-hint{font-size:12px;color:#666;margin-top:8px}
.mgp-sm-close{position:absolute;top:8px;left:8px;width:34px;height:34px;border:0;border-radius:8px;background:#111;color:#fff;font-size:18px;cursor:pointer}

@media (max-width:600px){
  .mgp-lb-inner{inset:14px}
  .mgp-lb-media{height:calc(100vh - 120px)}
  .mgp-sm-dialog{max-width:90%;top:18%}
}