/*                          ---                          */
/* -------------------- Fonts MAIN --------------------- */

/* Regular */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/amor-serif-text-pro-regular.woff2') format('woff2'),
       url('/assets/fonts/amor-serif-text-pro-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/amor-serif-text-pro-italic.woff2') format('woff2'),
       url('/assets/fonts/amor-serif-text-pro-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/amor-serif-text-pro-bold.woff2') format('woff2'),
       url('/assets/fonts/amor-serif-text-pro-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* Bold Italic */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/amor-serif-text-pro-bold-italic.woff2') format('woff2'),
       url('/assets/fonts/amor-serif-text-pro-bold-italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

/* ----------------------------------------------------- */

/*                          ---                          */
/* ------------------ Dimensions MAIN ------------------ */
:root {

  /* -- Main navigation */
  --nav-height:          80px;

  --margin-inner:        50px;
  --padding-inner:       50px;

  --max-width:           1440px;

  --input-border-radius: 4px;

  --gap-main:            30px;
  --gap-inner:           10px;

}

@media screen and (min-width: 1241px) {
  :root {
  }
}
@media screen and (max-width: 1240px) {
  :root {
    --margin-inner:      40px;
    --padding-inner:     40px;
  }
}
@media screen and (max-width: 744px) {
  :root {
    --margin-inner:      25px;
    --padding-inner:     25px;
  }
}
@media screen and (max-width: 428px) {
  :root {
    --margin-inner:      20px;
    --padding-inner:     20px;
  }
}
@media only screen and (max-width: 320px) {
  :root {
    --margin-inner:      10px;
    --padding-inner:     10px;
  }
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* -------------------- Colors MAIN -------------------- */
:root {
  --white:            #ffffff;
  --black:            #000000;

  --primary:          #B89B5F;
  --secondary:        #CEB176;
  --highlight-red:    #FF2D16;
  --gray:             #B8B8B8;
  --gray-dark:        #1A1A1A;
  --gray-text-dark:   #4D4D4D;

  --color-plus:       #0FFF00;
  --color-minus:      #FF0000;
  --color-bg-even:    #141414;
  --color-bg-odd:     #1C1B1B;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ------------------- Settings MAIN ------------------- */
* {
  font-family: 'MyCustomFont', Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
*, *::before, *::after {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-color: var(--black);
}
body {
  color: var(--white);
  font-size: 1rem;
  /* font-size: clamp(16px, 4vw, 24px);
  font-size: 4vw; */
}

/* @media screen and (max-width: 744px) { */
  body.disable-scrollbar {
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  body.disable-scrollbar::-webkit-scrollbar {
    display: none;
  }
/* } */

a, img, strong, button, svg, span {
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
a {
  text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p, ul, li, fieldset {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  width: 100%;
  height:  100%;
  display: block;
  object-fit: cover;
  transform-origin: center;
  border-style: none;
}
svg {
  display: block;
}

textarea,
input {
  width: 100%;
  border: 0;
  outline: none;
  box-shadow: none;
}

button {
  outline: none;
  box-shadow: none;
  border: none;
  display: block;
  cursor: pointer;
}  
button:focus,
button:active {
  outline: none;
  box-shadow: none;
  border: none;
}

fieldset {
  border: none;
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* H1 - H6 -------------------------------------------- */
h2 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.5rem;
}

h5 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* Texts ---------------------------------------------- */
.t-gray {
  color: var(--gray);
}
.t-align-center {
  text-align: center;
}
.t-bold {
  font-weight: 700;
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* Header --------------------------------------------- */
/* Header login */
.header-blur-bg.login {
  width: 100%;
  max-width: 800px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap-main) * 2);
}
.header-blur-bg.login::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(calc(-50% - var(--gap-main) * 3)) scaleX(1.5) scaleY(1.5);
  border-radius: 50%;
  background-color: var(--primary);
  filter: blur(100px);
  -webkit-filter: blur(100px);
  z-index: -1;
  opacity: 0.3;
}
.header-blur-bg.login hgroup {
  display: flex;
  flex-direction: column;
  gap: var(--gap-main);
}
.header-blur-bg.login .header-logo img {
  width: 140px;
}

/* Header home */
.header-blur-bg.home {
  width: 100%;
  max-width: 800px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap-main) / 2);
  padding-top: calc(var(--padding-inner) / 2);
}
.header-blur-bg.home::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(calc(-50% - var(--gap-main) * 3)) scaleX(1.5) scaleY(1.5);
  border-radius: 50%;
  background-color: var(--primary);
  filter: blur(100px);
  -webkit-filter: blur(100px);
  z-index: -1;
  opacity: 0.3;
}
.header-blur-bg.home .header-logo img {
  width: 100px;
}
.header-blur-bg.home .header-logo-text {
  margin-bottom: 30px;
}
.header-blur-bg.home hgroup.stav-bodov {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stav-bodov h3 {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: center;
}
.stav-bodov h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  text-align: center;
  color: var(--gray);
  text-transform: uppercase;
}

/* ---------------------------------------------------- */

/*                          ---                         */
/* Main ----------------------------------------------- */
.main-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--padding-inner);
}
.main-inner-wrapper {
  width: 100%;
  max-width: var(--max-width);
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* Navigation ----------------------------------------- */
.header-nav-wrapper {
  width: 100%;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 0 var(--padding-inner); */
  position: absolute;
  top: 0;
  z-index: 1;
}
.header-nav-inner-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--max-width);
  position: relative;
}


.header-nav-top {
  width: 100%;
  height: var(--nav-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}




.header-nav-menu {
  width: 90%;
  min-width: 350px;
  max-width: 350px;
  height: 100vh;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  top: 0;
  right: 0;
  background-color: var(--white);
  padding: var(--nav-height) var(--padding-inner) var(--padding-inner) var(--padding-inner);

  transition: transform 0.3s ease-in-out;
  transform: translateX(100%);
}
.header-nav-menu::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
.header-nav-menu.open {
  transform: translateX(0); /* Posunieme naspäť do viditeľnej zóny */
}



.header-nav-menu-user {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inner);
}
.header-nav-menu-user h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 400;
  color: #B89B5F;
  text-align: center;
}
.header-nav-menu-user h4 b {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
}
.user-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #000000;
}
.user-menu a,
.user-menu button {
  width: 100%;
  height: 100%;
  display: block;
  padding: 12px 20px 10px 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #888888;
  text-transform: uppercase;
  background-color: #f5f5f5;
  text-align: center;
  border-radius: var(--input-border-radius);
}
.user-menu a:hover,
.user-menu button:hover {
  color: var(--white);
  background-color: var(--black);
}





.header-nav-menu-items {
  /* min-height: 500px;
  overflow-y: auto;
  height: 100%; */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  margin: 20px 0;
}
.header-nav-menu-items::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.header-nav-menu-logout {
}


.header-menu-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.header-menu-items li a {
  display: block;
  padding: 20px 20px 17px 20px;
  color: #000000;
  background-color: #f5f5f5;
  border-radius: var(--input-border-radius);
  text-transform: uppercase;
  font-weight: 700;
}
.header-menu-items li a.menu-item-active {
  background-color: var(--primary);
  color: var(--white);
  pointer-events: none;
}
.header-menu-items li a:hover {
  background-color: #e2e2e2;
}



.nav-btn-ean,
.nav-btn-navigation {
  width: var(--nav-height);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-btn-ean button,
.nav-btn-navigation button {
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  mask-size: 22px;
  mask-position: center;
  mask-repeat: no-repeat;
  padding: 0 !important;
}


.nav-btn-ean button {
  mask-image: url('./../img/icon-btn-ean.svg');
}
.nav-btn-navigation button {
  /* mask-image: url('./../img/icon-btn-ean.svg'); */
}




.primary {
  stroke: var(--primary);
}

.secondary {
  fill: none;
  stroke: var(--gray);
  stroke: var(--primary);
}

nav .header-nav-btn .active .secondary {
  stroke: var(--primary);
}
nav .header-nav-btn .active .primary {
  stroke: var(--gray);
}



nav .header-nav-btn {
  width: var(--nav-height);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform: translateX(29px); */
  position: relative;
  z-index: 111;
}
nav .header-nav-btn button {
  width: 80%;
  height: 80%;
  cursor: pointer;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent;
}
nav .header-nav-btn svg {
  width: 100%;
  height: 100%;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}




nav .header-nav-btn .active svg {
  transform: rotate(90deg);
}
nav .header-nav-btn path {
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
nav .header-nav-btn path:nth-child(1) {
  transform-origin: 36% 40%;
}
nav .header-nav-btn path:nth-child(2) {
  stroke-dasharray: 29 299;
}
nav .header-nav-btn path:nth-child(3) {
  transform-origin: 35% 63%;
}
nav .header-nav-btn path:nth-child(4) {
  stroke-dasharray: 29 299;
}
nav .header-nav-btn path:nth-child(5) {
  transform-origin: 61% 52%;
}
nav .header-nav-btn path:nth-child(6) {
  transform-origin: 62% 52%;
}
nav .header-nav-btn .active path:nth-child(1) {
  transform: translateX(9px) translateY(1px) rotate(45deg);
}
nav .header-nav-btn .active path:nth-child(2) {
  stroke-dasharray: 225 299;
  stroke-dashoffset: -72px;
}
nav .header-nav-btn .active path:nth-child(3) {
  transform: translateX(9px) translateY(1px) rotate(-45deg);
}
nav .header-nav-btn .active path:nth-child(4) {
  stroke-dasharray: 225 299;
  stroke-dashoffset: -72px;
}
nav .header-nav-btn .active path:nth-child(5) {
  transform: translateX(9px) translateY(1px) rotate(-45deg);
}
nav .header-nav-btn .active path:nth-child(6) {
  transform: translateX(9px) translateY(1px) rotate(45deg);
}



/* ---------------------------------------------------- */

/*                          ---                         */
/* Login ---------------------------------------------- */
.login-wrapper {
  width: 100%;
  min-height: 100vh;


  min-height: calc(100vh - 60px);


  display: flex;
  gap: calc(var(--gap-main) * 4);
  padding: var(--padding-inner) 0;
}
.login-section,
.slider-section {
  width: 100%;
}
.login-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gap-main) * 2);
}
.slider-section {
  border: 1px solid var(--primary);
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* PopUp ---------------------------------------------- */
.popup-show-wrapper {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-inner);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11111;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
  display: flex;
}
.popup-show-wrapper.open {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.popup-show-wrapper-inner {
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* Show EAN Code */
.show-ean-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) - 18px) var(--padding-inner);
  background-color: #000000;
  border-radius: var(--input-border-radius);
}

.popup-ean-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--white);
}
.popup-ean-header h4 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--gray);
}
.popup-ean-header h2 {
  font-size: 2.5rem;
  text-align: center;
}

.popup-ean-img {
  margin: 35px 0 30px 0;
  overflow: hidden;
  border-radius: var(--input-border-radius);
}

.btn-download-ean {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  background-color: transparent;
  padding: 17px 20px 15px 20px;
  text-transform: uppercase;
}
.btn-download-ean:hover {
  color: var(--white);
}
.popup-btn-close {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #ffffff; */
  cursor: pointer;
}
.popup-btn-close button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  mask-size: 25px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-image: url('./../img/icon-btn-close.svg');
}
.popup-btn-close button:hover {
  background-color: var(--white);
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* Home ----------------------------------------------- */
.home-wrapper {
  width: 100%;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-inner);
  overflow: hidden;
}
.home-inner-wrapper {
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gap-main) * 2);
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* Copyright footer ----------------------------------- */
.copyright-footer {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--padding-inner);
}
.copyright-footer-inner {
  width: 100%;
  max-width: var(--max-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--gray-dark);
}
.copyright-footer-content {
  color: var(--gray-text-dark);
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* All transactions table ----------------------------- */
.all-transactions-table-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inner);
}
.all-transactions-table-wrapper h4 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray);
}

.all-transactions-table-wrapper table {
  width: 100%;
  max-width: var(--max-width);
  font-size: 0.8rem;
}


.table-header {
  color: #4A4A4A;
  text-transform: uppercase;
  font-weight: 700;
  display: none;
}


.table-body {
  /* border: 1px solid red; */
}

.table-row {
  height: 54px;
  display: flex;
  align-items: center;

  border-bottom: 4px solid rgb(0, 0, 0);
}
.table-row:nth-child(odd) {
  background-color: var(--color-bg-odd);
}
.table-row:nth-child(even) {
  background-color: var(--color-bg-even);
}


.table-cell.date {
  width: 100px;
  text-align: right;
}




.table-cell.status {
  width: 11px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-cell.status svg {
  transform: translateX(-4px);
}
.table-cell.status.plus .icon-status {
  fill: var(--color-plus);
}
.table-cell.status.minus .icon-status {
  fill: var(--color-minus);
}
.table-cell.status.minus .icon-background {
  fill: #000000;
}

.table-cell.status-icon {
  width: 24px;
  min-height: 24px;
  mask-position: center;
  mask-size: 24px;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 24px;
  -webkit-mask-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-cell.status-icon.plus {
  background-color: var(--color-plus);
  mask-image: url('./../img/icon-plus.svg');
  -webkit-mask-image: url('./../img/icon-plus.svg');
}
.table-cell.status-icon.minus {
  background-color: var(--color-minus);
  mask-image: url('./../img/icon-minus.svg');
  -webkit-mask-image: url('./../img/icon-minus.svg');
}
.table-cell.status-icon.plus,
.table-cell.status-icon.minus {
  background-color: #6C6C6C;
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 100%;
}

.fieldset-single {
  border: none;
  padding: 0;
  margin-bottom: 20px;
}

fieldset {
  border: 1px solid #666;
  padding: 15px;
  border-radius: 6px;
}

legend {
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #fff;
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: #fff;
}

.form-group input {
  padding: 6px 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.popup-show-wrapper-inner h3 {
  color: var(--primary);
  margin-bottom: 20px;
}

.form-group {
    margin-bottom: 4px;
}

.table-cell.xxx, .table-cell.date {
    margin-right: 5%;
}

.gdpr-hidden {
  display: none !important;
}
/* ---------------------------------------------------- */

/*                          ---                         */
/* xxx ------------------------------------------------ */
/* ---------------------------------------------------- */

/*                          ---                         */
/* xxx ------------------------------------------------ */
/* ---------------------------------------------------- */

/*                          ---                         */
/* xxx ------------------------------------------------ */
/* ---------------------------------------------------- */

/*                          ---                         */
/* xxx ------------------------------------------------ */
/* ---------------------------------------------------- */

/*                          ---                         */
/* xxx ------------------------------------------------ */
/* ---------------------------------------------------- */