/* The Eid card maker: a big live preview beside friendly numbered steps. Logical properties mirror it in Arabic and Urdu. */

.ec-hero { display: flex; align-items: center; gap: 18px; margin: 6px 0 22px; }
.ec-hero .k-mascot-svg, .ec-hero-mascot { width: 92px; height: 112px; flex: none; }
.ec-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; margin: 0 0 4px; }
.ec-hero p { margin: 0; font-family: var(--font-read); color: var(--ink-soft); max-width: 700px; }

.ec-maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(18px, 3vw, 34px); align-items: start; margin-bottom: 40px; }
.ec-stage { position: sticky; top: calc(var(--top-h) + 14px); display: grid; gap: 14px; }
.ec-canvas-wrap { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-l); background: var(--paper); aspect-ratio: 1080 / 1350; }
.ec-canvas-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ec-canvas-wrap canvas.is-drawing { cursor: crosshair; }
.ec-canvas-wrap canvas:focus-visible { outline: 5px solid var(--sun); outline-offset: -5px; }
.ec-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); transition: opacity .3s; }
.is-ready .ec-loading { opacity: 0; pointer-events: none; }
.ec-sticker-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 18px; background: var(--grape-soft); }
.ec-tool {
    width: 46px; height: 46px; border-radius: 14px; border: 0; cursor: pointer; font-size: 1.15rem; font-weight: 800;
    background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--grape) 30%, var(--paper));
}
.ec-tool--warn { color: var(--coral-deep); }
:root[dir="rtl"] [data-sticker-action="left"], :root[dir="rtl"] [data-sticker-action="right"] { transform: scaleX(-1); }
.ec-final { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ec-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-family: var(--font-read); font-size: .92rem; color: var(--ink-soft); }
.ec-privacy .k-ico { width: 1.4em; height: 1.4em; flex: none; }

.ec-steps { display: grid; gap: 16px; }
.ec-step { padding: 18px 20px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-s); border: 1px solid var(--line); }
.ec-step h2 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; margin: 0 0 12px; }
.ec-step-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grape); color: #fff; font-size: 1.05rem; flex: none; }
.ec-label { margin: 10px 0 6px; font-weight: 800; color: var(--ink-soft); font-size: .92rem; }
.ec-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ec-row + .ec-row { margin-top: 10px; }
.ec-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 800; font-size: .98rem;
}
.ec-chip .k-ico { width: 1.4em; height: 1.4em; }
.ec-chip--big { min-height: 52px; padding: 8px 18px; font-size: 1.05rem; }
.ec-chip[aria-pressed="true"] { border-color: var(--grape); background: var(--grape-soft); box-shadow: 0 3px 0 var(--grape); }
.ec-callig span { font-size: 1.6rem; line-height: 1.2; }
.ec-callig small { color: var(--ink-soft); font-weight: 700; }
.ec-callig-naskh { font-family: "Amiri", serif; font-weight: 700; }
.ec-callig-kufi { font-family: "Reem Kufi", "Amiri", serif; font-weight: 700; }
.ec-phrases { margin-top: 10px; }
.ec-phrase { border-radius: 16px; text-align: start; font-family: var(--font-read); font-weight: 700; }
.ec-phrases[lang="ar"] .ec-phrase { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1.15rem; }
.ec-phrase.is-urdu { font-family: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", serif; font-weight: 400; font-size: 1.15rem; line-height: 2; }

.ec-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ec-template {
    display: grid; gap: 6px; justify-items: center; padding: 8px; border-radius: 18px; border: 3px solid transparent; cursor: pointer;
    background: var(--cream); color: var(--ink); font-weight: 800; font-size: .9rem; text-align: center;
}
.ec-template img { width: 100%; height: auto; aspect-ratio: 1080 / 1350; border-radius: 10px; box-shadow: var(--shadow-s); background: var(--paper); }
.ec-template[aria-pressed="true"] { border-color: var(--grape); background: var(--grape-soft); }

.ec-swatch {
    width: 52px; height: 52px; border-radius: 50%; cursor: pointer; border: 4px solid var(--paper);
    background: conic-gradient(var(--a) 0 50%, var(--b) 50% 100%); box-shadow: 0 0 0 2px var(--line), var(--shadow-s);
}
.ec-swatch[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--grape), var(--shadow-s); transform: scale(1.06); }

.ec-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ec-fields label { display: grid; gap: 4px; font-weight: 800; font-size: .92rem; color: var(--ink-soft); }
.ec-field-wide { grid-column: 1 / -1; order: 1; }
.ec-fields label:last-child { order: 0; }
.ec-fields input, .ec-fields textarea {
    width: 100%; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--paper); color: var(--ink);
    font-family: var(--font-read); font-size: 1.05rem; resize: vertical;
}
.ec-fields input:focus-visible, .ec-fields textarea:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.ec-note { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-family: var(--font-read); font-size: .9rem; color: var(--ink-soft); }
.ec-note .k-ico { width: 1.3em; height: 1.3em; flex: none; }

.ec-stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.ec-sticker {
    aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px; cursor: pointer; border: 2px solid var(--line);
    background: var(--cream); transition: transform .2s var(--ease-bounce);
}
.ec-sticker:hover { transform: translateY(-3px) rotate(-4deg); }
.ec-sticker .k-ico { width: 44px; height: 44px; }
.ec-pen { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: var(--c); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--line); }
.ec-pen[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--grape); }

.ec-print-card { display: none; }

/* locked */
.ec-locked-cover { background: linear-gradient(160deg, #2A2466, #5B3FE0); }
.ec-locked-card {
    display: grid; justify-items: center; gap: 4px; padding: 22px 26px; border-radius: 22px; border: 3px solid #F6C453;
    color: #F6C453; font-family: "Amiri", serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3rem);
}
.ec-locked-moon, .ec-locked-lantern { width: 56px; height: 56px; }

@media (max-width: 900px) {
    .ec-maker { grid-template-columns: 1fr; }
    .ec-stage { position: static; max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
    .ec-hero .k-mascot-svg { display: none; }
    .ec-templates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .ec-fields { grid-template-columns: 1fr; }
    .ec-step { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-sticker, .ec-loading { transition: none; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body.page-eid-card .k-main { padding: 0 !important; }
    .ec-print-card { display: block !important; width: 100%; max-width: 160mm; margin: 0 auto; border-radius: 6mm; }
}