/* ============================================================
   چاپ ساسان — استایل اصلی
   رنگ‌بندی: مشکی (#1a1a1a) + قرمز (#cc0000) — متناسب با لوگو
   ============================================================ */

:root {
  --primary: #cc0000;
  --primary-dark: #990000;
  --primary-light: #e60000;
  --accent: #cc0000;
  --accent-dark: #990000;
  --accent-light: #ff3333;
  --secondary: #1a1a1a;
  --secondary-light: #333333;
  --success: #10b981;
  --danger: #ef4444;
  --info: #3b82f6;
  --warning: #f59e0b;
  --dark: #0f0f0f;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow: 0 4px 20px rgba(0,0,0,.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.15);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.2);
  --transition: all .3s cubic-bezier(.4,0,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Vazirmatn', sans-serif;
  background: var(--gray-50);
  color: var(--gray-800);
  line-height: 1.7;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ============================================================ Header */
.cs-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 2px solid var(--primary);
  transition: var(--transition);
}
.cs-header.scrolled { box-shadow: var(--shadow); }
.cs-header-inner {
  max-width: 1280px; margin: 0 auto;
  padding: .7rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cs-logo {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; font-weight: 800; font-size: 1.3rem;
  color: var(--secondary); white-space: nowrap;
}
.cs-logo img { height: 44px; width: auto; object-fit: contain; }
.cs-logo-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(204,0,0,.3);
}
.cs-nav { display: flex; align-items: center; gap: .2rem; }
.cs-nav-link {
  padding: .5rem .9rem; border-radius: var(--radius-sm);
  color: var(--gray-600); text-decoration: none; font-weight: 500; font-size: .9rem;
  cursor: pointer; border: none; background: none; font-family: inherit;
  transition: var(--transition);
}
.cs-nav-link:hover { background: rgba(204,0,0,.08); color: var(--primary); }
.cs-nav-link.active { color: var(--primary); font-weight: 700; }
.cs-header-actions { display: flex; align-items: center; gap: .5rem; }

/* ============================================================ Buttons */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.4rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .9rem; border: none; cursor: pointer;
  font-family: inherit; text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.cs-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; box-shadow: 0 4px 14px rgba(204,0,0,.3);
}
.cs-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(204,0,0,.4); }

.cs-btn-secondary {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
  color: #fff;
}
.cs-btn-secondary:hover { transform: translateY(-2px); }

.cs-btn-accent {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; box-shadow: 0 4px 14px rgba(204,0,0,.3);
}
.cs-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(204,0,0,.4); }

.cs-btn-outline {
  background: transparent; border: 2px solid var(--gray-200); color: var(--gray-700);
}
.cs-btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(204,0,0,.05); }
.cs-btn-ghost { background: transparent; color: var(--gray-600); }
.cs-btn-ghost:hover { background: var(--gray-100); }
.cs-btn-danger { background: var(--danger); color: #fff; }
.cs-btn-success { background: var(--success); color: #fff; }
.cs-btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.cs-btn-sm { padding: .4rem .9rem; font-size: .82rem; }
.cs-btn-xs { padding: .3rem .6rem; font-size: .75rem; }
.cs-btn-block { width: 100%; }
.cs-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ============================================================ Hero */
.cs-hero {
  position: relative; min-height: 580px;
  display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #2a0000 100%);
}
.cs-hero-bg {
  position: absolute; inset: 0;
  background: url('/static/images/hero-print.jpg') center/cover;
  opacity: .18;
}
.cs-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(204,0,0,.25) 0%, transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 100%);
}
.cs-hero-content {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem; width: 100%;
}
.cs-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem;
  background: rgba(204,0,0,.15); border: 1px solid rgba(204,0,0,.3);
  border-radius: 50px; color: #ff6666; font-size: .82rem; font-weight: 500;
  margin-bottom: 1.5rem; backdrop-filter: blur(10px);
}
.cs-hero h1 {
  font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 900; color: #fff;
  line-height: 1.3; margin-bottom: 1.2rem; max-width: 700px;
}
.cs-hero h1 .highlight {
  background: linear-gradient(135deg, #ff6666, #cc0000);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cs-hero p { font-size: 1.1rem; color: rgba(255,255,255,.8); max-width: 600px; margin-bottom: 2rem; line-height: 1.9; }
.cs-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.cs-hero-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.cs-hero-stat { text-align: right; }
.cs-hero-stat-num { font-size: 1.8rem; font-weight: 800; color: #ff6666; }
.cs-hero-stat-label { font-size: .85rem; color: rgba(255,255,255,.6); }

/* ============================================================ Sections */
.cs-section { max-width: 1280px; margin: 0 auto; padding: 5rem 1.5rem; }
.cs-section-header { text-align: center; margin-bottom: 3rem; }
.cs-section-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--gray-900); margin-bottom: .75rem; }
.cs-section-title .accent { color: var(--primary); }
.cs-section-subtitle { font-size: 1rem; color: var(--gray-500); max-width: 600px; margin: 0 auto; }

/* ============================================================ Service Cards */
.cs-services { background: #fff; }
.cs-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.cs-service-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: var(--transition); position: relative;
}
.cs-service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.cs-service-card-img { width: 100%; height: 200px; object-fit: cover; transition: var(--transition); }
.cs-service-card:hover .cs-service-card-img { transform: scale(1.05); }
.cs-service-card-img-wrap { position: relative; overflow: hidden; }
.cs-service-card-img-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,15,15,.6));
}
.cs-service-card-icon {
  position: absolute; bottom: -20px; right: 1.5rem; z-index: 2;
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem; box-shadow: var(--shadow);
}
.cs-service-card-body { padding: 1.5rem; }
.cs-service-card-title { font-size: 1.2rem; font-weight: 700; color: var(--gray-900); margin-bottom: .4rem; }
.cs-service-card-tagline { font-size: .88rem; color: var(--gray-500); margin-bottom: 1rem; line-height: 1.6; }
.cs-service-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid var(--gray-100);
}
.cs-service-card-price { font-size: .82rem; color: var(--gray-400); }
.cs-service-card-cta { color: var(--primary); font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: .3rem; }
.cs-service-card:hover .cs-service-card-cta { gap: .6rem; }

/* ============================================================ Features */
.cs-features { background: var(--gray-50); }
.cs-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.5rem; }
.cs-feature {
  background: #fff; border-radius: var(--radius); padding: 1.8rem 1.5rem;
  text-align: center; transition: var(--transition); border: 1px solid var(--gray-200);
}
.cs-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary); }
.cs-feature-icon {
  width: 64px; height: 64px; margin: 0 auto 1.2rem;
  background: linear-gradient(135deg, rgba(204,0,0,.1), rgba(26,26,26,.1));
  border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--primary);
}
.cs-feature-title { font-size: 1rem; font-weight: 700; color: var(--gray-800); margin-bottom: .5rem; }
.cs-feature-desc { font-size: .85rem; color: var(--gray-500); line-height: 1.7; }

/* ============================================================ About */
.cs-about { background: #fff; }
.cs-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 768px) { .cs-about-grid { grid-template-columns: 1fr; } }
.cs-about-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cs-about-text h2 { font-size: 1.8rem; font-weight: 800; color: var(--gray-900); margin-bottom: 1rem; }
.cs-about-text p { color: var(--gray-600); line-height: 2; margin-bottom: 1rem; }
.cs-about-list { list-style: none; margin-top: 1.5rem; }
.cs-about-list li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; color: var(--gray-700); }
.cs-about-list li i { color: var(--primary); font-size: 1.1rem; }

/* ============================================================ Order Page */
.cs-order-page { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.cs-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--gray-400); margin-bottom: 1.5rem; }
.cs-breadcrumb a { color: var(--primary); text-decoration: none; cursor: pointer; }
.cs-order-layout { display: grid; grid-template-columns: 1fr 370px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .cs-order-layout { grid-template-columns: 1fr; } }
.cs-order-main { background: #fff; border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--gray-200); }
.cs-order-title { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
/* عنوان خدمت به‌عنوان لینک بازگشت به صفحهٔ اول (درخواست ۳) */
.cs-order-title-link{text-decoration:none;color:inherit;cursor:pointer;border-radius:14px;
  padding:.35rem .5rem;margin-right:-.5rem;transition:background .18s ease,transform .18s ease}
.cs-order-title-link:hover{background:rgba(220,38,38,.06)}
.cs-order-title-link:hover h2{color:var(--brand,#dc2626)}
.cs-order-title-link:active{transform:scale(.985)}
.cs-order-title-link h2,.cs-order-title-link p{transition:color .18s ease}
/* نشانهٔ بصری «بازگشت» — برای موبایل که hover ندارد (دور ۳) */
.cs-order-title-link{position:relative;align-items:center}
.cs-title-back{display:inline-flex;align-items:center;gap:.28rem;margin-inline-start:auto;
  flex-shrink:0;font-size:.72rem;font-weight:700;color:var(--gray-500,#6b7280);
  background:var(--gray-100,#f3f4f6);border-radius:999px;padding:.2rem .55rem;
  white-space:nowrap;transition:background .18s ease,color .18s ease}
.cs-title-back i{font-size:.65rem}
.cs-order-title-link:hover .cs-title-back{background:rgba(220,38,38,.12);color:var(--brand,#dc2626)}
.cs-order-title-link:focus-visible{outline:2px solid var(--brand,#dc2626);outline-offset:3px}
@media(max-width:400px){.cs-title-back span,.cs-title-back{font-size:.68rem;padding:.18rem .45rem}}

/* جداکنندهٔ بصری بلوک گزینه‌های چاپ — بدون افزودن تیتر تکراری (دور ۳) */
.cs-settings-sep{padding-top:1.15rem;border-top:2px solid var(--gray-100,#f3f4f6)}

.cs-order-title-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem;
}
.cs-order-title h2 { font-size: 1.5rem; font-weight: 800; color: var(--gray-900); }
.cs-order-title p { font-size: .9rem; color: var(--gray-500); }
.cs-order-desc {
  color: var(--gray-600); margin-bottom: 2rem; padding: 1rem 1.2rem;
  background: rgba(204,0,0,.04); border-radius: var(--radius-sm);
  border-right: 3px solid var(--primary); font-size: .92rem; line-height: 1.8;
}
.cs-form-group { margin-bottom: 1.5rem; }
.cs-form-label { display: block; font-weight: 600; color: var(--gray-700); margin-bottom: .6rem; font-size: .92rem; }
.cs-form-label .req { color: var(--danger); margin-right: 2px; }
.cs-select-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.cs-select-chip {
  padding: .65rem .9rem; border: 2px solid var(--gray-200); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--gray-600);
  text-align: center; transition: var(--transition); font-family: inherit;
}
.cs-select-chip:hover { border-color: var(--primary); color: var(--primary); }
.cs-select-chip.active { border-color: var(--primary); background: rgba(204,0,0,.08); color: var(--primary); }
.cs-input-number-wrap { display: flex; align-items: center; gap: .6rem; }
.cs-input-number-btn {
  width: 42px; height: 42px; border: 2px solid var(--gray-200); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--gray-600);
  display: flex; align-items: center; justify-content: center; transition: var(--transition); font-family: inherit;
}
.cs-input-number-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(204,0,0,.05); }
.cs-input-number {
  flex: 1; padding: .7rem 1rem; border: 2px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 600; text-align: center; font-family: inherit;
  color: var(--gray-800); background: #fff; transition: var(--transition);
}
.cs-input-number:focus { outline: none; border-color: var(--primary); }
.cs-input-unit { font-size: .85rem; color: var(--gray-400); }
.cs-addon {
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 1rem 1.2rem; margin-bottom: 1rem; transition: var(--transition);
}
.cs-addon.active { border-color: var(--primary); background: rgba(204,0,0,.04); }
.cs-addon-header { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.cs-checkbox {
  width: 22px; height: 22px; border: 2px solid var(--gray-300); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: var(--transition); margin-top: 2px;
}
.cs-checkbox.checked { background: var(--primary); border-color: var(--primary); color: #fff; }
.cs-addon-title { font-weight: 700; font-size: .95rem; color: var(--gray-800); }
.cs-addon-desc { font-size: .82rem; color: var(--gray-500); margin-top: .2rem; }
.cs-addon-items { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--gray-200); display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.cs-addon-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; cursor: pointer; transition: var(--transition); font-size: .85rem; }
.cs-addon-item:hover { border-color: var(--primary); }
.cs-addon-item.active { border-color: var(--primary); background: rgba(204,0,0,.06); }
.cs-addon-item .cs-checkbox { width: 18px; height: 18px; }
.cs-upload {
  border: 2px dashed var(--gray-300); border-radius: var(--radius); padding: 2.5rem 1.5rem;
  text-align: center; cursor: pointer; transition: var(--transition); background: var(--gray-50);
}
.cs-upload:hover, .cs-upload.dragover { border-color: var(--primary); background: rgba(204,0,0,.04); }
.cs-upload-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; }
.cs-upload-text { font-weight: 600; color: var(--gray-700); margin-bottom: .3rem; }
.cs-upload-hint { font-size: .82rem; color: var(--gray-400); }
.cs-upload-file { margin-top: 1rem; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }
.cs-upload-file-icon { width: 44px; height: 44px; background: rgba(239,68,68,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--danger); font-size: 1.2rem; flex-shrink: 0; }
.cs-upload-file-info { flex: 1; text-align: right; }
.cs-upload-file-name { font-weight: 600; font-size: .9rem; color: var(--gray-800); }
.cs-upload-file-meta { font-size: .8rem; color: var(--gray-400); }
.cs-upload-file-remove { width: 32px; height: 32px; border: none; background: var(--gray-100); border-radius: 8px; cursor: pointer; color: var(--gray-500); transition: var(--transition); }
.cs-upload-file-remove:hover { background: var(--danger); color: #fff; }

/* Price Sidebar */
.cs-order-sidebar { position: sticky; top: 90px; }
.cs-price-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.cs-price-card-header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 1.5rem; color: #fff; }
.cs-price-card-header h3 { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.cs-price-card-body { padding: 1.5rem; }
.cs-price-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; font-size: .88rem; border-bottom: 1px dashed var(--gray-100); }
.cs-price-row:last-child { border-bottom: none; }
.cs-price-row-label { color: var(--gray-600); }
.cs-price-row-value { font-weight: 600; color: var(--gray-800); }
.cs-price-total { margin-top: 1rem; padding: 1rem 1.2rem; background: linear-gradient(135deg, rgba(204,0,0,.08), rgba(26,26,26,.04)); border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; }
.cs-price-total-label { font-weight: 700; color: var(--gray-700); font-size: .95rem; }
.cs-price-total-value { font-size: 1.3rem; font-weight: 800; color: var(--primary); }
.cs-price-card-footer { padding: 0 1.5rem 1.5rem; }
.cs-delivery-group { display: grid; gap: .6rem; }
.cs-delivery-option { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); }
.cs-delivery-option:hover { border-color: var(--primary); }
.cs-delivery-option.active { border-color: var(--primary); background: rgba(204,0,0,.05); }
.cs-delivery-option-info { display: flex; align-items: center; gap: .6rem; flex-direction: column; align-items: flex-start; }
.cs-delivery-option-name { font-weight: 600; font-size: .9rem; color: var(--gray-700); }
.cs-delivery-option-desc { font-size: .78rem; color: var(--gray-400); }
.cs-delivery-option-cost { font-weight: 700; color: var(--primary); font-size: .9rem; }

/* ============================================================ Modal */
.cs-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.cs-modal { background: #fff; border-radius: var(--radius-lg); max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); animation: slideUp .3s ease; }
.cs-modal-header { padding: 1.5rem; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.cs-modal-header h3 { font-size: 1.2rem; font-weight: 800; color: var(--gray-900); }
.cs-modal-close { width: 36px; height: 36px; border: none; background: var(--gray-100); border-radius: 10px; cursor: pointer; color: var(--gray-500); font-size: 1.1rem; transition: var(--transition); }
.cs-modal-close:hover { background: var(--danger); color: #fff; }
.cs-modal-body { padding: 1.5rem; }
.cs-modal-footer { padding: 1.5rem; border-top: 1px solid var(--gray-100); display: flex; gap: 1rem; }
.cs-form-input { width: 100%; padding: .75rem 1rem; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit; color: var(--gray-800); background: #fff; transition: var(--transition); }
.cs-form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(204,0,0,.1); }
.cs-form-textarea { width: 100%; padding: .75rem 1rem; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit; color: var(--gray-800); background: #fff; resize: vertical; min-height: 80px; }
.cs-form-textarea:focus { outline: none; border-color: var(--primary); }

/* Cart */
.cs-cart-btn { position: fixed; bottom: 1.4rem; left: 1.4rem; z-index: 880; display: flex; align-items: center; gap: .6rem; padding: .9rem 1.5rem; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; border-radius: 50px; cursor: pointer; font-weight: 700; font-size: .95rem; font-family: inherit; box-shadow: 0 8px 24px rgba(204,0,0,.4); transition: var(--transition); }
.cs-cart-btn:hover { transform: scale(1.05); }
.cs-cart-badge { background: #fff; color: var(--primary); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; }
.cs-cart-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin-bottom: .8rem; }
.cs-cart-item-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.cs-cart-item-info { flex: 1; }
.cs-cart-item-name { font-weight: 700; font-size: .92rem; color: var(--gray-800); }
.cs-cart-item-meta { font-size: .8rem; color: var(--gray-400); }
.cs-cart-item-price { font-weight: 800; color: var(--primary); font-size: .95rem; }
.cs-cart-item-remove { width: 30px; height: 30px; border: none; background: var(--gray-100); border-radius: 8px; cursor: pointer; color: var(--gray-400); }
.cs-cart-item-remove:hover { background: var(--danger); color: #fff; }

/* Track */
.cs-track-page { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem; }
.cs-track-box { background: #fff; border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; border: 1px solid var(--gray-200); box-shadow: var(--shadow); }
.cs-track-input-wrap { display: flex; gap: .6rem; max-width: 500px; margin: 1.5rem auto; }
.cs-track-result { margin-top: 2rem; text-align: right; }
.cs-status-timeline { display: flex; position: relative; margin: 2rem 0; overflow-x: auto; padding-bottom: 1rem; }
.cs-status-step { flex: 1; text-align: center; position: relative; min-width: 90px; }
.cs-status-step::before { content: ''; position: absolute; top: 20px; right: 50%; left: -50%; height: 3px; background: var(--gray-200); z-index: 0; }
.cs-status-step:first-child::before { display: none; }
.cs-status-step.done::before { background: var(--success); }
.cs-status-step-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-200); display: flex; align-items: center; justify-content: center; margin: 0 auto .5rem; color: #fff; font-size: 1rem; position: relative; z-index: 1; transition: var(--transition); }
.cs-status-step.done .cs-status-step-dot { background: var(--success); }
.cs-status-step.current .cs-status-step-dot { background: var(--primary); box-shadow: 0 0 0 6px rgba(204,0,0,.2); }
.cs-status-step-label { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.cs-status-step.done .cs-status-step-label, .cs-status-step.current .cs-status-step-label { color: var(--gray-800); font-weight: 600; }

/* Footer */
.cs-footer { background: #41444b; color: rgba(255,255,255,.75); padding: 4rem 1.5rem 2rem; }
.cs-footer-inner { max-width: 1280px; margin: 0 auto; }
.cs-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 768px) { .cs-footer-grid { grid-template-columns: 1fr 1fr; } }
.cs-footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: 1.3rem; font-weight: 800; color: #fff; }
.cs-footer-brand img { height: 40px; }
.cs-footer h4 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.cs-footer-links { list-style: none; }
.cs-footer-links li { margin-bottom: .6rem; }
.cs-footer-links a { color: rgba(255,255,255,.6); text-decoration: none; font-size: .9rem; transition: var(--transition); cursor: pointer; }
.cs-footer-links a:hover { color: var(--primary); }
.cs-footer-contact-item { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; font-size: .9rem; }
.cs-footer-contact-item i { color: var(--primary); width: 20px; text-align: center; }
.cs-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; text-align: center; font-size: .85rem; }
.cs-footer-divider { height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); }

/* Toast */
.cs-toast { position: fixed; top: 90px; right: 50%; transform: translateX(50%); z-index: 300; padding: 1rem 1.5rem; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9rem; animation: slideDown .3s ease; max-width: 90%; }
@keyframes slideDown { from { opacity: 0; transform: translate(50%, -20px); } to { opacity: 1; transform: translate(50%, 0); } }
.cs-toast.success { border-right: 4px solid var(--success); color: var(--success); }
.cs-toast.error { border-right: 4px solid var(--danger); color: var(--danger); }
.cs-toast.info { border-right: 4px solid var(--info); color: var(--info); }
.cs-toast.warning { border-right: 4px solid var(--warning); color: var(--warning); }

/* Mobile */
.cs-mobile-toggle { display: none; }
@media (max-width: 768px) {
  .cs-nav { position: fixed; top: 70px; right: 0; left: 0; background: #fff; flex-direction: column; padding: 1rem; box-shadow: var(--shadow-lg); transform: translateY(-150%); transition: var(--transition); z-index: 99; gap: .3rem; border-top: 2px solid var(--primary); }
  .cs-nav.open { transform: translateY(0); }
  .cs-nav-link { width: 100%; text-align: right; }
  .cs-mobile-toggle { display: flex; }
  .cs-header-actions .cs-btn-outline { display: none; }
  .cs-hero-stats { gap: 1.5rem; }
  .cs-hero-stat-num { font-size: 1.5rem; }
  .cs-section { padding: 3rem 1rem; }
  .cs-cart-btn { bottom: calc(1rem + env(safe-area-inset-bottom,0px)); left: 1rem; padding: .7rem 1.2rem; font-size: .85rem; max-width: calc(100vw - 2rem); }
}
.cs-mobile-toggle { width: 42px; height: 42px; border: none; background: var(--gray-100); border-radius: 10px; cursor: pointer; color: var(--gray-700); font-size: 1.2rem; align-items: center; justify-content: center; }

/* Loading & Empty */
.cs-loading { display: flex; align-items: center; justify-content: center; padding: 3rem; color: var(--gray-400); }
.cs-spinner { width: 40px; height: 40px; border: 4px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cs-empty { text-align: center; padding: 3rem 1rem; color: var(--gray-400); }
.cs-empty i { font-size: 3rem; margin-bottom: 1rem; display: block; }
.cs-empty p { font-size: .95rem; }

/* Status Badge */
.cs-status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: 50px; font-size: .78rem; font-weight: 600; }

/* PWA Install Banner */
.cs-pwa-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  background: linear-gradient(135deg, var(--secondary), #2a0000);
  color: #fff; padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}
.cs-pwa-banner-info { display: flex; align-items: center; gap: 1rem; }
.cs-pwa-banner-logo { width: 48px; height: 48px; border-radius: 12px; }
.cs-pwa-banner-title { font-weight: 700; font-size: .95rem; }
.cs-pwa-banner-desc { font-size: .82rem; color: rgba(255,255,255,.7); }

/* Announcement Bar */
.cs-announcement { background: var(--primary); color: #fff; text-align: center; padding: .5rem 1rem; font-size: .88rem; font-weight: 500; }
.cs-announcement a { color: #fff; text-decoration: underline; }

/* Utilities */
.hidden { display: none !important; }
.fade-in { animation: fadeIn .4s ease; }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.badge-primary { background: rgba(204,0,0,.1); color: var(--primary); padding: .2rem .6rem; border-radius: 6px; font-size: .78rem; font-weight: 600; }

/* Admin in app.css overrides */
.admin-body { background: #f1f3f5; }
.cs-admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
@media (max-width: 768px) { .cs-admin-layout { grid-template-columns: 1fr; } }
.cs-admin-sidebar { background: var(--secondary); color: rgba(255,255,255,.8); padding: 1.5rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cs-admin-logo { display: flex; align-items: center; gap: .6rem; padding: 0 1.5rem 1.5rem; font-weight: 800; color: #fff; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1rem; }
.cs-admin-logo img { height: 36px; }
.cs-admin-nav { list-style: none; }
.cs-admin-nav-item { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.5rem; color: rgba(255,255,255,.6); cursor: pointer; transition: var(--transition); font-size: .9rem; font-weight: 500; border-right: 3px solid transparent; }
.cs-admin-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.cs-admin-nav-item.active { background: rgba(204,0,0,.15); color: #fff; border-right-color: var(--primary); }
.cs-admin-nav-section { padding: .5rem 1.5rem; font-size: .72rem; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .05em; margin-top: .5rem; }
.cs-admin-main { padding: 1.5rem; overflow-x: hidden; }
.cs-admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.cs-admin-header h1 { font-size: 1.4rem; font-weight: 800; color: var(--gray-900); }
.cs-admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.cs-admin-stat-card { background: #fff; border-radius: var(--radius); padding: 1.2rem; border: 1px solid var(--gray-200); cursor: pointer; transition: var(--transition); }
.cs-admin-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cs-admin-stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: .8rem; }
.cs-admin-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--gray-900); }
.cs-admin-stat-label { font-size: .82rem; color: var(--gray-500); }
.cs-admin-table-wrap { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-200); overflow-x: auto; }
.cs-admin-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.cs-admin-table th { background: var(--gray-50); padding: .8rem 1rem; text-align: right; font-size: .82rem; font-weight: 700; color: var(--gray-600); border-bottom: 1px solid var(--gray-200); }
.cs-admin-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--gray-100); font-size: .88rem; color: var(--gray-700); }
.cs-admin-table tr:hover { background: var(--gray-50); }
.cs-mgmt-card { background: #fff; border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--gray-200); margin-bottom: 1.2rem; }
.cs-mgmt-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cs-mgmt-card-header h3 { font-size: 1.05rem; font-weight: 700; color: var(--gray-800); }
.cs-mgmt-field { display: grid; grid-template-columns: 200px 1fr auto; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--gray-100); }
@media (max-width: 600px) { .cs-mgmt-field { grid-template-columns: 1fr; gap: .3rem; } }
.cs-mgmt-field-label { font-weight: 600; font-size: .9rem; color: var(--gray-700); }
.cs-mgmt-field-value { font-size: .9rem; color: var(--gray-600); }
.cs-mgmt-field-input { padding: .5rem .8rem; border: 1px solid var(--gray-200); border-radius: 8px; font-family: inherit; font-size: .9rem; width: 100%; }
.cs-mgmt-field-input:focus { outline: none; border-color: var(--primary); }


/* ============================================================
   نسخه ۳ — استایل‌های اصلاحات ۲۳‌گانه
   ============================================================ */

/* منوی کشویی خدمات (آیتم ۲۰) */
.cs-nav-dropdown { position: relative; }
.cs-nav-menu { position: absolute; top: calc(100% + .6rem); right: 0; min-width: 280px; background: #fff; border: 1px solid var(--gray-100); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.14); padding: .5rem; display: none; z-index: 300; max-height: 70vh; overflow-y: auto; }
.cs-nav-menu.open { display: block; animation: fadeIn .18s ease; }
.cs-nav-menu-item { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 .6rem; padding: .55rem .7rem; border-radius: 10px; color: var(--gray-800); text-decoration: none; transition: background .15s; }
.cs-nav-menu-item:hover { background: var(--gray-50); }
.cs-nav-menu-item i { grid-row: 1 / span 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(204,0,0,.08); color: var(--primary); border-radius: 9px; font-size: .95rem; }
.cs-nav-menu-item span { font-weight: 700; font-size: .9rem; }
.cs-nav-menu-item small { color: var(--gray-400); font-size: .74rem; }
@media (max-width: 900px) { .cs-nav-menu { position: static; box-shadow: none; border: none; min-width: 0; } }

/* ماشین‌حساب سریع قیمت در هیرو (آیتم ۱۱) */
.cs-quick-calc { margin: 1.8rem auto 0; max-width: 620px; background: rgba(255,255,255,.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 1.1rem 1.2rem; text-align: right; }
.cs-quick-calc-title { color: #fff; font-weight: 800; font-size: .95rem; margin-bottom: .8rem; }
.cs-quick-calc-title i { color: var(--accent, #ffb703); margin-left: .35rem; }
.cs-quick-calc-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.cs-quick-calc-row .cs-form-input { background: rgba(255,255,255,.95); border: none; font-size: .88rem; padding: .6rem .8rem; }
.cs-quick-calc-result { background: rgba(0,0,0,.25); color: #fff; border-radius: 10px; padding: .7rem 1rem; font-size: .92rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .7rem; min-height: 46px; }
.cs-quick-calc-result strong { font-size: 1.15rem; color: #ffd166; }
@media (max-width: 640px) { .cs-quick-calc-row { grid-template-columns: 1fr; } .cs-quick-calc-result { flex-direction: column; align-items: flex-start; gap: .3rem; } }

/* پیام تلگرام زیر آپلود (آیتم ۱۰) */
.cs-telegram-note { display: flex; align-items: center; gap: .7rem; background: rgba(34,158,217,.07); border: 1px solid rgba(34,158,217,.25); border-radius: 12px; padding: .75rem 1rem; margin-top: .8rem; font-size: .84rem; color: var(--gray-600); flex-wrap: wrap; }
.cs-telegram-note > i { color: #229ED9; font-size: 1.3rem; flex-shrink: 0; }
.cs-telegram-note span { flex: 1; min-width: 200px; line-height: 1.8; }

/* کارت فایل‌های چندگانه (آیتم‌های ۷، ۲۲) */
.cs-file-card { margin-top: .7rem; border: 1px solid var(--gray-100); border-radius: 14px; overflow: hidden; transition: box-shadow .2s; }
.cs-file-card.open { box-shadow: 0 6px 24px rgba(0,0,0,.08); border-color: var(--primary); }
.cs-file-card .cs-upload-file { border: none; border-radius: 0; }
.cs-file-panel { padding: 1rem; background: var(--gray-50); border-top: 1px dashed var(--gray-200); }
.cs-select-chip-sm { padding: .35rem .7rem !important; font-size: .78rem !important; }


/* دکمه‌های شناور تماس و تلگرام (آیتم ۱۷) */
/* دکمه‌های تماس/تلگرام: همیشه بالای نوار سبد قرار می‌گیرند تا روی هم نیفتند */
.cs-float-btns { position: fixed; bottom: 1.4rem; left: 1.4rem; display: flex; flex-direction: column; gap: .7rem; z-index: 900; transition: bottom .25s ease; }
body.cs-has-cart .cs-float-btns { bottom: 5.6rem; }
.cs-float-btn { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.35rem; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .18s; text-decoration: none; }
.cs-float-btn:hover { transform: scale(1.1); }
.cs-float-call { background: linear-gradient(135deg, #22c55e, #16a34a); }
.cs-float-tg { background: linear-gradient(135deg, #35b6e9, #229ED9); }
@media (max-width: 640px) {
  .cs-float-btns { bottom: calc(1rem + env(safe-area-inset-bottom,0px)); left: 1rem; }
  body.cs-has-cart .cs-float-btns { bottom: calc(5rem + env(safe-area-inset-bottom,0px)); }
  .cs-float-btn { width: 48px; height: 48px; font-size: 1.2rem; }
}
/* فضای امن انتهای صفحه تا نوارهای شناور محتوا را نپوشانند */
body.cs-has-cart { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom,0px)); }
@media (max-width: 640px) {
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom,0px)); }
  body.cs-has-cart { padding-bottom: calc(8.5rem + env(safe-area-inset-bottom,0px)); }
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================ Phase 3 fixes: mobile overflow + order note */
html { overflow-x: hidden; }
html, body { max-width: 100%; }
.cs-order-layout > * { min-width: 0; }
.cs-order-main { max-width: 100%; overflow-x: hidden; }
.cs-price-card { max-width: 100%; }
.cs-price-row { gap: .6rem; flex-wrap: wrap; }
.cs-price-row-label, .cs-price-row-value { overflow-wrap: anywhere; word-break: break-word; }
.cs-price-total { flex-wrap: wrap; gap: .5rem; }
@media (max-width: 900px) {
  .cs-order-sidebar { position: static; top: auto; }
  .cs-order-page { padding: 1.2rem .9rem 3rem; }
  .cs-order-main { padding: 1.2rem 1rem; }
  .cs-price-card-body { padding: 1.1rem 1rem; }
}

/* Note under order submit button */
.cs-order-note {
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: rgba(59, 130, 246, .07);
  border: 1px solid rgba(59, 130, 246, .25);
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  font-size: .82rem;
  line-height: 1.9;
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.cs-order-note i { color: #3b82f6; margin-top: .3rem; flex-shrink: 0; }

/* ============================================================
   فاز ۴ — استایل‌های جدید
   ============================================================ */
/* دکمهٔ دوم هیرو: پس‌زمینهٔ سفید مات و متن برند — کاملاً خوانا روی تصویر تیره */
.cs-hero-btn2{color:var(--primary,#c00);background:#fff;border:2px solid #fff;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.cs-hero-btn2:hover{background:#fff;color:var(--primary-dark,#a00);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34)}
.cs-hero-btn2 i{color:inherit}

/* ===== درخواست ۲ (v8) — دکمهٔ اصلی «آپلود فایل و ثبت سفارش» =====
   این دکمه باید از «محاسبه آنلاین قیمت» جذاب‌تر، حرفه‌ای‌تر و توچشم‌تر باشد. */
.cs-hero-cta-primary{
  position:relative;color:#fff;font-weight:900;font-size:1.06rem;letter-spacing:.2px;
  background:linear-gradient(135deg,#ff5f4d 0%,#e01e2f 55%,#b4121f 100%);
  border:2px solid rgba(255,255,255,.55);
  padding:1.05rem 2.1rem;border-radius:16px;
  box-shadow:0 12px 34px rgba(200,20,35,.52),0 3px 10px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.32);
  transform:translateZ(0);overflow:hidden;
  animation:csCtaPulse 2.6s ease-in-out infinite;
}
.cs-hero-cta-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-22deg);animation:csCtaShine 3.4s ease-in-out infinite;
}
.cs-hero-cta-primary:hover{
  transform:translateY(-3px) scale(1.02);animation:none;
  box-shadow:0 18px 44px rgba(200,20,35,.62),0 5px 14px rgba(0,0,0,.3);
}
.cs-hero-cta-primary i{color:#fff;margin-left:.5rem;font-size:1.12em}
@keyframes csCtaPulse{
  0%,100%{box-shadow:0 12px 34px rgba(200,20,35,.52),0 3px 10px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.32)}
  50%{box-shadow:0 14px 42px rgba(200,20,35,.72),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.32)}
}
@keyframes csCtaShine{0%{left:-60%}55%{left:125%}100%{left:125%}}

/* دکمهٔ ثانویه: عمداً آرام‌تر تا سلسله‌مراتب بصری حفظ شود */
.cs-hero-cta-secondary{
  color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.62);
  font-weight:700;padding:.92rem 1.6rem;border-radius:14px;backdrop-filter:blur(6px);
}
.cs-hero-cta-secondary:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.cs-hero-cta-secondary i{color:#fff}

@media(max-width:640px){
  .cs-hero-cta-primary{width:100%;justify-content:center;font-size:1rem;padding:1rem 1.2rem}
  .cs-hero-cta-secondary{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .cs-hero-cta-primary{animation:none}
  .cs-hero-cta-primary::after{animation:none;display:none}
}
.cs-hero-bullets{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;list-style:none;padding:0;margin:1.2rem 0 0}
.cs-hero-bullets li{color:rgba(255,255,255,.92);font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:.4rem}
.cs-hero-bullets li i{color:#4ade80}
.cs-service-tile{background:#fff;border:1px solid var(--gray-100);border-radius:16px;padding:1.4rem 1rem;text-align:center;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.cs-service-tile:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08);border-color:var(--primary)}
.cs-service-tile-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff}
.cs-service-tile-title{font-size:1rem;font-weight:800;color:var(--gray-900)}
.cs-service-tile-tagline{font-size:.78rem;color:var(--gray-400);line-height:1.6;min-height:2.4em}
.cs-service-tile-cta{font-size:.8rem;font-weight:700;color:var(--primary)}
@media(min-width:768px){.cs-services-grid{grid-template-columns:repeat(5,1fr)!important}}
@media(max-width:767px){.cs-services-grid{grid-template-columns:repeat(2,1fr)!important;gap:.8rem!important}}
.cs-student-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;max-width:1000px;margin:0 auto}
.cs-student-card{background:#fff;border-radius:16px;padding:1.5rem 1rem;text-align:center;border:1px solid var(--gray-100)}
.cs-student-card-icon{font-size:2.2rem;margin-bottom:.6rem}
.cs-student-card h3{font-weight:800;font-size:1rem;margin-bottom:.4rem}
.cs-student-card p{font-size:.82rem;color:var(--gray-500);line-height:1.7}
.cs-two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1000px;margin:0 auto;align-items:start}
@media(max-width:768px){.cs-two-col{grid-template-columns:1fr}}
.cs-check-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.7rem}
.cs-check-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:var(--gray-700);line-height:1.7}
.cs-check-list li i{color:var(--success);margin-top:.2rem}
.cs-request-form-card{background:#fff;border:1px solid var(--gray-100);border-radius:16px;padding:1.5rem;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.cs-request-form-card h3{font-weight:800;font-size:1.05rem;margin-bottom:1.2rem;color:var(--gray-900)}
.cs-request-form-card h3 i{color:var(--primary)}
.cs-faq-wrap,.cs-mini-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.cs-mini-faq{margin-top:1.5rem}
.cs-faq-item{background:#fff;border:1px solid var(--gray-100);border-radius:12px;overflow:hidden}
.cs-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;background:none;border:0;cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:700;color:var(--gray-800);text-align:right}
.cs-faq-q i{transition:transform .25s;color:var(--gray-400);flex-shrink:0}
.cs-faq-item.open .cs-faq-q i{transform:rotate(180deg);color:var(--primary)}
.cs-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.cs-faq-item.open .cs-faq-a{max-height:400px}
.cs-faq-a p{padding:0 1.2rem 1.1rem;font-size:.88rem;line-height:1.9;color:var(--gray-500)}
.cs-b2b{background:linear-gradient(135deg,var(--secondary),#2a2d34);color:#fff}
.cs-b2b-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
@media(max-width:768px){.cs-b2b-inner{grid-template-columns:1fr}}
.cs-b2b-text h2{font-size:1.35rem;font-weight:800;margin-bottom:.8rem}
.cs-b2b-text p{font-size:.92rem;line-height:1.9;color:rgba(255,255,255,.75)}
.cs-b2b-input-row{display:flex;gap:.6rem}
.cs-b2b-input-row .cs-form-input{flex:1}
@media(max-width:480px){.cs-b2b-input-row{flex-direction:column}}
.cs-useful-links-grid{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;max-width:900px;margin:0 auto}
.cs-useful-link{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:#fff;border:1px solid var(--gray-200);border-radius:999px;font-size:.85rem;font-weight:600;color:var(--gray-700);text-decoration:none;transition:all .2s}
.cs-useful-link:hover{border-color:var(--primary);color:var(--primary)}
.cs-useful-link i{font-size:.7rem;color:var(--primary)}
.cs-blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;max-width:1100px;margin:0 auto}
.cs-blog-card{background:#fff;border:1px solid var(--gray-100);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:all .25s;display:flex;flex-direction:column}
.cs-blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.cs-blog-card-img{height:160px;background:var(--gray-50);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--gray-300)}
.cs-blog-card-img img{width:100%;height:100%;object-fit:cover}
.cs-blog-card-body{padding:1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.cs-blog-cat{display:inline-block;background:rgba(204,0,0,.08);color:var(--primary);font-size:.72rem;font-weight:700;padding:.2rem .7rem;border-radius:999px;align-self:flex-start}
.cs-blog-card-body h3{font-size:.98rem;font-weight:800;line-height:1.6;color:var(--gray-900)}
.cs-blog-card-body p{font-size:.82rem;color:var(--gray-500);line-height:1.7;flex:1}
.cs-blog-more{font-size:.8rem;font-weight:700;color:var(--primary)}
.cs-blog-post{max-width:760px;margin:0 auto;background:#fff;border-radius:16px;padding:2rem;border:1px solid var(--gray-100)}
.cs-blog-post h1{font-size:1.5rem;font-weight:800;margin:.8rem 0;line-height:1.6}
.cs-blog-post-img{width:100%;border-radius:12px;margin-bottom:1rem}
.cs-blog-post-meta{font-size:.82rem;color:var(--gray-400);margin-bottom:1.2rem}
.cs-blog-post-content p{font-size:.95rem;line-height:2.1;color:var(--gray-700);margin-bottom:1rem}
.cs-calc-page{max-width:900px;margin:0 auto;padding:calc(80px + 1.5rem) 1rem 3rem}
.cs-calc-tabs{display:flex;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap}
.cs-calc-tab{padding:.6rem 1.3rem;border-radius:999px;border:1px solid var(--gray-200);background:#fff;font-size:.9rem;font-weight:700;color:var(--gray-600);text-decoration:none;transition:all .2s}
.cs-calc-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.cs-calc-card{background:#fff;border:1px solid var(--gray-100);border-radius:20px;padding:1.8rem;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.cs-calc-title{font-size:1.35rem;font-weight:800;margin-bottom:.4rem}
.cs-calc-desc{font-size:.88rem;color:var(--gray-500);margin-bottom:1.5rem}
.cs-calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem 1.5rem}
.cs-calc-result{background:var(--gray-50);border-radius:14px;padding:1.2rem;margin-top:1.2rem}
.cs-calc-result-total{display:flex;justify-content:space-between;align-items:center;font-weight:800;padding-top:.6rem}
.cs-calc-result-total strong{font-size:1.35rem;color:var(--primary)}
.cs-calc-result-rows{border-bottom:1px dashed var(--gray-200);margin-bottom:.6rem;padding-bottom:.4rem}
.cs-seo-text{background:#fff;border:1px solid var(--gray-100);border-radius:16px;padding:1.5rem;margin-top:1.5rem}
.cs-seo-text h2{font-size:1.05rem;font-weight:800;margin-bottom:.7rem;color:var(--gray-800)}
.cs-seo-text p{font-size:.88rem;line-height:2;color:var(--gray-500)}
.cs-steps-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.cs-steps-list li{background:var(--gray-50);border-radius:10px;padding:.7rem 1rem;font-size:.9rem;color:var(--gray-700)}
.cs-file-code-box{background:var(--gray-50);border:2px dashed var(--primary);border-radius:16px;padding:1.2rem;display:inline-block}
.cs-file-code{font-size:1.6rem;font-weight:800;color:var(--primary);letter-spacing:3px;display:flex;align-items:center;gap:.5rem;justify-content:center}
.cs-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
@media(max-width:768px){.cs-contact-grid{grid-template-columns:1fr}}
.cs-contact-card{background:#fff;border:1px solid var(--gray-100);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.cs-contact-item{display:flex;align-items:flex-start;gap:.9rem}
.cs-contact-item>i{width:42px;height:42px;border-radius:12px;background:rgba(204,0,0,.08);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.cs-contact-item b{display:block;font-size:.8rem;color:var(--gray-400);font-weight:600}
.cs-contact-item a,.cs-contact-item span{font-weight:700;color:var(--gray-800);font-size:.95rem;text-decoration:none}
.cs-ready-note{background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.25);border-radius:12px;padding:.8rem 1rem;margin-top:1.2rem;font-size:.85rem;color:var(--gray-700)}
.cs-ready-note i{color:#3b82f6}

/* ═══════════════════════════════════════════════════════════════════
   اصلاحات کارفرما — ۱۴۰۵/۰۵/۱۱
   ═══════════════════════════════════════════════════════════════════ */

/* ── آیتم ۷ + ۹ + ۱۲ — بلوک فراخوان صفحه اصلی ───────────────────── */
.cs-home-cta {
  max-width: 720px;
  margin: 2.2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.cs-home-cta .cs-cta-main {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(135deg, #ff7a18, #cc0000);
  color: #fff;
  font-size: 1.18rem;
  font-weight: 900;
  padding: 1.15rem 1.5rem;
  border-radius: 16px;
  border: 0;
  box-shadow: 0 10px 28px rgba(204, 0, 0, .32);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: center;
}
.cs-home-cta .cs-cta-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(204, 0, 0, .42);
  color: #fff;
}
.cs-home-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.cs-home-cta .cs-cta-second {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: #fff;
  color: var(--gray-800, #1f2937);
  border: 2px solid var(--gray-200, #e5e7eb);
  font-weight: 800;
  font-size: .98rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  transition: all .18s ease;
}
.cs-home-cta .cs-cta-second:hover {
  border-color: var(--primary, #cc0000);
  color: var(--primary, #cc0000);
  background: #fff7f7;
}
@media (max-width: 560px) {
  .cs-home-cta-row { grid-template-columns: 1fr; }
  .cs-home-cta .cs-cta-main { font-size: 1.05rem; padding: 1rem; }
}

/* ── آیتم ۶ — «چرا چاپ ساسان؟» جمع‌وجور ─────────────────────────── */
.cs-section-header-tight { margin-bottom: 1.2rem !important; }
.cs-features-compact { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
.cs-features-compact .cs-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .7rem;
  max-width: 1120px;
  margin: 0 auto;
}
.cs-features-compact .cs-feature {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .8rem .9rem;
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  text-align: right;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cs-features-compact .cs-feature:hover {
  border-color: var(--primary, #cc0000);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transform: none;
}
.cs-features-compact .cs-feature-icon {
  width: 38px; height: 38px; min-width: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; margin: 0;
  border-radius: 10px;
}
.cs-features-compact .cs-feature-body { flex: 1; min-width: 0; }
.cs-features-compact .cs-feature-title { font-size: .92rem; margin: 0 0 .15rem; font-weight: 800; }
.cs-features-compact .cs-feature-desc  { font-size: .78rem; line-height: 1.65; margin: 0; color: var(--gray-500, #6b7280); }

/* ── آیتم ۱۲ — مراحل ثبت سفارش ──────────────────────────────────── */
.cs-order-cta-main {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  background: linear-gradient(135deg, #ff7a18, #cc0000);
  color: #fff;
  border: 0;
  border-radius: 18px;
  padding: 1.15rem 1.25rem;
  margin: 0 0 1.4rem;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(204, 0, 0, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cs-order-cta-main:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(204, 0, 0, .4); }
.cs-order-cta-main span  { font-size: 1.2rem; font-weight: 900; }
.cs-order-cta-main small { font-size: .8rem; font-weight: 500; opacity: .9; }
.cs-order-cta-main i     { font-size: 1.5rem; margin-bottom: .15rem; }

.cs-order-step { margin-bottom: 1.6rem; }
.cs-order-step-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.cs-order-step-head h3 { font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--gray-800, #1f2937); }
.cs-order-step-num {
  width: 30px; height: 30px; min-width: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary, #cc0000); color: #fff;
  font-weight: 900; font-size: .9rem;
}
.cs-order-step-num.done { background: #22c55e; }
.cs-order-step-hint { font-size: .85rem; color: var(--gray-500, #6b7280); margin: 0 0 .8rem; line-height: 1.8; }
.cs-form-hint {
  background: var(--gray-50, #f9fafb);
  border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1rem;
  font-size: .85rem; color: var(--gray-500, #6b7280);
}

/* ── آیتم ۳ — چک‌باکس سیمی مشترک ────────────────────────────────── */
.cs-check-row {
  display: flex; align-items: center; gap: .6rem;
  cursor: pointer; user-select: none; padding: .2rem 0;
}
.cs-check-row .cs-checkbox {
  width: 22px; height: 22px; min-width: 22px;
  border: 2px solid var(--gray-300, #d1d5db);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #fff; font-size: .7rem;
  transition: all .15s ease;
}
.cs-check-row .cs-checkbox.checked { background: var(--primary, #cc0000); border-color: var(--primary, #cc0000); }
.cs-check-label { font-weight: 700; font-size: .92rem; color: var(--gray-800, #1f2937); }
.cs-check-hint  { font-size: .8rem; color: var(--gray-400, #9ca3af); margin: .45rem 0 0; line-height: 1.75; padding-right: 1.9rem; }

/* ── آیتم ۴ — فوتر پنج‌ستونه + سربرگ صفحات مستقل ───────────────── */
.cs-footer-grid-5 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; }
@media (max-width: 1100px) { .cs-footer-grid-5 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px)  { .cs-footer-grid-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .cs-footer-grid-5 { grid-template-columns: 1fr; } }

.cs-page-head {
  background: linear-gradient(135deg, #1a1a1a, #2a0000);
  color: #fff;
  padding: 2.2rem 1.5rem 1.8rem;
}
.cs-page-head .cs-breadcrumb, .cs-page-head .cs-breadcrumb a { color: rgba(255, 255, 255, .7); }
.cs-page-head h1 { font-size: 1.6rem; font-weight: 900; margin: .5rem 0 0; }

/* چک‌باکس واقعی صحافی فنر مشترک (v5) — دسترس‌پذیر و قابل کنترل با کیبورد */
.cs-checkbox-input {
  width: 22px; height: 22px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--primary, #cc0000); margin: 0;
}
.cs-check-row { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.cs-check-row:focus-within { outline: 2px solid rgba(204,0,0,.35); outline-offset: 3px; border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════════════
   اصلاحات فرم ثبت سفارش — درخواست‌های ۱ تا ۶
   ═══════════════════════════════════════════════════════════════════ */

/* ── درخواست ۱ — دکمهٔ «آپلود فایل و ثبت سفارش»: بزرگ‌تر، بولدتر، کاملاً مشخص ── */
.cs-order-cta-main {
  padding: 1.35rem 1.25rem;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(204, 0, 0, .34);
  animation: csCtaPulse 2.6s ease-in-out infinite;
}
.cs-order-cta-main span  { font-size: 1.42rem; font-weight: 900; letter-spacing: -.02em; }
.cs-order-cta-main small { font-size: .86rem; font-weight: 600; opacity: .95; }
.cs-order-cta-main i     { font-size: 1.85rem; margin-bottom: .3rem; }

/* نبض ملایم فقط تا وقتی هیچ فایلی انتخاب نشده — برای جلب توجه */
@keyframes csCtaPulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(204, 0, 0, .34); }
  50%      { box-shadow: 0 14px 44px rgba(204, 0, 0, .52); }
}
/* بعد از انتخاب فایل، دکمه به حالت آرام «افزودن فایل بعدی» می‌رود (درخواست ۶) */
.cs-order-cta-main.has-files {
  animation: none;
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  box-shadow: 0 10px 26px rgba(3, 105, 161, .3);
  padding: 1.05rem 1.25rem;
}
.cs-order-cta-main.has-files span  { font-size: 1.15rem; }
.cs-order-cta-main.has-files i     { font-size: 1.5rem; }
.cs-order-cta-main.has-files:hover { box-shadow: 0 14px 32px rgba(3, 105, 161, .42); }

/* ── درخواست ۲ — تنظیمات چاپ بدون تیتر «گام»، با نوار سادهٔ کوچک ── */
.cs-order-upload-block { margin-bottom: 1.5rem; }
.cs-order-settings     { margin-bottom: 1.6rem; }


/* ── درخواست ۲ — گزینه‌های سایز / نوع صحافی / … ریزتر و جمع‌وجورتر ── */
.cs-opts-compact .cs-form-group  { margin-bottom: 1rem; }
.cs-opts-compact .cs-form-label  { font-size: .82rem; margin-bottom: .4rem; font-weight: 700; }
.cs-opts-compact .cs-select-group {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: .4rem;
}
.cs-opts-compact .cs-select-chip {
  padding: .42rem .5rem;
  font-size: .78rem;
  border-width: 1.5px;
  border-radius: 9px;
  line-height: 1.35;
}
.cs-opts-compact .cs-addon        { padding: .7rem .8rem; }
.cs-opts-compact .cs-addon-title  { font-size: .85rem; }
.cs-opts-compact .cs-addon-desc   { font-size: .74rem; }
.cs-opts-compact .cs-input-number-btn { width: 34px; height: 34px; font-size: .92rem; }
.cs-opts-compact .cs-input-number     { height: 34px; font-size: .88rem; max-width: 92px; }
.cs-opts-compact .cs-input-unit       { font-size: .78rem; }

/* ── درخواست ۴ — تعداد صفحاتِ خوانده‌شده از فایل: فقط نمایش، بدون ورود دستی ── */
.cs-pages-locked {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  color: #065f46;
  border-radius: 10px;
  padding: .5rem .85rem;
  font-size: .88rem; font-weight: 700;
}
.cs-pages-locked i        { color: #059669; font-size: 1rem; }
.cs-pages-locked strong   { font-size: 1.05rem; font-weight: 900; }
.cs-pages-locked-note {
  font-size: .72rem; font-weight: 600; color: #047857;
  opacity: .85; margin-right: .3rem;
  padding-right: .5rem; border-right: 1px solid #a7f3d0;
}

/* ── درخواست ۵ — استپر عددی کوچک با دکمه‌های + / − ── */
.cs-stepper-sm { max-width: 190px; gap: .35rem; }
.cs-stepper-sm .cs-input-number-btn {
  width: 34px; height: 34px; min-width: 34px;
  font-size: .9rem; border-radius: 9px;
  border-width: 1.5px; font-weight: 800;
}
.cs-stepper-sm .cs-input-number-btn:active { transform: scale(.94); }
.cs-stepper-sm .cs-input-number { height: 34px; font-size: .9rem; font-weight: 800; }

/* حذف فلش‌های پیش‌فرض مرورگر تا فقط دکمه‌های + / − دیده شوند */
.cs-input-number::-webkit-outer-spin-button,
.cs-input-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-input-number { -moz-appearance: textfield; }

/* ── موبایل ── */
@media (max-width: 640px) {
  .cs-order-cta-main span { font-size: 1.18rem; }
  .cs-order-cta-main small { font-size: .78rem; }
  .cs-opts-compact .cs-select-group { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .cs-opts-compact .cs-select-chip  { font-size: .74rem; padding: .4rem .35rem; }
}

/* ── درخواست ۶ — پس از انتخاب فایل، ناحیهٔ بارگذاری جمع‌وجور می‌شود
      تا با دکمهٔ بزرگ بالای صفحه تکراری به نظر نرسد ── */
.cs-upload.has-files {
  padding: .85rem 1rem;
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; flex-wrap: wrap;
  border-style: dashed; border-width: 2px;
  border-color: #7dd3fc; background: #f0f9ff;
}
.cs-upload.has-files .cs-upload-icon { font-size: 1.15rem; margin: 0; color: #0284c7; }
.cs-upload.has-files .cs-upload-text { font-size: .92rem; font-weight: 800; color: #0369a1; margin: 0; }
.cs-upload.has-files .cs-upload-hint { font-size: .74rem; margin: 0; width: 100%; text-align: center; }
.cs-upload.has-files:hover { border-color: #0284c7; background: #e0f2fe; }