@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/**
 * Convert font-size from px to rem with px fallback
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {@include fontSize(12px);}
 *
 */
.wrapper {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1600px;
}
.wrapper--s {
  max-width: 1300px;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.row.center {
  justify-content: center;
}

.col {
  max-width: 100%;
  flex-grow: 1;
  flex-basis: 0;
}
.col-1 {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
  width: 8.3333333333%;
}
.col-2 {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
  width: 16.6666666667%;
}
.col-3 {
  flex-basis: 25%;
  max-width: 25%;
  width: 25%;
}
.col-4 {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
  width: 33.3333333333%;
}
.col-5 {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
  width: 41.6666666667%;
}
.col-6 {
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
}
.col-7 {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
  width: 58.3333333333%;
}
.col-8 {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
  width: 66.6666666667%;
}
.col-9 {
  flex-basis: 75%;
  max-width: 75%;
  width: 75%;
}
.col-10 {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
  width: 83.3333333333%;
}
.col-11 {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
  width: 91.6666666667%;
}
.col-12 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

@media (max-width: 1399px) {
  .col-xxl-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .col-xxl-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .col-xxl-3 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }
  .col-xxl-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .col-xxl-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .col-xxl-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }
  .col-xxl-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .col-xxl-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .col-xxl-9 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }
  .col-xxl-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .col-xxl-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .col-xxl-12 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
  .hidden-xxl {
    display: none;
  }
}
@media (max-width: 1279px) {
  .col-xl-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }
  .col-xl-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }
  .col-xl-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }
  .col-xl-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
  .hidden-xl {
    display: none;
  }
}
@media (max-width: 1023px) {
  .col-l-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .col-l-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .col-l-3 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }
  .col-l-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .col-l-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .col-l-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }
  .col-l-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .col-l-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .col-l-9 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }
  .col-l-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .col-l-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .col-l-12 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
  .hidden-l {
    display: none;
  }
}
@media (max-width: 767px) {
  .col-m-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .col-m-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .col-m-3 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }
  .col-m-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .col-m-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .col-m-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }
  .col-m-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .col-m-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .col-m-9 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }
  .col-m-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .col-m-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .col-m-12 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
  .hidden-m {
    display: none;
  }
}
@media (max-width: 639px) {
  .col-s-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .col-s-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .col-s-3 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }
  .col-s-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .col-s-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .col-s-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }
  .col-s-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .col-s-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .col-s-9 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }
  .col-s-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .col-s-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .col-s-12 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
  .hidden-s {
    display: none;
  }
}
@media (max-width: 479px) {
  .col-xs-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .col-xs-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .col-xs-3 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }
  .col-xs-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .col-xs-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .col-xs-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }
  .col-xs-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .col-xs-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .col-xs-9 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }
  .col-xs-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .col-xs-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .col-xs-12 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
  .hidden-xs {
    display: none;
  }
}
.m-0 {
  margin: 0px;
}

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.ms-0 {
  margin-inline-start: 0px;
}

.me-0 {
  margin-inline-end: 0px;
}

.mt-0 {
  margin-top: 0px;
}

.mr-0 {
  margin-right: 0px;
}

.mb-0 {
  margin-bottom: 0px;
}

.ml-0 {
  margin-left: 0px;
}

.m-px {
  margin: 1px;
}

.mx-px {
  margin-left: 1px;
  margin-right: 1px;
}

.my-px {
  margin-top: 1px;
  margin-bottom: 1px;
}

.ms-px {
  margin-inline-start: 1px;
}

.me-px {
  margin-inline-end: 1px;
}

.mt-px {
  margin-top: 1px;
}

.mr-px {
  margin-right: 1px;
}

.mb-px {
  margin-bottom: 1px;
}

.ml-px {
  margin-left: 1px;
}

.m-0-5 {
  margin: 0.125rem;
}

.mx-0-5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.my-0-5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.ms-0-5 {
  margin-inline-start: 0.125rem;
}

.me-0-5 {
  margin-inline-end: 0.125rem;
}

.mt-0-5 {
  margin-top: 0.125rem;
}

.mr-0-5 {
  margin-right: 0.125rem;
}

.mb-0-5 {
  margin-bottom: 0.125rem;
}

.ml-0-5 {
  margin-left: 0.125rem;
}

.m-1 {
  margin: 0.25rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.ms-1 {
  margin-inline-start: 0.25rem;
}

.me-1 {
  margin-inline-end: 0.25rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.m-1-5 {
  margin: 0.375rem;
}

.mx-1-5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.my-1-5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.ms-1-5 {
  margin-inline-start: 0.375rem;
}

.me-1-5 {
  margin-inline-end: 0.375rem;
}

.mt-1-5 {
  margin-top: 0.375rem;
}

.mr-1-5 {
  margin-right: 0.375rem;
}

.mb-1-5 {
  margin-bottom: 0.375rem;
}

.ml-1-5 {
  margin-left: 0.375rem;
}

.m-2 {
  margin: 0.5rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.ms-2 {
  margin-inline-start: 0.5rem;
}

.me-2 {
  margin-inline-end: 0.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.m-2-5 {
  margin: 0.625rem;
}

.mx-2-5 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

.my-2-5 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.ms-2-5 {
  margin-inline-start: 0.625rem;
}

.me-2-5 {
  margin-inline-end: 0.625rem;
}

.mt-2-5 {
  margin-top: 0.625rem;
}

.mr-2-5 {
  margin-right: 0.625rem;
}

.mb-2-5 {
  margin-bottom: 0.625rem;
}

.ml-2-5 {
  margin-left: 0.625rem;
}

.m-3 {
  margin: 0.75rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.ms-3 {
  margin-inline-start: 0.75rem;
}

.me-3 {
  margin-inline-end: 0.75rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.m-3-5 {
  margin: 0.875rem;
}

.mx-3-5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}

.my-3-5 {
  margin-top: 0.875rem;
  margin-bottom: 0.875rem;
}

.ms-3-5 {
  margin-inline-start: 0.875rem;
}

.me-3-5 {
  margin-inline-end: 0.875rem;
}

.mt-3-5 {
  margin-top: 0.875rem;
}

.mr-3-5 {
  margin-right: 0.875rem;
}

.mb-3-5 {
  margin-bottom: 0.875rem;
}

.ml-3-5 {
  margin-left: 0.875rem;
}

.m-4 {
  margin: 1rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.ms-4 {
  margin-inline-start: 1rem;
}

.me-4 {
  margin-inline-end: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-4 {
  margin-left: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.ms-5 {
  margin-inline-start: 1.25rem;
}

.me-5 {
  margin-inline-end: 1.25rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mr-5 {
  margin-right: 1.25rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.m-6 {
  margin: 1.5rem;
}

.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.ms-6 {
  margin-inline-start: 1.5rem;
}

.me-6 {
  margin-inline-end: 1.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.m-7 {
  margin: 1.75rem;
}

.mx-7 {
  margin-left: 1.75rem;
  margin-right: 1.75rem;
}

.my-7 {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.ms-7 {
  margin-inline-start: 1.75rem;
}

.me-7 {
  margin-inline-end: 1.75rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mr-7 {
  margin-right: 1.75rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.ml-7 {
  margin-left: 1.75rem;
}

.m-8 {
  margin: 2rem;
}

.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.ms-8 {
  margin-inline-start: 2rem;
}

.me-8 {
  margin-inline-end: 2rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-8 {
  margin-left: 2rem;
}

.m-9 {
  margin: 2.25rem;
}

.mx-9 {
  margin-left: 2.25rem;
  margin-right: 2.25rem;
}

.my-9 {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.ms-9 {
  margin-inline-start: 2.25rem;
}

.me-9 {
  margin-inline-end: 2.25rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mr-9 {
  margin-right: 2.25rem;
}

.mb-9 {
  margin-bottom: 2.25rem;
}

.ml-9 {
  margin-left: 2.25rem;
}

.m-10 {
  margin: 2.5rem;
}

.mx-10 {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.ms-10 {
  margin-inline-start: 2.5rem;
}

.me-10 {
  margin-inline-end: 2.5rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mr-10 {
  margin-right: 2.5rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.m-11 {
  margin: 2.75rem;
}

.mx-11 {
  margin-left: 2.75rem;
  margin-right: 2.75rem;
}

.my-11 {
  margin-top: 2.75rem;
  margin-bottom: 2.75rem;
}

.ms-11 {
  margin-inline-start: 2.75rem;
}

.me-11 {
  margin-inline-end: 2.75rem;
}

.mt-11 {
  margin-top: 2.75rem;
}

.mr-11 {
  margin-right: 2.75rem;
}

.mb-11 {
  margin-bottom: 2.75rem;
}

.ml-11 {
  margin-left: 2.75rem;
}

.m-12 {
  margin: 3rem;
}

.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.ms-12 {
  margin-inline-start: 3rem;
}

.me-12 {
  margin-inline-end: 3rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mr-12 {
  margin-right: 3rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.ml-12 {
  margin-left: 3rem;
}

.m-14 {
  margin: 3.5rem;
}

.mx-14 {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
}

.my-14 {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.ms-14 {
  margin-inline-start: 3.5rem;
}

.me-14 {
  margin-inline-end: 3.5rem;
}

.mt-14 {
  margin-top: 3.5rem;
}

.mr-14 {
  margin-right: 3.5rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.ml-14 {
  margin-left: 3.5rem;
}

.m-16 {
  margin: 4rem;
}

.mx-16 {
  margin-left: 4rem;
  margin-right: 4rem;
}

.my-16 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.ms-16 {
  margin-inline-start: 4rem;
}

.me-16 {
  margin-inline-end: 4rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mr-16 {
  margin-right: 4rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.ml-16 {
  margin-left: 4rem;
}

.m-20 {
  margin: 5rem;
}

.mx-20 {
  margin-left: 5rem;
  margin-right: 5rem;
}

.my-20 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.ms-20 {
  margin-inline-start: 5rem;
}

.me-20 {
  margin-inline-end: 5rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mr-20 {
  margin-right: 5rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.ml-20 {
  margin-left: 5rem;
}

.m-24 {
  margin: 6rem;
}

.mx-24 {
  margin-left: 6rem;
  margin-right: 6rem;
}

.my-24 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.ms-24 {
  margin-inline-start: 6rem;
}

.me-24 {
  margin-inline-end: 6rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mr-24 {
  margin-right: 6rem;
}

.mb-24 {
  margin-bottom: 6rem;
}

.ml-24 {
  margin-left: 6rem;
}

.m-28 {
  margin: 7rem;
}

.mx-28 {
  margin-left: 7rem;
  margin-right: 7rem;
}

.my-28 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

.ms-28 {
  margin-inline-start: 7rem;
}

.me-28 {
  margin-inline-end: 7rem;
}

.mt-28 {
  margin-top: 7rem;
}

.mr-28 {
  margin-right: 7rem;
}

.mb-28 {
  margin-bottom: 7rem;
}

.ml-28 {
  margin-left: 7rem;
}

.m-32 {
  margin: 8rem;
}

.mx-32 {
  margin-left: 8rem;
  margin-right: 8rem;
}

.my-32 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.ms-32 {
  margin-inline-start: 8rem;
}

.me-32 {
  margin-inline-end: 8rem;
}

.mt-32 {
  margin-top: 8rem;
}

.mr-32 {
  margin-right: 8rem;
}

.mb-32 {
  margin-bottom: 8rem;
}

.ml-32 {
  margin-left: 8rem;
}

.m-36 {
  margin: 9rem;
}

.mx-36 {
  margin-left: 9rem;
  margin-right: 9rem;
}

.my-36 {
  margin-top: 9rem;
  margin-bottom: 9rem;
}

.ms-36 {
  margin-inline-start: 9rem;
}

.me-36 {
  margin-inline-end: 9rem;
}

.mt-36 {
  margin-top: 9rem;
}

.mr-36 {
  margin-right: 9rem;
}

.mb-36 {
  margin-bottom: 9rem;
}

.ml-36 {
  margin-left: 9rem;
}

.m-40 {
  margin: 10rem;
}

.mx-40 {
  margin-left: 10rem;
  margin-right: 10rem;
}

.my-40 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}

.ms-40 {
  margin-inline-start: 10rem;
}

.me-40 {
  margin-inline-end: 10rem;
}

.mt-40 {
  margin-top: 10rem;
}

.mr-40 {
  margin-right: 10rem;
}

.mb-40 {
  margin-bottom: 10rem;
}

.ml-40 {
  margin-left: 10rem;
}

.m-44 {
  margin: 11rem;
}

.mx-44 {
  margin-left: 11rem;
  margin-right: 11rem;
}

.my-44 {
  margin-top: 11rem;
  margin-bottom: 11rem;
}

.ms-44 {
  margin-inline-start: 11rem;
}

.me-44 {
  margin-inline-end: 11rem;
}

.mt-44 {
  margin-top: 11rem;
}

.mr-44 {
  margin-right: 11rem;
}

.mb-44 {
  margin-bottom: 11rem;
}

.ml-44 {
  margin-left: 11rem;
}

.m-48 {
  margin: 12rem;
}

.mx-48 {
  margin-left: 12rem;
  margin-right: 12rem;
}

.my-48 {
  margin-top: 12rem;
  margin-bottom: 12rem;
}

.ms-48 {
  margin-inline-start: 12rem;
}

.me-48 {
  margin-inline-end: 12rem;
}

.mt-48 {
  margin-top: 12rem;
}

.mr-48 {
  margin-right: 12rem;
}

.mb-48 {
  margin-bottom: 12rem;
}

.ml-48 {
  margin-left: 12rem;
}

.m-52 {
  margin: 13rem;
}

.mx-52 {
  margin-left: 13rem;
  margin-right: 13rem;
}

.my-52 {
  margin-top: 13rem;
  margin-bottom: 13rem;
}

.ms-52 {
  margin-inline-start: 13rem;
}

.me-52 {
  margin-inline-end: 13rem;
}

.mt-52 {
  margin-top: 13rem;
}

.mr-52 {
  margin-right: 13rem;
}

.mb-52 {
  margin-bottom: 13rem;
}

.ml-52 {
  margin-left: 13rem;
}

.m-56 {
  margin: 14rem;
}

.mx-56 {
  margin-left: 14rem;
  margin-right: 14rem;
}

.my-56 {
  margin-top: 14rem;
  margin-bottom: 14rem;
}

.ms-56 {
  margin-inline-start: 14rem;
}

.me-56 {
  margin-inline-end: 14rem;
}

.mt-56 {
  margin-top: 14rem;
}

.mr-56 {
  margin-right: 14rem;
}

.mb-56 {
  margin-bottom: 14rem;
}

.ml-56 {
  margin-left: 14rem;
}

.m-60 {
  margin: 15rem;
}

.mx-60 {
  margin-left: 15rem;
  margin-right: 15rem;
}

.my-60 {
  margin-top: 15rem;
  margin-bottom: 15rem;
}

.ms-60 {
  margin-inline-start: 15rem;
}

.me-60 {
  margin-inline-end: 15rem;
}

.mt-60 {
  margin-top: 15rem;
}

.mr-60 {
  margin-right: 15rem;
}

.mb-60 {
  margin-bottom: 15rem;
}

.ml-60 {
  margin-left: 15rem;
}

.m-64 {
  margin: 16rem;
}

.mx-64 {
  margin-left: 16rem;
  margin-right: 16rem;
}

.my-64 {
  margin-top: 16rem;
  margin-bottom: 16rem;
}

.ms-64 {
  margin-inline-start: 16rem;
}

.me-64 {
  margin-inline-end: 16rem;
}

.mt-64 {
  margin-top: 16rem;
}

.mr-64 {
  margin-right: 16rem;
}

.mb-64 {
  margin-bottom: 16rem;
}

.ml-64 {
  margin-left: 16rem;
}

.m-72 {
  margin: 18rem;
}

.mx-72 {
  margin-left: 18rem;
  margin-right: 18rem;
}

.my-72 {
  margin-top: 18rem;
  margin-bottom: 18rem;
}

.ms-72 {
  margin-inline-start: 18rem;
}

.me-72 {
  margin-inline-end: 18rem;
}

.mt-72 {
  margin-top: 18rem;
}

.mr-72 {
  margin-right: 18rem;
}

.mb-72 {
  margin-bottom: 18rem;
}

.ml-72 {
  margin-left: 18rem;
}

.m-80 {
  margin: 20rem;
}

.mx-80 {
  margin-left: 20rem;
  margin-right: 20rem;
}

.my-80 {
  margin-top: 20rem;
  margin-bottom: 20rem;
}

.ms-80 {
  margin-inline-start: 20rem;
}

.me-80 {
  margin-inline-end: 20rem;
}

.mt-80 {
  margin-top: 20rem;
}

.mr-80 {
  margin-right: 20rem;
}

.mb-80 {
  margin-bottom: 20rem;
}

.ml-80 {
  margin-left: 20rem;
}

.m-96 {
  margin: 24rem;
}

.mx-96 {
  margin-left: 24rem;
  margin-right: 24rem;
}

.my-96 {
  margin-top: 24rem;
  margin-bottom: 24rem;
}

.ms-96 {
  margin-inline-start: 24rem;
}

.me-96 {
  margin-inline-end: 24rem;
}

.mt-96 {
  margin-top: 24rem;
}

.mr-96 {
  margin-right: 24rem;
}

.mb-96 {
  margin-bottom: 24rem;
}

.ml-96 {
  margin-left: 24rem;
}

.m-auto {
  margin: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.ms-auto {
  margin-inline-start: auto;
}

.me-auto {
  margin-inline-end: auto;
}

.mt-auto {
  margin-top: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.dp__theme_light {
  --dp-background-color: #fff;
  --dp-text-color: #212121;
  --dp-hover-color: #f3f3f3;
  --dp-hover-text-color: #212121;
  --dp-hover-icon-color: #959595;
  --dp-primary-color: #B9A16B;
  --dp-primary-disabled-color: #d8cba6;
  --dp-primary-text-color: white;
  --dp-secondary-color: #c0c4cc;
  --dp-border-color: #ddd;
  --dp-menu-border-color: #ddd;
  --dp-border-color-hover: #aaaeb7;
  --dp-border-color-focus: #aaaeb7;
  --dp-disabled-color: #f6f6f6;
  --dp-scroll-bar-background: #f3f3f3;
  --dp-scroll-bar-color: #959595;
  --dp-success-color: #76d275;
  --dp-success-color-disabled: #a3d9b1;
  --dp-icon-color: #959595;
  --dp-danger-color: #ff6f60;
  --dp-marker-color: #ff6f60;
  --dp-tooltip-color: #fafafa;
  --dp-disabled-color-text: #8e8e8e;
  --dp-highlight-color: rgb(25 118 210 / 10%);
  --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
  --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);
}

:root {
  --dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --dp-border-radius: 4px;
  --dp-cell-border-radius: 50%;
  --dp-common-transition: all 0.1s ease-in;
  --dp-button-height: 35px;
  --dp-month-year-row-height: 35px;
  --dp-month-year-row-button-size: 35px;
  --dp-button-icon-height: 20px;
  --dp-cell-size: 35px;
  --dp-cell-padding: 5px;
  --dp-common-padding: 10px;
  --dp-input-icon-padding: 35px;
  --dp-input-padding: 6px 30px 6px 12px;
  --dp-menu-min-width: 500px;
  --dp-action-buttons-padding: 2px 5px;
  --dp-row-margin: 5px 0;
  --dp-calendar-header-cell-padding: 0.5rem;
  --dp-two-calendars-spacing: 10px;
  --dp-overlay-col-padding: 3px;
  --dp-time-inc-dec-button-size: 32px;
  --dp-menu-padding: 6px 8px;
  --dp-font-size: 1rem;
  --dp-preview-font-size: 0.8rem;
  --dp-time-font-size: 0.8rem;
  --dp-animation-duration: 0.1s;
  --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);
  --dp-transition-timing: ease-out;
}

.dp__theme_light.dp__flex_display {
  font-family: "Umbuntu", sans-serif;
  background: #f2f2f2;
  width: 100%;
  border-radius: 15px;
  border: 1px solid #ddd;
}

.dp__active_date {
  border: none;
}

.dp__cell_inner {
  width: 60px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.dp__menu {
  min-width: 100% !important;
  width: 100% !important;
  border-radius: 15px;
}

.dp__main {
  min-width: 100% !important;
  width: 100% !important;
  border-radius: 15px;
}
.dp__main > div:nth-child(2) {
  min-width: 100% !important;
  width: 100% !important;
  border-radius: 15px;
}

.dp__outer_menu_wrap {
  min-width: 100% !important;
  width: 100% !important;
  border-radius: 15px;
}

.dp__calendar_item {
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 0;
}

.dp__calendar_header_item {
  min-width: 0;
}

.ticket_flow {
  color: black;
}

.personal_info_flow {
  color: black;
}
.personal_info_flow .field {
  margin-bottom: 1rem;
}
.personal_info_flow input[type=text] {
  width: 100%;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  color: black;
  border: 0.5px solid #494949;
}
.personal_info_flow input[type=text]:focus {
  outline: none;
}
.personal_info_flow input[type=email] {
  width: 100%;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  color: black;
  border: 0.5px solid #494949;
  margin-bottom: 1rem;
}
.personal_info_flow input[type=email]:focus {
  outline: none;
}
.personal_info_flow input[type=tel] {
  width: 100%;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  color: black;
  border: 0.5px solid #494949;
  margin-bottom: 1rem;
}
.personal_info_flow input[type=tel]:focus {
  outline: none;
}
.personal_info_flow label {
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1em;
  color: black;
}

.dp__today {
  border: none;
}

.step {
  margin-bottom: 3rem;
}

.tickets {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 -15px;
}
.tickets .item {
  padding: 15px;
}
.tickets .ticket {
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex: 100% 1;
  flex-flow: row nowrap;
  align-items: center;
  padding: 18px 24px;
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;
  background: white;
  border: 1px solid #e6e2d6;
  color: #282828;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.tickets .ticket__controls {
  flex: 30% 1;
  text-align: right;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
}
.tickets .ticket__controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #B9A16B;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #B9A16B;
  cursor: pointer;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tickets .ticket__controls button:hover:not(.disabled) {
  background: #B9A16B;
  color: #fff;
}
.tickets .ticket__controls button.disabled {
  opacity: 0.3;
  cursor: default;
}
.tickets .ticket__controls span {
  display: block;
  min-width: 32px;
  margin: 0 14px;
  text-align: center;
  font-size: 18px;
  pointer-events: none;
}
.tickets .ticket__info {
  display: flex;
  justify-content: center;
  align-items: start;
}
.tickets .ticket__price {
  flex: 15% 0;
  padding: 0 15px;
  text-align: center;
}
.tickets .ticket__name {
  flex: 25% 1;
}

.summary {
  background: #fff;
  border: 1px solid #e6e2d6;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  color: #282828;
  overflow: hidden;
}
.summary .summary__head {
  background: #f7f4ec;
  border-bottom: 1px solid #e6e2d6;
  padding: 16px 24px;
  font-weight: 700;
  font-size: 16px;
}
.summary .summary__body {
  padding: 18px 24px 24px;
}
.summary .order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid #282828;
  margin-top: 14px;
  padding-top: 14px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.summary__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
}

.summary__subtitle {
  margin: 20px 0 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
}

.summary__tickets {
  display: flex;
  flex-flow: column nowrap;
}
.summary__tickets .ticket {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 0;
  border-bottom: 1px solid #eee;
  margin: 0;
}
.summary__tickets .ticket .amount {
  color: #B9A16B;
  font-weight: 700;
  margin-right: 6px;
}
.summary__tickets .ticket .text {
  flex: 1;
}
.summary__tickets .ticket .price {
  margin-left: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.button.continue {
  text-align: center;
  display: block;
  margin-top: 40px;
  background: #282828;
  color: #fff;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-apart {
  display: flex;
  justify-content: space-between;
}

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

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center;
}

.form {
  margin: 0 -10px;
}
.form .field {
  padding: 0 10px;
}

.btn {
  background-color: #cebd63;
  color: #121212;
  padding: 16px;
  border-radius: 30px;
  position: relative;
  border: none;
  font-weight: bold;
  text-align: center;
}
.btn.full {
  width: 100%;
}
.btn.back {
  background-color: #121212;
  color: white;
}

.input-error {
  border: 1px solid #ab0000 !important;
}

.error {
  color: #ab0000;
  font-size: 0.875em;
}

.checkboxes {
  margin: 10px;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label,
input[type=checkbox] + label a {
  transition: color 0.5s ease-in-out;
}

input[type=checkbox] + label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  margin-bottom: 0;
}

input[type=checkbox] + label:before {
  content: "";
  position: absolute;
  /* Anchored to the first line, not the bottom: consent labels wrap to 2-3 lines on phones and a
     bottom-anchored box drifted down to the last line, away from the text it belongs to. */
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #282828;
  margin-right: 20px;
  transition: border-color 0.5s ease-in-out;
}

input[type=checkbox]:checked + label:after {
  border-radius: 0;
  transform: scale(1);
}

input[type=checkbox] + label:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #282828;
  transform: scale(0);
  border-radius: 50%;
  transition: transform 0.25s ease-in-out, border-radius 0.5s ease-in-out, background 0.5s ease-in-out;
}

input[type=checkbox] + label a {
  color: #282828;
  text-decoration: underline;
}

input[type=checkbox] + label,
input[type=checkbox] + label a {
  transition: color 0.5s ease-in-out;
}

/* Checkout step / progress indicator */
.booking-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2.5rem;
}
.booking-progress .bp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(40, 40, 40, 0.35);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.3s ease;
}
.booking-progress .bp-step .bp-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.booking-progress .bp-step.active {
  color: #B9A16B;
}
.booking-progress .bp-step.done {
  color: #B9A16B;
}
.booking-progress .bp-step.done .bp-num {
  background: #B9A16B;
  border-color: #B9A16B;
  color: #fff;
}
.booking-progress .bp-line {
  width: 48px;
  height: 2px;
  background: rgba(40, 40, 40, 0.15);
  margin: 0 14px;
  transition: background 0.3s ease;
}
.booking-progress .bp-line.done {
  background: #B9A16B;
}
@media (max-width: 560px) {
  .booking-progress {
    /* All three labels do not fit, but stripping them left a bare "1 — 2 — 3" that says where
       you can go and not where you are. Keeping the active step's label costs ~60px and
       restores the one piece of information the indicator exists for. */
  }
  .booking-progress .bp-step .bp-label {
    display: none;
  }
  .booking-progress .bp-step.active .bp-label {
    display: inline;
  }
  .booking-progress .bp-line {
    width: 24px;
    margin: 0 7px;
  }
}

/* Vertical timeline for the 3 booking sub-steps (Ημερομηνία → Ποσότητα → Επιβεβαίωση) */
.flow-timeline {
  /* Below 460px the node + connector gutter costs ~48px that the calendar and the ticket
     rows need far more than the decoration. The step numbers stay visible in .booking-progress
     at the top of the page, so nothing is lost by dropping the rail here. */
}
.flow-timeline .step {
  margin-bottom: 0;
}
.flow-timeline .ft-step {
  display: flex;
  gap: 22px;
  position: relative;
  align-items: flex-start;
}
.flow-timeline .ft-node {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #cfc9ba;
  background: #fff;
  color: #b3ab99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}
.flow-timeline .ft-step:not(.ft-last)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: #e2ddd0;
  transition: background 0.3s ease;
}
.flow-timeline .ft-step.done::before {
  background: #B9A16B;
}
.flow-timeline .ft-step.active .ft-node {
  border-color: #B9A16B;
  color: #B9A16B;
}
.flow-timeline .ft-step.done .ft-node {
  background: #B9A16B;
  border-color: #B9A16B;
  color: #fff;
}
.flow-timeline .ft-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 2.5rem;
}
.flow-timeline .ft-body h2 {
  margin-top: 6px;
}
.flow-timeline .ft-step.ft-last .ft-body {
  padding-bottom: 1rem;
}
@media (max-width: 560px) {
  .flow-timeline .ft-step {
    gap: 12px;
  }
  .flow-timeline .ft-node {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .flow-timeline .ft-step:not(.ft-last)::before {
    left: 17px;
    top: 36px;
  }
}
@media (max-width: 460px) {
  .flow-timeline .ft-step {
    display: block;
    gap: 0;
  }
  .flow-timeline .ft-node {
    display: none;
  }
  .flow-timeline .ft-step:not(.ft-last)::before {
    display: none;
  }
  .flow-timeline .ft-body {
    padding-bottom: 2rem;
  }
  .flow-timeline .ft-step.ft-last .ft-body {
    padding-bottom: 0.5rem;
  }
}

/* ── Opening hours ─────────────────────────────────────────────────────────
   Split so the info never competes with the purchase flow:
   .oh-bar      compact status strip above the booking
   .ticket-note reduced/free note inside the ticket-selection step
   .oh-visitor  visitor tips below the flow, small type, above the footer */
.oh-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.75rem;
  padding: 0.7rem 1rem;
  color: #1e1e1e;
  background: #fff;
  border: 1px solid #e7e3da;
  border-left: 3px solid #4caf50;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  /* The dot marks the status, so it has to sit on the status line. Once both spans became full
     rows it was pushed onto a row of its own; taking it out of the flow and hanging it in the
     left padding keeps it beside the first line AND keeps both lines of text aligned. */
  position: relative;
  padding-left: 2.1rem;
  /* Both take a full row: the status and the last-ticket times are two separate statements, and
     side by side the second one reads as a continuation of the first. Forcing the wrap also
     removes the ragged mid-sentence break that happened at in-between widths. */
}
.oh-bar.is-closed {
  border-left-color: #b0b0b0;
}
.oh-bar.is-closed .oh-dot {
  background: #b0b0b0;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}
.oh-bar .oh-dot {
  position: absolute;
  left: 1rem;
  /* padding-top (.7rem) + half of the first line (.85rem x 1.4) - half the dot */
  top: calc(0.7rem + 0.6em - 1px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.22);
}
.oh-bar .oh-bar-status {
  flex: 1 1 100%;
}
.oh-bar .oh-bar-last {
  flex: 1 1 100%;
  color: #555;
}
.oh-bar .oh-bar-last strong {
  color: #1e1e1e;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .oh-bar {
    font-size: 0.8rem;
  }
}

/* Note inside the ticket-selection step — deliberately quiet so it never competes with the
   ticket picker itself; it is a footnote, not a call to action.
   Scoped under .ft-body on purpose: the theme sets `.panathenaicstadium-content p { font: 400 18px/26px }`
   (a `font` shorthand, ≥1024px), which outranks a bare `.ticket-note` and would force 18px. */
.ft-body .ticket-note {
  margin: 0.9rem 0 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #5f5f5f;
  background: rgba(185, 161, 107, 0.09);
  border-left: 2px solid rgba(185, 161, 107, 0.7);
  border-radius: 4px;
}

/* Why a day in the picker is greyed out. Sits directly under the calendar, in the same quiet
   register as .ticket-note — it explains a refusal, it does not advertise anything. */
.ft-body .closed-days {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  line-height: 1.55;
  color: #5f5f5f;
  background: rgba(192, 57, 43, 0.06);
  border-left: 2px solid rgba(192, 57, 43, 0.55);
  border-radius: 4px;
  /* The theme sets `.panathenaicstadium-content li { font: 18px/26px Manrope }` — a `font`
     shorthand, and a size set on the element itself is not something an ancestor can override.
     So every element here that carries text states its own, or the note renders at body-copy
     scale next to the 12.5px visitor tips right below it. Same trap as .ticket-note. */
  /* The dash lives here, not in the template: Vue's compiler condenses away the whitespace
     between two elements when it contains a newline, and the separator then rendered flush
     against the date ("25 Δεκεμβρίου— Christmas"). CSS is also where a separator belongs. */
}
.ft-body .closed-days .closed-days__title,
.ft-body .closed-days .closed-days__list li {
  font-size: 0.8rem;
  line-height: 1.55;
}
.ft-body .closed-days .closed-days__title {
  font-weight: 700;
  color: #444;
  margin-bottom: 0.3rem;
}
.ft-body .closed-days .closed-days__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ft-body .closed-days .closed-days__list li {
  position: relative;
  padding-left: 0.8rem;
  margin: 0 0 0.2rem;
  /* `transform: none` and `border: 0` are the load-bearing lines here.
     ps_styles_2.css styles every list bullet on the page as
     `.panathenaicstadium-content ul li:before { border: 2px solid var(--gold);
     transform: translateX(-20px) }` — a gold ring hung 20px OUTSIDE the text, which works
     there because that ul carries `margin-left: 18px` to hang it into. This box has no
     such gutter, so the untouched transform dragged the dot out past the left border and
     the untouched 2px gold border repainted the 4px dot as a ring. Overriding
     left/top/size alone does not undo either of them. */
}
.ft-body .closed-days .closed-days__list li:last-child {
  margin-bottom: 0;
}
.ft-body .closed-days .closed-days__list li::before {
  content: "";
  position: absolute;
  transform: none;
  border: 0;
  left: 0.1rem;
  /* Centred on the first line (half the line-height, less half the dot) rather than a
     fixed offset, which drifts the moment the font-size resolves differently. */
  top: 0.775em;
  margin-top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.6);
}
.ft-body .closed-days .closed-days__when {
  font-weight: 600;
  color: #444;
}
.ft-body .closed-days .closed-days__why::before {
  content: "—";
  margin: 0 0.35em;
}

/* Days that are open but on a shortened timetable. Same quiet register as .closed-days, in gold
   rather than red: this is an adjustment, not a refusal, and the two lists must not read as one.
   Every text-carrying element states its own font-size — see the .closed-days rule for why. */
.ft-body .limited-days {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  line-height: 1.55;
  color: #5f5f5f;
  background: rgba(185, 161, 107, 0.09);
  border-left: 2px solid rgba(185, 161, 107, 0.7);
  border-radius: 4px;
  /* Separator in CSS, not in the template: Vue condenses away whitespace between sibling
     elements when it contains a newline. Same reason as .closed-days__why. */
}
.ft-body .limited-days .limited-days__title,
.ft-body .limited-days .limited-days__list li {
  font-size: 0.8rem;
  line-height: 1.55;
}
.ft-body .limited-days .limited-days__title {
  font-weight: 700;
  color: #444;
  margin-bottom: 0.3rem;
}
.ft-body .limited-days .limited-days__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ft-body .limited-days .limited-days__list li {
  position: relative;
  padding-left: 0.8rem;
  margin: 0 0 0.2rem;
  /* `transform: none` and `border: 0` undo ps_styles_2.css's
     `.panathenaicstadium-content ul li:before`, which hangs a gold ring 20px outside the
     text — off the edge of a box this narrow. See the .closed-days rule. */
}
.ft-body .limited-days .limited-days__list li:last-child {
  margin-bottom: 0;
}
.ft-body .limited-days .limited-days__list li::before {
  content: "";
  position: absolute;
  transform: none;
  border: 0;
  left: 0.1rem;
  top: 0.775em;
  margin-top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(185, 161, 107, 0.8);
}
.ft-body .limited-days .limited-days__when,
.ft-body .limited-days .limited-days__hours {
  font-weight: 600;
  color: #444;
}
.ft-body .limited-days .limited-days__why::before {
  content: "—";
  margin: 0 0.35em;
}

/* The limited-hours gate. Fixed and full-bleed so it cannot be scrolled past, and below the
   payment loader's z-index (9999) because that one is allowed to cover everything. */
.lh-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(18, 18, 18, 0.6);
  /* The theme's `font` shorthands reach in here too; every line states its own size. */
}
.lh-modal .lh-modal__box {
  width: 100%;
  /* 30rem, not 26: at 26 the two Greek button labels each wrapped to two lines and the
     actions row grew to 80px of chunky buttons. */
  max-width: 30rem;
  padding: 1.5rem;
  text-align: center;
  color: #1e1e1e;
  background: #fff;
  border-radius: 6px;
  border-top: 3px solid #B9A16B;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.lh-modal .lh-modal__title {
  font: 700 1.1rem/1.4 "Manrope", sans-serif;
  margin: 0 0 0.5rem;
  color: #1e1e1e;
}
.lh-modal .lh-modal__intro {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  color: #5f5f5f;
}
.lh-modal .lh-modal__day {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #444;
}
.lh-modal .lh-modal__hours {
  font: 700 1.35rem/1.3 "Manrope", sans-serif;
  margin: 0.15rem 0;
  color: #B9A16B;
}
.lh-modal .lh-modal__why {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #5f5f5f;
}
.lh-modal .lh-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.25rem;
  /* `flex: 1 1 0` keeps the two buttons the same width whatever the labels say — they are
     CMS text constants, so a longer wording must not make one twice the other. No
     white-space: nowrap: a genuinely long label should wrap, not overflow the box. */
}
.lh-modal .lh-modal__actions .btn {
  flex: 1 1 0;
  margin: 0;
  padding: 0.8rem 1rem;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* Visitor tips at the bottom of the page */
.oh-visitor {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e2e2;
  color: #666;
}
.oh-visitor .oh-visitor-heading {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.2rem;
  color: #444;
}
.oh-visitor .oh-visitor-sub {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #555;
}
.oh-visitor .oh-visitor-info, .oh-visitor .oh-visitor-info li, .oh-visitor .oh-visitor-info p {
  color: #555;
}
.oh-visitor .oh-visitor-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.oh-visitor .oh-visitor-info li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.5;
}
.oh-visitor .oh-visitor-info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1.5px solid #B9A16B;
}
.oh-visitor .oh-visitor-info p {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ── Responsive: phones ────────────────────────────────────────────────────
   The booking flow was laid out for desktop only — every row below kept a fixed
   multi-column shape on phones and either overflowed the viewport or clipped its
   own text. Breakpoint 560px matches the one already used by .booking-progress
   and .flow-timeline above. */
/* Reclaim the horizontal space the theme spends on gutters. The booking card sits inside
   `padding: 0 max(1.5rem, …)`, and the timeline indents its body a further ~48px, which left
   the calendar barely 260px for seven columns. */
@media (max-width: 479px) {
  .panathenaicstadium-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-width: 560px) {
  /* Ticket picker. The 148px stepper could not sit beside the name and price in a ~212px card,
     so the "+" button was pushed off the right edge of both the card and the screen. Rather than
     force a second row at a fixed width, let the row wrap: the stepper stays a compact group and
     drops below the name only when it genuinely does not fit, which keeps short ticket names on
     one line and still works for long ones. */
  .tickets {
    margin: 0;
  }
  .tickets > .item {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    padding: 0 0 12px;
  }
  .tickets .ticket {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 14px 16px;
  }
  .tickets .ticket__info {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    align-items: baseline;
    gap: 12px;
  }
  .tickets .ticket__name {
    flex: 0 1 auto;
  }
  .tickets .ticket__price {
    flex: 0 0 auto;
    padding: 0;
    text-align: left;
  }
  .tickets .ticket__controls {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }
  .tickets .ticket__controls span {
    margin: 0 10px;
  }
  /* Personal details: two 165px columns are too narrow for an email address or a phone number. */
  .personal_info_flow .form .field.col-6 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
}
/* Form actions: `col-4` capped each button at a third of the row, which clipped
   "Προχωρήστε στην πληρωμή" mid-word. Size them to their label instead, and stack
   them full width on phones. */
.row.flex-end {
  gap: 10px;
  align-items: stretch;
}
.row.flex-end .btn {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 16px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 560px) {
  .row.flex-end {
    flex-direction: column;
    align-items: stretch;
  }
  .row.flex-end .btn {
    width: 100%;
  }
}

/* Order summary on small phones: tighten the card's own gutters and drop the total a couple of
   steps so "Σύνολο παραγγελίας" and its amount stay on one line instead of wrapping under
   each other, which read as two separate figures. */
@media (max-width: 430px) {
  .summary .summary__head {
    padding: 14px 16px;
  }
  .summary .summary__body {
    padding: 16px 16px 20px;
  }
}
/* Fluid rather than another breakpoint: the label and the amount have to share one line down to
   a 320px screen, and a single step down to 17px still wrapped there. */
.summary .order-total {
  font-size: clamp(15px, 4.6vw, 20px);
}

/* ── Touch targets ─────────────────────────────────────────────────────────
   Several controls are drawn far smaller than a finger: the burger is a 28px plate, the
   breadcrumb home is a 13px icon, and the footer links are bare 23px text. Where the size is
   part of the design, an invisible ::after grows only the hit area and leaves the artwork
   alone; where the control is a list item, real padding is better because it also opens up
   the rhythm between adjacent links. */
.burger-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.breadcrumbs a.breadhome {
  position: relative;
}
.breadcrumbs a.breadhome::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

/* Calendar month/year controls: 35px arrows on a phone are a miss waiting to happen. */
@media (max-width: 560px) {
  .dp__theme_light {
    --dp-month-year-row-height: 44px;
    --dp-month-year-row-button-size: 44px;
  }
}
/* ── Long-form info pages (Terms, Privacy, Cancellation, E-ticketing) ──────
   The theme styles body copy for short marketing blocks: 18px/26px across the full 860px column,
   with 48px between paragraphs. On a legal document that is ~96 characters per line — well past
   the 60–75 where the eye reliably finds the start of the next line — while the oversized gaps
   stop the page reading as one continuous text. This block sets a measure, a tighter vertical
   rhythm, and a real title. */
.info-page {
  /* ~68 characters at 17px: the measure is the single biggest readability win here. */
  max-width: 42rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4.5rem;
  color: #2b2b2b;
  /* A hairline instead of more whitespace: it closes the title and opens the document without
     adding another large gap to a page that already had too many. */
  /* The theme's `font` shorthand at >=1024px outranks a bare `p`, hence the nesting. */
  /* The copy uses a bold-only paragraph as a section heading ("Preamble", "Article 1 – ...").
     Treating it as one gives the document structure without touching the stored rich text. */
  /* Nested lists. Without this they inherit the parent's marker and indent, so a sub-point looks
     exactly like the point it belongs to and the hierarchy disappears — which is what made the
     longer articles hard to scan. A hollow ring one step in reads as subordinate at a glance. */
  /* A lead-in like "Visitors must:" belongs with the list under it, not floating above it. */
}
.info-page .info-page-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1b1b1b;
}
.info-page .info-page-body {
  border-top: 1px solid rgba(40, 40, 40, 0.14);
  padding-top: 2rem;
}
.info-page .info-page-body p {
  margin: 0 0 1.15em;
  font-size: 17px;
  line-height: 1.72;
  color: #2b2b2b;
}
.info-page .info-page-body p > b:only-child,
.info-page .info-page-body p > strong:only-child {
  display: block;
  margin: 2.4em 0 0.1em;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #1b1b1b;
}
.info-page .info-page-body > p:first-child > b:only-child,
.info-page .info-page-body > p:first-child > strong:only-child {
  margin-top: 0;
}
.info-page .info-page-body ul,
.info-page .info-page-body ol {
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
}
.info-page .info-page-body li {
  position: relative;
  margin: 0 0 0.85em;
  padding-left: 1.55em;
  font-size: 17px;
  line-height: 1.72;
  color: #2b2b2b;
  /* Solid, small and aligned to the first line's optical centre. The theme's hollow ring sat
     high and read as a stray character at this text size. */
}
.info-page .info-page-body li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B9A16B;
}
.info-page .info-page-body li:last-child {
  margin-bottom: 0;
}
.info-page .info-page-body li > ul {
  margin: 0.7em 0 0.2em;
  padding-left: 0.2em;
}
.info-page .info-page-body li > ul > li {
  margin-bottom: 0.45em;
  padding-left: 1.35em;
  font-size: 16px;
  color: #444;
}
.info-page .info-page-body li > ul > li::before {
  top: 0.68em;
  width: 5px;
  height: 5px;
  background: transparent;
  border: 1.5px solid rgba(185, 161, 107, 0.85);
}
.info-page .info-page-body li > ul:last-child {
  margin-bottom: 0;
}
.info-page .info-page-body a {
  color: #7a6636;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 767px) {
  .info-page {
    padding: 2.5rem 0 3rem;
  }
  .info-page .info-page-body {
    padding-top: 1.5rem;
  }
  .info-page .info-page-body p,
  .info-page .info-page-body li {
    font-size: 16px;
  }
}

/*# sourceMappingURL=styles.css.map */