/* Container for the tabs */
.dynamic-tabs {
    font-family: Arial, sans-serif;
    width: 100%;
}

/* Hide radio buttons */
.tab-input {
    display: none;
}

/* Style the tab labels to look like tabs */
.tab-label {
    display: inline-block;
    padding: 0.8em 2em;
    cursor: pointer;
    background: #848484;;
    border: 1px solid #ccc;
    margin-right: -1px;
    font-weight: bold;
    position: relative;
    top: 2px; /* Slightly raise tabs for a connected effect */
    transition: background 0.3s ease;
    text-align: center;
}

.dark-mode .tab-label {
  background: #2f2f2f70;
}

.tab-label:hover {
    background: #000;
}

/* Active tab styling */
.tab-input:checked + .tab-label {
    background: #cfa7ff;
    border-bottom: 2px solid #ffffff; /* Seamless with the content below */
    font-weight: bold;
}

/* Content sections styling */
.tab-content {
    display: none; /* Hide all content by default */
    padding: 1em;
    border: 1px solid #ccc;
    border-top: none; /* Remove top border to blend with active tab */
    background: #ffffff7a;
}

.dark-mode .tab-content {
  border: 1px solid #796c6c;
  background: #2f2f2f70;
}