/* =========================
   Overlay & Popup Box
========================= */
#lpp_overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

#lpp_popup_box {
    background: #ffffff;
    color: #000000;
    width: 500px;
    max-width: 95%;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
    transition: all 0.35s ease;
}

/* =========================
   Animations
========================= */
.lpp-fade { 
    opacity: 0; 
    transform: scale(0.98); 
}
.lpp-fade.show { 
    opacity: 1; 
    transform: scale(1); 
    transition: all 0.35s ease; 
}

.lpp-slide-up { 
    opacity: 0; 
    transform: translateY(20px); 
}
.lpp-slide-up.show { 
    opacity: 1; 
    transform: translateY(0); 
    transition: all 0.35s ease; 
}

.lpp-zoom { 
    opacity: 0; 
    transform: scale(0.7); 
}
.lpp-zoom.show { 
    opacity: 1; 
    transform: scale(1); 
    transition: all 0.35s ease; 
}

/* =========================
   Header
========================= */
#lpp_popup_header {
    padding: 15px 22px;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
    font-weight: 600;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 10;
}

/* =========================
   Content
========================= */
#lpp_popup_content {
    padding: 15px 22px;
    overflow: auto;
    flex: 1;
}

#lpp_popup_content img.lpp-image {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 6px;
    object-fit: cover;
}

#lpp_popup_content p {
    margin-bottom: 12px;
    line-height: 1.45;
}

/* =========================
   Footer
========================= */
#lpp_popup_footer {
    padding: 12px 22px;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

/* Checkbox row */
#lpp_popup_footer .lpp-footer-checkbox {
    margin-bottom: 10px;
    font-size: 14px;
}
#lpp_popup_footer .lpp-footer-checkbox input {
    margin-right: 6px;
}

/* Buttons row */
#lpp_popup_footer .lpp-footer-right {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center; /* ensures vertical alignment */
}

/* Buttons styling (fixed height & same size) */
#lpp_popup_footer button,
#lpp_popup_footer a.lpp-readmore {
    cursor: pointer;
    border: none;
    padding: 10px 16px;
    height: 42px; /* fixed height for all buttons */
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex; /* ensures proper vertical centering */
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* include padding in height */
}

/* Close button */
#lpp_popup_footer button { 
    background: #ee1f27; 
}

/* Read More button */
#lpp_popup_footer a.lpp-readmore { 
    background: #1d62a7; 
}

/* Hover effect */
#lpp_popup_footer button:hover,
#lpp_popup_footer a.lpp-readmore:hover {
    background: #2e2e2e;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}


/* =========================
   Responsive
========================= */
@media (max-width: 500px) {
    #lpp_popup_footer .lpp-footer-right {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}