/* 2Lynk — עיצוב הכרטיס עצמו. הצבעים מגיעים מהפלטה דרך משתני CSS על .tc */
.tc{
  --bg:#1A1A1A; --text:#FFFFFF; --soft:#C9CDC2; --accent:#F7CF12; --accent2:#8CBF2B; --on:#1A1A1A;
  width:min(100%,380px); margin:0 auto; perspective:1400px; direction:rtl;
  font-family:"Assistant",-apple-system,"Segoe UI",system-ui,sans-serif; color:var(--text);
}
.tc *{box-sizing:border-box;}
.tc-inner{position:relative; transition:transform .6s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d;}
.tc.flipped .tc-inner{transform:rotateY(180deg);}
@media (prefers-reduced-motion:reduce){ .tc-inner{transition:none;} }
.tc-face{
  background:var(--bg); border-radius:22px; padding:22px 20px 16px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.18), 0 24px 60px -24px rgba(0,0,0,.55); position:relative; overflow:hidden;
}
.tc-face::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);}
.tc-back{position:absolute; inset:0; transform:rotateY(180deg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; cursor:pointer;}
.tc-back canvas{width:min(62%,220px); height:auto; border-radius:12px; background:#fff; padding:8px; display:block;}
.tc-back .tc-scan{font-size:14px; color:var(--soft);}
.tc-back .tc-bname{font-weight:700; font-size:18px;}

.tc-head{display:flex; align-items:center; gap:14px; position:relative;}
.tc-mono{width:64px; height:64px; flex:none; border-radius:50%; background:var(--accent); color:var(--on); font-weight:800; font-size:26px;
  display:grid; place-items:center; letter-spacing:-.02em;}
.tc-mono.has{overflow:hidden; padding:0;}
.tc-mono img{width:100%; height:100%; object-fit:cover; display:block;}
/* לחבילה העסקית: לוגו מעל השם, שורת מבצע, כפתור קטלוג */
.tc-logo{position:relative; display:flex; margin-bottom:14px;}
.tc-logo img{height:36px; max-width:150px; object-fit:contain; display:block; background:#fff; border-radius:9px; padding:4px 9px;}
.tc-promo{display:flex; align-items:center; gap:8px; margin-top:14px; padding:8px 12px; border-radius:12px; position:relative; font-size:13.5px;
  background:color-mix(in srgb, var(--accent) 16%, transparent); border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);}
.tc-promo svg{width:16px; height:16px; flex:none; color:var(--accent);}
.tc-promo b{font-weight:800; flex:none; color:var(--accent);} .tc-promo span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tc-catalog{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding:10px 12px; border-radius:12px; position:relative; text-decoration:none;
  color:var(--text); font-size:14px; font-weight:700; border:1px solid color-mix(in srgb, var(--text) 18%, transparent); background:color-mix(in srgb, var(--text) 6%, transparent);}
.tc-catalog:hover{background:color-mix(in srgb, var(--text) 12%, transparent);} .tc-catalog svg{width:18px; height:18px; color:var(--accent2);}
.tc-name{font-size:23px; font-weight:800; line-height:1.15; letter-spacing:-.01em;}
.tc-title{font-size:15px; color:var(--soft); margin-top:2px; line-height:1.3;}
.tc-org{font-size:14px; color:var(--accent); font-weight:600; margin-top:2px;}

.tc-actions{display:flex; gap:8px; margin-top:18px; position:relative;}
.tc-actions a{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--text);
  background:color-mix(in srgb, var(--text) 8%, transparent); border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius:14px; padding:10px 4px 8px; font-size:12px; font-weight:600; min-width:0;
}
.tc-actions a:hover{background:color-mix(in srgb, var(--text) 14%, transparent);}
.tc-actions a.primary{background:var(--accent); color:var(--on); border-color:var(--accent);}
.tc-actions svg{width:22px; height:22px;}

.tc-rows{margin-top:16px; display:flex; flex-direction:column; gap:2px; position:relative;}
.tc-row{display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid color-mix(in srgb, var(--text) 10%, transparent); text-decoration:none; color:var(--text);}
.tc-row:last-child{border-bottom:0;}
.tc-row svg{width:18px; height:18px; color:var(--accent2); flex:none;}
.tc-row span{font-size:15px; min-width:0; overflow-wrap:anywhere;}
.tc-row span[dir=ltr]{text-align:right;}

.tc-social{display:flex; gap:10px; margin-top:12px; justify-content:center; position:relative;}
.tc-social a{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--text);
  background:color-mix(in srgb, var(--text) 8%, transparent);}
.tc-social a:hover{background:var(--accent); color:var(--on);}
.tc-social svg{width:20px; height:20px;}

.tc-foot{display:flex; gap:8px; margin-top:16px; position:relative;}
.tc-foot button{
  flex:1; appearance:none; border:1px solid color-mix(in srgb, var(--text) 18%, transparent); background:transparent; color:var(--text);
  font:inherit; font-size:13.5px; font-weight:700; padding:10px 8px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;
}
.tc-foot button.save{background:var(--accent2); color:var(--on); border-color:var(--accent2); flex:1.6; white-space:nowrap;}
.tc-foot button[data-act=flip]{flex:0 0 52px;}
.tc-foot button:hover{filter:brightness(1.08);}
.tc-foot svg{width:18px; height:18px;}
.tc-foot button:focus-visible, .tc-actions a:focus-visible, .tc-social a:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.tc-credit{text-align:center; margin:12px auto 0; font-size:13px; width:min(100%,380px);}
.tc-credit a{color:inherit; opacity:.7; text-decoration:none;}
.tc-credit a:hover{opacity:1; text-decoration:underline;}
.tc-credit b{font-weight:800; letter-spacing:.04em;}

/* כרטיס מוקטן לבחירה בעיניים */
.tc-mini{
  --bg:#1A1A1A; --text:#fff; --soft:#C9CDC2; --accent:#F7CF12; --accent2:#8CBF2B; --on:#1A1A1A;
  background:var(--bg); color:var(--text); border-radius:14px; padding:14px 14px 12px; direction:rtl; position:relative; overflow:hidden;
  font-family:"Assistant",system-ui,sans-serif; box-shadow:0 10px 24px -14px rgba(0,0,0,.5);
}
.tc-mini::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);}
.tc-mini .m-head{display:flex; align-items:center; gap:10px; position:relative;}
.tc-mini .m-mono{width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--on); font-weight:800; font-size:15px; display:grid; place-items:center; flex:none;}
.tc-mini .m-name{font-weight:800; font-size:15px; line-height:1.1;}
.tc-mini .m-title{font-size:11.5px; color:var(--soft);}
.tc-mini .m-acts{display:flex; gap:5px; margin-top:12px; position:relative;}
.tc-mini .m-acts i{flex:1; height:22px; border-radius:7px; background:color-mix(in srgb, var(--text) 10%, transparent);}
.tc-mini .m-acts i:first-child{background:var(--accent);}
.tc-mini .m-lines{margin-top:10px; display:flex; flex-direction:column; gap:6px; position:relative;}
.tc-mini .m-lines i{display:block; height:6px; border-radius:3px; background:color-mix(in srgb, var(--text) 14%, transparent); width:70%;}
.tc-mini .m-lines i:nth-child(2){width:50%; background:var(--accent2); opacity:.7;}

/* בורר פלטה (בעמודי המחולל והעריכה) */
.tc-sws{display:flex; flex-wrap:wrap; gap:8px;}
.tc-sw{width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; box-shadow:inset 0 0 0 2px #fff;}
.tc-sw[aria-pressed="true"]{border-color:#1A1A1A;}
.tc-sw[data-was]:not([aria-pressed="true"]){outline:2px dashed #1A1A1A; outline-offset:2px;}   /* הצבע שהיה כשנפתח הבורר */
.tc-custom{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid #E4E7E1;}
.tc-custom-lbl{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; cursor:pointer;}
/* גלגל הצבעים (טולי 4.9: "איפה הגלגל צבע"): עיגול גדול עם טבעת קשת, שברור שלוחצים עליו; לחיצה פותחת את בורר הצבע של הטלפון */
.tc-wheel-btn{width:48px; height:48px; border:0; border-radius:50%; padding:0; cursor:pointer; position:relative; box-shadow:0 0 0 3px #fff, 0 1px 3px rgba(0,0,0,.25); background:conic-gradient(#f43f5e,#f59e0b,#84cc16,#06b6d4,#6366f1,#d946ef,#f43f5e); -webkit-appearance:none; appearance:none;}
.tc-wheel-btn::after{content:""; position:absolute; inset:9px; border-radius:50%; background:var(--pick, #B8324F); border:2px solid #fff;}
/* הגלגל עצמו (6.9): זהה בכל טלפון, לא תלוי בבורר של הדפדפן */
.tc-wheel{flex-basis:100%; display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px 0 4px;}
.tc-wheel-disc{position:relative; width:min(240px, 70vw); aspect-ratio:1; border-radius:50%; cursor:crosshair; touch-action:none; box-shadow:0 2px 10px rgba(0,0,0,.2), 0 0 0 4px #fff;
  background:radial-gradient(circle closest-side, #fff 0%, rgba(255,255,255,.85) 12%, rgba(255,255,255,0) 92%), conic-gradient(from 0deg, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));}
.tc-wheel-dot{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); pointer-events:none;}
.tc-wheel-l{display:flex; align-items:center; gap:10px; width:min(240px, 70vw); font-size:13px; font-weight:700;}
.tc-wheel-l input{flex:1; min-width:0; accent-color:#1A1A1A;}
.tc-wheel-row{display:flex; align-items:center; justify-content:space-between; width:min(240px, 70vw); gap:10px;}
.tc-wheel-cur{display:inline-flex; align-items:center; gap:8px; font-size:13px; direction:ltr;} .tc-wheel-cur i{width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.tc-wheel-ok{appearance:none; border:1px solid #D5D9D2; background:#fff; border-radius:999px; padding:8px 16px; font:inherit; font-weight:700; cursor:pointer;}
.tc-custom-lbl{gap:10px;}
.tc-custom-note{font-size:13px; color:#6B736D; flex-basis:100%;}

.tc-credit .tc-wm{height:13px;width:auto;vertical-align:-2px;margin:0 3px;display:inline-block}

/* ---- אלבום: תמונות המשפחה על הכרטיס האישי ---- */
.tc-album{margin-top:14px}
.tc-albt{display:block;font-size:15px;font-weight:800;color:var(--soft);margin-bottom:8px}
.tc-albg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tc-albg figure{margin:0;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--soft) 18%,transparent);cursor:zoom-in}
.tc-albg img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.tc-albg figcaption{font-size:11.5px;font-weight:700;color:var(--text);padding:5px 4px;text-align:center;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:20px;cursor:zoom-out}
.tc-lb img{max-width:100%;max-height:80vh;border-radius:14px;display:block}
.tc-lb span{color:#fff;font-size:19px;font-weight:700}

/* ---- הזמנה לאירוע ---- */
.tc-inv{margin:0 0 16px;padding:16px 14px;border-radius:16px;text-align:center;
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.tc-inv.past{opacity:.72}
.tc-invk{display:block;font-family:"Frank Ruhl Libre",Georgia,serif;font-weight:900;font-size:25px;line-height:1.15;color:var(--text)}
.tc-invwho{font-size:17px;font-weight:700;color:var(--accent);margin-top:4px}
.tc-invd{font-size:19px;font-weight:800;color:var(--text);margin-top:10px}
.tc-invw{font-size:15px;font-weight:600;color:var(--soft);margin-top:3px}
.tc-invn{font-size:14px;color:var(--soft);margin-top:8px}
.tc-invb{display:flex;gap:8px;margin-top:13px}
.tc-invb a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  padding:12px 8px;border-radius:12px;font-size:15px;font-weight:800;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}
.tc-invb a.go{background:var(--accent);color:var(--on)}
.tc-invb svg{width:19px;height:19px}

/* ---- אישור הגעה ---- */
.tc-invb button.go{border:0;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.tc-invno{display:block;width:100%;margin-top:8px;background:none;border:0;color:var(--soft);
  font:inherit;font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer}
.tc-invup{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:13px 10px;
  border-radius:12px;background:var(--accent);color:var(--on);text-decoration:none;font-size:15.5px;font-weight:800}
.tc-invup svg{width:19px;height:19px}
.tc-invform{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.tc-invin{width:100%;padding:12px 13px;border-radius:11px;border:1px solid color-mix(in srgb,var(--soft) 45%,transparent);
  background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.tc-invnum{display:flex;align-items:center;gap:10px;justify-content:center;font-size:15px;font-weight:700;color:var(--soft)}
.tc-invnum button{width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--soft) 45%,transparent);
  background:none;color:var(--text);font:inherit;font-size:20px;font-weight:800;cursor:pointer;line-height:1}
.tc-invnum b{font-size:22px;color:var(--text);min-width:28px;text-align:center}
.tc-invsend{width:100%;padding:14px;border:0;border-radius:12px;background:var(--accent);color:var(--on);
  font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.tc-invmsg{font-size:14px;font-weight:700;color:var(--soft);min-height:1em;text-align:center}
.tc-invmsg.bad{color:#C2456E}
.tc-invok{text-align:center;font-size:17px;font-weight:800;color:var(--accent);padding:6px 0}
/* תקנון ודיווח: בגב הכרטיס בלבד, קטן, כדי שפני הכרטיס יישארו של הלקוח */
.tc-legal{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:12px;font-weight:600;
  color:var(--soft);text-decoration:underline;opacity:.85}