/* ------------------------------------------------------------------------------------------------------zaciatok SUBSCRIPTION TABLE CSS*/


/* Wrapper for centering and padding */
.subscription-table-wrapper {
  width: 100%; /* Increased by 20% from 1400px */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Customizing the Tier Title */
.subscription-tier-title {
  font-family: 'Montserrat', sans-serif; /* Font */
  font-size: 20px; /* Font size */
  font-weight: 800;
  color: #1a1a1a; /* White text color */
  text-align: left; /* Center align */
  margin-bottom: 0px; /* Spacing below */
}

.feature-list { /* toto ovlada text feature na lavej strane tabulky aj s podtrhnutim */
  font-size: 13px;
  font-weight: bold;
  color: #f0f0f0;
  border-bottom: 1px solid #2d2d2d;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 95%;
}

.tabulkatexty-fiberglass { /* toto ovlada text feature na lavej strane tabulky aj s podtrhnutim */
  font-size: 13px;
  font-weight: bold;
  color: #f0f0f0;
  border-bottom: 0px solid #2d2d2d;
  padding-bottom: 0px;
  padding-top: 0px;
  width: 80%;
  margin-left: 10%;

}

.feature-list-table { /* toto ovlada text v tabulke */
  font-size: 13px;
  font-weight: bold;
  color: #f0f0f0;
  border-bottom: 1px solid #2d2d2d;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.feature-list-table-carbon { /* toto ovlada text v tabulke */
  font-size: 13px;
  font-weight: bold;
  color: #f0f0f0;
  border-bottom: 1px solid #303a38;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.feature-list-table-kevlar { /* toto ovlada text v tabulke pre Kevlar */
  font-size: 13px;
  font-weight: bold;
  color: #f0f0f0;
  border-bottom: 1px solid #7a8a6a;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.feature-list-container {
  display: flex; /* Enables Flexbox */
  justify-content: center; /* Horizontally centers the text */
  
   /* Vertically centers the text */
  height: 100%; /* Ensure it takes up full height of the container */
  text-align: center; /* Center-align the text itself */
  width: calc(25% - 5px);
}

.feature-list-container-posledny {
  width: calc(25% - 5px);
}

/* Updated widths - feature list column separate, 4 tier columns */
.feature-list-container {
  width: calc(25% - 5px);
}

/* Updated widths from 25% to ~18.75% for 4 tier columns (with feature column taking 25%) */
.freetier { 
  width: calc(18.75% - 5px);
  margin-right: 1px;
  margin-left: 1px;
  border-right: 2px solid #f0f0f0; /* Right border only */
  border-left: 2px solid #f0f0f0; /* Left border in blue */
  border-top: 2px solid #f0f0f0; /* Top border in green */
  border-bottom: 2px #f0f0f0; /* Bottom border in yellow */
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  background-color: #F9F9F9; 
}

.freestvorcek { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #515151; /* Right border only */
  border-left: 1px solid #515151;
  background-color: #1f1f1f;
  width: calc(18.75% - 5px);
}

.freestvorcekzoznam { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #515151; /* Right border only */
  border-left: 1px solid #515151;
  border-left: 1px solid #515151;
  background-color: #1f1f1f;
  width: calc(18.75% - 5px);
}

.freestvorcekzoznam-posledny { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #515151; /* Right border only */
  border-left: 1px solid #515151;
  border-bottom: 1px solid #515151;
  background-color: #1f1f1f;
  width: calc(18.75% - 5px);
}

/* NEW: Kevlar Tier Styles - matching Carbon tier structure */
.kevlartier {
  width: calc(18.75% - 5px);
  margin-right: 1px;
  margin-left: 1px;
  border-right: 2px solid #B8CB8A; /* Right border only */
  border-left: 2px solid #B8CB8A;
  background-color: #B8CB8A;/* Background color */
  border-top: 2px solid #B8CB8A; /* Top border */
  border-bottom: 2px solid #B8CB8A; /* Bottom border */
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  padding: 0; /* Match Carbon tier */
}

.kevlartier .vc_column-inner {
  background-color: #B8CB8A;
  padding: 35px 21px 0px !important; /* Match Carbon/Fiberglass tier padding */
  display: flex !important; /* Enable flexbox for vertical stretching */
  flex-direction: column !important; /* Stack children vertically */
  height: 100% !important; /* Take full height */
}



.kevlarstvorcek { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #7a8a6a; /* Right border only */
  border-left: 1px solid #7a8a6a;
  background-color: #272c21;
  width: calc(18.75% - 5px);
}

.kevlarstvorcekzoznam { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #7a8a6a; /* Right border only */
  border-left: 1px solid #7a8a6a;
  background-color: #272c21;
  width: calc(18.75% - 5px);
}

.kevlarstvorcekzoznam-posledny { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #7a8a6a; /* Right border only */
  border-left: 1px solid #7a8a6a;
  border-bottom: 1px solid #7a8a6a;
  background-color: #272c21;
  width: calc(18.75% - 5px);
}

.ikonkafajkakevlar { /*ikona kevlartier*/
border-bottom: 1px solid #7a8a6a;
  width: 80%; /* Adjust this value to control the length of the border */
  margin: 0 auto; /* Center the element */
}

.subscription-tier-price-kevlar {
  font-family: 'Roboto', sans-serif;
  font-size: 45px; /* Larger font size for price */
  font-weight: 500;
  color: #1a1a1a;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0px;/* Adjust spacing above */
}

.subscription-tier-price-kevlar-month {
  font-family: 'Roboto', sans-serif;
  font-size: 20px; /* Larger font size for price */
  font-weight: 600;
  color: #1a1a1a;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0px;/* Adjust spacing above */
}

.subscribe-btn-kevlar {
  background-color: #1c2221; /* Button background color */
  align-content: center;
  color: #fff; /* Text color (white) */
  font-size: 20px; /* Font size for the button text */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;/* Font family */
  font-style: italic;
  padding: 6px 0; /* Padding inside the button */
  width: 100%;
  border: none; /* Remove any default borders */
  border-radius: 6px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-align: center; /* Center the text */
  display: inline-block; /* Ensure the button behaves inline */
  transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Hover State */
.subscribe-btn-kevlar:hover {
  background-color: #8a9a7a; /* Lighten on hover */
}

/* Updated Carbon and Titanium widths */
.carbontier { 
  width: calc(18.75% - 5px);
  margin-right: 1px;
  margin-left: 1px;
  border-right: 2px solid #5fffca; /* Right border only */
  border-left: 2px solid #5fffca;
  background-color: #00ffaa;/* Left border in blue */
  border-top: 2px solid #5fffca; /* Top border in green */
  border-bottom: 2px solid #5fffca; /* Bottom border in yellow */
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  background-color: #00ffc0;
}

.carbonstvorcek { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #303a38; /* Right border only */
  border-left: 1px solid #303a38;
  background-color: #1c2221;
  width: calc(18.75% - 5px);
}

.pasikcarbon {
  width: 75%;
}

.carbonstvorcekzoznam { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #303a38; /* Right border only */
  border-left: 1px solid #303a38;
  background-color: #1c2221;
  width: calc(18.75% - 5px);
}

.carbonstvorcekzoznam-posledny { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #303a38; /* Right border only */
  border-left: 1px solid #303a38;
  border-bottom: 1px solid #303a38;
  background-color: #1c2221;
  width: calc(18.75% - 5px);
}

.titaniumtier {
  width: calc(18.75% - 5px);
  margin-right: 1px;
  margin-left: 1px;
  border-right: 2px solid #ff50f8; /* Right border only */
  border-left: 2px solid #ff50f8; /* Left border in blue */
  border-top: 2px solid #ff50f8; /* Top border in green */
  border-bottom: 2px #ff50f8; /* Bottom border in yellow */
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  padding-top: 0px;
  background-color: #ff00ed;
}

.titaniumstvorcek { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #433841; /* Right border only */
  border-left: 1px solid #433841;
  background-color: #1e191d;
  width: calc(18.75% - 5px);
}

.titaniumstvorcekzoznam { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #433841; /* Right border only */
  border-left: 1px solid #433841;
  background-color: #1e191d;
  width: calc(18.75% - 5px);
}

.titaniumstvorcekzoznam-posledny { 
  margin-right: 1px;
  margin-left: 1px;
  border-right: 1px solid #433841; /* Right border only */
  border-left: 1px solid #433841;
  border-bottom: 1px solid #433841;
  background-color: #1e191d;
  width: calc(18.75% - 5px);
}

.ikonkafajka { /*prefreetier*/
border-bottom: 1px solid #2d2d2d;
  width: 80%; /* Adjust this value to control the length of the border */
  margin: 0 auto; /* Center the element */
}

.ikonkakrizik-free { /*prefreetier*/
border-bottom: 1px solid #2d2d2d;
  width: 80%; /* Adjust this value to control the length of the border */
  margin: 0 auto; /* Center the element */
}

.ikonkafajkatitanium { /*fajka titaniumtier*/
border-bottom: 1px solid #2d2d2d;
  width: 80%; /* Adjust this value to control the length of the border */
  margin: 0 auto; /* Center the element */
}

.ikonkafajkacarbon { /*fajka carbontier*/
border-bottom: 1px solid #303a38;
  width: 80%; /* Adjust this value to control the length of the border */
  margin: 0 auto; /* Center the element */
}

/* Specific to the Fiberglass Tier */
.fiberglass-tier {
  color: #1a1a1a; /* Change text color for Fiberglass tier */
}

/* Customizing the Tier Price */
.subscription-tier-price-fiberglass {
  font-family: 'Roboto', sans-serif;
  font-size: 45px; /* Larger font size for price */
  font-weight: 500;
  color: #1a1a1a;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0px;/* Adjust spacing above */
}

.subscription-price-container {
  display: flex; /* Ensures the elements stay on the same line */
  align-items: center; /* Aligns the price and /month vertically in the middle */
}

/* Customizing the Tier Price */
.subscription-tier-price-carbon {
  font-family: 'Roboto', sans-serif;
  font-size: 45px; /* Larger font size for price */
  font-weight: 500;
  color: #1c2221;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0px;/* Adjust spacing above */
}

/* Customizing the Tier Price */
.subscription-tier-price-carbon-month {
  font-family: 'Roboto', sans-serif;
  font-size: 20px; /* Larger font size for price */
  font-weight: 600;
  color: #1c2221;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0px;/* Adjust spacing above */
}

/* Customizing the Tier Price */
.subscription-tier-price-titanium-month {
  font-family: 'Roboto', sans-serif;
  font-size: 20px; /* Larger font size for price */
  font-weight: 600;
  color: #1e191d;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0px;/* Adjust spacing above */
}

/* Specific to Free Tier Pricing */
.free-tier-price {
  color: #1a1a1a; /* Green for FREE price */
  margin-top: 0px;
}

.subscription-tier-tagline	{
  font-family: 'Montserrat', sans-serif; /* Font */
  font-size: 20px; /* Font size */
  font-weight: 800;
  color: #ffff; /* White text color */
  text-align: center; /* Center align */
  margin-top: 20px; /* Spacing below */
}	

/* General Button Styling */
.button-container {
  display: flex;                /* Enables Flexbox */
  justify-content: center;      /* Centers the button horizontally */
  align-items: center;          /* Centers the button vertically */
  height: 100%;                 /* Optional: Ensure the container takes the full height */
  width: 100%;                  /* Optional: Ensure the container takes the full width */
}

.subscribe-btn-free {
  background-color: #1f1f1f; /* Button background color (green) */
  align-content: center;
  color: #fff; /* Text color (white) */
  font-size: 20px; /* Font size for the button text */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;/* Font family */
  font-style: italic;
  padding: 6px 0; /* Padding inside the button */
  width: 100%;
  border: none; /* Remove any default borders */
  border-radius: 6px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-align: center; /* Center the text */
  display: inline-block; /* Ensure the button behaves inline */
  transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Hover State */
.subscribe-btn-free:hover {
  background-color: #4a4a4a; /* Darken the green on hover */
}

.subscribe-btn-titanium {
  background-color: #1e191d; /* Button background color (green) */
  align-content: center;
  color: #fff; /* Text color (white) */
  font-size: 20px; /* Font size for the button text */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;/* Font family */
  font-style: italic;
  padding: 6px 0; /* Padding inside the button */
  width: 100%;
  border: none; /* Remove any default borders */
  border-radius: 6px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-align: center; /* Center the text */
  display: inline-block; /* Ensure the button behaves inline */
  transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Hover State */
.subscribe-btn-titanium:hover {
  background-color: #927a39; /* Darken the green on hover */
}

/* Adjustments for Mobile Devices */
@media (max-width: 768px) {
  .subscribe-btn {
      font-size: 16px; /* Slightly smaller font on mobile */
      padding: 10px 20px; /* Adjust padding for mobile */
  }
}

.subscribe-btn-carbon {
  background-color: #1c2221; /* Button background color (green) */
  align-content: center;
  color: #fff; /* Text color (white) */
  font-size: 20px; /* Font size for the button text */
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;/* Font family */
  font-style: italic;
  padding: 6px 0; /* Padding inside the button */
  width: 100%;
  border: none; /* Remove any default borders */
  border-radius: 6px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-align: center; /* Center the text */
  display: inline-block; /* Ensure the button behaves inline */
  transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Hover State */
.subscribe-btn-carbon:hover {
  background-color: #00674d; /* Darken the green on hover */
}

/* ============================================ */
/* MOBILE TIER STYLES */
/* ============================================ */

.mobile-tier-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 2px; /* 2px odstup od kraja obrazovky po borders tabuľky */
  box-sizing: border-box;
}

/* Mobile Tier Header */
.mobile-tier-header {
  width: 100%;
  padding: 20px;
  padding-left: calc(20px + 5px); /* 5px medzera z oboch strán */
  padding-right: calc(20px + 5px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mobile-tier-header.freetier {
  background-color: #F9F9F9;
  border: 2px solid #f0f0f0;
  border-radius: 6px 6px 0 0;
}

.mobile-tier-header.kevlartier {
  background-color: #B8CB8A;
  border: 2px solid #B8CB8A;
  border-radius: 6px 6px 0 0;
}

.mobile-tier-header.carbontier {
  background-color: #00ffc0;
  border: 2px solid #5fffca;
  border-radius: 6px 6px 0 0;
}

.mobile-tier-header.titaniumtier {
  background-color: #ff00ed;
  border: 2px solid #ff50f8;
  border-radius: 6px 6px 0 0;
}

.mobile-tier-image {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 15px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.mobile-tier-image img {
  width: 100%;
  height: auto;
  max-width: 300px;
}

.mobile-tier-title-section {
  width: 100%;
  margin-bottom: 20px;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.mobile-tier-title-section .subscription-tier-title {
  font-size: 24px; /* 20px * 1.2 = 24px - zväčšené o 20% */
}

.mobile-tier-title-section .subscription-tier-price-kevlar {
  font-size: 54px; /* 45px * 1.2 = 54px - zväčšené o 20% */
}

.mobile-tier-button {
  width: 100%;
  max-width: 100%;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.mobile-tier-button button {
  width: 100%;
  padding: 12px 20px;
  font-size: 18px;
}

/* Mobile Tier Tagline */
.mobile-tier-tagline {
  width: 100%;
  padding: 20px;
  padding-left: calc(20px + 5px); /* 5px medzera z oboch strán */
  padding-right: calc(20px + 5px);
  text-align: center;
  box-sizing: border-box;
}

.mobile-tier-tagline.freestvorcek {
  background-color: #1f1f1f;
  border-left: 1px solid #515151;
  border-right: 1px solid #515151;
}

.mobile-tier-tagline.kevlarstvorcek {
  background-color: #272c21; /* Rovnaká farba ako desktop verzia */
  border-left: 1px solid #7a8a6a;
  border-right: 1px solid #7a8a6a;
}

.mobile-tier-tagline.carbonstvorcek {
  background-color: #1c2221;
  border-left: 1px solid #303a38;
  border-right: 1px solid #303a38;
}

.mobile-tier-tagline.titaniumstvorcek {
  background-color: #1e191d;
  border-left: 1px solid #433841;
  border-right: 1px solid #433841;
}

.mobile-tier-tagline .subscription-tier-tagline {
  margin: 0;
  font-size: 18px;
}

/* Mobile Tier Benefits */
.mobile-tier-benefits {
  width: 100%;
  padding: 30px 20px;
  padding-left: calc(20px + 5px); /* 5px medzera z oboch strán */
  padding-right: calc(20px + 5px);
  box-sizing: border-box;
}

/* Tier-specific colors for benefits section - matching desktop version */
.mobile-tier-benefits.freetier-benefits {
  background-color: #1f1f1f;
  border-left: 1px solid #515151;
  border-right: 1px solid #515151;
  border-bottom: 1px solid #515151;
}

.mobile-tier-benefits.kevlartier-benefits {
  background-color: #272c21;
  border-left: 1px solid #7a8a6a;
  border-right: 1px solid #7a8a6a;
  border-bottom: 1px solid #7a8a6a;
}

.mobile-tier-benefits.carbontier-benefits {
  background-color: #1c2221;
  border-left: 1px solid #303a38;
  border-right: 1px solid #303a38;
  border-bottom: 1px solid #303a38;
}

.mobile-tier-benefits.titaniumtier-benefits {
  background-color: #1e191d;
  border-left: 1px solid #433841;
  border-right: 1px solid #433841;
  border-bottom: 1px solid #433841;
}

.mobile-benefits-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #f0f0f0;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 0;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.mobile-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-benefit-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #f0f0f0;
  padding: 15px 0;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom: 1px solid #2d2d2d;
  line-height: 1.5;
  box-sizing: border-box;
}

/* Tier-specific border colors for benefit items */
.mobile-tier-benefits.freetier-benefits .mobile-benefit-item {
  border-bottom: 1px solid #2d2d2d;
}

.mobile-tier-benefits.kevlartier-benefits .mobile-benefit-item {
  border-bottom: 1px solid #7a8a6a;
}

.mobile-tier-benefits.carbontier-benefits .mobile-benefit-item {
  border-bottom: 1px solid #303a38;
}

.mobile-tier-benefits.titaniumtier-benefits .mobile-benefit-item {
  border-bottom: 1px solid #433841;
}

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

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .mobile-tier-header {
    padding: 15px;
    padding-left: calc(15px + 5px); /* 5px medzera z oboch strán */
    padding-right: calc(15px + 5px);
  }
  
  .mobile-tier-image {
    max-width: 250px;
  }
  
  .mobile-tier-image img {
    max-width: 250px;
  }
  
  .mobile-tier-title-section .subscription-tier-title {
    font-size: 21.6px; /* 18px * 1.2 = 21.6px - zväčšené o 20% */
  }
  
  .mobile-tier-title-section .subscription-tier-price-kevlar {
    font-size: 43.2px; /* 36px * 1.2 = 43.2px - zväčšené o 20% */
  }
  
  .mobile-tier-button button {
    font-size: 16px;
    padding: 10px 15px;
  }
  
  .mobile-benefits-title {
    font-size: 18px;
  }
  
  .mobile-benefit-item {
    font-size: 14px;
    padding: 12px 0;
  }
}

@media (max-width: 480px) {
  .mobile-tier-header {
    padding: 12px;
    padding-left: calc(12px + 5px); /* 5px medzera z oboch strán */
    padding-right: calc(12px + 5px);
  }
  
  .mobile-tier-image {
    max-width: 200px;
  }
  
  .mobile-tier-image img {
    max-width: 200px;
  }
  
  .mobile-tier-title-section .subscription-tier-title {
    font-size: 19.2px; /* 16px * 1.2 = 19.2px - zväčšené o 20% */
  }
  
  .mobile-tier-title-section .subscription-tier-price-kevlar {
    font-size: 38.4px; /* 32px * 1.2 = 38.4px - zväčšené o 20% */
  }
  
  .mobile-tier-button button {
    font-size: 14px;
    padding: 8px 12px;
  }
  
  .mobile-benefits-title {
    font-size: 16px;
  }
  
  .mobile-benefit-item {
    font-size: 13px;
    padding: 10px 0;
  }
  
  .mobile-tier-benefits {
    padding: 20px 15px;
    padding-left: calc(15px + 5px); /* 5px medzera z oboch strán */
    padding-right: calc(15px + 5px);
  }
  
  .mobile-tier-tagline {
    padding-left: calc(20px + 5px);
    padding-right: calc(20px + 5px);
  }
}