/* RequestInquiry "ArjangCustomOrder" — Figma "Custom Order" (390 wide; the skin keeps a phone-width column).
   Page on the maroon row: cream text; sheets: paper colour #EBDBBE with the torn paper edge. */
.arj-co { color: #FFEBC9; padding: 24px 0 40px; text-align: center; }
.arj-co *, .arj-co *::before, .arj-co *::after, .arj-co-sheet *, .arj-co-sheet *::before, .arj-co-sheet *::after { box-sizing: border-box; }
.arj-co h1, .arj-co h2 { margin: 0; font-size: 17px; line-height: 32px; font-weight: 700; color: #FFEBC9; }

/* the four steps: zig-zag (Figma: right 283, left 372, right 477, left 567) */
.arj-co-steps ol { position: relative; list-style: none; margin: 32px auto 0; padding: 0; height: 446px; max-width: 378px; }
.arj-co-steps li { position: absolute; width: 49%; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.arj-co-steps li:nth-child(odd) { right: 0; }
.arj-co-steps li:nth-child(even) { left: 0; }
.arj-co-steps li:nth-child(1) { top: 0; }
.arj-co-steps li:nth-child(2) { top: 89px; }
.arj-co-steps li:nth-child(3) { top: 194px; }
.arj-co-steps li:nth-child(4) { top: 284px; }
.arj-co-steps li img { width: 50px; height: 50px; display: block; }
.arj-co-steps li b { font-weight: 400; font-size: 15px; line-height: 30px; color: #FFEBC9; }
.arj-co-steps li span { font-size: 12px; line-height: 24px; color: #F5F5F5; max-width: 180px; }

/* design sources */
.arj-co-sources { margin-top: 70px; }
.arj-co-sources > p { text-align: center; text-align-last: center; margin: 14px 0 20px; font-size: 15px; line-height: 30px; }
.arj-co-src { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
.arj-co-src img { width: 326px; max-width: 84%; height: auto; display: block; }
/* glass capsule button (Figma Navigation Bar 347x59 with the 318x38 inner pill) */
.arj-co-glass { display: flex; align-items: center; justify-content: center; width: 347px; max-width: calc(100% - 32px); height: 59px; margin-top: 0; padding: 0 14px; border: 1px solid #7c7b77; border-radius: 50px; background: rgba(71, 71, 71, .2); cursor: pointer; text-decoration: none !important; font: inherit; }
.arj-co-glass span { display: flex; align-items: center; justify-content: center; width: 100%; height: 38.4px; border: 1px solid #8a6738; border-radius: 50px; background: rgba(217, 217, 217, .2); color: #FFEBC9; font-size: 14px; font-weight: 500; text-shadow: 0 2px 2px rgba(0, 0, 0, .5); }
.arj-co-glass:hover span { border-color: #C49E31; }

/* sheets (moved to <body>; placed over the site column by the script) */
.arj-co-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: flex-start; direction: ltr; overflow-y: auto; padding-top: 70px; background: rgba(29, 29, 29, .85); color: #1D1D1D; font-size: 15px; line-height: 30px; }
.arj-co-sheet[hidden] { display: none; }
.arj-co-box { position: relative; direction: rtl; width: var(--arj-col-w, 100%); max-width: 100%; margin: auto 0 0 var(--arj-col-x, 0px); padding: 18px 25px 28px; background: #EBDBBE; display: flex; flex-direction: column; animation: arj-co-up .25s ease-out; }
.arj-co-box::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 65px; margin-bottom: -1px; background: url(../images/paper.png) center bottom / 100% 100% no-repeat; pointer-events: none; }
@keyframes arj-co-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.arj-co-x { position: absolute; top: 18px; left: 28px; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.arj-co-x img { display: block; }
.arj-co-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 18px; }
.arj-co-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(127, 253, 191, .2); }
.arj-co-head b { font-weight: 400; font-size: 12px; line-height: 24px; margin-top: 6px; }
.arj-co-head small { font-size: 12px; line-height: 24px; }
.arj-co-body { display: flex; flex-direction: column; }
.arj-co-label { display: block; margin: 10px 4px 10px 0; font-size: 14px; line-height: 28px; color: #53565A; text-align: right; }
.arj-co-field { position: relative; display: flex; align-items: center; min-height: 60px; padding: 8px 20px; border-radius: 150px; background: rgba(232, 195, 128, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.arj-co-field input, .arj-co-field select, .arj-co-field textarea { width: 100%; min-width: 0; border: 0; background: none; color: #1D1D1D; font: inherit; font-size: 15px; outline: 0; }
.arj-co-field.arj-invalid { box-shadow: inset 0 0 0 1px #950000; }
.arj-co-select select { appearance: none; -webkit-appearance: none; text-align: right; padding-left: 30px; cursor: pointer; }
.arj-co-select img { position: absolute; left: 20px; pointer-events: none; }
.arj-co-dims { margin-top: 8px; gap: 10px; }
.arj-co-dims input { text-align: center; }
.arj-co-dims span { color: #6F6F6F; }
.arj-co-qty { justify-content: space-between; padding: 0 80px; }
.arj-co-qty button { width: 32px; height: 32px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.arj-co-qty output { font-size: 23px; line-height: 40px; }
.arj-co-area { align-items: stretch; min-height: 204px; padding: 14px 18px 26px; border-radius: 30px; }
.arj-co-area textarea { resize: none; line-height: 26px; }
.arj-co-area small { position: absolute; left: 14px; bottom: 6px; font-size: 10px; line-height: 20px; color: #53565A; }
.arj-co-file { cursor: pointer; justify-content: center; gap: 6px; }
.arj-co-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.arj-co-file span { font-size: 14px; line-height: 28px; }
.arj-co-files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arj-co-files li { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 150px; background: rgba(1, 157, 89, .2); font-size: 12px; line-height: 20px; }
.arj-co-files li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.arj-co-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 14px 4px 0 0; padding: 0; border: 0; background: none; color: #53565A; font: inherit; font-size: 12px; line-height: 24px; cursor: pointer; }
.arj-co-rows { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.arj-co-rows li { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 16px 0 10px; border-radius: 150px; background: rgba(1, 157, 89, .2); font-size: 10px; line-height: 20px; color: #1D1D1D; }
.arj-co-rows li span:last-of-type { margin-inline-end: auto; }
.arj-co-del { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; }
.arj-co-cta { display: flex; flex-direction: row; gap: 15px; margin-top: 24px; }
.arj-co-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 16px; border-radius: 150px; font: inherit; font-size: 15px; line-height: 30px; text-decoration: none !important; cursor: pointer; }
.arj-co-dark { border: 1px solid #752c2c; background: #4a0505; color: #FFEBC9 !important; }
.arj-co-dark:hover { background: #5e0a0a; }
.arj-co-line { border: 1px solid #C49E31; background: #EBDBBE; color: #1D1D1D !important; }
.arj-co-btn.arj-busy { opacity: .6; pointer-events: none; }
.arj-co-done { align-items: center; text-align: center; padding-top: 36px; }
.arj-co-done b { margin-top: 8px; font-weight: 400; font-size: 14px; line-height: 28px; color: #019D59; }
.arj-co-done p { margin: 10px auto 0; max-width: 278px; font-size: 12px; line-height: 24px; color: #53565A; }
.arj-co-track { margin-top: 6px; font-size: 12px; color: #1D1D1D; }
.arj-co-done .arj-co-cta { width: 100%; margin-top: 22px; }
.arj-co-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100001; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 14px; background: #4a0505; color: #FFEBC9; font-size: 13px; line-height: 24px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.arj-co-toast.arj-err { background: #950000; }
html.arj-lock, html.arj-lock body { overflow: hidden; }
/* [hidden] must win over the fields' display:flex */
.arj-co-sheet [hidden] { display: none !important; }
/* the skin justifies every <p> with text-align-last: right; this page's texts are centred like the design */
.arj-co p, .arj-co-sheet p { text-align: center; text-align-last: center; }
/* the dashboard card «درخواست سایز اختصاصی» (Figma 30419:10182): the three sources inside the dashboard card, no steps */
.arj-co.arj-co-dashmode { padding: 0 0 24px; }
.arj-co-dashcard { text-align: center; }
.arj-co-dashcard .arj-inq-head { margin-bottom: 30px; text-align: right; }
.arj-co-dashcard .arj-co-src { margin-bottom: 40px; }
.arj-co-dashcard .arj-co-src:last-child { margin-bottom: 8px; }
.arj-co-dashcard .arj-co-src img { width: 250px; max-width: 76%; }
.arj-co-dashcard .arj-co-glass { margin-top: 30px; max-width: 100%; }
/* feedback 1405-08-04: «طرح در جهت خودش چاپ می‌شود» under the size */
.arj-co-print { display: flex; align-items: center; gap: 8px; margin: 10px 4px 2px; color: #7a4a12; font-size: 12.5px; line-height: 20px; text-align: right; }
.arj-co-print b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #C49E31; color: #fff; font-size: 12px; line-height: 1; }
/* SEO 1405-08-04: the page's h1 above the steps */
.arj-co .arj-co-h1 { margin: 0 16px 22px; text-align: center; }