/**
 * PS Combination Images - Frontend Styles
 * 
 * @author DeepSea
 * @copyright DeepSea
 */

/* Custom styles for combination images functionality */
.product-images .js-thumb {
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.product-images .js-thumb.hidden-by-combination {
    display: none !important;
}

.product-images .js-thumb:hover {
    transform: scale(1.05);
}

/* Color picker enhancement */
.product-variants .color {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-variants .color:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.product-variants .color.active,
.product-variants .color.selected {
    box-shadow: 0 0 0 3px var(--bs-primary, #2fb5d2);
}

/* Image gallery smooth transitions */
.product-cover {
    transition: opacity 0.3s ease;
}

.product-cover.loading {
    opacity: 0.5;
}

/* Thumbnail transition */
.product-images img {
    transition: opacity 0.3s ease;
}

/* DS Combination Images — color picker as image swatches.
   Container yüksek/genişliği TÜM li'lere uygulanır (görseli olmayan da aynı 56x56). */
.ds-color-image-picker .input-container {
    width: 120px;
    height: 120px;
    margin: 5px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.ds-color-image-picker .input-container:hover {
    border-color: #ccc;
    transform: scale(1.05);
}
/* Mobil: 120px satırda 2'ye düşürüyordu (15 renkte sayfa çok uzuyor) →
   104px + dar margin = 3'lü sıra korunur, eski 100px'ten yine büyük. */
@media (max-width: 575.98px) {
    .ds-color-image-picker .input-container {
        width: 104px;
        height: 104px;
        margin: 4px;
    }
}
.ds-color-image-picker .input-container input.input-color:checked + .color {
    outline: 2px solid #28a745;
    outline-offset: 1px;
}
.ds-color-image-picker .color {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: 2px;
    overflow: hidden;
    box-sizing: border-box;
}
.ds-color-image-picker .color.color-image {
    background: none !important;
}
.ds-color-image-picker .color-attribute-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* DS Combination Images — unavailable size/attribute (no combination for current color) */
.ds-attr-unavailable,
.ds-attr-unavailable .radio-label {
    text-decoration: line-through !important;
    color: #aaa !important;
    cursor: not-allowed !important;
    opacity: 0.55;
}
.ds-attr-unavailable .radio-label {
    background: transparent !important;
    border-color: #ddd !important;
}
.ds-attr-unavailable input {
    pointer-events: none;
}

/* DS — color swatch out of stock for currently selected size: diagonal cross */
.ds-color-image-picker .input-container.ds-color-oos-for-size {
    position: relative;
    opacity: 0.55;
}
.ds-color-image-picker .input-container.ds-color-oos-for-size::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        transparent 0,
        transparent calc(50% - 1px),
        rgba(0, 0, 0, 0.65) calc(50% - 1px),
        rgba(0, 0, 0, 0.65) calc(50% + 1px),
        transparent calc(50% + 1px),
        transparent 100%
    );
    pointer-events: none;
    z-index: 3;
    border-radius: inherit;
}

/* DS — variant gruplarını her zaman alt alta göster (renk üstte, beden altta).
   Tema default: inline-block + auto width → renk az olunca beden yanına sığabiliyor. */
html .product-variants .product-variants-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

/* DS — beden hover layout shift fix.
   Tema default state: span'da `border:0 + padding:2px 6px`.
   Hover/checked: span'da `border:2px + padding:0 4px`.
   Box-sizing: border-box ile total stable AMA içerik (text) anlık olarak
   1-2px sıçrayabiliyor → komşu fiyat satırı sallanıyor.
   Çözüm: default'ta DA `border: 2px transparent + padding: 0 4px` koyup
   hover/checked'de sadece border-color'i değiştir → padding/border tamamen
   sabit, hiç layout shift yok. */
html .product-variants ul li.input-container input.input-radio + span {
    border: 2px solid transparent !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}
html .product-variants ul li.input-container input.input-radio:hover + span,
html .product-variants ul li.input-container input.input-radio:checked + span {
    border-color: rgb(65, 65, 65) !important;
}

/* DS Combination Images — selected color name next to "Renk" label */
.product-variants .form-control-label .ds-selected-attr-name {
    font-weight: normal;
    color: #555;
    margin-left: 2px;
}

/* DS Combination Images — color swatches as a hover-revealed overlay sitting at the
   bottom of the product image (over the thumbnail's lower edge), shown only when the
   user mouses over the card. Warehouse hides the area via specificity 0,3,0; we win
   with `html ...` (0,3,1) and use opacity (not display) so the transition works. */

html .products-grid .product-miniature,
html .products-list .product-miniature {
    position: relative;
}
html .products-grid .product-miniature .product-description,
html .products-list .product-miniature .product-description {
    position: relative;
}

html .products-grid .product-miniature .products-variants,
html .products-list .product-miniature .products-variants,
html .product-miniature .products-variants {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
    z-index: 5;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

html .products-grid .product-miniature:hover .products-variants,
html .products-grid .product-miniature:focus-within .products-variants,
html .products-list .product-miniature:hover .products-variants,
html .products-list .product-miniature:focus-within .products-variants,
html .product-miniature:hover .products-variants,
html .product-miniature:focus-within .products-variants {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.products-variants .variant-links {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 0;
}
.products-variants .variant-links .color {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 2px !important;       /* square swatches with slight rounding */
    background-size: cover;
    background-position: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    flex: 0 0 auto;
}
.products-variants .variant-links .color:hover {
    transform: scale(1.18);
    border-color: rgba(0, 0, 0, 0.45) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 3;
}
.products-variants .variant-links .js-count.count {
    align-self: center;
    font-size: 0.8em;
    color: #777;
    margin-left: 2px;
}

/* DS — product page H1 (taşındığı top konum), kompakt boyut.
   `#content-wrapper .page-title { font-size: 2.53rem }` (specificity 1,1,0)'i
   geçmek için aynı id prefix + ek class ile (1,2,0) yazıyoruz. */
#content-wrapper .page-title.page-title-top {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 1rem;
}

/* ============================================================
   Sol filtre (ps_facetedsearch) — SEÇİLİ renk swatch'ını belirgin yap.
   Renk facet'inde yalnızca kare swatch var (etiket yok) → kullanıcı hangi
   rengi seçtiğini ayırt edemiyordu. Seçili olanı accent ring + hafif
   büyütme + onay işareti ile vurgula. `input:checked` seçiliyi güvenilir
   biçimde işaretler (data-search-url seçince değişse de checked sabit).
   ============================================================ */
#search_filters .custom-checkbox .color {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#search_filters .custom-checkbox { overflow: visible; }
#search_filters .custom-checkbox input:checked ~ .color {
    border-color: #2f6fed !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f6fed !important;
    transform: scale(1.12);
    position: relative;
    z-index: 2;
}
/* Onay işareti — beyaz + koyu gölge → hem koyu hem açık renklerde görünür */
#search_filters .custom-checkbox input:checked ~ .color::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7));
    pointer-events: none;
}


/* DS — liste swatch hover önizlemesi: tema, kart hover'ında 2. görseli üste
   çıkarır (opacity swap); renk önizlemesi sırasında src'sini değiştirdiğimiz
   İLK görseli zorla görünür tut. */
.js-product-miniature.ds-swatch-preview .thumbnail-container img {
    opacity: 0 !important;
}
.js-product-miniature.ds-swatch-preview .thumbnail-container img.product-thumbnail-first {
    opacity: 1 !important;
}

/* DS (2026-07-23): renk görselleri sabit menünün üstüne biniyordu — #col-product-info
   z-100, #header kök bağlamıyla (z-100, menünün z-5000'i içinde hapis) eşitti ve DOM'da
   sonra geldiği için kazanıyordu. 99 = carousel(z1) üstü + header(100) altı. Kaynak kural
   custom.css'te de 99'a çekildi; buradaki !important, tema CCC bundle'ının (sabit adlı →
   Cloudflare 3 gün stale) gecikmesine karşı ANINDA etki için (bu dosya remote+?v ile taze). */
#col-product-info {
    z-index: 99 !important;
}