@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Inter:wght@400;500;600&display=swap');

/* ── Gallery Grid ── */
.mpg-gallery {
    display: grid;
    grid-template-columns: repeat(var(--mpg-cols, 3), 1fr);
    gap: 24px; margin: 32px 0;
}
@media (max-width: 900px) { .mpg-gallery { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .mpg-gallery { grid-template-columns: 1fr; gap:16px; } }
.mpg-gallery[data-columns="1"]{--mpg-cols:1}.mpg-gallery[data-columns="2"]{--mpg-cols:2}
.mpg-gallery[data-columns="3"]{--mpg-cols:3}.mpg-gallery[data-columns="4"]{--mpg-cols:4}
.mpg-gallery[data-columns="5"]{--mpg-cols:5}.mpg-gallery[data-columns="6"]{--mpg-cols:6}

.mpg-card {
    background:#fff; border-radius:14px; overflow:hidden; cursor:pointer;
    box-shadow:0 2px 12px rgba(0,0,0,.07); border:1px solid rgba(0,0,0,.06);
    transition:transform .25s cubic-bezier(.22,.68,0,1.2),box-shadow .25s ease;
    outline:none; -webkit-tap-highlight-color:transparent;
}
.mpg-card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(0,0,0,.13);}
.mpg-card:active{transform:scale(.98);}
.mpg-card:focus-visible{outline:3px solid #2563eb;outline-offset:3px;}
.mpg-card-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:#f4f4f4;}
.mpg-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.mpg-card:hover .mpg-card-img img{transform:scale(1.07);}
.mpg-no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#ccc;}
.mpg-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);display:flex;align-items:flex-end;justify-content:flex-end;padding:12px;opacity:0;transition:opacity .2s;}
.mpg-card:hover .mpg-overlay,.mpg-card:focus .mpg-overlay{opacity:1;}
.mpg-overlay span{background:rgba(255,255,255,.95);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 2px 6px rgba(0,0,0,.2);}
.mpg-card-body{padding:14px 16px 16px;}
.mpg-card-body h3{font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;font-weight:600;color:#111;margin:0 0 6px;line-height:1.3;}
.mpg-card-body p{font-size:.85rem;color:#666;margin:0;line-height:1.6;}
.mpg-empty{color:#999;font-style:italic;padding:20px 0;}

/* ── Lightbox ── */
#mpg-lightbox{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:12px;}
#mpg-lightbox[hidden]{display:none!important;}
.mpg-lb-bg{position:absolute;inset:0;background:rgba(8,8,8,.9);cursor:pointer;}
.mpg-lb-box{position:relative;z-index:1;background:#fff;border-radius:18px;max-width:900px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.45);animation:mpgSlideUp .28s cubic-bezier(.22,.68,0,1.1);}
@media(min-width:640px){.mpg-lb-box{flex-direction:row;max-height:84vh;}.mpg-lb-left{width:58%;flex-shrink:0;}.mpg-lb-right{flex:1;overflow-y:auto;}}
.mpg-lb-close{position:absolute;top:12px;right:12px;z-index:10;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:36px;height:36px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;touch-action:manipulation;}
.mpg-lb-close:hover{background:#000;}
.mpg-lb-left{background:#0d0d0d;display:flex;flex-direction:column;min-height:220px;}
.mpg-lb-main-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;}
.mpg-lb-img{max-width:100%;max-height:52vh;object-fit:contain;display:block;transition:opacity .18s ease;}
@media(min-width:640px){.mpg-lb-img{max-height:64vh;}}
.mpg-lb-prev,.mpg-lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:44px;height:44px;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;touch-action:manipulation;}
.mpg-lb-prev:hover,.mpg-lb-next:hover{background:rgba(255,255,255,.28);}
.mpg-lb-prev{left:8px;}.mpg-lb-next{right:8px;}
.mpg-lb-prev[hidden],.mpg-lb-next[hidden]{display:none!important;}
.mpg-lb-thumbs{display:flex;gap:5px;padding:8px;background:#1a1a1a;overflow-x:auto;flex-shrink:0;}
.mpg-lb-thumbs:empty{display:none;}
.mpg-lb-thumb{width:50px;height:50px;object-fit:cover;border-radius:5px;cursor:pointer;opacity:.45;border:2px solid transparent;flex-shrink:0;transition:opacity .15s,border-color .15s;touch-action:manipulation;}
.mpg-lb-thumb:hover{opacity:.8;}.mpg-lb-thumb.mpg-active{opacity:1;border-color:#fff;}
.mpg-lb-right{padding:26px 22px;display:flex;flex-direction:column;gap:12px;background:#fff;}
.mpg-lb-title{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;font-weight:600;color:#111;margin:0;line-height:1.25;padding-right:28px;}
.mpg-lb-desc{font-size:.92rem;color:#444;margin:0;line-height:1.75;white-space:pre-line;}

/* ── Beheerpaneel ── */
.mpg-beheer{font-family:'Inter',sans-serif;max-width:560px;margin:0 auto;}
.mpg-alert{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:.9rem;font-weight:500;}
.mpg-alert-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.mpg-alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}

.mpg-panel{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 16px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.mpg-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 10px;
}
.mpg-panel-title-row .mpg-panel-title { margin: 0; }
.mpg-panel-title{font-size:1rem;font-weight:700;color:#111;margin:0 0 16px;display:flex;align-items:center;gap:8px;}
.mpg-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.mpg-panel-header .mpg-panel-title{margin:0;}

.mpg-hint{color:#888;font-size:.875rem;margin:0 0 14px;font-style:italic;white-space:nowrap;}

/* Gallery grid in beheer */
.mpg-gallery-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.mpg-gal-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
}
.mpg-gal-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 10px; gap: 8px;
}
.mpg-gal-card-meta { display: flex; flex-direction: column; gap: 1px; }
.mpg-gal-name { font-weight: 700; font-size: .95rem; color: #111; }
.mpg-gal-date { font-size: .72rem; color: #aaa; }
.mpg-gal-count { font-size: .75rem; color: #6366f1; background: #eef2ff; padding: 2px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; font-weight: 600; }

.mpg-gal-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-bottom: 0; overflow-x: auto; }

/* New gallery form */
.mpg-new-gallery-form{display:flex;gap:8px;margin-top:4px;}
.mpg-new-gallery-form input{flex:1;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.9rem;font-family:inherit;background:#fafafa;-webkit-appearance:none;}
.mpg-new-gallery-form input:focus{outline:none;border-color:#6366f1;background:#fff;}

.mpg-gallery-msg{padding:9px 12px;border-radius:8px;font-size:.85rem;font-weight:500;margin-top:10px;}
.mpg-gallery-msg--ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.mpg-gallery-msg--err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}

/* Upload form */
.mpg-upload-form{display:flex;flex-direction:column;gap:13px;}
.mpg-form-row{display:flex;flex-direction:column;gap:5px;}
.mpg-form-row label{font-size:.78rem;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.04em;}
.mpg-req{color:#e53e3e;}
.mpg-form-row input[type="text"],.mpg-form-row textarea{width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.92rem;font-family:inherit;color:#111;background:#fafafa;transition:border-color .2s;box-sizing:border-box;-webkit-appearance:none;appearance:none;}
.mpg-form-row input[type="text"]:focus,.mpg-form-row textarea:focus{outline:none;border-color:#6366f1;background:#fff;}
.mpg-form-row textarea{min-height:75px;resize:vertical;}

.mpg-dropzone{border:2px dashed #c7d2fe;border-radius:10px;background:#f5f3ff;overflow:hidden;cursor:pointer;position:relative;min-height:68px;transition:border-color .2s,background .2s;}
.mpg-dropzone:hover,.mpg-dropzone:focus-within{border-color:#6366f1;background:#eef2ff;}
.mpg-dropzone input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;font-size:16px;}
.mpg-drop-inner{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 14px;pointer-events:none;}
.mpg-drop-icon{font-size:1.3rem;}.mpg-drop-text{font-weight:600;color:#4f46e5;font-size:.88rem;}
.mpg-preview-grid{display:flex;flex-wrap:wrap;gap:6px;padding:8px;}
.mpg-preview-img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:2px solid #c7d2fe;}

/* Buttons */
.mpg-btn-primary{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:6px;padding:5px 12px;font-size:.75rem;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .2s,transform .15s;touch-action:manipulation;-webkit-appearance:none;white-space:nowrap;box-shadow:0 2px 6px rgba(99,102,241,.35);}
.mpg-btn-primary:hover{opacity:.88;}
.mpg-btn-primary:active{transform:scale(.96);}

.mpg-btn-secondary{color:#fff;border:none;border-radius:7px;padding:6px 10px;font-size:.78rem;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .15s,transform .15s;touch-action:manipulation;-webkit-appearance:none;white-space:nowrap;}
.mpg-btn-secondary:active{transform:scale(.96);}

/* Per knop eigen kleur */
.mpg-view-gallery  { background: linear-gradient(135deg,#0ea5e9,#0284c7); box-shadow:0 2px 6px rgba(14,165,233,.3); }
.mpg-pick-gallery  { background: linear-gradient(135deg,#10b981,#059669); box-shadow:0 2px 6px rgba(16,185,129,.3); }
.mpg-share-toggle  { background: linear-gradient(135deg,#f59e0b,#d97706); box-shadow:0 2px 6px rgba(245,158,11,.3); }
.mpg-view-gallery:hover,.mpg-pick-gallery:hover,.mpg-share-toggle:hover { opacity:.88; }

.mpg-btn-back{background:none;border:none;color:#6366f1;font-size:.88rem;font-weight:600;font-family:inherit;cursor:pointer;padding:0;touch-action:manipulation;}
.mpg-btn-submit{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:8px;padding:13px 20px;font-size:.95rem;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .2s,transform .15s;touch-action:manipulation;-webkit-appearance:none;width:100%;box-shadow:0 3px 10px rgba(99,102,241,.35);}
.mpg-btn-submit:hover{opacity:.88;}.mpg-btn-submit:active{transform:scale(.98);}

/* Share buttons */
.mpg-share-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.mpg-share-row[hidden]{display:none!important;}
.mpg-share-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;font-size:.75rem;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;border:none;transition:opacity .15s,transform .15s;touch-action:manipulation;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.mpg-share-btn:active{transform:scale(.95);}
.mpg-share-wa  { background:linear-gradient(135deg,#25d366,#1faa52); color:#fff; }
.mpg-share-mail{ background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; }
.mpg-share-copy{ background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; box-shadow:none; }
.mpg-share-wa:hover,.mpg-share-mail:hover{opacity:.85;}
.mpg-share-copy:hover{background:#e2e8f0;}

.mpg-notice{background:#fef3c7;border:1px solid #fcd34d;border-radius:10px;padding:14px 18px;color:#92400e;font-size:.9rem;}

@keyframes mpgSlideUp{from{opacity:0;transform:translateY(28px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ── Producten overzicht in beheer ── */
.mpg-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 480px) { .mpg-products-grid { grid-template-columns: repeat(3, 1fr); } }

.mpg-prod-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: opacity .25s, transform .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.mpg-prod-img { aspect-ratio: 1/1; overflow: hidden; background: #f0f0f0; position: relative; }
.mpg-prod-img img { width:100%; height:100%; object-fit:cover; display:block; }
.mpg-prod-no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#ccc; }

/* Action buttons overlay on image */
.mpg-prod-actions {
    position: absolute;
    top: 6px; right: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    transition: opacity .2s;
}
.mpg-prod-card:hover .mpg-prod-actions { opacity: 1; }

/* Show always on touch devices */
@media (hover: none) {
    .mpg-prod-actions { opacity: 1; }
}

.mpg-prod-btn {
    height: 28px;
    padding: 0 10px;
    border: none; border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .02em;
    line-height: 1;
    transition: transform .15s, box-shadow .15s;
    touch-action: manipulation;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.mpg-prod-btn:active { transform: scale(.93); }
.mpg-prod-btn-edit   { background: #fff; color: #2563eb; }
.mpg-prod-btn-delete { background: #fff; color: #dc2626; }
.mpg-prod-btn-edit:hover   { background: #2563eb; color: #fff; }
.mpg-prod-btn-delete:hover { background: #dc2626; color: #fff; }

.mpg-prod-info {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mpg-prod-title { font-size:.82rem; font-weight:600; color:#111; line-height:1.3; }
.mpg-prod-desc  { font-size:.75rem; color:#888; line-height:1.4; }

.mpg-loading { color:#888; font-size:.88rem; padding:16px 0; text-align:center; }

/* ── Edit Modal ── */
.mpg-modal-backdrop {
    position: fixed; inset: 0; z-index: 9999999;
    background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: mpgFadeIn .2s ease;
}
.mpg-modal-backdrop[hidden] { display: none !important; }

.mpg-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%; max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    animation: mpgSlideUp .25s cubic-bezier(.22,.68,0,1.1);
    overflow: hidden;
}
.mpg-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.mpg-modal-title { font-weight:700; font-size:1rem; color:#111; margin:0; }
.mpg-modal-close {
    background: #f3f4f6; border: none; border-radius: 50%;
    width: 30px; height: 30px; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: #555; transition: background .15s;
    touch-action: manipulation;
}
.mpg-modal-close:hover { background: #e5e7eb; }

.mpg-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

.mpg-modal-body label { font-size:.78rem; font-weight:600; color:#374151; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:5px; }
.mpg-modal-body input[type="text"],
.mpg-modal-body textarea {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid #e5e7eb; border-radius: 8px;
    font-size: .92rem; font-family: inherit; color: #111;
    background: #fafafa; box-sizing: border-box;
    -webkit-appearance: none; transition: border-color .2s;
}
.mpg-modal-body input[type="text"]:focus,
.mpg-modal-body textarea:focus { outline:none; border-color:#2563eb; background:#fff; }
.mpg-modal-body textarea { min-height: 90px; resize: vertical; }

.mpg-modal-footer {
    padding: 14px 20px 18px;
    display: flex; gap: 8px;
    border-top: 1px solid #f0f0f0;
}
.mpg-modal-save {
    flex: 1; background: #111; color: #fff; border: none;
    border-radius: 8px; padding: 12px; font-size: .92rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: background .2s;
    touch-action: manipulation;
}
.mpg-modal-save:hover { background: #2563eb; }
.mpg-modal-cancel {
    background: #f3f4f6; color: #555; border: none;
    border-radius: 8px; padding: 12px 16px; font-size: .92rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: background .2s;
    touch-action: manipulation;
}
.mpg-modal-cancel:hover { background: #e5e7eb; }

@keyframes mpgFadeIn { from{opacity:0} to{opacity:1} }


/* ── View statistieken ── */
.mpg-view-stats {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 3px 6px;
    padding: 6px 9px;
    border-radius: 7px;
    margin-top: 8px;
    font-size: .75rem;
    line-height: 1.4;
}
.mpg-view-stats--unseen {
    background: #f3f4f6;
    color: #9ca3af;
}
.mpg-view-stats--seen {
    background: #ecfdf5;
    color: #065f46;
}

.mpg-view-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    display: inline-block;
}
.mpg-view-dot--unseen { background: #d1d5db; }
.mpg-view-dot--seen   { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }

.mpg-view-label {
    font-weight: 600;
    flex: 1;
    min-width: 120px;
}
.mpg-view-meta {
    width: 100%;
    padding-left: 16px;
    color: #6b7280;
    font-size: .73rem;
}
.mpg-view-stats--seen .mpg-view-meta { color: #047857; }

.mpg-view-reset {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: .7rem;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: underline;
    margin-left: auto;
    touch-action: manipulation;
}
.mpg-view-reset:hover { color: #dc2626; }

/* ── Collectie hernoemen / verwijderen ── */
.mpg-gal-card-topbtns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.mpg-gal-rename-btn,
.mpg-gal-delete-btn {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    width: 26px; height: 26px;
    font-size: .85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af;
    transition: background .15s, color .15s, border-color .15s;
    touch-action: manipulation;
    padding: 0;
    flex-shrink: 0;
}
.mpg-gal-rename-btn:hover { background:#eef2ff; color:#6366f1; border-color:#c7d2fe; }
.mpg-gal-delete-btn:hover { background:#fff1f1; color:#dc2626; border-color:#fca5a5; }

/* ── Vervaldatum ── */
.mpg-gal-expires {
    font-size: .72rem;
    color: #059669;
    font-weight: 500;
}
.mpg-gal-expires--expired {
    color: #dc2626;
}
.mpg-gal-expiry-btn {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    width: 26px; height: 26px;
    font-size: .8rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af;
    transition: background .15s, color .15s, border-color .15s;
    touch-action: manipulation;
    padding: 0; flex-shrink: 0;
}
.mpg-gal-expiry-btn:hover { background:#fef9ec; color:#d97706; border-color:#fcd34d; }

.mpg-expired {
    padding: 24px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

/* Date input styling */
.mpg-modal-body input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: .92rem;
    font-family: inherit;
    color: #111;
    background: #fafafa;
    box-sizing: border-box;
    -webkit-appearance: none;
    transition: border-color .2s;
}
.mpg-modal-body input[type="date"]:focus {
    outline: none;
    border-color: #6366f1;
    background: #fff;
}