/* Force a Greek-friendly font stack everywhere */
html,
body {
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
p, li, a, span, div {
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}



button,
input,
textarea,
select {
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}



body {
  background-image: none !important;
  background-color: #f2f2f2;
}


/* ==========================================================
   STOP CHROME FROM BREAKING GREEK WORDS (global override)
   Put this at the VERY END of your CSS file.
   ========================================================== */

html, body {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Extra safety for Drupal content + webforms */
.node__content,
.block__content {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

.main-content__container {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main,
#main-wrapper,
.region-content {
  flex: 1;
}

footer,
.site-footer {
  margin-top: auto;
  padding-top: 10px;
    padding-bottom: 10px;
}

.page-wrapper{
background-color: #f2f2f2;
}

.social-bar {
  background: #fff;
 
}

a:focus,
button:focus,
button:focus-visible,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

*:focus {
  outline: none !important;
  box-shadow: none !important;
}
*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.text-content a:not(.button):hover,
.cke_editable a:not(.button):hover {
  text-decoration: none !important;
  color: initial ;
  box-shadow: none !important;
}

.text-content a:not(.button),
.cke_editable a:not(.button) {
  text-decoration: none !important;
}

/* Hide only the first column of the installations composite table on preview */
.webform-preview #aitisis_eggrafis--stoiheia_egkatastaseon_simeion_metrisis > .form-item__label + .tableresponsive-toggle-columns + table thead th:first-child,
.webform-preview #aitisis_eggrafis--stoiheia_egkatastaseon_simeion_metrisis > .form-item__label + .tableresponsive-toggle-columns + table tbody td:first-child {
  display: none !important;
}





.site-branding {
background: linear-gradient(180deg, #fff 0%, #fff 100%);
align-items: center;
border-radius: 0 0 20px;
}

.site-header__fixable.is-fixed.is-expanded .site-branding {
align-items: flex-end;
}

.site-header__initial {
background: linear-gradient(180deg, #2a6a60d6 0%, #215b52 100%);
}


.sticky-header-toggle {
  background: linear-gradient(180deg, #2a6a60d6 0%, #215b52 100%);
}

.site-header__fixable.is-fixed .sticky-header-toggle {
border-radius: 0 0 15px;
}

.site-header__fixable.is-fixed .site-header__initial {
border-radius: 0 0 15px;
}

.site-header__fixable.is-expanded .sticky-header-toggle{
    border-radius: 0px;
}
.site-header__fixable.is-expanded .site-header__initial{
    border-radius: 0px;
}

/* Olivero primary nav: remove click/focus ring AND tap highlight */
.primary-nav__menu .primary-nav__menu-link,
.primary-nav__menu .primary-nav__menu-link-inner {
  -webkit-tap-highlight-color: transparent !important; /* mobile blue flash */
}

/* Kill outline + box-shadow on link and inner span */
.primary-nav__menu .primary-nav__menu-link:focus,
.primary-nav__menu .primary-nav__menu-link:focus-visible,
.primary-nav__menu .primary-nav__menu-link:active,
.primary-nav__menu .primary-nav__menu-link-inner:focus,
.primary-nav__menu .primary-nav__menu-link-inner:focus-visible,
.primary-nav__menu .primary-nav__menu-link-inner:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Also kill any pseudo-element rings Olivero might draw */
.primary-nav__menu .primary-nav__menu-link:focus::before,
.primary-nav__menu .primary-nav__menu-link:focus-visible::before,
.primary-nav__menu .primary-nav__menu-link:active::before,
.primary-nav__menu .primary-nav__menu-link:focus::after,
.primary-nav__menu .primary-nav__menu-link:focus-visible::after,
.primary-nav__menu .primary-nav__menu-link:active::after {
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
}
/* Readability overlay + image */


/* ==========================================================
   FRONT PAGE HERO — solid text panel + big image column
   ========================================================== */

.lefk-home-hero .lefk-hero {
  --hero-image: url("/sites/default/files/2026-02/lefkothea_back_img.jpg");
  --hero-radius: 18px;
  --hero-min-h: clamp(520px, 65vh, 820px);

  --panel-bg: #f6f8f7;
  --panel-pad-x: clamp(24px, 6vw, 80px);
  --panel-pad-y: clamp(28px, 6vw, 80px);

  --title-color: #0b1f1a;
  --lead-color: #23423a;

  display: grid;
  grid-template-columns: minmax(560px, 0.95fr) minmax(520px, 1.25fr);
  min-height: var(--hero-min-h);

  border-radius: var(--hero-radius);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.lefk-home-hero .lefk-hero__inner {
  grid-column: 1;
  background: var(--panel-bg);
  padding: var(--panel-pad-y) var(--panel-pad-x);

  display: flex;
  flex-direction: column;
  justify-content: center;

  max-width: 70ch;
}

.lefk-home-hero .lefk-hero::after {
  content: "";
  grid-column: 2;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.95) contrast(0.98) brightness(0.98);
}

.lefk-home-hero .lefk-hero__title{
  color: var(--title-color);
  font-size: clamp(1.85rem, 2.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.lefk-home-hero .lefk-hero__lead {
  color: var(--lead-color);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  margin: 0 0 22px;
}

.lefk-home-hero .lefk-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  align-items: stretch; /* important */
}

.lefk-home-hero .lefk-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.01em;

  min-height: 48px;   /* same height */
  min-width: 250px;   /* same width */
  box-sizing: border-box;
}

/* Responsive: stack */
@media (max-width: 1024px) {
  .lefk-home-hero .lefk-hero {
    grid-template-columns: 1fr;
   grid-template-rows: 400px auto;


  }

  .lefk-home-hero .lefk-hero::after {
    grid-column: 1;
    grid-row: 1;
  }

  .lefk-home-hero .lefk-hero__inner {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    padding: 28px 18px;
  }
}

@media (max-width: 768px) {
    .lefk-home-hero .lefk-hero {
        grid-template-columns: 1fr;
        grid-template-rows: 300px auto;
    }
}

.site-header__inner {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
   background-color: unset;
}

.header-nav {
  position: fixed;
  z-index: 501;
  inset-block-start: 0;
  inset-inline-start: 100%;
  overflow: auto;
  flex-basis: max-content;
  width: 100%;
  max-width: var(--mobile-nav-width);
  height: 100%;
  padding-block: 0 var(--sp);
  padding-inline-start: var(--sp);
  padding-inline-end: var(--sp);
  border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
  background-color: unset;
  box-shadow: none;
}

.path-frontpage .header-nav.is-active {
  background-color: #fff;
}



.is-expanded .site-header__inner {
  background: var(--color--white);
  box-shadow:none!important;
  border-radius: 0 0 15px;
}

  
.page-wrapper {
  max-width: none;
}

.page-title {
  display: none;
}

.mobile-nav-button:focus {
  outline: none;
}

a:focus {
  outline: none;
}

.primary-nav__menu-link:focus,
.primary-nav__menu-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


.region.region--breadcrumb.grid-full.layout--pass--content-medium {
  padding-bottom: 0px;
  max-height: 35px;
}


/* ===== Lefkothea: Full viewport hero (image background) ===== */





.lefk-home-hero .lefk-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%);
  box-shadow: 0 12px 28px rgba(33,91,82,0.22);
}

.lefk-home-hero .lefk-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(33,91,82,0.26);
  color: #fff!important;
}

.lefk-home-hero .lefk-btn--secondary {
  color: #153a36;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(21,58,54,0.20);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.lefk-home-hero .lefk-btn--secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(21,58,54,0.28);
  box-shadow: 0 16px 32px rgba(0,0,0,0.08);
  color: #153a36!important;
}

.lefk-home-hero .lefk-btn:focus-visible {
  outline: 3px solid rgba(44,110,99,0.35);
  outline-offset: 3px;
}


.site-footer {
  position: relative;
 background: #1F4F4A;
}

.site-footer__inner.container {
  padding: 0px;
}

.main-content__container.container{
    max-width:100%;
}

#block-lefkothea-footer {
  padding-bottom: 0px;
  margin-bottom: 0px;
}


/* Make the block span full row and align left/right */
.site-footer .region--footer-bottom .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  padding: 14px 0;
}

/* Text styles */
.site-footer .region--footer-bottom .footer-left {
  color:#fff;
  font-size:15px;
  line-height: 1.4rem;
}

.site-footer .region--footer-bottom .footer-right {
  color: #fff;
  text-align: right;
  font-size:15px;
  line-height: 1.4rem;
}

.site-footer .region--footer-bottom .footer-right a {
  color: #d7d7d7;
  text-decoration: none;
  font-weight: 500;
}

.site-footer .region--footer-bottom .footer-right a:hover {
  color: #fff;
}

.site-footer .region--footer-bottom .footer-center {
  color: #fff;
  text-align: center;
  font-size:15px;
  line-height: 1.4rem;
}

.site-footer .region--footer-bottom .footer-center a {
  color: #d7d7d7;
  text-decoration: none;
  font-weight: 500;
}
.site-footer .region--footer-bottom .footer-center a:hover {
  color: #fff;
}


.privacy-section {
    padding: 20px 20px 75px 20px;
    background: #fff;
    border-radius: 25px;
}
.privacy-list {
    padding-left: 20px;
}

.privacy-list li::marker {
    color: #2f6f63;
}

/* Mobile stack */
@media (max-width: 768px) {
  .site-footer .region--footer-bottom .footer-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .site-footer .region--footer-bottom .footer-right {
    text-align: center;
  }
  
}




#block-lefkothea-breadcrumbs {
  margin-bottom: 0px;
}


.about-section {
padding: 20px 20px 75px 20px;
  background: #fff;
  border-radius: 25px;
}

.about-hero {

}

.breadcrumb__content {
  padding-left: 13px;
}

.about-title {
  margin-bottom: 40px;
  color: #2f6f63;
}
.privacy-title {
  margin-bottom: 40px;
  color: #2f6f63;
}

.titlecustom{
  color: #2f6f63;
  font-size: 2.25rem;
  font-weight:700;
  margin-top:-35px;
}

.titlecustom h2{
  color: #2f6f63;

}

.about-subtitle {
  font-size: 18px;
  color: #3f8c7a;
}



.section-title {
  font-size: 26px;
  margin-bottom: 25px;
  color: #2f6f63;
}

.section-content p {
  margin-bottom: 20px;
  line-height: 1.7;
  color: #333;
}

.section-lead {
  margin-bottom: 25px;
  font-weight: 500;
}

.benefits-list {
  padding-left: 20px;
}

.benefit-item {
  margin-bottom: 15px;
  line-height: 1.6;
}



.progress-tracker {
  display: flex;
  margin: 40px 0 20px 0;
  padding: 0;
  list-style: none;
}


.faq-section {
padding: 20px;
  background: #fff;
  border-radius: 25px;
}

.faq-title {

  margin-bottom: 40px;
  color: #2f6f63;
}

.faq-item {
  border-bottom: 1px solid #e0e6e4;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e2a28;
  cursor: pointer;
  position: relative;
  padding-right:30px;
}

.faq-icon {
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border-right: 2px solid #3f8c7a;
  border-bottom: 2px solid #3f8c7a;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
}
/* Base icon = closed (chevron down) */
.faq-question .faq-icon{
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  border-right: 2px solid #3f8c7a;
  border-bottom: 2px solid #3f8c7a;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
}

/* Open icon = chevron up */
.faq-question[aria-expanded="true"] .faq-icon,
.faq-item:has(.faq-answer.is-open) .faq-icon{
  transform: translateY(-50%) rotate(-135deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding-right: 40px;
  padding: 0 40px 0 0;
}

.faq-answer.is-open {
  padding: 15px 40px 25px 0;
}

.faq-answer p {
  margin-bottom: 15px;
  line-height: 1.7;
  color: #444;
}

.faq-list-points {
  padding-left: 20px;
  margin-bottom: 15px;
}


.faq-item:last-child {
  border-bottom: none;
}

.breadcrumb::after {
    background: none;
}

.site-footer__inner.container{
    max-width:100%;
}
  

/* ==========================================================
   CONTACT PAGE ONLY — scoped by DOM content (no body classes)
   Survives AJAX because we target the stable AJAX wrapper
   ========================================================== */

/* 1) Apply 2-column layout ONLY when this wrapper contains:
   - .contact-intro (left)
   - the webform ajax wrapper (right) */
.node__content.layout--content-narrow:has(.contact-intro):has(#webform-submission-contact-node-10-form-ajax) {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(420px, 1fr);
  gap: 48px;
  align-items: start;
}

/* left column */
.node__content.layout--content-narrow:has(.contact-intro):has(#webform-submission-contact-node-10-form-ajax)
  > .field--name-field-webform-content {
  grid-column: 1;
}

/* right column */
.node__content.layout--content-narrow:has(.contact-intro):has(#webform-submission-contact-node-10-form-ajax)
  > .field--name-webform {
  grid-column: 2;
}

/* Mobile stacking */
@media (max-width: 900px) {
  .node__content.layout--content-narrow:has(.contact-intro):has(#webform-submission-contact-node-10-form-ajax) {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .node__content.layout--content-narrow:has(.contact-intro):has(#webform-submission-contact-node-10-form-ajax)
    > .field--name-field-webform-content,
  .node__content.layout--content-narrow:has(.contact-intro):has(#webform-submission-contact-node-10-form-ajax)
    > .field--name-webform {
    grid-column: 1;
  }
}

/* ==========================================================
   LEFT CONTACT BLOCK
   ========================================================== */
.node__content.layout--content-narrow .contact-title {
  margin: 0 0 12px;
  
  color: #2f6f63;
}

.contact-intro a.contact-email,
.contact-intro a.contact-email:link,
.contact-intro a.contact-email:visited,
.contact-intro a.contact-email:hover,
.contact-intro a.contact-email:focus,
.contact-intro a.contact-email .email,
.contact-intro a.contact-email .email:hover,
.contact-intro a.contact-email .email:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}



.node__content.layout--content-narrow .contact-note {
  margin: 0 0 22px;
  max-width: 46ch;
}

.node__content.layout--content-narrow .contact-details {
  margin-top: 14px;
}

.node__content.layout--content-narrow .contact-line {
  margin: 0 0 14px;
}

.node__content.layout--content-narrow .contact-email .email {
  position: relative;
  padding-left: 34px;
  font-weight: 600;
}

.node__content.layout--content-narrow .contact-email .email::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  opacity: 0.95;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 6.75C4 5.784 4.784 5 5.75 5h12.5C19.216 5 20 5.784 20 6.75v10.5c0 .966-.784 1.75-1.75 1.75H5.75C4.784 19 4 18.216 4 17.25V6.75Z' stroke='%231f6f5b' stroke-width='1.8'/%3E%3Cpath d='M5.5 7.25 12 12l6.5-4.75' stroke='%231f6f5b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Make sure both links actually render like text (Olivero sometimes does inline-block quirks) */
.node__content.layout--content-narrow .contact-details a {
  display: inline-block;
  color: inherit;
}

/* PHONE: mirror the email styling pattern */
.node__content.layout--content-narrow .contact-phone .phone {
  position: relative;
  padding-left: 34px;
  font-weight: 600;
}

/* Phone icon (same size + color system as email icon) */
.node__content.layout--content-narrow .contact-phone .phone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  opacity: 0.95;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10.5a14 14 0 006.5 6.5l2-2a1.2 1.2 0 011.2-.3c1 .3 2 .5 3 .5a1.3 1.3 0 011.3 1.3V20a1.3 1.3 0 01-1.4 1.3C10.5 21.3 2.7 13.5 2.7 4.4A1.3 1.3 0 014 3h3.2A1.3 1.3 0 018.5 4.3c0 1 .2 2 .5 3a1.2 1.2 0 01-.3 1.2l-1.7 2Z' stroke='%231f6f5b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
}

/* Keep your "no underline / no background tricks" for phone too */
.contact-intro a.contact-phone,
.contact-intro a.contact-phone:link,
.contact-intro a.contact-phone:visited,
.contact-intro a.contact-phone:hover,
.contact-intro a.contact-phone:focus,
.contact-intro a.contact-phone .phone,
.contact-intro a.contact-phone .phone:hover,
.contact-intro a.contact-phone .phone:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ==========================================================
   FORM CARD — target the stable AJAX wrapper, not the dynamic form id
   ========================================================== */
#webform-submission-contact-node-10-form-ajax {
  padding: 40px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Keep form fields styling inside the wrapper (works before/after AJAX) */
#webform-submission-contact-node-10-form-ajax .js-form-item {
  margin: 0 0 16px;
}

#webform-submission-contact-node-10-form-ajax .form-item__label {
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
}

#webform-submission-contact-node-10-form-ajax input.form-text,
#webform-submission-contact-node-10-form-ajax input.form-email,
#webform-submission-contact-node-10-form-ajax textarea.form-textarea {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 14px 14px;
  font-size: 16px;
  outline: none;
  background: #fff;
}

#webform-submission-contact-node-10-form-ajax input.form-text:focus,
#webform-submission-contact-node-10-form-ajax input.form-email:focus,
#webform-submission-contact-node-10-form-ajax textarea.form-textarea:focus {
  border-color: rgba(31,111,91,0.45);
  box-shadow: 0 0 0 4px rgba(31,111,91,0.12);
}

#webform-submission-contact-node-10-form-ajax textarea.form-textarea {
  min-height: 170px;
}

#webform-submission-contact-node-10-form-ajax .form-actions {
  margin-top: 10px;
}

#webform-submission-contact-node-10-form-ajax .webform-button--submit.button--primary {
  color: #fff;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%);
  box-shadow: 0 12px 28px rgba(33,91,82,0.22);
  border: 0;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
  will-change: transform;
}

#webform-submission-contact-node-10-form-ajax .webform-button--submit.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(33,91,82,0.26);
  color: #fff !important;
}

/* Required mark color (Olivero SVG) — scoped */
#webform-submission-contact-node-10-form-ajax .form-item__label.form-required::after {
  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%231f6f5b'/%3E%3C/svg%3E");
}

/* Inline errors */
#webform-submission-contact-node-10-form-ajax .form-item--error-message {
  color: #b91c3c;
  font-size: 14px;
  margin-top: 6px;
  font-weight: 500;
}
.fieldset__error-message {
    margin-block: var(--sp0-5);
    padding-inline-start: var(--sp1-5);
    background-image: url(data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: var(--sp1) var(--sp1);
    line-height: var(--line-height-s);
    color: #b91c3c;
    font-size: 14px;
    margin-top: 6px;
    font-weight: 700;
}

#webform-submission-contact-node-10-form-ajax input.error,
#webform-submission-contact-node-10-form-ajax textarea.error {
  border-color: rgba(185, 28, 60, 0.6);
  box-shadow: 0 0 0 4px rgba(185, 28, 60, 0.12);
}

/* ==========================================================
   MODAL CONFIRMATION — keep it, but stop Olivero "messages" style from uglifying it
   (this will apply sitewide for webform modals, which is what you want)
   ========================================================== */

/* Make the webform modal message look like your design, not Olivero black bar */
.webform-confirmation-modal .messages.messages--status {
  background: #fff !important;
  color: #111 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(31,111,91,0.22) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22) !important;
}

/* Title inside modal */
.webform-confirmation-modal .webform-confirmation-modal--title {
  color: #1f6f5b;
  font-weight: 800;
}

/* Remove Olivero underline tricks inside the modal */
.webform-confirmation-modal a {
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}


/* ==========================================================
   Webform confirmation modal (jQuery UI dialog)
   Nice styling + close button ALWAYS visible
   No message overrides (content stays from the form)
   ========================================================== */

/* Backdrop overlay */
.ui-widget-overlay.ui-front {
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 1 !important;
}

/* Modal shell */
.ui-dialog.webform-confirmation-modal {
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.28) !important;
  overflow: hidden !important;
}

/* Titlebar */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar {
  border: 0 !important;
  background: linear-gradient(180deg, rgba(44,110,99,0.10) 0%, rgba(44,110,99,0.04) 100%) !important;
  padding: 18px 58px 14px 20px !important; /* space for close */
}

/* Title text (comes from the form) */
.ui-dialog.webform-confirmation-modal .ui-dialog-title {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  color: #2f6f63 !important;
}

/* Content (comes from the form) */
.ui-dialog.webform-confirmation-modal .ui-dialog-content {
  padding: 16px 20px 20px !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: rgba(17,17,17,0.92) !important;
}

/* =========================
   Close button: guaranteed X
   ========================= */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close {
  position: absolute !important;

  right: 12px !important;

  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 12px !important;

  background-color: #fff !important;

  /* Draw our own X (always visible) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%232f6f63' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;

  box-shadow: 0 10px 22px rgba(0,0,0,0.10) !important;

  cursor: pointer !important;
  opacity: 1 !important;
}

/* Hide jQuery UI icon sprite so it can't conflict */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon,
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none !important;
}

/* Hover/focus */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.14) !important;
  border-color: rgba(44,110,99,0.35) !important;
}

.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(31,111,91,0.14), 0 14px 28px rgba(0,0,0,0.12) !important;
}





.form-item-megethos-epiheirisis .form-item__description {
  max-width: 100%;
}
.webform-progress-tracker .progress-title {
  font-size: 0.9rem;
  line-height: 1.3rem;
}
.webform-progress-tracker .progress-title {
  color: #245f56;
  font-size: 0.9rem;
  line-height: 1.3rem;
}
.progress-step.is-active .progress-marker::before {
  background-color: #245F56;
}
.webform-progress-tracker .progress-title[role="link"] {
  color: #245f56;
}
.webform-progress-tracker .progress-step.is-complete:hover .progress-marker[role="link"]::before {
  background-color: #245f56;
}
.webform-progress-tracker .progress-step.is-active:hover .progress-marker::before {
  background-color: #246057;
}



/* ==========================================================
   LEFKOTHEA — WEBFORM MODERN SKIN (Wizard + Progress + Composite)
   ========================================================== */

/* ---------- Design tokens ---------- */
:root{
  --lefk-bg: #f2f2f2;
  --lefk-card: #ffffff;
  --lefk-border: rgba(0,0,0,0.10);
  --lefk-border-soft: rgba(0,0,0,0.06);
  --lefk-border-strong: rgba(31,111,91,0.22);

  --lefk-text: rgba(17,17,17,0.92);
  --lefk-muted: rgba(17,17,17,0.68);

  --lefk-green: #2f6f63;
  --lefk-green-dark: #215b52;

  --lefk-radius-lg: 18px;
  --lefk-radius-md: 12px;

  --lefk-shadow: 0 10px 30px rgba(0,0,0,0.06);
  --lefk-shadow-strong: 0 14px 38px rgba(0,0,0,0.10);
}

/* ==========================================================
   WIZARD PROGRESS — white rounded card + modern steps
   HTML: .webform-progress -> ul.webform-progress-tracker -> li.progress-step
   ========================================================== */

/* The whole progress block becomes a "card" */
.webform-submission-form .webform-progress{
  background: var(--lefk-card);
  border: 1px solid ;
  border-radius: var(--lefk-radius-lg);
  box-shadow: var(--lefk-shadow);
  margin-bottom:80px;
  border: solid 2px var(--color--gray-45);
}

.webform-section-title {
  padding-left: 10px;
  font-size: 1.8rem;
}

.webform-multiple-table td input[type="image"] + input[type="image"] {
  margin-top: 10px;
  margin-left:0px!important;
}






.webform-submission-form .form-item__label {
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--lefk-text);
}

#stoiheia_egkatastaseon_simeion_metrisis_table .fieldset__label
{
  display: block;
  white-space: normal !important
  font-weight: 700;
  color: #fff;  
  font-size:14px;
}


.webform-multiple-table td input[type="image"] {
  display: flex;
  border: 2px solid #246056;
}

/* Status line */
.webform-submission-form .webform-progress__status{
  margin-top: 12px;
  padding-top: 10px;
  padding-bottom:10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: var(--lefk-muted);
  font-weight: 650;
}

.webform-submission-form .webform-progress__summary{
  color: var(--lefk-green);
  font-weight: 800;
}

.webform-submission-form .webform-progress__percentage{
  color: var(--lefk-muted);
}


/* ==========================================================
   WIZARD PAGES — modern white rounded cards
   ========================================================== */

.webform-submission-form{
  background: transparent;
}

.webform-submission-form .webform-wizard-pages,
.webform-submission-form .webform-wizard-page,
.webform-submission-form .webform-wizard-page > .form-wrapper{
  background: transparent;
}

/* Each wizard page = card */
.webform-submission-form .webform-wizard-page{
  background: var(--lefk-card);
  border-radius: var(--lefk-radius-lg);
  box-shadow: var(--lefk-shadow);
  padding: 34px;
  border: 1px solid var(--lefk-border-soft);
  margin-bottom: 22px;
}

/* Add consistent spacing between fields/blocks */
.webform-submission-form .webform-wizard-page .js-form-item,
.webform-submission-form .webform-wizard-page .form-item{
  margin: 0 0 16px;
}

/* Titles */
.webform-submission-form .webform-wizard-page .webform-wizard-page-title,
.webform-submission-form .webform-wizard-page h2,
.webform-submission-form .webform-wizard-page h3{
  color: var(--lefk-green);
  letter-spacing: -0.01em;
}

/* Fieldsets/sections */
.webform-submission-form fieldset{
  background: #fff;
  border-radius: var(--lefk-radius-lg);
}

.webform-submission-form fieldset > legend{
  padding: 8px 8px;
  color: var(--lefk-green);
  font-weight: 700;
    white-space: normal !important

}

/* ==========================================================
   Webform managed file: force "Αφαίρεση" to a new line (mobile)
   ========================================================== */
   .webform-submission-form .js-form-managed-file{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.webform-submission-form .js-form-managed-file .webform-document-file-placeholder{
  flex-basis: 100%;
}

/* Filename block can wrap */
.webform-submission-form .js-form-managed-file .file{
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;                 /* stops visual spill */
  white-space: normal !important;   /* kills inherited nowrap */
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* (Optional but safe) ensure the link also respects wrapping */
.webform-submission-form .js-form-managed-file .file a{
  display: block;
  max-width: 100%;
}

/* Size goes under filename too if needed */
.webform-submission-form .js-form-managed-file > span{
  flex: 0 0 auto;
  max-width: 100%;
}

/* FORCE the remove button on its own line and make it visible */
.webform-submission-form .js-form-managed-file input[id$="-remove-button"],
.webform-submission-form .js-form-managed-file input[name$="_remove_button"]{
  flex: 0 0 100%;
  order: 99;
  display: block !important;
  width: fit-content;
  max-width: 100%;
  visibility: visible !important;
  opacity: 1 !important;
}

/* If some parent clips it, unclip */
.webform-submission-form .form-item,
.webform-submission-form .form-managed-file,
.webform-submission-form .js-form-managed-file{
  overflow: visible !important;
}

.fieldset__label.fieldset__label--group.js-form-required.form-required{
    font-weight:700;
}



/* Processed text blocks */
.webform-submission-form .webform-element--type-processed-text{
  color: var(--lefk-text);
}
.webform-submission-form .webform-element--type-processed-text p{
  color: var(--lefk-text);
  line-height: 1.75;
}

/* ==========================================================
   LABELS / INPUTS
   ========================================================== */

.webform-submission-form .form-item__label{
  display:block;
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--lefk-text);
}

.webform-submission-form .form-item__description{
  color: var(--lefk-muted);
  max-width: none;
}

/* Required asterisk */
.webform-submission-form .form-item__label.form-required::after{
  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232f6f63'/%3E%3C/svg%3E");
}

/* Inputs */
.webform-submission-form input.form-text,
.webform-submission-form input.form-email,
.webform-submission-form input.form-tel,
.webform-submission-form input.form-number,
.webform-submission-form textarea.form-textarea,
.webform-submission-form select.form-select{
  width: 100%;
  border: 1px solid var(--lefk-border);
  border-radius: var(--lefk-radius-md);
  padding: 14px 14px;
  font-size: 16px;
  background: #fff;
  color: var(--lefk-text);
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.webform-submission-form input.form-text:focus,
.webform-submission-form input.form-email:focus,
.webform-submission-form input.form-tel:focus,
.webform-submission-form input.form-number:focus,
.webform-submission-form textarea.form-textarea:focus,
.webform-submission-form select.form-select:focus{
  border-color: rgba(31,111,91,0.45);
  box-shadow: 0 0 0 4px rgba(31,111,91,0.12);
  outline: none;
}

.webform-submission-form textarea.form-textarea{
  min-height: 120px;
}

/* ==========================================================
   RADIOS / CHECKBOXES — FIX: label must stay next to the control
   NO background pills
   ========================================================== */



/* Ensure input doesn't push layout */
.webform-submission-form .form-type-radio input[type="radio"],
.webform-submission-form .form-type-checkbox input[type="checkbox"]{
  margin: 0;
  flex: 0 0 auto;
}

/* Option label as inline text */
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label{
  display: inline;
  margin: 0;
  color: var(--lefk-text);
  line-height: 1.35;
}

/* If theme wraps label text in .option */
.webform-submission-form .form-type-radio .option,
.webform-submission-form .form-type-checkbox .option{
  display: inline;
}

/* REMOVE the pill backgrounds completely */
.webform-submission-form .webform-options-display-side-by-side .form-item,
.webform-submission-form .webform-options-display-two-columns .form-item{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ==========================================================
   SIGNATURE
   ========================================================== */

.webform-submission-form .webform-element--type-signature{
  background: #fff;
  border: 1px dashed rgba(31,111,91,0.35);
  border-radius: var(--lefk-radius-md);
  padding: 12px;
}
.webform-submission-form .webform-element--type-signature canvas{
  border-radius: 10px;
}

.webform-signature-pad .button {
    height:auto;
    padding:20px!important;
}


/* ==========================================================
   BUTTONS — modern
   ========================================================== */

.webform-submission-form .form-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.webform-submission-form .button,
.webform-submission-form .webform-button{
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.70);
  color: #153a36;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.webform-submission-form .button:hover,
.webform-submission-form .webform-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.09);
  border-color: rgba(21,58,54,0.22);
}

.webform-submission-form .button--primary,
.webform-submission-form .webform-button--submit,
.webform-submission-form .webform-button--next{
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%) !important;
  box-shadow: 0 12px 28px rgba(33,91,82,0.22) !important;
}

.webform-submission-form .button--primary:hover,
.webform-submission-form .webform-button--submit:hover,
.webform-submission-form .webform-button--next:hover{
  box-shadow: 0 16px 36px rgba(33,91,82,0.26) !important;
}

.webform-submission-form .webform-button--previous{
  background: rgba(255,255,255,0.80);
}

/* ==========================================================
   ERRORS
   ========================================================== */

.webform-submission-form .form-item--error-message{
  color: #b91c3c;
  font-size: 14px;
  margin-top: 6px;
  font-weight: 700;
}

.webform-submission-form input.error,
.webform-submission-form textarea.error,
.webform-submission-form select.error{
  border-color: rgba(185, 28, 60, 0.6);
  box-shadow: 0 0 0 4px rgba(185, 28, 60, 0.12);
}

/* ==========================================================
   CUSTOM COMPOSITE (MULTIPLE TABLE) — row cards + Α/Α badge + visible +/−
   Also: MORE SPACE between items
   ========================================================== */

/* More gap between rows */
.webform-submission-form .webform-multiple-table{
  border-collapse: separate !important;
  border-spacing: 0 18px !important; /* FIX: more space between composite items */
  width: 100%;
}

.webform-submission-form .webform-multiple-table thead{
  display: none;
}

/* Row as card */
.webform-submission-form .webform-multiple-table tbody tr{

  box-shadow: var(--lefk-shadow);
  border-radius: var(--lefk-radius-lg);
  position: relative;
  overflow: hidden;
}

/* Cells (slightly more inner spacing) */
.webform-submission-form .webform-multiple-table tbody tr > td{
  padding: 18px 16px !important; /* FIX: more breathing room */
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
background:#fff;
    
}

/* Rounded ends */
.webform-submission-form .webform-multiple-table tbody tr > td:first-child{
  border-left: 1px solid rgba(0,0,0,0.06);
  border-top-left-radius: var(--lefk-radius-lg);
  border-bottom-left-radius: var(--lefk-radius-lg);
}
.webform-submission-form .webform-multiple-table tbody tr > td:last-child{
  border-right: 1px solid rgba(0,0,0,0.06);
  border-top-right-radius: var(--lefk-radius-lg);
  border-bottom-right-radius: var(--lefk-radius-lg);
}

/* Α/Α counter badge */
.webform-submission-form .webform-multiple-table tbody{
  counter-reset: lefk-aa;
}
.webform-submission-form .webform-multiple-table tbody tr{
  counter-increment: lefk-aa;
}
.webform-submission-form .webform-multiple-table tbody tr::before{
  content: "Μετρητής: " counter(lefk-aa);
  position: absolute;
  top: 30px;
  left: 25px;
  z-index: 2;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 10px 22px rgba(33,91,82,0.18);
}

#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-multiple-table tbody tr > td:first-child > [id^="ajax-wrapper--"]{
  grid-column: 1 / -1;
}

#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-multiple-table tbody tr > td:first-child > #ajax-wrapper{
  grid-column: 1 / -1;
}

/* Space for badge */
.webform-submission-form .webform-multiple-table tbody tr > td:first-child{
  padding-top: 100px !important;
}

/* Operations column */
.webform-submission-form .webform-multiple-table td.webform-multiple-table--operations,
.webform-submission-form .webform-multiple-table td.webform-multiple-table--handle{
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
  padding-top: 50px !important;
}

/* Add/remove buttons */
.webform-submission-form .webform-multiple-add,
.webform-submission-form .webform-multiple-add.button,
.webform-submission-form .webform-multiple-add.js-webform-multiple-add{
  color: #fff !important;
  border: 0 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

.webform-submission-form .webform-multiple-remove,
.webform-submission-form .webform-multiple-remove.button,
.webform-submission-form .js-webform-multiple-remove{
  background: rgba(185,28,60,0.08) !important;
  border: 1px solid rgba(185,28,60,0.22) !important;
  color: #9f1239 !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

/* If icon-only, force clickable size */
.webform-submission-form .webform-multiple-table td.webform-multiple-table--operations .button,
.webform-submission-form .webform-multiple-table td.webform-multiple-table--operations button{
  min-width: 44px;
  min-height: 44px;
}


.fieldset__legend {
  background-color: #245f56;
  border: 1px solid var(--lefk-border-soft);
  border-radius: 15px 15px 0 0;
    
}


.fieldset__label {
  display: block;
  padding-block: var(--sp0-5);
  padding-inline-start: var(--sp1);
  padding-inline-end: var(--sp1);
  color: #fff;
  line-height: var(--line-height-s);
}

.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
  border-bottom: solid 1px var(--lefk-border-soft);
  border-left: solid 1px var(--lefk-border-soft);
  border-right: solid 1px var(--lefk-border-soft);
  border-top: none;
  
    border-radius: 0px 0px 15px 15px;
}


.fieldset__wrapper
{
  border-bottom: solid 1px var(--lefk-border-soft);
  border-left: solid 1px var(--lefk-border-soft);
  border-right: solid 1px var(--lefk-border-soft);
  border-top: none;
  
    border-radius: 0px 0px 15px 15px;
}

.webform-progress-tracker .progress-title[role="link"]:hover, .webform-progress-tracker .progress-title[role="link"]:focus {
  text-decoration: underline;
  color: #2a635a;
  font-weight: 700;
}


#aitisis_eggrafis--stoiheia_egkatastaseon .responsive-enabled {
  overflow-x: auto;
  display: block;
  padding: 20px 0px;
  text-align: center;
  border: none;
    overflow-y: auto;
  max-height: 1000px; /* adjust this */
}




/* ==========================================================
   LEFKOTHEA — 403/404 PAGES ONLY
   Paste this CSS as-is. It will NOT affect anything else.
   Buttons hover/shadows EXACTLY match your hero buttons.
   ========================================================== */

/* Wrapper */
.lefk-error-page{
  display: grid;
  place-items: center;
}

/* White card */
.lefk-error-page__card{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: clamp(26px, 3.2vw, 42px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.08);
  text-align: center;
  min-height: 500px;
  align-content: center;
}

/* Code (404 / 403) */
.lefk-error-page__code{
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-top: 10px;
  padding-bottom: 20px;
}

.lefk-error-page__title{
  margin: 0 0 12px;
  color: #101828;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.2;
}

.lefk-error-page__text{
  margin: 0 auto 28px;
  color: rgba(17,17,17,0.75);
  line-height: 1.65;
  max-width: 60ch;
}

/* Actions */
.lefk-error-page__actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================
   BUTTONS — scoped + EXACT hero behavior
   ========================================================== */

.lefk-error-page__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
  will-change: transform;
}

/* PRIMARY */
.lefk-error-page__btn--primary{
  color: #fff !important;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%);
  box-shadow: 0 12px 28px rgba(33,91,82,0.22);
}
.lefk-error-page__btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(33,91,82,0.26); /* EXACT */
  color: #fff !important;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%);
}

/* SECONDARY */
.lefk-error-page__btn--secondary{
  color: #153a36 !important;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(21,58,54,0.20);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}
.lefk-error-page__btn--secondary:hover{
  transform: translateY(-1px);
  border: 1px solid rgba(21,58,54,0.20);
  box-shadow: 0 16px 32px rgba(0,0,0,0.08); /* EXACT */
  color: #153a36 !important;
}

/* Focus only for these buttons (your site globally removes focus) */
.lefk-error-page__btn:focus-visible{
  outline: 3px solid rgba(44,110,99,0.35);
  outline-offset: 3px;
}


@media (max-width: 999px){
.lefk-error-page__card {
  margin-bottom: 400px;
}
}

@media (max-width: 699px){
  .lefk-error-page__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .lefk-error-page__btn{
    width: 100%;
  }
  .lefk-error-page__card {
  margin-bottom: 400px;
  
}
.lefk-error-page__actions{
  display: flex;
  gap: 0px;
  flex-wrap: wrap;
  justify-content: center;
}
}





/* ==========================================================
   FORCE LOGIN STYLING (cannot fail)
   ========================================================== */

/* Hide tabs + breadcrumb only on login form page */
#user-login-form ~ * #block-lefkothea-primary-local-tasks,
#user-login-form ~ * #block-lefkothea-breadcrumbs {
  display: none;
}

/* Center login form */
#user-login-form{
  width: min(560px, 100%);
  background: #ffffff;
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Labels */
#user-login-form .form-item__label{
  font-weight: 700;
  margin-bottom: 8px;
}

/* Inputs */
#user-login-form input.form-text,
#user-login-form input.form-password{
  width: 100%;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  background: #fff;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

#user-login-form input.form-text:focus,
#user-login-form input.form-password:focus{
  border-color: rgba(31,111,91,0.45);
  box-shadow: 0 0 0 4px rgba(31,111,91,0.12);
  outline: none;
}

/* Submit button — your gradient */
#user-login-form input#edit-submit{
  width: 100%;
  margin-top: 10px;
  border: 0 !important;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 800;
  color: #fff !important;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%) !important;
  box-shadow: 0 12px 28px rgba(33,91,82,0.22) !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#user-login-form input#edit-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(33,91,82,0.26) !important;
}


/* ==========================================================
   LEFKOTHEA — USER TABS (Login / Reset Password)
   Scoped to body.path-user
   ========================================================== */



body.path-user .tabs.tabs--primary{
  display: flex;
  gap: 12px;
  padding: 0;
  border: 0;
  list-style: none;
}



body.path-user .tabs__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  color: #153a36;
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
}

/* Hover (match your button behavior) */
body.path-user .tabs__link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
}

/* ACTIVE tab (green gradient like primary button) */
body.path-user .tabs__tab.is-active .tabs__link{
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%) !important;
  box-shadow: 0 12px 28px rgba(33,91,82,0.22) !important;
}





/* ==========================================================
   LEFKOTHEA — USER PASSWORD RESET (same as login)
   Scoped: body.path-user + #user-pass only
   ========================================================== */

body.path-user #user-pass{
  width: min(560px, 100%);
  background: #ffffff;
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Optional: hide breadcrumb + title only when password form exists */
body.path-user:has(#user-pass) #block-lefkothea-breadcrumbs,
body.path-user:has(#user-pass) #block-lefkothea-page-title{
  display: none;
}

/* Add a title inside the card */
body.path-user #user-pass::before{
  content: "Επαναφορά κωδικού";
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #2f6f63;
  margin-bottom: 18px;
}

/* Field spacing */
body.path-user #user-pass .form-item{
  margin: 0 0 16px;
}

/* Labels */
body.path-user #user-pass .form-item__label{
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
  color: rgba(17,17,17,0.92);
}

/* Inputs */
body.path-user #user-pass input.form-text{
  width: 100%;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 14px 14px;
  font-size: 16px;
  background: #fff;
  color: rgba(17,17,17,0.92);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

body.path-user #user-pass input.form-text:focus{
  border-color: rgba(31,111,91,0.45);
  box-shadow: 0 0 0 4px rgba(31,111,91,0.12);
  outline: none;
}

/* The instruction paragraph */
body.path-user #user-pass > p{
  margin: 6px 0 18px;
  color: rgba(17,17,17,0.70);
  line-height: 1.55;
}

/* Submit button (same as login) */
body.path-user #user-pass .form-actions{
  margin-top: 14px;
}

body.path-user #user-pass input#edit-submit{
  width: 100%;
  border: 0 !important;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff !important;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%) !important;
  box-shadow: 0 12px 28px rgba(33,91,82,0.22) !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

body.path-user #user-pass input#edit-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(33,91,82,0.26) !important;
}



.webform-progress-tracker .progress-step .progress-text {
    text-align: center;
}


/* Modern table styling (Drupal Webform/Olivero/Gin-friendly)
   Targets the table you posted: .responsive-enabled[data-once="tableresponsive"] */

table.responsive-enabled[data-once="tableresponsive"]{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}



/* Header */
table.responsive-enabled[data-once="tableresponsive"] thead th{
  background:#f7f8fa !important;   /* overrides bgcolor */
  color:#101828;
  font-weight:700;
  font-size:14px;
  line-height:1.25;
  padding:12px 14px;
  border:0;
  border-bottom:1px solid #e6e8eb;
  vertical-align:bottom;
  text-align:left;
  white-space:normal;
}

/* Body cells */
table.responsive-enabled[data-once="tableresponsive"] tbody td{
  padding:12px 14px;
  border:0;
  border-bottom:1px solid #eef1f4;
  color:#101828;
  font-size:14px;
  line-height:1.35;
  vertical-align:top;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Zebra striping */
table.responsive-enabled[data-once="tableresponsive"] tbody tr:nth-child(even){
  background:#fbfcfd;
}

/* Hover (desktop) */
@media (hover:hover){
  table.responsive-enabled[data-once="tableresponsive"] tbody tr:hover{
    background:#f3f6ff;
  }
}

/* Last row border cleanup */
table.responsive-enabled[data-once="tableresponsive"] tbody tr:last-child td{
  border-bottom:0;
}

/* Links (files) */
table.responsive-enabled[data-once="tableresponsive"] a{
  color: var(--color--primary-500, #0a7ea4);
  text-decoration: underline;
  text-underline-offset: 2px;
}
table.responsive-enabled[data-once="tableresponsive"] a:hover{
  text-decoration-thickness: 2px;
}

/* File badge look */
table.responsive-enabled[data-once="tableresponsive"] .file{
  display:inline-flex;
  gap:8px;
  align-items:center;
}
table.responsive-enabled[data-once="tableresponsive"] .file + span{
  color:#5b6573;
  font-size:12px;
  margin-left:8px;
}

/* Keep it usable on small screens: allow horizontal scroll on the wrapper */
.tableresponsive,
.table-responsive,
.webform-table{
  max-width:100%;
}
.tableresponsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Optional: make the scroll look nicer */
.tableresponsive::-webkit-scrollbar{ height:10px; }
.tableresponsive::-webkit-scrollbar-thumb{ background:#d7dbe0; border-radius:999px; }
.tableresponsive::-webkit-scrollbar-track{ background:#f1f3f5; border-radius:999px; }

.messages__icon:not(:has(svg))::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z' fill='%23b1283f'/%3E%3C/svg%3E");
}

/* The TD that contains the whole composite row content */
#stoiheia_egkatastaseon_simeion_metrisis_table tbody tr td:first-child {
  position: relative;
  padding-top: 56px; /* leave room for the checkbox block on top */
}

/* The specific checkbox wrapper */
[class*="same-installation-as-previous"] {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 8px 12px;
  background: #fff5f5;
  border: 1px solid #f1b5b5;
  border-left: 4px solid #d40000;
  border-radius: 6px;

  max-width: fit-content;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Keep checkbox text in one line */
[class*="same-installation-as-previous"] .form-item__label {
  margin: 0;
  white-space: nowrap;
  font-weight: 700;
  color: #8b0000;
}

/* Clean checkbox spacing */
[class*="same-installation-as-previous"] .form-checkbox {
  margin: 0;
  flex: 0 0 auto;
}

#stoiheia_egkatastaseon_simeion_metrisis_table table {
  border-collapse: separate;
  border-spacing: 0 38px;
}



/* ==========================================================
   SELECT2 — match Lefkothea form fields
   ========================================================== */

.webform-submission-form .select2-container--default .select2-selection--single{
  height: auto;
  min-height: 48px;
  border: 1px solid var(--lefk-border);
  border-radius: var(--lefk-radius-md);
  padding: 10px 14px;
  background: #fff;
  display: flex;
  align-items: center;
  box-shadow: none;
}

/* text */
.webform-submission-form .select2-container--default .select2-selection__rendered{
  padding-left: 0;
  color: var(--lefk-text);
  line-height: 1.4;
}

/* arrow */
.webform-submission-form .select2-container--default .select2-selection__arrow{
  height: 100%;
  right: 10px;
}

/* focus state like other inputs */
.webform-submission-form .select2-container--default.select2-container--focus .select2-selection--single{
  border-color: rgba(31,111,91,0.45);
  box-shadow: 0 0 0 4px rgba(31,111,91,0.12);
}

/* dropdown panel */
.select2-dropdown{
  border-radius: 12px;
  border: 1px solid var(--lefk-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ==========================================================
   COMPOSITE TABLE — FIXED 2 COLUMN GRID (NO COLLISIONS / NO SCROLL)
   ONLY THIS TABLE: #stoiheia_egkatastaseon_simeion_metrisis_table
   ========================================================== */

/* Remove forced table scrolling behavior (you caused the scrollbar) */
@media (max-width: 900px){
  .webform-submission-form .webform-multiple-table-wrapper{
    overflow-x: visible !important;
  }
  .webform-submission-form .webform-multiple-table{
    min-width: 0 !important; /* IMPORTANT: kill the 820px */
  }
}

/* Make the FIRST TD a stable grid container */
#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-multiple-table tbody tr > td:first-child{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* FIX: allow proper shrink */
  gap: 18px 22px;
  align-content: start;
}

/* Every direct field wrapper becomes a clean grid item block */
#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-multiple-table tbody tr > td:first-child > .js-form-item,
#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-multiple-table tbody tr > td:first-child > .form-item,
#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-multiple-table tbody tr > td:first-child > fieldset{
  min-width: 0;            /* FIX: prevent overflow / label collision */
  margin: 0 !important;
}

/* Labels: force clean spacing so they never visually merge with the next field */
#stoiheia_egkatastaseon_simeion_metrisis_table .form-item__label{
  white-space: normal;
  overflow-wrap: anywhere; /* Greek long strings won’t collide */
}

/* Inputs/textarea inside composite: ensure they never overflow their grid cell */
#stoiheia_egkatastaseon_simeion_metrisis_table input,
#stoiheia_egkatastaseon_simeion_metrisis_table select,
#stoiheia_egkatastaseon_simeion_metrisis_table textarea{
  min-width: 0;
  max-width: 100%;
}

/* Full width items */
#stoiheia_egkatastaseon_simeion_metrisis_table .form-type-textarea,
#stoiheia_egkatastaseon_simeion_metrisis_table .form-type-managed-file,
#stoiheia_egkatastaseon_simeion_metrisis_table fieldset{
  grid-column: 1 / -1;
}

/* ==========================================================
   FIELDSET IN COMPOSITE — match normal fields (NO extra borders)
   ========================================================== */

#stoiheia_egkatastaseon_simeion_metrisis_table fieldset{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}


/* Radios: clean inline, no pills, no backgrounds */
#stoiheia_egkatastaseon_simeion_metrisis_table .form-boolean-group{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin: 0;
}

#stoiheia_egkatastaseon_simeion_metrisis_table .form-type-radio{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-options-display-side-by-side .form-item,
#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-options-display-two-columns .form-item{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ==========================================================
   MOBILE — switch to 1 column WITHOUT scrollbars
   ========================================================== */
@media (max-width: 768px){
  #stoiheia_egkatastaseon_simeion_metrisis_table
  .webform-multiple-table tbody tr > td:first-child{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .webform-multiple-table td input[type="image"] + input[type="image"] {
  margin-top: 0px;
  margin-left:10px;
}
}




/* ==========================================================
   COMPOSITE LEGEND — match normal fieldset title exactly
   ========================================================== */



/* ==========================================================
   COMPOSITE OPERATIONS FIX — always visible
   ========================================================== */

/* Ensure operations cell is visible */
#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-multiple-table td.webform-multiple-table--operations{
  width: auto !important;
  min-width: 90px;
  vertical-align: top;
}

/* Buttons size */
#stoiheia_egkatastaseon_simeion_metrisis_table
.webform-multiple-table td.webform-multiple-table--operations input[type="image"]{
  width: 40px;
  height: 40px;
}


#stoiheia_egkatastaseon_simeion_metrisis_table .webform-multiple-table td.webform-multiple-table--operations input[type="image"] {
  width: 34px;
  height: 34px;
}

#stoiheia_egkatastaseon_simeion_metrisis_table .webform-multiple-table td.webform-multiple-table--operations {
  width: auto !important;
  min-width: 70px;
  vertical-align: top;
}


/* =====================================
   MOBILE — move operations below fields
   ===================================== */

@media (max-width: 768px){

  #stoiheia_egkatastaseon_simeion_metrisis_table
  .webform-multiple-table tbody tr{
    display: flex;
    flex-direction: column;
  }

  #stoiheia_egkatastaseon_simeion_metrisis_table
  .webform-multiple-table tbody tr > td{
    width: 100% !important;
  }

  #stoiheia_egkatastaseon_simeion_metrisis_table
  .webform-multiple-table td.webform-multiple-table--operations{
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 10px !important;
    padding-bottom: 20px !important;
     border: none;
  }
  

  .webform-submission-form .webform-multiple-table tbody tr::before {
  content: "Μετρητής: " counter(lefk-aa);
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 2;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #2c6e63 0%, #215b52 100%);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 10px 22px rgba(33,91,82,0.18);
}
.webform-signature-pad .button {
    height:auto;
    padding:10px!important;
}
  
    
  .site-branding {
    min-height: 140px;
    padding: 15px;
    justify-content: center;
}
  .site-branding img {
    min-height: 95px;
}
  
}
    

/* ==========================================================
   FINAL OVERRIDE — composite row full card border/shadow
   ========================================================== */

#stoiheia_egkatastaseon_simeion_metrisis_table .webform-multiple-table {
  border-collapse: separate !important;
  border-spacing: 0 24px !important;
}

#stoiheia_egkatastaseon_simeion_metrisis_table .webform-multiple-table tbody tr {
  position: relative;
}

#stoiheia_egkatastaseon_simeion_metrisis_table .webform-multiple-table tbody tr > td {
  background: #fff !important;
  border-top: 1px solid #e6e8eb !important;
  border-bottom: 1px solid #e6e8eb !important;
  box-shadow: none !important;
}

/* Main content cell */
#stoiheia_egkatastaseon_simeion_metrisis_table .webform-multiple-table tbody tr > td:first-child {
  border-left: 1px solid #e6e8eb !important;
  border-right: 0 !important;
  border-top-left-radius: 18px !important;
  border-bottom-left-radius: 18px !important;
  box-shadow: -2px 0 12px rgba(0,0,0,0.03), 0 10px 30px rgba(0,0,0,0.06) !important;
}

/* Operations cell */
#stoiheia_egkatastaseon_simeion_metrisis_table .webform-multiple-table tbody tr > td.webform-multiple-table--operations {
  border-right: 1px solid #e6e8eb !important;
  border-left: 0 !important;
  border-top-right-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
  background: #fff !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.03), 0 10px 30px rgba(0,0,0,0.06) !important;
}

/* Remove generic table row striping/hover on this composite only */
#stoiheia_egkatastaseon_simeion_metrisis_table table.responsive-enabled[data-once="tableresponsive"] tbody tr:nth-child(even) {
  background: transparent !important;
}

#stoiheia_egkatastaseon_simeion_metrisis_table table.responsive-enabled[data-once="tableresponsive"] tbody tr:hover {
  background: transparent !important;
}

/* ==========================================================
   LEFKOTHEA — DRUPAL MESSAGES (errors/warnings/status)
   ========================================================== */

:root{
  --lefk-green: #2f6f63;
  --lefk-green-dark: #215b52;

  --lefk-text: rgba(17,17,17,0.92);
  --lefk-muted: rgba(17,17,17,0.68);

  --lefk-radius-lg: 18px;
  --lefk-shadow: 0 10px 30px rgba(0,0,0,0.06);

  --lefk-red: #b91c3c;
  --lefk-red-soft: rgba(185, 28, 60, 0.12);
  --lefk-border-soft: rgba(0,0,0,0.06);
}

/* Wrapper spacing */
.messages-list{
  margin: 0 0 18px;
}

/* The card */
.messages{
  background: #fff !important;
  border: 1px solid var(--lefk-border-soft) !important;
  border-radius: var(--lefk-radius-lg) !important;
  box-shadow: var(--lefk-shadow) !important;
  overflow: hidden;
}

/* Error accent (top bar) */
.messages--error{
  border-left: 0 !important;
  position: relative;
}
.messages--error::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(180deg, rgba(185,28,60,0.95) 0%, rgba(185,28,60,0.70) 100%);
}

/* Container layout */
.messages__container{
  padding: 16px 18px 14px !important;
}

/* Header row: icon + title area */
.messages__header{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
}

/* Icon: make it themed */
.messages__icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--lefk-red-soft);
  flex: 0 0 auto;
}

/* Force the inline SVG to your error color */
.messages__icon svg{
  width: 22px !important;
  height: 22px !important;
}
.messages__icon svg path{
  fill: var(--lefk-red) !important;
}

/* Content text */
.messages__content{
  color: var(--lefk-text);
  padding-left:20px;
}
.messages a {
  color: #245e56;
}

/* List styling: keep it clean and modern */
.messages__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.messages__item{
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(185,28,60,0.06);
  border: 1px solid rgba(185,28,60,0.10);
  color: var(--lefk-text);
}

/* Close button: Lefkothea style */
.messages__button{
  top: 12px;
  right: 12px;
  padding:0px;
}
.messages__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  position: relative;
}
.messages__close::before,
.messages__close::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2.6px;
  background: var(--lefk-green);
  border-radius: 2px;
  transform-origin: center;
}
.messages__close::before{ transform: translate(-50%, -50%) rotate(45deg); }
.messages__close::after{  transform: translate(-50%, -50%) rotate(-45deg); }

.messages__close:hover{
  border-color: rgba(44,110,99,0.35);
  box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}
.messages__close:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(31,111,91,0.14), 0 14px 28px rgba(0,0,0,0.12);
}

.messages__close:hover::before, .messages__close:hover::after {
  border-color: #23605645;
}





/* Mobile width */
@media (max-width: 640px) {
  .ui-dialog.webform-confirmation-modal {
    width: calc(100vw - 28px) !important;
    left: 14px !important;
    right: 14px !important;
  }
  
  .messages__container {
  padding:0px!important;
  font-size: 15px;
}
.messages__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: 12px;
    padding-right: 48px; /* space for close button */
  }

  .messages__header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .messages__content {
    width: 100%;
  }

  .messages__button {
    position: absolute;
    top: 0px!important;
    right: 8px;
    padding: 0px;
  }
}



/* Mobile width */
@media (max-width: 699px) {
.titlecustom{
  margin-top:-20px;
}
.site-footer__inner.container {
  padding: 20px;
}
}


  @media (min-width: 62.5rem) {

  .node__content.layout--content-narrow{
  grid-column: 1 / -1 !important;   /* THIS is the real width limiter in Olivero */
  max-width: none !important;
  max-inline-size: none !important; /* in case Olivero uses logical max width */
  width: 100% !important;
}
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-footer {
    border-inline-start: none;
  }
  
   .site-branding {
    padding: 15px;
    justify-content: center;
}
          
  
  
  .site-branding__logo img{
      min-height:120px;
  }
  .is-expanded  .site-branding__logo img{
      min-height:unset;
  }
 .is-expanded .site-branding {
        padding: 0px;
        justify-content: center;
    }
  .social-bar {
   min-height: 100vh;
}
}





/* Mobile: center-ish and make overlay stronger */
@media (max-width: 920px) {
 
  .lefk-home-hero .lefk-hero__inner {
    padding: 46px 18px;
  }
    .webform-progress-tracker .progress-text {
    display: none;
  }
}

/* Mobile: center-ish and make overlay stronger */
@media (max-width: 1199px) {
 
.header-nav {
  background-color: #fff;

}
}

/* Mobile: center-ish and make overlay stronger */
@media (max-width: 1440px) {
.webform-progress-tracker .progress-title {
  color: #245f56;
  font-size: 0.8rem;
  line-height: 1.3rem;
}
}

@media (max-width:700px) {
          .site-branding {
    min-height: 140px;
    padding: 15px;
    justify-content: center;
}

  .site-branding img {
    min-height: 105px;
}
    }



header.layout--content-narrow,
.node__content.layout--content-narrow{
  grid-column: 1 / -1 !important;   /* THIS is the real width limiter in Olivero */
  max-width: none !important;
  max-inline-size: none !important; /* in case Olivero uses logical max width */
  width: 100% !important;
}

body.path-user #block-lefkothea-primary-local-tasks .tabs {
  --tabs-border-width: none;
}