/*
 * Ganjeh Kala central carousel navigation system.
 * Logical contract:
 * - previous is at inline-start (right in RTL, left in LTR)
 * - next is at inline-end (left in RTL, right in LTR)
 * - every horizontal control uses one canonical chevron and one state model
 */
:root {
    --gk-sw-nav-size: 44px;
    --gk-sw-nav-radius: 999px;
    --gk-sw-nav-offset: 10px;
    --gk-sw-nav-color: #0b1220;
    --gk-sw-nav-bg: #fff;
    --gk-sw-nav-border: rgba(15, 23, 42, .10);
    --gk-sw-nav-hover-bg: var(--gk-primary, #3b82f6);
    --gk-sw-nav-hover-color: #fff;
    --gk-sw-pag-active: var(--gk-primary, #3b82f6);
    --gk-sw-pag-inactive: #d1d5db;
    --gk-sw-pag-size: 8px;
}

[data-gk-carousel-control="1"] {
    --gk-carousel-control-size: var(--gk-sw-nav-size, 44px);
    --gk-carousel-control-offset: var(--gk-sw-nav-offset, 10px);
    box-sizing: border-box !important;
    width: var(--gk-carousel-control-size) !important;
    min-width: var(--gk-carousel-control-size) !important;
    height: var(--gk-carousel-control-size) !important;
    min-height: var(--gk-carousel-control-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--gk-sw-nav-border, rgba(15, 23, 42, .10)) !important;
    border-radius: var(--gk-sw-nav-radius, 999px) !important;
    background: var(--gk-sw-nav-bg, #fff) !important;
    color: var(--gk-sw-nav-color, #0b1220) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12) !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--gk-carousel-control-size) !important;
    line-height: 1 !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    cursor: pointer !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 20 !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .18s ease !important;
}

[data-gk-carousel-control="1"]::before,
[data-gk-carousel-control="1"]::after {
    content: none !important;
    display: none !important;
}

[data-gk-carousel-control="1"] .gk-carousel-control__icon {
    width: 46%;
    height: 46%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform-origin: center;
}

[data-gk-carousel-control="1"] .gk-carousel-control__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Base SVG points left. Logical action and document direction determine rotation. */
html:not([dir="rtl"]) [data-gk-carousel-axis="horizontal"][data-gk-carousel-action="prev"] .gk-carousel-control__icon,
[dir="ltr"] [data-gk-carousel-axis="horizontal"][data-gk-carousel-action="prev"] .gk-carousel-control__icon,
html[dir="rtl"] [data-gk-carousel-axis="horizontal"][data-gk-carousel-action="next"] .gk-carousel-control__icon,
[dir="rtl"] [data-gk-carousel-axis="horizontal"][data-gk-carousel-action="next"] .gk-carousel-control__icon {
    transform: rotate(0deg);
}

html:not([dir="rtl"]) [data-gk-carousel-axis="horizontal"][data-gk-carousel-action="next"] .gk-carousel-control__icon,
[dir="ltr"] [data-gk-carousel-axis="horizontal"][data-gk-carousel-action="next"] .gk-carousel-control__icon,
html[dir="rtl"] [data-gk-carousel-axis="horizontal"][data-gk-carousel-action="prev"] .gk-carousel-control__icon,
[dir="rtl"] [data-gk-carousel-axis="horizontal"][data-gk-carousel-action="prev"] .gk-carousel-control__icon {
    transform: rotate(180deg);
}

[data-gk-carousel-axis="vertical"][data-gk-carousel-action="prev"] .gk-carousel-control__icon { transform: rotate(90deg); }
[data-gk-carousel-axis="vertical"][data-gk-carousel-action="next"] .gk-carousel-control__icon { transform: rotate(-90deg); }

[data-gk-carousel-control="1"]:hover:not(.swiper-button-disabled):not(.swiper-button-lock):not(.is-disabled),
[data-gk-carousel-control="1"]:focus-visible:not(.swiper-button-disabled):not(.swiper-button-lock):not(.is-disabled) {
    background: var(--gk-sw-nav-hover-bg, var(--gk-primary, #3b82f6)) !important;
    color: var(--gk-sw-nav-hover-color, #fff) !important;
    border-color: var(--gk-sw-nav-hover-bg, var(--gk-primary, #3b82f6)) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18) !important;
}

[data-gk-carousel-control="1"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gk-sw-nav-hover-bg, #3b82f6) 28%, transparent) !important;
    outline-offset: 3px !important;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    [data-gk-carousel-control="1"]:focus-visible { outline-color: rgba(59, 130, 246, .28) !important; }
}

[data-gk-carousel-control="1"].swiper-button-disabled,
[data-gk-carousel-control="1"].swiper-button-lock,
[data-gk-carousel-control="1"].is-disabled,
[data-gk-carousel-control="1"].gk-nav-hidden,
[data-gk-carousel-control="1"][aria-disabled="true"] {
    opacity: .32 !important;
    cursor: default !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

[data-gk-carousel-control="1"].swiper-button-lock,
[data-gk-carousel-control="1"].gk-nav-hidden { display: none !important; }

/* Absolute horizontal controls. Logical properties guarantee correct RTL/LTR placement. */
[data-gk-carousel-control="1"][data-gk-carousel-axis="horizontal"][data-gk-carousel-placement="overlay"] {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

[data-gk-carousel-control="1"][data-gk-carousel-axis="horizontal"][data-gk-carousel-placement="overlay"][data-gk-carousel-action="prev"] {
    inset-inline-start: var(--gk-carousel-control-offset) !important;
    inset-inline-end: auto !important;
    left: auto;
    right: auto;
}

[data-gk-carousel-control="1"][data-gk-carousel-axis="horizontal"][data-gk-carousel-placement="overlay"][data-gk-carousel-action="next"] {
    inset-inline-end: var(--gk-carousel-control-offset) !important;
    inset-inline-start: auto !important;
    left: auto;
    right: auto;
}

[data-gk-carousel-control="1"][data-gk-carousel-axis="horizontal"][data-gk-carousel-placement="overlay"]:hover:not(.swiper-button-disabled):not(.is-disabled),
[data-gk-carousel-control="1"][data-gk-carousel-axis="horizontal"][data-gk-carousel-placement="overlay"]:focus-visible:not(.swiper-button-disabled):not(.is-disabled) {
    transform: translateY(-50%) scale(1.055) !important;
}

/* Inline/header controls share one order contract. */
[data-gk-carousel-control="1"][data-gk-carousel-placement="inline"],
[data-gk-carousel-control="1"][data-gk-carousel-placement="rail"] {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

[data-gk-carousel-control="1"][data-gk-carousel-placement="inline"]:hover:not(.swiper-button-disabled):not(.is-disabled),
[data-gk-carousel-control="1"][data-gk-carousel-placement="rail"]:hover:not(.swiper-button-disabled):not(.is-disabled) {
    transform: translateY(-1px) !important;
}

.gk-carousel-control-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

html[dir="rtl"] .gk-carousel-control-group { direction: rtl; }
html:not([dir="rtl"]) .gk-carousel-control-group { direction: ltr; }
.gk-carousel-control-group > [data-gk-carousel-action="prev"] { order: 1; }
.gk-carousel-control-group > [data-gk-carousel-action="next"] { order: 2; }

/* Story rail buttons are inline siblings around the rail. */
[data-gk-carousel-control="1"][data-gk-carousel-placement="rail"] {
    --gk-carousel-control-size: min(var(--gk-sw-nav-size, 44px), 40px);
}

/* Story viewer controls stay outside the viewer but follow the same logical contract. */
[data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"] {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    --gk-carousel-control-size: var(--gk-sw-nav-size, 44px);
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .22) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Outside viewer: previous follows inline-start, next follows inline-end. */
html[dir="rtl"] [data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"][data-gk-carousel-action="prev"],
[dir="rtl"] [data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"][data-gk-carousel-action="prev"] {
    left: calc(50% + (min(var(--gk-story-viewer-width, 430px), calc(100vw - 32px)) / 2) + 22px) !important;
    right: auto !important;
}

html[dir="rtl"] [data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"][data-gk-carousel-action="next"],
[dir="rtl"] [data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"][data-gk-carousel-action="next"] {
    right: calc(50% + (min(var(--gk-story-viewer-width, 430px), calc(100vw - 32px)) / 2) + 22px) !important;
    left: auto !important;
}

html:not([dir="rtl"]) [data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"][data-gk-carousel-action="prev"],
[dir="ltr"] [data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"][data-gk-carousel-action="prev"] {
    right: calc(50% + (min(var(--gk-story-viewer-width, 430px), calc(100vw - 32px)) / 2) + 22px) !important;
    left: auto !important;
}

html:not([dir="rtl"]) [data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"][data-gk-carousel-action="next"],
[dir="ltr"] [data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"][data-gk-carousel-action="next"] {
    left: calc(50% + (min(var(--gk-story-viewer-width, 430px), calc(100vw - 32px)) / 2) + 22px) !important;
    right: auto !important;
}

[data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"]:hover,
[data-gk-carousel-control="1"][data-gk-carousel-placement="viewer-outside"]:focus-visible {
    background: rgba(255, 255, 255, .24) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    transform: translateY(-50%) scale(1.055) !important;
}

/* Vertical thumbnail carousels intentionally use top/bottom controls. */
[data-gk-carousel-control="1"][data-gk-carousel-axis="vertical"] {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    --gk-carousel-control-size: min(var(--gk-sw-nav-size, 44px), 36px);
}

[data-gk-carousel-control="1"][data-gk-carousel-axis="vertical"][data-gk-carousel-action="prev"] {
    top: calc(0px - (var(--gk-carousel-control-size) / 2)) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
}

[data-gk-carousel-control="1"][data-gk-carousel-axis="vertical"][data-gk-carousel-action="next"] {
    bottom: calc(0px - (var(--gk-carousel-control-size) / 2)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
}

/* Unified pagination base; widget-specific placement may still differ. */
.swiper-pagination .swiper-pagination-bullet,
.gk-stories-rail-pagination .swiper-pagination-bullet,
.gk-cart-cross-sells__pagination .swiper-pagination-bullet {
    box-sizing: border-box;
    width: var(--gk-sw-pag-size, 8px);
    height: var(--gk-sw-pag-size, 8px);
    margin: 0 4px !important;
    border: 0;
    border-radius: 999px;
    background: var(--gk-sw-pag-inactive, #d1d5db);
    opacity: 1;
    transition: width .2s ease, transform .2s ease, background-color .2s ease;
}

.swiper-pagination .swiper-pagination-bullet-active,
.gk-stories-rail-pagination .swiper-pagination-bullet-active,
.gk-cart-cross-sells__pagination .swiper-pagination-bullet-active {
    background: var(--gk-sw-pag-active, var(--gk-primary, #3b82f6));
}

html[data-gk-carousel-pagination="lines"] .swiper-pagination .swiper-pagination-bullet,
html[data-gk-carousel-pagination="lines"] .gk-stories-rail-pagination .swiper-pagination-bullet,
html[data-gk-carousel-pagination="lines"] .gk-cart-cross-sells__pagination .swiper-pagination-bullet {
    width: calc(var(--gk-sw-pag-size, 8px) * 3);
    height: 4px;
}

html[data-gk-carousel-pagination="lines"] .swiper-pagination .swiper-pagination-bullet-active,
html[data-gk-carousel-pagination="lines"] .gk-stories-rail-pagination .swiper-pagination-bullet-active,
html[data-gk-carousel-pagination="lines"] .gk-cart-cross-sells__pagination .swiper-pagination-bullet-active {
    width: calc(var(--gk-sw-pag-size, 8px) * 4);
}

html:not([data-gk-carousel-pagination="lines"]) .swiper-pagination .swiper-pagination-bullet-active,
html:not([data-gk-carousel-pagination="lines"]) .gk-stories-rail-pagination .swiper-pagination-bullet-active,
html:not([data-gk-carousel-pagination="lines"]) .gk-cart-cross-sells__pagination .swiper-pagination-bullet-active {
    transform: scale(1.25);
}

@media (max-width: 767px) {
    html[data-gk-carousel-hide-mobile="1"] [data-gk-carousel-control="1"] {
        display: none !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    html[data-gk-carousel-nav-behavior="hover"] [data-gk-carousel-control="1"][data-gk-carousel-placement="overlay"] {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html[data-gk-carousel-nav-behavior="hover"] .swiper:hover > [data-gk-carousel-control="1"],
    html[data-gk-carousel-nav-behavior="hover"] [data-gk-carousel-control="1"]:focus-visible,
    html[data-gk-carousel-nav-behavior="hover"] [data-gk-carousel-control="1"]:focus-within {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-gk-carousel-control="1"],
    [data-gk-carousel-control="1"] .gk-carousel-control__icon,
    .swiper-pagination .swiper-pagination-bullet {
        transition-duration: .01ms !important;
    }
}