/**
 * Flyout Cart Arrow/Pointer Positioning
 * Creates a triangle pointer that points to the cart icon
 * Arrow position adjusts based on device size
 */

/* ====================================================================
   ARROW/POINTER BASE STYLES
   ==================================================================== */

.flyout-cart-grouped::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #dee2e6;
    z-index: 1;
}

.flyout-cart-grouped::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ffffff;
    z-index: 2;
}

/* ====================================================================
   DESKTOP (992px+): Arrow Far Right
   ==================================================================== */
@media (min-width: 992px) {
    .flyout-cart-grouped::before {
        right: 20px; /* Position near right edge */
    }
    
    .flyout-cart-grouped::after {
        right: 21px; /* Slightly offset for inner triangle */
    }
}

/* ====================================================================
   TABLET LANDSCAPE (768px-991px): Arrow Centered-Right
   ==================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .flyout-cart-grouped::before {
        right: 30px; /* More centered due to smaller cart width */
    }
    
    .flyout-cart-grouped::after {
        right: 31px;
    }
}

/* ====================================================================
   TABLET PORTRAIT (577px-767px): Arrow Center
   ==================================================================== */
@media (min-width: 577px) and (max-width: 767px) {
    .flyout-cart-grouped::before {
        right: 40px; /* More centered */
    }
    
    .flyout-cart-grouped::after {
        right: 41px;
    }
}

/* ====================================================================
   MOBILE (320px-576px): Arrow Left Side
   ==================================================================== */
@media (max-width: 576px) {
    .flyout-cart-grouped::before {
        right: auto;
        left: 20px; /* Move to left side for mobile */
    }
    
    .flyout-cart-grouped::after {
        right: auto;
        left: 21px;
    }
}

/* ====================================================================
   EXTRA SMALL MOBILE (320px-374px): Arrow Far Left
   ==================================================================== */
@media (max-width: 374px) {
    .flyout-cart-grouped::before {
        left: 15px; /* Closer to left edge */
    }
    
    .flyout-cart-grouped::after {
        left: 16px;
    }
}

/* ====================================================================
   DEFAULT (NON-GROUPED) FLYOUT CART ARROW
   ==================================================================== */

.flyout-cart:not(.flyout-cart-grouped)::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ddd;
    z-index: 1;
}

.flyout-cart:not(.flyout-cart-grouped)::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    z-index: 2;
}

/* Desktop - Far right */
@media (min-width: 992px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        right: 20px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        right: 21px;
    }
}

/* Tablet - Centered-right */
@media (min-width: 768px) and (max-width: 991px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        right: 30px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        right: 31px;
    }
}

/* Tablet portrait - Center */
@media (min-width: 577px) and (max-width: 767px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        right: 40px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        right: 41px;
    }
}

/* Mobile - Left side */
@media (max-width: 576px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        right: auto;
        left: 20px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        right: auto;
        left: 21px;
    }
}

/* Mobile small - Far left */
@media (max-width: 374px) {
    .flyout-cart:not(.flyout-cart-grouped)::before {
        left: 15px;
    }
    
    .flyout-cart:not(.flyout-cart-grouped)::after {
        left: 16px;
    }
}