/* Default Pop up styles */

.modalBackground {
    background-color: #414141;
    filter: opacity(70%)
}

.PopupStyle {
    background-color: White;
    width: 400px;
    margin: 0px;
    padding: 15px;
    border-right: #336699 2px solid;
    border-top: #336699 2px solid;
    border-left: #336699 2px solid;
    border-bottom: #336699 2px solid;
}

.AddToCartPopupModalBackground {
    background-color: #414141;
    filter: opacity(70%)
}

.AddToCartPopupStyle {
    background-color: White;
    width: 500px;
    margin: 0px;
    padding: 15px;
    border-right: #336699 2px solid;
    border-top: #336699 2px solid;
    border-left: #336699 2px solid;
    border-bottom: #336699 2px solid;
}

.ReorderConfirmationModalBackground {
    background-color: #414141;
    filter: opacity(70%)
}

.ReorderConfirmationPopupStyle {
    background-color: White;
    width: 400px;
    margin: 0px;
    padding: 15px;
    border-right: #336699 2px solid;
    border-top: #336699 2px solid;
    border-left: #336699 2px solid;
    border-bottom: #336699 2px solid;
}

.ConfirmationModalBackground {
    background-color: #414141;
    filter: opacity(70%)
}

.ConfirmationPopupStyle {
    background-color: White;
    width: 400px;
    margin: 0px;
    padding: 15px;
    border-right: #336699 2px solid;
    border-top: #336699 2px solid;
    border-left: #336699 2px solid;
    border-bottom: #336699 2px solid;
}

/* UpdatePanel / UpdateProgress spinner (replaces Telerik RadAjaxLoadingPanel) */
@keyframes pse-spin {
    to { transform: rotate(360deg); }
}

/* All other ajax-loading-panel spinners (shipping calc, etc.) — fullscreen centered */
.ajax-loading-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkout submit overlay — fixed, covers full viewport */
.pse-checkout-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pse-checkout-spinner {
    width: 48px; height: 48px;
    border: 5px solid #ccc;
    border-top-color: #555;
    border-radius: 50%;
    animation: pse-spin 0.75s linear infinite;
}

/* Container panels need relative positioning for the overlay to work */
.pse-ordering-panel,
.pse-product-list-panel,
.pse-cart-panel {
    position: relative;
}
/* Scroller arrow styles — pse-arrow-circular matches legacy jQuery Tools style */
.swiper-button-prev.pse-arrow-circular,
.swiper-button-next.pse-arrow-circular {
    width: 36px;
    height: 36px;
    background: #8b1a1a;
    border-radius: 50%;
    color: #fff;
    --swiper-navigation-size: 16px;
    top: 40%;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.swiper:hover .swiper-button-prev.pse-arrow-circular,
.swiper:hover .swiper-button-next.pse-arrow-circular {
    opacity: 0.85;
}
.swiper-button-prev.pse-arrow-circular:hover,
.swiper-button-next.pse-arrow-circular:hover {
    opacity: 1 !important;
    background: #6b1010;
}
.swiper-button-prev.pse-arrow-hidden,
.swiper-button-next.pse-arrow-hidden {
    display: none !important;
}
/* Override legacy jQuery Tools scroller dimensions — Gen1 themes set fixed height/width/float on .scrollable
   which constrain the Swiper container. Reset dimensions to auto; keep overflow:hidden (Swiper needs it to
   clip slides outside the visible window). */
.swiper[class*="scrollable"] {
    height: auto !important;
    width: auto !important;
    float: none !important;
    position: relative !important;
}

/* Slide layout: fixed total card height so all cards are uniform.
   --slide-img-h is the total card height (set by Scroller_SlideHeight). */
.swiper-slide {
    display: flex;
    flex-direction: column;
    height: var(--slide-img-h, auto) !important;
    overflow: hidden;
}
/* Gen2: .list-img fills remaining space above product info */
.swiper-slide .list-img {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
/* Gen1: outer span.Image is the flex item; cap at card height minus text area so name/price always show */
.swiper-slide span.Image {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    max-height: calc(var(--slide-img-h, 200px) - 60px);
    display: flex;
    flex-direction: column;
    position: relative;
}
.swiper-slide span.Image div.Image {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
/* Badge/new-icon overlays the image instead of consuming vertical space */
.swiper-slide span.Image .NewI {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
}
/* Scroller product images: shrink-to-fit if larger than container, never upscale small thumbnails */
.swiper-slide .list-img a img,
.swiper-slide .Image a img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
}