/* =========================================================================
 * 🧾 WHERZIT MATBAA MODÜLÜ — MODERN TEMA + TERMAL BASKI  v1.0.0
 * =========================================================================
 * Bu dosya style.css'i DEĞİŞTİRMEZ; sadece #qr-cart-modal kapsamında
 * üzerine yazar. index.html'de style.css'ten SONRA yüklenmelidir.
 *
 * !important kullanımı hakkında: matbaa modalindeki bazı elemanların
 * stilleri app.js/index.html içinde satır içi (inline) yazılmış durumda.
 * Satır içi stiller normal CSS'i her zaman yener; app.js'e dokunmadan
 * görünümü modernleştirmenin tek yolu bu noktalarda !important kullanmak.
 * Sadece GÖRSEL özelliklerde kullanıldı — display/görünürlük gibi
 * JS'in yönettiği özelliklere dokunulmadı.
 * ========================================================================= */

/* -------------------------------------------------------------------------
   1. MARKA JETONLARI (yalnızca bu modal kapsamında)
   ------------------------------------------------------------------------- */
#qr-cart-modal {
  --wz-teal: #14b8a6;
  --wz-teal-deep: #0d9488;
  --wz-orange: #f97316;
  --wz-orange-deep: #ea580c;
  --wz-line: rgba(148, 163, 184, 0.18);
  --wz-panel: rgba(148, 163, 184, 0.07);
  --wz-panel-2: rgba(148, 163, 184, 0.12);
  --wz-dim: #94a3b8;
  --wz-bright: #e2e8f0;
}

/* -------------------------------------------------------------------------
   2. MODAL KABUĞU
   ------------------------------------------------------------------------- */
/* ⚠️ Bilerek `overflow: hidden` KULLANILMIYOR. Bu pencere bir flex sütun ve
   max-height:88vh ile sınırlı; içerik büyüdüğünde (örn. bilgi kutusu açılınca)
   overflow:hidden alttaki yazdırma düğmelerini görünmez şekilde kırpardı.
   Bu yüzden marka şeridi de köşe kırpmasına ihtiyaç duymayan bir yere,
   başlığın altına taşındı. */
#qr-cart-modal .custom-picker-content {
  border-top: 1px solid var(--wz-line);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);

  /* 🐛 DÜZELTME: style.css'teki temel `.custom-picker-content` kuralında
     max-height VAR ama overflow-y HİÇ tanımlı değil — içindeki tek kaydırma
     alanı sepet listesiydi (#qr-cart-items-container, kendi max-height'ı
     var). A4 modunda başlık+şablon+ilerleme+sepet+düğmeler bu sınıra rahat
     sığıyordu; termal moda eklenen bloklarla (segment, boyut seçici,
     önizleme, özet, bilgi kutusu) toplam yükseklik max-height'ı aşınca,
     taşan kısım hiçbir yere kaymadan ekranın altına gömülüyordu — özellikle
     "Hangi yöntemi kullanmalıyım?" kutusu açılınca yazdırma/gönder
     düğmeleri erişilemez hale geliyordu. Çözüm: modalin kendisi de gerekince
     kaysın. Sepet listesinin kendi iç kaydırması (#qr-cart-items-container)
     buna dokunulmadan aynen çalışmaya devam ediyor — iç içe iki bağımsız
     kaydırma alanı, standart ve güvenli bir desen. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* İstek üzerine: kaydırma ÇALIŞSIN ama kaydırma çubuğu GÖRÜNMESİN.
   Tarayıcı bazlı üç ayrı yöntem gerekiyor (tek CSS özelliği hepsini kapsamıyor). */
#qr-cart-modal .custom-picker-content,
#qr-cart-modal #qr-cart-items-container {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* eski Edge/IE */
}
#qr-cart-modal .custom-picker-content::-webkit-scrollbar,
#qr-cart-modal #qr-cart-items-container::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Android WebView */
  width: 0;
  height: 0;
}

@media (max-width: 600px) {
  #qr-cart-modal .custom-picker-content {
    border-radius: 20px 20px 0 0;
  }
}

#qr-cart-modal .picker-header {
  position: relative;
  border-bottom: 1px solid var(--wz-line);
  padding-bottom: 12px;
  margin-bottom: 2px;
}

/* Logodaki teal → turuncu geçişi: başlığın altındaki ince aksan çizgisi */
#qr-cart-modal .picker-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wz-teal), var(--wz-orange));
}

#qr-cart-modal .picker-header h3 {
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

#qr-cart-modal .picker-close {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s;
}

#qr-cart-modal .picker-close:hover {
  background: var(--wz-panel-2);
  color: var(--wz-bright);
}

/* -------------------------------------------------------------------------
   3. MOD SEÇİCİ (A4 / Termal)
   ------------------------------------------------------------------------- */
.wz-print-mode-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--wz-panel);
  border: 1px solid var(--wz-line);
  border-radius: 13px;
  padding: 4px;
  margin: 12px 0 14px;
  flex-shrink: 0;
}

.wz-seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 4px;
  border: none;
  background: transparent;
  color: var(--wz-dim);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.wz-seg-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.wz-seg-btn.active {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(249, 115, 22, 0.18));
  color: var(--wz-bright);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.45);
}

/* -------------------------------------------------------------------------
   4. ŞABLON / ÖN AYAR DÜĞMELERİ
   -------------------------------------------------------------------------
   ⚠️ .wz-preset-btn'e BİLEREK `btn-tmpl` sınıfı VERİLMEDİ: app.js içindeki
   setTemplate() fonksiyonu `document.querySelectorAll('.btn-tmpl')` ile TÜM
   o sınıftaki düğmelerin `active` durumunu kendi A4 şablonuna göre yeniden
   kuruyor. Termal düğmelerimiz o sınıfta olsaydı, kullanıcı A4 şablonunu
   her değiştirdiğinde bizim seçili ön ayarımızın vurgusu silinirdi.
   Görünüm aynı kalsın diye stiller aşağıda iki seçiciye birden veriliyor. */
#qr-cart-modal .btn-tmpl,
#qr-cart-modal .wz-preset-btn {
  background: var(--wz-panel) !important;
  border: 1px solid var(--wz-line) !important;
  color: var(--wz-dim) !important;
  border-radius: 11px !important;
  padding: 9px 4px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#qr-cart-modal .btn-tmpl.active,
#qr-cart-modal .wz-preset-btn.active {
  background: linear-gradient(135deg, var(--wz-teal-deep), var(--wz-teal)) !important;
  color: #ffffff !important;
  border-color: rgba(20, 184, 166, 0.6) !important;
}

.wz-thermal-preset-row {
  display: flex;
  gap: 6px;
}

.wz-preset-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}

.wz-preset-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.wz-print-label-head {
  font-size: 0.8rem;
  color: var(--wz-dim);
  margin-bottom: 6px;
  font-weight: 500;
}

/* A4'ün ölçü satırı ile termalinki aynı görünsün */
#qr-cart-modal #qr-template-specs,
#qr-cart-modal .wz-thermal-spec {
  font-size: 0.7rem !important;
  color: var(--wz-dim) !important;
  margin-top: 8px !important;
  text-align: center !important;
  letter-spacing: 0.2px;
}

#wz-thermal-template-block {
  margin-top: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   5. DURUM PANELLERİ (A4 doluluk çubuğu + termal özet)
   ------------------------------------------------------------------------- */
#qr-cart-modal #wz-a4-progress-block,
#qr-cart-modal #wz-thermal-summary-block {
  background: var(--wz-panel) !important;
  border: 1px solid var(--wz-line) !important;
  border-radius: 13px !important;
  padding: 11px 13px !important;
  margin-bottom: 12px;
  flex-shrink: 0;
}

#qr-cart-modal #qr-progress-fill {
  background: linear-gradient(90deg, var(--wz-teal), var(--wz-orange)) !important;
  border-radius: 3px;
}

#qr-cart-modal #qr-progress-label {
  font-size: 0.76rem !important;
  color: var(--wz-bright) !important;
}

.wz-thermal-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--wz-bright);
  font-weight: 500;
}

.wz-thermal-summary-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--wz-teal);
}

/* -------------------------------------------------------------------------
   5b. DÜZEN ÖNİZLEMESİ
   ------------------------------------------------------------------------- */
.wz-preview-wrap {
  margin-top: 10px;
  padding: 10px;
  background: var(--wz-panel);
  border: 1px solid var(--wz-line);
  border-radius: 12px;
  text-align: center;
}

.wz-preview-head {
  font-size: 0.7rem;
  color: var(--wz-dim);
  font-weight: 600;
  margin-bottom: 7px;
  letter-spacing: 0.3px;
}

.wz-preview-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20px;
}

/* Canvas gerçek etiket oranında üretiliyor; burada sadece ekrana
   sığacak şekilde ölçekleniyor, oran korunuyor. */
.wz-preview-canvas {
  max-height: 110px;
  max-width: 100%;
  height: auto;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.wz-preview-note {
  font-size: 0.64rem;
  color: var(--wz-dim);
  margin-top: 7px;
  line-height: 1.35;
  opacity: 0.85;
}

/* -------------------------------------------------------------------------
   5c. DOSYA SINIRI UYARISI
   ------------------------------------------------------------------------- */
.wz-thermal-limit-warn {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 10px;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #fdba74;
}

/* Hazırlık sürerken düğmeler pasif görünsün */
.wz-thermal-print-btn:disabled,
.wz-thermal-share-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* -------------------------------------------------------------------------
   6. SEPET SATIRLARI
   ------------------------------------------------------------------------- */
#qr-cart-modal #qr-cart-items-container .qr-cart-item-row {
  background: rgba(148, 163, 184, 0.06) !important;
  border: 1px solid var(--wz-line) !important;
  border-radius: 13px !important;
  padding: 10px 12px !important;
  transition: border-color 0.2s, background 0.2s;
}

#qr-cart-modal #qr-cart-items-container .qr-cart-item-row:hover {
  border-color: rgba(20, 184, 166, 0.35) !important;
  background: rgba(148, 163, 184, 0.1) !important;
}

#qr-cart-modal .qr-cart-item-input {
  font-size: 0.82rem;
  color: #f1f5f9;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
}

#qr-cart-modal .qr-cart-item-input:focus {
  border-bottom-color: var(--wz-teal);
}

#qr-cart-modal #qr-cart-items-container .btn-outline {
  border-radius: 10px !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  color: #5eead4 !important;
  background: rgba(20, 184, 166, 0.12) !important;
  transition: background 0.18s;
}

#qr-cart-modal #qr-cart-items-container .btn-outline:hover {
  background: rgba(20, 184, 166, 0.22) !important;
}

#qr-cart-modal .btn-qty {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--wz-panel-2);
  color: var(--wz-bright);
  font-size: 15px;
  transition: background 0.18s;
}

#qr-cart-modal .btn-qty:hover {
  background: rgba(20, 184, 166, 0.25);
}

#qr-cart-modal .qty-num {
  color: #f8fafc;
}

/* -------------------------------------------------------------------------
   7. ALT AKSİYON DÜĞMELERİ
   ------------------------------------------------------------------------- */
#qr-cart-modal #btnFillBlanks,
#qr-cart-modal #btnClearCart {
  border-radius: 11px !important;
  padding: 10px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--wz-line) !important;
  background: var(--wz-panel) !important;
  transition: background 0.18s, border-color 0.18s;
}

/* Yıkıcı bir eylem olduğu için (sepeti geri alınamaz şekilde boşaltıyor)
   nötr pill yerine kırmızı temalı, ama gradyanlı ana butonlar kadar
   baskın olmayan bir "tehlike" vurgusu — kullanıcı yanlışlıkla ana eylemle
   karıştırmasın diye bilerek daha sakin tutuldu. */
#qr-cart-modal #btnClearCart {
  color: #fca5a5 !important;
  background: rgba(248, 113, 113, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
  /* İçerik (ikon + metin) her koşulda ortalansın diye — hem A4 modunda
     (Boşlukla Doldur ile yan yana) hem Termal modunda (tek başına) aynı
     satırda tutarlı görünsün. `width` bilerek belirtilmiyor: A4 modunda
     kardeşiyle (flex:1) paylaşılan flex oranını (flex:0.8) bozmaması
     gerekiyor — width:100% verilirse iki düğme de aynı anda tam genişlik
     istemeye çalışıp A4'teki yan yana düzeni bozardı. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#qr-cart-modal #btnClearCart:hover,
#qr-cart-modal #btnClearCart:active {
  background: rgba(248, 113, 113, 0.18) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
}

#qr-cart-modal #btnPrintCart {
  background: linear-gradient(135deg, var(--wz-teal-deep), var(--wz-teal)) !important;
  border: none !important;
  border-radius: 13px !important;
  padding: 12px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.25);
}

/* Termal mod aksiyon satırı: iki düğme eşit genişlikte.
   Paylaşım düğmesi desteklenmiyorsa JS onu gizler ve yazdırma düğmesi
   flex:1 sayesinde satırı tek başına doldurur. */
#wz-thermal-actions {
  gap: 8px;
}

.wz-thermal-print-btn,
.wz-thermal-share-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: 13px;
  padding: 12px 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Dar ekranlarda ("Uygulamaya Gönder" ~360 px'de sınırda kalıyor) metin
     taşmak yerine iki satıra sarsın. Satır flex olduğu için iki düğme
     otomatik olarak aynı yükseklikte kalır. */
  text-align: center;
  line-height: 1.25;
  white-space: normal;
}

.wz-thermal-print-btn {
  background: linear-gradient(135deg, var(--wz-orange-deep), var(--wz-orange));
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.25);
}

.wz-thermal-share-btn {
  background: linear-gradient(135deg, var(--wz-teal-deep), var(--wz-teal));
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.25);
}

.wz-thermal-print-btn svg,
.wz-thermal-share-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.wz-thermal-print-btn:active,
.wz-thermal-share-btn:active {
  transform: scale(0.99);
}

/* -------------------------------------------------------------------------
   7b. BİLGİLENDİRME KUTUSU
   -------------------------------------------------------------------------
   Ucuz Bluetooth etiket yazıcıları Android'in yazdırma listesine hiç
   çıkmadığı için kullanıcı bunu uygulama hatası sanabiliyor. Bu kutu iki
   yöntemin farkını ve son çare yolunu anlatıyor. <details> kullanıldığı
   için aç/kapa davranışı için JavaScript gerekmiyor. */
#wz-thermal-info {
  background: var(--wz-panel);
  border: 1px solid var(--wz-line);
  border-radius: 13px;
  padding: 10px 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

#wz-thermal-info > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--wz-bright);
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

/* Tarayıcıların varsayılan üçgen işaretini gizle (kendi ok ikonumuz var) */
#wz-thermal-info > summary::-webkit-details-marker { display: none; }
#wz-thermal-info > summary::marker { content: ''; }

#wz-thermal-info > summary > svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--wz-teal);
}

#wz-thermal-info > summary > .wz-chev {
  margin-left: auto;
  color: var(--wz-dim);
  transition: transform 0.2s;
}

#wz-thermal-info[open] > summary > .wz-chev {
  transform: rotate(180deg);
}

.wz-info-body {
  margin-top: 4px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--wz-dim);
  /* Kutu açıldığında metin uzasa bile pencereyi taşırmasın */
  max-height: 22vh;
  overflow-y: auto;
}

.wz-info-item {
  margin-top: 9px;
}

.wz-info-item b {
  color: #cbd5e1;
  font-weight: 700;
}

/* =========================================================================
   8. TERMAL BASKI MOTORU (@media print)
   -------------------------------------------------------------------------
   style.css'teki A4 kuralları (`body *{visibility:hidden}` +
   `#wz-bulk-print-area`) OLDUĞU GİBİ duruyor. Aşağıdaki kurallar sadece
   body üzerinde `.wz-thermal-printing` sınıfı varken devreye girer ve
   daha yüksek özgüllüğe (specificity) sahip oldukları için A4 kurallarını
   yalnızca o an için bastırır. Sınıf, baskı bitince JS tarafından kaldırılır.
   ========================================================================= */
@media print {

  body.wz-thermal-printing * {
    visibility: hidden;
  }

  body.wz-thermal-printing #wz-thermal-print-area,
  body.wz-thermal-printing #wz-thermal-print-area * {
    visibility: visible;
  }

  /* A4 alanı termal baskı sırasında tamamen devre dışı — aksi halde
     boş bir A4 sayfası rulodan yer yerdi. */
  body.wz-thermal-printing #wz-bulk-print-area {
    display: none !important;
  }

  body.wz-thermal-printing #wz-thermal-print-area {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--wz-tl-w);
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #000000;
  }

  /* Her etiket tam olarak bir sayfa (bkz. thermal-print.js -> @page) */
  body.wz-thermal-printing .wz-tl {
    width: var(--wz-tl-w);
    height: var(--wz-tl-h);
    box-sizing: border-box;
    padding: var(--wz-tl-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
    color: #000000;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Son etiketten sonra boş bir sayfa daha beslenmesin */
  body.wz-thermal-printing .wz-tl:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  body.wz-thermal-printing .wz-tl-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--wz-tl-title);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  body.wz-thermal-printing .wz-tl-qr {
    width: var(--wz-tl-qr);
    height: var(--wz-tl-qr);
    display: block;
    margin: var(--wz-tl-gap) 0;
    /* Not: bilerek `image-rendering` ayarı YAPILMIYOR. QR kaynağı 420 px
       üretilip ~24 mm'ye küçültülüyor; `pixelated` (en yakın komşu) bu
       küçültmede modül kenarlarını düzensiz atlayıp okunurluğu bozabiliyor.
       Tarayıcının varsayılan yumuşak küçültmesi termal kafada daha güvenli. */
  }

  body.wz-thermal-printing .wz-tl-path {
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--wz-tl-path);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
  }

  /* Yedek (boş) etiketler kesim için çerçeveli basılır */
  body.wz-thermal-printing .wz-tl-blank {
    outline: 1px solid #000000;
    outline-offset: -1mm;
  }
}