/* Theme Color and Typography Variables */
/* Generated from custom_color.css.php parameters */

:root {
  /* Color Variables */
  --body-background-color: #ffffff;
  --body-fixed-content-background-color: #ffffff;
  --body-headlines-color: #041640;
  --body-links-color: #041640;
  --body-links-hover-color: #2F9084;
  --body-text-color: #041640;
  --box-categories-border-color: #eeeeee;
  --box-categories-links-active-color: #999999;
  --button-background-color: #ffffff;
  --button-hover-background-color: #2F9084;
  --button-hover-text-color: #ffffff;
  --button-text-color: #2F9084;
  --custom-block-border-color: #e5e5e5;
  --customfooter-background-color: #31363C;
  --customfooter-headlines-color: #bbbbbb;
  --customfooter-text-color: #bbbbbb;
  --dropdown-background-color: #ffffff;
  --dropdown-border-color: #494b56;
  --dropdown-item-hover-background-color: #ffffff;
  --dropdown-text-color: #666666;
  --footer-background-color: #012060;
  --footer-headlines-color: #FFFFFF;
  --footer-text-color: #CFDCF5;
  --input-background-color: #f2f2f2;
  --input-border-color: #d9d9d9;
  --input-focus-border-color: #787c90;
  --input-text-color: #666666;
  --menu-icon-plus-minus-color: #2F9084;
  --menu-main-links-color: #ffffff;
  --menu-main-links-hover-color: #4FBDB5;
  --modern-simple-background-color: #ffffff;
  --modern-simple-box-background-color: #ffffff;
  --modern-simple-input-background-color: #ffffff;
  --pagination-link-active-border-color: #012060;
  --pagination-link-border-color: #e5e5e5;
  --price-in-cart-color: #4f7fff;
  --price-new-text-color: #212121;
  --price-old-text-color: #333333;
  --price-text-color: #4f7fff;
  --product-filter-icon-color: #999999;
  --product-filter-icon-hover-color: #eeeeee;
  --product-grid-button-background-color: #4f7fff;
  --product-grid-button-hover-background-color: #000000;
  --product-grid-button-hover-text-color: #ffffff;
  --product-grid-button-text-color: #ffffff;
  --product-list-button-background-color: #ffffff;
  --product-list-button-border-color: #4f7fff;
  --product-list-button-hover-background-color: #4f7fff;
  --product-list-button-hover-border-color: #4f7fff;
  --product-list-button-hover-text-color: #ffffff;
  --product-list-button-text-color: #4f7fff;
  --rating-icon-active-background-color: #c18107;
  --rating-icon-background-color: #9d9ea8;
  --refine-results-checkbox-active-background-color: #F28796;
  --refine-results-checkbox-active-tick-color: #eeeeee;
  --refine-results-slider-background-color: #e6e6e6;
  --refine-results-slider-bar-color: #666666;
  --sale-background-color: #e74c3c;
  --sale-color-text: #ffffff;
  --search-input-text-color: #2F9084;
  --second-button-background-color: #2F9084;
  --second-button-border-color: #2F9084;
  --second-button-hover-background-color: #ffffff;
  --second-button-hover-border-color: #2F9084;
  --second-button-hover-text-color: #2F9084;
  --second-button-text-color: #ffffff;
  --submenu-background-color: #ffffff;
  --submenu-border-color: #ffffff;
  --submenu-link-color: #212121;
  --submenu-link-hover-color: #2F9084;
  --submenu-text-color: #212121;
  --tab-link-active-border-color: #4f7fff;
  --tab-link-active-color: #4f7fff;
  --tab-link-color: #2e2f36;
  --table-border-color: #e5e5e5;
  --top-bar-background-color: #4f62ff;
  --top-bar-border-color: #4f62ff;
  --top-bar-text-color: #ffffff;
  --top-links-color: #2F9084;
  --tsearch-input-text-color: #494b56;

  /* Typography Variables */
  --body-font-px: 18px;
  --body-font-smaller-px: 10px;
  --body-font-weight: 4;
  --button-font-px: 16px;
  --button-font-transform: 0;
  --button-font-weight: 4;
  --categories-bar-weight: 5;
  --custom-price-weight: bold;
  --footer-headlines-weight: 5;
  --headlines-weight: 5;
  --page-name-weight: 5;

  /* Layout Variables */
  --carousel-bullet-active-background: 000000;
  --carousel-bullet-background: ffffff;
  --carousel-button-background: 31363C;
  --carousel-button-hover-background: 31363C;
  --cart-icon: data/theme/icons/cart-white-1020224_030519140207.png;
  --categories-bar-px: 16;
  --categories-bar-spacing: 0px;
  --categories-bar-transform: capitalize;
  --custom-price-px: 18;
  --custom-price-px-medium: 16;
  --custom-price-px-old-price: 12;
  --custom-price-px-small: 12;
  --footer-headlines-px: 18;
  --footer-headlines-spacing: 0px;
  --footer-headlines-transform: 0;
  --headlines-px: 40;
  --headlines-transform: 0;
  --menu-background-gradient-bottom: #002060;
  --menu-background-gradient-top: #002060;
  --menu-main-links-hover-border-bottom: #ffffff00;
  --page-name-px: 40;
  --page-name-spacing: 0px;
  --page-name-transform: 0;
  --slider-bullet-active-background: #4FBDB5;
  --slider-bullet-background: #FFFFFF;
  --slider-button-background: #ffffff;
  --top-background-gradient-bottom: #002060;
  --top-background-gradient-top: #002060;
}

/* ========================================
   Theme Style Application
   ======================================== */

/* Body and General Text */
body {
  color: var(--body-text-color);
  background-color: var(--body-background-color);
  font-size: var(--body-font-px);
}

/* Links */
a {
  color: var(--body-links-color);
}

a:hover {
  color: var(--body-links-hover-color);
}

/* Headlines */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--body-headlines-color);
  font-weight: var(--headlines-weight);
}

h1 {
  font-size: var(--headlines-px);
}

/* Top Bar */
#top,
.top-bar {
  background: linear-gradient(to bottom, var(--top-background-gradient-top), var(--top-background-gradient-bottom));
  color: var(--top-bar-text-color);
  border-color: var(--top-bar-border-color);
}

#top a,
.top-bar a {
  color: var(--top-links-color);
}

/* Main Menu */
.menu,
#menu,
nav.main-menu {
  background: linear-gradient(to bottom, var(--menu-background-gradient-top), var(--menu-background-gradient-bottom));
}

.menu a,
#menu a,
nav.main-menu a {
  color: var(--menu-main-links-color);
  font-size: var(--categories-bar-px);
  font-weight: var(--categories-bar-weight);
  text-transform: var(--categories-bar-transform);
  letter-spacing: var(--categories-bar-spacing);
}

.menu a:hover,
#menu a:hover,
nav.main-menu a:hover {
  color: var(--menu-main-links-hover-color);
  border-bottom-color: var(--menu-main-links-hover-border-bottom);
}

/* Megamenu wrapper and main links */
.megamenu-wrapper,
.megamenuToogle-wrapper {
  background: linear-gradient(to bottom, var(--menu-background-gradient-top), var(--menu-background-gradient-bottom));
}

ul.megamenu>li>a,
.megamenuToogle-wrapper .container .background-megamenu {
  color: var(--menu-main-links-color);
}

.megamenuToogle-wrapper .container>div span {
  background: var(--menu-main-links-color);
}

/* Submenus */
.sub-menu,
.dropdown-menu {
  background-color: var(--submenu-background-color);
  border-color: var(--submenu-border-color);
  color: var(--submenu-text-color);
}

.sub-menu a,
.dropdown-menu a {
  color: var(--submenu-link-color);
}

.sub-menu a:hover,
.dropdown-menu a:hover {
  color: var(--submenu-link-hover-color);
}

/* Megamenu specific styles */
ul.megamenu li .sub-menu .content {
  color: var(--submenu-text-color);
  background-color: var(--submenu-background-color);
}

ul.megamenu li .sub-menu .content a {
  color: var(--submenu-link-color);
}

ul.megamenu li .sub-menu .content a:hover {
  color: var(--submenu-link-hover-color);
}

@media (max-width: 960px) {
  .responsive ul.megamenu>li>a {
    color: var(--submenu-text-color);
  }

  .responsive .megamenu-wrapper {
    background-color: var(--submenu-background-color) !important;
  }
}

/* Buttons */
.button,
.btn,
button,
input[type='submit'] {
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  font-size: var(--button-font-px);
  font-weight: var(--button-font-weight);
}

.button:hover,
.btn:hover,
button:hover,
input[type='submit']:hover {
  color: var(--button-hover-text-color);
  background-color: var(--button-hover-background-color);
}

/* Secondary Buttons */
.button-secondary,
.btn-secondary {
  color: var(--second-button-text-color);
  background-color: var(--second-button-background-color);
  border-color: var(--second-button-border-color);
}

.button-secondary:hover,
.btn-secondary:hover {
  color: var(--second-button-hover-text-color);
  background-color: var(--second-button-hover-background-color);
  border-color: var(--second-button-hover-border-color);
}

/* Input Fields */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
textarea,
select {
  color: var(--input-text-color);
  background-color: var(--input-background-color);
  border-color: var(--input-border-color);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--input-focus-border-color);
}

/* Dropdowns */
.dropdown,
select {
  color: var(--dropdown-text-color);
  background-color: var(--dropdown-background-color);
  border-color: var(--dropdown-border-color);
}

/* Pricing */
.price,
.product-price {
  color: var(--price-text-color);
  font-size: var(--custom-price-px);
  font-weight: var(--custom-price-weight);
}

.price-new,
.special-price {
  color: var(--price-new-text-color);
}

.price-old,
.old-price {
  color: var(--price-old-text-color);
  font-size: var(--custom-price-px-old-price);
}

/* Product Grid Buttons */
.product-grid .button,
.product-thumb .button {
  color: var(--product-grid-button-text-color);
  background-color: var(--product-grid-button-background-color);
}

.product-grid .button:hover,
.product-thumb .button:hover {
  color: var(--product-grid-button-hover-text-color);
  background-color: var(--product-grid-button-hover-background-color);
}

/* Sale Badges */
.sale,
.badge-sale,
.label-sale {
  color: var(--sale-color-text);
  background-color: var(--sale-background-color);
}

/* Tables */
table {
  border-color: var(--table-border-color);
}

table td,
table th {
  border-color: var(--table-border-color);
}

/* Pagination */
.pagination a,
.pagination span {
  border-color: var(--pagination-link-border-color);
}

.pagination .active,
.pagination a:hover {
  border-color: var(--pagination-link-active-border-color);
}

/* Tabs */
.nav-tabs a,
.tab-link {
  color: var(--tab-link-color);
}

.nav-tabs .active a,
.tab-link.active {
  color: var(--tab-link-active-color);
  border-bottom-color: var(--tab-link-active-border-color);
}

/* Rating Stars */
.rating .fa-star,
.star-rating .star {
  color: var(--rating-icon-background-color);
}

.rating .fa-star.active,
.star-rating .star.active {
  color: var(--rating-icon-active-background-color);
}

/* Footer */
footer,
.footer {
  background-color: var(--footer-background-color);
  color: var(--footer-text-color);
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
  color: var(--footer-headlines-color);
  font-size: var(--footer-headlines-px);
  font-weight: var(--footer-headlines-weight);
}

/* Custom Footer Area */
.custom-footer {
  background-color: var(--customfooter-background-color);
  color: var(--customfooter-text-color);
}

.custom-footer h1,
.custom-footer h2,
.custom-footer h3,
.custom-footer h4,
.custom-footer h5,
.custom-footer h6 {
  color: var(--customfooter-headlines-color);
}

/* Carousel Controls */
.owl-carousel .owl-nav button,
.carousel-control {
  background-color: var(--carousel-button-background);
}

.owl-carousel .owl-nav button:hover,
.carousel-control:hover {
  background-color: var(--carousel-button-hover-background);
}

.owl-carousel .owl-dots .owl-dot span,
.carousel-indicators li {
  background-color: var(--carousel-bullet-background);
}

.owl-carousel .owl-dots .owl-dot.active span,
.carousel-indicators .active {
  background-color: var(--carousel-bullet-active-background);
}

/* Fix for Product Description Overlap and Learn More Visibility */
.home-cat .text_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-cat .text_wrapper>.content_text {
  padding-top: 0;
  overflow: hidden;
}

.home-cat .text_wrapper .content_text h3 {
  margin: 18px 0 !important;
}

.home-cat .text_wrapper .content_text p {
  font-size: 18px;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.home-cat .container>div:hover .text_wrapper .content_text p {
  max-height: 240px;
  opacity: 1;
}

.home-cat .text_wrapper .link {
  margin-bottom: 20px;
  text-align: center;
  z-index: 10;
  /* Ensure it's on top */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.home-cat .text_wrapper .link a {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.home-cat .container>div:hover .text_wrapper .link {
  opacity: 1;
  max-height: 60px;
}

.home-cat .text_wrapper .link a:hover {
  background-color: var(--button-hover-background-color);
  color: var(--button-hover-text-color);
}

.home-cat .text_wrapper .link a:after {
  content: none;
  /* Remove the arrow icon if we are making it a button, or keep it? Let's remove for cleaner button look */
}