/*
 * "Bekleyen Siparişler" popover'ı — CheckoutHeader.ascx (Basket/CreateOrder/PaymentResult) ve
 * CustomerPanelHeader.ascx (Müşteri Panel, Member.Master) tarafından ortaklaşa kullanılır.
 * İki sayfa da FARKLI bir Bootstrap sürümü yükler (atak-panel: 5.3.7, Müşteri Panel: eski 3.x) —
 * her ikisinin de kendi ".dropdown-menu" varsayılanı var (display:none, farklı padding değerleri).
 * Bu yüzden bu dosya, hangi sayfadan yüklendiğine bakılmaksızın kendi görünürlüğünü/boşluğunu
 * KENDİSİ belirler; hiçbir özelliği Bootstrap'ın vereceği varsayılana bırakmaz.
 *
 * Daha önce bu kurallar atak-panel/_cart-header.scss (→ app.css) ve old-panel/_header-sidebar.scss
 * (→ revision.css) içinde ayrı ayrı elle kopyalanmıştı; biri güncellenip diğeri unutulunca sayfalar
 * arasında davranış farkı oluştu. Artık tek kaynak burası — SCSS/derleme akışının dışında, kendi
 * başına yüklenen bağımsız bir dosya (bkz. Styles/shared/domain-contact-modal.css ile aynı desen).
 * Renk değerleri her iki tasarım sisteminde de birebir aynı olduğu için sabit hex olarak çözülmüştür.
 */

.unpaid-order-selector {
    position: relative;
}

/* Menü hem butonun hem kendisinin (fare aşağı, tabloya doğru inerken) hover'ında açık kalır —
   ikisi de bu üst kapsayıcının içinde olduğu için tek bir :hover kuralı yeterli. Buton ile menü
   arasında boşluk YOK (top: 100%) — bir boşluk bırakılırsa fare geçerken hiçbir alt öğe üzerinde
   olmuyor, üst kapsayıcının :hover'ı düşüp menü daha fare ulaşmadan kapanıyor.

   Dikey boşluk olmaması TEK BAŞINA yetmiyordu: menü butondan çok daha geniş (min-width 340px)
   ve SAĞA yaslı (right: 0), yani butonun SOLUNA doğru taşıyor. Kullanıcı butondan tablonun sol
   sütunlarına çapraz indiğinde ne butonun ne menünün üzerinde olmadığı bir ölü bölgeden geçiyor,
   :hover düşüyor ve menü daha fare ulaşamadan kapanıyordu. Çözüm aşağıdaki kapanma gecikmesi
   (.3s) — bkz. temel kuraldaki transition. Bu kural da transition-delay'i sıfırlar ki AÇILIŞ
   gecikmesiz olsun; :hover'lı seçici daha özgül (0,3,0 > 0,2,0) olduğu için kaynak sırasından
   bağımsız kazanır.

   pointer-events KASITLI OLARAK YOK: animasyonlanabilir bir özellik değil, fare çıkar çıkmaz
   anında 'none'a düşerdi — menü 0.3 saniye boyunca görünür ama tıklanamaz/hover edilemez kalır,
   yani gecikme hiçbir işe yaramazdı. Kapalı durumda hit-test'i zaten visibility: hidden engelliyor
   (üstelik max-height: 0 + overflow: hidden ile kutunun yüksekliği de sıfır). */
.unpaid-order-selector:hover .unpaid-order-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scaleY(1);
    max-height: 500px;
    transition-delay: 0s;
}

.unpaid-order-selector .unpaid-order-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    /* Dar ekranda rakam rozeti satır içi olmaktan çıkıp köşeye oturuyor (bkz. aşağıdaki
       max-width: 1024px bloğu) — konumlanma bağlamı butonun kendisi. */
    position: relative;
    background-color: transparent;
    border: 1px solid #343072;
    color: #343072;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all .2s ease;
}

.unpaid-order-selector .unpaid-order-btn i {
    font-size: 14px;
    color: #343072;
}

.unpaid-order-selector .unpaid-order-btn:hover {
    background-color: rgba(52, 48, 114, 0.08);
}

/* Renewal Center'daki .renewal-pulse-dot ile AYNI dairesel yayılan dalga animasyonu — burada
   rakam rozetinin etrafında. */
.unpaid-order-selector .unpaid-order-btn .unpaid-order-count {
    background-color: #343072;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px;
    flex-shrink: 0;
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
    animation: unpaid-order-pulse-red 2s infinite;
}

@keyframes unpaid-order-pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Metin gizlenip buton yuvarlak bir ikon düğmesine indiğinde ikon + boşluk + rakam rozeti
   (14 + 8 + 18 = 40px) 34px'lik dairenin içine SIĞMIYOR: rozette flex-shrink: 0 olduğu için
   daralan hep ikon oluyor, ikisi üst üste biniyordu. Bu genişlikten itibaren rozet satır içi
   olmaktan çıkıp .cart-badge ile aynı desende köşeye oturuyor, ikon ortada tam boyunda kalıyor. */
@media (max-width: 1024px) {
    .unpaid-order-selector .unpaid-order-btn .unpaid-order-text {
        display: none;
    }
    .unpaid-order-selector .unpaid-order-btn {
        width: 34px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .unpaid-order-selector .unpaid-order-btn .unpaid-order-count {
        position: absolute;
        top: -6px;
        right: -6px;
        border: 2px solid #fff;
    }
}

/* Yalnızca eski panelin kendi kısıtlı mobil genişliğinde davrandığı ek bir kırılma noktası
   (atak-panel'in eşdeğeri yok, ama zararsız — genişlik zaten 1024px kuralıyla sabitlendi). */
@media (max-width: 768px) {
    .unpaid-order-selector .unpaid-order-btn {
        width: 32px;
        height: 32px;
    }
}

.unpaid-order-selector .unpaid-order-menu {
    /* Markup Bootstrap'ın .dropdown-menu sınıfını da taşıyor — her iki Bootstrap sürümü de bu
       sınıfa kendi display/padding varsayılanını (display:none; padding:5px 0 ya da 0.5rem 0)
       veriyor. Burada AÇIKÇA ezilmezse opacity/visibility geçişi hiç çalışmaz ve/ya listeyle
       "Tüm Siparişlerim" düğmesi arasında istenmeyen bir boşluk belirir. */
    display: block;
    padding: 0;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Genişlik tabloya göre belirleniyor. Hücreler nowrap; "Öde" düğmesinin çevirisi uzadığında
       ("Bezahlen", "Оплатить") dört sütun 340px'i aşıyor ve menünün overflow: hidden'ı (max-height
       geçişi için gerekli) son sütunu kırpıyordu. min-width eski sabit genişliği taban olarak
       koruyor; 420px tavanı hem menü başlığının (max-content'i o da besliyor) menüyü gereksiz
       genişletmesini engelliyor hem de tablonun en uzun çeviriye sığmasına yetiyor, calc() ise
       dar ekranda ekranı taşırmıyor. */
    width: max-content;
    min-width: 340px;
    max-width: min(420px, calc(100vw - 32px));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scaleY(0.8);
    transform-origin: top right;
    /* Gecikme YALNIZCA kapanışta çalışır: fare çıktığında yeni durum bu kural olduğu için .3s
       beklenir, fare bu sırada menüye girerse :hover kuralı devreye girip transition-delay'i 0'a
       çeker ve menü hiç kapanmaya başlamadan açık kalır. Fare geri gelmezse 0.3 sn sonra normal
       .2 sn'lik kapanma animasyonu başlar. Saf CSS — zamanlayıcı tutan bir JS'e gerek yok. */
    transition: all .2s ease .3s;
    z-index: 1001;
    overflow: hidden;
    max-height: 0;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-menu-title {
    padding: 12px 16px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #20262C;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-table {
    /* Müşteri Panel'in yüklediği eski atakteknoloji-v2.css bütün <table>'lara
       margin-bottom: 30px veriyor (atak-panel/CheckoutHeader'da böyle bir kural yok).
       Açıkça sıfırlanmazsa satır listesi ile "Siparişlerim" düğmesi arasında boşluk kalır. */
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-table td {
    padding: 8px 16px;
    font-size: 12px;
    color: #20262C;
    border-top: 1px solid #E8E8E8;
    white-space: nowrap;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-code {
    font-weight: 600;
}

/* Sipariş kodu artık detay sayfasına giden bir link — her iki tasarım sisteminin de
   <a> için kendi rengi/altı çizgisi var; burada açıkça sabitlenmezse panelden panele
   farklı görünür. */
.unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-code a {
    color: #343072;
    text-decoration: none;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-code a:hover {
    text-decoration: underline;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-amount {
    font-weight: 600;
    color: #343072;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-date {
    color: #8A8D93;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-pay {
    text-align: right;
}

/* İlk hover'da AJAX yanıtı gelene kadar gösterilen satır (bkz. .ascx, cart-header.js/member-panel.js). */
.unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-loading td {
    text-align: center;
    padding: 16px;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-loading td .spinner-border {
    width: 20px;
    height: 20px;
    color: #343072;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-pay-btn {
    display: inline-block;
    padding: 5px 12px;
    background-color: #343072;
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: filter .2s ease;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-pay-btn:hover {
    filter: brightness(0.9);
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-menu-all {
    display: block;
    padding: 10px 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #343072;
    text-decoration: none;
    border-top: 1px solid #E8E8E8;
    background-color: #F3F2F2;
    transition: filter .2s ease;
}

.unpaid-order-selector .unpaid-order-menu .unpaid-order-menu-all:hover {
    filter: brightness(0.96);
}

@media (max-width: 480px) {
    .unpaid-order-selector .unpaid-order-menu {
        position: fixed;
        top: auto;
        right: 8px;
        left: 8px;
        width: auto;
        /* Genişliği artık yalnızca left/right belirliyor. min-width sıfırlanmazsa yukarıdaki
           340px taban genişliği 320px'lik ekranda menüyü taşırır; max-width kalırsa kural fazladan
           kısıtlar (left + right + max-width) ve tarayıcı right'ı yok sayıp menüyü sola kaydırır. */
        min-width: 0;
        max-width: none;
    }

    /* Dört sütun (kod + tutar + tarih + Öde) bu genişliğe sığmıyor. Tarih düşürülüp hücre
       boşlukları daraltılıyor; kalan üç sütun 320px'de bile kırpılmadan sığıyor. */
    .unpaid-order-selector .unpaid-order-menu .unpaid-order-table td {
        padding: 8px 10px;
    }

    .unpaid-order-selector .unpaid-order-menu .unpaid-order-table .unpaid-order-date {
        display: none;
    }
}