/* production-lines-details.css — أنماط خاصة بهذه الصفحة وحدها.
   المرحلة 3: كانت مكتوبة داخل <style> فى الـ View، تنزل مع كل
   طلب ولا يستطيع المتصفح تخزينها. الآن ملف مستقل قابل للتخزين. */

.production-detail-page {
    --pl-primary: #0a0a0a;
    --pl-dark: #1a1a1a;
    --pl-accent: #d4a017;
    --pl-soft: #faf6ec;
    --pl-border: #e8dfc4;
    direction: rtl;
}

.production-detail-hero {
    background:
        radial-gradient(circle at 18% 22%, rgba(212,160,23,.2), transparent 30%),
        linear-gradient(135deg, #0a0a0a 0%, #000000 58%, #1a1a1a 100%);
    color: #fff;
    padding: 86px 0 62px;
    text-align: center;
}

.production-detail-hero span {
    display: inline-flex;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    color: #f0c75e;
    background: rgba(255,255,255,.08);
    font-weight: 900;
    margin-bottom: 16px;
}

.production-detail-hero h1 {
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.production-detail-section {
    padding: 70px 0;
    background: linear-gradient(180deg, #fff 0%, #fffaf3 100%);
}

.production-detail-main-image {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 24px 58px rgba(26,26,26,.14);
    border: 1px solid var(--pl-border);
    background: #fff;
    margin-bottom: 34px;
}

.production-detail-content .lead {
    color: #555b65;
    font-size: 1.12rem;
    line-height: 2;
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 38px rgba(26,26,26,.07);
}

.production-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 22px 0;
}

.production-detail-box {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 38px rgba(26,26,26,.07);
    margin-bottom: 22px;
}

.production-detail-box h2,
.production-detail-box h3 {
    color: var(--pl-primary);
    font-weight: 900;
    margin-bottom: 14px;
}

.production-detail-box p,
.production-detail-box li {
    color: #5d626d;
    line-height: 1.9;
}

.production-detail-box ul {
    margin: 0;
    padding-right: 20px;
}

.production-spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--pl-border);
}

.production-spec-table th,
.production-spec-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pl-border);
    vertical-align: top;
}

.production-spec-table tr:last-child th,
.production-spec-table tr:last-child td {
    border-bottom: 0;
}

.production-spec-table th {
    width: 30%;
    background: var(--pl-soft);
    color: var(--pl-dark);
    font-weight: 900;
}

.production-detail-box .note {
    margin-top: 16px;
    color: #7a603b;
    background: #faf6ec;
    border-radius: 14px;
    padding: 12px 14px;
}

.production-detail-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
}

.production-detail-cta .btn-warning {
    background: var(--pl-accent);
    border-color: var(--pl-accent);
    color: #111;
    font-weight: 900;
}

@media (max-width: 991px) {
    .production-detail-main-image { max-height: 380px; }
    .production-detail-section { padding: 50px 0; }
}

@media (max-width: 767px) {
    .production-detail-grid { grid-template-columns: 1fr; }
    .production-detail-hero { padding: 68px 0 48px; }
    .production-detail-main-image { max-height: 280px; margin-bottom: 22px; }
    .production-detail-box { padding: 18px; border-radius: 18px; }
    .production-spec-table th,
    .production-spec-table td { padding: 10px 12px; font-size: .9rem; }
    .production-spec-table th { width: 38%; }
    .production-detail-cta .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   المرحلة 10: أنماط كانت مكتوبة داخل <style> فى محتوى
   production-lines.json. المنقّى يحذف وسم <style> (سياسة
   المرحلة 3)، فلو بقيت هناك لضاع تنسيق مراحل التصنيع.
   نُقلت هنا كما هى بلا تعديل.
   ═══════════════════════════════════════════════════════════ */

/* ── من: feed-production-line-1-5-ton-1-tanseeb ── */
.pl1-stages-title { text-align:center; color:#1a1a1a; font-weight:900; margin:30px 0 22px; }
    .pl1-stages { display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:18px; margin:22px 0 30px; }
    .pl1-stage { background:#fff; border:1px solid #e8dfc4; border-radius:20px; padding:22px 20px 24px; box-shadow:0 8px 24px rgba(26,26,26,.06); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; position:relative; overflow:hidden; }
    .pl1-stage:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(26,26,26,.11); border-color:#d4a017; }
    .pl1-stage.has-img { padding:0; }
    .pl1-stage.has-img > img { width:100%; height:180px; object-fit:cover; display:block; }
    .pl1-stage.has-img .pl1-stage-body { padding:18px 20px 22px; }
    .pl1-stage-icon { width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,#faf6ec 0%,#fff5d1 100%); color:#d4a017; display:inline-flex; align-items:center; justify-content:center; font-size:1.45rem; margin-bottom:12px; }
    .pl1-stage-no { display:inline-block; color:#d4a017; font-weight:900; font-size:.78rem; letter-spacing:1.5px; margin-bottom:6px; }
    .pl1-stage h3 { color:#1a1a1a; font-weight:900; font-size:1.08rem; margin:0 0 10px; line-height:1.45; }
    .pl1-stage p { color:#5d626d; line-height:1.85; margin:0; font-size:.93rem; }
    .pl1-stage.is-highlight { background:linear-gradient(135deg,#fffbe8 0%,#faf6ec 100%); border-color:#d4a017; }
    .pl1-stage.is-highlight .pl1-stage-icon { background:#d4a017; color:#fff; }

/* ── من: feed-production-line-1-5-ton-2-tanseeb ── */
.pl2-stages-title { text-align:center; color:#1a1a1a; font-weight:900; margin:30px 0 22px; }
    .pl2-stages { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:20px; margin:22px 0 30px; }
    .pl2-stage { background:#fff; border:1px solid #e8dfc4; border-radius:22px; overflow:hidden; box-shadow:0 10px 26px rgba(26,26,26,.07); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; display:flex; flex-direction:column; position:relative; }
    .pl2-stage:hover { transform:translateY(-5px); box-shadow:0 22px 42px rgba(26,26,26,.13); border-color:#d4a017; }
    .pl2-stage-media { position:relative; height:210px; overflow:hidden; background:#faf6ec; }
    .pl2-stage-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
    .pl2-stage:hover .pl2-stage-media img { transform:scale(1.05); }
    .pl2-stage-no { position:absolute; top:14px; inset-inline-end:14px; background:#0a0a0a; color:#f0c75e; padding:6px 13px; border-radius:999px; font-weight:900; font-size:.82rem; box-shadow:0 6px 16px rgba(0,0,0,.22); display:inline-flex; align-items:center; gap:5px; z-index:2; }
    .pl2-stage-body { padding:20px 22px 24px; flex-grow:1; display:flex; flex-direction:column; }
    .pl2-stage h3 { color:#1a1a1a; font-weight:900; font-size:1.08rem; margin:0 0 10px; line-height:1.45; }
    .pl2-stage p { color:#5d626d; line-height:1.85; margin:0; font-size:.93rem; }
    .pl2-stage.is-highlight .pl2-stage-no { background:#d4a017; color:#fff; }
    .pl2-stage.is-highlight .pl2-stage-media::after { content:""; position:absolute; inset:0; border:3px solid #d4a017; border-radius:22px 22px 0 0; pointer-events:none; }
    .pl2-stage.is-highlight { border-color:#d4a017; }
    .pl2-overview-media { width:100%; max-height:380px; object-fit:cover; border-radius:18px; margin:18px 0 6px; border:1px solid #e8dfc4; }
    @media (max-width:575px){ .pl2-stages{ grid-template-columns:1fr; gap:16px;} .pl2-stage-media{ height:190px;} }

/* ── من: feed-production-line-3-ton-2-tanseeb ── */
.pl2-stages-title { text-align:center; color:#1a1a1a; font-weight:900; margin:30px 0 22px; }
    .pl2-groups { display:grid; gap:20px; margin:22px 0 30px; }
    .pl2-group { background:#fff; border:1px solid #e8dfc4; border-radius:22px; overflow:hidden; box-shadow:0 10px 26px rgba(26,26,26,.07); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .pl2-group:hover { box-shadow:0 22px 42px rgba(26,26,26,.13); border-color:#d4a017; }
    .pl2-group-head { background:linear-gradient(135deg,#faf6ec 0%,#fff5d1 100%); padding:18px 24px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #e8dfc4; }
    .pl2-group-no { background:#0a0a0a; color:#f0c75e; width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:1.05rem; flex-shrink:0; }
    .pl2-group-head h3 { color:#1a1a1a; font-weight:900; font-size:1.18rem; margin:0; }
    .pl2-group-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; }
    .pl2-group-body.no-img { grid-template-columns:1fr; }
    .pl2-group-media { height:100%; min-height:240px; overflow:hidden; background:#faf6ec; }
    .pl2-group-media img { width:100%; height:100%; object-fit:cover; }
    .pl2-group-list { padding:20px 26px 24px; }
    .pl2-group-list ul { margin:0; padding-inline-start:20px; }
    .pl2-group-list li { color:#5d626d; line-height:1.95; margin-bottom:8px; font-size:.95rem; }
    .pl2-group-list li::marker { color:#d4a017; font-weight:900; }
    .pl2-group.is-highlight { border-color:#d4a017; }
    .pl2-group.is-highlight .pl2-group-no { background:#d4a017; color:#fff; }
    .pl2-spec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:18px 0 6px; }
    .pl2-spec-card { background:#faf6ec; border:1px solid #e8dfc4; border-radius:14px; padding:14px 16px; text-align:center; }
    .pl2-spec-card i { color:#d4a017; font-size:1.45rem; margin-bottom:8px; display:block; }
    .pl2-spec-card strong { color:#1a1a1a; display:block; font-size:1.05rem; margin-bottom:2px; }
    .pl2-spec-card span { color:#7a8090; font-size:.82rem; }
    @media (max-width:767px){ .pl2-group-body{ grid-template-columns:1fr; } .pl2-group-media{ min-height:200px;} }