/* ============================================
   PCZONE Overflow & CLS Fixes
   Prevents horizontal overflow and layout shifts
   ============================================ */

/* ===== A) Global Overflow Guard ===== */
/* Stable scrollbar-gutter prevents page width changes when scrollbar appears/disappears */
html {
    scrollbar-gutter: stable;
}

/* Clip horizontal overflow - prevents any element from causing horizontal scroll */
/* Using both clip and hidden for browser compatibility */
html,
body {
    overflow-x: hidden; /* Fallback for older browsers */
    overflow-x: clip;   /* Modern browsers - doesn't affect scroll position */
    max-width: 100%;
}

/* ===== B) Tiny Slider Banner Overflow Fix ===== */
/* The banner slider was causing 2110px width vs 1430px viewport */

/* Main wrapper must clip overflow */
#banners-slider-mw.tns-ovh,
.hero-card .tns-ovh {
    overflow: hidden !important;
    max-width: 100% !important;
}

/* Constrain all tiny-slider wrappers to container width */
#banners-slider-iw.tns-inner,
#banners-slider-mw .tns-outer,
#banners-slider-mw .tns-inner,
.hero-card .tns-outer,
.hero-card .tns-inner,
.tns-outer,
.tns-inner,
.tns-ovh {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* 
 * DO NOT force width/display on .tns-slider - Tiny Slider manages this internally!
 * The slider calculates width based on: number_of_slides × slide_width
 * Forcing width: 100% makes each slide too small (100% / slide_count)
 * 
 * Instead, only clip overflow on the wrapper (.tns-ovh) and let slider manage itself
 */

/* Banner images must not overflow */
#banners-slider-mw img,
.hero-card img,
.banners-slider img,
.hero-slide img,
.hero-image {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Prevent static banner from causing overflow */
.hero-static-banner {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ===== C) Navigation Dropdown Overflow Fix ===== */
/* The dropdown was extending beyond viewport causing scrollWidth > clientWidth */

.pcz-nav-dropdown {
    position: relative;
    /* Prevent the dropdown container itself from reporting scrollWidth > clientWidth */
    overflow: hidden;
}

.pcz-nav-dropdown .pcz-dropdown-menu {
    max-width: min(320px, 95vw);
    /* Ensure dropdown stays within viewport */
    right: auto;
    left: 0;
}

/* For RTL support */
[dir="rtl"] .pcz-nav-dropdown .pcz-dropdown-menu {
    left: auto;
    right: 0;
}

/* Prevent dropdown from extending document width */
.pcz-dropdown-menu {
    max-width: min(320px, calc(100vw - 40px));
    overflow-x: hidden;
    overflow-y: auto;
}

/* Desktop dropdown panel positioning */
.pcz-dropdown-panel {
    max-width: min(320px, calc(100vw - 40px));
}

/* ===== D) Visually Hidden Fix ===== */
/* Ensure visually-hidden elements don't contribute to layout width */
/* This reinforces Bootstrap's visually-hidden in case it's overridden */
/* Also covers tiny-slider's tns-visually-hidden class */

.visually-hidden,
.sr-only,
label.visually-hidden,
[class*="visually-hidden"],
.tns-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    /* Extra protection against scroll contribution */
    max-width: 1px !important;
    max-height: 1px !important;
    /* Ensure no scrollWidth contribution */
    contain: strict !important;
}

/* ===== E) Icon Sizing Stability ===== */
/* Prevent phosphor icons from changing layout metrics */

i.ph-duotone,
i[class*="ph-duotone"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
    min-height: 1.25em;
    max-width: 1.25em;
    line-height: 1.25em;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}

/* Smaller icons in specific contexts - like badges and category scroll */
.category-scroll-icon i.ph-duotone,
.badge i.ph-duotone,
i.ph-duotone.me-1,
i.ph-duotone.me-2 {
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    max-width: 1em;
    line-height: 1em;
}

/* ===== F) Content Area Overflow Prevention ===== */
/* Fix .ecom-content and .pc-content overflow */
/* IMPORTANT: Use overflow-x: clip instead of hidden for main containers */
/* hidden can clip internal scrollable content, clip only clips visual overflow */

.pc-content {
    max-width: 100%;
    /* Use clip, not hidden - hidden prevents internal scroll containers from working */
    overflow-x: clip;
    box-sizing: border-box;
}

.ecom-content {
    max-width: 100%;
    overflow-x: clip;
}

.ecom-wrapper {
    max-width: 100%;
    overflow-x: clip;
}

/* Product grid must not overflow */
.ecom-content .row {
    max-width: 100%;
}

/* ===== G) Hero Card Mobile Full-Width Fix ===== */
/* Replace 100vw technique with safer alternative */

@media (max-width: 767.98px) {
    /* Use negative margins on the container instead of 100vw */
    .hero-card {
        width: calc(100% + 30px) !important; /* Account for padding: 15px each side */
        margin-left: -15px !important;
        margin-right: -15px !important;
        max-width: none;
    }
    
    /* If inside .pc-content with 15px padding */
    .pc-content > .hero-card:first-child,
    .pc-content > .card.hero-card {
        width: calc(100% + 30px) !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
}

/* ===== H) General Overflow Containment ===== */

/* Main content wrapper - use clip not hidden */
.pc-container {
    max-width: 100%;
    overflow-x: clip;
}

/* Prevent nested elements from causing overflow - but don't restrict scroll containers */
main {
    max-width: 100%;
}

/* Horizontal scroll containers - internal overflow is OK */
.horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Prevent the scroll container from expanding the page */
    max-width: 100%;
}

/* FIX: Override justify-content: center on scroll containers
   When flex content is wider than container, justify-content: center 
   pushes first items to negative positions (inaccessible via scroll).
   Use flex-start so scrolling works correctly from the beginning. */
.horizontal-scroll.drag-scroll,
.user-story-block .horizontal-scroll,
.d-flex.justify-content-center > .horizontal-scroll {
    justify-content: flex-start !important;
}

/* Category scroll cards container */
.drag-scroll {
    max-width: 100%;
}

/* ===== I) Form Elements Overflow Fix ===== */
/* Prevent input/form elements from causing overflow */

input,
select,
textarea,
button {
    max-width: 100%;
}

/* ===== J) Table Overflow Containment ===== */

.table-responsive {
    overflow-x: auto;
    max-width: 100%;
}

table {
    max-width: 100%;
}

/* ==========================================
   PREMIUM ADD TO CART BUTTON
   ========================================== */
.btn-atc-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #06b6d4 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: atc-gradient 3s ease infinite;
    box-shadow: 
        0 0 15px rgba(6, 182, 212, 0.3),
        0 0 30px rgba(6, 182, 212, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

.btn-atc-premium:hover {
    transform: translateY(-2px) scale(1.03);
    color: #000;
    box-shadow: 
        0 0 25px rgba(6, 182, 212, 0.5),
        0 0 50px rgba(6, 182, 212, 0.25),
        0 8px 30px rgba(6, 182, 212, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-atc-premium:active {
    transform: translateY(0) scale(0.98);
}

.btn-atc-premium i {
    font-size: 1.1rem;
}

.btn-atc-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: atc-shine 2.5s infinite;
}

@keyframes atc-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes atc-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Small variant */
.btn-atc-premium.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-radius: 8px;
}

.btn-atc-premium.btn-sm i {
    font-size: 0.9rem;
}

/* Full width variant */
.btn-atc-premium.w-100 {
    width: 100%;
}

/* ===== Spinner Animation for ATC Button ===== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Toast notification styles (fallback) */
.pcz-toast {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}