/*
  Shared styles for the Latest Orders page — single source of truth for all
  language variants (latest-orders-page.html + .de/.fr/.he). Linked via an
  absolute URL so it resolves under /, /de/, /fr/, /he/. Brand red: #cd1e24.
*/
.cjs-lo * { box-sizing: border-box; }
.breadcumb_wrap { display: none; }
.about-wrap > h2 { display: none; }

.cjs-lo {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #1a1d24;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.cjs-lo h1, .cjs-lo h2, .cjs-lo h3 { color: #111827; margin: 0 0 12px; line-height: 1.25; letter-spacing: -.4px; }
.cjs-lo p { color: #4b5563; line-height: 1.65; margin: 0 0 14px; font-size: 16px; overflow-wrap: break-word; }

/* Hero */
.cjs-lo-hero { text-align: center; padding: 24px 8px 8px; }
.cjs-lo-hero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; }
.cjs-lo-hero .cjs-lo-sub { font-size: 16px; color: #6b7280; max-width: 720px; margin: 12px auto 0; line-height: 1.6; }
.cjs-lo-livetag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  border-radius: 999px; padding: 6px 14px; margin: 0 auto 4px;
}
.cjs-lo-livetag .cjs-lo-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: cjsLoPulse 1.4s ease-in-out infinite; }
@keyframes cjsLoPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Info cards */
.cjs-lo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 18px; }
.cjs-lo-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 16px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.03); position: relative; overflow: hidden; }
.cjs-lo-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #cd1e24, #f59e0b); }
.cjs-lo-stat-num { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: #cd1e24; letter-spacing: -.5px; line-height: 1.1; }
.cjs-lo-stat-label { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: 6px; }
@media (max-width: 700px) { .cjs-lo-stats { grid-template-columns: 1fr; } }

/* Content card */
.cjs-lo-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px 26px; margin: 18px 0 0; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.cjs-lo-section h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; display: flex; align-items: flex-start; gap: 10px; }
.cjs-lo-section h2 .cjs-lo-icn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #cd1e24, #b81c13); color: #fff; flex-shrink: 0; box-shadow: 0 4px 14px rgba(205,30,36,.22); }
.cjs-lo-section h2 .cjs-lo-icn svg { width: 17px; height: 17px; fill: #fff; }
.cjs-lo-section p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .cjs-lo-section { padding: 20px 18px; } }

/* Ticker frame */
.cjs-lo-ticker { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 20px 14px; margin: 18px 0 0; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.cjs-lo-ticker h2 { font-size: 18px; font-weight: 700; text-align: center; margin: 0 0 4px; }
.cjs-lo-ticker-sub { text-align: center; font-size: 13px; color: #6b7280; margin: 0 0 16px; }
.cjs-lo-ticker-frame { border-radius: 10px; overflow: hidden; border: 1px solid #eceef1; background: #fafafa; }
.cjs-lo-ticker-frame iframe { width: 100%; height: 700px; border: 0; display: block; }

/* RTL (Hebrew) */
.cjs-lo[dir="rtl"] { text-align: right; }
.cjs-lo[dir="rtl"] .cjs-lo-hero,
.cjs-lo[dir="rtl"] .cjs-lo-stat,
.cjs-lo[dir="rtl"] .cjs-lo-ticker h2,
.cjs-lo[dir="rtl"] .cjs-lo-ticker-sub { text-align: center; }

/* Mobile */
@media (max-width: 600px) {
  .cjs-lo { padding: 14px 12px 48px; }
  .cjs-lo p { font-size: 15.5px; }
  .cjs-lo-section h2 { font-size: 18px; }
}
