/* ===== المطوية: ورقة A4 عرضية بوجهين، في كل وجه ثلاثة أقسام تُطوى بعد الطباعة =====
   يستعملها الموقع للمعاينة، والخادم لصنع ملف PDF. كل قالب له خطوطه وزخرفته وطابعه. */

.sheet {
  --c: #0f766e;
  --c-soft: #e6f4f1;
  --ink: #1f2933;
  --head-font: "Tajawal", sans-serif;
  width: 297mm;
  height: 210mm;
  display: flex;
  position: relative;
  background: #fff;
  color: var(--ink);
  font-family: "Tajawal", sans-serif;
  overflow: hidden;
}
.sheet.green { --c: #0f766e; --c-soft: #e6f4f1; }
.sheet.blue { --c: #1d4ed8; --c-soft: #e8eefc; }
.sheet.purple { --c: #7c3aed; --c-soft: #f1eafd; }
.sheet.orange { --c: #c2410c; --c-soft: #fdeee6; }
.sheet.red { --c: #b91c1c; --c-soft: #fdecec; }
.sheet.pink { --c: #be185d; --c-soft: #fce8f1; }
.sheet.brown { --c: #92400e; --c-soft: #f8efe4; }
.sheet.navy { --c: #1e3a8a; --c-soft: #e6ebf7; }

.fold {
  width: 99mm;
  height: 100%;
  padding: 11mm 9mm;
  display: flex;
  flex-direction: column;
  gap: 3.5mm;
  font-size: 12pt;
  line-height: 1.65;
  position: relative;
}
/* خط الطيّ بين الأقسام الثلاثة */
.fold + .fold { border-inline-start: 1px dashed #d4d4d4; }

.fold h3 { margin: 0; font-family: var(--head-font); font-size: 14pt; line-height: 1.4; color: var(--c); }
.fold ul, .fold ol { margin: 0; padding-inline-start: 5mm; }
.fold li { margin-bottom: 1mm; }
.fold li::marker { color: var(--c); }
.fold p { margin: 0; }

.sec-head { display: flex; align-items: center; gap: 2.5mm; }
.sec-head h3 { flex: 1; }
.sec-icon {
  flex: none; width: 9mm; height: 9mm; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13pt; background: var(--c-soft);
}
.fold .section { position: relative; display: flex; flex-direction: column; gap: 1.5mm; }

.box { background: var(--c-soft); border-radius: 4mm; padding: 3.5mm 4.5mm; }

.cover { justify-content: center; align-items: center; text-align: center; gap: 5mm; background: var(--c); color: #fff; }
.cover .badge { font-size: 10pt; opacity: .9; }
.cover h1 { margin: 0; font-family: var(--head-font); font-size: 27pt; line-height: 1.3; }
.cover .sub { font-size: 13pt; opacity: .95; }
.cover .emblem {
  width: 36mm; height: 36mm; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34pt; font-weight: 800; background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .6);
}

.back { justify-content: center; text-align: center; }
.info { width: 100%; border-collapse: collapse; font-size: 12pt; }
.info td { border-bottom: 1px solid #ddd; padding: 3mm 1mm; text-align: start; }
.info td:first-child { color: var(--c); font-weight: 700; width: 28mm; }
.credit { font-size: 9pt; color: #8a8f96; margin-top: auto; }

.questions ol { padding-inline-start: 5mm; }
.questions li { margin-bottom: 3mm; }
.questions li::after { content: ""; display: block; border-bottom: 1px dotted #aaa; height: 6mm; }

/* الكلمة المخفية في المعاينة المجانية */
.hidden-word {
  display: inline-block; padding: 0 2mm; margin: 0 .5mm; border-radius: 2mm;
  background: var(--c-soft); border: 1px dashed var(--c); font-size: .85em; line-height: 1.5;
}

/* ===== 1. كلاسيكي: أنيق وهادئ، غلاف ملوّن بنقاط خفيفة ===== */
.tpl-classic .cover {
  background-color: var(--c);
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.4px);
  background-size: 6mm 6mm;
}
.tpl-classic .fold h3 { border-bottom: 2px solid var(--c); padding-bottom: 1mm; }

/* ===== 2. شريط: غلاف أبيض تقطعه كتلة لونية مائلة، وعناوين في أشرطة ===== */
.tpl-band { --head-font: "Cairo", sans-serif; }
.tpl-band .cover { background: #fff; color: var(--c); }
.tpl-band .cover::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 62mm;
  background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
.tpl-band .cover > * { position: relative; }
.tpl-band .cover .badge { color: #fff; position: absolute; top: 12mm; inset-inline: 0; }
.tpl-band .cover .emblem { background: #fff; border: 3px solid var(--c); box-shadow: 0 2mm 5mm rgba(0, 0, 0, .12); margin-top: 18mm; }
.tpl-band .cover .sub { color: var(--ink); }
.tpl-band .fold h3 { background: var(--c); color: #fff; padding: 1.2mm 3.5mm; border-radius: 1.5mm; font-size: 13pt; }
.tpl-band .sec-icon { background: #fff; border: 1.5px solid var(--c); }

/* ===== 3. زخرفة: إطار هندسي إسلامي وخط أميري وذهبي، يناسب الدين والوطن ===== */
.tpl-islamic { --head-font: "Amiri", serif; --gold: #b08a2e; background: #fffaf0; }
.tpl-islamic .fold { padding: 13mm 11mm; }
.tpl-islamic .fold::before {
  content: ""; position: absolute; inset: 4mm; border: 1.5px solid var(--gold); border-radius: 2mm; pointer-events: none;
  box-shadow: inset 0 0 0 1.5mm #fffaf0, inset 0 0 0 2.2mm var(--c);
}
.tpl-islamic .fold h3 { text-align: center; font-size: 16pt; color: var(--c); }
.tpl-islamic .fold h3::after { content: "❖"; display: block; font-size: 9pt; color: var(--gold); line-height: 1; margin-top: 1mm; }
.tpl-islamic .sec-head { flex-direction: column; gap: 1mm; }
.tpl-islamic .sec-icon { background: transparent; border: 1px solid var(--gold); }
.tpl-islamic .box { background: #fff; border: 1px solid var(--gold); }
.tpl-islamic .cover {
  color: #fff;
  background-color: var(--c);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1'><path d='M20 2l5 13 13 5-13 5-5 13-5-13L2 20l13-5z'/><rect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/></g></svg>");
}
.tpl-islamic .cover::before { box-shadow: inset 0 0 0 1.5mm var(--c), inset 0 0 0 2.2mm var(--gold); border-color: var(--gold); }
.tpl-islamic .cover .emblem { border: 2px solid var(--gold); background: rgba(0, 0, 0, .12); }
.tpl-islamic .cover h1 { font-size: 30pt; }

/* ===== 4. مرح: فقاعات مستديرة ملوّنة وخط طفولي، يناسب الصفوف الأولى ===== */
.tpl-playful { --head-font: "Baloo Bhaijaan 2", sans-serif; background: var(--c-soft); }
.tpl-playful .fold + .fold { border-inline-start: 1px dashed rgba(0, 0, 0, .12); }
.tpl-playful .section, .tpl-playful .box {
  background: #fff; border-radius: 6mm; padding: 3mm 4.5mm; box-shadow: 0 1mm 0 rgba(0, 0, 0, .06);
}
.tpl-playful .section:nth-of-type(even) { transform: rotate(-.6deg); }
.tpl-playful .section:nth-of-type(odd) { transform: rotate(.6deg); }
.tpl-playful .fold h3 { font-size: 15pt; }
.tpl-playful .sec-icon { width: 11mm; height: 11mm; font-size: 16pt; background: var(--c-soft); }
.tpl-playful .cover { background: #fff; color: var(--c); }
.tpl-playful .cover::before, .tpl-playful .cover::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--c); opacity: .14;
}
.tpl-playful .cover::before { width: 60mm; height: 60mm; top: -18mm; inset-inline-end: -18mm; }
.tpl-playful .cover::after { width: 44mm; height: 44mm; bottom: -12mm; inset-inline-start: -10mm; }
.tpl-playful .cover > * { position: relative; }
.tpl-playful .cover .emblem { background: var(--c); border: 0; width: 44mm; height: 44mm; font-size: 42pt; }
.tpl-playful .cover .sub { color: var(--ink); }

/* ===== 5. جريء: طابع مجلة، غلاف داكن بعنوان ضخم وأقسام مرقّمة ===== */
.tpl-bold { --head-font: "Cairo", sans-serif; counter-reset: sec; }
.tpl-bold .cover { background: #111827; justify-content: center; align-items: stretch; text-align: start; }
.tpl-bold .cover::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 6mm; background: var(--c); }
.tpl-bold .cover .emblem { width: 22mm; height: 22mm; font-size: 20pt; background: var(--c); border: 0; }
.tpl-bold .cover h1 { font-size: 32pt; font-weight: 900; line-height: 1.15; }
.tpl-bold .cover .sub { border-inline-start: 1.5mm solid var(--c); padding-inline-start: 3mm; }
.tpl-bold .fold h3 { color: var(--ink); font-weight: 800; }
.tpl-bold .section { border-top: 1mm solid var(--c); padding-top: 2mm; }
.tpl-bold .sec-icon { display: none; }
.tpl-bold .section h3::before {
  counter-increment: sec; content: counter(sec, arabic-indic) ".";
  color: var(--c); font-size: 20pt; font-weight: 900; margin-inline-end: 2mm;
}

/* ===== 6. دفتر: ورق مسطّر بهامش أحمر، وعناوين بخط الرقعة كأنها مكتوبة باليد ===== */
.tpl-notebook { --head-font: "Aref Ruqaa", serif; }
.tpl-notebook .fold:not(.cover) {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 7.6mm, #cfe0f1 7.6mm, #cfe0f1 7.9mm);
  background-position: 0 10mm;
}
.tpl-notebook .fold:not(.cover)::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 6mm; border-inline-start: 1.2px solid #f2a7a7; }
.tpl-notebook .fold h3 { font-size: 17pt; color: var(--ink); display: inline; }
.tpl-notebook .sec-head h3 { background: linear-gradient(transparent 55%, var(--c-soft) 55%); }
.tpl-notebook .sec-icon { background: transparent; font-size: 15pt; }
.tpl-notebook .box { background: #fffbe6; border-radius: 1mm; box-shadow: 0 1mm 2mm rgba(0, 0, 0, .08); transform: rotate(-1deg); }
.tpl-notebook .cover { background: #fdfcf7; color: var(--ink); }
.tpl-notebook .cover::before {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 7mm;
  background: repeating-linear-gradient(to bottom, var(--c) 0 6mm, transparent 6mm 9mm);
}
.tpl-notebook .cover h1 { font-size: 32pt; color: var(--c); }
.tpl-notebook .cover .emblem { background: transparent; border: 2px dashed var(--c); }

/* ===== 7. علمي: ورق مربعات وبطاقات بشارات، يناسب العلوم والرياضيات ===== */
.tpl-science { --head-font: "El Messiri", sans-serif; }
.tpl-science .fold:not(.cover) {
  background-image:
    linear-gradient(rgba(29, 78, 216, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 78, 216, .07) 1px, transparent 1px);
  background-size: 5mm 5mm;
}
.tpl-science .section { background: #fff; border: 1px solid var(--c); border-radius: 2mm; padding: 2.5mm 3.5mm; }
.tpl-science .sec-head { margin-top: -6mm; }
.tpl-science .sec-head h3 { flex: none; background: #fff; padding: 0 1.5mm; }
.tpl-science .sec-icon { background: var(--c); width: 10mm; height: 10mm; box-shadow: 0 0 0 1.5mm #fff; }
.tpl-science .fold h3 { font-size: 13.5pt; }
.tpl-science .box { background: #fff; border-inline-start: 1.5mm solid var(--c); border-radius: 1mm; }
.tpl-science .cover {
  background-color: var(--c);
  background-image:
    linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 8mm 8mm;
}
.tpl-science .cover .emblem { border-radius: 4mm; transform: rotate(45deg); }
.tpl-science .cover .emblem > * { transform: rotate(-45deg); }

/* ===== المعاينة على الشاشة ===== */
.preview .sheet { margin: 0 auto 6mm; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); zoom: var(--fit, .5); }
.sheet-label { text-align: center; color: var(--muted, #5f6b76); font-size: 13px; margin: 4px 0 6px; }
@media (max-width: 860px) {
  .sheet-label::after { content: " · اسحب يمينًا ويسارًا ↔ وكبّر بإصبعين"; display: block; font-size: 12px; }
}

/* ===== ملف PDF ===== */
@page { size: A4 landscape; margin: 0; }
.pdf { margin: 0; background: #fff; }
.pdf .sheet { break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pdf .sheet:last-child { break-after: auto; }