/* Subscription Plans & Features Plugin Styles */

:root {
  --radius: 8px;
}

/* Comparison Table Styles */
.bde-comparison-wrapper {
    width: 100%;
}

.highlight-label {
    color: var(--bde-background-color);
    font-family: GeistMono;
    font-size: 9px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: 0.17rem;
    background-color: var(--bde-brand-primary-color);
    padding: 2px 10px 2px 10px;
    border-radius: 10px;
    position: absolute;
    top: -9px;
    left: 20px;
    right: 20px;
    margin: auto;
}

.pricing-table {
    border-collapse: collapse;
    border-top: 1px solid var(--subtle-white-10);
    border-left: 1px solid var(--subtle-white-10);
    border-right: 1px solid var(--subtle-white-10);
    border-bottom: 1px solid var(--subtle-white-10);
    border-radius: var(--radius);
}


.pricing-table .bde-icon-icon.breakdance-icon-atom {
    margin-left: 5px;
    padding-bottom: 4px;
}

.pricing-table tfoot td {
    padding: 10px 5px;
}

.pricing-table th.table-highlight {
    position: relative;
}

.pricing-table tfoot td.table-highlight {
    border-bottom: 2px solid var(--bde-brand-primary-color);
}



.pricing-section {
  max-width: 1400px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.pricing-section__title {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.pricing-table .check-wrapper>svg {
    color: var(--bde-brand-primary-color);
}

.pricing-table {
  border-radius: var(--hrd-l);
  overflow-x: auto;
  font-size: var(--hfs-text-s);
    width: 100%;
  max-width: 100%; 
  overflow-y: hidden;
  scrollbar-width: thin; /* "auto", "thin" oder "none" */
  scrollbar-color: var(--bde-brand-primary-color) transparent;
    position: relative; 
}

.pricing-table th:first-child,
.pricing-table td:first-child {
border-right: 1px solid var(--subtle-white-10);
  text-align: left;
}

@media screen and (max-width: 1540px){
.pricing-table th:first-child,
.pricing-table td:first-child {
  position: sticky;
  left: 0;
background-color: #1a666e;
  /* oder für den Header: background-color: var(--subtle-black-20); */
  z-index: 2;
}
    
 .dark .pricing-table th:first-child,
.dark .pricing-table td:first-child {  
background-color: var(--hcl-neutral-12);
} 

.pricing-table {
 display: block;
  width: auto;
}

.pricing-table .bde-tooltip svg, .pricing-table div[id^=tippy], .pricing-table th.table-highlight .highlight-label {
  display: none;
}

}

  @media screen and (max-width: 767px){
.pricing-table th:first-child,
.pricing-table td:first-child {
  width: 120px;
  min-width: auto;
}
}

/* 2. Header-Zelle noch etwas höher stapeln, damit sie über den Zeilen klebt */
.pricing-table thead th:first-child {
  z-index: 3;
}

.pricing-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
}

.pricing-table thead th {
  background-color: var(--subtle-black-20);
  padding: 1rem;
  text-align: center;
  font-weight: normal;
  border-bottom: 1px solid var(--subtle-white-10);

  font-weight: 800;
  font-size: var(--hfs-text-m);
}

.pricing-table thead th:first-child {
  border-top-left-radius: var(--radius);
}

.pricing-table thead th:last-child {
  border-top-right-radius: var(--radius);
}

.pricing-table tbody td,
.pricing-table tbody th {
  padding: 1rem;
  border-bottom: 1px solid var(--subtle-white-10);
  min-width: 200px;
}

.pricing-table tbody td.available {
  font-size: 1rem;
}

td.available svg {
    color: var(--bde-brand-primary-color);
}

.pricing-table tfoot tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius);
}

.pricing-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius);
}

tr.tablerow-alternate {
  background-color: var(--subtle-white-5);
}

.pricing-table thead .table-highlight{
 border-top: 2px solid var(--bde-brand-primary-color); 
}

.pricing-table td.table-highlight,.pricing-table th.table-highlight {
    border-right: 2px solid var(--bde-brand-primary-color-hover);
    border-left: 2px solid var(--bde-brand-primary-color-hover);
}

/* Für Webkit‐Browser (Chrome, Safari, Edge) */
.pricing-table {
    scrollbar-height: 8px; /* Safari */
}
.pricing-table::-webkit-scrollbar {
  height: 8px; /* Höhe des horizontalen Scrollbars */
}
.pricing-table::-webkit-scrollbar-track {
  background: transparent;
}
.pricing-table::-webkit-scrollbar-thumb {
  background-color: var(--bde-brand-primary-color);
  border-radius: var(--radius);
}

.pricing-plan td.unavailable, .pricing-plan td.available, .pricing-plan td {
    text-align: center;
}

.check-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--subtle-white-10);
    margin: auto;
    text-align: center;
    line-height: 2.3em;
}

.check-wrapper svg {
    width: 15px;
    height: 15px;
}