:root {
    --law-blue: #2c3e50;
    --law-red: #e74c3c;
    --law-gold: #f1c40f;
    --law-purple: #8e44ad;
    --law-green: #27ae60;
    --law-deep-orange: #d35400; /* Σκούρο πορτοκαλί */
    --law-petrol: #16a085;      /* Πετρόλ */
    --law-dark-blue: #2980b9;   /* Σκούρο μπλε */
    --law-grape: #9b59b6;       /* Σταφυλί */
    --law-lime: #a2d98c;        /* Λαχανί */
    --law-brown: #7f8c8d;       /* Καφέ/Γκρι */
    --law-pink: #e84393;        /* Ροζ */
    --law-teal-dark: #008b8b;   /* Σκούρο πετρόλ */
    --law-indigo: #4b0082;      /* Λουλακί */
    --law-olive: #6b8e23;       /* Λαδί */
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
    color: #333;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    background-color: #F8F8F8;
    border-bottom-left-radius: 10px; /* Για την κάτω αριστερή γωνία */
    border-bottom-right-radius: 10px; /* Για την κάτω δεξιά γωνία */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.titlos {
    color: var(--law-blue);
    font-size: 36px;
    margin: 0;
    padding-left: 1rem;
    font-weight: 700;
    text-align: center;
}

.menu-link-container {
    position: relative;
}

a.menu-link {
    text-decoration: none;
    color: var(--law-blue);
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s;
    cursor: pointer;
}

a.menu-link:hover {
    color: maroon;
    background-color: #f5f5f5;
}

.form-section {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    width: 280px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    z-index: 100;
    margin-top: 5px;
}

.menu-link-container:hover .form-section {
    display: block;
}

.form-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

        .form-content h3 {
            color: var(--law-blue);
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 18px;
            width: 100%;
        }

        .form-content input,
        .form-content button {
            width: 100%;
            max-width: 240px;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-content input {
            border: 1px solid #ddd;
            box-sizing: border-box;
        }

        .form-content button {
            background-color: var(--law-blue);
            color: white;
            border: none;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .form-content button:hover {
            background-color: #0056b3;            
            background-color: #1a2a3a;
        }

.kodikes {
    border-left: 5px solid;
    border-radius: 8px;
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
    width: 85%;
    transition: all 0.3s;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
    color: var(--law-blue);
    text-align: center;
    padding: 10px;
    position: relative;
}

.book-title {
    font-size: 20px;
    margin-top: 70px;
    font-weight: 600;
    position: absolute;
    bottom: 200px;
}

.law {
	bottom: 175px;
}

.trop {
	bottom: 120px;
}

.one {
	bottom: 145px;
}

.book-icon {
    font-size: 35px;
    margin-top: 50px;
    color: var(--law-blue);
    transition: all 0.3s;
    position: absolute;
    bottom:50px;
}

.law-public {
    border-left-color: var(--law-blue);
    background: linear-gradient(90deg, #fff 0%, rgba(44,62,80,0.05) 100%);
}

.law-criminal {
    border-left-color: var(--law-red);
    background: linear-gradient(90deg, #fff 0%, rgba(231,76,60,0.05) 100%);
}
.law-civil {
    border-left-color: var(--law-purple);
    background: linear-gradient(90deg, #fff 0%, rgba(142,68,173,0.05) 100%);
}
.law-constitutional {
    border-left-color: var(--law-gold);
    background: linear-gradient(90deg, #fff 0%, rgba(241,196,15,0.05) 100%);
}
.law-international {
    border-left-color: var(--law-green);
    background: linear-gradient(90deg, #fff 0%, rgba(39,174,96,0.05) 100%);
}
.law-commercial {
    border-left-color: var(--law-deep-orange);
    background: linear-gradient(90deg, #fff 0%, rgba(211,84,0,0.05) 100%);
}

.law-patent {
    border-left-color: var(--law-petrol);
    background: linear-gradient(90deg, #fff 0%, rgba(22,160,133,0.05) 100%);
}

.law-immigation {
    border-left-color: var(--law-dark-blue);
    background: linear-gradient(90deg, #fff 0%, rgba(41,128,185,0.05) 100%);
}

.law-healthcare {
    border-left-color: var(--law-grape);
    background: linear-gradient(90deg, #fff 0%, rgba(155,89,182,0.05) 100%);
}

.law-sport {
    border-left-color: var(--law-lime);
    background: linear-gradient(90deg, #fff 0%, rgba(162,217,140,0.05) 100%);
}

.law-data-protection {
    border-left-color: var(--law-brown);
    background: linear-gradient(90deg, #fff 0%, rgba(127,140,141,0.05) 100%);
}

.law-media {
    border-left-color: var(--law-pink);
    background: linear-gradient(90deg, #fff 0%, rgba(232,67,147,0.05) 100%);
}

.law-cyber {
    border-left-color: var(--law-teal-dark);
    background: linear-gradient(90deg, #fff 0%, rgba(0,139,139,0.05) 100%);
}

.law-space {
    border-left-color: var(--law-indigo);
    background: linear-gradient(90deg, #fff 0%, rgba(75,0,130,0.05) 100%);
}

.law-energy {
    border-left-color: var(--law-olive);
    background: linear-gradient(90deg, #fff 0%, rgba(107,142,35,0.05) 100%);
}

.kodikes:hover {
    transform: translateY(-3px);
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15);
}

.kodikes:hover .book-icon {
    transform: scale(1.1);
}

.kodikes::after {
    content: "Κάντε κλικ για λεπτομέρειες";
    position: absolute;
    bottom: 15px;
    background: var(--law-blue);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    opacity: 0;
    transition: all 0.3s;
    width: max-content;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

.kodikes:hover::after {
    opacity: 1;
}

#booksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.last_mode {
	font-size:12px;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

        @media (max-width: 1000px) {
            .header-container {
                width: 95%;
                flex-direction: column;
            }

            #booksGrid {
                grid-template-columns: 1fr;
                padding: 15px;
                gap: 15px;
            }

            .titlos {
            padding-left: 0rem;
            }

            .kodikes {
                height: 280px;
                width: 90%;
            }

            .book-title {
                font-size: 20px;       
            }           

            .book-icon {
                font-size: 36px;             
            }

            .sundesieggrafi {
                margin-top: 15px;
            }

            .form-section {
                right: auto;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        /* ΠΟΛΥ ΜΙΚΡΕΣ ΟΘΟΝΕΣ */

        @media (max-width: 400px) {
            .form-section {
                width: 90vw;
                padding: 15px;
            }
			
			.book-title {
				width: 80%;
			}
        }