/* countdown.crazyartzone.com - light "creative tech" page (CrazyArtZone family) + countdown card designs (.d-<id>) */
:root { --bg:#f6f7fc; --card:#fff; --line:rgba(20,22,43,.09); --ink:#14162b; --muted:#5d6385; --acc:#6b5cff; --acc2:#12a9cc; --acc3:#f0468f; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html.recv-open, html.recv-open body { overflow:hidden; }
body { margin:0; color:var(--ink); background:var(--bg); font:16px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
	background-image:linear-gradient(rgba(20,22,43,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,22,43,.05) 1px, transparent 1px);
	background-size:40px 40px; -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%); }
body::after { content:""; position:fixed; inset:-20vmax; z-index:-3; pointer-events:none;
	background:radial-gradient(40vmax 30vmax at 15% 5%, rgba(240,70,143,.12), transparent 70%), radial-gradient(36vmax 28vmax at 88% 12%, rgba(107,92,255,.13), transparent 70%); }
a { color:var(--acc); }
.bar .in, .wrap { max-width:1100px; margin:0 auto; padding:0 16px; }
.bar .in { display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:6px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font:700 1.15rem 'Space Grotesk', sans-serif; }
.g { background:linear-gradient(90deg, var(--acc3), var(--acc), var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.by { font-size:.85rem; color:var(--muted); } .by a { color:var(--muted); }
.hero { padding:26px 0 16px; max-width:780px; }
h1 { font:700 clamp(1.8rem, 5vw, 2.9rem)/1.1 'Space Grotesk', sans-serif; letter-spacing:-.03em; margin:8px 0 10px; }
.hero p { color:var(--muted); margin:0 0 6px; font-size:1.05rem; }
.hero .answer { color:var(--ink); font-size:1.15rem; } .hero .answer b { color:var(--acc3); }
.hero .note { font-size:.9rem; }
h2 { font:700 1.35rem 'Space Grotesk', sans-serif; margin:30px 0 12px; }

/* maker */
.maker { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 400px); gap:20px; align-items:start; }
@media (max-width:860px) { .maker { grid-template-columns:1fr; } .preview { order:-1; } }
.panel { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:0 4px 16px rgba(20,22,43,.04); }
.panel label, .panel .wide { display:flex; flex-direction:column; gap:5px; font-size:.86rem; font-weight:600; color:var(--muted); }
.panel .wide { grid-column:1 / -1; }
.panel small { font-weight:400; }
.lab { font-size:.86rem; font-weight:600; color:var(--muted); }
input[type=text], input[type=date], input[type=time] { font:inherit; font-size:1rem; color:var(--ink); padding:10px 12px; border:1.5px solid var(--line); border-radius:11px; background:#fbfbfe; width:100%; }
input:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(107,92,255,.14); background:#fff; }
.tpls, .emojis, .designs { display:flex; flex-wrap:wrap; gap:6px; }
.tpls button { font:600 .85rem 'Inter', sans-serif; padding:7px 11px; border-radius:10px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.tpls button:hover { border-color:var(--acc); }
.emojis button { font-size:1.3rem; width:42px; height:42px; border-radius:11px; border:1.5px solid var(--line); background:#fff; cursor:pointer; }
.emojis button.more { width:auto; font:600 .82rem 'Inter', sans-serif; padding:0 12px; color:var(--acc); border-style:dashed; }
.emogroups { margin-top:8px; padding:10px 12px; background:#f8f8fd; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:6px; }
.emogroups .eg { font:600 .76rem 'Inter', sans-serif; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.emogroups .emojis button { width:38px; height:38px; font-size:1.2rem; }
.emogroups .own { font-size:.82rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.emogroups .own input { width:5em; font-size:1.2rem; text-align:center; padding:6px; }
.emojis button.on, .designs button.on { border-color:var(--acc); box-shadow:0 0 0 3px rgba(107,92,255,.16); }
.designs button { font:600 .8rem 'Inter', sans-serif; padding:14px 10px 6px; min-width:76px; border-radius:11px; border:1.5px solid var(--line); cursor:pointer; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.photo { flex-direction:row !important; flex-wrap:wrap; align-items:center; gap:8px 12px !important; }
.photo small { flex-basis:100%; }
.filebtn { cursor:pointer; font-size:.88rem; padding:7px 13px; border-radius:10px; border:1.5px dashed var(--acc); color:var(--acc); background:rgba(107,92,255,.05); }
.link { background:none; border:0; color:var(--acc3); font:inherit; font-size:.85rem; cursor:pointer; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.actions.center { justify-content:center; }
.btn { display:inline-flex; align-items:center; gap:6px; font:600 .95rem 'Space Grotesk', sans-serif; padding:10px 18px; border-radius:11px; border:0; cursor:pointer; color:#fff !important; text-decoration:none; background:linear-gradient(90deg, var(--acc3), var(--acc)); box-shadow:0 6px 18px rgba(107,92,255,.22); }
.btn.wa { background:#25d366; box-shadow:none; }
.btn.ghost { background:#fff; color:var(--ink) !important; border:1.5px solid var(--line); box-shadow:none; }
.btn[disabled] { opacity:.6; }
.eventcard { max-width:420px; margin:6px auto 0; }

/* upcoming events */
.evgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
.evgrid a { display:flex; flex-direction:column; gap:1px; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink); }
.evgrid a:hover { border-color:var(--acc); }
.evgrid .em { font-size:1.4rem; } .evgrid .left { font:700 1.05rem 'Space Grotesk', sans-serif; color:var(--acc3); } .evgrid small { color:var(--muted); }
.ad { margin:26px auto 0; max-width:970px; overflow:hidden; }
ins.adsbygoogle[data-ad-status="unfilled"] { display:none !important; }
footer { text-align:center; color:var(--muted); font-size:.88rem; margin-top:44px; padding:20px 16px 40px; border-top:1px solid var(--line); }
footer a { color:var(--muted); }
.toast { position:fixed; left:50%; bottom:70px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-weight:600; opacity:0; transition:opacity .2s; pointer-events:none; z-index:2147483600; }
.toast.show { opacity:1; }

/* a shared countdown: a layer over the page with only the card */
.recv { position:fixed; inset:0; z-index:2147483000; background:radial-gradient(circle at 50% 25%, #fff3f8, #eeeaff); overflow-y:auto; display:flex; justify-content:center; padding:4vh 16px 28px; }
.recv-box { width:100%; max-width:420px; margin:auto 0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.recv-box .cd { max-width:min(420px, 100%, 62vh); }
/* link to the matching greeting card (a week or less to go, and on the event pages) */
.ucapan-link { display:inline-block; margin-top:12px; padding:10px 16px; border-radius:12px; background:#fff; border:1.5px solid rgba(240,70,143,.3); color:#c2306f !important; font:600 .95rem 'Space Grotesk', sans-serif; text-decoration:none; box-shadow:0 4px 14px rgba(240,70,143,.12); }
.ucapan-link:hover { border-color:#f0468f; }
p.center { text-align:center; }
.recv-home { font-size:.82rem; color:var(--muted) !important; margin-top:8px; }

/* ================= the countdown card (4:5, sizes in cqw so it looks the same at any width and in the saved picture) ================= */
.cd { position:relative; width:100%; aspect-ratio:4 / 5; border-radius:24px; overflow:hidden; container-type:inline-size;
	background:var(--c-bg); color:var(--c-ink); box-shadow:0 18px 44px rgba(20,22,43,.16); }
.cd-in { position:absolute; inset:7% 7% 10%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:3cqw; }
.cd-emoji { font-size:14cqw; line-height:1; }
.cd-title { font:700 var(--c-tsize, 7.4cqw)/1.15 var(--c-tfont, 'Space Grotesk'), sans-serif; color:var(--c-title, var(--c-ink)); max-width:100%; overflow-wrap:anywhere; }
.cd-units { display:grid; grid-template-columns:repeat(4, 1fr); gap:2.4cqw; width:100%; margin-top:1cqw; }
.cd-units div { background:var(--c-box, rgba(255,255,255,.6)); border:1px solid var(--c-boxline, rgba(255,255,255,.7)); border-radius:3.6cqw; padding:3cqw 0 2cqw; }
.cd-units b { display:block; font:700 9.5cqw/1 'Space Grotesk', sans-serif; color:var(--c-num, var(--c-ink)); font-variant-numeric:tabular-nums; }
.cd-units div:first-child b { font-size:var(--c-dsize, 9.5cqw); }
.cd-units span { display:block; font:600 3.2cqw 'Inter', sans-serif; text-transform:uppercase; letter-spacing:.08em; opacity:.75; margin-top:1.4cqw; }
.cd-done { font:700 9cqw 'Space Grotesk', sans-serif; color:var(--c-num, var(--c-ink)); }
.cd-date { font:600 3.8cqw 'Inter', sans-serif; opacity:.85; }
.cd-msg { font:500 4.2cqw/1.4 'Inter', sans-serif; max-width:92%; }
.cd-mark { position:absolute; bottom:3.4%; left:0; right:0; text-align:center; font:500 2.6cqw 'Inter', sans-serif; opacity:.55; }


.d-pastel   { --c-bg:linear-gradient(160deg, #ffe1ef, #ece6ff 60%, #e3f4ff); --c-ink:#3a3346; --c-title:#c2477e; --c-num:#6b4fd8; }
.d-langit   { --c-bg:linear-gradient(170deg, #e7f4ff, #bcdcff); --c-ink:#1f3a5f; --c-num:#2f6fc8; }
.d-senja    { --c-bg:linear-gradient(165deg, #ffb36b, #f0577f 60%, #a64ad6); --c-ink:#fff; --c-box:rgba(255,255,255,.18); --c-boxline:rgba(255,255,255,.35); }
.d-malam    { --c-bg:linear-gradient(170deg, #1c1b4b, #3a2a6e 60%, #6b3d7a); --c-ink:#efeaff; --c-title:#ffd98a; --c-num:#ffd98a; --c-box:rgba(255,255,255,.09); --c-boxline:rgba(255,217,138,.25); }
.d-raya     { --c-bg:radial-gradient(circle at 30% 15%, #1f7a55, #0e4a36 70%); --c-ink:#f5f1e3; --c-title:#f2cf6b; --c-num:#f2cf6b; --c-box:rgba(255,255,255,.08); --c-boxline:rgba(242,207,107,.3); }
/* Kaabah: black with a gold kiswah band */
.d-kaabah   { --c-bg:linear-gradient(175deg, #1d1b18, #0f0e0c); --c-ink:#f3e6c4; --c-title:#e6c26a; --c-num:#e6c26a; --c-box:rgba(230,194,106,.08); --c-boxline:rgba(230,194,106,.35); --c-tfont:'Space Grotesk'; }
.d-kaabah::before { content:""; position:absolute; left:0; right:0; top:4.5%; height:7%;
	background:repeating-linear-gradient(90deg, rgba(230,194,106,.85) 0 2px, transparent 2px 14px), linear-gradient(#c9a24a, #8a6a1e);
	background-blend-mode:overlay; border-top:2px solid #e6c26a; border-bottom:2px solid #e6c26a; opacity:.85; }
.d-kaabah::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4%; background:linear-gradient(90deg, #8a6a1e, #e6c26a, #8a6a1e); opacity:.7; }
/* Madinah: white and green with the green dome */
.d-madinah  { --c-bg:linear-gradient(175deg, #f4fbf6, #dcefe3); --c-ink:#1e4d36; --c-title:#16603f; --c-num:#16603f; --c-box:rgba(255,255,255,.75); --c-boxline:rgba(22,96,63,.18); }
.d-madinah::after { content:""; position:absolute; right:-6%; bottom:-2%; width:46%; aspect-ratio:1; opacity:.18;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6v8M46 14h8' stroke='%2316603f' stroke-width='3'/%3E%3Cpath d='M18 62c0-22 14-40 32-46 18 6 32 24 32 46z' fill='%2316603f'/%3E%3Crect x='12' y='62' width='76' height='30' fill='%2316603f'/%3E%3Cpath d='M30 92V76a6 6 0 0 1 12 0v16M58 92V76a6 6 0 0 1 12 0v16' fill='%23dcefe3'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-kahwin   { --c-bg:linear-gradient(160deg, #fffaf3, #f3e3cc); --c-ink:#5a4632; --c-title:#a8781e; --c-num:#a8781e; --c-tfont:'Great Vibes'; --c-tsize:10.5cqw; --c-box:rgba(255,255,255,.7); --c-boxline:rgba(168,120,30,.25); }
.d-anniv    { --c-bg:linear-gradient(165deg, #fde8ee, #fff6ef 60%, #f6e3d3); --c-ink:#5b3440; --c-title:#a3324f; --c-num:#a3324f; --c-tfont:'Clicker Script'; --c-tsize:11cqw; --c-box:rgba(255,255,255,.7); --c-boxline:rgba(163,50,79,.2); }
.d-anniv::before { content:""; position:absolute; inset:3.5%; border:1.5px solid rgba(176,141,60,.45); border-radius:18px; pointer-events:none; }
.sw-anniv { background:linear-gradient(135deg, #f3a3b8, #a3324f); }
.d-bayi     { --c-bg:linear-gradient(160deg, #e6f3ff, #fde7f1); --c-ink:#45506b; --c-title:#5b86d6; --c-num:#e06a9a; }
.d-graduasi { --c-bg:linear-gradient(165deg, #1f2f5a, #2c3f73); --c-ink:#eef1fb; --c-title:#f2c14e; --c-num:#f2c14e; --c-box:rgba(255,255,255,.08); --c-boxline:rgba(242,193,78,.3); }
.d-merdeka  { --c-bg:linear-gradient(180deg, #ffffff, #f2f4fb); --c-ink:#010066; --c-title:#010066; --c-num:#cc0001; --c-box:#fff; --c-boxline:rgba(1,0,102,.15); }
.d-merdeka::before { content:""; position:absolute; left:0; right:0; top:0; height:5%; background:repeating-linear-gradient(180deg, #cc0001 0 50%, #fff 50% 100%); background-size:100% 40%; }
.d-merdeka::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2.4%; background:linear-gradient(90deg, #010066 0 40%, #ffcc00 40% 60%, #cc0001 60%); }
.d-minimal  { --c-bg:#ffffff; --c-ink:#1d2140; --c-num:#6b5cff; --c-box:#f4f4fa; --c-boxline:#e8e8f2; }
/* the swatch buttons in the maker */
.sw-pastel { background:linear-gradient(135deg, #f7a8c9, #b9a8ff); } .sw-langit { background:linear-gradient(135deg, #8fc4ff, #4b8fe0); } .sw-senja { background:linear-gradient(135deg, #ffb36b, #f0577f, #a64ad6); }
.sw-malam { background:linear-gradient(135deg, #1c1b4b, #6b3d7a); } .sw-raya { background:linear-gradient(135deg, #1f7a55, #0e4a36); } .sw-kaabah { background:linear-gradient(180deg, #1d1b18 60%, #c9a24a 60%, #c9a24a 75%, #1d1b18 75%); }
.sw-madinah { background:linear-gradient(135deg, #2f8a5f, #16603f); } .sw-kahwin { background:linear-gradient(135deg, #e8cf9f, #a8781e); } .sw-bayi { background:linear-gradient(135deg, #8fc0f0, #f29cc1); }
.sw-graduasi { background:linear-gradient(135deg, #2c3f73, #f2c14e); } .sw-merdeka { background:linear-gradient(180deg, #cc0001 0 25%, #fff 25% 50%, #010066 50%); } .sw-minimal { background:#9aa0c3; }