/* 
 * Εισάγουμε τη γραμματοσειρά Cera Pro Modern από το αρχείο σου (CeraPROModern-Medium.ttf).
 * Πρόσεξε να την τοποθετήσεις στο ίδιο φάκελο ή να προσαρμόσεις το μονοπάτι (url).
 */
@font-face {
    font-family: 'Cera Pro Modern';
    src: url('fonts/CeraPROModern-Medium.woff2') format('woff2'),
         url('fonts/CeraPROModern-Medium.woff') format('woff'),
         url('fonts/CeraPROModern-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Γενικές ρυθμίσεις test*/
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Cera Pro Modern', sans-serif;
  background-color: #F2F2F2;
  color: #222;
}

/* Ενιαίο κουτί που αγκαλιάζει header + πίνακα */
.container {
  width: 80%;
  max-width: 900px;
  margin: 30px auto;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 20px;
  border-radius: 10px; /* Ελαφρώς κυκλικές γωνίες */
}

/* Επίσης στρογγυλεμένες γωνίες στον πίνακα */


/* Header μέσα στο λευκό πλαίσιο */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; /* λίγο κενό κάτω από το header πριν τον πίνακα */
}

/* Λογότυπο/Κείμενα */
.logo-area {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 60px;
  margin-right: 10px;
}

.logo-text .title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.logo-text .year {
  font-size: 18px;
  line-height: 1;
}

.header-actions {
  display: flex;
  align-items: center;
}

.info-button {
  font-family: inherit;
  background-color: transparent;
  border: none;
  color: #333;
  font-size: 14px;
  margin-right: 20px;
  cursor: pointer;
}

.info-button:hover {
  text-decoration: underline;
}

.login-button {
  width: 32px;
  height: 32px;
  cursor: pointer;
}

/* Εσωτερικό περιτύλιγμα μόνο για τυχόν styling του table */
.table-wrapper {
  /* Δεν βάζουμε άλλο background εδώ, 
     το έχει ήδη η .container */
}

/* Βασικό στυλ πίνακα */
.score-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  border-radius: 10px; /* Στρογγυλεμένες γωνίες και στον πίνακα */
  overflow: hidden; /* Διατηρεί τις γωνίες στο border-collapse */
}

.score-table thead {
  border-bottom: 2px solid #E0E0E0;
}

.score-table th, 
.score-table td {
  padding: 12px;
  vertical-align: middle;
  font-size: 14px;
}

.score-table th {
  font-weight: normal;
  color: #555;
}

.score-table tbody tr {
  border-bottom: 1px solid #E0E0E0;
}
.score-table tbody tr:last-child {
  border-bottom: none;
}

/* Εικονίδιο ομάδας */
.team-logo {
  height: 24px;
  width: 24px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
}

/* Βασικό στυλ για τις γραμμές */
.score-table tbody tr {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Όταν περνάει το ποντίκι από πάνω */
.score-table tbody tr:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    position: relative;
    background-color: #FFF;
    z-index: 1;
}

/* Γενικό container για τους αγώνες */
.games-container {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    background: #FFFFFF; /* Ίδιο φόντο με το ranking */
    padding: 10px;
}

/* Περιοχή που περιέχει τα παιχνίδια */
.games-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    width: 90%;
    scrollbar-width: none; /* Απόκρυψη scrollbar (Firefox) */
    -ms-overflow-style: none; /* Απόκρυψη scrollbar (IE/Edge) */
}

/* Απόκρυψη scrollbar για Chrome/Safari */
.games-wrapper::-webkit-scrollbar {
    display: none;
}

/* Κάθε αγώνας (box) */
.game-box {
    background: #EAEAEA; /* Απαλό γκρι */
    border-radius: 10px;
    padding: 12px;
    margin: 0 8px;
    min-width: 180px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Αφαιρούμε το hover effect */
.game-box:hover {
    transform: none;
    box-shadow: none;
}

/* Κείμενο με τον αριθμό του αγώνα */
.match-number {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

/* Πληροφορίες παιχνιδιού */
.game-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Λογότυπα ομάδων */
.team-logo {
    height: 24px;
    width: 24px;
    object-fit: contain;
}

/* Όνομα ομάδας */
.team-name {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase; /* Όλα κεφαλαία */
}


/* Αν δεν έχει παιχτεί, εμφανίζει 'VS' */
.vs {
    font-size: 14px;
    font-weight: bold;
    color: black;
}

/* Σκορ όταν έχει παιχτεί */
.score {
    font-size: 16px;
    font-weight: bold;
    color: #009900;
}

/* Κουμπιά αριστερά/δεξιά */
.scroll-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: black;
}

.login-container {
    position: absolute;
    top: 20px;
    right: 20px;
}

.login-button {
    background-color: #007BFF;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-button img {
    width: 32px;
    height: 32px;
}

.containerl {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    text-align: center;
    font-family: 'Cera Pro Modern', sans-serif;
}

input {
    width: 97.5%;
    padding: 10px;
    margin: 10px 0px;
    border-radius: 8px;  /* Όχι τελείως τετράγωνα, αλλά και όχι πολύ στρογγυλά */
    border: 1px solid #ddd;
    font-family: 'Cera Pro Modern', sans-serif;
    font-size: 14px;
}

button {
    width: 100%;
    padding: 10px;
    border-radius: 8px; /* Ίδια λογική με τα inputs */
    background-color: #1a3d6a; /* Χρώμα κουμπιού */
    color: white;
    border: none;
    cursor: pointer;
    font-family: 'Cera Pro Modern', sans-serif;
    font-size: 14px;
}

button:hover {
    background-color: #163157; /* Ελαφρώς πιο σκούρο στο hover */
}

.error {
    color: red;
    font-size: 14px;
}