/* ═══════════════════════════════════════════════════════
   Glocal QR Manager – vCard Templates CSS v3.0
   Design premium: icone in box colorati, font grandi
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Barlow+Condensed:wght@700;800&display=swap');

.gqr-vc {
    font-family: 'Barlow', -apple-system, sans-serif;
    border-radius: 20px;
    overflow: hidden;
    max-width: 420px;
}

/* ── Shared row ── */
.gqr-vc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f2f5;
}
.gqr-vc-row:last-child { border-bottom: none; }
.gqr-vc-ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.gqr-vc-lbl  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #9ba0ad; margin-bottom: 2px; }
.gqr-vc-val  { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.gqr-vc-body { padding: 4px 24px 0; }
.gqr-vc-footer {
    padding: 18px 24px 20px;
    display: flex;
    gap: 10px;
}
.gqr-vc-btn-p, .gqr-vc-btn-s {
    flex: 1;
    padding: 13px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border: none;
    font-family: 'Barlow', sans-serif;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-decoration: none;
    display: inline-block;
    transition: opacity .15s, transform .1s;
}
.gqr-vc-btn-p:hover, .gqr-vc-btn-s:hover { opacity: .88; transform: translateY(-1px); }

/* ════════════════════════════════
   TEMPLATE 1 — CORPORATE
════════════════════════════════ */
.gqr-vc-corp {
    background: #fff;
    border: 1.5px solid #e8eaed;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.gqr-vc-corp-header {
    background: #162040;
    padding: 30px 24px 24px;
    position: relative;
}
.gqr-vc-corp-avatar {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: #2d62c8;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: #fff;
    border: 3px solid rgba(255,255,255,.15);
    margin-bottom: 16px;
}
.gqr-vc-corp-name    { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 5px; letter-spacing: .3px; }
.gqr-vc-corp-role    { font-size: 14px; color: #93a8d4; font-weight: 500; margin-bottom: 4px; }
.gqr-vc-corp-company { font-size: 11px; font-weight: 700; color: #93a8d4; text-transform: uppercase; letter-spacing: .6px; }
.gqr-vc-corp-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2d62c8, #378add); }
.gqr-vc-corp .gqr-vc-ico { background: #eef3fd; }
.gqr-vc-corp-footer { background: #f9fafc; border-top: 1.5px solid #eaedf0; }
.gqr-vc-corp-footer .gqr-vc-btn-p { background: #2d62c8; color: #fff; }
.gqr-vc-corp-footer .gqr-vc-btn-s { background: #fff; color: #2d62c8; border: 1.5px solid rgba(45,98,200,.25); }

/* ════════════════════════════════
   TEMPLATE 2 — CREATIVE
════════════════════════════════ */
.gqr-vc-creative {
    background: #fff;
    border: 1.5px solid #ede8ff;
    box-shadow: 0 4px 24px rgba(124,58,237,.1);
}
.gqr-vc-creative-header {
    background: #faf7ff;
    padding: 28px 24px 22px;
    text-align: center;
    border-bottom: 4px solid #7c3aed;
}
.gqr-vc-creative-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.gqr-vc-creative-dot  { width: 10px; height: 10px; border-radius: 50%; }
.gqr-vc-creative-avatar {
    width: 92px; height: 92px;
    border-radius: 50%;
    background: #7c3aed;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 800; color: #fff;
    margin: 0 auto 14px;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px #ede8ff;
}
.gqr-vc-creative-name { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; color: #26215c; letter-spacing: .3px; margin-bottom: 4px; }
.gqr-vc-creative-role { font-size: 13px; color: #7c3aed; font-weight: 600; margin-bottom: 12px; }
.gqr-vc-creative-tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.gqr-vc-creative-tag  { background: rgba(124,58,237,.08); color: #534ab7; border: 1px solid #afa9ec; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 99px; }
.gqr-vc-creative .gqr-vc-row  { border-color: #f0ebff; }
.gqr-vc-creative .gqr-vc-ico  { background: #f5f0ff; }
.gqr-vc-creative-footer { background: #fff; border-top: 1px solid #f0ebff; }
.gqr-vc-creative-footer .gqr-vc-btn-p { background: #7c3aed; color: #fff; border-radius: 99px; }
.gqr-vc-creative-footer .gqr-vc-btn-s { background: #fff; color: #534ab7; border: 1.5px solid #afa9ec; border-radius: 99px; }

/* ════════════════════════════════
   TEMPLATE 3 — MINIMAL
════════════════════════════════ */
.gqr-vc-minimal {
    background: #fff;
    border: 1.5px solid #e8eaed;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.gqr-vc-minimal-top {
    padding: 32px 28px 24px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.gqr-vc-minimal-avatar {
    width: 64px; height: 64px;
    border-radius: 14px;
    background: #f5f6f8;
    border: 1.5px solid #e8eaed;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: #4a4f5a;
    flex-shrink: 0;
}
.gqr-vc-minimal-name    { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; color: #1a1a1a; line-height: 1; letter-spacing: -.2px; }
.gqr-vc-minimal-role    { font-size: 13px; color: #9ba0ad; margin-top: 6px; font-style: italic; }
.gqr-vc-minimal-line    { width: 36px; height: 3px; background: #1a1a1a; border-radius: 99px; margin: 12px 0; }
.gqr-vc-minimal-company { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #4a4f5a; }
.gqr-vc-minimal-divider { height: 1.5px; background: #f0f2f5; }
.gqr-vc-minimal-grid    { display: grid; grid-template-columns: 1fr 1fr; }
.gqr-vc-minimal-cell {
    padding: 18px 28px;
    border-bottom: 1.5px solid #f0f2f5;
    border-right: 1.5px solid #f0f2f5;
}
.gqr-vc-minimal-cell:nth-child(2n) { border-right: none; }
.gqr-vc-minimal-cell:nth-last-child(-n+2) { border-bottom: none; }
.gqr-vc-minimal-cell-ico { font-size: 24px; display: block; margin-bottom: 8px; }
.gqr-vc-minimal-lbl     { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #b0bec5; margin-bottom: 3px; }
.gqr-vc-minimal-val     { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.gqr-vc-minimal-qr      { text-align: center; padding: 16px 0 4px; }
.gqr-vc-minimal-qr img  { width: 100px; height: 100px; border-radius: 8px; border: 1.5px solid #e8eaed; }
.gqr-vc-minimal-qr-label { font-size: 10px; color: #9ba0ad; margin-top: 6px; }
.gqr-vc-minimal-footer  { border-top: 1.5px solid #e8eaed; }
.gqr-vc-minimal-footer .gqr-vc-btn-p { background: #1a1a1a; color: #fff; }
.gqr-vc-minimal-footer .gqr-vc-btn-s { background: #fff; color: #1a1a1a; border: 1.5px solid #1a1a1a; }

/* ════════════════════════════════
   TEMPLATE 4 — DARK
════════════════════════════════ */
.gqr-vc-dark {
    background: #0f1623;
    border: 1.5px solid #1e2a3a;
    box-shadow: 0 8px 36px rgba(0,0,0,.35);
}
.gqr-vc-dark-header {
    padding: 28px 24px 22px;
    border-bottom: 1px solid #1e2a3a;
    display: flex;
    align-items: center;
    gap: 18px;
}
.gqr-vc-dark-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: #6ab22e;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 800; color: #fff;
    flex-shrink: 0;
    border: 3px solid rgba(106,178,46,.25);
}
.gqr-vc-dark-name    { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; color: #f1f5f9; line-height: 1; margin-bottom: 4px; }
.gqr-vc-dark-role    { font-size: 13px; color: #64748b; margin-bottom: 7px; }
.gqr-vc-dark-company { display: inline-block; background: rgba(106,178,46,.1); color: #6ab22e; border: 1px solid rgba(106,178,46,.3); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .4px; }
.gqr-vc-dark .gqr-vc-lbl { color: #334155; }
.gqr-vc-dark .gqr-vc-val { color: #cbd5e1; }
.gqr-vc-dark-body {}
.gqr-vc-dark-row {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid #1e2a3a;
}
.gqr-vc-dark-row:last-child { border-bottom: none; }
.gqr-vc-dark-ico {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #1e2a3a;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.gqr-vc-dark-footer { padding: 18px 24px 20px; border-top: 1px solid #1e2a3a; display: flex; gap: 10px; }
.gqr-vc-dark-footer .gqr-vc-btn-p { background: #6ab22e; color: #fff; }
.gqr-vc-dark-footer .gqr-vc-btn-s { background: transparent; color: #6ab22e; border: 1.5px solid rgba(106,178,46,.3); }

/* ── Avatar foto reale ── */
.gqr-vc-avatar-photo { object-fit: cover; }
.gqr-vc-corp .gqr-vc-avatar-photo     { width: 76px; height: 76px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); margin-bottom: 16px; }
.gqr-vc-creative .gqr-vc-avatar-photo { width: 92px; height: 92px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 4px #ede8ff; margin: 0 auto 14px; display: block; }
.gqr-vc-minimal .gqr-vc-avatar-photo  { width: 64px; height: 64px; border-radius: 14px; border: 1.5px solid #e8eaed; flex-shrink: 0; }
.gqr-vc-dark .gqr-vc-avatar-photo     { width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(106,178,46,.25); flex-shrink: 0; }

/* ── Galleria ── */
.gqr-vc-gallery { padding: 0 24px 16px; }
.gqr-vc-gallery-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #9ba0ad; margin-bottom: 10px; }
.gqr-vc-gallery-grid { display: grid; gap: 6px; border-radius: 10px; overflow: hidden; }
.gqr-vc-gallery-1 { grid-template-columns: 1fr; }
.gqr-vc-gallery-2 { grid-template-columns: 1fr 1fr; }
.gqr-vc-gallery-3 { grid-template-columns: repeat(3,1fr); }
.gqr-vc-gallery-4 { grid-template-columns: 1fr 1fr; }
.gqr-vc-gallery-5,.gqr-vc-gallery-6 { grid-template-columns: repeat(3,1fr); }
.gqr-vc-gallery-item { aspect-ratio: 1; overflow: hidden; border-radius: 8px; }
.gqr-vc-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gqr-vc-gallery-item img:hover { transform: scale(1.06); }
.gqr-vc-gallery-dark .gqr-vc-gallery-label { color: #4b5563; }
.gqr-vc-gallery-dark { padding: 0 24px 16px; }
.gqr-vc-gallery-dark .gqr-vc-gallery-item { border: 1px solid #1e2a3a; }

/* ── Template selector ── */
.gqr-tpl-selector { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.gqr-tpl-option { cursor: pointer; }
.gqr-tpl-option input { display: none; }
.gqr-tpl-preview-thumb {
    border-radius: 10px; border: 2px solid #e8eaed;
    padding: 12px 10px; transition: border-color .15s;
    margin-bottom: 6px; min-height: 60px;
    display: flex; flex-direction: column; gap: 5px;
    align-items: flex-start; justify-content: center;
}
.gqr-tpl-option.active .gqr-tpl-preview-thumb,
.gqr-tpl-option:has(input:checked) .gqr-tpl-preview-thumb { border-color: #6ab22e; }
.gqr-tpl-preview-dot  { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.gqr-tpl-preview-line { height: 6px; width: 80%; border-radius: 3px; }
.gqr-tpl-preview-line-short { width: 50%; }
.gqr-tpl-name { font-size: 11px; font-weight: 700; color: #4a4f5a; text-align: center; display: block; }
.gqr-tpl-option.active .gqr-tpl-name,
.gqr-tpl-option:has(input:checked) .gqr-tpl-name { color: #6ab22e; }

/* ── Admin: foto picker ── */
.gqr-vcard-photo-picker { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.gqr-vcard-photo-preview { width: 100px; height: 100px; border-radius: 50%; border: 2px dashed #d4d8df; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #f5f6f8; }
.gqr-vcard-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.gqr-vcard-photo-placeholder { text-align: center; color: #9ba0ad; }
.gqr-vcard-photo-placeholder span { font-size: 32px; display: block; }
.gqr-vcard-photo-placeholder p { font-size: 11px; margin-top: 4px; }
.gqr-vcard-photo-actions { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.gqr-vcard-photo-actions input { width: 100%; }
.gqr-vcard-photo-actions small { color: #9ba0ad; font-size: 11px; }

/* ── Admin: galleria slot ── */
.gqr-gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.gqr-gallery-slot { aspect-ratio: 1; border-radius: 10px; overflow: hidden; position: relative; border: 2px dashed #d4d8df; background: #f5f6f8; cursor: pointer; transition: border-color .15s; }
.gqr-gallery-slot:hover { border-color: #6ab22e; }
.gqr-gallery-slot.has-image { border-color: #e8eaed; border-style: solid; }
.gqr-gallery-slot.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.gqr-gallery-add { width: 100%; height: 100%; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: 'Barlow', sans-serif; }
.gqr-gallery-add span { font-size: 24px; color: #d4d8df; font-weight: 300; }
.gqr-gallery-add small { font-size: 10px; color: #9ba0ad; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.gqr-gallery-add:hover span { color: #6ab22e; }
.gqr-gallery-remove { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; line-height: 1; padding: 0; transition: background .15s; }
.gqr-gallery-remove:hover { background: #e53935; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .gqr-vc { max-width: 100%; }
    .gqr-vc-minimal-grid { grid-template-columns: 1fr; }
    .gqr-tpl-selector { grid-template-columns: repeat(2,1fr); }
}

/* ── Manina 3D accanto al nome ── */
.gqr-hand-3d {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 3px;
    filter: drop-shadow(0 2px 4px rgba(200,121,65,.35));
    animation: gqr-wave 2.5s ease-in-out infinite;
    transform-origin: 50% 85%;
    flex-shrink: 0;
}
@keyframes gqr-wave {
    0%,100% { transform: rotate(0deg); }
    15%      { transform: rotate(20deg); }
    35%      { transform: rotate(-15deg); }
    55%      { transform: rotate(18deg); }
    75%      { transform: rotate(-8deg); }
    90%      { transform: rotate(5deg); }
}
    10%      { transform: rotate(14deg); }
    20%      { transform: rotate(-10deg); }
    30%      { transform: rotate(14deg); }
    40%      { transform: rotate(-6deg); }
    50%      { transform: rotate(10deg); }
    60%,100% { transform: rotate(0deg); }
}

/* ── Indirizzo cliccabile con mappa ── */
.gqr-vc-row-map {
    background: #fff8f0;
    border-radius: 10px;
    padding: 10px 12px !important;
    margin: 4px 0;
    transition: background .15s;
}
.gqr-vc-row-map:hover { background: #fff0e0; }
.gqr-vc-map-hint {
    font-size: 10px;
    color: #e53935;
    font-weight: 700;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.gqr-vc-map-arrow {
    margin-left: auto;
    flex-shrink: 0;
}