/* Yazdırılabilir sipariş özeti. Ekranda kart görünümü, kâğıtta düz belge.
   Renk bilinçli az: belge çoğunlukla siyah-beyaz yazıcıdan çıkar. */

.receipt-page {
  --navy: #0B1F4D;
  --muted: #5b6878;
  --line: #d8dee8;
}

/* HER KURAL .receipt-page ALTINDA OLMAK ZORUNDA.
   Layout'ta `stylesheet_link_tag :app` var ve Propshaft bunu TÜM stylesheet'lere
   genişletiyor → bu dosya sipariş özeti sayfasına değil, sitenin HER sayfasına
   yükleniyor. Kurallar :root / body / * üzerine yazıldığında sızıyorlar.
   Nitekim `body { font-size: 14px }` bütün siteyi 14px'e düşürmüştü: site
   html/body'de font-size TANIMLAMIYOR, yani taban tarayıcı varsayılanı 16px. */
.receipt-page, .receipt-page * { box-sizing: border-box; }

body.receipt-page {
  margin: 0;
  background: #eef1f6;
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  color: #1c2637;
  font-size: 14px;
  line-height: 1.55;
}

/* Ekran araç çubuğu — yazdırmada yok */
.receipt-toolbar {
  max-width: 800px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.receipt-toolbar a,
.receipt-toolbar button {
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.receipt-toolbar .btn-print { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.receipt-toolbar .btn-back  { background: #fff; color: var(--navy); border: 1px solid var(--line); }

.receipt {
  max-width: 800px;
  margin: 0 auto 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 36px 40px;
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--navy);
}
.receipt-head img { height: 40px; width: auto; }
.receipt-doc { text-align: right; }
.receipt-doc h1 { margin: 0 0 4px; font-size: 19px; letter-spacing: .5px; color: var(--navy); }
.receipt-doc .receipt-meta { color: var(--muted); font-size: 13px; }

.receipt-status {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1.5px solid var(--navy);
  border-radius: 6px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--navy);
}

.receipt-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 22px 0;
}
.receipt-party h2 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.receipt-party p { margin: 0; }
.receipt-party .p-name { font-weight: 700; color: var(--navy); }
.receipt-party .p-line { color: #3d4a5c; font-size: 13.5px; }

.receipt-table { width: 100%; border-collapse: collapse; margin: 6px 0 2px; }
.receipt-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.receipt-table td { padding: 10px; border-bottom: 1px solid #edf0f5; vertical-align: top; }
.receipt-table .t-right { text-align: right; white-space: nowrap; }
.receipt-table .t-title { font-weight: 700; color: var(--navy); }
.receipt-table .t-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.receipt-table .t-total td {
  border-bottom: none;
  border-top: 2px solid var(--navy);
  font-weight: 800;
  color: var(--navy);
  font-size: 15px;
}

.receipt-info { margin-top: 14px; font-size: 13.5px; color: #3d4a5c; }
.receipt-info dt { float: left; clear: left; width: 150px; color: var(--muted); }
.receipt-info dd { margin: 0 0 4px 160px; }

.receipt-havale {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13.5px;
}
.receipt-havale h2 { margin: 0 0 8px; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--navy); }
.receipt-havale table td { padding: 2px 12px 2px 0; }
.receipt-havale .h-key { color: var(--muted); }
.receipt-havale .h-warn { margin: 8px 0 0; font-weight: 600; }

.receipt-disclaimer {
  margin-top: 22px;
  border: 1.5px dashed var(--muted);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--muted);
}
.receipt-disclaimer strong { color: #1c2637; }

.receipt-foot {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .receipt { padding: 22px 18px; }
  .receipt-parties { grid-template-columns: 1fr; }
  .receipt-info dt { float: none; width: auto; }
  .receipt-info dd { margin-left: 0; margin-bottom: 8px; }
}

/* @page sınıfla KAPSANAMAZ (CSS'te böyle bir imkân yok) ve bu dosya her sayfaya
   yüklendiği için sitenin tamamının yazdırma sayfası A4/14mm olur. Bilinçli
   bırakıldı: TR'de A4 zaten doğru varsayılan ve yalnız yazdırmayı etkiler. */
@page { size: A4; margin: 14mm; }

@media print {
  body.receipt-page { background: #fff; font-size: 12.5px; }
  .receipt-toolbar { display: none; }
  .receipt {
    max-width: none;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  /* Belge tek sayfaya sığar; blokların ortadan bölünmesini engelle */
  .receipt-parties, .receipt-havale, .receipt-disclaimer { break-inside: avoid; }
  .receipt-page a { color: inherit; text-decoration: none; }
}