/* Defines the appearance of links in the main menu (color, bold Arial font) */
.t4-palette-mainnav .nav > li a,
.t4-palette-mainnav .nav > li .nav-link
{
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

/* Keeps the text color white when hovering over menu links */
.t4-palette-mainnav .nav > li > a,
.t4-palette-mainnav .nav > li > .nav-link{
    color: #fff;
}

/* Sets full width for the e-shop top menu column */
.t4-col.eshop-topmenu.col-sm.col-md-6 
{
    width: 100% !important;
}

/* Changes the font size of the menu items */
.menu-item-title
{
    font-family: Arial;
    font-size: 14px;   /*do not change the value of 14*/
}

/* Changes the background and text color of the e-shop cart total badge */
#t4-header .eshop-cart #eshop-cart-total
{
    color: #fff;
    background: #f05305 !important;   
    
}

/* Changes the background color of the e-shop search button/addon */
#t4-header .eshop-search .add-on
{
    background: #f05305 !important;
}

/* Adds top margin to the large columns */
.col-lg-3
{
    margin-top: 10px;
}

/* Adjusts the top margin of the e-shop search bar */
#t4-header .eshop-search
{
    margin-top: 4px;
}

/* Adjusts the top margin of the items inside the e-shop cart link */
#t4-header #eshop-cart .eshop-items > a
{
    margin-top: 5px;
}

/* Slightly offsets multimedia elements to align properly */
audio, canvas, iframe, img, svg, video 
{
  margin-top: -5px;
}

/* Adjusts the top margin of the testimonial slider items */
.sppb-testimonial-pro .sppb-carousel-inner > .sppb-item
{
    margin-top: 3px;
}

/* Styles the back-to-top button (orange border, circular shape, layered on top) */
#back-to-top
{
    border: 2px solid #f05305;
    color: #f05305;
    background: none;
    border-radius: 50%;
    z-index: 99; 
}

/* Changes the icon color inside the back-to-top button */
#back-to-top i
{
    color: #f05305;
}

/* Maintains the button's style during active, focused, or hovered states */
#back-to-top:active, #back-to-top:focus, #back-to-top:hover {
    background: none;
    color: #f05305;
    border: 2px solid #f05305;
}

/* Changes the background color of social icons on hover in position 2 */
#t4-position-2 .t4-module .social-icons:hover 
{
  background: #f05305;
}

/* Positions and aligns the Mailchimp embedded subscribe button */
mc-embedded-subscribe
{
    padding-right: 12px;
    padding-left: 12px;
    margin-left: 185px;
    margin-top: -37px;
}

/* Sets the background and border color for the primary buttons to orange */
.btn.btn-primary {
  background-color: #f05305;
  border-color: #f05305;
}

/* Changes the primary button colors to a darker orange on hover */
.btn.btn-primary:hover {
  background-color: #d74a04;
  border-color: #d74a04;
}

/* Uses flexbox layout for input groups/append containers */
.input-append
{
    display: flex;
}

/* Sets the text color of module titles in the footer navigation to white */
.t4-footnav .t4-module .module-title span
{
    color: #fff;
}

/* Changes footer navigation links to orange on active, focus, or hover states */
#t4-footnav .t4-module ul > li > a:active, #t4-footnav .t4-module ul > li > a:focus, #t4-footnav .t4-module ul > li > a:hover 
{
  color: #f05305;
}

/* Adds a solid orange top border to the t4-position-2 section */
#t4-position-2
{
    border-top: 3px #f05305 solid;
}

/* Styles H3 headings with a specific font size, gray color, and top margin adjustment */
h3, .h3 
{
  font-size: 17px;
  color: rgb(110, 109, 109);
  margin-top: -2px;
}

/* Resets the top margin for large columns */
.col-lg-3 
{
  margin-top: 0px;
}

/* Styles H4 elements with orange text, borders, custom padding, and margins */
.h4
{
    color: #f05305;
    margin-top: 20px;
    display: inline-block;
    border: 1px solid;
    padding: 10px;
}

/* Adds an underline effect to the 'perissotera' (read more) link on hover */
#perissotera:hover 
{
    text-decoration: underline;
}

/* Adds an underline effect to links inside this specific SP Page Builder addon */
#sppb-addon-9a1694b5-fc18-478d-8fc8-aa825b0f05c6 a:hover
{
    text-decoration: underline;
}

/* Underlines and turns links orange inside the 'info_vivliopazaro' section on hover */
#info_vivliopazaro a:hover
{
    text-decoration: underline;
    color: #f05305;
}

/* Centers text and layout content inside large columns within the header, adding a top margin */
#t4-header .col-lg-3 {
    text-align: center;
    align-content: center;
    margin-top: 8px;
}


/* Adds an underline effect to links inside this specific SP Page Builder addon on hover */
#sppb-addon-224e8099-adb0-4022-a8ad-0a0891f57318 a:hover
{
    text-decoration: underline;
}

/* Sets a custom reddish-orange text color for links inside this specific SP Page Builder addon */
#sppb-addon-b6dcd896-b2a2-4c08-bb30-6034f7e374ab a {
color: #e03f04;
}

/* Changes link color to a darker red and adds an underline effect on hover for this specific SP Page Builder addon */
#sppb-addon-b6dcd896-b2a2-4c08-bb30-6034f7e374ab a:hover {
color: #952a03;
text-decoration: underline;
}

/* Underlines links inside module 96 on hover */
#Mod96 a:hover {
    text-decoration: underline;
}

/* Underlines text and forces a reddish-orange color when hovering over the 'info_vivliopazaro' element */
#info_vivliopazaro:hover {
    text-decoration: underline;
    color: #e03f04 !important;
}

/* Underlines links inside this specific SP Page Builder addon on hover */
#sppb-addon-b6b5731e-c5f5-4785-8bf8-9976bea03d24 a:hover
{
    text-decoration: underline;
}

/* Underlines links inside this specific SP Page Builder addon on hover */
#sppb-addon-afc03920-b5c8-414d-b928-4083929b83c6 a:hover
{
    text-decoration: underline;
}

/* Underlines links inside this specific SP Page Builder addon on hover */
#sppb-addon-086c475a-3aa1-4035-b6fe-929d924c7f69 a:hover
{
    text-decoration: underline;
}

/* Adds a solid orange bottom border to the main menu container and sets a high stacking order */
#t4-main-menu {
     border-bottom: 1px #f05305 solid;
    z-index: 99;
}

/* Forces the text color to white when hovering over main menu item titles */
#t4-main-menu.menu-item-title a:hover {
color: #fff !important;

}

/* Sets the font family to Arial for the e-shop product search input fields */
#t4-header .eshop-search .product_search
{
    font-family: Arial;
}

/* Changes the text color of spans inside dropdown items to orange on hover */
.dropdown-item:hover span{

    color: #f05305;
}

/* Changes the color of icons inside dropdown items to orange on hover */
.dropdown-item:hover icon{

    color: #f05305;
}

/* Forces dropdown menu links inside the T4 Megamenu to turn orange on hover */
.t4-megamenu .dropdown-menu li a:hover {
    color: #f05305 !important;
}

/* Grid Layout: Distributes the 4 footer columns equally (25% width each) on large screens and adds custom padding */
.t4-col.footer-1.col-12.col-sm-6.col-md-4.col-lg-3 {
    width: 25%;
}

.t4-col.footer-2.col-12.col-sm-6.col-md-4.col-lg-2 {
    width: 25%;
    padding-left: 5%;
}
.t4-col.footer-3.col-sm.col-md-3 {
    width: 25%;
    padding-left: 2.5%;
}
.t4-col.footer-4.col-sm.col-md-4 {
    width: 25%;
}

/* Sets the font family to Arial for module titles within the footer navigation */
.t4-footnav .t4-module .module-title span
{
    font-family: arial;
}

/* Mobile Responsive Styles: Applied on screens with a maximum width of 767px */
@media (max-width:767px) {

#t4-footnav.t4-section.t4-footnav .t4-row.row{
    flex-direction: column ;
}
.t4-col.footer-1.col-12.col-sm-6.col-md-4.col-lg-3 {
    width: 100%;
}
.t4-col.footer-2.col-12.col-sm-6.col-md-4.col-lg-2 {
    width: 100%;
}
.t4-col.footer-3.col-sm.col-md-3 {
    width: 100%;
}
.t4-col.footer-4.col-sm.col-md-4 {
    width: 100%;
}
}

/* Adds an underline effect to links inside this specific SP Page Builder addon on hover, focus, or active states */
#sppb-addon-f69236c2-d5dd-442a-9785-991675241cbf a:hover, #sppb-addon-f69236c2-d5dd-442a-9785-991675241cbf a:focus, #sppb-addon-f69236c2-d5dd-442a-9785-991675241cbf a:active
{
  text-decoration: underline;
}

/* Sets the default font family to Arial for row layout components */
.row
{
    font-family: Arial, Helvetica, sans-serif;
}

/* Sets the font family to Arial for H4 headings */
h4
{
    font-family: Arial, Helvetica, sans-serif;
}

/* Sets the font family to Arial for radio buttons and labels in the E-shop checkout view */
.com_eshop.view-checkout .radio, .com_eshop.view-checkout label
{
    font-family: Arial, Helvetica, sans-serif;
}


/* Adds a left margin to the colorbox popup element */
.colorbox.cboxElement
{
    margin-left: 23px;
}

/* Adjusts the top margin of payment information columns to shift them upwards */
.eshop-payment-information .col-md-3, .eshop-payment-information .col-md-9
{
    margin-top: -21px;
}

/* Adds space below the shopping cart table layout */
.cart-info .table-responsive 
{
    margin-bottom: 40px;
}

/* Sets a dark gray background color for the checkout section headings */
.checkout-heading
{
    background: #474545;
}

/* Defines a global CSS variable for the primary brand color (orange) */
:root
{
    --color-primary: #f05305;
}

/* Fine-tunes the top margin of checkboxes and radio inputs for better alignment */
.checkbox input[type="checkbox"], .checkbox input[type="radio"], .radio input[type="checkbox"], .radio input[type="radio"]
{
    margin-top: 1px;
}

/* adds a dark grey border around the eshop radio buttons to make them more visible */
.com_eshop.view-checkout input[type="radio"] {
    border: 2px solid #777777 !important;
}

/* Sets the font family to Arial for H1 headings */
h1
{
    font-family: Arial, Helvetica, sans-serif;
}

/* Resets the left margin for checkbox labels */
label.checkbox
{
    margin-left: 0px;
}

/* Adjusts the left margin of form-check inputs for spacing */
input.form-check-input
{
    margin-left: 4px;
}

/* Adds a specific left margin to the colorbox link elements */
a.colorbox.colorbox.cboxElement
{
    margin-left: 30px;
}

/* Styles active or selected Joomla backend tabs with a white background and orange text */
joomla-tab button[role="tab"][aria-expanded="true"], joomla-tab button[role="tab"][aria-selected="true"]
{
    background-color: #fff;
    color: #f05305;
}

/* Sets a light gray background and border color for secondary buttons */
.btn.btn-secondary
{
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}

/* Darkens the background and border color of secondary buttons on hover */
.btn.btn-secondary:hover
{
    background-color: #e6e6e6;
    border-color: #e6e6e6;
}

/* Forces the icon color to black inside read-more links and secondary buttons within blog lists */
.blog-list .item-readmore .buttons-info a [class^="icon-"], .buttons-info .blog-list .item-readmore a [class^="icon-"], .buttons-info .btn [class^="icon-"] 
{
    color: #000;
}

/* Sets the text color to black for various navigation, filtering, and secondary buttons in the blog view */
.blog-list .item-readmore .js-stools-container-bar a, .blog-list .item-readmore .tag-category .filters .btn-group a, .btn-secondary, .js-stools-container-bar .blog-list .item-readmore a, .js-stools-container-bar .btn, .tag-category .filters .btn-group .blog-list .item-readmore a, .tag-category .filters .btn-group .btn
{
    color: #000;
}

/* Overrides the T4 framework CSS variable to maintain black text color when hovering over blog and filter buttons */
.blog-list .item-readmore .js-stools-container-bar a, .blog-list .item-readmore .tag-category .filters .btn-group a, .btn-secondary, .js-stools-container-bar .blog-list .item-readmore a, .js-stools-container-bar .btn, .tag-category .filters .btn-group .blog-list .item-readmore a, .tag-category .filters .btn-group .btn:hover
{
    --t4-btn-hover-color: #000;
}


/* Sets the font family for the Colorbox modal content windows */
#colorbox #cboxContent #cboxLoadedContent
{
    font-family: arial;
}


/* Lower the z-index priority of E-shop products 
      so they do not overlay or "pierce" through the white container */
.eshop-product-block,
.com_eshop .row,
.com_eshop div[class*="col-"] {
    position: relative !important;
    
}


 /* 1. Style the entire menu zone with a dark grey background and span it to full width */
#t4-section-2 {
    background-color: #474545 !important; /* Το σκούρο γκρι χρώμα */
    border-bottom: 3px #f05305 solid !important; /* Η πορτοκαλί γραμμή από κάτω */
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 99999 !important; /* Φέρνει το μενού πάνω από τα προϊόντα */
}


/* Reset the submenu text color back to a dark shade */
#t4-section-2 .navbar-nav > li.active .dropdown-menu a,
#t4-section-2 .navbar-nav > li.active .dropdown-menu .menu-item-title,
#t4-section-2 .navbar-nav > li.active .dropdown-menu .mega-col-title,
#t4-section-2 .dropdown-menu .menu-item-title {
    color: #808080; /* Επαναφέρει το σκούρο γκρι/μαύρο στα υπομενού */
    background-color: transparent !important; /* Απαγορεύει το πορτοκαλί μέσα στο λευκό πλαίσιο */
}


/* Targets all links and titles INSIDE dropdowns on hover */
#t4-section-2 .dropdown-menu a:hover,
#t4-section-2 .dropdown-menu a:hover .menu-item-title,
#t4-section-2 .dropdown-menu .mega-col-title:hover,
#t4-section-2 .navbar-nav > li.active .dropdown-menu a:hover,
#t4-section-2 .navbar-nav > li.active .dropdown-menu a:hover .menu-item-title {
    color: #f05305 !important; /* turns the text orange on hover */
    background-color: transparent !important; /* Keeps background transparent without orange boxes */
}


/*when any sub menu is active it is orange*/
#t4-section-2 .navbar-nav > li.active .dropdown-menu li.active > a,
#t4-section-2 .navbar-nav > li.active .dropdown-menu li.active > a .menu-item-title {
    color: #f05305 !important;
}


/* --- SEARCH ICON COLOR ADJUSTMENTS (.escm-btn) --- */

/* 1. Makes the actual icon (magnifying glass) white */
.escm-btn i, 
.escm-btn span,
.escm-btn [class^="icon-"] {
    color: #fff !important;
}

/* 2. Adjusts the button background to make sure the white icon stands out */
#t4-header .eshop-search .escm-btn,
.eshop-search .escm-btn {
    background-color: #d74a04 !important; /* button background color */
    border: 1px solid #ced4da !important;  /* light grey border */
    border-left: none !important;          /*  Removes inner border to blend seamlessly with the input field */
}

/* 3. Search button hover effect */
.escm-btn:hover i {
    color: #fff !important; /* Keeps the icon white on hover */
}



/* Sets font family, size, and weight for the Search Filters module title */
.module-title,
.module-title h3,
.module-title span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold !important;
}


/* Active link styling inside the main navigation dropdown menu */
.t4-palette-mainnav .dropdown-menu li.active > a

/* Forces all text within the Nmenu class to be bold, black, and 15px */
.Nmenu,
.Nmenu * {
    color: #000 !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

/* Makes the text bold in the dropdown menu links */
.t4-megamenu .dropdown-menu li a {
    color: #000;
    font-weight: bold !important;
}



/*Reset all margins and paddings for the header to clear T4's default spacing and apply custom ones later.*/
#t4-header, 
#t4-section-2, 
#t4-section-2 .navbar,
#t4-header .container, 
#t4-section-2 .container,
.t4-header .container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;      /* Εξαφανίζει το default 1.15rem του T4 */
    padding-bottom: 0 !important;   /* Εξαφανίζει το default 1.15rem του T4 */
}

/* forcing all of the outer list items to align in the center */
#t4-section-2 .navbar-nav > li {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: top !important;
}

/* keeps the open dropout menu from moving upward due to display: inline-flex that modifies all of its behavior */
#t4-section-2 .navbar-nav > li .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    transform: none !important;
}

/* adding the new paddings */
/* because of the T4 framework assigning different spacing to different menu item types. */
/* this ensures that the links are going to have the same height and spacing */
#t4-section-2 .navbar-nav > li > .nav-link,
#t4-section-2 .t4-megamenu .navbar-nav > li > .nav-link {
    padding-top: 15px !important;  
    padding-bottom: 15px !important;
    margin-top: 0 !important;   
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    height: auto !important;
}

/* Changes background to grey and text color to white upon hover of a menu item */
#t4-section-2 .navbar-nav > li:hover > .nav-link,
#t4-section-2 .navbar-nav > li > .nav-link:hover {
    background-color: #222534 !important; 
    color: #ffffff !important;
    margin-top: 0 !important;       
    margin-bottom: 0 !important;
}

/*Changes background to orange and text color to white when inside an active menu item */
#t4-section-2 .navbar-nav > li.active > .nav-link.dropdown-toggle,
#t4-section-2 .navbar-nav > li.active > .nav-link,
#t4-section-2 .navbar-nav > li.current > .nav-link {
    background-color: #f05305 !important;
    color: #ffffff !important;
    margin-top: 0 !important;       
    margin-bottom: 0 !important;
}

/* inverts the symbol that is the arrow of the dropout menu to white */
#t4-section-2 .navbar-nav .item-caret,
#t4-section-2 .navbar-nav .dropdown-toggle::after {
    filter: brightness(0) invert(1) !important;
}