/* 
==========================================
فایل: /modules/contactpopup/views/css/contactpopup.css
==========================================
*/

.contact-popup-wrapper {
    font-family: inherit !important;
}

.contact-btn-popup {
    position: fixed !important;
    bottom: 20px !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 999999 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.contact-popup-wrapper[data-position="left"] .contact-btn-popup {
    left: 20px !important;
    right: auto !important;
}

.contact-popup-wrapper[data-position="right"] .contact-btn-popup {
    right: 20px !important;
    left: auto !important;
}

.contact-btn-popup:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

.contact-btn-popup svg {
    width: 28px !important;
    height: 28px !important;
    fill: white !important;
}

.popup-overlay-contact {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999998 !important;
}

.popup-overlay-contact.active {
    opacity: 1;
    visibility: visible;
}

.popup-container-contact {
    position: fixed !important;
    bottom: 90px !important;
    background: white !important;
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    transform: scale(0.8) translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999999 !important;
    min-width: 280px !important;
    max-width: 320px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

.contact-popup-wrapper[data-position="left"] .popup-container-contact {
    left: 20px !important;
    right: auto !important;
}

.contact-popup-wrapper[data-position="right"] .popup-container-contact {
    right: 20px !important;
    left: auto !important;
}

.popup-container-contact.active {
    transform: scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
}

.popup-header-contact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.popup-title-contact {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.close-btn-contact {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn-contact:hover {
    background: #f0f0f0;
    color: #333;
}

.contact-list-popup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item-popup {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 15px !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
}

.contact-item-popup:hover {
    transform: translateX(-5px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

.contact-item-popup.phone_support { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
    color: white !important; 
}

.contact-item-popup.phone_store { 
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; 
    color: white !important; 
}

.contact-item-popup.sms { 
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important; 
    color: white !important; 
}

.contact-item-popup.instagram { 
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%) !important; 
    color: white !important; 
}

.contact-item-popup.bale { 
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important; 
    color: white !important; 
}

.contact-item-popup.whatsapp { 
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important; 
    color: white !important; 
}

.contact-item-popup.telegram { 
    background: linear-gradient(135deg, #0088cc 0%, #005580 100%) !important; 
    color: white !important; 
}

.contact-item-popup.address { 
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important; 
    color: white !important; 
}

.contact-item-popup.custom { 
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%) !important; 
    color: white !important; 
}

.contact-icon-popup {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon-popup svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.contact-text-popup {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

/* مودال آدرس */
.address-modal {
    display: none;
    position: fixed !important;
    z-index: 9999999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.6) !important;
}

.address-modal-content {
    background-color: #fefefe !important;
    margin: 15% auto !important;
    padding: 30px !important;
    border-radius: 15px !important;
    width: 90% !important;
    max-width: 500px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    position: relative !important;
}

.address-modal-content h3 {
    margin-top: 0;
    color: #333;
    font-size: 20px;
    margin-bottom: 15px;
}

.address-modal-content p {
    color: #666;
    line-height: 1.8;
    font-size: 15px;
}

.address-close {
    color: #aaa;
    position: absolute;
    left: 15px;
    top: 15px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.address-close:hover {
    background: #f0f0f0;
    color: #333;
}

/* برای موبایل */
@media (max-width: 480px) {
    .popup-container-contact {
        left: 10px !important;
        right: 10px !important;
        bottom: 80px !important;
        max-width: none !important;
        min-width: auto !important;
    }

    .contact-btn-popup {
        width: 55px !important;
        height: 55px !important;
        bottom: 15px !important;
    }
    
    .contact-popup-wrapper[data-position="left"] .contact-btn-popup {
        left: 15px !important;
    }
    
    .contact-popup-wrapper[data-position="right"] .contact-btn-popup {
        right: 15px !important;
    }

    .contact-btn-popup svg {
        width: 24px !important;
        height: 24px !important;
    }

    .address-modal-content {
        margin: 50% auto !important;
        width: 85% !important;
        padding: 20px !important;
    }
}

/* اضافه کردن اولویت بالاتر برای نوار سبد خرید پاندا */
#blockcart-modal,
.blockcart,
.cart-preview,
.shopping-cart,
#header .header-nav,
.header-top {
    z-index: 99 !important;
}

/* مطمئن شدن از اینکه دکمه ما بالاتر از همه است */
.contact-popup-wrapper * {
    z-index: inherit;
}

/* اولویت خیلی بالا برای دکمه تماس */
.contact-btn-popup {
    z-index: 2147483647 !important;
}

.popup-overlay-contact {
    z-index: 2147483646 !important;
}

.popup-container-contact {
    z-index: 2147483647 !important;
}

.address-modal {
    z-index: 2147483647 !important;
}