/* VCardo card designs (v2.3). Loaded only by modules/cards/views/public_design.php, after style.css.
   Each design sets its palette in [data-design=...]; --dz-accent comes from the page (design colour or the owner's card colour). */

.dz{--dz-page:#eef0f2;--dz-card:#fff;--dz-text:#16181b;--dz-muted:#5f6670;--dz-line:#e3e6ea;--dz-sec:#fff;--dz-sec-line:#e3e6ea;--dz-btn:#fff;--dz-btn-ink:var(--dz-text);--dz-r:18px;
  margin:0;min-height:100vh;background:var(--dz-page);color:var(--dz-text);font-family:var(--dz-font,system-ui,sans-serif);-webkit-font-smoothing:antialiased}
.dz *{box-sizing:border-box}
.dzcard{position:relative;max-width:430px;margin:24px auto;background:var(--dz-card);border-radius:30px;overflow:hidden;box-shadow:0 1px 2px #0000000f,0 24px 60px -30px #00000059}
.dzhead{position:relative;height:178px;overflow:hidden;background:var(--dz-card)}
.dzhead img,.dzhead .dzart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dzbody{position:relative;padding:0 22px 26px;display:flex;flex-direction:column;gap:12px}
.dzcard:not(.dzhashead) .dzbody{padding-top:30px}

/* profile */
.dzprof{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.dzav{width:112px;height:112px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--dz-accent) 20%,var(--dz-card));border:4px solid var(--dz-card);box-shadow:0 8px 24px -12px #0008;font:700 2.6rem var(--dz-font);color:var(--dz-accent)}
.dzhashead .dzav{margin-top:-58px}
.dzav img{width:100%;height:100%;object-fit:cover}
.dzwho h1{margin:8px 0 2px;font-size:1.65rem;line-height:1.15;letter-spacing:-.01em;color:var(--dz-name,var(--dz-text))}
.dzrole{margin:0 0 6px;color:var(--dz-role,var(--dz-muted));font-weight:500;font-size:.95rem}
.dzbio{margin:4px 0 2px;color:var(--dz-text);opacity:.88;line-height:1.5;font-size:.95rem}

/* buttons */
.dzsave,.dza{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 14px;border-radius:var(--dz-btn-r,12px);text-decoration:none;font-weight:600;font-size:.98rem;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.dzsave{background:var(--dz-accent);color:var(--dz-accent-ink);border:1.5px solid transparent}
.dza{background:var(--dz-btn);color:var(--dz-btn-ink);border:1.5px solid var(--dz-line)}
.dzsave:hover,.dza:hover{transform:translateY(-1px)}
.dzsave:focus-visible,.dza:focus-visible,.dzlink:focus-visible,.dzsec summary:focus-visible{outline:2px solid var(--dz-accent);outline-offset:2px}
.dzacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dzacts .dza:last-child:nth-child(odd){grid-column:1/-1}
[data-acts=icons] .dzacts{display:flex;justify-content:center;gap:10px}
[data-acts=icons] .dza{width:46px;min-height:46px;padding:0;border-radius:50%;background:transparent;border-color:transparent}
[data-acts=icons] .dza span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[data-acts=icons] .dza:hover{background:color-mix(in srgb,var(--dz-accent) 12%,transparent)}

.dzi{flex:none;display:block}
/* sections */
.dzsec{background:var(--dz-sec);border:1.5px solid var(--dz-sec-line);border-radius:var(--dz-r);padding:0}
.dzsec summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;cursor:pointer;user-select:none}
.dzsec summary::-webkit-details-marker{display:none}
.dzt{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dz-sec-title,var(--dz-accent))}
.dztog{display:grid;place-items:center;color:var(--dz-muted);transition:transform .2s}
.dzsec:not([open]) .dztog{transform:rotate(-90deg)}
.dzin{padding:0 16px 16px;color:var(--dz-text)}
.dzin>h3:first-child{display:none}
.dzaddr{margin:0 0 8px;line-height:1.45}
.dzmore{color:var(--dz-link,var(--dz-accent));font-weight:500;font-size:.93rem}
.dzlink{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;margin-top:8px;border-radius:12px;background:var(--dz-row,color-mix(in srgb,var(--dz-text) 5%,transparent));
  color:var(--dz-text);text-decoration:none;font-weight:600;border-left:3px solid var(--dz-row-edge,transparent);transition:transform .15s,background .2s}
.dzlink:first-child{margin-top:0}.dzlink .dzi{opacity:.55;flex:none}.dzlink:hover{transform:translateX(2px)}
.dzin .hrs td{padding:6px 0;color:var(--dz-text)}.dzin .hrs .today{color:var(--dz-accent)}
.dzin .prod{border-color:var(--dz-sec-line);background:transparent}.dzin .pdesc{color:var(--dz-muted);font-size:.88rem}
.dzin .payrow{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--dz-sec-line)}.dzin .payrow:last-child{border:0}
.dzin label{color:var(--dz-text)}
.dzin .pbtn,.dzx .pbtn{border-radius:var(--dz-btn-r,12px);background:var(--dz-btn);color:var(--dz-btn-ink);border-color:var(--dz-line)}
.dznotice{border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--dz-accent) 14%,var(--dz-card));border:1px solid color-mix(in srgb,var(--dz-accent) 40%,transparent)}
.dznotice p{margin:.2em 0}.dznotice a{color:var(--dz-link,var(--dz-accent))}

/* tabs / app icons navigation */
.dznav{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.dznav button{flex:none;border:1.5px solid var(--dz-line);background:var(--dz-btn);color:var(--dz-btn-ink);border-radius:99px;padding:7px 14px;font:600 .82rem var(--dz-font);cursor:pointer}
.dznav button.on{background:var(--dz-accent);color:var(--dz-accent-ink);border-color:var(--dz-accent)}
.dznav-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dznav-icons button{display:grid;justify-items:center;gap:6px;border:0;background:none;padding:0;border-radius:0;font-size:.74rem}
.dznav-icons .ico{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--dz-btn);border:1.5px solid var(--dz-line);color:var(--dz-accent)}
.dznav-icons button.on{background:none;color:var(--dz-text)}.dznav-icons button.on .ico{background:var(--dz-accent);color:var(--dz-accent-ink);border-color:var(--dz-accent)}

/* footer */
.dzfoot{display:grid;gap:8px;margin-top:4px}
.dzqr{width:150px;height:150px;border-radius:14px;background:#fff;padding:8px;display:inline-block}.dzqrsvg svg{width:100%;height:100%}
.dzmark{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;color:var(--dz-muted)}
.dzlogo{font:800 1.25rem/1 var(--dz-font);color:var(--dz-mark,var(--dz-muted));letter-spacing:-.04em;transform:scaleX(1.25)}
.dz .share summary{background:var(--dz-btn);color:var(--dz-btn-ink);border-color:var(--dz-line)}
.dz .flash{margin:16px 0 0}
.dzpreview{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:10px 14px;background:#111827;color:#fff;font:500 .9rem system-ui,sans-serif}
.dzpreview form{margin:0}

/* ───────── The Executive: charcoal, brushed gold, blueprint header ───────── */
[data-design=executive]{--dz-page:#1a1b1e;--dz-card:#26282c;--dz-text:#ece6da;--dz-muted:#a9a395;--dz-line:color-mix(in srgb,var(--dz-accent) 55%,#26282c);--dz-sec:#2b2d32;
  --dz-sec-line:color-mix(in srgb,var(--dz-accent) 45%,#26282c);--dz-btn:transparent;--dz-btn-ink:#f2ead8;--dz-name:var(--dz-accent);--dz-role:color-mix(in srgb,var(--dz-accent) 70%,#ece6da);--dz-row:#ffffff0a;--dz-btn-r:10px}
[data-design=executive] .dzcard{background-image:radial-gradient(#ffffff06 1px,transparent 1px);background-size:4px 4px;background-color:var(--dz-card)}
[data-design=executive] .dzav{border:3px solid var(--dz-accent);box-shadow:0 0 0 4px #26282c,0 10px 26px -10px #000}
[data-design=executive] .dzwho h1{font-weight:600;letter-spacing:.01em}
[data-design=executive] .dzsave,[data-design=executive] .dza.pri{color:#2a2418;border-color:transparent;
  background:linear-gradient(115deg,color-mix(in srgb,var(--dz-accent) 75%,#000) 0%,var(--dz-accent) 28%,color-mix(in srgb,var(--dz-accent) 55%,#fff) 50%,var(--dz-accent) 72%,color-mix(in srgb,var(--dz-accent) 80%,#000) 100%);
  box-shadow:inset 0 1px 0 #ffffff59,0 6px 16px -10px #000}
[data-design=executive] .dza:not(.pri){border-color:color-mix(in srgb,var(--dz-accent) 60%,transparent)}
[data-design=executive] .dza:not(.pri):hover{background:color-mix(in srgb,var(--dz-accent) 12%,transparent)}
[data-design=executive] .dzsec{background:linear-gradient(180deg,#2e3035,#292b30)}

/* ───────── The Modern Geometric: teal & slate angles, layered panels ───────── */
[data-design=geometric]{--dz-page:#e8f2f3;--dz-card:#fbfefe;--dz-text:#25323d;--dz-muted:#5b6b78;--dz-line:#cfe3e5;--dz-slate:#4d5d6e;--dz-btn:#fff;--dz-btn-r:99px;--dz-r:6px;--dz-sec:#eaf6f6;--dz-sec-line:#cfe5e6}
[data-design=geometric] .dzcard{background:linear-gradient(160deg,transparent 0 62%,color-mix(in srgb,var(--dz-accent) 22%,#fff) 62% 80%,color-mix(in srgb,var(--dz-accent) 45%,#fff) 80%),var(--dz-card)}
[data-design=geometric] .dzhead{height:190px}
[data-design=geometric] .dzprof{display:grid;grid-template-columns:132px 1fr;align-items:start;text-align:right;gap:6px 14px}
[data-design=geometric] .dzav{width:132px;height:132px;border-radius:6px;border:5px solid #fff;margin-top:-92px;box-shadow:6px 8px 0 color-mix(in srgb,var(--dz-accent) 40%,transparent),0 12px 26px -12px #0009}
[data-design=geometric] .dzwho{display:contents}
[data-design=geometric] .dzwho h1{grid-column:2;grid-row:1;margin:-6px 0 0;font-size:1.75rem;font-weight:800;line-height:1.05}
[data-design=geometric] .dzrole{grid-column:2;margin:0}
[data-design=geometric] .dzbio{grid-column:1/-1;font-weight:600;font-size:.92rem}
[data-design=geometric] .dzcard:not(.dzhashead) .dzav{margin-top:0}
[data-design=geometric] .dzsave{border-radius:99px}
[data-design=geometric] .dza{border:0;color:#fff;background:var(--dz-slate);box-shadow:0 6px 14px -8px #0007}
[data-design=geometric] .dza.pri:first-child{background:var(--dz-accent);color:var(--dz-accent-ink)}
[data-design=geometric] .dzsec{position:relative;border:0;box-shadow:5px 5px 0 color-mix(in srgb,var(--dz-accent) 30%,#fff),10px 10px 0 color-mix(in srgb,var(--dz-accent) 16%,#fff)}
[data-design=geometric] .dzsec-location{background:var(--dz-slate);color:#fff;--dz-text:#fff;--dz-sec-title:#d4ecee;--dz-link:#bfe8ec;--dz-muted:#cfd9e2;margin-right:46px;clip-path:polygon(0 0,100% 0,90% 100%,0 100%);box-shadow:none}
[data-design=geometric] .dzsec-links{margin-left:56px;margin-right:10px;--dz-row:#fff}
[data-design=geometric] .dzlink{box-shadow:0 2px 0 var(--dz-sec-line)}

/* ───────── The Minimalist Eco: white, olive and warm wood ───────── */
[data-design=eco]{--dz-page:#efede6;--dz-card:#fbfaf6;--dz-text:#2d3326;--dz-muted:#6c7360;--dz-line:#dcdccf;--dz-sec:#fff;--dz-sec-line:#dfdfd2;--dz-btn:#fff;--dz-btn-ink:var(--dz-accent);--dz-row:#f1f0ea;--dz-row-edge:var(--dz-accent);--dz-name:var(--dz-accent);--dz-role:var(--dz-accent);--dz-btn-r:10px;--dz-wood:#c9a77c}
[data-design=eco] .dzav{border-color:#fbfaf6}
[data-design=eco] .dzwho h1{font-weight:500}
[data-design=eco] .dzsave{color:#3a2a17;border:1px solid #a98457;
  background:repeating-linear-gradient(97deg,#ffffff00 0 7px,#ffffff1f 7px 9px,#00000010 9px 13px),linear-gradient(180deg,#d9bb91,var(--dz-wood) 55%,#b48d5f);box-shadow:inset 0 1px 0 #ffffff70,0 4px 10px -6px #6b4a2266}
[data-design=eco] .dza{color:var(--dz-accent)}
[data-design=eco] .dzsec{border-radius:16px}
[data-design=eco] .dzt{letter-spacing:.06em}

/* ───────── The Creative Glassmorphism: frosted glass, deep navy, cyan glow ───────── */
[data-design=glass]{--dz-page:#06111b;--dz-card:#0b1d2b;--dz-text:#e6fbff;--dz-muted:#9ab9c4;--dz-line:color-mix(in srgb,var(--dz-accent) 60%,transparent);--dz-sec:#ffffff0d;--dz-sec-line:color-mix(in srgb,var(--dz-accent) 45%,transparent);
  --dz-btn:#ffffff0a;--dz-btn-ink:#e6fbff;--dz-name:var(--dz-accent);--dz-role:#c9e7ee;--dz-row:#ffffff12;--dz-row-edge:var(--dz-accent);--dz-btn-r:12px;--dz-mark:var(--dz-accent);--glow:0 0 0 1px color-mix(in srgb,var(--dz-accent) 25%,transparent),0 0 14px -2px color-mix(in srgb,var(--dz-accent) 55%,transparent)}
[data-design=glass] .dzcard{background:radial-gradient(120% 60% at 50% 0,#123448 0,#0b1d2b 55%,#081520 100%)}
[data-design=glass] .dzhead{height:190px;background:transparent}
[data-design=glass].dz .dzbody{margin:-46px 12px 14px;padding:0 14px 20px;border-radius:24px;background:linear-gradient(180deg,#ffffff1f,#ffffff08 40%);border:1px solid #ffffff26;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #ffffff26,0 20px 50px -20px #000}
[data-design=glass] .dzcard:not(.dzhashead) .dzbody{margin-top:14px;padding-top:24px}
[data-design=glass] .dzhashead .dzav{margin-top:-46px}
[data-design=glass] .dzav{border:2px solid color-mix(in srgb,var(--dz-accent) 80%,#fff);box-shadow:var(--glow),0 0 0 5px #0b1d2bcc}
[data-design=glass] .dzwho h1{text-shadow:0 0 18px color-mix(in srgb,var(--dz-accent) 55%,transparent);font-weight:600}
[data-design=glass] .dzsave,[data-design=glass] .dza{background:#ffffff0d;color:var(--dz-text);border:1.5px solid var(--dz-line);box-shadow:var(--glow)}
[data-design=glass] .dzsave:hover,[data-design=glass] .dza:hover{background:color-mix(in srgb,var(--dz-accent) 16%,transparent)}
[data-design=glass] .dzsec{box-shadow:var(--glow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-design=glass] .dztog{width:22px}[data-design=glass] .dztog .dzi{display:none}
[data-design=glass] .dztog::before{content:"";width:16px;height:3px;border-radius:3px;background:var(--dz-accent);box-shadow:0 0 8px var(--dz-accent)}
[data-design=glass] .dzsec:not([open]) .dztog{transform:none}[data-design=glass] .dzsec:not([open]) .dztog::before{width:9px}
[data-design=glass] .dzin input,[data-design=glass] .dzin textarea,[data-design=glass] .dzin select{background:#ffffff10;color:var(--dz-text);border-color:#ffffff30}
[data-design=glass] .dznav-icons .ico,[data-design=glass] .dznav button{box-shadow:var(--glow)}

/* small screens: the card fills the phone */
@media (max-width:460px){.dzcard{margin:0;border-radius:0;min-height:100vh;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.dzsave,.dza,.dzlink,.dztog{transition:none}.dzsave:hover,.dza:hover,.dzlink:hover{transform:none}}

/* buttons and inputs from the shared panels (products, pay, forms) follow the design */
.dz .dzin .btn,.dz .dzin button.btn{background:var(--dz-accent);color:var(--dz-accent-ink);border-color:var(--dz-accent)}
[data-design=executive] .dzin input,[data-design=executive] .dzin textarea,[data-design=executive] .dzin select{background:#ffffff0d;color:var(--dz-text);border-color:#ffffff2e}
[data-acts=icons] .dza .dzi{width:22px;height:22px}
/* 2.4: visitor-form response box inside designer templates */
.dz .sentbox{margin:16px 0 4px}
[data-design=glass] .sentbox{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
[data-design=glass] .sentbox.ok{background:#0f3d2bcc;color:#c9f5dc;border-color:#2f7d58}[data-design=glass] .sentbox.err{background:#4a1820cc;color:#ffd0d3;border-color:#8a3a42}
[data-design=glass] .sentbox.pending{background:#4a3a0ecc;color:#ffe9a8;border-color:#a68526}[data-design=glass] .sentbox.pending .senttitle{color:#fff1c4}
[data-design=executive] .sentbox.pending{background:#2b2618;color:#f3dfa2;border-color:#7d6a35}[data-design=executive] .sentbox.pending .senttitle{color:#f8e7b5}
/* 2.9: network icons in the Links section (Admin > Website > Icons) */
.dzln{display:inline-flex;align-items:center;gap:10px;min-width:0}.dznic{display:inline-grid;place-items:center;line-height:0;flex:none}.dzlink[style*="--nc"] .dznic{color:var(--nc)}.dznic .viu{width:20px;height:20px}

/* 2.11.3 — Save Contact is the highlighted main button on every design (glass/custom designs included) */
body.dz[data-design] .dzsave{background:var(--dz-accent);color:var(--dz-accent-ink);border-color:var(--dz-accent);box-shadow:0 8px 22px -10px color-mix(in srgb,var(--dz-accent) 70%,transparent)}
body.dz[data-design] .dzsave:hover{background:color-mix(in srgb,var(--dz-accent) 88%,#000)}
body.dz[data-design] .dzsave svg{color:inherit}