/* assets/frontend.css */

.wcpa-modal-enabled .wcpa_has_options,
.wcpa-modal-enabled .wcpa_radio,
.wcpa-modal-enabled .wcpa_checkbox,
.wcpa-modal-enabled .wcpa_image,
.wcpa-modal-enabled .wcpa_clear,
.wcpa-modal-enabled .wcpa_quantity_wrap,
.wcpa-modal-enabled fieldset > div.wcpa_field > div:not(.wcpa_field_bottom) {
    display: none !important;
}

.wcpa-cm-slots-container { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; 
    gap: 15px !important; 
    margin: 15px 0 !important; 
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.wcpa-cm-slot { 
    border: 2px dashed #ff4c85 !important; padding: 30px 15px !important; min-height: 140px !important; 
    text-align: center !important; cursor: pointer !important; border-radius: 12px !important; 
    background: #fffafb !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.wcpa-cm-slot:hover { border-color: #d82b6b !important; background: #ffe6ee !important; transform: translateY(-3px) !important; }
.wcpa-cm-slot-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}
.wcpa-cm-slot-icon { font-size: 32px !important; color: #ff4c85 !important; margin-bottom: 8px !important; line-height: 1 !important; }
.wcpa-cm-slot-text { font-weight: 600 !important; color: #111 !important; font-size: 15px !important; line-height: 1 !important; }

.wcpa-cm-slot.is-selected {
    position: relative !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    padding: 15px !important;
    min-height: 140px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.wcpa-cm-slot-selected {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
}
.wcpa-cm-selected-thumb {
    height: 60px !important;
    width: 60px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.wcpa-cm-slot-info {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}
.wcpa-cm-slot-remove {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    width: 22px !important;
    height: 22px !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
.wcpa-cm-slot-info small {
    color: #ff4c85 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}
.wcpa-cm-slot-info strong {
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    word-break: break-word !important;
}
.wcpa-cm-slot-remove:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: scale(1.1);
}
.wcpa-cm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px);}
.wcpa-cm-modal-overlay.wcpa-cm-show { display: flex; }
.wcpa-cm-modal-box { 
    background: #fff; width: 90%; max-width: 850px; border-radius: 15px; 
    height: 85vh; display: flex; flex-direction: column; overflow: hidden; position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.wcpa-cm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; border-bottom: 1px solid #f0f0f0; background: #fff;}
.wcpa-cm-modal-title { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; color: #1e293b; letter-spacing: 1px; flex: 1; text-align: center;}

.wcpa-cm-modal-close, .wcpa-cm-qv-close { 
    background: #f1f5f9;
    border: none;
    font-size: 22px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.wcpa-cm-modal-close:hover, .wcpa-cm-qv-close:hover { background: #ff4c85 !important; color: #fff !important; transform: rotate(90deg); }

.wcpa-cm-modal-search { padding: 12px 25px; border-bottom: 1px solid #efefef; background: #fcfcfc; }
.wcpa-cm-search-input { width: 100%; padding: 10px 20px; border: 1px solid #e2e8f0; border-radius: 100px; font-size: 13px; outline: none; box-sizing: border-box; }

.wcpa-cm-modal-body { padding: 10px; overflow-y: auto; flex: 1; }
.wcpa-cm-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; padding: 15px;}
.wcpa-cm-product-card { border: 1px solid #f3f3f3; border-radius: 12px; padding: 15px; text-align: center; cursor: pointer; position: relative; transition: 0.3s; background: #fff;}
.wcpa-cm-product-card:hover { box-shadow: 0 8px 18px rgba(0,0,0,0.06); transform: translateY(-3px); border-color: #ff4c85;}
.wcpa-cm-quick-info { position: absolute; top: 12px; left: 12px; background: #222; color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; line-height: 22px; font-weight: bold;}

.wcpa-cm-quickview-box { position: absolute; inset: 0; background: #fff; z-index: 100; display: none; flex-direction: column; height: 100%; overflow: hidden; }
.wcpa-cm-qv-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }
.wcpa-cm-qv-header h4 { margin: 0; font-size: 12px; font-weight: 800; color: #475569; letter-spacing: 1px; flex: 1; text-align: center; }
.wcpa-cm-qv-back { 
    background: #e5e7eb !important;
    border: none !important; 
    font-size: 20px !important; 
    width: 44px !important; 
    height: 44px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    cursor: pointer !important; 
    color: #334155 !important;
    padding: 0 !important;
    transition: background 0.2s ease !important;
    border-radius: 0 !important;
}
.wcpa-cm-qv-back:hover { 
    background: #d1d5db !important; 
}

.wcpa-cm-qv-inner {
    display: flex;
    gap: 30px;
    padding: 30px;
    overflow-y: auto !important;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
}
.wcpa-cm-qv-left {
    flex: 0 0 45%;
}
.wcpa-cm-qv-left img { width: 100%; border-radius: 12px; border: 1px solid #f0f0f0; }
.wcpa-cm-qv-right { text-align: left; max-width: 380px; }
.wcpa-cm-qv-right h2 { font-size: 24px; margin: 0 0 8px; font-weight: 700; color: #111; }
.wcpa-cm-qv-price { font-size: 18px; color: #64748b; margin-bottom: 25px; }
.wcpa-cm-qv-select-btn { 
    background: #ff79c1; color: #fff; border: none; padding: 14px 35px; border-radius: 50px; 
    font-weight: 700; cursor: pointer; text-transform: uppercase; font-size: 12px;
    box-shadow: 0 8px 15px rgba(255, 121, 193, 0.4); transition: 0.2s;
}
.wcpa-cm-qv-select-btn:hover { background: #ff4c85; transform: translateY(-2px); }

body.wcpa-cm-body-lock {
    overflow: hidden !important;
    touch-action: none !important;
}

.wcpa-cm-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 15px 20px; border-top: 1px solid #f1f5f9; flex-wrap: wrap; box-sizing: border-box; }
.wcpa-cm-page-btn { 
    padding: 8px 14px !important; 
    border: 1px solid #e2e8f0 !important; 
    background: #fff !important; 
    color: #1e293b !important; 
    border-radius: 8px !important; 
    font-weight: 600 !important; 
    cursor: pointer !important; 
    transition: 0.2s !important;
    font-size: 13px !important;
    line-height: 1 !important;
}
.wcpa-cm-page-btn:hover:not(.active) {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
.wcpa-cm-page-btn.active { 
    background: #1e293b !important; 
    color: #fff !important; 
    border-color: #1e293b !important; 
}
.wcpa-cm-page-dots {
    color: #64748b !important;
    font-weight: 700 !important;
    padding: 0 4px !important;
    user-select: none !important;
    font-size: 14px !important;
}

.wcpa-cm-selected-list {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
}
.wcpa-cm-selected-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    padding: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
    min-height: 130px !important;
}
.wcpa-cm-selected-item .wcpa-cm-selected-thumb {
    height: 50px !important;
    width: 50px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
    margin-right: 0 !important;
    border: 1px solid #f0f0f0;
}
.wcpa-cm-selected-item .wcpa-cm-slot-info {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}
.wcpa-cm-selected-item .wcpa-cm-slot-info strong {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    word-break: break-word !important;
}
.wcpa-cm-item-remove {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    width: 20px !important;
    height: 20px !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
.wcpa-cm-item-remove:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: scale(1.1);
}

.wcpa-cm-slot-price {
    display: block !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
}

.wcpa-cm-qv-desc {
    margin-top: 20px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    font-weight: 400 !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
    text-align: left !important;
}

.wcpa-cm-qv-desc::-webkit-scrollbar {
    width: 4px;
}
.wcpa-cm-qv-desc::-webkit-scrollbar-track {
    background: transparent;
}
.wcpa-cm-qv-desc::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .wcpa-cm-modal-box {
        width: 95% !important;
        height: 88vh !important;
        max-height: 88vh !important;
        border-radius: 12px !important;
    }
    .wcpa-cm-modal-header,
    .wcpa-cm-qv-header {
        padding: 10px 15px !important;
    }
    .wcpa-cm-qv-inner {
        flex-direction: column !important;
        align-items: center !important;
        padding: 15px !important;
        gap: 12px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .wcpa-cm-qv-left {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 160px !important;
        margin: 0 auto !important;
    }
    .wcpa-cm-qv-left img {
        width: 100% !important;
        max-height: 160px !important;
        object-fit: cover !important;
        margin: 0 auto !important;
        display: block !important;
    }
    .wcpa-cm-qv-right {
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .wcpa-cm-qv-right h2 {
        font-size: 16px !important;
        text-align: center !important;
        margin: 0 0 4px 0 !important;
    }
    .wcpa-cm-qv-price {
        text-align: center !important;
        margin-bottom: 10px !important;
        font-size: 15px !important;
    }
    .wcpa-cm-qv-actions {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }
    .wcpa-cm-qv-desc {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
        width: 100% !important;
        text-align: left !important;
        margin-top: 5px !important;
    }
    .wcpa-cm-pagination {
        padding: 10px 8px !important;
        gap: 4px !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .wcpa-cm-page-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
}