mark {                       /*Αυτά που μαρκάρονται από το ψαχτήρι με κίτρινο χρώμα */
  background: yellow;
}

mark.current-mark {          /*Το πρώτο που μαρκάρεται από το ψαχτήρι με πορτοκαλί χρώμα*/
  background: orange;
}

* {
    box-sizing: border-box;
}

html {                     /*Στυλάρισμα μεσα-εξω κουμπιού "πάνω"*/
  scroll-behavior: smooth;
}                                         
     
#myBtn {         /* Στυλάρισμα κουμπιού που πάει την σελίδα πάνω */
  display: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 99;
  font-size: 16px;
  border:2px solid #2c3e50;                                              
  outline: none;
  background-color: white; 
  color: black;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:active {      /*Στυλάρισμα μεσα-εξω κουμπιού "πάνω"*/
  transform: translateY(2px);
}    

#myBtn:hover {     /* Χοβεράρισμα κουμπιού που πάει την σελίδα πάνω */
  background-color: #F0F0F0; 
  color: black;
}                

#periexomena a:hover {    /* Μπλέδιασμα στο χοβερ των άρθρων */
  background-color: #F0F0F0;
}                      
 
#arxikh {
  border:2px solid #2c3e50; 
  border-radius:10px; 
  width:auto; 
  text-align:center; 
  cursor: pointer;
}
 
#arxikh:hover {
  background-color: #F0F0F0;
}

#perigramma {   /*Στυλάρισμα του περιγράμματος του κειμένου*/
  border:2px solid #2c3e50; 
  position:static;            
  border-radius: 10px;
  width: 50%; 
  margin-left: 27%;
  font-family: Bookman Old Style; 
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}

h4 {    /* Στυλάρισμα κουμπιού που πάει την σελίδα πάνω */
  text-align:center;
}                                                           

.koumpakia {
  background-color: white;
  border:2px solid #2c3e50;
  border-radius: 4px;
  height: relative;
  width:auto; 
  margin-top: 3%;
}

.koumpakia:hover {
  background-color: #F0F0F0; 
}

.koumpakia:active {     /*Eφέ κουμπιούν ψαχτηριού*/
  transform: translateY(1px);
}                                      

a:hover {
  cursor: pointer;
}

#eggrafi, #sundesi {
  color:grey;
}

#eggrafi:hover, #sundesi:hover{
  color:#2c3e50;  
} 
                                 
#filter-search {                                                                     /*Στυλάρισμα του ψαχτηριού */
  position: fixed;
  font-family: Bookman Old Style; 
  border-radius: 10px;
  width: 24%; 
  height: 70px;
  margin-left: 1%; 
  margin-top: 200px; 
  padding-left: 10px; 
}
                            
#pop {
  border-radius:10px; 
  width: 70%; 
  height: 40px;
  border: 2px solid #2c3e50;
  font-size: 16px; padding-left: 15px;
}

#pop:focus {
  border: 2px solid #2c3e50;
}

li {    /*Στυλάρισμα των li γενικά*/
  list-style-type: none;
}                                                      

a:link {   /*Στυλάρισμα των a γενικά*/
  text-decoration: none; 
  color:black;
}                                     

a:visited {   /*Στυλάρισμα των a που έχουν κλικαριστεί γενικά*/
  color: black;
  background-color: transparent;
  text-decoration: none;
}

#myUL {    /*Στυλάρισμα των πίνακα ul, δηλαδή του πίνακα που περιλαμβάνει τα li */                                                                        
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#titloskodika {
  text-align: center; 
  font-size: 20px;
}

#arthrogenika {
  /*height: relative; */
  scroll-margin-block-start: 5px; 
  scroll-margin-block-end: 5px; 
} 

#search-counter {
  margin-top: 10px; /* Δημιουργεί λίγο χώρο κάτω από το ψαχτήρι */
  font-size: 0.9em; /* Μικρότερο μέγεθος γραμματοσειράς για να μην είναι πολύ έντονο */
  color: #555; /* Διακριτικότερο χρώμα */
}

:target {
    scroll-margin-top: 15px;      /* καθορίζει πόσο κάτω από το ταβάνι θα βγαίνει άρθρο που κλικάρω από περιεχόμενα*/
  }
  
  .notready {
	  color:red;
  }
  
  .new_articles {
	  color:blue;
      font-size: 15px;	  
  }
  
  .modification {
	  color:blue;
  }

 
/* MΙΚΡΕΣ ΟΘΟΝΕΣ */

@media screen and (max-width: 1000px) 
  {
    .header-container {
        position: relative;
        top: auto;
        width: 95%;
        margin: 0 auto;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 20px 0;
        z-index: 1500;
    }

    #sundesieggrafi {
        width:100%;
        position:absolute;
        top:90px;
        margin: auto;
    }

    #filter-search {
        position: relative; /* Αλλάζουμε από fixed σε relative */
        left: auto;
        width: 90%;
        height: auto;
        margin: 20px auto 0; /* 20px πάνω, auto στα πλάγια, 0 κάτω; */
        left: 0;
        right: 0;
        padding: 15px;
        background-color: white;
        border-radius: 10px;
        border: 2px solid #2c3e50;
        top: auto !important; /* Αφαιρούμε οποιαδήποτε top position */
        z-index: 1000;
        transition: all 0.3s ease;
    }

    #filter-search.fixed {
        position: fixed;
        top: 0px !important; /* 10px από την κορυφή */
        width: 95% !important; /* Εξασφαλίζουμε το ίδιο πλάτος */
        max-width: 100vw; /* Προστασία από ξεχείλισμα */
        margin: 0 auto; /* Κεντράρισμα */
        left: 0;
        right: 0;
        transform: none !important; /* Ακύρωση τυχόν transforms */
        box-sizing: border-box; /* Για σωστό υπολογισμό πλάτους */
    }

    body.filter-search-fixed {
        padding-top: 80px; /* Μεγαλύτερο padding για το fixed ψαχτήρι */
    }

    .koumpakia {
        background-color: white;
        color: #2c3e50;
        border: 2px solid #2c3e50;
    }

    .koumpakia.panokato {
        color: #2c3e50;
        border: 2px solid #2c3e50;
        width: 13%;
        height: 35px;
        font-size: 15px;
    }

    .koumpakia.psaxtiri {
      height: 35px;
      width: 30%;
      display: block; 
    margin-left: auto;
    margin-right: auto;
    }

    .koumpakia:hover {
        background-color: #F0F0F0;
        color: #2c3e50;
    }
  

    #perigramma {
        position: relative;
        top: auto;
        width: 95%;
        margin: 20px auto;
        border: 2px solid #2c3e50;
    }

     /* Σταματάμε το global overflow χωρίς να το κάνουμε !important */
    html, body {
        overflow-x: hidden;
    }

    #perigramma table {
        width: 100%;
        table-layout: fixed;    /* Κλειδί: σταθερό layout */
        border-collapse: collapse;
    }

    #perigramma table th,
    #perigramma table td {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;    /* Σπάει γραμμές */
        text-align: left;
    }  
    
    /*:target {
    scroll-margin-top: 400px;      /* καθορίζει πόσο κάτω από το ταβάνι θα βγαίνει άρθρο που κλικάρω από περιεχόμενα*/

  }
  

@media screen and (max-width: 600px)  {
  :target {
        scroll-margin-top: 200px;   /* καθορίζει πόσο κάτω από το ταβάνι θα βγαίνει άρθρο που κλικάρω από περιεχόμενα*/
  }

  #filter-search .psaxtiri {
    /* Επειδή το button είναι inline-block, δίνουμε margin-left/right: auto */
    /* Για να λειτουργήσει το margin, πρέπει να το κάνουμε block: */
    
}
}