/* Vie Life - Checkout UX
   - Akordiyon yok: tüm step content'leri açık
   - Önceki onaylanmadan sonraki disabled state
   - Kargo step indicator gizli
   - Step numaraları yeniden say (JS)
*/

/* === Kargo step'i tamamen gizle === */
#checkout-delivery-step,
section[id$="-delivery"],
section[id*="checkout-delivery"] {
  display: none !important;
}

/* === Akordiyon kapalı: tüm step content'leri her zaman görünür === */
.checkout-step .content {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}

/* === Disabled state: önceki step tamamlanmadan etkileşim yok === */
.checkout-step.-unreachable,
.checkout-step:not(.-reachable):not(.-current):not(.-complete) {
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}
.checkout-step.-unreachable .content,
.checkout-step:not(.-reachable):not(.-current):not(.-complete) .content {
  filter: grayscale(0.4);
}

/* Disabled step'in başlığı yine görünür ama soluk */
.checkout-step.-unreachable .step-title,
.checkout-step:not(.-reachable):not(.-current):not(.-complete) .step-title {
  opacity: 0.7;
}

/* === Tamamlanmış step'lerde edit butonu görünür kalsın === */
.checkout-step.-complete .desktop-step-status {
  display: inline-block;
}

/* === Düzenli görünüm için step kartları arası boşluk === */
.checkout-step {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 16px 20px;
  transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.checkout-step.-current {
  border-color: #ff5722;
  box-shadow: 0 2px 12px rgba(255, 87, 34, 0.08);
}

.checkout-step.-complete {
  border-color: #c8e6c9;
}

/* Başlık tarzı */
.checkout-step .step-title {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}
.checkout-step .step-number {
  font-weight: 700;
  color: #ff5722;
  margin-right: 8px;
}
.checkout-step.-complete .step-number {
  color: #2e7d32;
}

/* === Ödeme seçenekleri === */
.payment-options {
  padding: 8px 0;
}
.payment-options .payment-option {
  padding: 14px 16px;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: border-color .2s ease, background .2s ease;
  cursor: pointer;
}
.payment-options .payment-option:hover {
  border-color: #ff5722;
  background: #fff8f5;
}
.payment-options .payment-option .custom-radio + label,
.payment-options .payment-option label {
  cursor: pointer;
  font-weight: 500;
}

/* Ödeme yöntemi ek bilgi alanı (banka detayları vs.) */
.additional-information {
  padding: 14px 16px;
  background: #fafafa;
  border-radius: 4px;
  margin-top: 12px;
  font-size: 14px;
  color: #555;
  border-left: 3px solid #ff5722;
}

/* === Fatura adresi farklı checkbox === */
.use_same_address,
#js-checkout-use-same-address {
  margin: 14px 0;
}
.use_same_address label {
  font-weight: 500;
  cursor: pointer;
  color: #333;
}

/* === "Düzenle" butonu - tamamlanan step'lerde === */
.checkout-step .step-edit {
  margin-left: auto;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  display: none; /* default gizli */
}
.checkout-step.-complete .step-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.checkout-step.-complete .step-edit:hover {
  color: #ff5722;
}

/* Kişisel bilgiler step'inde editable bir şey yok — Edit butonunu gizle */
#checkout-personal-information-step .step-edit,
section[id$="personal-information-step"] .step-edit {
  display: none !important;
}

/* === Disabled ödeme step'i için yönlendirme overlay === */
.checkout-step:not(.-current):not(.-complete):not(.-reachable) {
  position: relative;
}
.checkout-step:not(.-current):not(.-complete):not(.-reachable)::before {
  content: "↑ Önce yukarıdaki adımları tamamlayın";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 87, 34, 0.92);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}

/* === Tamamlanmış step'lerde "DEVAM ET" butonunu gizle === */
.checkout-step.-complete .continue,
.checkout-step.-complete button.continue,
.checkout-step.-complete .form-footer button[type="submit"],
.checkout-step.-complete [name="confirm-addresses"],
.checkout-step.-complete [name="confirm-personal-information"],
.checkout-step.-complete .form-footer {
  display: none !important;
}

/* === Mobil === */
@media (max-width: 768px) {
  .checkout-step {
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .checkout-step .step-title {
    font-size: 16px;
  }
  .payment-options .payment-option {
    padding: 12px;
  }
}

/* === "Kargolama" satırını TÜM yerlerde gizle === */
#cart-subtotal-shipping,
[id^="cart-subtotal-shipping"],
[id*="subtotal-shipping"],
[id*="shipping"][id*="subtotal"],
.cart-summary-line#cart-subtotal-shipping,
.cart-summary-line.cart-summary-subtotals#cart-subtotal-shipping,
.cart-summary-line[data-id="cart-subtotal-shipping"],
.cart-summary-line[data-id*="shipping"],
.cart-detailed-totals tr.shipping,
.cart-detailed-totals [id*="shipping"],
[data-row="shipping"],
.shipping-row,
.summary-row.shipping,
.total-line.shipping,
.total-line.shipping .label,
.total-line.shipping .value,
div.total-line.shipping,
/* Sidebar / blockcart */
.blockcart [id*="shipping"],
.cart-totals [id*="shipping"],
.an-sidebar-cart [id*="shipping"],
.an-sidebarcart [id*="shipping"],
.an-sidebarcart .cart-summary-line[id*="shipping"],
.minicart-content [id*="shipping"],
.an_sidebarcart [id*="shipping"],
/* Anvanto theme */
.cart-summary-totals [id*="shipping"],
.cart-summary [id^="cart-subtotal-shipping"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* === Sağdaki sepet özeti — scroll'da sabit (sticky) === */
@media (min-width: 992px) {
  .checkout-content {
    align-items: flex-start;
  }
  .checkout-content > .col-md-4 {
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    /* İnce scrollbar */
    scrollbar-width: thin;
  }
  .checkout-content > .col-md-4::-webkit-scrollbar {
    width: 6px;
  }
  .checkout-content > .col-md-4::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
}

/* === Erişilebilirlik === */
@media (prefers-reduced-motion: reduce) {
  .checkout-step { transition: none; }
}

/* === Flash highlight (Edit'e tıklandığında dikkat çekmek için) === */
.checkout-step.vl-flash {
  animation: vl-flash-step 1s ease;
}
@keyframes vl-flash-step {
  0%   { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
  30%  { box-shadow: 0 0 0 6px rgba(255, 87, 34, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-step.vl-flash { animation: none; }
}