/* WooCommerce Product Coupons Display - Styles */



.wc-product-coupons-wrapper {



    padding: 30px 0px;





}



.wc-coupons-title {

    font-size: 16px;

    font-weight: 600;

    color: #333;

    margin: 0 0 20px 0;

      text-transform: initial;

    letter-spacing: 0.5px;

}



.wc-coupons-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-bottom: 15px;

}



.wc-coupons-grid[data-columns="2"] {

    grid-template-columns: repeat(2, 1fr);

}



.wc-coupons-grid[data-columns="4"] {

    grid-template-columns: repeat(4, 1fr);

}



.wc-coupon-item {

    position: relative;

}



.wc-coupon-code {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #EEEEEE;

    border: unset;

    border-radius: 99px;

    padding: 0px 15px;

    transition: all 0.3s 

ease;

    cursor: pointer;

}



.wc-coupon-code:hover {

    border-color: #666;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.wc-coupon-code .coupon-text {

    font-size: 14px;

    font-weight: 600;

    color: #333;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    flex: 1;

}



.wc-copy-coupon {

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: none;

    padding: 0px;

    cursor: pointer;

    color: #666;

    transition: all 0.3s 

ease;

    border-radius: 4px;

    flex-shrink: 0;

    margin-left: 8px;

    margin-bottom: 0px;

}



.wc-copy-coupon:hover {

    background: #f0f0f0;

    color: #333;

}



.wc-copy-coupon:active {

    transform: scale(0.95);

}



.wc-copy-coupon svg {

    width: 16px;

    height: 16px;

}



.wc-coupon-notification {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: #4CAF50;

    color: white;

    padding: 20px 30px;

    border-radius: 8px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    z-index: 999999 !important;

    animation: popupShow 0.3s ease;

    min-width: 250px;

    text-align: center;

}



.wc-coupon-notification.error {

    background: #f44336;

}



.wc-coupon-notification .notification-text {

    font-size: 15px;

    font-weight: 500;

    line-height: 1.4;

}



/* Animation */

@keyframes popupShow {

    from {

        transform: translate(-50%, -50%) scale(0.7);

        opacity: 0;

    }

    to {

        transform: translate(-50%, -50%) scale(1);

        opacity: 1;

    }

}



@keyframes popupHide {

    from {

        transform: translate(-50%, -50%) scale(1);

        opacity: 1;

    }

    to {

        transform: translate(-50%, -50%) scale(0.7);

        opacity: 0;

    }

}



.wc-coupon-notification.hiding {

    animation: popupHide 0.3s ease;

}



/* Responsive */

@media (max-width: 480px) {

    .wc-coupon-notification {

        min-width: auto;

        max-width: 90%;

        padding: 18px 25px;

    }

    

    .wc-coupon-notification .notification-text {

        font-size: 14px;

    }

}



.wc-coupon-notification.hiding {

    animation: slideOutRight 0.3s ease;

}



/* Responsive */

@media (max-width: 768px) {

    .wc-coupons-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    

    .wc-coupons-grid[data-columns="3"],

    .wc-coupons-grid[data-columns="4"] {

        grid-template-columns: repeat(2, 1fr) !important;

    }

    

    .wc-coupon-code {

        padding: 4px 12px;

    }

    

    .wc-coupon-code .coupon-text {

        font-size: 13px;

    }

}



@media (max-width: 480px) {

    .wc-coupons-grid,

    .wc-coupons-grid[data-columns="2"],

    .wc-coupons-grid[data-columns="3"],

    .wc-coupons-grid[data-columns="4"] {

               grid-template-columns: repeat(3, 1fr)

    }

    

    .wc-coupon-notification {

        left: 10px;

        right: 10px;

        top: 10px;

    }

}