@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800&display=swap');

/* W-SULIMAN — Pixel-aligned front-end */

:root{
  --orange:#ff8b16;
  --orange-dark:#ef7b00;
  --dark:#343a40;
  --dark2:#41484e;
  --text:#111827;
  --muted:#7c8998;
  --border:#cfd8e3;
  --surface:#ffffff;
  --bg:#f3f6f8;
  --danger:#d92d20;
  --success:#15803d;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  font-family:"Alexandria", Tahoma, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 11% 32%,rgba(255,139,22,.045),transparent 27%),
    radial-gradient(circle at 89% 75%,rgba(52,58,64,.045),transparent 25%),
    var(--bg);
  line-height:1.9;
  overflow-x:hidden;
}

button,input,textarea{font:inherit}

/* Header — exact composition from approved reference */
.hero{
  position:relative;
  height:130px;
  min-height:130px;
  overflow:hidden;
  background:#343a40;
}

/*
  The white shape starts around y=48 in the center and falls toward
  the two sides, exactly like the supplied reference. The orange line
  follows the same arc.
*/
.hero__curve{
  position:absolute;
  z-index:1;
  left:-8%;
  width:116%;
  height:105px;
  top:49px;
  background:#f3f6f8;
  border-top:5px solid #ff8b16;
  border-radius:50% 50% 0 0 / 34px 34px 0 0;
}

/* white hairline above the orange arc */
.hero__curve::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-9px;
  height:4px;
  background:#fff;
  border-radius:50% 50% 0 0 / 34px 34px 0 0;
}

.hero__inner{
  position:relative;
  z-index:3;
  width:min(1150px,100%);
  height:130px;
  margin:0 auto;
}

/* Logo hangs from the top and overlaps the curved white area */
.logo-card{
  position:absolute;
  z-index:6;
  left:44px;
  top:0;
  width:99px;
  height:111px;
  padding:4px 5px 6px;
  display:grid;
  place-items:center;
  background:#fff;
  border-radius:0 0 9px 9px;
  box-shadow:0 3px 6px rgba(0,0,0,.36);
  overflow:hidden;
}

.logo-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Text sits on the white curved portion, not on the dark background */
.brand{
  position:absolute;
  z-index:5;
  top:67px;
  right:76px;
  width:310px;
  padding:0;
  color:#111827;
  text-align:center;
  line-height:1.05;
}

.brand h1{
  margin:0;
  color:#111827;
  font-size:13px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.2px;
  white-space:nowrap;
}

.brand p{
  margin:1px 0 0;
  color:#111827;
  font-size:9px;
  line-height:1.1;
  font-weight:700;
  white-space:nowrap;
}

/* Main paper */
.page-shell{
  position:relative;
  z-index:3;
  width:min(1100px,calc(100% - 28px));
  margin:-5px auto 35px;
}

.paper{
  background:rgba(255,255,255,.99);
  border:1px solid #dfe5ec;
  border-radius:17px;
  box-shadow:0 25px 65px rgba(31,41,55,.13);
  padding:35px 49px 30px;
}

.paper-head{
  position:relative;
  min-height:122px;
}

.paper-head h2{
  margin:0;
  padding-top:0;
  text-align:center;
  font-size:40px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.6px;
}

.request-meta{
  position:absolute;
  top:0;
  left:0;
  width:245px;
  direction:rtl;
}

.meta-line{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  font-size:14px;
}

.meta-line strong{font-weight:900}

.meta-line input{
  width:100%;
  height:38px;
  padding:0 8px;
  border:1px solid #c8d3df;
  border-radius:7px;
  background:#fff;
  color:#1f2937;
  outline:none;
  direction:ltr;
}

/* Letter */
.letter{
  max-width:930px;
  margin:auto;
  font-size:19px;
  line-height:2.08;
  font-weight:500;
}

.letter p{
  margin:0 0 17px;
}

.letter p:nth-child(3){
  margin-top:23px;
}

.letter strong{font-weight:900}

/* Charity request: add the same visual paragraph gap after the first subject line */
.charity-subject-gap{
  display:block;
  margin-top:18px;
}


.inline-value{
  display:inline-block;
  min-width:120px;
  padding:0 5px;
  margin:0 4px;
  text-align:center;
  font-weight:900;
  white-space:nowrap;
}

.inline-value--wide{
  min-width:315px;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}

.section-separator{
  height:1px;
  margin:26px 0 22px;
  background:#d8e0e8;
}

/* Form layout */
.form-grid{
  display:grid;
  grid-template-columns:minmax(270px,.8fr) minmax(0,1.45fr);
  gap:37px;
  align-items:start;
}

.form-fields{
  grid-column:2;
  display:grid;
  gap:14px;
}

.upload-side{
  grid-column:1;
  grid-row:1;
  display:grid;
  gap:25px;
}

.field-group label,
.upload-title{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  line-height:1.5;
  font-weight:900;
}

.field-group label span,
.upload-title span,
.consent-text b{
  color:var(--danger);
}

.field-group input,
.field-group textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:7px;
  background:#fbfcfe;
  color:#18212b;
  outline:none;
  transition:.18s ease;
}

.field-group input{
  height:45px;
  padding:0 13px;
}

.field-group textarea{
  min-height:112px;
  padding:11px 13px;
  resize:vertical;
}

.field-group input::placeholder,
.field-group textarea::placeholder{
  color:#99a5b4;
}

.field-group input:focus,
.field-group textarea:focus,
.meta-line input:focus{
  border-color:var(--orange);
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,139,22,.12);
}

.phone-box,
.money-box{
  display:flex;
  direction:ltr;
}

.phone-box span,
.money-box span{
  min-width:66px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  background:#edf2f7;
  color:#334155;
  font-size:13px;
  font-weight:800;
}

.phone-box span{
  border-radius:7px 0 0 7px;
}

.phone-box input{
  border-left:0;
  border-radius:0 7px 7px 0;
}

.money-box input{
  direction:rtl;
  border-right:0;
  border-radius:7px 0 0 7px;
}

.money-box span{
  border-radius:0 7px 7px 0;
}

.counter{
  margin-top:3px;
  direction:ltr;
  text-align:left;
  color:#8d98a5;
  font-size:10px;
}

/* Upload */
.upload-title{
  text-align:center;
  font-size:15px;
}

.upload-area{
  min-height:145px;
  padding:15px;
  border:1.5px dashed #9badc0;
  border-radius:8px;
  background:#fbfcfe;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  cursor:pointer;
  transition:.18s ease;
}

.upload-area:hover{
  border-color:var(--orange);
  background:#fff9f2;
}

.upload-circle{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  margin-bottom:3px;
  border:2px solid #52657a;
  border-radius:50%;
  color:#52657a;
  font-size:27px;
  line-height:1;
}

.upload-area strong{
  font-size:14px;
}

.upload-area small{
  direction:ltr;
  color:#7f8b99;
  font-size:10px;
}

.file-name{
  margin-top:5px;
  color:#8a96a3;
  text-align:center;
  font-size:10px;
  word-break:break-word;
}

.signature-preview{
  margin-top:8px;
  padding:7px;
  border:1px solid #dfe5ec;
  border-radius:7px;
  background:#fff;
  text-align:center;
}

.signature-preview img{
  max-width:100%;
  max-height:105px;
  object-fit:contain;
}

/* Consent */
.consent{
  margin-top:28px;
  padding:13px 16px;
  border:1px solid #d8e0e8;
  border-radius:8px;
  background:#fbfcfd;
}

.consent label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:13px;
  line-height:1.9;
  font-weight:800;
}

.consent input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.check-ui{
  flex:0 0 25px;
  width:25px;
  height:25px;
  margin-top:1px;
  border:1.8px solid #7f8fa2;
  border-radius:6px;
  background:#fff;
  position:relative;
}

.consent input:checked + .check-ui{
  border-color:var(--orange);
  background:var(--orange);
}

.consent input:checked + .check-ui::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:16px;
  font-weight:900;
}

.consent-text{
  flex:1;
}

/* Submit */
.submit-area{
  margin-top:19px;
  text-align:center;
}

.submit-button{
  min-width:min(360px,100%);
  height:52px;
  border:0;
  border-radius:999px;
  background:linear-gradient(180deg,#ff9a27,#f57f00);
  color:#fff;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 9px 23px rgba(245,127,0,.24);
  transition:.18s ease;
}

.submit-button:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 29px rgba(245,127,0,.31);
}

.send-arrow{
  display:inline-block;
  margin-right:7px;
  transform:rotate(180deg);
}

/* Validation */
.field-error{
  display:none;
  margin-top:4px;
  color:var(--danger);
  font-size:10px;
  font-weight:800;
}

.has-error .field-error{display:block}
.is-invalid{border-color:var(--danger)!important}

/* Footer */
.footer{
  border-top:4px solid var(--orange);
  background:linear-gradient(115deg,#30363b,#41484f);
  color:#fff;
  padding:18px 0;
}

.footer__inner{
  width:min(1100px,calc(100% - 28px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.footer-item{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
}

.footer-item.location div{
  display:flex;
  flex-direction:column;
}

.footer-item strong{
  font-size:12px;
}

.footer-item small{
  font-size:9px;
  opacity:.82;
  direction:ltr;
}

.footer-icon{
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#3a4249;
  font-size:12px;
  font-weight:900;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translate(-50%,20px);
  min-width:min(420px,calc(100% - 30px));
  padding:12px 16px;
  border-radius:8px;
  background:#232a30;
  color:#fff;
  text-align:center;
  font-size:12px;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  z-index:100;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}

.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.error{background:var(--danger)}
.toast.success{background:var(--success)}

/* Responsive */
@media (max-width:950px){
  .hero{min-height:128px}

  .hero__inner{
    width:min(100% - 20px,900px);
    height:128px;
  }

  .logo-card{
    left:10px;
    width:145px;
    height:108px;
  }

  .brand{
    right:18px;
    top:46px;
    width:calc(100% - 195px);
    padding:0;
  }

  .brand h1{font-size:19px}
  .brand p{font-size:13px}

  .paper{
    padding:31px 32px 28px;
  }

  .paper-head{
    min-height:auto;
  }

  .request-meta{
    position:static;
    width:100%;
    max-width:440px;
    margin:20px auto 25px;
  }

  .paper-head h2{
    font-size:34px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-fields,
  .upload-side{
    grid-column:auto;
    grid-row:auto;
  }

  .upload-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
    order:-1;
  }
}

@media (max-width:650px){
  .hero{
    min-height:118px;
  }

  .hero__inner{
    width:100%;
    height:118px;
  }

  .hero__curve{
    bottom:-55px;
    height:92px;
    border-top-width:4px;
  }

  .logo-card{
    left:12px;
    top:0;
    transform:none;
    width:112px;
    height:88px;
    border-radius:0 0 9px 9px;
  }

  .brand{
    right:10px;
    top:40px;
    width:calc(100% - 145px);
    padding:0;
  }

  .brand h1{
    font-size:13px;
    line-height:1.25;
  }

  .brand p{
    font-size:9px;
    line-height:1.25;
  }

  .page-shell{
    width:calc(100% - 14px);
    margin-top:-9px;
  }

  .paper{
    padding:22px 15px 23px;
    border-radius:12px;
  }

  .paper-head h2{
    font-size:28px;
  }

  .letter{
    font-size:15px;
    line-height:2;
  }

  .inline-value{
    min-width:90px;
  }

  .inline-value--wide{
    min-width:180px;
  }

  .upload-side{
    grid-template-columns:1fr;
  }

  .consent label{
    font-size:12px;
  }

  .footer__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-item{
    width:100%;
  }
}

@media print{
  body{background:#fff}
  .hero,.footer,.submit-area,.toast{display:none!important}
  .page-shell{width:100%;margin:0}
  .paper{box-shadow:none;border:0;border-radius:0;padding:20px 24px}
}


/* =========================================================
   FINAL HEADER LOCK — do not override above this point
   ========================================================= */
@media (min-width:651px){
  .hero{height:130px!important;min-height:130px!important}
  .hero__inner{height:130px!important;width:min(1150px,100%)!important;padding:0!important}
  .hero__curve{
    left:-8%!important;
    width:116%!important;
    height:105px!important;
    top:49px!important;
    bottom:auto!important;
    border-top:5px solid #ff8b16!important;
    border-radius:50% 50% 0 0 / 34px 34px 0 0!important;
  }
  .logo-card{
    left:44px!important;
    top:0!important;
    width:99px!important;
    height:111px!important;
    transform:none!important;
  }
  .brand{
    top:67px!important;
    right:76px!important;
    width:310px!important;
    padding:0!important;
    margin:0!important;
  }
  .brand h1{font-size:13px!important;line-height:1.15!important}
  .brand p{font-size:9px!important;line-height:1.1!important}
}

@media (max-width:650px){
  .hero{height:118px!important;min-height:118px!important}
  .hero__inner{height:118px!important;width:100%!important;padding:0!important}
  .hero__curve{
    left:-12%!important;
    width:124%!important;
    height:92px!important;
    top:45px!important;
    bottom:auto!important;
    border-top:4px solid #ff8b16!important;
    border-radius:50% 50% 0 0 / 28px 28px 0 0!important;
  }
  .logo-card{
    left:18px!important;
    top:0!important;
    width:91px!important;
    height:101px!important;
    transform:none!important;
  }
  .brand{
    top:62px!important;
    right:18px!important;
    width:255px!important;
    padding:0!important;
    margin:0!important;
  }
  .brand h1{font-size:11px!important;line-height:1.15!important}
  .brand p{font-size:8px!important;line-height:1.1!important}
}


/* ===== APPROVED HEADER — locked to the supplied design ===== */
.hero{
  position:relative!important;
  height:160px!important;
  min-height:160px!important;
  overflow:hidden!important;
  background:#343a40!important;
}
.hero__curve{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:160px!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.hero__curve .wave-fill{fill:#f3f6f8;stroke:none}
.hero__curve .wave-white{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:round}
.hero__curve .wave-orange{fill:none;stroke:#ff8b16;stroke-width:6;stroke-linecap:round}
.hero__inner{
  position:relative!important;
  z-index:3!important;
  width:min(1024px,100%)!important;
  height:160px!important;
  min-height:160px!important;
  margin:0 auto!important;
  padding:0!important;
}
.logo-card{
  position:absolute!important;
  z-index:7!important;
  left:82px!important;
  top:0!important;
  width:192px!important;
  height:153px!important;
  padding:7px!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  border-radius:0 0 14px 14px!important;
  box-shadow:0 5px 8px rgba(0,0,0,.38)!important;
  transform:none!important;
  overflow:hidden!important;
}
.logo-card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.brand{
  position:absolute!important;
  z-index:6!important;
  top:72px!important;
  right:52px!important;
  width:455px!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  color:#111827!important;
  transform:none!important;
}
.brand h1{
  margin:0!important;
  color:#111827!important;
  font-size:25px!important;
  line-height:1.18!important;
  font-weight:900!important;
  letter-spacing:-.5px!important;
  white-space:nowrap!important;
}
.brand p{
  margin:1px 0 0!important;
  color:#111827!important;
  font-size:18px!important;
  line-height:1.15!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.page-shell{margin-top:-1px!important}

@media(max-width:800px){
  .hero{height:132px!important;min-height:132px!important}
  .hero__curve{height:132px!important}
  .hero__inner{height:132px!important;min-height:132px!important}
  .logo-card{left:5vw!important;width:135px!important;height:118px!important}
  .brand{right:4vw!important;top:63px!important;width:47vw!important}
  .brand h1{font-size:15px!important}
  .brand p{font-size:10px!important}
}
@media(max-width:520px){
  .logo-card{left:14px!important;width:105px!important;height:96px!important}
  .brand{right:10px!important;top:59px!important;width:58vw!important}
  .brand h1{font-size:11px!important}
  .brand p{font-size:8px!important}
}
\n\n/* ===== HEADER COLOR LOCK — approved reference ===== */
.hero{
  background:#343a40!important;
}
.hero__curve{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}
.hero__curve::before{
  display:none!important;
  content:none!important;
}
.hero__curve .wave-fill{
  fill:#ffffff!important;
  stroke:none!important;
}
.hero__curve .wave-white{
  fill:none!important;
  stroke:#ffffff!important;
  stroke-width:14!important;
  stroke-linecap:round!important;
}
.hero__curve .wave-orange{
  fill:none!important;
  stroke:#ff8614!important;
  stroke-width:6!important;
  stroke-linecap:round!important;
}
.brand,.brand h1,.brand p{
  color:#111111!important;
}


/* ===== Typography lock — reference style ===== */
html,
body,
button,
input,
textarea,
select,
label,
.brand,
.brand h1,
.brand p,
.paper,
.letter,
.request-meta,
.field-group,
.upload-block,
.consent,
.footer{
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
}

body{
  font-weight:400;
}

.paper-head h2{
  font-weight:700 !important;
  letter-spacing:0 !important;
}

.letter{
  font-weight:400 !important;
}

.letter strong,
.field-group label,
.upload-title,
.consent label,
.meta-line strong{
  font-weight:600 !important;
}

.brand h1{
  font-weight:700 !important;
  letter-spacing:0 !important;
}

.brand p{
  font-weight:500 !important;
}

input::placeholder,
textarea::placeholder{
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
  font-weight:300;
}

/* ===== Letter layout lock — matched to supplied PDF reference ===== */
.letter{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:0 8px;
  direction:rtl;
  text-align:right;
  font-size:20px;
  line-height:2.05;
  font-weight:500 !important;
  color:#080808;
}

.letter p{
  margin:0 0 18px;
  padding:0;
  text-align:right;
}

/* recipient and greeting are visually separated like the original letter */
.letter p:nth-child(1){
  margin-bottom:14px;
}

.letter p:nth-child(2){
  margin-bottom:20px;
}

/* subject line */
.letter p:nth-child(3){
  margin-top:0;
  margin-bottom:18px;
}

/* main explanatory paragraph */
.letter p:nth-child(4){
  margin-bottom:16px;
}

.letter strong{
  font-weight:700 !important;
}

.inline-value{
  display:inline-block;
  min-width:128px;
  margin:0 5px;
  padding:0 5px;
  direction:rtl;
  text-align:center;
  font-weight:700 !important;
  white-space:nowrap;
  vertical-align:baseline;
}

.inline-value--wide{
  min-width:330px;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}

@media (min-width:951px){
  .paper-head{min-height:112px;}
  .letter{max-width:900px;}
}

@media (max-width:650px){
  .letter{
    padding:0;
    font-size:15px;
    line-height:2;
  }
  .inline-value{min-width:92px;margin-inline:2px;}
  .inline-value--wide{min-width:185px;}
}

/* ===== Inline placeholders — tight spacing like the PDF reference ===== */
.letter .inline-value{
  display:inline !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  margin:0 1px !important;
  padding:0 !important;
  white-space:nowrap !important;
  vertical-align:baseline !important;
  unicode-bidi:isolate;
}

.letter .inline-value--wide{
  display:inline !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  margin:0 1px !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
}

/* keep words, brackets and placeholders visually attached */
.letter p{
  word-spacing:0 !important;
}

/* === Desktop column placement: reference layout ===
   Attachments LEFT / form fields RIGHT.
   Only this layout rule is changed; children remain RTL. */
@media (min-width:951px){
  .form-grid{
    direction:ltr;
    grid-template-columns:minmax(270px,.8fr) minmax(0,1.45fr);
  }

  .upload-side{
    grid-column:1;
    grid-row:1;
    direction:rtl;
  }

  .form-fields{
    grid-column:2;
    grid-row:1;
    direction:rtl;
  }
}


/* Header brand vertical adjustment only */
@media (min-width:651px){
  .brand{
    transform:translateY(12px) !important;
  }
}


/* Checkbox checkmark — exact centering only */
.check-ui{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}

.consent input:checked + .check-ui::after{
  content:"✓" !important;
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  transform:none !important;
}


/* =========================================================
   SIGNATURE PREVIEW INSIDE UPLOAD CARD
   ========================================================= */
.upload-block .upload-area[for="signature"]{
  position:relative !important;
  overflow:hidden !important;
}

.signature-card-preview{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:#fff;
  border-radius:inherit;
}

.signature-card-preview[hidden]{
  display:none !important;
}

.signature-card-preview img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.signature-remove{
  position:absolute;
  top:8px;
  right:8px;
  z-index:12;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#d92d20;
  color:#fff;
  font-family:Arial,sans-serif !important;
  font-size:23px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.18);
}

.signature-remove:hover{
  background:#b42318;
}


/* =========================================================
   DOCUMENTS / ATTACHMENTS PREVIEW INSIDE UPLOAD CARD
   ========================================================= */
.upload-area[for="attachments"]{
  position:relative !important;
  overflow:hidden !important;
}

.documents-card-preview{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:#fff;
  border-radius:inherit;
}

.documents-card-preview[hidden]{
  display:none !important;
}

.documents-preview-content{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.documents-preview-content img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.documents-file-box{
  max-width:88%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  color:#24364b;
}

.documents-file-icon{
  width:48px;
  height:58px;
  border:2px solid #526a84;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  background:#f8fafc;
}

.documents-file-name{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  direction:ltr;
}

.documents-remove{
  position:absolute;
  top:8px;
  right:8px;
  z-index:12;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#d92d20;
  color:#fff;
  font-family:Arial,sans-serif !important;
  font-size:23px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.18);
}

.documents-remove:hover{
  background:#b42318;
}


/* =========================================================
   MOBILE ONLY — header brand text spacing
   Desktop/tablet styles remain unchanged
   ========================================================= */
@media (max-width:650px){
  .brand{
    top:72px !important;
    transform:none !important;
  }
}


/* =========================================================
   MOBILE ONLY — move header institution text down + left
   Desktop remains exactly unchanged.
   ========================================================= */
@media (max-width:650px){
  .brand{
    top:82px !important;
    right:32px !important;
    transform:translateX(-14px) !important;
  }
}


/* =========================================================
   MOBILE ONLY — fields first, upload cards after reason field
   Desktop remains exactly unchanged.
   ========================================================= */
@media (max-width:650px){
  .form-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .form-fields{
    order:1 !important;
    width:100% !important;
  }

  .upload-side{
    order:2 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    margin-top:24px !important;
  }
}


/* =========================================================
   MOBILE ONLY — compact date row aligned with request number
   Desktop remains unchanged.
   ========================================================= */
@media (max-width:650px){
  .request-meta{
    width:100% !important;
    max-width:none !important;
  }

  .request-meta .meta-line{
    display:grid !important;
    grid-template-columns:auto 230px !important;
    justify-content:end !important;
    align-items:center !important;
    gap:10px !important;
  }

  .request-meta .meta-line input[type="date"]{
    width:230px !important;
    max-width:230px !important;
  }
}

@media (max-width:420px){
  .request-meta .meta-line{
    grid-template-columns:auto 205px !important;
  }

  .request-meta .meta-line input[type="date"]{
    width:205px !important;
    max-width:205px !important;
  }
}


/* =========================================================
   MOBILE ONLY — request number + date block aligned RIGHT
   Desktop remains exactly unchanged.
   ========================================================= */
@media (max-width:650px){
  .request-meta{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    text-align:right !important;
    direction:rtl !important;
  }

  .request-meta .meta-line{
    width:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
    align-self:flex-end !important;
    justify-content:start !important;
    direction:rtl !important;
  }
}

/* =========================================================
   MOBILE ONLY — meta block beside the recipient line
   Desktop remains exactly unchanged.
   ========================================================= */
@media (max-width:650px){
  .paper{
    position:relative !important;
  }

  .paper-head{
    position:relative !important;
  }

  .paper-head .request-meta{
    position:absolute !important;
    top:145px !important;
    left:0 !important;
    right:auto !important;
    width:46% !important;
    max-width:250px !important;
    margin:0 !important;
    align-items:flex-start !important;
    text-align:right !important;
    z-index:2 !important;
  }

  .request-meta .meta-line{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:5px !important;
    white-space:nowrap !important;
  }

  .request-meta .meta-line:first-child{
    justify-content:flex-start !important;
  }

  .request-meta .meta-line input[type="date"]{
    width:145px !important;
    max-width:145px !important;
    min-width:0 !important;
  }

  .letter p:first-child{
    width:55% !important;
    margin-right:0 !important;
    margin-left:0 !important;
    min-height:42px !important;
    text-align:right !important;
  }

  .letter p:nth-child(2){
    margin-top:42px !important;
  }
}

@media (max-width:430px){
  .paper-head .request-meta{
    width:48% !important;
    max-width:205px !important;
  }

  .request-meta .meta-line{
    font-size:11px !important;
    gap:3px !important;
  }

  .request-meta .meta-line input[type="date"]{
    width:122px !important;
    max-width:122px !important;
    font-size:11px !important;
  }

  .letter p:first-child{
    width:51% !important;
  }
}


/* =========================================================
   MOBILE ONLY — request meta TOP RIGHT (corrected)
   Keep desktop exactly unchanged.
   ========================================================= */
@media (max-width:650px){
  .paper{
    position:relative !important;
  }

  .paper-head{
    position:relative !important;
    padding-top:112px !important;
  }

  .paper-head .request-meta{
    position:absolute !important;
    top:18px !important;
    right:0 !important;
    left:auto !important;
    width:290px !important;
    max-width:calc(100% - 8px) !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    text-align:right !important;
    direction:rtl !important;
    z-index:2 !important;
  }

  .request-meta .meta-line{
    width:auto !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    margin-bottom:9px !important;
    white-space:nowrap !important;
    direction:rtl !important;
  }

  .request-meta .meta-line input[type="date"]{
    width:180px !important;
    max-width:180px !important;
    min-width:180px !important;
  }

  /* Restore the letter exactly to its normal mobile flow */
  .letter p:first-child{
    width:auto !important;
    margin-right:0 !important;
    margin-left:0 !important;
    min-height:0 !important;
    text-align:right !important;
  }

  .letter p:nth-child(2){
    margin-top:0 !important;
  }
}

@media (max-width:430px){
  .paper-head{
    padding-top:108px !important;
  }

  .paper-head .request-meta{
    width:270px !important;
    max-width:100% !important;
  }

  .request-meta .meta-line{
    font-size:14px !important;
    gap:7px !important;
  }

  .request-meta .meta-line input[type="date"]{
    width:165px !important;
    max-width:165px !important;
    min-width:165px !important;
    font-size:14px !important;
  }

  .letter p:first-child{
    width:auto !important;
  }
}


/* MOBILE ONLY — push request number/date farther to the RIGHT */
@media (max-width:650px){
  .paper-head .request-meta{
    right:-18px !important;
    left:auto !important;
    align-items:flex-end !important;
    text-align:right !important;
  }
}

@media (max-width:430px){
  .paper-head .request-meta{
    right:-14px !important;
  }
}


/* =========================================================
   MOBILE ONLY — FINAL visual shift of request meta to RIGHT
   ========================================================= */
@media (max-width:650px){
  .paper-head .request-meta{
    right:0 !important;
    left:auto !important;
    transform:translateX(58px) !important;
  }
}

@media (max-width:430px){
  .paper-head .request-meta{
    right:0 !important;
    transform:translateX(50px) !important;
  }
}

@media (max-width: 650px) {
    .paper-head .request-meta .meta-line:first-child {
        position: relative !important;
        left: 54px !important;
        transform: none !important;
    }
}

@media (max-width: 650px) {
    .paper-head h2 {
        position: relative !important;
        top: -16px !important;
    }
}

@media (max-width: 650px) {
    .paper-head .request-meta {
        margin-top: -18px !important;
    }
}

@media (max-width: 650px) {

    .paper-head .request-meta .meta-line:nth-child(2) {
        width: 260px !important;
        max-width: 260px !important;
    }

    .paper-head .request-meta .meta-line:nth-child(2) input[type="date"] {
        width: 130px !important;
        max-width: 130px !important;
        min-width: 0 !important;
        flex: 0 0 130px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 650px) {
    .paper-head .request-meta .meta-line:nth-child(2) {
        position: relative !important;
        right: 30px !important;
    }
}


/* =========================================================
   MODERN CONTACT FOOTER — desktop + mobile
   ========================================================= */
.footer{
  border-top:4px solid #ff8b16 !important;
  background:linear-gradient(115deg,#30363b,#41484f) !important;
  color:#fff !important;
  padding:18px 0 !important;
}

.footer__inner--modern{
  width:min(1100px,calc(100% - 28px)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}

.footer-contact{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:11px !important;
  min-height:58px !important;
  padding:10px 14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.035) !important;
  color:#fff !important;
  text-decoration:none !important;
  transition:.18s ease !important;
}

.footer-contact:hover{
  transform:translateY(-2px) !important;
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(255,139,22,.45) !important;
}

.footer-contact__icon{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#343a40 !important;
  box-shadow:0 4px 12px rgba(0,0,0,.12) !important;
}

.footer-contact__text{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  line-height:1.35 !important;
  text-align:right !important;
}

.footer-contact__text small{
  margin-bottom:2px !important;
  color:rgba(255,255,255,.7) !important;
  font-size:10px !important;
  font-weight:500 !important;
}

.footer-contact__text strong{
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

.footer-contact--whatsapp .footer-contact__icon{
  color:#1f8f55 !important;
}

.footer-contact--email .footer-contact__text strong{
  font-size:12px !important;
}

@media (max-width:700px){
  .footer{
    padding:15px 0 18px !important;
  }

  .footer__inner--modern{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .footer-contact{
    justify-content:flex-start !important;
    min-height:54px !important;
    padding:9px 12px !important;
  }

  .footer-contact__text{
    text-align:right !important;
  }

  .footer-contact__text strong{
    font-size:12px !important;
  }

  .footer-contact--email .footer-contact__text strong{
    font-size:11px !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}


/* Fourth footer card: address */
@media (min-width:701px){
  .footer__inner--modern{
    width:min(1400px,calc(100% - 28px)) !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
  }
}
.footer-contact--address .footer-contact__icon{
  color:#ff8b16 !important;
}


/* =========================================================
   FOOTER FIX — same width as the data form + RTL card content
   Desktop and mobile
   ========================================================= */

/* Footer background stays full width, cards container matches form width */
.footer__inner--modern{
  width: min(1100px, calc(100% - 28px)) !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Desktop: four cards inside the same form-width container */
@media (min-width: 701px){
  .footer__inner--modern{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 14px !important;
  }
}

/* Put icon + all text on the RIGHT side of every card */
.footer-contact{
  direction: rtl !important;
  justify-content: flex-start !important;
  text-align: right !important;
}

.footer-contact__icon{
  order: 0 !important;
  margin: 0 !important;
}

.footer-contact__text{
  order: 1 !important;
  text-align: right !important;
  align-items: flex-start !important;
}

/* Mobile: same page margins, stacked cards */
@media (max-width: 700px){
  .footer__inner--modern{
    width: calc(100% - 28px) !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .footer-contact{
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }
}

.document-title-row{position:relative;width:100%}
.document-title-row .paper-title{margin-left:auto!important;margin-right:auto!important}
.document-actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:8px;z-index:5}
.doc-action{width:40px;height:40px;padding:0;border:1px solid #d6dee7;border-radius:10px;background:#fff;color:#26384c;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s ease}
.doc-action:hover{color:#f57f00;border-color:#ff9a27;background:#fff8f0}
.doc-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.request-preview-modal[hidden]{display:none!important}
.request-preview-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px}
.request-preview-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62)}
.request-preview-dialog{position:relative;z-index:2;width:min(980px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.request-preview-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #e4e9ef;background:#fff}
.request-preview-head h3{margin:0;font-size:17px}
.preview-close{width:34px;height:34px;border:0;border-radius:50%;background:#f2f4f7;font-size:24px;cursor:pointer}
.request-preview-body{padding:18px}
.request-preview-body .document-actions,.request-preview-body .submit-area{display:none!important}
@media(max-width:650px){
  .document-title-row{padding-top:48px}
  .document-actions{top:0;right:0;transform:none;gap:6px}
  .doc-action{width:36px;height:36px}
  .doc-action svg{width:18px;height:18px}
}
@media print{.document-actions,.request-preview-modal{display:none!important}}


/* =========================================================
   CLEAN SINGLE-PAGE PREVIEW
   Shows the letter + entered values only (no editable inputs)
   ========================================================= */
.request-preview-dialog{
  width:min(900px,96vw) !important;
}

.request-preview-body{
  background:#eef2f5 !important;
  padding:18px !important;
}

.clean-preview-sheet{
  width:min(794px,100%);
  min-height:1060px;
  margin:0 auto;
  padding:34px 42px 30px;
  background:#fff;
  color:#111827;
  border:1px solid #dfe5ec;
  border-radius:10px;
  box-shadow:0 12px 32px rgba(28,39,49,.12);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
}

.clean-preview-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:14px;
  border-bottom:3px solid #ff8b16;
}

.clean-preview-brand img{
  width:92px;
  height:76px;
  object-fit:contain;
}

.clean-preview-brand > div{
  flex:1;
  text-align:center;
}

.clean-preview-brand h4{
  margin:0;
  font-size:19px;
  font-weight:700;
}

.clean-preview-brand p{
  margin:2px 0 0;
  font-size:11px;
  font-weight:500;
  direction:ltr;
}

.clean-preview-top{
  position:relative;
  min-height:105px;
  padding-top:20px;
}

.clean-preview-top h2{
  margin:0;
  text-align:center;
  font-size:32px;
  font-weight:700;
}

.clean-preview-meta{
  position:absolute;
  top:20px;
  right:0;
  display:grid;
  gap:6px;
  font-size:12px;
}

.clean-preview-meta div{
  display:flex;
  gap:7px;
  align-items:center;
}

.clean-preview-letter{
  margin-top:8px;
  font-size:15px;
  line-height:2.05;
  font-weight:400;
}

.clean-preview-letter p{
  margin:0 0 12px;
}

.clean-preview-letter strong{
  font-weight:700;
}

.preview-inline-value{
  display:inline;
  font-weight:700;
  white-space:normal;
}

.clean-preview-data{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid #dce3ea;
  display:grid;
  gap:9px;
}

.preview-data-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.preview-data-row--full{
  grid-template-columns:1fr;
}

.preview-data-row > div{
  min-height:54px;
  padding:8px 11px;
  border:1px solid #dce3ea;
  border-radius:7px;
  background:#fbfcfd;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.preview-data-row span,
.preview-section-label{
  color:#778495;
  font-size:10px;
  font-weight:500;
  margin-bottom:2px;
}

.preview-data-row strong{
  color:#182230;
  font-size:12px;
  font-weight:600;
  overflow-wrap:anywhere;
}

.clean-preview-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.preview-signature-box,
.preview-attachments-box{
  min-height:100px;
  padding:9px 11px;
  border:1px solid #dce3ea;
  border-radius:7px;
  background:#fff;
}

.preview-signature-content{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.preview-signature-content img{
  max-width:100%;
  max-height:70px;
  object-fit:contain;
}

.preview-files-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-content:flex-start;
  padding-top:4px;
}

.preview-file-chip{
  max-width:100%;
  padding:4px 7px;
  border-radius:12px;
  background:#f1f4f7;
  color:#344054;
  font-size:9px;
  direction:ltr;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.preview-empty{
  color:#98a2b3;
  font-size:10px;
}

.clean-preview-consent{
  margin-top:12px;
  padding:9px 11px;
  border:1px solid #dce3ea;
  border-radius:7px;
  background:#fbfcfd;
  font-size:10px;
  line-height:1.8;
  font-weight:600;
}

@media(max-width:650px){
  .request-preview-body{
    padding:8px !important;
  }

  .clean-preview-sheet{
    min-height:auto;
    padding:22px 18px;
  }

  .clean-preview-brand h4{
    font-size:14px;
  }

  .clean-preview-brand p{
    font-size:8px;
  }

  .clean-preview-brand img{
    width:70px;
    height:58px;
  }

  .clean-preview-top h2{
    font-size:25px;
  }

  .clean-preview-meta{
    position:static;
    margin-bottom:15px;
    justify-items:end;
  }

  .clean-preview-letter{
    font-size:12px;
    line-height:1.9;
  }

  .preview-data-row,
  .clean-preview-media{
    grid-template-columns:1fr;
  }
}

/* تصغير حقل التاريخ - الكمبيوتر فقط */
@media (min-width: 651px) {
    input[type="date"] {
        width: 130px !important;
        max-width: 130px !important;
        min-width: 130px !important;
    }
}


.brand p {
    position: relative !important;
    top: 10px !important;
    left: -70px !important;
}

/* الموبايل فقط */
@media (max-width: 650px) {
    .brand p {
        left: -5px !important;
    }
}

.footer-contact--address .footer-contact__text strong {
    font-size: 9px !important;
}


/* =========================================================
   PRINT = SAME CLEAN PREVIEW, ONE A4 PAGE
   ========================================================= */
.print-sheet-host{
  display:none;
}

@page{
  size:A4 portrait;
  margin:6mm;
}

@media print{
  html,
  body{
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  body > *:not(#printSheetHost){
    display:none !important;
  }

  #printSheetHost{
    display:block !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  #printSheetHost .clean-preview-sheet{
    display:block !important;
    width:198mm !important;
    max-width:198mm !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
    padding:7mm 9mm 6mm !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
    color:#111827 !important;
    box-sizing:border-box !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  #printSheetHost .clean-preview-brand{
    gap:10px !important;
    padding-bottom:7px !important;
    border-bottom:2px solid #ff8b16 !important;
  }

  #printSheetHost .clean-preview-brand img{
    width:64px !important;
    height:52px !important;
  }

  #printSheetHost .clean-preview-brand h4{
    font-size:14px !important;
    line-height:1.25 !important;
  }

  #printSheetHost .clean-preview-brand p{
    position:static !important;
    top:auto !important;
    left:auto !important;
    margin:1px 0 0 !important;
    font-size:8px !important;
    line-height:1.2 !important;
  }

  #printSheetHost .clean-preview-top{
    min-height:67px !important;
    padding-top:10px !important;
  }

  #printSheetHost .clean-preview-top h2{
    font-size:23px !important;
    line-height:1.2 !important;
  }

  #printSheetHost .clean-preview-meta{
    top:10px !important;
    gap:3px !important;
    font-size:9px !important;
  }

  #printSheetHost .clean-preview-letter{
    margin-top:0 !important;
    font-size:10.5px !important;
    line-height:1.72 !important;
  }

  #printSheetHost .clean-preview-letter p{
    margin:0 0 6px !important;
  }

  #printSheetHost .clean-preview-data{
    margin-top:8px !important;
    padding-top:7px !important;
    gap:5px !important;
  }

  #printSheetHost .preview-data-row{
    gap:5px !important;
  }

  #printSheetHost .preview-data-row > div{
    min-height:34px !important;
    padding:4px 7px !important;
    border-radius:4px !important;
  }

  #printSheetHost .preview-data-row span,
  #printSheetHost .preview-section-label{
    font-size:7px !important;
    margin-bottom:0 !important;
  }

  #printSheetHost .preview-data-row strong{
    font-size:8.5px !important;
    line-height:1.25 !important;
  }

  #printSheetHost .clean-preview-media{
    gap:5px !important;
    margin-top:5px !important;
  }

  #printSheetHost .preview-signature-box,
  #printSheetHost .preview-attachments-box{
    min-height:59px !important;
    padding:4px 7px !important;
    border-radius:4px !important;
  }

  #printSheetHost .preview-signature-content{
    height:42px !important;
  }

  #printSheetHost .preview-signature-content img{
    max-height:40px !important;
  }

  #printSheetHost .preview-file-chip{
    padding:2px 5px !important;
    font-size:6.5px !important;
  }

  #printSheetHost .preview-empty{
    font-size:7px !important;
  }

  #printSheetHost .clean-preview-consent{
    margin-top:5px !important;
    padding:5px 7px !important;
    border-radius:4px !important;
    font-size:7.5px !important;
    line-height:1.45 !important;
  }

  #printSheetHost .clean-preview-brand,
  #printSheetHost .clean-preview-top,
  #printSheetHost .clean-preview-letter,
  #printSheetHost .clean-preview-data,
  #printSheetHost .clean-preview-media,
  #printSheetHost .clean-preview-consent{
    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }
}

/* =========================================================
   PRINT FINAL — fill the A4 page vertically without crowding
   ========================================================= */
@media print {
  #printSheetHost .clean-preview-sheet{
    width:198mm !important;
    max-width:198mm !important;
    min-height:284mm !important;
    height:284mm !important;
    padding:10mm 11mm 9mm !important;
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
  }

  #printSheetHost .clean-preview-brand{
    flex:0 0 auto !important;
    padding-bottom:9px !important;
  }

  #printSheetHost .clean-preview-brand img{
    width:72px !important;
    height:59px !important;
  }

  #printSheetHost .clean-preview-brand h4{
    font-size:16px !important;
  }

  #printSheetHost .clean-preview-brand p{
    font-size:9px !important;
  }

  #printSheetHost .clean-preview-top{
    flex:0 0 auto !important;
    min-height:78px !important;
    padding-top:14px !important;
  }

  #printSheetHost .clean-preview-top h2{
    font-size:27px !important;
  }

  #printSheetHost .clean-preview-meta{
    top:14px !important;
    gap:5px !important;
    font-size:10px !important;
  }

  #printSheetHost .clean-preview-letter{
    flex:0 0 auto !important;
    margin-top:4px !important;
    font-size:12px !important;
    line-height:1.95 !important;
  }

  #printSheetHost .clean-preview-letter p{
    margin:0 0 11px !important;
  }

  #printSheetHost .clean-preview-data{
    flex:0 0 auto !important;
    margin-top:13px !important;
    padding-top:11px !important;
    gap:8px !important;
  }

  #printSheetHost .preview-data-row{
    gap:8px !important;
  }

  #printSheetHost .preview-data-row > div{
    min-height:45px !important;
    padding:6px 9px !important;
  }

  #printSheetHost .preview-data-row span,
  #printSheetHost .preview-section-label{
    font-size:8.5px !important;
    margin-bottom:2px !important;
  }

  #printSheetHost .preview-data-row strong{
    font-size:10px !important;
    line-height:1.35 !important;
  }

  #printSheetHost .clean-preview-media{
    flex:0 0 auto !important;
    gap:8px !important;
    margin-top:9px !important;
  }

  #printSheetHost .preview-signature-box,
  #printSheetHost .preview-attachments-box{
    min-height:82px !important;
    padding:7px 9px !important;
  }

  #printSheetHost .preview-signature-content{
    height:59px !important;
  }

  #printSheetHost .preview-signature-content img{
    max-height:56px !important;
  }

  #printSheetHost .preview-file-chip{
    font-size:8px !important;
    padding:3px 6px !important;
  }

  #printSheetHost .preview-empty{
    font-size:8.5px !important;
  }

  #printSheetHost .clean-preview-consent{
    flex:0 0 auto !important;
    margin-top:auto !important;
    padding:8px 10px !important;
    font-size:9px !important;
    line-height:1.6 !important;
  }
}


/* Images in invoices/documents: show like electronic signature in preview + print */
.preview-files-list {
  min-height:72px;
  align-items:center;
  justify-content:center;
}
.preview-attachment-image {
  display:block;
  max-width:100%;
  max-height:70px;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:auto;
}
@media print {
  #printSheetHost .preview-files-list {
    min-height:59px !important;
    height:59px !important;
    padding-top:0 !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #printSheetHost .preview-attachment-image {
    max-width:100% !important;
    max-height:56px !important;
    object-fit:contain !important;
  }
}

/* Preview + print: keep each value directly under its label */
.preview-data-row > div{
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:2px !important;
}
.preview-data-row span{
  display:block !important;
  margin:0 0 2px 0 !important;
  line-height:1.25 !important;
}
.preview-data-row strong{
  display:block !important;
  margin:0 !important;
  line-height:1.3 !important;
}

/* Preview modal close button — fixed, neat position at the top-left */
.request-preview-head{
  position:sticky;
  top:0;
  z-index:4;
  min-height:64px;
  padding:12px 64px 12px 20px;
  direction:rtl;
}
.request-preview-head h3{
  width:100%;
  margin:0;
  text-align:right;
  line-height:1.5;
}
.request-preview-head .preview-close{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e5e9ef;
  border-radius:50%;
  background:#f5f7fa;
  color:#111827;
  font-size:26px;
  font-family:Arial,sans-serif;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.request-preview-head .preview-close:hover{
  background:#fff3e8;
  border-color:#f59e0b;
  color:#f57f00;
}
.request-preview-head .preview-close:active{
  transform:translateY(-50%) scale(.96);
}
@media(max-width:650px){
  .request-preview-head{
    min-height:58px;
    padding:10px 58px 10px 14px;
  }
  .request-preview-head .preview-close{
    left:12px;
    width:36px;
    height:36px;
    font-size:24px;
  }
}

/* =========================================================
   MOBILE ONLY — document actions on the LEFT beside request meta
   Desktop remains unchanged.
   ========================================================= */
@media (max-width:650px){
  .paper-head .document-title-row{
    position:static !important;
    padding-top:0 !important;
  }

  .paper-head .document-actions{
    position:absolute !important;
    top:18px !important;
    left:0 !important;
    right:auto !important;
    transform:none !important;
    display:flex !important;
    flex-direction:row !important;
    gap:6px !important;
    z-index:6 !important;
  }

  .paper-head .doc-action{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
  }
}

@media (max-width:430px){
  .paper-head .document-actions{
    top:18px !important;
    left:0 !important;
    gap:5px !important;
  }
  .paper-head .doc-action{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }
}


/* =========================================================
   HANDWRITTEN ELECTRONIC SIGNATURE — TOUCH + MOUSE
   ========================================================= */
.signature-draw-block{ min-width:0; }
.signature-pad-wrap{
  position:relative;
  width:100%;
  height:190px;
  border:1.5px dashed #c6d3df;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  cursor:crosshair;
  box-sizing:border-box;
}
.signature-canvas{
  display:block;
  width:100%;
  height:100%;
  background:#fff;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.signature-pad-hint{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  color:#8a98aa;
  font-size:14px;
  pointer-events:none;
  text-align:center;
}
.signature-pad-hint[hidden]{ display:none !important; }
.signature-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
}
.signature-clear-btn{
  border:1px solid #d7e0e8;
  background:#fff;
  color:#263b50;
  border-radius:8px;
  min-height:36px;
  padding:7px 14px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.signature-clear-btn:hover{ background:#f5f7f9; }
.signature-help{
  color:#8492a6;
  font-size:11px;
  line-height:1.5;
}
.signature-draw-block.has-error .signature-pad-wrap{
  border-color:#d92d20;
  box-shadow:0 0 0 2px rgba(217,45,32,.08);
}
@media (max-width:700px){
  .signature-pad-wrap{ height:165px; }
  .signature-actions{ align-items:flex-start; flex-direction:column; }
  .signature-clear-btn{ width:100%; }
}

/* CLIENT REVISION — use the supplied official header artwork exactly as provided */
.hero{
  height:auto !important;
  min-height:0 !important;
  background:#fff !important;
  overflow:hidden !important;
}
.hero__curve,
.hero__inner{
  display:none !important;
}
.hero::after{
  content:"";
  display:block;
  width:100%;
  height:230px;
  background-image:url('../assets/header-reference.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;
}
.page-shell{
  margin-top:0 !important;
}
@media (max-width:700px){
  .hero::after{
    height:auto;
    aspect-ratio:994 / 232;
    background-size:100% 100%;
  }
}

/* =========================================================
   CLIENT REVISION — DESKTOP ONLY: stretch site to full screen width
   Mobile/tablet layout stays unchanged.
   ========================================================= */
@media (min-width:951px){
  .page-shell{
    width:calc(100% - 32px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .paper{
    width:100% !important;
    max-width:none !important;
  }

  .letter{
    width:100% !important;
    max-width:none !important;
  }

  .footer__inner--modern{
    width:calc(100% - 32px) !important;
    max-width:none !important;
  }
}

/* FIX — Arabic letters with descenders (ي / ى / م etc.) must not be clipped inside form inputs */
.field-group input[type="text"],
.field-group input[type="tel"],
.field-group input[type="number"]{
  line-height:1.65 !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
  height:48px !important;
}

#fullName{
  line-height:1.7 !important;
  padding-top:7px !important;
  padding-bottom:8px !important;
  overflow:visible !important;
}

/* FINAL FIX — prevent Arabic glyphs (especially ي / ى) from being clipped in Chrome inputs */
#fullName{
  font-family:Tahoma, Arial, sans-serif !important;
  font-size:18px !important;
  line-height:normal !important;
  height:auto !important;
  min-height:52px !important;
  padding:11px 13px 13px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* Keep Arabic text vertically safe in the rest of the text inputs as well */
.field-group input[type="text"],
.field-group input[type="tel"],
.field-group input[type="number"]{
  line-height:normal !important;
  min-height:48px !important;
  padding-top:10px !important;
  padding-bottom:12px !important;
  box-sizing:border-box !important;
}

/* FINAL ARABIC INPUT FIX — apply the proven full-name rendering to all Arabic text fields */
#fullName,
#bankName,
#reason{
  font-family:Tahoma, Arial, sans-serif !important;
  line-height:normal !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

#bankName{
  font-size:18px !important;
  height:auto !important;
  min-height:52px !important;
  padding:11px 13px 13px !important;
}


/* Client note — entered amount and request reason in the letter */
.letter .inline-value.has-user-value,
.preview-inline-value.has-user-value {
  color: #3481c7 !important;
  font-weight: 800 !important;
}

@media print {
  #printSheetHost .preview-inline-value.has-user-value {
    color: #3481c7 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* CLIENT REVISION — print uses the exact same official site header artwork */
.clean-preview-print-header{
  display:none;
}

@media print{
  #printSheetHost .clean-preview-print-header{
    display:block !important;
    width:198mm !important;
    height:auto !important;
    max-width:none !important;
    margin:-10mm -11mm 7mm -11mm !important;
    padding:0 !important;
    object-fit:fill !important;
    flex:0 0 auto !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }

  /* The artwork already contains the logo, curves and Arabic/English title. */
  #printSheetHost .clean-preview-brand{
    display:none !important;
  }
}

/* CLIENT REVISION — preview uses the exact same official site header artwork */
.request-preview-body .clean-preview-print-header{
  display:block;
  width:calc(100% + 48px);
  max-width:none;
  height:auto;
  margin:-24px -24px 24px -24px;
  object-fit:fill;
}
.request-preview-body .clean-preview-brand{
  display:none !important;
}
@media (max-width: 700px){
  .request-preview-body .clean-preview-print-header{
    width:calc(100% + 24px);
    margin:-12px -12px 18px -12px;
  }
}

/* CLIENT REVISION — PDF download uses the exact same official site header artwork */
.pdf-download-host .clean-preview-print-header{
  display:block !important;
  width:calc(100% + 76px) !important;
  max-width:none !important;
  height:auto !important;
  margin:-28px -38px 24px -38px !important;
  padding:0 !important;
  object-fit:fill !important;
}
.pdf-download-host .clean-preview-brand{
  display:none !important;
}

/* =========================================================
   PREVIEW / PRINT / PDF — consent directly after media,
   contact footer fixed as the last strip of the page
   ========================================================= */
.clean-preview-sheet{
  display:flex;
  flex-direction:column;
}

.clean-preview-consent{
  margin-top:10px !important;
  flex:0 0 auto;
}

.clean-preview-footer{
  margin-top:auto;
  padding-top:14px;
  flex:0 0 auto;
  direction:rtl;
}

.clean-preview-footer .footer__inner--modern{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:8px 10px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:7px !important;
  background:#343b41 !important;
  border-top:3px solid #ff8b16 !important;
  box-sizing:border-box !important;
}

.clean-preview-footer .footer-contact{
  min-width:0 !important;
  min-height:48px !important;
  margin:0 !important;
  padding:6px 8px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.035) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}

.clean-preview-footer .footer-contact__icon{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  border-radius:50% !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#343b41 !important;
}

.clean-preview-footer .footer-contact__icon svg{
  width:16px !important;
  height:16px !important;
}

.clean-preview-footer .footer-contact--whatsapp .footer-contact__icon{
  color:#18a558 !important;
}

.clean-preview-footer .footer-contact__text{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  line-height:1.25 !important;
}

.clean-preview-footer .footer-contact__text small{
  color:#d6dbe0 !important;
  font-size:7px !important;
  margin:0 0 2px !important;
}

.clean-preview-footer .footer-contact__text strong{
  color:#fff !important;
  font-size:7.5px !important;
  line-height:1.25 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

@media(max-width:650px){
  .clean-preview-footer{
    margin-top:14px;
  }
  .clean-preview-footer .footer__inner--modern{
    grid-template-columns:1fr 1fr !important;
  }
}

@media print{
  #printSheetHost .clean-preview-consent{
    margin-top:7px !important;
  }

  #printSheetHost .clean-preview-footer{
    margin-top:auto !important;
    padding-top:7px !important;
  }

  #printSheetHost .clean-preview-footer .footer__inner--modern{
    padding:5px 7px !important;
    gap:5px !important;
    border-top-width:2px !important;
  }

  #printSheetHost .clean-preview-footer .footer-contact{
    min-height:38px !important;
    padding:4px 5px !important;
    gap:5px !important;
    border-radius:5px !important;
  }

  #printSheetHost .clean-preview-footer .footer-contact__icon{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
  }

  #printSheetHost .clean-preview-footer .footer-contact__icon svg{
    width:13px !important;
    height:13px !important;
  }

  #printSheetHost .clean-preview-footer .footer-contact__text small{
    font-size:5.8px !important;
  }

  #printSheetHost .clean-preview-footer .footer-contact__text strong{
    font-size:6.2px !important;
  }
}

/* =========================================================
   PRINT / PDF FOOTER ICONS — force a true circle
   ========================================================= */
.clean-preview-footer .footer-contact__icon,
#printSheetHost .clean-preview-footer .footer-contact__icon{
  box-sizing:border-box !important;
  aspect-ratio:1 / 1 !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
  padding:0 !important;
  line-height:1 !important;
  overflow:hidden !important;
  border-radius:999px !important;
}

@media print{
  #printSheetHost .clean-preview-footer .footer-contact__icon{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    max-width:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    flex-basis:24px !important;
  }
}


/* FIX — keep Arabic request-title parentheses in the correct visual order in html2canvas/PDF */
.clean-preview-top .preview-request-title{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:.18em;
  direction:ltr !important;
  unicode-bidi:isolate;
  white-space:nowrap;
}
.clean-preview-top .preview-request-title .preview-title-text{
  direction:rtl !important;
  unicode-bidi:isolate;
  display:inline-block;
}
.clean-preview-top .preview-request-title .preview-title-paren{
  direction:ltr !important;
  unicode-bidi:isolate;
  display:inline-block;
}

/* MANAGER REVISION — long request reason must wrap inside the letter, never overflow the page */
.letter #reasonPreview,
.letter .inline-value--wide{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  max-width:100% !important;
}

.clean-preview-letter .preview-inline-value{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  max-width:100% !important;
}


/* MANAGER REVISION — after “أُقر أنا” continue on a fresh line,
   and keep every wrapped continuation aligned to the same edge */
#reasonPreview .reason-continuation,
.clean-preview-letter .reason-continuation {
  display:inline;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
#reasonPreview br + .reason-continuation,
.clean-preview-letter br + .reason-continuation {
  display:inline-block;
  width:100%;
  box-sizing:border-box;
}

/* MANAGER REVISION — keep long request reason aligned as one wrapping box. */
.letter #reasonPreview.has-user-value {
  display:inline-block !important;
  width:auto !important;
  max-width:min(72%, 980px) !important;
  vertical-align:top !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  text-align:right !important;
  direction:rtl !important;
  unicode-bidi:plaintext !important;
}
.clean-preview-letter .preview-inline-value.has-user-value {
  display:inline-block !important;
  width:auto !important;
  max-width:min(72%, 155mm) !important;
  vertical-align:top !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  text-align:right !important;
  direction:rtl !important;
  unicode-bidi:plaintext !important;
}
@media (max-width: 768px) {
  .letter #reasonPreview.has-user-value,
  .clean-preview-letter .preview-inline-value.has-user-value {
    max-width:100% !important;
  }
}

/* MANAGER REVISION — these Arabic entry fields must use the same Alexandria font as the website */
#fullName,
#bankName,
#reason{
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
}

/* FINAL FIX — Alexandria Arabic descenders (ي / ى) must stay fully visible while typing */
#fullName,
#bankName{
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
  font-size:18px !important;
  line-height:1.9 !important;
  height:60px !important;
  min-height:60px !important;
  padding:7px 13px 12px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

#reason{
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
  font-size:18px !important;
  line-height:1.9 !important;
  padding:10px 13px 14px !important;
  box-sizing:border-box !important;
  overflow:auto !important;
}

/* MANAGER FIX — keep Alexandria, but let Chrome use the font's native Arabic metrics.
   A forced large line-height was clipping/flattening the lower part of ي / ى. */
#fullName,
#bankName{
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
  font-size:18px !important;
  line-height:normal !important;
  height:64px !important;
  min-height:64px !important;
  padding:12px 14px 16px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

#reason{
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
  font-size:18px !important;
  line-height:1.75 !important;
  padding:12px 14px 16px !important;
  box-sizing:border-box !important;
}

/* =========================================================
   FINAL ARABIC INPUT RENDERING FIX
   Chrome can clip Arabic descenders inside native text inputs
   with Alexandria. Remove the native input appearance and give
   the text an explicit, roomy line box so ي / ى render completely.
   ========================================================= */
#fullName,
#bankName{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:block !important;
  width:100% !important;
  height:60px !important;
  min-height:60px !important;
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
  font-size:18px !important;
  font-weight:400 !important;
  line-height:32px !important;
  padding:8px 14px 14px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  vertical-align:middle !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

#reason{
  -webkit-appearance:none !important;
  appearance:none !important;
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
  font-size:18px !important;
  font-weight:400 !important;
  line-height:32px !important;
  padding:10px 14px 16px !important;
  box-sizing:border-box !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}


/* =========================================================
   DEFINITIVE ARABIC DESCENDER FIX
   Use one-line textarea controls for Arabic name/bank fields.
   This avoids Chrome native <input> glyph clipping with Alexandria
   while preserving the exact site font and visual layout.
   ========================================================= */
#fullName,
#bankName{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:block !important;
  width:100% !important;
  height:64px !important;
  min-height:64px !important;
  max-height:64px !important;
  resize:none !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
  font-size:18px !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  padding:14px 14px 12px !important;
  box-sizing:border-box !important;
  direction:rtl !important;
  text-align:right !important;
  vertical-align:top !important;
}

#fullName::placeholder,
#bankName::placeholder{
  font-family:"Alexandria", Tahoma, Arial, sans-serif !important;
}

@media (max-width: 768px){
  #fullName,
  #bankName{
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    font-size:18px !important;
    line-height:1.7 !important;
    padding:12px 12px 10px !important;
  }

  .paper-title{
    margin-top:40px !important;
  }
}

/* رقم الجوال والآيبان: تبدأ الكتابة من اليمين مثل رقم الهوية */
#mobile,
#iban{
  text-align:right !important;
  direction:ltr !important;
}

#mobile::placeholder,
#iban::placeholder{
  text-align:right !important;
  direction:ltr !important;
}

/* MANAGER REVISION — entered values in form cards use the same blue as letter values */
#fullName,
#nationalId,
#mobile,
#iban,
#bankName,
#amount,
#reason{
  color:#3481C7 !important;
  caret-color:#3481C7 !important;
}

/* Keep placeholders in their existing muted color; only typed values are blue */
#fullName::placeholder,
#nationalId::placeholder,
#mobile::placeholder,
#iban::placeholder,
#bankName::placeholder,
#amount::placeholder,
#reason::placeholder{
  color:#99a5b4 !important;
  opacity:1;
}

/* Hide native number stepper arrows for the requested amount field */
#amount::-webkit-outer-spin-button,
#amount::-webkit-inner-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
}

#amount[type="number"]{
  -moz-appearance:textfield !important;
  appearance:textfield !important;
}


/* Consent undertaking: keep the two requested sentences on separate lines */
.consent-text .consent-line,
.clean-preview-consent .consent-line{
  display:block;
  width:100%;
}


/* Consent: two visually balanced lines */
.consent-text{
  min-width:0;
}
.consent-text .consent-line{
  display:block;
  width:100%;
  white-space:nowrap;
}
.consent-text > b{
  display:inline-block;
  margin-inline-start:4px;
}
@media (max-width: 900px){
  .consent-text .consent-line{
    white-space:normal;
  }
}

/* Request type switch: descendant / charity */
.request-type-switch{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:0 auto 16px;
  direction:rtl;
}
.request-type-btn{
  min-width:130px;
  padding:10px 22px;
  border:1px solid #d5dde6;
  border-radius:10px;
  background:#fff;
  color:#17283b;
  font:700 16px Alexandria, sans-serif;
  cursor:pointer;
  transition:.2s ease;
}
.request-type-btn:hover{border-color:#ff8a13;}
.request-type-btn.active{
  background:#ff8a13;
  border-color:#ff8a13;
  color:#fff;
  box-shadow:0 6px 16px rgba(255,138,19,.18);
}
@media(max-width:600px){
  .request-type-switch{gap:8px;margin-bottom:12px;}
  .request-type-btn{min-width:112px;padding:9px 14px;font-size:14px;}
}
@media print{.request-type-switch{display:none!important;}}

/* =========================================================
   DOCUMENT ACTIONS — move the 3 icons slightly upward on desktop
   ========================================================= */
@media (min-width:651px){
  .paper-head .document-actions{
    transform:translateY(calc(-50% - 18px)) !important;
  }
}

/* MOBILE ONLY — move request type buttons slightly upward */
@media (max-width:600px){
  .request-type-switch{
    position:relative;
    top:-14px;
    margin-bottom:14px;
  }
}

/* MOBILE ONLY — move the request title slightly down below the type buttons */
@media (max-width:600px){
  .paper-head .document-title-row .paper-title{
    position:relative;
    top:20px;
    margin-bottom:20px !important;
  }
}

/* CLIENT REVISION — DESKTOP ONLY: add a little more space below request type buttons */
@media (min-width:601px){
  .request-type-switch{
    margin-bottom:28px;
  }
}

/* MOBILE ONLY — lower request title a little more below request type buttons */
@media (max-width:600px){
  .paper-head .document-title-row .paper-title{
    top:34px;
    margin-bottom:34px !important;
  }
}

/* CLIENT REVISION — print numeric data aligned right + hide attachments card */
@media print{
  #printSheetHost .clean-preview-data .preview-data-row strong[dir="ltr"]{
    width:100% !important;
    text-align:right !important;
    direction:ltr !important;
  }

  #printSheetHost .preview-attachments-box{
    display:none !important;
  }
}

/* Preview only: keep entered field values aligned to the right, matching print */
.request-preview-body .preview-data-row > div{
  align-items:flex-end;
  text-align:right;
}

.request-preview-body .preview-data-row span,
.request-preview-body .preview-data-row strong{
  width:100%;
  text-align:right;
}

/* CLIENT REVISION — hide attachments card in on-screen preview only */
#requestPreviewBody .preview-attachments-box{
  display:none !important;
}


/* CLIENT REVISION — amount display: number on the right, ر.س on the left in preview and print only */
.request-preview-body .preview-amount-display,
#printSheetHost .preview-amount-display{
  width:100% !important;
  display:flex !important;
  flex-direction:row-reverse !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:4px !important;
  direction:ltr !important;
  text-align:right !important;
}

.request-preview-body .preview-amount-number,
#printSheetHost .preview-amount-number{
  direction:ltr !important;
  unicode-bidi:isolate !important;
}

.request-preview-body .preview-amount-currency,
#printSheetHost .preview-amount-currency{
  direction:rtl !important;
  unicode-bidi:isolate !important;
  width:auto !important;
  margin:0 !important;
  color:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
}

/* FIX — keep amount currency abbreviation on one line in preview/print */
.request-preview-body .preview-amount-number,
#printSheetHost .preview-amount-number{
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

.request-preview-body .preview-amount-currency,
#printSheetHost .preview-amount-currency{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
}