/* ============================================================
   Armaan Press — Public Inquiry form  (v243, v255)
   ------------------------------------------------------------
   inquiry.php ek PUBLIC page hai (staff login nahi), isliye uske
   apne styles yahan alag rakhe hain — app ki baaki CSS se kuch
   chheda nahi gaya. style.css bhi load hoti hai taaki .form-input
   / .btn jaise base controls wahi dikhein jo poore app me hain.

   v255 — DO ALAG ROOP, ek ke jaise dono nahi:

   MOBILE (<=900px — poori app ka standard breakpoint, yahan bhi
   wahi use kiya hai):
     - card edge-to-edge, poori screen bharta hai — ek native app
       screen jaisa lagta hai
     - fields ek-ke-neeche-ek, tight spacing
     - kaam wali tiles 2 per line

   DESKTOP (>900px):
     - poore page ka use — beech me ek CHAUDA (820px) form-card,
       jaise koi asli "enquiry"/"contact us" wala professional page
     - Naam+Phone aur Location+Email side-by-side (2 column)
     - kaam wali 6 tiles EK HI LINE me
     - card apna shadow/radius/padding rakhta hai (mobile ki tarah
       edge-to-edge nahi) */

.inq-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 420px at 50% -180px, rgba(216,17,66,0.16), transparent 70%),
    var(--bg-main, #f6f6f8);
}

.inq-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 12px 28px;
}

.inq-card {
  background: var(--white, #fff);
  border: 1px solid var(--border-main, #e6e6ec);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(17,16,19,0.10);
}

@media (min-width: 901px) {
  .inq-wrap { max-width: 860px; padding: 40px 20px 60px; }
  .inq-card { box-shadow: 0 24px 60px rgba(17,16,19,0.14); }
}

/* ---- Header — dark band, app ke masthead jaisa ---- */
.inq-head {
  position: relative;
  padding: 22px 18px 20px;
  background: linear-gradient(135deg, #1a0c12 0%, #0f0f14 45%, #12222b 100%);
  color: #fff;
  text-align: center;
}
/* v257: "✕" close button — staff mode me header ke top-right corner
   me fix rehta hai, taaki form kabhi bhi ek tap me band ho sake. */
.inq-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s ease, transform 0.12s ease;
  z-index: 2;
}
.inq-close-btn:hover { background: rgba(255,255,255,0.22); }
.inq-close-btn:active { transform: scale(0.92); }
.inq-head-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
.inq-logo {
  width: 54px; height: 54px; flex-shrink: 0;
  object-fit: contain;
  background: linear-gradient(135deg, #e0154b 0%, #a30d33 100%);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(216,17,66,0.45);
}
.inq-logo-txt {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; letter-spacing: 0.5px;
  padding: 0;
}
.inq-head-text { text-align: left; min-width: 0; }
.inq-brand {
  font-size: 23px; font-weight: 800;
  letter-spacing: 0.5px; line-height: 1.1;
}
.inq-pill {
  display: inline-block;
  margin-top: 6px;
  background: var(--brand-pink, #d81142);
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
/* v249: poora chauda logo — apni asli chaudai tak, par card se bahar
   na nikle. Height apne aap set hoti hai taaki logo khinche nahi. */
.inq-biglogo {
  display: block;
  max-width: min(320px, 82%);
  width: auto;
  height: auto;
  margin: 0 auto;
}
/* v260: Mobile par logo thoda chhota — pehle bahut bada/bhaari lagta
   tha header me. Desktop (>900px) bilkul waisa hi bada rehta hai. */
@media (max-width: 900px) {
  .inq-biglogo { max-width: min(220px, 62%); }
}

/* 60-second wali line — HAMESHA EK HI LINE me rahe. Isliye
   `white-space: nowrap`, aur font-size `clamp()` se screen ke hisaab
   se apne aap thoda chhota/bada ho jaata hai. Bahut chhote phone par
   bhi ye tootegi nahi, bas halki si chhoti ho jayegi. */
.inq-tag {
  font-size: clamp(10.5px, 3.4vw, 13.5px);
  opacity: 0.75;
  margin-top: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inq-body-pad { padding: 16px 14px 18px; }
@media (min-width: 901px) { .inq-body-pad { padding: 8px 36px 32px; } }

/* ---- Form ---- */
.inq-form .form-group { margin-bottom: 12px; }
.inq-form .form-label { font-size: 12px; }
.inq-req { color: var(--brand-pink, #d81142); }
.inq-opt { color: var(--text-tertiary, #9a9aa6); font-weight: 500; }

/* Naam+Phone, Location+Email — mobile par column (pehle jaisa hi
   dikhta hai), desktop par side-by-side. */
.inq-row { display: flex; flex-direction: column; gap: 0; }
.inq-row .form-group { flex: 1; min-width: 0; }
@media (min-width: 901px) {
  .inq-row { flex-direction: row; gap: 18px; }
}

/* Honeypot — insaan ko dikhna hi nahi chahiye. `display:none` ke
   bajaye offscreen rakha hai, kyunki kuch bots display:none wale
   field ko pehchan kar chhod dete hain. */
.inq-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.inq-file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed rgba(216,17,66,0.45);
  border-radius: 12px;
  padding: 13px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-pink, #d81142);
  cursor: pointer;
}
.inq-file input[type="file"] { display: none; }

.inq-submit {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  font-size: 15px;
  border-radius: 12px;
  margin-top: 4px;
}
.inq-note {
  font-size: 11px;
  color: var(--text-tertiary, #9a9aa6);
  text-align: center;
  margin: 12px 0 0;
}

/* ---- Thank-you / band-hai screens ---- */
.inq-done, .inq-off { text-align: center; padding: 12px 4px 6px; }
.inq-done-tick, .inq-off-icon { font-size: 44px; line-height: 1; }
.inq-done h2, .inq-off h2 {
  font-size: 20px; font-weight: 800;
  margin: 12px 0 6px;
  color: var(--text-primary, #17161b);
}
.inq-done p, .inq-off p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary, #5c5c68);
  margin: 0 auto 14px;
  max-width: 380px;
}
.inq-ref {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(216,17,66,0.06);
  border: 1px solid rgba(216,17,66,0.20);
  border-radius: 12px;
  padding: 11px 22px;
}
.inq-ref span {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-tertiary, #9a9aa6);
}
.inq-ref strong {
  font-size: 20px; font-weight: 800;
  color: var(--brand-pink, #d81142);
  font-variant-numeric: tabular-nums;
}
.inq-ref-hint {
  font-size: 11.5px !important;
  margin-top: 10px !important;
}
.inq-again { margin-top: 4px; }

.inq-foot {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary, #9a9aa6);
  margin-top: 16px;
  letter-spacing: 0.3px;
}

/* v255: pehle ye sirf max-width:480px (bahut chhota phone) tak thi.
   Ab poori app ke standard breakpoint (900px) tak — taaki 480-900px
   ke beech (chhote laptop window, tablet) me bhi "professional app"
   wala edge-to-edge, tight roop dikhe, na ki adhoora/beech ka kuch. */
@media (max-width: 900px) {
  .inq-wrap { padding: 0 0 20px; }
  .inq-card { border-radius: 0; border-left: none; border-right: none; box-shadow: none; }
  /* v260: neeche "Enquiry Bhejein" button ke liye jagah reserve —
     kyunki wo button ab fixed hai aur normal flow se nikal chuka hai
     (neeche dekhein), form ka content is button ke peeche chhup na
     jaaye isliye. */
  .inq-form { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* Staff mode ki patti — jab app ke andar se staff khud inquiry
   daal raha ho (v245). Public customer ko ye kabhi nahi dikhti. */
.inq-staffbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(216,17,66,0.06);
  border: 1px solid rgba(216,17,66,0.22);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-pink, #d81142);
}
.inq-staffbar a {
  margin-left: auto;
  color: var(--brand-pink, #d81142);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}


/* ============================================================
   v248 — screenshot wala layout
   ============================================================ */

.inq-title {
  font-size: 25px; font-weight: 800;
  text-align: center;
  line-height: 1.25;
  margin: 6px 0 8px;
  color: var(--text-primary, #17161b);
}
.inq-title em { font-style: normal; color: var(--brand-pink, #d81142); }

.inq-sub {
  text-align: center;
  font-size: 14px; line-height: 1.55;
  color: var(--text-secondary, #5c5c68);
  margin: 0 auto 18px;
  max-width: 380px;
}

/* Kis staff ne link bheja — bharose ke liye */
.inq-refbar {
  display: flex; align-items: center; gap: 12px;
  background: rgba(216,17,66,0.05);
  border: 1px solid rgba(216,17,66,0.20);
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 20px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--text-secondary, #5c5c68);
}
.inq-refbar strong { color: var(--brand-pink, #d81142); }
.inq-refav {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #b0102e 0%, #7d0e28 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
}

/* Labels — screenshot me uppercase, chhote, spaced */
.inq-form .form-label {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--text-secondary, #5c5c68);
  margin-bottom: 8px;
}
.inq-form .form-input,
.inq-form .form-select {
  border-radius: 12px;
  padding: 14px 15px;
  background: #fafafb;
}
.inq-form .form-input:focus { background: #fff; }

/* +91 wala phone box */
.inq-phone { display: flex; gap: 10px; }
.inq-cc {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 74px;
  border: 1px solid var(--border-main, #e6e6ec);
  border-radius: 12px;
  background: #fafafb;
  font-size: 16px; font-weight: 800;
  color: var(--text-primary, #17161b);
}
.inq-phone .form-input { flex: 1; min-width: 0; }

/* Kaam chunne wali tiles — mobile par 2 per line, desktop par
   EK HI LINE me saari 6 (5 fixed kaam + "Other Item"). */
.inq-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 901px) {
  .inq-tiles { grid-template-columns: repeat(6, 1fr); gap: 12px; }
}
.inq-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  min-height: 92px;
  border: 1.5px solid var(--border-main, #e6e6ec);
  border-radius: 14px;
  background: #fafafb;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.inq-tile:hover { border-color: rgba(216,17,66,0.4); }
.inq-tile:active { transform: scale(0.98); }
.inq-tile-ic { font-size: 21px; line-height: 1; }
.inq-tile-tx {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary, #17161b);
  text-align: center; line-height: 1.28;
}
@media (min-width: 901px) {
  .inq-tile { min-height: 104px; padding: 18px 8px; }
  .inq-tile-ic { font-size: 24px; }
  .inq-tile-tx { font-size: 12.5px; }
}
.inq-tile.on {
  border-color: var(--brand-pink, #d81142);
  border-width: 2px;
  background: rgba(216,17,66,0.05);
}
.inq-tile.on .inq-tile-tx { color: var(--brand-pink, #d81142); }

/* v260: Mobile par tiles thodi chhoti/compact — pehle kaafi bhaari
   (92px min-height, 16px padding) lagti thin, ab zyada saans lene
   layak, professional size. Desktop is rule se bilkul touch nahi
   hota. */
@media (max-width: 900px) {
  .inq-tile { min-height: 76px; padding: 11px 6px; gap: 6px; }
  .inq-tile-ic { font-size: 18px; }
  .inq-tile-tx { font-size: 11px; }
}

.inq-other { margin-top: 11px; }

/* Bada gradient submit */
.inq-submit {
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 6px;
  padding: 17px 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #e0154b 0%, #b0102e 60%, #8d0c26 100%);
  color: #fff;
  font-family: inherit;
  font-size: 17px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(216,17,66,0.34);
  transition: transform .1s ease, box-shadow .15s ease;
}
.inq-submit:active { transform: scale(0.985); box-shadow: 0 6px 16px rgba(216,17,66,0.3); }
.inq-submit:disabled { opacity: .7; cursor: default; }
/* Desktop par poore 860px chaude form ke bharose full-width button
   bohot bhaari/lamba lagta — ek reasonable chaudai par rok kar center
   kar diya, jaisa asli professional contact-form pages me hota hai. */
@media (min-width: 901px) {
  .inq-submit { max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* v260: MOBILE PAR button "fixed" — jaise app ke andar Payment / New
   Order jaise pages me neeche ka action button hamesha screen ke
   bottom par chipka rehta hai (chahe form kitna bhi lamba ho, kitna
   bhi scroll karo). Card edge-to-edge hai isliye pura viewport-width
   bar jaisa dikhta hai — apna radius/margin hata diya taaki edge se
   edge tak jaaye. Upar `.inq-form` me isi button ki height jitni
   padding-bottom reserve kar di gayi hai, taaki neeche ke fields
   iske peeche chhup na jaayein. Desktop ko bilkul chheda nahi —
   ye poori cheez sirf ≤900px ke andar hai. */
@media (max-width: 900px) {
  .inq-submit {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    margin: 0;
    border-radius: 0;
    padding: 15px 18px calc(15px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 22px rgba(17,16,19,0.16);
  }
}

/* Bharose wali line */
.inq-trust {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary, #5c5c68);
}

@media (max-width: 380px) {
  .inq-brand { font-size: 20px; }
  .inq-title { font-size: 22px; }
  .inq-tile { min-height: 68px; padding: 9px 6px; }
}

/* ============================================================
   v300 — Premium Print Order Request refresh
   Scope: public inquiry form only. Existing backend/actions untouched.
   ============================================================ */

.inq-body {
  background:
    radial-gradient(900px 360px at 50% -120px, rgba(216,17,66,.12), transparent 72%),
    linear-gradient(180deg, #f8f8fa 0%, #f4f5f7 100%);
}

.inq-card {
  border-color: rgba(23,22,27,.08);
}

.inq-head {
  background:
    radial-gradient(380px 140px at 50% -20px, rgba(216,17,66,.18), transparent 72%),
    linear-gradient(135deg, #100f13 0%, #15141a 58%, #0d1820 100%);
}

.inq-title {
  letter-spacing: -.45px;
  margin-top: 8px;
  margin-bottom: 7px;
}

.inq-title em {
  background: linear-gradient(135deg, #ed174c, #b90d38);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.inq-sub {
  max-width: 470px;
  margin-bottom: 12px;
}

.inq-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 auto 20px;
}

.inq-progress span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(23,22,27,.08);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #fafafb);
  box-shadow: 0 3px 10px rgba(20,18,24,.045);
  color: #55545e;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.inq-refbar {
  position: relative;
  overflow: hidden;
  border-color: rgba(216,17,66,.16);
  background:
    linear-gradient(135deg, rgba(216,17,66,.065), rgba(216,17,66,.02) 55%, rgba(255,255,255,.9));
  box-shadow: 0 7px 24px rgba(80,20,40,.055);
}

.inq-refbar::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  right: -38px;
  top: -50px;
  border-radius: 50%;
  background: rgba(216,17,66,.055);
  pointer-events: none;
}

.inq-refav {
  width: 44px;
  height: 44px;
  box-shadow: 0 6px 16px rgba(176,16,46,.23);
}

.inq-refcopy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.inq-refcopy small {
  color: #85838c;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.inq-refcopy > strong {
  width: fit-content;
  font-size: 14px;
  line-height: 1.2;
}

.inq-refcopy > span {
  color: #66646d;
  font-size: 12px;
  line-height: 1.45;
}

.inq-form .form-group {
  margin-bottom: 15px;
}

.inq-form .form-input,
.inq-form .form-select {
  min-height: 48px;
  border: 1px solid #e5e5ea;
  background: linear-gradient(180deg, #fff, #fbfbfc);
  box-shadow: 0 2px 8px rgba(21,19,25,.025);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.inq-form textarea.form-input {
  min-height: 108px;
  resize: vertical;
}

.inq-form .form-input:focus,
.inq-form .form-select:focus {
  border-color: rgba(216,17,66,.48);
  box-shadow: 0 0 0 3px rgba(216,17,66,.075), 0 6px 16px rgba(21,19,25,.04);
  outline: none;
}

.inq-cc {
  min-width: 70px;
  border-color: #e5e5ea;
  background: linear-gradient(180deg, #fff, #fafafb);
}

.inq-tiles {
  gap: 9px;
}

.inq-tile {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  border: 1px solid #e4e4e9;
  background: linear-gradient(160deg, #fff 0%, #fbfbfc 100%);
  box-shadow: 0 4px 14px rgba(21,19,25,.035);
}

.inq-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(216,17,66,.05), transparent 52%);
  opacity: 0;
  transition: opacity .15s ease;
}

.inq-tile:hover::before,
.inq-tile.on::before { opacity: 1; }

.inq-tile-ic {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  color: #b30e35;
  box-shadow: 0 4px 12px rgba(54,20,31,.08);
}

.inq-tile-ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inq-tile-tx {
  position: relative;
  z-index: 1;
}

.inq-tile.on {
  border-color: rgba(216,17,66,.62);
  border-width: 1px;
  background: linear-gradient(160deg, rgba(216,17,66,.07), #fff 78%);
  box-shadow: 0 7px 18px rgba(176,16,46,.10);
}

/* Optional print detail summary */
.inq-spec-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 16px;
  padding: 10px 11px;
  border: 1px solid rgba(20,145,91,.18);
  border-radius: 12px;
  background: rgba(20,145,91,.055);
}

.inq-spec-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #15915b;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.inq-spec-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.inq-spec-copy strong {
  color: #21704f;
  font-size: 11.5px;
}

.inq-spec-copy > span {
  color: #5e6863;
  font-size: 10.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inq-spec-edit {
  margin-left: auto;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #21704f;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20,80,55,.08);
}

/* Premium upload control — native filename UI hidden */
.inq-upload {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px dashed rgba(216,17,66,.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(216,17,66,.025), #fff 58%);
  cursor: pointer;
}

.inq-upload:hover { border-color: rgba(216,17,66,.52); }
.inq-upload input[type="file"] { display: none; }

.inq-upload-ic {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(216,17,66,.08);
  color: #b60e36;
}

.inq-upload-ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inq-upload-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.inq-upload-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #28262d;
  font-size: 11.5px;
}

.inq-upload-copy small {
  color: #88868f;
  font-size: 9.5px;
  line-height: 1.3;
}

.inq-upload-btn {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 8px;
  background: #17161b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.inq-submit {
  background: linear-gradient(135deg, #ea124b 0%, #c50d3c 56%, #9f0b30 100%);
  box-shadow: 0 12px 28px rgba(190,13,57,.30);
  letter-spacing: -.1px;
}

.inq-submit-wa {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  font-size: 14px;
}

.inq-trust {
  gap: 8px 14px;
  color: #74727b;
  font-size: 11.5px;
}

/* Print detail modal / mobile bottom sheet */
.inq-spec-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.inq-spec-modal.open { display: flex; }

.inq-spec-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,10,13,.52);
  backdrop-filter: blur(3px);
}

.inq-spec-sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -20px 60px rgba(0,0,0,.18);
  animation: inqSheetUp .2s ease-out;
}

@keyframes inqSheetUp {
  from { transform: translateY(20px); opacity: .7; }
  to { transform: translateY(0); opacity: 1; }
}

.inq-spec-grab {
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 99px;
  background: #dedee3;
}

.inq-spec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.inq-spec-head small {
  display: block;
  margin-bottom: 2px;
  color: #98969f;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.inq-spec-head h3 {
  margin: 0;
  color: #1c1a20;
  font-size: 20px;
  letter-spacing: -.35px;
}

.inq-spec-x {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: #f3f3f5;
  color: #59575f;
  cursor: pointer;
}

.inq-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.inq-spec-grid label > span {
  display: block;
  margin: 0 0 6px;
  color: #5e5c65;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.inq-spec-grid .form-input {
  width: 100%;
  min-height: 45px;
  padding: 11px 12px;
}

.inq-spec-actions {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 10px;
  margin-top: 14px;
}

.inq-spec-actions button {
  min-height: 44px;
  border-radius: 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.inq-spec-skip {
  border: 1px solid #e6e6ea;
  background: #f7f7f8;
  color: #66646c;
}

.inq-spec-save {
  border: 0;
  background: #17161b;
  color: #fff;
}

body.inq-modal-open { overflow: hidden; }

@media (min-width: 901px) {
  .inq-wrap { max-width: 920px; }
  .inq-body-pad { padding-left: 40px; padding-right: 40px; }
  .inq-progress span { font-size: 11px; padding: 6px 12px; }
  .inq-refbar { padding: 15px 16px; }
  .inq-tiles { gap: 10px; }
  .inq-tile { min-height: 96px; }
  .inq-tile-ic { width: 38px; height: 38px; }
  .inq-tile-ic svg { width: 22px; height: 22px; }

  .inq-spec-modal { align-items: center; padding: 20px; }
  .inq-spec-sheet {
    max-width: 540px;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,.24);
  }
  .inq-spec-grab { display: none; }
}

@media (max-width: 900px) {
  .inq-body-pad { padding: 14px 16px 18px; }
  .inq-staffbar { margin-bottom: 12px; padding: 8px 10px; }
  .inq-title { font-size: 24px; margin-top: 5px; }
  .inq-sub { font-size: 12.5px; line-height: 1.45; margin-bottom: 10px; }
  .inq-progress { gap: 5px; margin-bottom: 15px; }
  .inq-progress span { min-height: 25px; padding: 4px 7px; font-size: 9.4px; }
  .inq-refbar { padding: 10px 11px; margin-bottom: 15px; gap: 10px; }
  .inq-refav { width: 38px; height: 38px; }
  .inq-refcopy > span { font-size: 11px; }

  .inq-form .form-group { margin-bottom: 12px; }
  .inq-form .form-label { margin-bottom: 6px; }
  .inq-form .form-input,
  .inq-form .form-select { min-height: 46px; padding: 12px 13px; }
  .inq-form textarea.form-input { min-height: 96px; }

  .inq-tile { min-height: 72px; padding: 9px 6px; gap: 5px; border-radius: 12px; }
  .inq-tile-ic { width: 30px; height: 30px; border-radius: 9px; }
  .inq-tile-ic svg { width: 17px; height: 17px; }
  .inq-tile-tx { font-size: 10.5px; }

  .inq-upload { min-height: 62px; padding: 9px 10px; gap: 9px; }
  .inq-upload-ic { width: 34px; height: 34px; flex-basis: 34px; }
  .inq-upload-btn { padding: 6px 8px; font-size: 9.5px; }
  .inq-upload-copy small { font-size: 8.8px; }

  .inq-trust { margin-top: 11px; padding-bottom: 2px; font-size: 10.5px; gap: 7px 10px; }

  .inq-submit {
    min-height: 54px;
    padding-top: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    font-size: 15px;
  }
}

@media (max-width: 390px) {
  .inq-body-pad { padding-left: 13px; padding-right: 13px; }
  .inq-progress span { font-size: 8.8px; padding-left: 6px; padding-right: 6px; }
  .inq-upload-copy small { display: none; }
  .inq-spec-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE ONLY — branding/footer visibility fix
   Desktop (>900px) remains completely unchanged.
   Footer is pulled into the space reserved above the fixed CTA so
   it appears directly below the trust line and never hides behind
   the bottom "Get the quote on WhatsApp" button.
   ============================================================ */
@media (max-width: 900px) {
  .inq-foot {
    position: relative;
    z-index: 2;
    margin: -70px 16px 0;
    padding: 10px 8px calc(82px + env(safe-area-inset-bottom));
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-tertiary, #777780);
  }
}

/* ============================================================
   v400 — NEW PRINT ORDER REQUEST
   Mobile-first premium order-request UI. Existing admin/ERP CSS is not
   affected because every rule is scoped to .order-request-page.
   ============================================================ */
.order-request-page {
  --or-red: var(--brand-pink, #d81142);
  --or-deep: #8f1230;
  --or-ink: #17161b;
  --or-muted: #6f6d76;
  --or-line: #e7e6eb;
  --or-soft: #faf9fb;
  --or-pink-soft: #fff4f7;
  background:
    radial-gradient(720px 260px at 50% -90px, rgba(216,17,66,.11), transparent 72%),
    #f5f5f7;
  color: var(--or-ink);
}

.order-request-page .inq-wrap {
  width: 100%;
  max-width: 760px;
  padding: 0 0 24px;
}

.order-request-page .order-request-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.order-request-page .order-request-head {
  min-height: 126px;
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(430px 160px at 50% -30px, rgba(216,17,66,.24), transparent 72%),
    linear-gradient(145deg, #171317 0%, #0f1014 68%, #111820 100%);
  border-bottom: 3px solid var(--or-red);
}

.order-request-page .inq-biglogo {
  max-width: min(255px, 72%);
  max-height: 58px;
  object-fit: contain;
}

.order-request-brandline {
  margin-top: 11px;
  color: rgba(255,255,255,.72);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.25px;
}

.order-request-page .inq-close-btn {
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 23px;
  font-weight: 400;
}

.order-request-page .order-request-body {
  padding: 20px 16px 24px;
}

.order-request-page .inq-staffbar {
  margin: 0 0 14px;
  border-radius: 12px;
  border-color: rgba(216,17,66,.18);
  background: #fff5f7;
  color: #a41135;
}
.order-request-page .inq-staffbar span { display:flex; align-items:center; gap:7px; }
.order-request-page .inq-staffbar svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }

.order-request-intro {
  text-align: left;
  padding: 2px 2px 0;
  margin-bottom: 16px;
}
.order-request-eyebrow,
.order-success-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff1f5;
  border: 1px solid rgba(216,17,66,.12);
  color: #ac1238;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .75px;
}
.order-request-intro h1 {
  margin: 9px 0 7px;
  color: var(--or-ink);
  font-size: clamp(27px, 8vw, 36px);
  line-height: 1.05;
  letter-spacing: -.9px;
}
.order-request-intro > p {
  max-width: 640px;
  margin: 0;
  color: var(--or-muted);
  font-size: 13px;
  line-height: 1.55;
}

.order-request-process {
  margin-top: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid var(--or-line);
  border-radius: 14px;
  background: #fbfbfc;
  overflow: hidden;
}
.order-request-process > span {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #8c8a92;
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
}
.order-request-process > span b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eeeef1;
  color: #77757d;
  font-size: 9px;
}
.order-request-process > span.is-active { color: var(--or-deep); }
.order-request-process > span.is-active b {
  background: linear-gradient(145deg, #e9154c, #b70e37);
  color: #fff;
  box-shadow: 0 4px 10px rgba(216,17,66,.25);
}
.order-request-process > i { height: 1px; background: #dedde2; min-width: 8px; }

.order-request-manager {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(216,17,66,.16);
  border-radius: 15px;
  background: linear-gradient(135deg, #fff5f7 0%, #fff 78%);
  box-shadow: 0 5px 18px rgba(73,28,43,.045);
}
.order-request-manager-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: #af1238;
  box-shadow: 0 4px 14px rgba(99,27,50,.09);
}
.order-request-manager-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.order-request-manager > div { min-width: 0; }
.order-request-manager small {
  display: block;
  color: #8c8992;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .55px;
  text-transform: uppercase;
}
.order-request-manager strong {
  display: block;
  margin-top: 1px;
  color: #a81035;
  font-size: 14px;
}
.order-request-manager p {
  margin: 3px 0 0;
  color: #66636d;
  font-size: 11.5px;
  line-height: 1.45;
}

.order-request-alert { margin: 0 0 15px; border-radius: 12px; font-size: 12px; }

.order-request-section {
  margin: 0 0 14px;
  padding: 15px;
  border: 1px solid var(--or-line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(28,24,32,.035);
}
.order-request-section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.order-request-step {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff1f5;
  color: #af1238;
  border: 1px solid rgba(216,17,66,.13);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .3px;
}
.order-request-section-head h2 {
  margin: 0;
  color: var(--or-ink);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.2px;
}
.order-request-section-head p {
  margin: 3px 0 0;
  color: #8a8790;
  font-size: 10.5px;
  line-height: 1.4;
}

.order-request-grid { display: grid; gap: 0; }
.order-request-page .order-request-form .form-group { margin-bottom: 12px; }
.order-request-page .order-request-form .form-label {
  display: block;
  margin-bottom: 6px;
  color: #55525b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .55px;
  text-transform: uppercase;
}
.order-request-page .order-request-form .form-input,
.order-request-page .order-request-form .form-select {
  width: 100%;
  min-height: 48px;
  padding: 12px 13px;
  border: 1px solid #e5e4e8;
  border-radius: 12px;
  background: #fbfbfc;
  color: var(--or-ink);
  box-shadow: none;
  font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.order-request-page .order-request-form textarea.form-input { min-height: 100px; resize: vertical; line-height: 1.5; }
.order-request-page .order-request-form .form-input:focus,
.order-request-page .order-request-form .form-select:focus {
  outline: none;
  background: #fff;
  border-color: rgba(216,17,66,.55);
  box-shadow: 0 0 0 3px rgba(216,17,66,.07);
}
.order-request-page .inq-phone { gap: 8px; }
.order-request-page .inq-cc {
  min-width: 62px;
  border: 1px solid #e5e4e8;
  border-radius: 12px;
  background: #f7f7f9;
  color: #2a282e;
  font-size: 14px;
}
.order-request-page .inq-opt { color: #98959e; font-weight: 600; text-transform: none; letter-spacing: 0; }
.order-request-page .inq-req { color: var(--or-red); }
.inq-field-error {
  display: block;
  min-height: 0;
  margin-top: 5px;
  color: #c1123d;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
}
.order-field.has-error .form-input,
.order-dynamic-field.has-error .form-input { border-color: #d61b48 !important; background: #fff8fa !important; }

.order-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.order-product-card {
  position: relative;
  min-width: 0;
  min-height: 88px;
  padding: 13px 8px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #e2e1e6;
  border-radius: 14px;
  background: #fff;
  color: var(--or-ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(24,21,29,.025);
  transition: transform .12s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.order-product-card:hover { border-color: rgba(216,17,66,.36); box-shadow:0 6px 16px rgba(43,23,31,.055); }
.order-product-card:active { transform: scale(.975); }
.order-product-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #f8f7f9;
  color: #a91236;
}
.order-product-photo {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  overflow: hidden;
  background: #f8f7f9;
  flex: none;
}
.order-product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.order-product-icon svg,
.order-product-check svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.order-product-name { font-size: 11.5px; font-weight: 750; line-height: 1.25; text-align:center; }
.order-product-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d8d7dc;
  color: #fff;
  opacity: 0;
  transform: scale(.72);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.order-product-check svg { width:12px; height:12px; stroke-width:2.4; }
.order-product-card.on {
  border-color: var(--or-red);
  background: var(--or-pink-soft);
  box-shadow: 0 6px 18px rgba(190,15,56,.095);
}
.order-product-card.on .order-product-icon { background:#fff; color:var(--or-red); box-shadow:0 4px 12px rgba(123,24,55,.08); }
.order-product-card.on .order-product-name { color:#9f1032; }
.order-product-card.on .order-product-check { opacity:1; transform:scale(1); background:var(--or-red); }
.order-product-error { margin-top: 7px; }

.order-dynamic-panel {
  margin-top: 13px;
  padding: 13px 12px 2px;
  border: 1px solid rgba(216,17,66,.15);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff8fa 0%, #fff 44%);
  animation: orderPanelIn .18s ease-out;
}
.order-dynamic-panel[hidden] { display:none !important; }
@keyframes orderPanelIn { from { opacity:.4; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.order-dynamic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.order-dynamic-head small {
  display:block;
  color:#ae1237;
  font-size:8px;
  font-weight:900;
  letter-spacing:.7px;
}
.order-dynamic-head h3 { margin:2px 0 0; font-size:13px; color:#29262d; }
.order-dynamic-head > span { max-width:120px; color:#96939b; font-size:9px; line-height:1.3; text-align:right; }
.order-dynamic-grid { display:grid; grid-template-columns:1fr; gap:0; }
.order-dynamic-field { min-width:0; }
.order-dynamic-wide { grid-column:1 / -1; }
.order-dynamic-field textarea.form-input { min-height:112px; }

.order-request-page .order-request-upload {
  min-height: 70px;
  border-color: rgba(216,17,66,.25);
  background: #fffafb;
}
.order-request-page .inq-upload-copy strong { font-size: 11.5px; }
.order-request-page .inq-upload-copy small { font-size: 9px; color:#8d8992; }
.order-request-page .inq-upload-btn { background:#17161b; border-radius:9px; padding:8px 10px; }

.order-rate-card,
.order-request-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-radius: 14px;
}
.order-rate-card {
  margin: 2px 0 10px;
  padding: 13px 14px;
  border: 1px solid rgba(24,135,82,.17);
  background: #f3fbf7;
}
.order-rate-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background:#fff;
  color:#148151;
  box-shadow:0 3px 10px rgba(20,129,81,.08);
}
.order-rate-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.order-rate-card strong { display:block; color:#176c48; font-size:12.5px; }
.order-rate-card p { margin:3px 0 0; color:#5f766b; font-size:10.5px; line-height:1.45; }
.order-request-note {
  margin-bottom: 13px;
  padding: 10px 11px;
  background:#f7f7f9;
  color:#6a6770;
}
.order-request-note > span { width:18px; flex:0 0 18px; color:#77747d; }
.order-request-note svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.order-request-note p { margin:0; font-size:10px; line-height:1.45; }

.order-request-page .order-request-submit {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: 54px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ed164d 0%, #c70f3d 58%, #9a0d2f 100%);
  box-shadow: 0 10px 24px rgba(190,13,57,.24);
  font-size: 15px;
  font-weight: 800;
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease, filter .15s ease;
}
.order-request-page .order-request-submit svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.order-request-page .order-request-submit:not(:disabled):hover { filter:brightness(1.02); box-shadow:0 13px 28px rgba(190,13,57,.29); }
.order-request-page .order-request-submit:not(:disabled):active { transform:scale(.985); }
.order-request-page .order-request-submit:disabled {
  background:#d9d8dc;
  color:#8a8890;
  box-shadow:none;
  opacity:1;
  cursor:not-allowed;
}
.order-request-page .order-request-form { padding-bottom:0 !important; }

.order-request-trust {
  margin-top: 12px;
  padding: 0 2px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
}
.order-request-trust > span {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#737079;
  font-size:8.8px;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
}
.order-request-trust svg { width:12px; height:12px; flex:0 0 12px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

.order-request-page .order-request-foot {
  position: static !important;
  z-index: auto;
  margin: 13px 16px 0 !important;
  padding: 9px 8px 0 !important;
  color: #85828b;
  font-size: 9.5px;
  line-height: 1.5;
}
.order-request-foot strong { color:#5e5b64; }

/* Success state */
.order-success {
  max-width: 560px;
  margin: 4px auto 0;
  padding: 18px 4px 8px;
  text-align:center;
}
.order-success-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: linear-gradient(145deg,#15905a,#0b7346);
  color:#fff;
  box-shadow:0 10px 24px rgba(21,144,90,.2);
}
.order-success-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.order-success-icon-muted { background:#f0eff2; color:#77747c; box-shadow:none; }
.order-success h1 { margin:10px 0 7px; font-size:26px; letter-spacing:-.7px; }
.order-success > p { margin:0 auto 14px; max-width:440px; color:#706d76; font-size:12.5px; line-height:1.55; }
.order-success-manager {
  margin:0 auto 14px;
  padding:12px 13px;
  max-width:460px;
  border:1px solid rgba(216,17,66,.15);
  border-radius:13px;
  background:#fff6f8;
  text-align:left;
}
.order-success-manager strong { display:block; color:#a61135; font-size:12.5px; }
.order-success-manager span { display:block; margin-top:3px; color:#6e6972; font-size:10.5px; line-height:1.45; }
.order-success-ref { margin-bottom:13px; }
.order-success-wa {
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:13px;
  background:#128c56;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(18,140,86,.18);
}
.order-success-wa svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.order-success-again { display:inline-block; margin-top:13px; color:#8b1433; font-size:11px; font-weight:750; text-decoration:none; }

@media (min-width: 640px) {
  .order-request-page .inq-wrap { padding: 26px 18px 42px; max-width: 920px; }
  .order-request-page .order-request-card { border:1px solid rgba(29,26,34,.08); border-radius:20px; box-shadow:0 22px 60px rgba(28,22,31,.10); overflow:hidden; }
  .order-request-page .order-request-head { min-height:138px; }
  .order-request-page .order-request-body { padding:26px 28px 30px; }
  .order-request-intro { text-align:center; }
  .order-request-intro > p { margin-left:auto; margin-right:auto; }
  .order-request-process { max-width:590px; margin-left:auto; margin-right:auto; }
  .order-request-grid-2 { grid-template-columns:1fr 1fr; gap:0 14px; }
  .order-field-full { grid-column:1 / -1; }
  .order-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .order-dynamic-grid { grid-template-columns:1fr 1fr; gap:0 12px; }
  .order-request-section { padding:18px; }
  .order-request-section-head h2 { font-size:16px; }
  .order-request-page .order-request-submit { max-width:420px; margin-left:auto; margin-right:auto; }
  .order-request-trust { max-width:520px; margin-left:auto; margin-right:auto; }
  .order-request-page .order-request-foot { margin-top:14px !important; }
}

@media (min-width: 901px) {
  .order-request-page .inq-wrap { max-width: 1040px; padding-top:34px; }
  .order-request-page .order-request-head { min-height:150px; }
  .order-request-page .inq-biglogo { max-width:320px; max-height:68px; }
  .order-request-page .order-request-body { padding:30px 42px 36px; }
  .order-request-manager { max-width:760px; margin-left:auto; margin-right:auto; }
  .order-request-form { max-width:880px; margin:0 auto; }
  .order-product-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
  .order-product-card { min-height:104px; }
  .order-request-section { margin-bottom:18px; padding:20px; }
  .order-dynamic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
  .order-request-page .order-request-foot { margin:16px 0 0 !important; }
}

@media (max-width: 370px) {
  .order-request-page .order-request-body { padding-left:12px; padding-right:12px; }
  .order-request-section { padding:13px 11px; }
  .order-request-process { gap:3px; padding-left:7px; padding-right:7px; }
  .order-request-process > span { font-size:7.6px; }
  .order-product-card { min-height:82px; }
  .order-request-trust > span { font-size:8px; }
  .order-request-page .inq-upload-copy small { display:block; }
}

/* Customer portal version of the same Order Request experience. */
.portal-order-request {
  background: transparent;
  color: var(--or-ink, #17161b);
}
.portal-order-request .portal-order-request-shell {
  max-width: 980px;
  margin: 0 auto 18px;
}
.portal-order-request .portal-request-intro {
  padding: 18px 18px 4px;
  margin-bottom: 12px;
  border: 1px solid #eceaf0;
  border-radius: 18px;
  background:
    radial-gradient(420px 150px at 100% 0, rgba(216,17,66,.06), transparent 70%),
    #fff;
  box-shadow: 0 8px 26px rgba(29,24,33,.05);
}
.portal-order-request .portal-request-manager {
  max-width: none;
  margin: 0 0 14px;
}
.portal-order-request .order-request-form {
  max-width: none;
}
.portal-order-request .order-request-section {
  box-shadow: 0 7px 22px rgba(29,24,33,.045);
}
.portal-order-request-success {
  max-width: 980px;
  margin: 0 auto 14px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid rgba(21,144,90,.18);
  border-radius: 17px;
  background: linear-gradient(135deg,#f1fbf6,#fff 72%);
  box-shadow: 0 7px 22px rgba(20,90,60,.055);
  position: relative;
  overflow: hidden;
}
.portal-order-request-success-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #148a56;
  color: #fff;
  position: relative;
  animation: portalOrderIconPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.portal-order-request-success-icon::before,
.portal-order-request-success-icon::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(21,144,90,.32);
  animation: portalOrderPulseRing 1.8s ease-out infinite;
}
.portal-order-request-success-icon::after { animation-delay: .5s; }
@keyframes portalOrderPulseRing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes portalOrderIconPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.portal-order-request-success-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.portal-order-request-success-copy { min-width:0; flex:1; }
.portal-order-request-success-copy > small,
.portal-order-request-success-copy h2,
.portal-order-request-success-copy > p,
.portal-order-request-success-manager,
.portal-order-request-success-actions {
  animation: portalOrderFadeUp .5s ease both;
}
.portal-order-request-success-copy > small { animation-delay: .05s; color:#23805a; font-size:8.5px; font-weight:900; letter-spacing:.65px; }
.portal-order-request-success-copy h2 { animation-delay: .12s; margin:2px 0 3px; color:#1f3d31; font-size:17px; }
.portal-order-request-success-copy > p { animation-delay: .18s; margin:0; color:#607169; font-size:11.5px; line-height:1.45; }
.portal-order-request-success-manager { animation-delay: .28s; margin-top:8px; color:#5f6e67; font-size:10.5px; line-height:1.4; }
.portal-order-request-success-manager strong { color:#18744c; }
.portal-order-request-success-actions { animation-delay: .36s; margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
@keyframes portalOrderFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .portal-order-request-success-icon,
  .portal-order-request-success-icon::before,
  .portal-order-request-success-icon::after,
  .portal-order-request-success-copy > small,
  .portal-order-request-success-copy h2,
  .portal-order-request-success-copy > p,
  .portal-order-request-success-manager,
  .portal-order-request-success-actions { animation: none !important; }
}
.portal-request-ref { color:#6e7b74; font-size:10.5px; }
.portal-request-wa {
  min-height:34px;
  padding:7px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:9px;
  background:#138b56;
  color:#fff;
  text-decoration:none;
  font-size:10.5px;
  font-weight:800;
}
.portal-request-wa svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.portal-request-history {
  max-width: 980px;
  margin: 18px auto 0;
  padding: 15px;
  border: 1px solid #eceaf0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(29,24,33,.04);
}
.portal-request-history-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.portal-request-history-head small { display:block; color:#9a969f; font-size:8px; font-weight:900; letter-spacing:.65px; }
.portal-request-history-head h2 { margin:1px 0 0; font-size:15px; color:#252229; }
.portal-request-history-head > span { min-width:30px; height:30px; padding:0 8px; display:grid; place-items:center; border-radius:10px; background:#f5f4f6; color:#76727c; font-size:10px; font-weight:800; }
.portal-request-list { display:grid; gap:8px; }
.portal-request-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid #eceaf0;
  border-radius:12px;
  background:#fbfbfc;
}
.portal-request-item-main { display:flex; align-items:center; gap:9px; min-width:0; }
.portal-request-item-icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:9px; background:#fff1f5; color:#ac1238; }
.portal-request-item-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.portal-request-item-main > div { min-width:0; }
.portal-request-item-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#29262d; font-size:11.5px; }
.portal-request-item-main small { display:block; margin-top:2px; color:#96929b; font-size:9px; }
.portal-request-status { flex:0 0 auto; padding:5px 8px; border-radius:999px; font-size:8.5px; font-weight:800; }
.portal-request-status.is-pending { background:#fff4df; color:#9a6300; }
.portal-request-status.is-confirmed { background:#eaf8f1; color:#117047; }
.portal-request-status.is-closed { background:#f5f4f6; color:#77737c; }

@media (max-width: 900px) {
  .portal-order-request { margin: 0 -2px; }
  .portal-order-request .portal-request-intro { padding:15px 14px 4px; border-radius:15px; }
  .portal-order-request .order-request-section { padding:14px 12px; border-radius:15px; }
  .portal-order-request .order-product-card { min-height:82px; }
  .portal-order-request-success { padding:13px; border-radius:14px; }
  .portal-order-request-success-copy h2 { font-size:15px; }
  .portal-request-history { padding:12px; border-radius:15px; }
}


/* ============================================================
   v301 — Order Request mobile polish
   - Mobile-only centered request heading.
   - Submit action stays visible while the form scrolls.
   - In the customer portal it sits directly above the native
     mobile tab bar; desktop rules are intentionally untouched.
   ============================================================ */
@media (max-width: 900px) {
  /* "NEW PRINT ORDER REQUEST" + "Order Request" stay centered in the app. */
  .order-request-page .order-request-intro,
  .portal-order-request .portal-request-intro {
    text-align: center;
  }
  .order-request-page .order-request-intro > p,
  .portal-order-request .portal-request-intro > p {
    margin-left: auto;
    margin-right: auto;
  }

  /* Public/share Order Request page: persistent bottom action. */
  .order-request-page .order-request-form {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .order-request-page .order-request-submit {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 970 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 54px;
    margin: 0 !important;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(126, 9, 39, .30);
  }

  /* Customer portal: keep the CTA fixed just ABOVE the mobile menu bar. */
  .portal-order-request .order-request-form {
    padding-bottom: calc(var(--tab-bar-h, 60px) + 104px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .portal-order-request .order-request-submit {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--tab-bar-h, 60px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    z-index: 945 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 52px;
    margin: 0 !important;
    border-radius: 15px !important;
    box-shadow: 0 9px 26px rgba(126, 9, 39, .28) !important;
  }

  /* Keep trust/content from visually colliding with the fixed action. */
  .portal-order-request .order-request-trust {
    margin-bottom: 4px;
  }
}


/* ============================================================
   v302 — FULL-PAGE DESKTOP ORDER REQUEST + OPTIONAL PRODUCT SPECS
   Public desktop Order Request now uses the browser width instead of a
   centered modal/card. The primary action remains visible at the bottom.
   Mobile rules from v301 stay unchanged.
   ============================================================ */
.order-dynamic-optional {
  margin-left: 5px;
  color: #9a969f;
  font-size: .92em;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 901px) {
  .order-request-page {
    min-height: 100vh;
    background: #f7f7f9;
  }

  .order-request-page .inq-wrap {
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: 0 0 104px !important;
  }

  .order-request-page .order-request-card {
    width: 100%;
    min-height: calc(100vh - 104px);
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: #f7f7f9;
  }

  /* Full-width branded desktop header with the original ARMAAN PRESS logo. */
  .order-request-page .order-request-head {
    width: 100%;
    min-height: 112px !important;
    padding: 18px 54px !important;
    border-radius: 0;
    box-shadow: 0 6px 22px rgba(17, 14, 18, .10);
  }
  .order-request-page .inq-biglogo {
    width: auto;
    max-width: 300px !important;
    max-height: 60px !important;
  }
  .order-request-page .order-request-brandline {
    margin-top: 7px;
    font-size: 9px;
  }
  .order-request-page .inq-close-btn {
    top: 24px;
    right: 34px;
  }

  /* Use the desktop canvas instead of the old narrow centered form. */
  .order-request-page .order-request-body {
    width: min(1480px, calc(100% - 64px));
    margin: 0 auto;
    padding: 26px 0 126px !important;
  }
  .order-request-page .inq-staffbar {
    margin-bottom: 16px;
  }
  .order-request-page .order-request-intro {
    max-width: 1120px;
    margin: 0 auto 18px;
    text-align: center;
  }
  .order-request-page .order-request-intro > p {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  .order-request-page .order-request-process {
    max-width: 720px;
  }
  .order-request-page .order-request-manager {
    width: 100%;
    max-width: none !important;
    margin: 0 0 18px;
    padding: 15px 18px;
  }
  .order-request-page .order-request-form {
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding-bottom: 34px !important;
  }
  .order-request-page .order-request-section {
    margin-bottom: 18px;
    padding: 22px 24px;
    border-radius: 18px;
    box-shadow: 0 7px 24px rgba(31, 26, 34, .045);
  }

  /* Customer details use the available desktop width cleanly. */
  .order-request-page .order-request-grid-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0 16px;
  }
  .order-request-page .order-field-full {
    grid-column: auto !important;
  }

  /* All six main print categories stay on one professional row. */
  .order-request-page .order-product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  .order-request-page .order-product-card {
    min-height: 104px;
    padding: 14px 10px 12px;
    border-radius: 15px;
  }

  /* Product-specific size/material/colour/etc. use three desktop columns. */
  .order-request-page .order-dynamic-panel {
    padding: 17px 16px 5px;
  }
  .order-request-page .order-dynamic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 15px;
  }
  .order-request-page .order-dynamic-wide {
    grid-column: 1 / -1;
  }

  /* Persistent desktop action: always available while the page scrolls. */
  .order-request-page .order-request-submit {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    z-index: 1200 !important;
    width: min(620px, calc(100vw - 84px)) !important;
    max-width: 620px !important;
    min-height: 56px;
    margin: 0 !important;
    transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 16px;
    box-shadow:
      0 14px 34px rgba(126, 9, 39, .30),
      0 0 0 8px rgba(255,255,255,.90);
  }
  .order-request-page .order-request-submit:not(:disabled):hover {
    transform: translateX(-50%) translateY(-1px);
  }
  .order-request-page .order-request-submit:not(:disabled):active {
    transform: translateX(-50%) scale(.985);
  }
  .order-request-page .order-request-submit:disabled {
    transform: translateX(-50%);
  }
  .order-request-page .order-request-trust {
    max-width: 620px;
    margin: 14px auto 0;
  }
  .order-request-page .order-request-foot {
    margin: 8px auto 0 !important;
    padding-bottom: 74px !important;
    text-align: center;
  }
}


/* ============================================================
   v303 — MOBILE COMPACT PRODUCT DETAILS
   Only phones: show product-specific optional fields two per row.
   Desktop/tablet rules stay unchanged.
   ============================================================ */
@media (max-width: 639px) {
  .order-request-page .order-dynamic-panel {
    margin-top: 10px;
    padding: 11px 10px 3px;
    border-radius: 13px;
  }

  .order-request-page .order-dynamic-head {
    gap: 7px;
    margin-bottom: 8px;
  }
  .order-request-page .order-dynamic-head small {
    font-size: 7.5px;
  }
  .order-request-page .order-dynamic-head h3 {
    font-size: 12px;
    line-height: 1.25;
  }
  .order-request-page .order-dynamic-head > span {
    max-width: 92px;
    font-size: 8px;
    line-height: 1.2;
  }

  .order-request-page .order-dynamic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
  }
  .order-request-page .order-dynamic-field {
    min-width: 0;
    margin-bottom: 8px !important;
  }
  .order-request-page .order-dynamic-wide {
    grid-column: 1 / -1 !important;
  }

  .order-request-page .order-dynamic-field .form-label {
    min-height: 23px;
    margin-bottom: 4px;
    font-size: 8.2px;
    line-height: 1.15;
    letter-spacing: .32px;
  }
  .order-request-page .order-dynamic-optional {
    display: inline;
    margin-left: 3px;
    font-size: 7.5px;
  }
  .order-request-page .order-dynamic-field .form-input,
  .order-request-page .order-dynamic-field .form-select {
    min-height: 42px;
    height: 42px;
    padding: 8px 9px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
  }
  .order-request-page .order-dynamic-field select.form-select {
    padding-right: 27px;
    text-overflow: ellipsis;
  }
  .order-request-page .order-dynamic-field textarea.form-input {
    height: auto;
    min-height: 76px;
    padding: 9px 10px;
    line-height: 1.35;
  }
}

/* ============================================================
   v304 — DESKTOP ONLY: PREMIUM TRUST CHIPS + TIGHTER BOTTOM SPACE
   Mobile/tablet layout is intentionally untouched.
   ============================================================ */
@media (min-width: 901px) {
  /* Turn the three plain trust labels into compact premium chips. */
  .order-request-page .order-request-trust {
    max-width: 760px;
    margin: 14px auto 0;
    padding: 0;
    gap: 10px;
  }

  .order-request-page .order-request-trust > span {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #e9e6eb;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
    color: #4f4c55;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 5px 16px rgba(31,26,34,.045);
  }

  .order-request-page .order-request-trust > span svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    padding: 3px;
    box-sizing: content-box;
    border-radius: 8px;
    background: #fff1f5;
    color: #c7103e;
  }

  .order-request-page .order-request-trust > span:nth-child(2) svg {
    background: #fff8e9;
    color: #a86a00;
  }

  .order-request-page .order-request-trust > span:nth-child(3) svg {
    background: #eefaf3;
    color: #12814f;
  }

  /* Keep the footer closer to the form while still reserving room
     for the fixed Send Order Request button. */
  .order-request-page .order-request-body {
    padding-bottom: 42px !important;
  }

  .order-request-page .order-request-form {
    padding-bottom: 0 !important;
  }

  .order-request-page .order-request-foot {
    margin-top: 8px !important;
    padding-top: 4px !important;
    padding-bottom: 78px !important;
  }
}

/* Order Request multi-file upload — up to 3 professional design/reference files */
.order-request-page .order-request-upload.has-files,
.portal-order-request .order-request-upload.has-files {
  border-color:rgba(216,17,66,.38) !important;
  background:linear-gradient(135deg,#fff7fa,#fff) !important;
  box-shadow:0 0 0 3px rgba(216,17,66,.035);
}
.order-request-page .order-request-upload.has-files .inq-upload-ic,
.portal-order-request .order-request-upload.has-files .inq-upload-ic {
  color:#fff;
  background:linear-gradient(145deg,#ec174b,#b20e39);
  border-color:transparent;
  position:relative;
}
.order-request-page .order-request-upload.has-files .inq-upload-ic::after,
.portal-order-request .order-request-upload.has-files .inq-upload-ic::after {
  content:"";
  position:absolute;
  top:-5px;
  right:-5px;
  width:17px;
  height:17px;
  border-radius:50%;
  background-color:#17a34a;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:9px 9px;
}
.order-request-page .order-request-upload.has-upload-error,
.portal-order-request .order-request-upload.has-upload-error {
  border-color:#e5484d !important;
  background:#fff5f5 !important;
  animation:orderUploadShake .22s ease-in-out 0s 2;
}
@keyframes orderUploadShake {
  0%,100% { transform:translateX(0); }
  50% { transform:translateX(-3px); }
}
@media (max-width:700px) {
  .order-request-page .order-request-upload .inq-upload-copy strong,
  .portal-order-request .order-request-upload .inq-upload-copy strong {
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .order-request-page .order-request-upload .inq-upload-copy small,
  .portal-order-request .order-request-upload .inq-upload-copy small {
    line-height:1.35;
  }
}


/* ============================================================
   v306 — MOBILE ORDER REQUEST TRUST + BRAND FOOTER FIX
   Mobile/tablet only. Desktop remains unchanged.
   ============================================================ */
@media (max-width: 900px) {
  /* Same premium trust treatment used on desktop, scaled for app width. */
  .order-request-page .order-request-trust,
  .portal-order-request .order-request-trust {
    max-width: none;
    margin: 12px 0 0;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
  }

  .order-request-page .order-request-trust > span,
  .portal-order-request .order-request-trust > span {
    min-width: 0;
    min-height: 48px;
    padding: 7px 5px;
    gap: 5px;
    border: 1px solid #ebe8ed;
    border-radius: 12px;
    background: rgba(255,255,255,.98);
    color: #55515a;
    font-size: 8.7px;
    font-weight: 800;
    line-height: 1.15;
    white-space: normal;
    box-shadow: 0 5px 15px rgba(31,26,34,.05);
  }

  .order-request-page .order-request-trust > span svg,
  .portal-order-request .order-request-trust > span svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    box-sizing: content-box;
    padding: 3px;
    border-radius: 7px;
    background: #fff1f5;
    color: #c7103e;
  }
  .order-request-page .order-request-trust > span:nth-child(2) svg,
  .portal-order-request .order-request-trust > span:nth-child(2) svg {
    background: #fff8e9;
    color: #a86a00;
  }
  .order-request-page .order-request-trust > span:nth-child(3) svg,
  .portal-order-request .order-request-trust > span:nth-child(3) svg {
    background: #eefaf3;
    color: #12814f;
  }

  /* Keep ARMAAN PRESS + tagline visible above the fixed submit CTA. */
  .order-request-page .order-request-foot,
  .portal-order-request .order-request-foot {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    margin: 12px 12px 0 !important;
    padding: 10px 10px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid #ece9ee;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    color: #77737d !important;
    text-align: center;
    font-size: 9.2px !important;
    line-height: 1.45 !important;
  }
  .order-request-page .order-request-foot strong,
  .portal-order-request .order-request-foot strong {
    color: #2d2a31 !important;
    font-weight: 900;
    letter-spacing: .04em;
  }
}

@media (max-width: 390px) {
  .order-request-page .order-request-trust,
  .portal-order-request .order-request-trust { gap: 5px; }
  .order-request-page .order-request-trust > span,
  .portal-order-request .order-request-trust > span {
    min-height: 46px;
    padding: 6px 3px;
    font-size: 7.8px;
  }
}

/* ============================================================
   v307 — MOBILE ONLY: remove duplicate CTA reserve gap
   The fixed Send Order Request button is already protected by the
   footer's bottom padding, so the form itself must not reserve the
   same space again. Desktop and customer-portal layouts untouched.
   ============================================================ */
@media (max-width: 900px) {
  .order-request-page .order-request-form {
    padding-bottom: 0 !important;
  }

  .order-request-page .order-request-foot {
    margin-top: 7px !important;
  }
}