/* أداة «إنشاء فاتورة مجانًا» (/free-invoice) — المحرّر والمعاينة والمشاركة. مستند الفاتورة نفسه من invoice.css + invoice_templates_5_8.css */
.fi-hero{padding-bottom:26px}
.fi-badges{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:16px 0 0;padding:0}
.fi-badges li{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--b-line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--b-ink2)}
.fi-badges svg{width:15px;height:15px;color:var(--b-accent)}

/* ===== التخطيط ===== */
.fi-tool{max-width:1320px;margin:0 auto;padding:0 20px 30px}
.fi-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px;align-items:start}
.fi-tabs{display:none}
.fi-form{display:flex;flex-direction:column;gap:12px}
.fi-card{background:#fff;border:1px solid var(--b-line);border-radius:18px;box-shadow:var(--b-shadow);padding:0 16px}
.fi-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;padding:14px 0;min-height:48px}
.fi-card>summary::-webkit-details-marker{display:none}
.fi-card>summary::after{content:"";margin-inline-start:auto;width:9px;height:9px;border-inline-end:2px solid var(--b-muted);border-bottom:2px solid var(--b-muted);transform:rotate(45deg);transition:transform .2s}
.fi-card[open]>summary::after{transform:rotate(-135deg)}
.fi-card[open]{padding-bottom:16px}
.fi-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--b-primary-soft);color:var(--b-primary);font-size:13px;font-weight:900}
.fi-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:800;color:var(--b-ink2);margin-top:10px;min-width:0}
.fi-form input:not([type=checkbox]):not([type=color]):not([type=file]),.fi-form select,.fi-form textarea{width:100%;min-width:0;min-height:44px;border:1.5px solid var(--b-line);border-radius:12px;padding:8px 12px;font:inherit;font-size:15px;font-weight:500;color:var(--b-ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.fi-form textarea{resize:vertical;min-height:64px;line-height:1.6}
.fi-form input:focus,.fi-form select:focus,.fi-form textarea:focus{outline:none;border-color:var(--b-primary);box-shadow:0 0 0 3px rgba(70,54,232,.15)}
.fi [hidden]{display:none!important}
.fi-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.fi-row>label{margin-top:10px}
.fi-inline{display:flex;gap:6px}
.fi-inline select{flex:0 0 84px}
.fi-lbl{margin:14px 0 6px;font-size:12.5px;font-weight:800;color:var(--b-ink2)}
.fi-lbl small{font-weight:600;color:var(--b-muted)}

/* الصور */
.fi-logo{display:flex;align-items:center;gap:14px;margin-top:6px}
.fi-img{flex:0 0 76px;height:76px;border:1.5px dashed #cbd5e1;border-radius:16px;display:grid;place-items:center;background:var(--b-soft) repeating-conic-gradient(#eef0f5 0 25%,#fff 0 50%) 0 0/14px 14px;overflow:hidden;color:var(--b-muted);font-size:12px;font-weight:700}
.fi-img img{max-width:100%;max-height:100%;object-fit:contain}
.fi-img--stamp{border-radius:50%}
.fi-img__acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.fi-img__acts small{flex-basis:100%;color:var(--b-muted);font-size:11.5px}

/* البنود */
.fi-items{display:flex;flex-direction:column;gap:10px}
.fi-item{position:relative;display:grid;grid-template-columns:1fr 88px 110px;gap:8px;padding:12px;border:1px solid var(--b-line);border-radius:14px;background:var(--b-soft)}
.fi-item .fi-item__d{grid-column:1/-1}
.fi-item input{min-height:42px!important}
.fi-item__tot{display:flex;flex-direction:column;justify-content:center;font-size:11.5px;color:var(--b-muted);font-weight:700}
.fi-item__tot b{font-size:15px;color:var(--b-ink);direction:ltr;text-align:right}
.fi-item__del{position:absolute;top:6px;inset-inline-end:6px;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#94a3b8;font-size:20px;line-height:1;cursor:pointer}
.fi-item__del:hover{background:#fee2e2;color:#dc2626}
.fi-item .fi-item__d input{padding-inline-end:40px}
.fi-sum{margin-top:12px;border-radius:14px;background:var(--b-primary-soft);padding:10px 14px;font-size:14px}
.fi-sum div{display:flex;justify-content:space-between;padding:3px 0}
.fi-sum b{direction:ltr}
.fi-sum .is-grand{font-size:17px;font-weight:900;border-top:1px dashed rgba(70,54,232,.3);margin-top:4px;padding-top:7px}

/* القوالب والألوان */
.fi-tpls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fi-tpl{border:2px solid var(--b-line);border-radius:12px;background:#fff;padding:6px;cursor:pointer;font:inherit;text-align:center}
.fi-tpl small{display:block;font-size:10.5px;font-weight:700;margin-top:4px;color:var(--b-ink2);line-height:1.3}
.fi-tpl.is-on{border-color:var(--b-primary);box-shadow:0 0 0 3px rgba(70,54,232,.15)}
.tpl-mini{--c:var(--fi-c1,#1e40af);height:52px;border-radius:7px;border:1px solid #e2e8f0;overflow:hidden;display:flex;flex-direction:column;gap:3px;padding:6px;background:#fff}
.tpl-mini span{display:block;height:6px;border-radius:3px;background:#e2e8f0}
.tpl-mini span:first-child{height:12px}
.tpl-mini-1 span:first-child{background:var(--c);width:50%}
.tpl-mini-2{padding:0}
.tpl-mini-2 span:first-child{background:linear-gradient(135deg,var(--c),var(--fi-c2,#3b82f6));height:18px;width:100%;border-radius:0;margin-bottom:3px}
.tpl-mini-2 span:not(:first-child){margin:0 6px}
.tpl-mini-3{border-top:4px solid var(--c)}
.tpl-mini-3 span:first-child{background:var(--c);width:40%;height:9px}
.tpl-mini-4{position:relative;padding-inline-start:13px}
.tpl-mini-4::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:#0c0a09}
.tpl-mini-4 span{background:transparent;border-bottom:1px solid #e7e5e4;border-radius:0;height:7px}
.tpl-mini-4 span:first-child{height:11px;width:55%;border-bottom:2px solid #0c0a09}
.tpl-mini-4 span:last-child{background:#0c0a09;height:9px;width:60%;margin-inline-start:auto;border:0}
.tpl-mini-5{border-top:4px solid var(--c)}
.tpl-mini-5 span{background:transparent;border-bottom:1px solid #e2e8f0;border-radius:0;height:7px}
.tpl-mini-5 span:first-child{height:11px;width:60%;border-bottom:1.5px solid #0f172a}
.tpl-mini-5 span:last-child{border-bottom:3px solid var(--c);width:45%;margin-inline-start:auto}
.tpl-mini-6{border:1.5px solid var(--c)}
.tpl-mini-6 span{background:#fff;border:1px dashed #94a3b8;border-radius:0;height:6px}
.tpl-mini-6 span:first-child{height:10px;width:55%;background:var(--c);border:0}
.tpl-mini-7{border:2px solid #0c0a09;border-radius:0;box-shadow:3px 3px 0 0 #0c0a09;padding:0;background:#fffdf8}
.tpl-mini-7 span{background:#ded9cf;border-radius:0;height:6px;margin:0 5px}
.tpl-mini-7 span:first-child{height:15px;width:100%;margin:0 0 3px;background:var(--c);border-bottom:2px solid #0c0a09}
.tpl-mini-7 span:last-child{background:#0c0a09;width:55%;margin-inline-start:auto;margin-inline-end:5px;height:8px}
.tpl-mini-8{align-items:center;padding:5px 10px}
.tpl-mini-8 span{background:transparent;border-bottom:2px dotted #cbd5e1;border-radius:0;height:6px;width:100%}
.tpl-mini-8 span:first-child{height:11px;width:26px;border-radius:50%;background:var(--c);border:0}
.tpl-mini-8 span:last-child{background:var(--c);border:0;border-radius:4px;height:8px;width:70%}
.fi-presets{display:flex;flex-wrap:wrap;gap:8px}
.fi-preset{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--b-line);cursor:pointer}
.fi-preset.is-on{box-shadow:0 0 0 2px var(--b-ink)}
.fi-color{display:flex;align-items:center;gap:8px;border:1.5px solid var(--b-line);border-radius:12px;padding:4px 8px;min-height:44px;background:#fff}
.fi-color input{width:38px;height:32px;border:0;padding:0;background:none;cursor:pointer}
.fi-color code{font-size:13px;color:var(--b-ink2)}
.fi-switch{flex-direction:row!important;align-items:center;gap:10px!important;flex-wrap:wrap;cursor:pointer;background:var(--b-soft);border-radius:12px;padding:10px 12px;font-size:14px!important}
.fi-switch input{position:absolute;opacity:0;width:1px;height:1px}
.fi-switch>span{position:relative;flex:0 0 42px;height:24px;border-radius:999px;background:#cbd5e1;transition:background .2s}
.fi-switch>span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:inset-inline-start .2s}
.fi-switch input:checked+span{background:var(--b-primary)}
.fi-switch input:checked+span::after{inset-inline-start:21px}
.fi-switch input:focus-visible+span{outline:3px solid rgba(70,54,232,.45);outline-offset:2px}
.fi-switch b{font-weight:800;color:var(--b-ink)}
.fi-switch small{flex-basis:100%;padding-inline-start:52px;margin-top:-4px;color:var(--b-muted);font-weight:600;font-size:12px}

/* الأزرار */
.fi-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 16px;border-radius:13px;border:1.5px solid var(--b-line);background:#fff;color:var(--b-ink);font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s;text-decoration:none}
.fi-btn:hover{box-shadow:var(--b-shadow)}
.fi-btn:active{transform:scale(.98)}
.fi-btn svg{width:18px;height:18px;flex:0 0 18px}
.fi-btn--primary{background:var(--b-primary);border-color:var(--b-primary);color:#fff}
.fi-btn--primary:hover{background:var(--b-primary-600)}
.fi-btn--wa{background:#16a34a;border-color:#16a34a;color:#fff}
.fi-btn--wa:hover{background:#15803d}
.fi-btn--sm{min-height:38px;padding:0 12px;font-size:13px;border-radius:11px}
.fi-btn--ghost{background:transparent}
.fi-btn--add{width:100%;margin-top:10px;border-style:dashed;color:var(--b-primary)}
.fi-btn[disabled]{opacity:.6;pointer-events:none}
.fi-btn.is-busy svg{animation:fiSpin 1s linear infinite}
@keyframes fiSpin{to{transform:rotate(360deg)}}

/* المعاينة */
.fi-preview{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
.fi-preview__bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fi-saved{font-size:12.5px;font-weight:700;color:var(--b-muted)}
.fi-saved::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-inline-end:6px;vertical-align:middle}
.fi-preview,.fi-stage{min-width:0}
.fi-stage{background:#e9edf4;border-radius:20px;padding:16px;overflow:hidden}
.fi-paper{width:794px;transform-origin:top right;background:#fff;box-shadow:0 10px 30px -12px rgba(15,23,42,.35);border-radius:4px;padding:34px 36px}
.fi-paper .invoice-doc{font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif}
.fi-actions{display:flex;flex-wrap:wrap;gap:8px}
.fi-actions--main .fi-btn{flex:1 1 140px}
.fi-msg{border-radius:12px;padding:10px 14px;font-size:14px;font-weight:700;background:#fef3c7;color:#92400e}
.fi-msg.is-ok{background:#dcfce7;color:#166534}
.fi-msg.is-err{background:#fee2e2;color:#991b1b}

/* المشاركة */
.fi-share{background:#fff;border:1.5px solid #bbf7d0;border-radius:18px;padding:14px;box-shadow:var(--b-shadow)}
.fi-share__t{margin:0 0 8px;font-weight:900}
.fi-share__t small{display:block;font-weight:600;color:var(--b-muted);font-size:12px}
.fi-share__link{display:flex;gap:8px}
.fi-share__link input{flex:1;min-width:0;min-height:42px;border:1.5px solid var(--b-line);border-radius:11px;padding:0 10px;font:inherit;font-size:13.5px;background:var(--b-soft)}
.fi-social{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.fi-s{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border-radius:12px;font-size:12px;font-weight:800;color:#fff!important;cursor:pointer;border:0;font-family:inherit;text-decoration:none}
.fi-s svg{width:20px;height:20px}
.fi-s--wa{background:#25D366}.fi-s--tg{background:#229ED9}.fi-s--vb{background:#7360F2}.fi-s--fb{background:#1877F2}.fi-s--x{background:#0f172a}.fi-s--mail{background:#64748b}.fi-s--more{background:var(--b-primary)}
.fi-share__n{margin:10px 0 0;font-size:12px;color:var(--b-muted)}
.fi-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fi-links li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--b-line);border-radius:12px;padding:8px 10px;font-size:13px}
.fi-links li a{flex:1;min-width:0;color:var(--b-primary);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-links li small{color:var(--b-muted);white-space:nowrap}
.fi-links li button{border:0;background:none;color:#94a3b8;cursor:pointer;font:inherit;font-size:12px;font-weight:800;min-height:32px;padding:0 6px;border-radius:8px}
.fi-links li button:hover{background:#fee2e2;color:#dc2626}

/* الختم المرفوع فوق توقيع المسؤول */
/* خانات التوقيع في كل القوالب (النظام يُظهرها في 5–8 فقط) + الختم المرفوع فوق خط توقيع المسؤول */
.invoice-doc .invoice-doc__sign.fi-sign{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:26px}
.invoice-doc .invoice-doc__sign.fi-sign.has-stamp{margin-top:84px}
.invoice-doc__sign-box{position:relative}
.fi-stamp-img{position:absolute;inset-inline-start:50%;top:-74px;transform:translateX(50%) rotate(-8deg);max-width:150px;max-height:110px;object-fit:contain;opacity:.92;pointer-events:none;mix-blend-mode:multiply}
.fi-ph{color:#94a3b8!important;font-style:italic}

/* المحتوى التسويقي */
.fi-seo{padding-top:20px}
.fi-steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0;margin:0 0 34px}
.fi-steps li{counter-increment:s;background:#fff;border:1px solid var(--b-line);border-radius:18px;padding:16px;box-shadow:var(--b-shadow)}
.fi-steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--b-primary);color:#fff;font-weight:900;margin-bottom:10px}
.fi-steps b{display:block;font-size:16px}
.fi-steps span,.fi-feats span{color:var(--b-muted);font-size:14px}
.fi-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.fi-feats div{background:var(--b-soft);border-radius:18px;padding:16px}
.fi-feats b{display:block;font-size:16px;margin-bottom:4px}
.fi-upsell{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(150deg,#4636E8,#6D5EF3 55%,#12B886);color:#fff;border-radius:24px;padding:24px 26px;margin-bottom:34px}
.fi-upsell h2{margin:0 0 6px;font-size:22px}
.fi-upsell p{margin:0;opacity:.9;max-width:720px}
.fi-faq{max-width:none;margin-bottom:34px}
.fi-faq details{border:1px solid var(--b-line);border-radius:14px;padding:0 16px;margin-bottom:10px;background:#fff}
.fi-faq summary{cursor:pointer;font-weight:800;padding:14px 0;min-height:48px}
.fi-faq details p{margin:0 0 14px;color:var(--b-ink2)}

/* صفحة الرابط المشترك */
.fi-viewbar{background:var(--b-soft);border-bottom:1px solid var(--b-line);padding:18px 0}
.fi-viewbar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.fi-viewbar__t b{display:block;font-size:19px}
.fi-viewbar__t small{color:var(--b-muted)}
.fi-viewdoc .bl-container{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.fi-cta{position:sticky;top:90px}

/* الطباعة والتصوير */
#fiPrintRoot,#fiCapture{display:none}
.fi-capture{position:fixed;top:0;left:-10000px;width:794px;background:#fff;padding:34px 36px;z-index:-1}
/* html2canvas يرسم النص المتباعد حرفًا حرفًا فتنفصل الحروف العربية ⇒ لا تباعد في نسخة الـ PDF */
.fi-capture,.fi-capture *{letter-spacing:0!important;word-spacing:normal!important}
.fi-capture .pw-badge b{background:none;-webkit-text-fill-color:#2f7de9;color:#2f7de9}
.fi-capture .pw-badge::after{display:none}
@media print{
  @page{size:A4;margin:12mm}
  body.fi-printing>*:not(#fiPrintRoot){display:none!important}
  body.fi-printing #fiPrintRoot{display:block!important}
  body.fi-printing{background:#fff!important}
  #fiPrintRoot *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  #fiPrintRoot .invoice-doc__head,#fiPrintRoot .invoice-doc__meta,#fiPrintRoot .invoice-doc__summary,#fiPrintRoot .invoice-doc__items tr{break-inside:avoid}
  #fiPrintRoot .invoice-doc__items thead{display:table-header-group}
}

@media(max-width:1023px){
  .fi-grid{grid-template-columns:minmax(0,1fr)}
  .fi-tabs{display:flex;position:sticky;top:64px;z-index:20;gap:6px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:8px 0;margin-bottom:10px}
  .fi-tabs button{flex:1;min-height:46px;border:1.5px solid var(--b-line);border-radius:13px;background:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
  .fi-tabs button.is-on{background:var(--b-ink);color:#fff;border-color:var(--b-ink)}
  .fi-tool[data-pane=edit] .fi-preview>:not(.fi-actions--main):not(.fi-share):not(.fi-msg){display:none}
  .fi-tool[data-pane=edit] .fi-preview{position:static}
  .fi-tool[data-pane=preview] .fi-form{display:none}
  .fi-tool[data-pane=edit] .fi-actions--main{position:sticky;bottom:10px;z-index:15;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);padding:8px;border-radius:16px;box-shadow:0 10px 30px -10px rgba(15,23,42,.35)}
  .fi-preview{position:static}
  .fi-steps{grid-template-columns:repeat(2,1fr)}
  .fi-feats{grid-template-columns:repeat(2,1fr)}
  .fi-viewdoc .bl-container{grid-template-columns:1fr}
  .fi-cta{position:static}
}
@media(max-width:620px){
  .fi-tool{padding:0 12px 24px}
  .fi-row{grid-template-columns:1fr}
  .fi-tpls{grid-template-columns:repeat(4,1fr);gap:6px}
  .fi-tpl small{display:none}
  .fi-stage{padding:8px;border-radius:14px}
  .fi-item{grid-template-columns:1fr 1fr}
  .fi-item__tot{grid-column:1/-1;flex-direction:row;justify-content:space-between}
  .fi-steps,.fi-feats{grid-template-columns:1fr}
  .fi-social{grid-template-columns:repeat(4,1fr)}
  .fi-actions--main .fi-btn{flex:1 1 45%;padding:0 10px;font-size:13.5px}
}