/* ==========================================================================
   PIERIA KLIK - FRONTEND PRESENTATION STYLES (pieria-styles.css - Cleaned)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SINGLE PAGE STYLES & LIGHTBOX GALLERY & SIDEBAR LINKS
   -------------------------------------------------------------------------- */
.site.grid-container { max-width: 100% !important; }
.site-content { padding: 0 !important; display: block !important; width: 100% !important; max-width: 100% !important; min-height: 700px !important; position: relative !important; }
.pk-single-wrap { width: 100% !important; max-width: 1200px !important; margin: 40px auto !important; padding: 0 20px !important; box-sizing: border-box !important; font-family: sans-serif; }
.pk-single-header { text-align: center; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #eee; }

.pk-single-title { font-size: 2.2rem; font-weight: 900; color: #222; margin: 0 0 20px 0; line-height: 1.2; }
.pk-single-body { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 20px; align-items: flex-start; }
.pk-single-content { flex: 1 1 0; min-width: 300px; font-size: 16px; line-height: 1.8; color: #444; box-sizing: border-box; }
.pk-single-sidebar { flex: 0 0 320px; box-sizing: border-box; }

.pk-info-card { background: #fff; border: 1px solid #eee; padding: 25px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: sticky; top: 100px; }
.pk-info-row { display: flex; gap: 15px; margin-bottom: 20px; align-items: flex-start; }
.pk-info-icon { font-size: 1.5rem; line-height:1; }
.pk-info-text { width: 100%; }
.pk-info-text strong { display: block; color: #222; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.pk-info-text span, .pk-info-text a { color: #555; font-size: 15px; text-decoration:none; display:inline-block; }
.pk-info-text a:hover { color: #0055cc; text-decoration:underline; }

/* Sidebar Links & Tickets */
.pk-single-sidebar .pk-btn-ticket,
.pk-single-sidebar .pk-btn-outline,
.pk-single-sidebar .pk-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    color: #0055cc !important;
    font-weight: bold !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}
.pk-single-sidebar .pk-btn-ticket:hover,
.pk-single-sidebar .pk-btn-outline:hover,
.pk-single-sidebar .pk-sidebar-link:hover {
    background: #eef2f7 !important;
    border-color: #b0c4de !important;
    color: #003399 !important;
}

.pk-promo-img-wrap img.pk-lightbox-trigger,
.pk-single-img-wrap img.pk-lightbox-trigger {
    max-width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
}

.pk-gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; margin-bottom: 40px; justify-content: flex-start; }
.pk-gallery-grid img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; cursor: zoom-in; box-shadow: 0 3px 10px rgba(0,0,0,0.1); transition: transform 0.2s; border:1px solid #eee;}
.pk-gallery-grid img:hover { transform: scale(1.05); z-index:2; }

/* Lightbox Modal */
#pk-image-modal { display:none; position:fixed !important; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:999999; overflow:hidden; align-items:center; justify-content:center; cursor:grab; }
#pk-image-modal:active { cursor:grabbing; }
#pk-modal-close { position:absolute; top:20px; right:30px; color:#fff; font-size:45px; font-weight:bold; cursor:pointer; z-index:1000000; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
#pk-modal-img { position:absolute; transition: transform 0.1s ease-out; transform-origin: center center; max-width:90vw; max-height:90vh; user-select:none; -webkit-user-drag:none; }
.pk-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); color: #fff; border: 2px solid rgba(255, 255, 255, 0.8); font-size: 30px; font-weight: bold; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; z-index: 1000001; display: flex; align-items: center; justify-content: center; outline: none; }
.pk-modal-nav:hover { background: rgba(211, 47, 47, 0.9); }
#pk-modal-prev { left: 30px; }
#pk-modal-next { right: 30px; }


/* --------------------------------------------------------------------------
   5. ΣΕΛΙΔΟΠΟΙΗΣΗ (PAGINATION) & ΦΙΛΤΡΑ
   -------------------------------------------------------------------------- */
.pk-pagination { margin-top: 40px !important; text-align: center !important; clear: both !important; width: 100% !important; }
.pk-pagination .page-numbers { display: inline-block !important; padding: 8px 16px !important; margin: 0 4px !important; border: 1px solid #ddd !important; text-decoration: none !important; border-radius: 6px !important; color: #333 !important; font-weight: bold !important; font-size: 15px !important; background: #fff !important; transition: all 0.2s ease !important; }
.pk-pagination .page-numbers:hover { background: #f0f0f0 !important; border-color: #bbb !important; }
.pk-pagination .page-numbers.current { background: #d32f2f !important; color: #fff !important; border-color: #d32f2f !important; }

.pk-events-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
}
.pk-filter-btn {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    color: #555 !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}
.pk-filter-btn:hover { background: #e0e0e0 !important; color: #333 !important; }
.pk-filter-btn.active { background: #d32f2f !important; color: #fff !important; border-color: #d32f2f !important; box-shadow: 0 4px 10px rgba(211,47,47,0.3) !important; }

@media (max-width: 768px) {
    .pk-single-wrap, 
    .pk-single-sidebar, 
    .pk-single-content,
    .pk-info-card {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .pk-single-sidebar { 
        flex: 1; 
        min-width: 100%; 
        order: -1; 
        margin: 0 !important;
    } 

    #pk-contact-section {
        padding: 15px 10px !important;
    }

    .pk-single-title { font-size: 1.8rem; }
    .pk-modal-nav { width: 45px; height: 45px; font-size: 22px; }
    #pk-modal-prev { left: 10px; }
    #pk-modal-next { right: 10px; }
    .pk-smart-wrap { flex-direction: column; }
    .pk-mobile-filter-btn { display: block; }
    .pk-smart-sidebar { width: 100%; display: none; margin-bottom: 20px; box-sizing: border-box; }
    .pk-smart-sidebar.active { display: block; }
    .pk-smart-topbar { flex-direction: column; gap: 10px; align-items: flex-start; }
}


/* --------------------------------------------------------------------------
   6. ΣΤΑΘΕΡΟΠΟΙΗΣΗ & ΑΠΟΤΡΟΠΗ ΤΡΕΜΟΠΑΙΓΜΑΤΟΣ (LAYOUT SHIFT)
   -------------------------------------------------------------------------- */
.pk-events-wrapper,
.pk-completed-wrapper,
.pk-smart-wrap,
.pk-horizontal-grid-app,
.pk-ajax-cal-container {
    min-height: 600px !important;
    box-sizing: border-box !important;
}

#pk-cal-grid-results,
#pk-results-selida-protaseis {
    min-height: 550px !important;
    position: relative;
    transition: opacity 0.2s ease-in-out;
}

#pk-selected-date-label {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 0 15px 0 !important;
    text-align: left !important;
}

#pk-cal-grid-results .pk-ajax-loader,
#pk-results-selida-protaseis .pk-ajax-loader {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.pk-grid-container,
.pk-results-grid {
    animation: pkFadeIn 0.2s ease-in-out;
}

@keyframes pkFadeIn {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

.pk-horizontal-grid-app {
    min-height: 650px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

#pk-results-selida-protaseis,
#pk-results-selida-estiasi-agora,
#pk-results-selida-syllogoi-ekpaidefsi,
#pk-results-selida-topthesies,
.pk-results-grid {
    min-height: 550px !important;
    position: relative !important;
    display: grid !important;
    box-sizing: border-box !important;
    transition: opacity 0.2s ease-in-out !important;
}

.pk-horizontal-grid-app > div:first-of-type {
    contain: layout style;
}

.pk-ajax-cal-container {
    min-height: 700px !important;
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
}

.pk-cal-slider-wrap {
    min-height: 75px !important;
    align-items: center !important;
    display: flex !important;
    box-sizing: border-box !important;
}

#pk-cal-grid-results {
    min-height: 550px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    content-visibility: auto;
}

@media (max-width: 992px) {
    #pk-cal-grid-results { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    #pk-cal-grid-results { grid-template-columns: 1fr !important; }
}

#pk-cal-grid-results:empty::before {
    content: "";
    display: block;
    min-height: 550px;
}