:root {
  --etBlack: #000000;
  --etWhite: #FFFFFF;
  --etGray: hsl(0, 0%, 36%);
  --etWhatsapp: #25d366;

  --etPrimary: #464646;
  --etHeaderSecondary: #515050;
  --etLinkHover: #ef660a;

  --etHeaderHeight: 150px;
}

@font-face {
  font-family: 'Bold';
  src: url('../../../resources/fonts/Roboto/Roboto-Bold.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Medium';
  src: url('../../../resources/fonts/Roboto/Roboto-Medium.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Regular';
  src: url('../../../resources/fonts/Roboto/Roboto-Regular.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Thin';
  src: url('../../../resources/fonts/Roboto/Roboto-Thin.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Text Styles */
body {
  font-family: 'Regular', sans-serif;
}

a.primary-link {
  color: var(--etBlack);

  text-decoration: none;
}
a.primary-link:hover {
  color: var(--etLinkHover);
}

/* Header */
body {
  padding-top: var(--etHeaderHeight);
}
.fixed-top-container {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030; 
  background-color: white;
}
.fixed-top-container .container {
  max-width: 1240px;
}

.head.primary-link {
  font-family: 'Regular', sans-serif;
  font-size: 16px;
}

.header-logo {
  max-width: 400px; 
}

@media (max-width: 575px) {
  .header-logo {
      max-width: 330px; 
  }
}

@media (max-width: 400px) {
  .input-group > .form-control {
    max-width: 150px; 
  }
}

@media (max-width: 300px) {
  .input-group > .form-control {
      max-width: 100px; 
  }
}

/* Footer */
footer {
  font-family: 'Regular', sans-serif;
  font-size: 16px;
}
footer img {
  padding-top: 8px;
  padding-bottom: 14px;
}
footer h3 {
  font-family: 'Medium', sans-serif;
  font-size: 20px;
  color: var(--etPrimary);

  padding-top: 4px;
  padding-bottom: 5px;
}
footer .socialMedia {
  padding-top: 0px;
}

/* Navigation */
nav .headerCategoryLink {
  font-family: 'Regular', sans-serif;
  font-size: 20px;
  color: var(--etWhite);
  background-color: var(--etHeaderSecondary);

  padding-top: 14px;
  padding-bottom: 15px;
  padding-right: 30px;
  padding-left: 30px;
  border-bottom-right-radius: 20px;
  text-decoration: none;
}
nav .dropdown-menu {
  transform: translateY(10px);
  min-width: 300px;
  margin: 0;
  padding: 0;
  margin-left: -2px;
}
.dropdown-divider {
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 0px;
}

/* Tree Link */
a.tree-link {
  text-decoration: none;
  color: black;
}

@media (max-width: 575px) {
  a.tree-link {
    font-size: 12px;
  }
}

a.tree-link-selected {
  text-decoration: none;
  color: var(--etLinkHover);
}

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

@media (max-width: 575px) {
  .tree-link {
    font-size: 12px;
  }
}

/* Category Image */
.image-overlay-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: auto;
  border-radius: 15px;
  overflow: hidden;
}

.image-overlay-container img {
  width: 100%;
  border-radius: 15px;
  transition: transform 0.5s ease, border-radius 0.5s ease;
  transform-origin: center;
}

.image-overlay-container:hover img {
  transform: scale(1.1);
}

.overlay-text-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 10px;
}

.overlay-text-area p {  
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0;
  color: white;
  font-size: 24px;
}

@media (max-width: 575px) {
  .overlay-text-area p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: 0;
    color: white;
    font-size: 14px;
  }
}

/* Category Menu */
.table tbody tr:last-child td {
  border-bottom: none;
}

.table-container {
  border: 1px solid #dee2e6;
  border-radius: 5px;
  overflow: hidden;
}

.table {
  margin-bottom: 5px;
}

/* Product List */
.table-product-detail thead {
  background-color: #6C757D; /* 108, 117, 125 renginde */
  color: white;
}

.table-product-detail-title {
  font-family: 'Medium', sans-serif;  
  font-size: 14px;
  color: var(--etWhite);
}

.table-product-detail-stockInfo {
  font-size: 14px;
  color: var(--etBlack);
}

.product-detail-title {
  font-size: 32px;
  color: var(--etBlack);
}


@media (max-width: 575px) {
  .product-detail-title {
    margin-top: 10px;
    font-size: 18px;
  }
}

.product-detail-code {
  margin-top: 10px;
  font-size: 14px;
  color: var(--etGray);
}

@media (max-width: 575px) {
  .product-detail-code {
    font-size: 12px;
  }
}

.product-detail-price {
  margin-top: 15px;
  font-size: 24px;
  color: var(--etPrimary);
}

.product-detail-note {
  margin-top: 15px;
  font-size: 14px;
  color: var(--etGray);
}

.product-detail-link {
  text-decoration: none;
  color: inherit;
}

.product-detail-link:hover {
  color: var(--etLinkHover);
}

.product-detail-whatsapp-button {
  background-color: var(--etWhatsapp);
  border-color: var(--etWhatsapp);
  font-size: 14px;
}

.product-detail-email-button {
  background-color: var(--etPrimary);
  border-color: var(--etPrimary);
  font-size: 14px;
}

.product-detail-phone-button {
  background-color: var(--etGray);
  border-color: var(--etGray);
  font-size: 14px;
}

.product-detail-whatsapp-button:hover {
  background-color: var(--etWhatsapp);
  border-color: var(--etWhatsapp);
}

.product-detail-email-button:hover {
  background-color: var(--etPrimary);
  border-color: var(--etPrimary);
}

.product-detail-phone-button:hover {
  background-color: var(--etGray);
  border-color: var(--etGray);
}

.product-detail-description {
  margin-top: 15px;
  color: var(--etGray);
}

.product-detail-link .card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-detail-link .card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}


.product-list-card-title {
  margin-top: -10px;
  font-family: 'Regular', sans-serif;
  font-size: 18px;
  color: var(--etGray);
  text-align: center;
}

@media (max-width: 575px) {
  .product-list-card-title {
    font-size: 14px;
  }
}

.product-list-card-code {
  margin-top: -10px;
  font-family: 'Bold', sans-serif;
  font-size: 20px;
  color: var(--etBlack);
  text-align: center;
}

@media (max-width: 575px) {
  .product-list-card-code {
    font-size: 16px;
  }
}

.product-list-card-stock {
  margin-top: -10px;
  font-family: 'Medium', sans-serif;
  font-size: 12px;
  color: var(--etBlack);
  text-align: center;
}

@media (max-width: 575px) {
  .product-list-card-stock {
    font-size: 13px;
  }
}

.product-list-card-price {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 5px;
  padding-bottom: 5px;

  font-size: 22px;
  color: var(--etPrimary);
  text-align: center;
  border-top: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
}

@media (max-width: 575px) {
  .product-list-card-price {
    font-size: 17px;
  }
}

.product-list-card-no-price {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 9px;
  padding-bottom: 9px;

  font-size: 16px;
  color: var(--etGray);
  text-align: center;
  border-top: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
}

@media (max-width: 575px) {
  .product-list-card-no-price {
    font-size: 12px;
  }
}


hr {
  height: 1px; 
  background-color: #5B5B5B; 
  border: none; 
  margin: 0; 
  padding: 0; 
}

/* Carousel */
.carousel-inner img {
  width: 100%;
  margin: auto;
  min-height: 200px;
}

/* Border */
.border {
  border: 1px solid #dee2e6;
  border-radius: 5px;
  overflow: hidden;
}

table.dataTable td:nth-child(2) {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer */
footer {
  background-color: #f2f2f2;
  padding: 25px;
}

/* Whatsapp */
.whatsapp-icon {
  position: fixed;
  bottom: 20px; 
  left: 20px;  
  z-index: 1000;
  background-color: var(--etWhatsapp); 
  color: white;
  border-radius: 50%;
  width: 50px; 
  height: 50px; 
  padding: 12px;
  font-size: 26px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
  cursor: pointer;
  line-height: 20px; 
  text-align: center; 
}

.whatsapp-icon:hover {
  background-color: var(--etWhatsapp);
}