:root{
  --ink:#1a1a1a;
  --ink-soft:#262524;
  --orange:#ff3300;
  --orange-deep:#cc2900;
  --steel:#666666;
  --steel-light:#8c8c8c;
  --paper:#f4f3ef;
  --paper-line:#dedad0;
  --white:#ffffff;
  --serif-none: "Archivo", sans-serif;
  --ar: "Tajawal", sans-serif;
  --mono: "Space Mono", monospace;
  --radius: 2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ar);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1220px; margin:0 auto; padding:0 32px;}
@media(max-width:700px){ .wrap{padding:0 20px;} }

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px; background:var(--orange);
}
.hero-eyebrow{ color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.hero-eyebrow::before{ background:#fff; }
h1,h2,h3{
  font-family:var(--ar);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.01em;
}
.label-en{
  font-family:var(--serif-none);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.ticket{
  position:relative;
  background:var(--white);
  border:1px solid var(--paper-line);
}
.ticket::before,.ticket::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  background:var(--paper);
  border-radius:50%;
  top:50%; transform:translateY(-50%);
}
.ticket::before{ right:-9px; }
.ticket::after{ left:-9px; }
.ticket-dark{ background:var(--ink); border-color:#333; }
.ticket-dark::before,.ticket-dark::after{ background:var(--ink-soft); }

.stamp{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:104px; height:104px;
  border:2.5px solid var(--orange);
  border-radius:50%;
  color:var(--orange);
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  transform:rotate(-11deg) scale(.9);
  opacity:0;
  text-align:center;
  line-height:1.3;
  transition:transform .55s cubic-bezier(.2,1.4,.4,1), opacity .4s ease;
}
.stamp.in{ opacity:1; transform:rotate(-11deg) scale(1); }
.stamp b{ font-size:15px; margin:2px 0; letter-spacing:.02em;}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(26,26,26,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #2b2b2b;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.nav img{ height:34px; }
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{
  font-size:14.5px; color:#cfcfcf; font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{ color:var(--white); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange); color:var(--white);
  font-family:var(--ar); font-weight:700; font-size:14.5px;
  padding:12px 22px; border:none; cursor:pointer;
  transition:background .2s, transform .2s;
}
.btn:hover{ background:var(--orange-deep); transform:translateY(-1px); }
.btn-ghost{
  background:transparent; border:1.5px solid #555; color:var(--white);
}
.btn-ghost:hover{ border-color:var(--orange); background:transparent; }
.menu-toggle{ display:none; background:none; border:none; color:var(--white); font-size:26px; cursor:pointer; }
@media(max-width:860px){
  .nav-links{ display:none; }
  .menu-toggle{ display:block; }
  .nav .btn.desktop-only{ display:none; }
}

.hero{
  position:relative;
  background:#0d0d0d;
  color:var(--white);
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
}
@media(max-width:900px){ .hero{ min-height:86vh; } }
.hero-diagonal{ display:none; }

/* Full-bleed background slider */
.hero-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  overflow:hidden;
}
.hero-bg-slide{
  position:absolute !important;
  top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  opacity:0;
  transition:opacity 1.4s ease-in-out;
  z-index:1;
}
.hero-bg-slide.is-active{ opacity:1; z-index:2; }
.hero-bg-slide > img{
  width:100% !important; height:100% !important;
  object-fit:cover;
  transform:scale(1.05);
  will-change:transform;
}
.hero-bg-slide.is-active > img{ animation:heroKenBurns 9s ease-out forwards; }
@keyframes heroKenBurns{
  0%   { transform:scale(1.05) translate(0,0); }
  100% { transform:scale(1.18) translate(-2%, 1.2%); }
}
.hero-bg-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
}
.hero-bg-overlay{
  position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 60%, transparent 100%),
    radial-gradient(ellipse at 80% 20%, rgba(255,51,0,.18), transparent 55%);
  pointer-events:none;
}
html[dir="rtl"] .hero-bg-overlay{
  background:
    linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%),
    linear-gradient(-90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 60%, transparent 100%),
    radial-gradient(ellipse at 20% 20%, rgba(255,51,0,.18), transparent 55%);
}

/* Content on top */
.hero-content{
  position:relative;
  z-index:4;
  padding:120px 32px 60px;
  display:grid;
  grid-template-columns:minmax(0, 640px);
  gap:32px;
  align-items:start;
}
@media(max-width:700px){ .hero-content{ padding:100px 20px 40px; } }

.hero-text-stack{
  position:relative;
  min-height:340px;
}
@media(max-width:700px){ .hero-text-stack{ min-height:280px; } }
.hero-text{
  position:absolute;
  inset-inline-start:0; inset-inline-end:0; top:0;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s ease, transform .8s ease;
  pointer-events:none;
}
.hero-text.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; z-index:2; }
.hero-text .hero-eyebrow{ margin-bottom:22px; }
.hero-text h1{
  font-size:clamp(32px, 4.4vw, 58px);
  line-height:1.12;
  margin-bottom:18px;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.hero-text .hero-sub{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.hero-text .lede{
  font-size:17px; color:#eee; max-width:560px; margin-bottom:32px;
  text-shadow:0 1px 10px rgba(0,0,0,.3);
}
.hero-text .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-stats{
  position:relative;
  display:flex; gap:0;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  max-width:640px;
  margin-top:12px;
  border-radius:2px;
  overflow:hidden;
}
.hero-stats div{
  flex:1; padding:20px 18px;
  border-inline-end:1px solid rgba(255,255,255,.14);
}
.hero-stats div:last-child{ border-inline-end:none; }
.hero-stats b{
  font-family:var(--mono); font-size:24px; color:#fff; display:block;
}
.hero-stats span{ font-size:12.5px; color:#e4e4e4; }

.hero-slider-dots{
  position:absolute; z-index:6;
  bottom:36px; inset-inline-start:32px;
  display:flex; gap:8px;
}
@media(max-width:700px){ .hero-slider-dots{ inset-inline-start:20px; bottom:16px; } }
.hero-slider-dots button{
  width:28px; height:3px; border:none; padding:0;
  background:rgba(255,255,255,.35); cursor:pointer;
  transition:background .25s, width .25s;
}
.hero-slider-dots button.is-active{ background:var(--orange); width:44px; }

/* Language toggle */
.nav-right{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid #444; color:#dcdcdc;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  transition:border-color .2s, color .2s;
}
.lang-toggle:hover{ border-color:var(--orange); color:#fff; }

/* LTR font override */
html[dir="ltr"] body,
html.lang-en body{ font-family:var(--serif-none); }
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html.lang-en h1,
html.lang-en h2,
html.lang-en h3{ font-family:var(--serif-none); letter-spacing:-.015em; }
html[dir="ltr"] .hero-stats div{ border-left:1px solid rgba(255,255,255,.14); border-right:none; }
html[dir="ltr"] .hero-stats div:last-child{ border-left:none; }

.req-tag{
  position:absolute; bottom:-28px; left:-18px;
  width:230px;
  padding:20px 18px 24px;
  transform:rotate(-4deg);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
@media(max-width:900px){ .req-tag{ position:static; transform:none; margin-top:22px; width:100%; box-shadow:none; } }
.req-tag .rt-head{
  font-family:var(--mono); font-size:11px; color:var(--steel);
  display:flex; justify-content:space-between; margin-bottom:10px;
  border-bottom:1px dashed var(--paper-line); padding-bottom:8px;
}
.req-tag .rt-title{ font-weight:800; font-size:15px; margin-bottom:6px; }
.req-tag .rt-sub{ font-size:12.5px; color:var(--steel); margin-bottom:14px;}
.req-tag .rt-stamp-row{ display:flex; align-items:center; justify-content:space-between; }
.rt-check{
  width:26px; height:26px; border-radius:50%; background:var(--orange);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;
}

section{ padding:110px 0; }
section.hero{ padding:0; }
@media(max-width:900px){ section{ padding:80px 0; } }
@media(max-width:700px){ section{ padding:64px 0; } }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(26px,3.4vw,40px); }
.section-head p{ color:var(--steel); font-size:16px; margin-top:14px; }

.about{ background:var(--paper); }
.about-grid{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; align-items:center;
}
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
.about-copy p{ color:#3d3d3d; font-size:16px; margin-bottom:18px; }
.about-copy .divider{ width:60px; height:3px; background:var(--orange); margin:26px 0; }
.about-photo{ position:relative; }
.about-photo .clip{
  clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 88%);
  overflow:hidden;
}
.about-photo img{ width:100%; height:460px; object-fit:cover; }
@media(max-width:900px){ .about-photo img{ height:320px; } .about-photo .clip{ clip-path:none; } }
.mission-card{
  background:var(--ink); color:#fff; padding:26px 26px;
  margin-top:-70px; margin-inline-end:36px; position:relative; z-index:2;
  border-inline-start:4px solid var(--orange);
}
@media(max-width:900px){ .mission-card{ margin-top:20px; margin-inline-end:0; } }
.mission-card b{ display:block; color:var(--orange); font-size:12.5px; font-family:var(--mono); letter-spacing:.08em; margin-bottom:8px; text-transform:uppercase;}
.mission-card p{ font-size:14.5px; color:#d8d8d8; }

.why{ background:var(--ink); color:#fff; }
.why .section-head p{ color:#a9a9a9; }
.ledger{ border-top:1px solid #333; }
.ledger-row{
  display:grid; grid-template-columns:90px 1fr 210px;
  align-items:center;
  padding:26px 4px;
  border-bottom:1px solid #333;
  gap:18px;
  transition:background .25s;
}
.ledger-row:hover{ background:#232221; }
@media(max-width:700px){
  .ledger-row{ grid-template-columns:60px 1fr; }
  .ledger-row .ledger-note{ display:none; }
}
.ledger-code{ font-family:var(--mono); color:var(--orange); font-size:14px; }
.ledger-title{ font-size:19px; font-weight:700; }
.ledger-desc{ color:#9c9c9c; font-size:13.5px; margin-top:4px; }
.ledger-note{ font-family:var(--mono); font-size:11.5px; color:#6f6f6f; text-align:end; }

.markets{ background:var(--paper); }
.market-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--paper-line);
}
@media(max-width:760px){ .market-grid{ grid-template-columns:repeat(2,1fr); } }
.market-card{
  position:relative; background:var(--ink); overflow:hidden; aspect-ratio:4/5;
}
.market-card img{
  width:100%; height:100%; object-fit:cover; opacity:.72;
  transition:transform .6s ease, opacity .4s ease;
}
.market-card:hover img{ transform:scale(1.07); opacity:.5; }
.market-tag{
  position:absolute; inset-inline-start:16px; bottom:16px;
  color:#fff; z-index:2;
}
.market-tag .mc-code{ font-family:var(--mono); font-size:11px; color:var(--orange); display:block; margin-bottom:4px;}
.market-tag .mc-name{ font-weight:700; font-size:16px; }

.supply{ background:var(--ink); color:#fff; }
.supply-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media(max-width:900px){ .supply-grid{ grid-template-columns:1fr; gap:36px; } }
.supply-photo{ position:relative; }
.supply-photo img{ width:100%; height:420px; object-fit:cover; filter:grayscale(15%);}
.chip-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.chip{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  border:1px solid #3d3d3d; color:#d8d8d8; padding:9px 14px;
}
.chip::before{ content:"— "; color:var(--orange); }

.clients{ background:var(--paper); }
.client-board{
  background:#fff; border:1px solid var(--paper-line); position:relative;
  padding:60px 40px 40px;
}
@media(max-width:700px){ .client-board{ padding:44px 20px 26px; } }
.client-board .stamp{ position:absolute; top:-38px; inset-inline-end:36px; background:var(--paper); }
.client-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-line);
  border:1px solid var(--paper-line);
}
@media(max-width:760px){ .client-grid{ grid-template-columns:repeat(2,1fr); } }
.client-cell{
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:30px 18px; min-height:110px; text-align:center;
}
.client-cell span{
  font-family:var(--serif-none); font-weight:700; font-size:14px; color:#333; letter-spacing:.01em;
}
.client-cell small{ display:block; font-family:var(--mono); font-size:10px; color:var(--steel-light); margin-top:5px; }

.contact{ background:var(--ink); color:#fff; }
.contact-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:0;
}
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-copy{ padding-inline-end:60px; }
@media(max-width:900px){ .contact-copy{ padding-inline-end:0; margin-bottom:40px; } }
.contact-copy h2{ font-size:clamp(28px,3.6vw,44px); margin-bottom:20px; }
.contact-copy p{ color:#b8b8b8; font-size:16px; max-width:460px; margin-bottom:30px; }

.po-card{
  background:var(--paper); color:var(--ink);
  padding:34px 30px;
  position:relative;
}
.po-card .po-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:1.5px dashed #cfcbbf; padding-bottom:18px; margin-bottom:20px;
}
.po-top .po-num{ font-family:var(--mono); font-size:12px; color:var(--steel); }
.po-top .po-num b{ color:var(--orange); }
.contact-item{
  display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--paper-line);
}
.contact-item:last-child{ border-bottom:none; }
.contact-item .ci-ic{
  width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--orange);
  display:flex; align-items:center; justify-content:center; flex:none; font-size:16px;
}
.contact-item b{ display:block; font-size:12px; color:var(--steel); font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em;}
.contact-item span{ font-weight:700; font-size:15.5px; }
.po-card .btn{ width:100%; justify-content:center; margin-top:22px; }

footer{
  background:#141414; color:#7d7d7d; padding:34px 0; font-size:13px;
}
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.foot-row img{ height:24px; opacity:.85; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
html.no-js .reveal{ opacity:1; transform:none; }

.mono, [style*="var(--mono)"]{ unicode-bidi:isolate; }
.eyebrow, .ledger-code, .ledger-note, .mc-code, .hero-stats b, .po-num,
.req-tag .rt-head span, .stamp, .client-cell small, .chip{
  unicode-bidi:plaintext;
}
::selection{ background:var(--orange); color:#fff; }

/* =============== QUOTE REQUEST MODAL — self-contained =============== */
.qr-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; transition:opacity .22s ease;
}
.qr-modal.is-open{ opacity:1; }
.qr-modal[hidden]{ display:none !important; }

.qr-backdrop{
  position:absolute; inset:0;
  background:rgba(15,15,15,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.qr-dialog{
  position:relative; z-index:2;
  width:100%; max-width:620px;
  background:#ffffff;
  border-radius:8px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
  overflow:hidden;
  max-height:92vh; overflow-y:auto;
  font-family:var(--ar);
  transform:translateY(20px) scale(.985);
  transition:transform .3s cubic-bezier(.2,1,.3,1);
}
.qr-modal.is-open .qr-dialog{ transform:translateY(0) scale(1); }

/* Header — dark strip with orange accent bar */
.qr-head{
  background:#1a1a1a;
  color:#ffffff;
  padding:26px 32px 30px;
  position:relative;
}
.qr-head::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:64px; height:3px; background:#ff3300;
}
.qr-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#ff3300;
  margin-bottom:10px;
}
.qr-head h2{
  font-size:22px; font-weight:800;
  color:#ffffff !important;
  margin:0 0 6px;
  line-height:1.25;
}
.qr-head p{
  font-size:13.5px;
  color:#bcbcbc;
  margin:0;
  max-width:480px;
  line-height:1.55;
}

/* Close X — circular button on the dark header */
.qr-close{
  position:absolute; top:14px; inset-inline-end:14px; z-index:10;
  width:32px; height:32px; border-radius:50%;
  border:0; padding:0; margin:0;
  background:rgba(255,255,255,.10);
  color:#ffffff;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s;
}
.qr-close:hover{ background:rgba(255,255,255,.22); }
.qr-close svg{ display:block; }

/* Form body */
.qr-form{ padding:26px 32px 22px; }
.qr-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  opacity:0; pointer-events:none;
}

.qr-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
}
@media(max-width:560px){ .qr-fields{ grid-template-columns:1fr; } }

.qr-field{ display:flex; flex-direction:column; gap:6px; }
.qr-field-full{ grid-column:1 / -1; }
.qr-field > span{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#666666; font-weight:700;
}
.qr-field input,
.qr-field select,
.qr-field textarea{
  display:block; width:100%; box-sizing:border-box;
  padding:11px 13px;
  background:#ffffff;
  border:1.5px solid #dedad0;
  border-radius:3px;
  font-family:inherit;
  font-size:14.5px;
  line-height:1.4;
  color:#1a1a1a;
  transition:border-color .18s, box-shadow .18s;
}
.qr-field select{ appearance:none; -webkit-appearance:none; padding-inline-end:36px;
  background-image:linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(-45deg, transparent 50%, #666 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px; background-repeat:no-repeat;
}
html[dir="rtl"] .qr-field select{
  background-position: 20px 20px, 14px 20px;
  padding-inline-end:13px; padding-inline-start:36px;
}
.qr-field textarea{ min-height:96px; resize:vertical; }
.qr-field input::placeholder,
.qr-field textarea::placeholder{ color:#a8a29a; }
.qr-field input:focus,
.qr-field select:focus,
.qr-field textarea:focus{
  outline:none;
  border-color:#ff3300;
  box-shadow:0 0 0 3px rgba(255,51,0,.14);
}

.qr-error{
  background:#fdecec;
  border:1px solid #f5c6c6;
  color:#a12525;
  padding:11px 14px; margin-top:16px;
  font-size:13.5px;
  border-radius:3px;
}

/* Drop zone */
.qr-drop{
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  padding:18px 16px;
  background:#faf9f5;
  border:2px dashed #cbc5b5;
  border-radius:4px;
  cursor:pointer;
  transition:border-color .18s, background .18s;
  text-align:start;
}
.qr-drop:hover, .qr-drop:focus-visible, .qr-drop.is-drag{
  border-color:#ff3300;
  background:#fff6f2;
  outline:none;
}
.qr-drop-icon{
  width:40px; height:40px; border-radius:50%;
  background:#fff3ee; color:#ff3300;
  display:inline-flex; align-items:center; justify-content:center;
  flex:none;
}
.qr-drop-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.qr-drop-text b{ font-size:14px; font-weight:700; color:#1a1a1a; line-height:1.3; }
.qr-drop-text small{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.02em;
  color:#888;
}

.qr-file-list{
  list-style:none; padding:0; margin:10px 0 0;
  display:flex; flex-direction:column; gap:6px;
}
.qr-file-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  background:#ffffff;
  border:1px solid #eae5da;
  border-radius:3px;
  font-size:13.5px;
}
.qr-file-icon{ font-size:14px; }
.qr-file-name{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#1a1a1a; font-weight:600;
}
.qr-file-size{
  font-family:var(--mono);
  font-size:11px;
  color:#888;
  flex:none;
}
.qr-file-remove{
  background:transparent; border:0; padding:4px 6px; margin:0;
  color:#888; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:3px;
  transition:background .18s, color .18s;
}
.qr-file-remove:hover{ background:#fdecec; color:#c92a2a; }

/* Action row */
.qr-actions{
  display:flex; gap:12px; justify-content:flex-end;
  margin-top:22px; padding-top:20px;
  border-top:1px solid #eae5da;
  flex-wrap:wrap;
}

/* Buttons — fully self-contained, no inheritance from site .btn */
.qr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:130px;
  padding:12px 22px;
  border-radius:3px;
  font-family:inherit;
  font-size:14.5px; font-weight:700;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:background .18s, border-color .18s, color .18s;
  line-height:1.2;
  text-decoration:none;
  box-sizing:border-box;
}
.qr-btn-cancel{
  background:#ffffff;
  border-color:#cbc5b5;
  color:#333333;
}
.qr-btn-cancel:hover{
  border-color:#1a1a1a;
  color:#1a1a1a;
  background:#faf9f5;
}
.qr-btn-submit{
  background:#ff3300;
  border-color:#ff3300;
  color:#ffffff;
  min-width:170px;
}
.qr-btn-submit:hover:not([disabled]){
  background:#cc2900;
  border-color:#cc2900;
}
.qr-btn-submit[disabled]{ opacity:.85; cursor:not-allowed; }

.qr-spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#ffffff;
  animation:qrspin .7s linear infinite;
}
@keyframes qrspin{ to { transform:rotate(360deg); } }

/* Success screen */
.qr-success{
  padding:52px 40px 40px;
  text-align:center;
}
.qr-tick{
  width:74px; height:74px; border-radius:50%;
  background:#ff3300;
  color:#ffffff;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  box-shadow:0 10px 30px rgba(255,51,0,.28);
  animation:qrpop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes qrpop{
  0%   { transform:scale(0); opacity:0; }
  60%  { transform:scale(1.12); }
  100% { transform:scale(1); opacity:1; }
}
.qr-success h3{
  font-size:22px; font-weight:800;
  color:#1a1a1a;
  margin:0 0 8px;
}
.qr-success p{
  color:#666666;
  font-size:14.5px;
  margin:0 auto 26px;
  max-width:380px;
  line-height:1.6;
}