:root {
    --f-spinner-width: 36px;
    --f-spinner-height: 36px;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
    --f-spinner-stroke: 2.75
}

.f-spinner {
    margin: auto;
    padding: 0;
    width: var(--f-spinner-width);
    height: var(--f-spinner-height)
}

.f-spinner svg {
    width: 100%;
    height: 100%;
    vertical-align: top;
    animation: f-spinner-rotate 2s linear infinite
}

.f-spinner svg * {
    stroke-width: var(--f-spinner-stroke);
    fill: none
}

.f-spinner svg *:first-child {
    stroke: var(--f-spinner-color-1)
}

.f-spinner svg *:last-child {
    stroke: var(--f-spinner-color-2);
    animation: f-spinner-dash 2s ease-in-out infinite
}

@keyframes f-spinner-rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes f-spinner-dash {
    0% {
        stroke-dasharray: 1,150;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -35
    }

    100% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -124
    }
}

.f-throwOutUp {
    animation: var(--f-throw-out-duration,0.175s) ease-out both f-throwOutUp
}

.f-throwOutDown {
    animation: var(--f-throw-out-duration,0.175s) ease-out both f-throwOutDown
}

@keyframes f-throwOutUp {
    to {
        transform: translate3d(0,calc(var(--f-throw-out-distance, 150px) * -1),0);
        opacity: 0
    }
}

@keyframes f-throwOutDown {
    to {
        transform: translate3d(0,var(--f-throw-out-distance,150px),0);
        opacity: 0
    }
}

.f-zoomInUp {
    animation: var(--f-transition-duration,0.2s) ease .1s both f-zoomInUp
}

.f-zoomOutDown {
    animation: var(--f-transition-duration,0.2s) ease both f-zoomOutDown
}

@keyframes f-zoomInUp {
    from {
        transform: scale(.975) translate3d(0,16px,0);
        opacity: 0
    }

    to {
        transform: scale(1) translate3d(0,0,0);
        opacity: 1
    }
}

@keyframes f-zoomOutDown {
    to {
        transform: scale(.975) translate3d(0,16px,0);
        opacity: 0
    }
}

.f-fadeIn {
    animation: var(--f-transition-duration,0.2s) var(--f-transition-easing,ease) var(--f-transition-delay,0s) both f-fadeIn;
    z-index: 2
}

.f-fadeOut {
    animation: var(--f-transition-duration,0.2s) var(--f-transition-easing,ease) var(--f-transition-delay,0s) both f-fadeOut;
    z-index: 1
}

@keyframes f-fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes f-fadeOut {
    100% {
        opacity: 0
    }
}

.f-fadeFastIn {
    animation: var(--f-transition-duration,0.2s) ease-out both f-fadeFastIn;
    z-index: 2
}

.f-fadeFastOut {
    animation: var(--f-transition-duration,0.1s) ease-out both f-fadeFastOut;
    z-index: 2
}

@keyframes f-fadeFastIn {
    0% {
        opacity: .75
    }

    100% {
        opacity: 1
    }
}

@keyframes f-fadeFastOut {
    100% {
        opacity: 0
    }
}

.f-fadeSlowIn {
    animation: var(--f-transition-duration,0.5s) ease both f-fadeSlowIn;
    z-index: 2
}

.f-fadeSlowOut {
    animation: var(--f-transition-duration,0.5s) ease both f-fadeSlowOut;
    z-index: 1
}

@keyframes f-fadeSlowIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes f-fadeSlowOut {
    100% {
        opacity: 0
    }
}

.f-crossfadeIn {
    animation: var(--f-transition-duration,0.2s) ease-out both f-crossfadeIn;
    z-index: 2
}

.f-crossfadeOut {
    animation: calc(var(--f-transition-duration, 0.2s)*.5) linear .1s both f-crossfadeOut;
    z-index: 1
}

@keyframes f-crossfadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes f-crossfadeOut {
    100% {
        opacity: 0
    }
}

.f-slideIn.from-next {
    animation: var(--f-transition-duration,0.85s) cubic-bezier(.16,1,.3,1) f-slideInNext
}

.f-slideIn.from-prev {
    animation: var(--f-transition-duration,0.85s) cubic-bezier(.16,1,.3,1) f-slideInPrev
}

.f-slideOut.to-next {
    animation: var(--f-transition-duration,0.85s) cubic-bezier(.16,1,.3,1) f-slideOutNext
}

.f-slideOut.to-prev {
    animation: var(--f-transition-duration,0.85s) cubic-bezier(.16,1,.3,1) f-slideOutPrev
}

@keyframes f-slideInPrev {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translate3d(0,0,0)
    }
}

@keyframes f-slideInNext {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translate3d(0,0,0)
    }
}

@keyframes f-slideOutNext {
    100% {
        transform: translateX(-100%)
    }
}

@keyframes f-slideOutPrev {
    100% {
        transform: translateX(100%)
    }
}

.f-classicIn.from-next {
    animation: var(--f-transition-duration,0.85s) cubic-bezier(.16,1,.3,1) f-classicInNext;
    z-index: 2
}

.f-classicIn.from-prev {
    animation: var(--f-transition-duration,0.85s) cubic-bezier(.16,1,.3,1) f-classicInPrev;
    z-index: 2
}

.f-classicOut.to-next {
    animation: var(--f-transition-duration,0.85s) cubic-bezier(.16,1,.3,1) f-classicOutNext;
    z-index: 1
}

.f-classicOut.to-prev {
    animation: var(--f-transition-duration,0.85s) cubic-bezier(.16,1,.3,1) f-classicOutPrev;
    z-index: 1
}

@keyframes f-classicInNext {
    0% {
        transform: translateX(-75px);
        opacity: 0
    }

    100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@keyframes f-classicInPrev {
    0% {
        transform: translateX(75px);
        opacity: 0
    }

    100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@keyframes f-classicOutNext {
    100% {
        transform: translateX(-75px);
        opacity: 0
    }
}

@keyframes f-classicOutPrev {
    100% {
        transform: translateX(75px);
        opacity: 0
    }
}

.f-carousel {
    --f-carousel-theme-color: #706f6c;
    --f-carousel-spacing: 0px;
    --f-carousel-slide-width: 100%;
    --f-carousel-slide-height: auto;
    --f-carousel-slide-padding: 0;
    --f-button-width: 42px;
    --f-button-height: 42px;
    --f-button-color: var(--f-carousel-theme-color, currentColor);
    --f-button-hover-color: var(--f-carousel-theme-color, currentColor);
    --f-button-bg: transparent;
    --f-button-hover-bg: var(--f-button-bg);
    --f-button-active-bg: var(--f-button-bg);
    --f-button-svg-width: 24px;
    --f-button-svg-height: 24px;
    --f-button-next-pos: 10px;
    --f-button-prev-pos: 10px;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
    --f-spinner-stroke: 2.75;
    position: relative;
    box-sizing: border-box
}

.f-carousel *,.f-carousel *:before,.f-carousel *:after {
    box-sizing: inherit
}

.f-carousel.is-ltr {
    direction: ltr
}

.f-carousel.is-rtl {
    direction: rtl
}

.f-carousel__viewport {
    overflow: hidden;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    width: 100%;
    height: 100%
}

.f-carousel__viewport.is-draggable {
    cursor: move;
    cursor: grab
}

.f-carousel__viewport.is-dragging {
    cursor: move;
    cursor: grabbing
}

.f-carousel__track {
    display: flex;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.f-carousel__slide {
    position: relative;
    flex: 0 0 auto;
    width: var(--f-carousel-slide-width);
    max-width: 100%;
    height: var(--f-carousel-slide-height);
    margin: 0 var(--f-carousel-spacing) 0 0;
    padding: var(--f-carousel-slide-padding);
    outline: 0;
    transform-origin: center center
}

.f-carousel__slide img.is-preloading {
    visibility: hidden
}

.f-carousel__slide>.f-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.f-carousel.is-vertical {
    --f-carousel-slide-height: 100%
}

.f-carousel.is-vertical .f-carousel__track {
    flex-wrap: wrap
}

.f-carousel.is-vertical .f-carousel__slide {
    margin: 0 0 var(--f-carousel-spacing) 0
}

:root {
    --f-carousel-dots-width: 24px;
    --f-carousel-dots-height: 30px;
    --f-carousel-dot-width: 8px;
    --f-carousel-dot-height: 8px;
    --f-carousel-dot-radius: 50%;
    --f-carousel-dot-color: var(--f-carousel-theme-color, currentColor);
    --f-carousel-dot-opacity: 0.2;
    --f-carousel-dot-hover-opacity: 0.4
}

.f-carousel.has-dots {
    margin-bottom: var(--f-carousel-dots-height)
}

.f-carousel__dots {
    position: absolute;
    bottom: calc(var(--f-carousel-dots-height)*-1);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto!important;
    padding: 0;
    list-style: none!important;
    user-select: none
}

.f-carousel__dots li {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: var(--f-carousel-dot-opacity);
    transition: opacity .15s ease-in-out
}

.f-carousel__dots li+li {
    margin: 0
}

.f-carousel__dots li:hover {
    opacity: var(--f-carousel-dot-hover-opacity)
}

.f-carousel__dots li.is-current {
    opacity: 1
}

.f-carousel__dots li button {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: var(--f-carousel-dots-width);
    height: var(--f-carousel-dots-height);
    border: 0;
    background: rgba(0,0,0,0);
    cursor: pointer;
    transition: all .2s linear
}

.f-carousel__dot {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    width: var(--f-carousel-dot-width);
    height: var(--f-carousel-dot-height);
    border-radius: var(--f-carousel-dot-radius);
    background-color: var(--f-carousel-dot-color);
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    pointer-events: none
}

.f-carousel__dots.is-dynamic li:not(.is-prev,.is-next,.is-current,.is-after-next,.is-before-prev) button {
    transform: scale(0);
    width: 0
}

.f-carousel__dots.is-dynamic li.is-before-prev button,.f-carousel__dots.is-dynamic li.is-after-next button {
    transform: scale(.22)
}

.f-carousel__dots.is-dynamic li.is-prev button,.f-carousel__dots.is-dynamic li.is-next button {
    transform: scale(.66)
}

.f-carousel__dots.is-dynamic li.is-current button {
    transform: scale(1)
}

.f-carousel__dots.is-dynamic li.is-before-prev button,.f-carousel__dots.is-dynamic li.is-after-next button {
    transform: scale(.33)
}

.f-carousel__dots.is-dynamic li.is-current:first-child {
    margin-left: calc(var(--f-carousel-dots-width)*2)
}

.f-carousel__dots.is-dynamic li.is-prev:first-child {
    margin-left: var(--f-carousel-dots-width)
}

.f-carousel__dots.is-dynamic li.is-next:last-child {
    margin-right: var(--f-carousel-dots-width)
}

.f-carousel__dots.is-dynamic li.is-current:last-child {
    margin-right: calc(var(--f-carousel-dots-width)*2)
}

.f-carousel.is-rtl .f-carousel__dots.is-dynamic .is-current:first-child {
    margin-left: 0;
    margin-right: var(--f-carousel-dots-width)
}

.f-carousel.is-rtl .f-carousel__dots.is-dynamic .is-prev:first-child {
    margin-left: 0;
    margin-right: var(--f-carousel-dots-width)
}

.f-carousel.is-rtl .f-carousel__dots.is-dynamic .is-current:last-child {
    margin-left: 0;
    margin-right: var(--f-carousel-dots-width)
}

.f-carousel.is-rtl .f-carousel__dots.is-dynamic .is-next:last-child {
    margin-right: 0;
    margin-left: var(--f-carousel-dots-width)
}

:root {
    --f-button-width: 40px;
    --f-button-height: 40px;
    --f-button-border: 0;
    --f-button-border-radius: 0;
    --f-button-color: #374151;
    --f-button-bg: #f8f8f8;
    --f-button-hover-bg: #e0e0e0;
    --f-button-active-bg: #d0d0d0;
    --f-button-shadow: none;
    --f-button-transition: all 0.15s ease;
    --f-button-transform: none;
    --f-button-svg-width: 20px;
    --f-button-svg-height: 20px;
    --f-button-svg-stroke-width: 1.5;
    --f-button-svg-fill: none;
    --f-button-svg-filter: none;
    --f-button-svg-disabled-opacity: 0.65
}

.f-button {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    position: relative;
    margin: 0;
    padding: 0;
    width: var(--f-button-width);
    height: var(--f-button-height);
    border: var(--f-button-border);
    border-radius: var(--f-button-border-radius);
    color: var(--f-button-color);
    background: var(--f-button-bg);
    box-shadow: var(--f-button-shadow);
    pointer-events: all;
    cursor: pointer;
    transition: var(--f-button-transition)
}

@media(hover: hover) {
    .f-button:hover:not([disabled]) {
        color:var(--f-button-hover-color);
        background-color: var(--f-button-hover-bg)
    }
}

.f-button:active:not([disabled]) {
    background-color: var(--f-button-active-bg)
}

.f-button:focus:not(:focus-visible) {
    outline: none
}

.f-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--f-button-outline,2px) var(--f-button-outline-color,var(--f-button-color))
}

.f-button svg {
    width: var(--f-button-svg-width);
    height: var(--f-button-svg-height);
    fill: var(--f-button-svg-fill);
    stroke: currentColor;
    stroke-width: var(--f-button-svg-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .15s ease;
    transform: var(--f-button-transform);
    filter: var(--f-button-svg-filter);
    pointer-events: none
}

.f-button[disabled] {
    cursor: default
}

.f-button[disabled] svg {
    opacity: var(--f-button-svg-disabled-opacity)
}

.f-carousel__nav .f-button.is-prev,.f-carousel__nav .f-button.is-next,.fancybox__nav .f-button.is-prev,.fancybox__nav .f-button.is-next {
    position: absolute;
    z-index: 1
}

.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-next {
    top: 50%;
    transform: translateY(-50%)
}

.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-prev {
    left: var(--f-button-prev-pos)
}

.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-next {
    right: var(--f-button-next-pos)
}

.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev {
    left: auto;
    right: var(--f-button-next-pos)
}

.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,.is-horizontal.is-rtl .fancybox__nav .f-button.is-next {
    right: auto;
    left: var(--f-button-prev-pos)
}

.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-next {
    top: auto;
    left: 50%;
    transform: translateX(-50%)
}

.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-prev {
    top: var(--f-button-next-pos)
}

.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-next {
    bottom: var(--f-button-next-pos)
}

.is-vertical .f-carousel__nav .f-button.is-prev svg,.is-vertical .f-carousel__nav .f-button.is-next svg,.is-vertical .fancybox__nav .f-button.is-prev svg,.is-vertical .fancybox__nav .f-button.is-next svg {
    transform: rotate(90deg)
}

.f-carousel__nav .f-button:disabled,.fancybox__nav .f-button:disabled {
    pointer-events: none
}

/* CSS-only Scrollable Screenshot Gallery */
.aap-screenshots-container {
    width: 100%;
    margin: 1.5rem 0;
}

.aap-screenshots-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.aap-scroll-btn {
    position: absolute;
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 0;
}

.aap-scroll-btn:hover {
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.aap-scroll-btn svg {
    width: 24px;
    height: 24px;
    fill: #374151;
}

.aap-prev {
    left: -20px;
}

.aap-next {
    right: -20px;
}

@media (max-width: 1024px) {
    .aap-scroll-btn {
        display: none; /* Hide arrows on touch devices */
    }
}

.aap-screenshots-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 12px 0;
    margin-bottom: 5px;
}

/* Styled scrollbar for PC users */
.aap-screenshots-scroll::-webkit-scrollbar {
    height: 6px;
    display: block;
}

.aap-screenshots-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.aap-screenshots-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
    transition: background 0.3s;
}

.aap-screenshots-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Firefox scrollbar support */
.aap-screenshots-scroll {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f1f1f1;
}

.aap-screenshot-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.aap-screenshot-item:hover {
    transform: translateY(-5px);
}

.aap-screenshot-item img {
    display: block;
    height: 420px;
    width: auto;
    max-width: none;
    object-fit: cover;
    cursor: zoom-in;
}

@media (max-width: 960px) {
    .aap-screenshot-item img {
        height: 360px;
    }
}

@media (max-width: 640px) {
    .aap-screenshot-item img {
        height: 300px;
    }
    .aap-screenshots-scroll {
        gap: 10px;
        /* Hide scrollbar on mobile for cleaner look as it's touch-ready */
        scrollbar-width: none;
    }
    .aap-screenshots-scroll::-webkit-scrollbar {
        display: none;
    }
}