/*
Theme Name: ZOOM PHOTOGRAPHY
Theme URI: https://zoomphotography.gr
Author: Your Name
Author URI: https://zoomphotography.gr
Description: Custom theme for ZOOM PHOTOGRAPHY
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zoom-photography
*/

/* ---------- VARIABLES ---------- */
:root {
    --primary-color: #ffff00;
    --dark-gray: #404040;
    --light-gray: #909090;
    --white: #ffffff;
    --off-white: #f9f9f9;
    --services-background: #f8f8f8;
    --link-hover-color: #0066cc; /* Νέο χρώμα για hover στους συνδέσμους */
}

/* ---------- GLOBAL STYLES ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: var(--off-white);
}

.container {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
}

/* Global link styles */
a {
    color: var(--dark-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--link-hover-color);
}

/* ---------- HEADER STYLES ---------- */
.site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: var(--dark-gray);
    padding: 10px 0;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
    height: 100px;
}

.site-header .logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.site-header .custom-logo-link {
    display: block;
    height: 100%;
}

.site-header .custom-logo-link img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* ---------- NAVIGATION STYLES ---------- */
.main-navigation {
    display: flex;
    align-items: center;
}

.main-navigation .menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.main-navigation .menu li {
    margin: 0 15px;
}

.main-navigation .menu a {
    text-decoration: none;
    color: var(--white);
    font-weight: bold;
    transition: color 0.3s ease;
}

.main-navigation .menu a:hover {
    color: var(--primary-color);
}

/* ---------- HAMBURGER MENU STYLES ---------- */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--primary-color);
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.hamburger-icon::before {
    transform: translateY(-8px);
}

.hamburger-icon::after {
    transform: translateY(5px);
}

/* ---------- HERO SECTION STYLES ---------- */
.hero {
    background-color: var(--dark-gray);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 0;
    padding: 0;
    width: 100%;
}

.hero .container {
    max-width: 800px;
    padding: 2rem;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- MAIN CONTENT STYLES ---------- */
main {
    padding-top: 120px;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--dark-gray);
}

/* ---------- UPDATED SERVICES SECTION STYLES ---------- */
.services {
    padding: 4rem 0 2rem 0;
    background-color: var(--white);
}

.services h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-gray);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.service {
    text-align: center;
    padding: 2rem;
    background-color: var(--off-white);
    border-radius: 5px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service:hover {
    transform: translateY(-5px);
}

.service i {
    font-size: 3rem;
    color: var(--dark-gray); /* Αλλάζουμε το χρώμα σε σκούρο γκρι */
    margin-bottom: 1rem;
}

.service h3 {
    margin-bottom: 1rem;
    color: var(--dark-gray);
}

.service p {
    font-size: 0.9rem;
    line-height: 1.6;
}

.service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.service::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

@media screen and (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- UPDATED TEAM SECTION STYLES ---------- */
.team {
    padding: 1.5rem 0;
    background-color: var(--white);
}

.team h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.team-content {
    position: relative;
    background-color: var(--off-white);
    padding: 2rem;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.team-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.team-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.team-photo {
    flex: 0 0 auto;
    max-width: 300px;
}

.team-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
}

.team-description {
    flex: 1;
}

.team-description h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--dark-gray);
}

.team-description p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .team-content {
        flex-direction: column;
    }

    .team-photo {
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

/* ---------- PORTFOLIO GRID STYLES ---------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

@media (min-width: 1200px) {
    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.portfolio-item {
    display: flex;
    flex-direction: column;
}

/* ---------- Κίτρινη μπάρα ως ::before ---------- */
.portfolio-item-inner {
    background-color: var(--off-white);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portfolio-item-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.portfolio-item-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.portfolio-item-inner:hover {
    transform: translateY(-5px);
}

.portfolio-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.portfolio-title {
    padding: 15px;
    margin: 0;
    font-size: 18px;
    color: var(--dark-gray);
    text-decoration: none;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.portfolio-item a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* ---------- PORTFOLIO FILTERS ---------- */
.portfolio-filters {
    margin-bottom: 20px;
    text-align: center;
}

.filter-button {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    color: #333;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filter-button:hover,
.filter-button.active {
    background-color: #333;
    color: #fff;
}

/* ---------- FOOTER STYLES ---------- */
footer {
    background-color: var(--dark-gray);
    color: var(--white);
    padding: 2rem 0;
    text-align: center;
}

.footer-menu {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin: 0.5rem 1rem;
}

.footer-menu a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu a:hover {
    color: var(--primary-color);
}

.social-links {
    margin-top: 20px;
}

.social-links a {
    display: inline-block;
    margin: 0 10px;
    font-size: 24px;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--white);
}

/* ---------- RESPONSIVE STYLES ---------- */
@media screen and (max-width: 1024px) {
    .container {
        width: 95%;
    }
}

@media screen and (max-width: 768px) {
    .site-header .container {
        height: 80px;
    }

    .site-header .logo {
        max-width: 200px;
    }

    main {
        padding-top: 100px;
    }

    .page-title {
        font-size: 2rem;
    }

    .hero {
        height: 50vh;
        min-height: 300px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .team-content {
        flex-direction: column;
        align-items: center;
    }

    .team-photo {
        max-width: 100%;
    }

    .menu-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    .main-navigation .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--dark-gray);
        padding: 20px;
    }

    .main-navigation .menu.active {
        display: block;
    }

    .main-navigation .menu li {
        margin: 10px 0;
    }
}

@media screen and (max-width: 480px) {
    .site-header .container {
        height: 60px;
    }

    .site-header .logo {
        max-width: 150px;
    }

    main {
        padding-top: 80px;
    }

    .page-title {
        font-size: 1.8rem;
    }

    .hero {
        height: 40vh;
        min-height: 250px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .footer-menu {
        flex-direction: column;
    }

    .footer-menu li {
        margin: 5px 0;
    }

    body {
        font-size: 16px;
    }
}

/* ---------- UTILITY CLASSES ---------- */
.no-top-margin {
    margin-top: 0 !important;
}

.custom-box {
    position: relative;
    background-color: var(--off-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 5px;
    overflow: hidden;
}

.custom-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.custom-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.custom-box h2 {
    margin-bottom: 1rem;
}

.custom-box ul {
    list-style-type: none;
    padding: 0;
}

.custom-box li {
    margin-bottom: 0.5rem;
}

/* ---------- PORTFOLIO CONTENT STYLING ---------- */
.portfolio-content.custom-box,
.portfolio-gallery.custom-box {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
}

.portfolio-content.custom-box .portfolio-thumbnail {
    margin-bottom: 20px;
}

.portfolio-content.custom-box .portfolio-thumbnail img {
    width: 100%;
    height: auto;
    border-radius:4px;
}

.portfolio-content.custom-box .entry-title {
    color: #404040;
    margin-bottom: 20px;
}

.portfolio-content.custom-box .entry-content {
    color: #333;
    line-height: 1.6;
}

.portfolio-content.custom-box .entry-content p {
    margin-bottom: 15px;
}

.portfolio-content.custom-box .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}

/* ---------- PORTFOLIO GALLERY STYLING ---------- */
.portfolio-gallery.custom-box {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 30px;
}

.portfolio-gallery.custom-box h2 {
    color: #404040;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.portfolio-gallery.custom-box h2 .gallery-explanation {
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.gallery-item {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

/* ---------- PORTFOLIO VIDEO STYLING ---------- */
.portfolio-video.custom-box {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
}

.video-wrapper {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.portfolio-video h2 {
    color: #404040;
    margin-bottom: 20px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---------- PORTFOLIO PARTNERS STYLING ---------- */
.portfolio-partners.custom-box {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
}

.portfolio-partners h2 {
    color: #404040;
    margin-bottom: 20px;
    font-size: 1.2em;
    line-height: 1.4;
}

.partners-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.partner-item {
    margin-bottom: 10px;
}

.partner-link {
    color: #404040;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.partner-link:hover {
    color: var(--link-hover-color);
}

.partner-specialty {
    color: #666;
    font-style: italic;
}

/* ---------- GLOBAL LINK HOVER COLOR CHANGE ---------- */
a:hover {
    color: var(--link-hover-color);
}

/* Εξαιρέσεις για το header και footer menu */
.main-navigation a:hover,
.footer-navigation a:hover {
    color: var(--primary-color);
}
/* BEGIN: Updated Related Items Styles for Portfolio Single */
.single-portfolio .portfolio-related {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

.single-portfolio .portfolio-related::before,
.single-portfolio .portfolio-related::after {
    display: none;
}

.single-portfolio .related-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.single-portfolio .related-item {
    text-align: center;
    padding: 0;
    background-color: var(--off-white);
    border-radius: 5px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.single-portfolio .related-item:hover {
    transform: translateY(-5px);
}

.single-portfolio .related-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.single-portfolio .related-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.single-portfolio .related-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.single-portfolio .related-item h3 {
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    color: var(--dark-gray);
    text-align: center;
}

@media (min-width: 1200px) {
    .single-portfolio .related-items {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .single-portfolio .related-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .single-portfolio .related-items {
        grid-template-columns: 1fr;
    }
}
/* END: Updated Related Items Styles for Portfolio Single */
/* BEGIN: Contact Form Styles */
.wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
}

.wpcf7-form label {
    display: block;
    margin-top: 20px;
    font-weight: bold;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wpcf7-form .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wpcf7-form .wpcf7-list-item {
    margin-left: 0;
}

.wpcf7-form .wpcf7-submit {
    background-color: var(--dark-gray);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}

.wpcf7-form .wpcf7-submit:hover {
    background-color: var(--light-gray);
}
/* END: Contact Form Styles */
/* BEGIN: Updated Contact Form Styles */
.info-box {
    position: relative;
    background-color: var(--off-white);
    padding: 2rem;
    margin: 2rem auto;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px;
}

.info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.info-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.info-content {
    margin-bottom: 1rem;
}

.map-container {
    width: 100%;
}

.map-container iframe {
    width: 100%;
    height: 300px;
    border: 0;
}

.contact-form-wrapper {
    position: relative;
    background-color: var(--off-white);
    padding: 2rem;
    margin: 2rem auto;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px;
}

.contact-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.contact-form-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.wpcf7-form .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.wpcf7-form .form-row label {
    flex: 0 0 30%;
    margin-top: 0;
    margin-right: 1rem;
}

.wpcf7-form .form-row .wpcf7-form-control-wrap {
    flex: 1;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea {
    width: 100%;
}

.wpcf7-form .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wpcf7-form .wpcf7-list-item {
    margin-left: 0;
}

@media (max-width: 768px) {
    .wpcf7-form .form-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .wpcf7-form .form-row label {
        margin-bottom: 0.5rem;
    }
}
/* END: Updated Contact Form Styles */
/* BEGIN: Centered Page Title */
.entry-header {
    text-align: center;
    margin-bottom: 2rem;
}

.entry-title {
    display: inline-block;
    position: relative;
    padding: 0 20px;
}

.entry-title::before,
.entry-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100px;
    height: 2px;
    background-color: var(--primary-color);
}

.entry-title::before {
    right: 100%;
}

.entry-title::after {
    left: 100%;
}
/* ---------- UPDATED PORTFOLIO SECTION STYLES ---------- */
.portfolio {
    padding: 4rem 0;
    background-color: var(--white);
}

.portfolio h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-gray);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.portfolio-item {
    text-align: center;
    padding: 0;
    background-color: var(--off-white);
    border-radius: 5px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: none;
}

.portfolio-item:hover {
    transform: translateY(-5px);
}

.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.portfolio-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}



/* Η κίτρινη μπάρα και το τρίγωνο σχεδιάζονται στο .portfolio-item-inner
   (γραμμές 388 και 398). Εδώ υπήρχε δεύτερο, πανομοιότυπο σετ, που έδινε
   δύο μπάρες και δύο τρίγωνα το ένα πάνω στο άλλο. Αφαιρέθηκε. */

.portfolio-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.portfolio-title {
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    color: var(--dark-gray);
    text-align: center;
}

@media (min-width: 1200px) {
    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}
/* END: Centered Page Title */

/* ---------- REVIEWS SECTION STYLES ---------- */
.reviews {
    padding: 4rem 0;
    background-color: var(--white);
}

.reviews h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-gray);
}

.reviews-container {
    position: relative;
    background-color: var(--off-white);
    padding: 2rem;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.reviews-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.reviews-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

/* Αν χρειάζεται να προσαρμόσετε το μέγεθος του widget, μπορείτε να χρησιμοποιήσετε το ακόλουθο CSS */
.reviews-container > div {
    max-width: 100%;
    margin: 0 auto;
}
/* BEGIN: Updated Title Style */
.page-template-page-services .entry-title {
    font-size: 2.5rem; /* Προσαρμόστε αυτή την τιμή αν χρειάζεται */
    margin-bottom: 1rem;
    text-align: center;
    color: var(--dark-gray);
    font-weight: bold; /* Προσθέστε έντονη γραφή αν χρειάζεται */
}
/* END: Updated Title Style */

.page-template-page-services .entry-title {
    display: inline-block;
    padding: 0 20px;
}
/* BEGIN: Updated Reviews Style */
.page-template-page-services .reviews.custom-box {
    padding: 2rem;
    background-color: var(--off-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-template-page-services .reviews.custom-box > div {
    background: none;
    padding: 0;
}

.page-template-page-services .reviews.custom-box .ti-widget {
    max-width: 100% !important;
    margin: 0 !important;
}

.page-template-page-services .reviews.custom-box .ti-widget .ti-reviews-container {
    background-color: transparent !important;
    box-shadow: none !important;
}

.page-template-page-services .reviews.custom-box .ti-widget .ti-review-item {
    background-color: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 1rem !important;
}
/* END: Updated Reviews Style */

/* Αφαιρούμε τις ψευδο-κλάσεις ::before και ::after που δημιουργούσαν τις κίτρινες γραμμές */
.page-template-page-services .entry-title::before,
.page-template-page-services .entry-title::after {
    display: none;
}

.page-template-page-services .custom-box,
.page-template-page-services .portfolio-related,
.page-template-page-services .reviews {
    width: 90%;
    max-width: 1200px; /* Προσαρμόστε αυτή την τιμή αν χρειάζεται */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: var(--off-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 5px;
    overflow: hidden;
}

.page-template-page-services .custom-box::before,
.page-template-page-services .portfolio-related::before,
.page-template-page-services .reviews::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.page-template-page-services .custom-box::after,
.page-template-page-services .portfolio-related::after,
.page-template-page-services .reviews::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.page-template-page-services .portfolio-related h2,
.page-template-page-services .reviews h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-gray);
}

.page-template-page-services .related-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.page-template-page-services .related-item {
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.page-template-page-services .related-item:hover {
    transform: translateY(-5px);
}

.page-template-page-services .related-item a {
    text-decoration: none;
    color: inherit;
}

.page-template-page-services .related-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.page-template-page-services .related-item h3 {
    padding: 10px;
    margin: 0;
    font-size: 1em;
    text-align: center;
}

@media (min-width: 768px) {
    .page-template-page-services .related-items {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* BEGIN: Updated Related Items Styles for Services Page */
.page-template-page-services .portfolio-related {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

.page-template-page-services .portfolio-related::before,
.page-template-page-services .portfolio-related::after {
    display: none;
}

.page-template-page-services .related-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.page-template-page-services .related-item {
    text-align: center;
    padding: 0;
    background-color: var(--off-white);
    border-radius: 5px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-template-page-services .related-item:hover {
    transform: translateY(-5px);
}

.page-template-page-services .related-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.page-template-page-services .related-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.page-template-page-services .related-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.page-template-page-services .related-item h3 {
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    color: var(--dark-gray);
    text-align: center;
}

@media (min-width: 1200px) {
    .page-template-page-services .related-items {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .page-template-page-services .related-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .page-template-page-services .related-items {
        grid-template-columns: 1fr;
    }
}
/* END: Updated Related Items Styles for Services Page */
/* BEGIN: Updated Portfolio Single Page Styles */
.single-portfolio #primary {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.single-portfolio .portfolio-content.custom-box,
.single-portfolio .portfolio-gallery.custom-box,
.single-portfolio .portfolio-video.custom-box,
.single-portfolio .portfolio-partners.custom-box,
.single-portfolio .portfolio-related {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.single-portfolio .entry-content img {
    max-width: 100%;
    height: auto;
}

/* Adjust the layout for better responsiveness */
@media (max-width: 1200px) {
    .single-portfolio #primary {
        width: 95%;
    }
}

@media (max-width: 768px) {
    .single-portfolio #primary {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* END: Updated Portfolio Single Page Styles */
/* BEGIN: Remove yellow lines from Portfolio Single Title */
.single-portfolio .entry-title::before,
.single-portfolio .entry-title::after {
    display: none;
}

.single-portfolio .entry-title {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0;
}
/* END: Remove yellow lines from Portfolio Single Title */
/* BEGIN: Updated Services Page Styles */
.page-template-page-services .entry-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--dark-gray);
    font-weight: bold;
}

.page-template-page-services .entry-title::before,
.page-template-page-services .entry-title::after {
    display: none;
}

.page-template-page-services .custom-box,
.page-template-page-services .portfolio-related,
.page-template-page-services .reviews {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: var(--off-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-template-page-services .custom-box::before,
.page-template-page-services .portfolio-related::before,
.page-template-page-services .reviews::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.page-template-page-services .custom-box::after,
.page-template-page-services .portfolio-related::after,
.page-template-page-services .reviews::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.page-template-page-services .portfolio-related h2,
.page-template-page-services .reviews h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-gray);
}
/* END: Updated Services Page Styles */

/* BEGIN: Fix Services Page Content Box */
.page-template-page-services .entry-content.custom-box {
    background-color: var(--off-white);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.page-template-page-services .entry-content.custom-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.page-template-page-services .entry-content.custom-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
}

.page-template-page-services .entry-content.custom-box > *:last-child {
    margin-bottom: 0;
}
/* END: Fix Services Page Content Box */
/* BEGIN: Add Shadow to Portfolio Items */
.portfolio-item {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* END: Add Shadow to Portfolio Items */
/* BEGIN: Popup Styles */
#popup-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    text-align: center;
}

#close-popup {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #ffff00;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
/* END: Popup Styles */
/* =============================================================================
   BLOG STYLES
   ============================================================================= */

/* Blog Archive Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Blog Post Card */
.blog-post-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.blog-post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
}

.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.blog-post-card .post-thumbnail {
    overflow: hidden;
    height: 200px;
}

.blog-post-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-post-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.blog-post-card .post-content {
    padding: 20px;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 10px;
}

.post-meta i {
    margin-right: 5px;
    color: var(--primary-color);
}

.post-meta a {
    color: #666;
    text-decoration: none;
}

.post-meta a:hover {
    color: var(--primary-color);
}

.post-title {
    margin: 15px 0;
    font-size: 1.3rem;
    line-height: 1.4;
}

.post-title a {
    color: var(--dark-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title a:hover {
    color: var(--primary-color);
}

.post-excerpt {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--dark-gray);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease, gap 0.3s ease;
}

.read-more:hover {
    color: var(--primary-color);
    gap: 10px;
}

/* Single Post */
.single-post .entry-header {
    text-align: center;
    margin-bottom: 30px;
}

.single-post .post-meta {
    justify-content: center;
    margin-bottom: 20px;
}

.single-post .entry-title {
    font-size: 2.5rem;
    margin: 20px 0;
    line-height: 1.3;
}

.single-post .post-featured-image {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.single-post .post-featured-image img {
    width: 100%;
    height: auto;
}

.single-post .entry-content {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.single-post .entry-content p {
    margin-bottom: 1.5rem;
}

.single-post .entry-content h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--dark-gray);
}

.single-post .entry-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--dark-gray);
}

.single-post .entry-content img {
    border-radius: 8px;
    margin: 20px 0;
}

.single-post .entry-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: #666;
}

/* Tags */
.post-tags {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.post-tags i {
    color: var(--primary-color);
    margin-right: 10px;
}

.post-tags .tag {
    display: inline-block;
    padding: 5px 12px;
    background: #f0f0f0;
    border-radius: 15px;
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
    margin: 5px 5px 5px 0;
    transition: all 0.3s ease;
}

.post-tags .tag:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Author Box */
.author-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 40px;
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    border-radius: 50%;
    border: 3px solid var(--primary-color);
}

.author-info h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--dark-gray);
}

.author-bio {
    color: #666;
    line-height: 1.6;
}

/* Related Posts */
.related-posts {
    margin-top: 40px;
}

.related-posts h3 {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.related-posts h3 i {
    color: var(--primary-color);
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.related-post-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.related-post-item:hover {
    transform: translateY(-3px);
}

.related-post-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.related-post-item h4 {
    padding: 15px;
    margin: 0;
    font-size: 1rem;
}

.related-post-item h4 a {
    color: var(--dark-gray);
    text-decoration: none;
}

.related-post-item h4 a:hover {
    color: var(--primary-color);
}

.related-post-item .post-date {
    padding: 0 15px 15px;
    display: block;
    font-size: 0.85rem;
    color: #666;
}

.related-post-item .post-date i {
    color: var(--primary-color);
    margin-right: 5px;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background: #f0f0f0;
    border-radius: 5px;
    color: var(--dark-gray);
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--primary-color);
    color: #fff;
}

.pagination .page-numbers i {
    font-size: 0.85rem;
}

/* No Posts Found */
.no-posts {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.no-posts i {
    font-size: 4rem;
    color: #ddd;
    margin-bottom: 20px;
}

.no-posts h2 {
    margin-bottom: 10px;
}

/* Archive Header */
.page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
}

.page-header .page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.page-header .page-title i {
    color: var(--primary-color);
}

.archive-description {
    color: #666;
    font-size: 1.1rem;
    max-width: 800px;
    margin: 10px auto 0;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .single-post .entry-title {
        font-size: 2rem;
    }
    
    .author-box {
        flex-direction: column;
        text-align: center;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
}
/* Menu Icons */
.main-navigation .menu-item a {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Specific menu items - Αλλαγή με βάση τα menu item IDs */
.main-navigation .menu-item-blog > a::before {
    content: "\f1ea"; /* Font Awesome newspaper icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.main-navigation .menu-item-portfolio > a::before {
    content: "\f03e"; /* Font Awesome camera icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.main-navigation .menu-item-services > a::before,
.main-navigation .menu-item-υπηρεσιες > a::before {
    content: "\f0b1"; /* Font Awesome briefcase icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.main-navigation .menu-item-contact > a::before,
.main-navigation .menu-item-επικοινωνια > a::before {
    content: "\f0e0"; /* Font Awesome envelope icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/* ---------- BLOG GRID AND FILTERS STYLES ---------- */
/* Προσθέστε αυτόν τον κώδικα στο τέλος του style.css, πριν το τελευταίο } */

/* BEGIN: Blog Category Filters */
.blog-filters {
    margin-bottom: 30px;
    margin-top: 20px;
    text-align: center;
}

.blog-filters .filter-button {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    color: #333;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
}

.blog-filters .filter-button:hover,
.blog-filters .filter-button.active {
    background-color: var(--dark-gray);
    color: #fff;
    border-color: var(--dark-gray);
}
/* END: Blog Category Filters */

/* BEGIN: Blog Grid Layout */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

@media (min-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}
/* END: Blog Grid Layout */

/* BEGIN: Blog Item Styling */
.blog-item {
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.blog-item-inner {
    background-color: var(--off-white);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.blog-item-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
    z-index: 1;
}

.blog-item-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
    z-index: 1;
}

.blog-item-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.blog-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.blog-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* END: Blog Item Styling */

/* BEGIN: Blog Content Area */
.blog-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-gray);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.blog-item a:hover .blog-title {
    color: var(--link-hover-color);
}

.blog-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--light-gray);
    flex-wrap: wrap;
}

.blog-meta i {
    margin-right: 5px;
}

.blog-date,
.blog-category {
    display: flex;
    align-items: center;
}

.blog-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-top: auto;
}
/* END: Blog Content Area */

/* BEGIN: Blog Pagination */
.nav-links {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px;
}

.nav-links a {
    background-color: var(--off-white);
    padding: 12px 24px;
    border-radius: 5px;
    color: var(--dark-gray);
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a:hover {
    background-color: var(--dark-gray);
    color: var(--white);
}

.nav-links .nav-previous {
    margin-right: auto;
}

.nav-links .nav-next {
    margin-left: auto;
}
/* END: Blog Pagination */

/* ========================================
   3D DESIGNS STYLING
   Προσθέστε στο τέλος του style.css
   ======================================== */

/* BEGIN: 3D Designs Archive Page */

.page-description {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* Design Filters */
.design-filters {
    margin-bottom: 30px;
    margin-top: 20px;
    text-align: center;
}

.design-filters .filter-button {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    color: #333;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
}

.design-filters .filter-button:hover,
.design-filters .filter-button.active {
    background-color: var(--dark-gray);
    color: #fff;
    border-color: var(--dark-gray);
    transform: translateY(-2px);
}

/* Designs Grid */
.designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

@media (min-width: 1200px) {
    .designs-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .designs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .designs-grid {
        grid-template-columns: 1fr;
    }
}

/* Design Item */
.design-item {
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.design-item-inner {
    background-color: var(--off-white);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.design-item-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--primary-color);
    z-index: 1;
}

.design-item-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid var(--primary-color);
    z-index: 1;
}

.design-item-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.design-item img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    display: block;
    background-color: #fff;
}

.design-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Design Content Area */
.design-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.design-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-gray);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.design-item a:hover .design-title {
    color: var(--link-hover-color);
}

.design-pricing {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
    background-color: #f0f0f0;
}

/* Price colors - only for the icon and non-discounted text */
.printed-price {
    color: #2c7a3d;
}

.printed-price .original-price {
    color: #e74c3c !important;
    text-decoration: line-through !important;
}

.printed-price .discounted-price {
    color: #2c7a3d !important;
    font-weight: bold;
}

.stl-price {
    color: #0066cc;
}

.stl-price .original-price {
    color: #e74c3c !important;
    text-decoration: line-through !important;
}

.stl-price .discounted-price {
    color: #0066cc !important;
    font-weight: bold;
}

.design-category {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--light-gray);
    margin-bottom: 10px;
}

.design-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-top: auto;
}

.no-designs {
    text-align: center;
    padding: 60px 20px;
    font-size: 1.2rem;
    color: #666;
}

/* END: 3D Designs Archive Page */

/* ======================================== */

/* BEGIN: Single 3D Design Page */

.single-3d-design .design-content-section {
    max-width: 1200px;
    margin: 0 auto;
}

.single-3d-design .design-main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .single-3d-design .design-main-content {
        grid-template-columns: 1fr;
    }
}

.design-image img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.design-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.design-pricing-box,
.design-specs-box,
.design-options-box {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    border-left: 4px solid var(--primary-color);
}

.design-pricing-box h3,
.design-specs-box h3,
.design-options-box h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.price-option:last-child {
    border-bottom: none;
}

.price-label {
    font-weight: 500;
    font-size: 15px;
}

.price-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-gray);
}

.design-specs-box p,
.design-options-box p {
    margin: 8px 0;
    line-height: 1.6;
}

.order-button-container {
    margin-top: 10px;
}

.btn-order {
    width: 100%;
    background-color: var(--dark-gray);
    color: white;
    border: none;
    padding: 18px 30px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-order:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* ========== DESCRIPTION IN GALLERY ========== */
.design-description-in-gallery {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border-left: 4px solid var(--primary-color);
}

.design-description-in-gallery h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========== PARTS SECTION STYLING ========== */
.design-parts-box {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    border-left: 4px solid var(--primary-color);
}

.design-parts-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    gap: 8px;
}

.parts-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.part-item-frontend {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.part-item-frontend:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.part-header h4 {
    margin: 0 0 8px 0;
    color: var(--dark-gray);
    font-size: 18px;
}

.part-description {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 14px;
}

.part-pricing {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.part-price-option {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.part-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.part-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-gray);
}

.part-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.part-actions label {
    font-weight: 500;
    color: var(--dark-gray);
}

.part-quantity-input {
    width: 80px;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    transition: border-color 0.3s ease;
}

.part-quantity-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-add-part {
    padding: 8px 20px;
    background-color: var(--primary-color);
    color: var(--dark-gray);
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-add-part:hover {
    background-color: #e6e600;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.design-description {
    margin-top: 30px;
    line-height: 1.8;
    font-size: 16px;
}
/**
 * PATCH 2: ΠΡΟΣΘΗΚΗ CSS ΓΙΑ GALLERY CAROUSEL, RELATED PRODUCTS & FIXES
 * 
 * ΠΡΟΒΛΗΜΑΤΑ:
 * 1. Gallery carousel δεν λειτουργεί (λείπει CSS)
 * 2. Related products εμφανίζονται σε όλο το πλάτος με υπερμεγέθη εικόνα
 * 3. Video δεν εμφανίζεται σωστά
 * 4. Λείπει CSS για exclusive badge, license button, modals
 * 
 * ΟΔΗΓΙΕΣ:
 * 1. Ανοίξτε το style.css
 * 2. Βρείτε τη γραμμή: /* END: Single 3D Design Page */ (γραμμή ~2641)
 * 3. ΑΜΕΣΩΣ ΠΡΙΝ από αυτή τη γραμμή, προσθέστε τον παρακάτω κώδικα:
 */

/* ========== GALLERY CAROUSEL ========== */
.design-gallery {
    position: relative;
    margin-bottom: 20px;
}

.gallery-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-slide {
    display: none;
    width: 100%;
}

.gallery-slide.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

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

.gallery-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.gallery-caption {
    text-align: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 14px;
    margin-top: -4px;
    border-radius: 0 0 8px 8px;
}

/* Carousel Navigation Buttons */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 20px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/* Carousel Dots */
.carousel-dots {
    text-align: center;
    padding: 15px 0;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.carousel-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dots .dot.active,
.carousel-dots .dot:hover {
    background: white;
    transform: scale(1.2);
}

/* ========== VIDEO SECTION ========== */
.design-video {
    margin-top: 20px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px solid var(--primary-color);
}

.design-video h4 {
    margin: 0 0 15px 0;
    color: var(--dark-gray);
    font-size: 18px;
}

.design-video .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 5px;
}

.design-video .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ========== EXCLUSIVE BADGE ========== */
.exclusive-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
/* Best Seller Badge */
.best-seller-badge {
    display: inline-block;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    animation: pulse 2s infinite;
}
.exclusive-message-box {
    background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    text-align: center;
}

.exclusive-message-box p {
    margin: 5px 0;
    color: #856404;
}

/* ========== PRICE STYLING ========== */
.price-free {
    color: #28a745;
    font-weight: bold;
    font-size: 20px;
}

.price-original {
    text-decoration: line-through;
    color: #999;
    margin-right: 10px;
    font-size: 18px;
}

.price-discounted {
    color: #dc3545;
    font-weight: bold;
}

.bulk-discount-info {
    background: #e7f4ff;
    border: 2px solid #0066cc;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.bulk-discount-info ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.bulk-discount-info li {
    padding: 5px 0;
}

/* ========== ACTION BUTTONS ========== */
.action-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.btn-order,
.btn-license {
    width: 100%;
    background-color: var(--dark-gray);
    color: white;
    border: none;
    padding: 18px 30px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.btn-license {
    background-color: #007bff;
}

.btn-order:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-license:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.copyright-notice {
    margin-top: 15px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 5px;
    text-align: center;
}

.copyright-notice p {
    margin: 0;
    color: #856404;
    font-size: 14px;
}

/* ========== RELATED PRODUCTS STYLING ========== */
.related-products-section {
    margin-top: 50px;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 8px;
}

.related-products-section h2 {
    margin: 0 0 30px 0;
    color: var(--dark-gray);
    text-align: center;
    font-size: 24px;
}

/* ========== RELATED PRODUCTS GRID ========== */
.related-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .related-products-grid {
        grid-template-columns: 1fr !important;
    }
}

.related-product-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.related-product-item img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
}

.related-product-item h4 {
    padding: 15px;
    margin: 0;
    font-size: 16px;
    min-height: 60px;
}

/* ========== ORDER MODAL ========== */
.order-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.3s ease;
}

.order-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close-modal,
.close-license-modal {
    color: #aaa;
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover,
.close-license-modal:hover {
    color: #000;
}

.order-modal-content h2 {
    margin-top: 0;
    color: var(--dark-gray);
}

/* ========== FORM STYLING ========== */
.form-section {
    margin-bottom: 25px;
}

.form-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-gray);
}

.form-section input[type="text"],
.form-section input[type="email"],
.form-section input[type="tel"],
.form-section input[type="number"],
.form-section textarea,
.form-section select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-section input:focus,
.form-section textarea:focus,
.form-section select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.3);
}

.form-section textarea {
    resize: vertical;
    min-height: 100px;
}

.radio-group label,
.checkbox-label {
    display: block;
    padding: 10px 0;
    cursor: pointer;
}

.radio-group input[type="radio"],
.checkbox-label input[type="checkbox"] {
    margin-right: 10px;
}

.payment-warning {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 5px;
    padding: 15px;
    margin-top: 15px;
}

.payment-warning p {
    margin: 0;
    color: #856404;
    font-size: 15px;
}

.form-submit {
    margin-top: 25px;
}

.btn-submit {
    width: 100%;
    background-color: #28a745;
    color: white;
    border: none;
    padding: 16px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}

.form-note {
    text-align: center;
    margin-top: 15px;
    color: #666;
}

/* ========== QUANTITY SELECTOR ========== */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.quantity-selector label {
    font-weight: 600;
    margin: 0;
}

.quantity-selector input[type="number"] {
    width: 80px;
    padding: 8px;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}

.quantity-selector input[type="number"]:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .related-products-grid {
        grid-template-columns: 1fr;
    }
    
    .carousel-prev,
    .carousel-next {
        padding: 10px 15px;
        font-size: 18px;
    }
    
    .order-modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 20px;
    }
    
    .action-buttons-container {
        gap: 10px;
    }
    
    .btn-order,
    .btn-license {
        padding: 15px 20px;
        font-size: 16px;
    }
}

/* ========== SMOOTH SCROLL FIX ========== */
html {
    scroll-behavior: smooth;
}

/* Προσθήκη padding για να μην κρύβει το header το περιεχόμενο */
#order-modal-form,
#license-request-modal {
    scroll-margin-top: 100px;
}
/* END: Single 3D Design Page */

/* ========== VIDEO SECTION STYLING ========== */
.design-video-section {
    margin: 20px 0;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px solid var(--primary-color);
}

.design-video-section h3 {
    margin: 0 0 15px 0;
    color: var(--dark-gray);
    font-size: 20px;
}

.design-video-section .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 5px;
}

.design-video-section .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* ======================================== */

/* BEGIN: Order Form Modal */

.order-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.3s;
}

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

.order-modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 40px;
    max-width: 700px;
    border-radius: 8px;
    position: relative;
    animation: slideDown 0.3s;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes slideDown {
    from { 
        transform: translateY(-50px);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .order-modal-content {
        margin: 0;
        padding: 30px 20px;
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
    }
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
}

.order-modal-content h2 {
    margin-top: 0;
    color: var(--dark-gray);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.form-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.form-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    transition: border-color 0.3s;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--link-hover-color);
}

.form-field textarea {
    resize: vertical;
    font-family: inherit;
}

.order-type-option {
    margin-bottom: 20px;
    padding: 15px;
    background-color: white;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s;
}

.order-type-option:has(input:checked) {
    border-color: var(--link-hover-color);
    background-color: #f0f8ff;
}

.order-type-option label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-type-option input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.conditional-options {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-top: 15px;
}

.info-message {
    margin: 0;
    padding: 12px;
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    border-radius: 4px;
    font-size: 14px;
}

.payment-note {
    font-weight: 600;
    margin-bottom: 15px;
    color: #d32f2f;
}

.payment-options label {
    display: block;
    padding: 12px;
    margin-bottom: 10px;
    background-color: white;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.payment-options label:hover {
    background-color: #f5f5f5;
}

.payment-options input[type="radio"]:checked + strong {
    color: var(--link-hover-color);
}

.payment-options input[type="radio"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.payment-warning {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
}

.payment-warning p {
    margin: 0;
    color: #856404;
    font-weight: 500;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.checkbox-label a {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.form-submit {
    margin-top: 30px;
    text-align: center;
}

.btn-submit {
    background-color: #2c7a3d;
    color: white;
    border: none;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-submit:hover {
    background-color: #1f5a2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* END: Order Form Modal */
/* =============================================================================
   CRITICAL FIXES - ADDITIONAL CSS
   Add this to your style.css
   ============================================================================= */

/* Direct Download Button Styling */
.direct-download-box {
    margin-top: 10px;
    padding: 15px;
    background: #d4edda;
    border: 2px solid #28a745;
    border-radius: 5px;
    text-align: center;
}

.btn-direct-download {
    display: inline-block;
    padding: 12px 25px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-direct-download:hover {
    background: linear-gradient(135deg, #20c997, #17a2b8);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
    color: #fff !important;
}

/* Info Messages in Form */
.info-message {
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 0.9em;
}

.info-message.success {
    background: #d4edda;
    border-left: 4px solid #28a745;
    color: #155724;
}

.info-message.warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
}

.info-message:not(.success):not(.warning) {
    background: #d1ecf1;
    border-left: 4px solid #17a2b8;
    color: #0c5460;
}

/* YouTube Video Container Fix */
.design-video {
    margin-top: 20px !important;
    padding: 15px;
    background: #f9f9f9;
    border: 2px solid #ffff00;
    border-radius: 8px;
}

.design-video h4 {
    margin-bottom: 10px;
    color: #404040;
    font-size: 1.1em;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 5px;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive Fixes */
@media screen and (max-width: 768px) {
    .btn-direct-download {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    
    .direct-download-box {
        padding: 12px;
    }
}
/* ========== ARCHIVE DISCOUNTS & EXCLUSIVE BADGE ========== */

/* Small Exclusive Badge for Archive */
.exclusive-badge-small {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
    z-index: 10;
    animation: pulse 2s infinite;
}
/* Product Badges Container (for stacking in archive) */
.product-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 10;
}

.badge-small {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
    white-space: nowrap;
}

/* Best Seller Badge Small */
.best-seller-badge-small {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
}

/* Discount Badge Small */
.discount-badge-small {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
}

/* Update Exclusive Badge to work with new system */
.exclusive-badge-small {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    /* Remove old positioning since it's now in .badge-small */
    position: relative;
    top: auto;
    right: auto;
}
```

---

## ✅ ΑΠΟΤΕΛΕΣΜΑ:

**Archive (Grid):**
```
┌─────────────────┐
│  🏆 BEST SELLER │ ← Top badge
│  ⭐ EXCLUSIVE   │ ← Middle badge  
│  🔥 -20%        │ ← Bottom badge
│                 │
│  [Product Img]  │
│   Product Name  │
│      €5.50      │
└─────────────────┘
```

**Single Product:**
```
Product Title 🏆 BEST SELLER ⭐ EXCLUSIVE
/* Original Price (Strikethrough) - Archive grid */
.design-pricing .original-price {
    text-decoration: line-through !important;
    color: #e74c3c !important;
    font-size: 14px;
    margin-right: 8px;
    font-weight: normal !important;
}

/* Discounted Price (Highlighted) - Archive grid */
.design-pricing .discounted-price {
    font-weight: bold !important;
    font-size: 16px;
}

/* Make sure the badge is positioned correctly */
.design-item-inner {
    position: relative;
}

/* Ensure prices are inline */
.design-pricing .price {
    display: block;
    margin-bottom: 5px;
}

/* END ARCHIVE DISCOUNTS & EXCLUSIVE BADGE */

/* ---------- STATISTICS SECTION (front-page) ---------- */
.zoom-statistics {
    background: #ffffff;
    padding: 60px 20px;
    margin: 40px 0 0 0;
}

.zoom-statistics .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.zoom-statistics h2 {
    text-align: center;
    color: #2c3e50;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 50px;
    font-family: Arial, sans-serif;
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.statistic {
    background: #f8f8f8;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    border-left: 4px solid #ffff00;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.3s ease;
}

.statistic:hover {
    transform: translateY(-5px);
}

/* Yellow triangle bottom right */
.statistic::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent #ffff00 transparent;
}

.statistic svg {
    width: 60px;
    height: 60px;
    fill: #404040;
    margin-bottom: 20px;
}

.statistic .stat-number {
    font-size: 42px;
    font-weight: 700;
    color: #404040;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.statistic h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
}

.statistic p {
    color: #7f8c8d;
    font-size: 14px;
    line-height: 1.6;
    font-family: Arial, sans-serif;
    text-align: center;
}

/* Extra Services Box */
.extra-services {
    background: #f8f8f8;
    padding: 30px;
    margin-top: 30px;
    text-align: center;
    position: relative;
    border-left: 4px solid #ffff00;
}

.extra-services::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 25px;
    border-color: transparent transparent #ffff00 transparent;
}

.extra-services h3 {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
    font-family: Arial, sans-serif;
}

.extra-services p {
    color: #7f8c8d;
    font-size: 14px;
    line-height: 1.8;
    font-family: Arial, sans-serif;
}

@media (max-width: 768px) {
    .zoom-statistics { padding: 40px 15px; }
    .zoom-statistics h2 { font-size: 26px; }
    .statistic .stat-number { font-size: 36px; }
    .statistic { min-height: 260px; }
}

/* =============================================================================
   TYPOGRAPHY & SPACING FIXES: Σελίδα Υπηρεσιών & Custom Pages
   ============================================================================= */

/* Μειώνουμε το padding-top για σελίδες χωρίς hero section */
.page-template-page-services main {
    padding-top: 140px;
}

/* Ο τίτλος (entry-header) να έχει λιγότερο κενό από πάνω */
.page-template-page-services .entry-header {
    padding-top: 10px;
    margin-bottom: 1.5rem;
}

/* =============================================================================
   ENTRY CONTENT TYPOGRAPHY: Paragraphs, Headings, Lists
   Διορθώνει το πρόβλημα κολλημένων παραγράφων που προκαλεί το * { margin:0 }
   ============================================================================= */

.entry-content p,
.page-content p {
    margin-bottom: 1.2rem;
    line-height: 1.75;
}

.entry-content h2,
.page-content h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    color: var(--dark-gray);
}

.entry-content h3,
.page-content h3 {
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    font-size: 1.2rem;
    color: var(--dark-gray);
}

.entry-content h4,
.page-content h4 {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--dark-gray);
}

.entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol {
    margin-top: 0.5rem;
    margin-bottom: 1.2rem;
    padding-left: 1.8rem;
}

.entry-content li,
.page-content li {
    margin-bottom: 0.4rem;
    line-height: 1.7;
}

/* Ειδικά για το custom-box wrapper του page-services template */
.entry-content.custom-box p  { margin-bottom: 1.2rem; }
.entry-content.custom-box h2 { margin-top: 1.8rem; margin-bottom: 0.75rem; }
.entry-content.custom-box h3 { margin-top: 1.4rem; margin-bottom: 0.6rem; }

/* Το πρώτο στοιχείο να μην έχει margin-top */
.entry-content.custom-box > *:first-child {
    margin-top: 0;
}

/* Το τελευταίο στοιχείο να μην έχει margin-bottom */
.entry-content.custom-box > *:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   IMAGE SPACING: Εικόνες μέσα σε entry-content
   Δίνουμε breathing room πάνω και κάτω από κάθε εικόνα
   ============================================================================= */

.entry-content img,
.page-content img {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    display: block;        /* block ώστε τα margins να λειτουργούν σωστά */
    border-radius: 4px;    /* ελαφρύ rounding που ταιριάζει με το design */
}

/* =============================================================================
   ΠΟΡΤΡΕΤΟ ΟΜΑΔΑΣ, σελίδα «Σχετικά»
   Αριστερά με το κείμενο να κυλάει γύρω του, στο ίδιο μέγεθος με την αρχική.
   Χρειάζεται override του display:block που μπαίνει παραπάνω σε όλες τις
   εικόνες του entry-content, αλλιώς δεν δουλεύει το float.
   ============================================================================= */

.entry-content img.about-portrait,
.page-content img.about-portrait {
    display: inline;
    float: left;
    width: 300px;
    max-width: 42%;
    height: auto;
    margin: 0.3rem 1.8rem 1.2rem 0;
    border-radius: 5px;
}

/* Καθαρίζει το float ώστε η επόμενη ενότητα να ξεκινάει σε δική της γραμμή. */
.entry-content .about-clear,
.page-content .about-clear {
    clear: both;
}

/* Στο κινητό δεν έχει νόημα το wrap. Η φωτογραφία πάει πάνω, κεντραρισμένη. */
@media screen and (max-width: 600px) {
    .entry-content img.about-portrait,
    .page-content img.about-portrait {
        display: block;
        float: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 1.4rem;
    }
}

/* Η πρώτη εικόνα αμέσως μετά από κείμενο, λίγο λιγότερο margin από πάνω */
.entry-content p + img,
.page-content p + img {
    margin-top: 1rem;
}

/* Κείμενο που ακολουθεί αμέσως μετά από εικόνα */
.entry-content img + p,
.page-content img + p,
.entry-content img + h2,
.page-content img + h2,
.entry-content img + h3,
.page-content img + h3 {
    margin-top: 1rem;
}

/* Εξαίρεση: εικόνες μέσα σε gallery, portfolio, related items.
   Αυτές έχουν δικό τους styling και δεν θέλουμε extra margins */
.gallery-item img,
.related-item img,
.portfolio-item img,
.blog-item img,
.design-item img,
.related-product-item img,
.team-photo img,
.custom-logo img,
.site-header img {
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    border-radius: 0;
}

/* Εικόνες μέσα σε wp-block (Gutenberg blocks) */
.entry-content .wp-block-image {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
}

.entry-content .wp-block-image img {
    margin-top: 0;
    margin-bottom: 0;
}



/* =============================================================================
   ΣΥΝΔΕΣΜΟΙ ΜΕΣΑ ΣΤΟ ΚΕΙΜΕΝΟ
   Καθολικά οι σύνδεσμοι είναι γκρι χωρίς υπογράμμιση (γραμμή 51), οπότε μέσα
   στα κείμενα δεν ξεχωρίζουν από την απλή γραφή. Εδώ παίρνουν διακριτική γκρι
   υπογράμμιση, που σκουραίνει στο πέρασμα του ποντικιού. Χωρίς μπλε, ώστε να
   μη μοιάζουν με τους τυπικούς συνδέσμους του διαδικτύου.
   ============================================================================= */

.entry-content a:not(.button):not(.wp-block-button__link) {
    color: var(--dark-gray);
    text-decoration: underline;
    text-decoration-color: var(--light-gray);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: auto;
    transition: text-decoration-color 0.2s ease;
}

.entry-content a:not(.button):not(.wp-block-button__link):hover,
.entry-content a:not(.button):not(.wp-block-button__link):focus-visible {
    color: var(--dark-gray);
    text-decoration-color: var(--dark-gray);
}

/* Οι σύνδεσμοι που περιέχουν εικόνα δεν θέλουν υπογράμμιση. */
.entry-content a:has(img) {
    text-decoration: none;
}

/* Ο σύνδεσμος προς τη σελίδα περιοχής, στο τέλος κάθε άρθρου. */
.entry-content p.zoom-area-link {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e4e4e4;
}

/* =============================================================================
   ΥΠΟΣΕΛΙΔΟ ΣΕ ΣΤΗΛΕΣ
   Το μενού του υποσέλιδου ήταν μία σειρά με δέκα συνδέσμους στο κέντρο. Τώρα
   είναι τέσσερις στήλες: τρεις από την ιεραρχία του μενού και μία με τα
   στοιχεία επικοινωνίας από το footer.php. Στο κινητό μπαίνουν η μία κάτω από
   την άλλη. Δεν χρειάζεται JavaScript, τα υπομενού είναι πάντα ορατά.
   ============================================================================= */

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    text-align: left;
}

/* Τα li του μενού γίνονται απευθείας στήλες του πλέγματος. */
.footer-columns .footer-navigation,
.footer-columns .footer-menu {
    display: contents;
}

.footer-menu > li {
    margin: 0;
}

/* Ο τίτλος κάθε στήλης. */
.footer-menu > li > a,
.footer-contact-title {
    display: block;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 9px;
    margin-bottom: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu .sub-menu li {
    margin: 0 0 9px;
}

.footer-menu .sub-menu a,
.footer-contact a {
    color: #e2e2e2;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.45;
    transition: color 0.2s ease;
}

.footer-menu .sub-menu a:hover,
.footer-contact a:hover {
    color: var(--primary-color);
}

/* Η στήλη με τα στοιχεία επικοινωνίας. */
.footer-contact {
    order: 1;
}

.footer-contact p {
    margin: 0 0 12px;
    color: #e2e2e2;
    font-size: 14px;
    line-height: 1.75;
}

.footer-contact strong {
    color: var(--white);
}

.footer-contact .footer-hours {
    color: var(--light-gray);
    font-size: 13px;
    line-height: 1.7;
}

/* Το κάλεσμα για κριτική. Διακριτικό, αλλά να ξεχωρίζει από το ωράριο. */
.footer-contact .footer-review {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--light-gray);
}

.footer-contact .footer-review a {
    display: inline-block;
    margin-top: 4px;
    font-weight: 600;
    border-bottom: 1px solid currentColor;
}

/* Η μικρή γραμμή με τα άσχετα, κάτω από τις στήλες σε όλο το πλάτος. */
.footer-menu > li.footer-extra {
    order: 2;
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 6px;
}

.footer-menu > li.footer-extra > a {
    display: none;
}

.footer-menu > li.footer-extra .sub-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
}

.footer-menu > li.footer-extra .sub-menu li {
    margin: 0;
}

.footer-menu > li.footer-extra .sub-menu a {
    font-size: 12.5px;
    color: #a8a8a8;
}

.site-footer .copyright,
footer .copyright {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 13px;
    color: #b5b5b5;
}

@media screen and (max-width: 900px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

@media screen and (max-width: 600px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Ενδιάμεσα πλάτη: το hamburger εμφανίζεται μόλις στα 768px, οπότε ανάμεσα σε
   769 και 1100 το μενού κόλλαγε πάνω στο λογότυπο. Μικραίνουμε τα περιθώρια
   και ελάχιστα τα γράμματα ώστε να μείνει αέρας, χωρίς να αλλάξουμε το σημείο
   που το μενού γίνεται hamburger. */
@media screen and (min-width: 961px) and (max-width: 1100px) {
    .main-navigation .menu li {
        margin: 0 9px;
    }

    .main-navigation .menu a {
        font-size: 0.94rem;
    }
}

/* Κάτω από 960px τα εφτά στοιχεία δεν χωράνε δίπλα στο λογότυπο: στα 780px
   το λογότυπο και το μενού πιάνουν 686px σε διαθέσιμα 687. Το hamburger
   εμφανιζόταν μόλις στα 768, οπότε ενδιάμεσα το μενού κόλλαγε πάνω στο
   λογότυπο. Οι κανόνες είναι ίδιοι με του κινητού, απλώς πιάνουν νωρίτερα. */
@media screen and (max-width: 960px) {
    .menu-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    .main-navigation .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--dark-gray);
        padding: 20px;
    }

    .main-navigation .menu.active {
        display: block;
    }

    .main-navigation .menu li {
        margin: 10px 0;
    }
}

/* =============================================================================
   ΑΡΧΙΚΗ ΣΕΛΙΔΑ
   Το <section class="services"> δεν έκλεινε ποτέ στο front-page.php, οπότε οι
   στατιστικές, το "Να συστηθούμε" και οι πρόσφατες δουλειές ήταν φωλιασμένες
   μέσα του. Αυτό διορθώθηκε, και εδώ δίνουμε κοινό ρυθμό στις αποστάσεις και
   κοινό στυλ στους τίτλους, που ήταν τρία διαφορετικά μεγέθη και χρώματα.
   ============================================================================= */

.site-main > section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.site-main > section.hero {
    padding-top: 0;
    padding-bottom: 0;
}


/* Το hero αφήνει ήδη αέρα από κάτω, οπότε η πρώτη ενότητα θέλει λιγότερο.
   Χρειάζεται η ίδια ειδικότητα με τον κανόνα ".site-main > section". */
.site-main > section.services {
    padding-top: 1.5rem;
}

.zoom-statistics {
    padding: 2rem 20px;
    margin: 0;
}

/* Κοινός τίτλος ενότητας: μια μικρή κίτρινη γραμμή από κάτω, στο χρώμα της
   μάρκας, αντί για σκέτο κεντραρισμένο κείμενο. */
.services > .container > h2,
.zoom-statistics > .container > h2,
.home-reviews > .container > h2,
.team > .container > h2,
.areas > .container > h2,
.portfolio > .container > h2 {
    position: relative;
    text-align: center;
    font-family: inherit;
    font-size: clamp(25px, 2.6vw, 31px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--dark-gray);
    margin: 0 0 1.9rem;
    padding-bottom: 16px;
}

.services > .container > h2::after,
.zoom-statistics > .container > h2::after,
.home-reviews > .container > h2::after,
.team > .container > h2::after,
.areas > .container > h2::after,
.portfolio > .container > h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 54px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--primary-color);
}




/* Οι κάρτες υπηρεσιών έγιναν σύνδεσμοι προς τη σελίδα της κάθε υπηρεσίας, ώστε
   οι σελίδες να μη δείχνονται μόνο από το υποσέλιδο. */
a.service {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.service:hover h3,
a.service:focus-visible h3 {
    color: var(--primary-color);
}

.services-more {
    margin: 1.8rem auto 0;
    max-width: 820px;
    text-align: center;
    line-height: 1.7;
    color: var(--dark-gray);
}

/* ---------- Ενσωματωμένα βίντεο YouTube μέσα στο περιεχόμενο ----------
   Χωρίς σταθερό ύψος: το aspect-ratio κρατά την αναλογία σε κάθε πλάτος,
   ώστε να μη δημιουργείται μετατόπιση διάταξης καθώς φορτώνει το iframe. */
.zoom-video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.8rem 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.zoom-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Περιοχές που καλύπτουμε, στο σώμα της αρχικής ----------
   Οι ίδιοι σύνδεσμοι υπάρχουν και στο υποσέλιδο, αλλά εκεί είναι πλοήγηση
   που επαναλαμβάνεται παντού. Εδώ είναι περιεχόμενο, με κείμενο γύρω τους. */
.areas-intro {
    max-width: 720px;
    margin: -0.7rem auto 2rem;
    text-align: center;
    color: var(--dark-gray);
    opacity: 0.85;
    line-height: 1.65;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.areas-grid .area {
    display: block;
    padding: 22px 22px 24px;
    border: 1px solid var(--light-gray);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.areas-grid .area:hover,
.areas-grid .area:focus-visible {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.areas-grid .area h3 {
    margin: 0 0 9px;
    font-size: 19px;
    font-weight: 700;
    color: var(--dark-gray);
}

.areas-grid .area p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark-gray);
    opacity: 0.82;
}

.areas-more {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 16px;
}

@media (max-width: 600px) {
    .areas-grid { grid-template-columns: 1fr; }
}

/* ---------- Επιπλέον υπηρεσίες, σε πλέγμα με εικονίδια ---------- */

.extra-services {
    margin-top: 2.6rem;
    padding: 2rem 1.6rem;
}

.extra-services h3 {
    font-size: 15px;
    letter-spacing: 0.03em;
    margin-bottom: 1.6rem;
}

.extra-services-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 1.5rem 1rem;
}

.extra-services-grid li {
    text-align: center;
    padding: 0 4px;
}

.extra-services-grid i {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--dark-gray);
}

.extra-services-grid strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 3px;
}

.extra-services-grid span {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: #7f8c8d;
}

/* ---------- Κριτικές Google στην αρχική ---------- */

.home-reviews {
    background-color: var(--off-white);
}

.home-reviews .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media screen and (max-width: 768px) {
    .site-main > section {
        padding-top: 1.9rem;
        padding-bottom: 1.9rem;
    }

    .zoom-statistics {
        padding: 1.9rem 15px;
    }

    .extra-services {
        padding: 1.6rem 0.9rem;
    }

    .extra-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem 0.6rem;
    }
}

/* ---------- Οι τέσσερις αριθμοί σε μία σειρά ----------
   Το auto-fit με ελάχιστο 300px ζητούσε 1290px για τέσσερις στήλες ενώ ο
   διαθέσιμος χώρος είναι 1160, οπότε η τέταρτη έπεφτε από κάτω. Ορίζουμε
   ρητά τέσσερις στήλες και μαζεύουμε λίγο το γέμισμα των πλαισίων. */

.statistics-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 22px;
}

.statistic {
    padding: 32px 22px;
    min-height: 0;
}

.statistic .stat-number {
    font-size: clamp(27px, 2.4vw, 38px);
    margin-bottom: 12px;
}

@media screen and (max-width: 1180px) {
    .statistics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 620px) {
    .statistics-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Οι επτά επιπλέον υπηρεσίες σε μία σειρά ----------
   Χρειάζονταν 1132px και υπήρχαν 1105. Μικραίνουμε το πλάγιο γέμισμα του
   πλαισίου και το κενό ανάμεσά τους, και ορίζουμε ρητά επτά στήλες. */

.extra-services {
    padding: 2rem 1.2rem;
}

.extra-services-grid {
    grid-template-columns: repeat(7, 1fr);
    column-gap: 12px;
    row-gap: 22px;
}

@media screen and (max-width: 1180px) {
    .extra-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .extra-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* =============================================================================
   ΚΑΡΤΕΣ PORTFOLIO: ΤΟ ΠΛΑΙΣΙΟ ΣΤΟ ΣΧΗΜΑ ΤΗΣ ΜΙΚΡΟΓΡΑΦΙΑΣ
   Το ύψος ήταν σταθερό 200px, οπότε το σχήμα του πλαισίου άλλαζε με το πλάτος
   της οθόνης και το object-fit αναγκαζόταν να κόβει τη φωτογραφία. Στο σημείο
   του κοψίματος έμενε σκούρα γραμμή αριστερά και δεξιά.
   Δοκιμάστηκε: με μικρογραφίες στο ίδιο ακριβώς σχήμα με το πλαίσιο, από 400
   έως 640 εικονοστοιχεία, η γραμμή εξαφανίζεται σε όλες.
   Με aspect-ratio ίδιο με τη μικρογραφία (612x402), το object-fit δεν κόβει
   ποτέ τίποτα, σε κανένα πλάτος οθόνης.
   ============================================================================= */

.portfolio-item img {
    /* 4px παραπάνω προς τα δεξιά, που τα κόβει το overflow:hidden της κάρτας.
       Το πλάτος της εικόνας είναι δεκαδικό (300,609px), οπότε η δεξιά της άκρη
       έπεφτε στη μέση εικονοστοιχείου και άφηνε σκούρα γραμμή. Έτσι το ορατό
       όριο γίνεται η κοφτή άκρη της κάρτας, όχι η μαλακή άκρη της εικόνας.
       Αριστερά δεν χρειάζεται, γιατί την καλύπτει η κίτρινη μπάρα. */
    width: calc(100% + 4px);
    max-width: none;
    height: auto;
    aspect-ratio: 612 / 402;
    object-fit: cover;
}