@font-face{font-family:'GE SS Unique';src:url('../assets/fonts/GE-SS-Unique-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'VodafoneExB';src:url('../assets/fonts/VodafoneExB.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
:root{ --gold:#CBA96A; --green:#6A8F83; --dark:#2B2B2B; }
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Alexandria','Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;background:#f5f5f0;margin:0;direction:rtl}

/* ====== شهادة فل-سكرين بلا سكرول ====== */
.cert-page{ height:100vh; overflow:hidden; margin:0; background:#f5f5f0; }


.cert-page .stage{
  height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding-bottom: calc(var(--controls, 90px) + env(safe-area-inset-bottom) + 12px);
}

.cert-page .fixed-controls{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  z-index: 10;
}



.cert-wrap{
  /* تحكم سريع من مكان واحد */
  --controls: 60px;

  /* موضع الاسم (يمين شوية بسبب الباترِن) */
  --name-top: 48.8%;
  --name-left: 59.6%;

  /* حجم الاسم وسقف/قاع الملاءمة */
  --name-max: 70;  /* px */
  --name-min: 12;  /* px */
  --name-fit: 0.74; /* نسبة العرض المسموح بها للاسم من عرض الشهادة */

  /* موضع وحجم بلوك التاريخ + سماكة الفريم */
  --date-left: 28.9%;
  --date-bottom: 6%;
  --date-w: 100px;   /* العرض */
  --date-h: 130px;   /* الارتفاع (عمودي) */
  
    /* كتلة التاريخ كنسبة من عرض الشهادة (بدل px) */
  --date-wp: 5%;         /* عرض الفريم كنسبة من عرض الشهادة */
  --date-ratio: 50/110;  /* نسبة العرض/الارتفاع (عمودي) */
  
  --date-stroke: 2;  /* سماكة الفريم بالبيكسل */
}
.cert-page .cert-wrap{
  aspect-ratio:1497/1080;
  width: min(96vw, calc((100vh - var(--controls) - 22px) * 1497 / 1080));
  height: auto;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  position:relative;
}
.cert-page .cert-bg{position:absolute; inset:0}
.cert-page .cert-bg img{
  width:100%; height:100%; object-fit:contain; display:block;
}

/* ====== عناصر الشهادة ====== */
.cert-wrap .name{
  position:absolute;
  left: var(--name-left); top: var(--name-top);
  transform:translate(-50%,-50%);
  font-size: calc(var(--name-max) * 1px);  /* يبدأ من أقصى حجم تسمح به */
  font-weight:900; color:var(--gold);
  text-shadow:0 2px 0 rgba(0,0,0,.06);
  white-space:nowrap; text-align:center;
  font-family:'Alexandria',system-ui;
}



/* كتلة التاريخ: فريم SVG عمودي + شهر فوق سنة */
.cert-wrap .date-group{
  position:absolute;
  left: var(--date-left);       /* أنت ضابطها عندك بالنسبة المئوية؛ سيبها زي ما هي */
  bottom: var(--date-bottom);
  width: clamp(70px, var(--date-wp), 160px);  /* نسبة + حدود دنيا/قصوى */
  aspect-ratio: var(--date-ratio);           /* يحافظ على عمودية الفريم */
  height: auto;                               /* متولدة من الـaspect-ratio */
}

.cert-wrap .date-group svg.frame{ position:absolute; inset:0; width:100%; height:100%; }
.cert-wrap .date-group svg.frame rect{
  fill:none;
  stroke: var(--gold);
  stroke-width: var(--date-stroke);
  vector-effect: non-scaling-stroke; /* سُمك الفريم يفضل ثابت */
}

.cert-wrap .date-group .date-stack{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

/* أحجام النصوص بتسكّل لطيف مع العرض، ومش معتمدة على px */
.cert-wrap .date-group .date-month{
  font-family:'GE SS Unique','Cairo',sans-serif;
  color: var(--green);
  line-height:1.05;
  font-size: clamp(7px, 0.9vw, 14px);
}

.cert-wrap .date-group .date-year{
  margin-top:6px;
  font-family:'VodafoneExB','Cairo',sans-serif;
  color:#2B2B2B;
  line-height:1.05;
  font-size: clamp(6px, 0.5vw, 13px);
  /* لو كنت شيلت البوردر/الخلفية خلاص كويس، هنسيبها فاضية */
  border:none; background:none; padding:0;
}





.cert-wrap .date-group svg.frame{
  position:absolute; inset:0; width:100%; height:100%;
}
.cert-wrap .date-group .date-stack{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.cert-wrap .date-group .date-month{
  font-size:clamp(20px, 3.2vw, 42px);
  color:var(--green);
  font-family:'GE SS Unique','Cairo',sans-serif;
  line-height:1.05;
}
.cert-wrap .date-group .date-year{
  margin-top:8px;
  padding: 2px 12px;

  font-size:clamp(16px, 2.4vw, 30px);
  color:#2B2B2B;
  font-family:'VodafoneExB','Cairo',sans-serif;
  line-height:1.05;
}

/* الأزرار الثابتة تحت */
.cert-page .fixed-controls{
  position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:10;
}
.btn{padding:.8rem 1rem;border-radius:12px;border:1px solid #ddd;background:#fff;cursor:pointer;font-family:'Alexandria','Cairo',system-ui;font-weight:700}
.btn-primary{background:var(--green);color:#fff;border-color:transparent}



@media (max-width: 430px){
  .cert-wrap{
    --name-max: 36;    /* سقف أصغر للاسم */
    --name-fit: .68;   /* سيبه ياخد 68% من عرض الشهادة بدل 74% */
    /* لو محتاج تزق الاسم سنة يمين/فوق: */
    --name-top: 49%;
    --name-left: 60%;

    /* ممكن تزود الفريم سنة في الموبايل لو حبيت */
    --date-wp: 16%;
    --date-stroke: 2;
  }
}





/* طباعة */
@media print{
  @page{ size: A4 landscape; margin:0 }

  html, body{ width:297mm; height:210mm; background:#fff; padding:0; margin:0 }
  .fixed-controls{ display:none !important }
  .cert-page{ height:100%; }
  .cert-page .stage{ height:100%; padding:0 }
  .cert-page .cert-wrap{
    position: fixed;
    inset: 0;            /* top/right/bottom/left = 0 */
    margin: auto;        /* يخليها في النص بالظبط */
    width: 297mm;
    height: 210mm;
    aspect-ratio: auto;  /* امنع أي حسابات نسبية أثناء الطباعة */
    box-shadow:none; border-radius:0;
  }
  .cert-page .cert-bg img{ width:100%; height:100%; object-fit:contain }
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}