.centered-feature {
    display: flex;
    flex-direction: column;
    padding: 3em; /* Adds padding around the table */
    max-width: 900px; /* Maximum width of the table */
    margin: auto; /* Centers the table horizontally */
    margin-top: 0%;
}

.plan-header, .plan-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* This ensures all items in a row stretch to match the tallest item */
}

.column-free, .column-pro, .column-feature {
    flex-grow: 1; /* Gives equal width to all columns */
    padding: 5px; /* Adds padding inside each column */
    display: flex; /* Enables flex properties for centering content */
    flex-direction: column; /* Stacks content vertically */
    justify-content: center; /* Centers content vertically in each column */
}

.column-feature {
    text-align: left; /* Left-aligns the text in feature columns */
    flex-basis: 40%; /* Allows more space for feature descriptions */
}

.column-free, .column-pro {
    text-align: center; /* Centers the content in the free and pro columns */
    flex-basis: 30%; /* Narrower basis for these columns */
}

.plan-row {
    min-height: 50px; /* Adjust this value based on the expected content size */
}

.column-free i, .column-pro i, .column-free button, .column-pro button {
    margin: auto; /* Centers items within their flex container */
}

.fas.fa-check.text-success {
    color: #28a745; /* Green color for success icons */
}

.fas.fa-times.text-danger {
    color: #dc3545; /* Red color for danger icons */
}

.pricing {
    text-align: right;
}


.keys, .one-week, .three-months, .one-year {
    flex-grow: 1; /* Gives equal width to all columns */
    padding: 5px; /* Adds padding inside each column */
    display: flex; /* Enables flex properties for centering content */
    flex-direction: column; /* Stacks content vertically */
    justify-content: center; /* Centers content vertically in each column */
}

.pricing-table .pricing-header div, .pricing-table .pricing-row div {
    text-align: center; /* Default to center for most cells */
    padding: 5px; /* Adding some padding for spacing */
    flex: 1; /* Flex property to distribute space equally */
}

.pricing-table .keys {
    text-align: left; /* Aligns text to the left for the 'keys' class */
    flex: 2; /* Optional: Assign more flex basis if needed for better spacing */
}

/* Ensure headers and rows have a consistent styling if not already defined */
.pricing-table .pricing-header {
    display: flex; /* Using flexbox for flexible and responsive layouts */
    font-weight: bold;
}

.pricing-table .pricing-row {
    display: flex;
}

.pricing-table.borderbottomline .pricing-row {
    border-bottom: 1px solid #ddd; /* Adds a subtle separator between rows */
}

.selector-button-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: center; /* Align items to center might need to adjust or use align-self on children */
}

.custom-select-wrapper {
    position: relative;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0; /* Adjust this to ensure no internal padding is moving only the text */
}

.custom-select-wrapper::after {
    content: "\25BC"; /* Unicode for down arrow */
    position: absolute;
    right: 10px; /* Position the arrow on the right inside the select */
    top: 8px;
    color: #333; /* Color for the dropdown arrow */
    pointer-events: none; /* Prevent the arrow from being clickable */
    font-size: 16px; /* Size of the dropdown arrow */
}

#platform-selector {
    appearance: none;
    background: transparent;
    padding: 8px 28px 8px 12px; /* Balanced padding */
    cursor: pointer;
    height: 40px;
    border: none;
    width: auto; /* Adjust width to fit content if necessary */
    font-size: 16px;
    align-self: start; /* Aligns this item to the start of the flex container */
}

.download-button {
    padding: 0px 16px; /* Button padding */
    height: 40px; /* Matching height with the selector */
    line-height: 40px; /* Align text vertically */
    font-size: 16px; /* Ensure font size is the same for both */
    cursor: pointer;
    background-color: #007bff; /* Example background color */
    color: white; /* Text color */
    border: none; /* Remove border if not necessary */
    border-radius: 5px; /* Optional border-radius for styling */
}

.pricing-background {
    background-image: url('../images/generic/scree_field_raw.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px 0; /* Adds padding above and below the pricing table */
    width: 100vw; /* Ensures the background stretches full width */
}

.pricing-row {
    display: flex;
    margin-bottom: 5px;  /* space between rows if needed */
}

.pricing-row > div {
    flex: 1;  /* Ensures equal width */
    padding: 10px;  /* Padding for spacing within the cells */
    text-align: center;  /* Center text alignment */
}

.clickable {
    border-radius: 5px;
    cursor: pointer; /* Changes cursor to a hand to indicate clickable */
    border: 1px solid #ccc; /* Adds a light grey border around each cell */
    transition: background-color 0.3s; /* Smooth transition for background color change */
    margin: 0 2px; /* Adds a small margin between cells */
}

.clickable:hover {
    background-color: #f0f0f0; /* Light grey background on hover */
}

.clickable.selected {
    background-color: #4499cc;; /* Blue background for selected item */
    color: white; /* White text color */
    border-color: #0056b3; /* Darker border to match the blue background */
}

/* Base styles for the purchase button */
.purchase-button {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: grey; /* Default disabled state */
    color: white;
    border: none;
    cursor: not-allowed;
    transition: background-color 0.3s, cursor 0.3s;
}

.purchase-button.enabled {
    background-color: #007bff; /* Blue when enabled */
    cursor: pointer; /* Change cursor on enabled state */
}

.invisible-button {
    visibility: hidden;
}

/* Make invisible buttons visible on mobile devices */
@media (max-width: 768px) {
    .invisible-button {
        visibility: visible !important;
        display: block !important;
    }
    
    /* Also ensure Select License button is visible */
    #selectLicenseButton, 
    #issueKeyButton,
    .button-container button {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: static !important; /* Ensure it's not positioned out of view */
        width: 80% !important; /* Make buttons wider on mobile */
        margin: 15px auto !important; /* Center buttons and add vertical space */
        padding: 15px !important;
        font-size: 16px !important;
        z-index: 10 !important; /* Ensure it's above other elements */
    }
    
    /* Fix for license box to ensure it contains all content */
    .license-box, .box {
        height: auto !important;
        min-height: fit-content !important;
        overflow: visible !important;
        margin-bottom: 30px !important;
        padding-bottom: 30px !important;
    }
    
    /* Ensure textarea heights are appropriate */
    .license-info-box {
        height: auto !important;
        min-height: 14.4em !important; /* Increased from 8em by 80% */
    }
    
    /* Container adjustments */
    .container {
        padding: 10px !important;
    }
}

/* Custom Hamburger Icon Styles */
.hamburger-icon {
    width: 24px; /* Adjust size as needed */
    height: 18px; /* Adjust size as needed */
    position: relative;
    display: inline-block; /* Or block, depending on layout needs */
    vertical-align: middle;
}

.hamburger-icon span {
    display: block;
    position: absolute;
    height: 3px; /* Thickness of the lines */
    width: 100%;
    background: white;
    border-radius: 3px;
    left: 0;
    opacity: 1;
    transition: .25s ease-in-out;
    /* Add shadow for contrast */
    text-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 3px rgba(0,0,0,0.4);
    box-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 3px rgba(0,0,0,0.4);
}

/* Position the lines */
.hamburger-icon span:nth-child(1) {
    top: 0px;
}

.hamburger-icon span:nth-child(2) {
    top: 7.5px; /* Adjust spacing based on height and line thickness */
}

.hamburger-icon span:nth-child(3) {
    top: 15px; /* Adjust spacing based on height and line thickness */
}

/* Ensure the parent link styles don't interfere strangely */
.navigation-show.nav-icon {
    /* May need adjustments based on theme, e.g., padding, line-height */
    display: inline-flex; /* Helps align the icon */
    align-items: center;
}

/* Hide original icon if necessary (though commented out in HTML) */
.icon-menu {
    display: none !important;
}

/* Fix hamburger menu showing on desktop */
@media only screen and (min-width: 961px) {
    .aux-navigation {
        display: none !important;
    }
}

/* Center the primary navigation in the navbar */
@media only screen and (min-width: 961px) {
    .nav-bar-inner {
        position: relative;
    }

    .nav-bar-inner .primary-navigation.nav-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        z-index: 1;
    }

    /* Ensure the navigation items are centered */
    .nav-bar-inner .primary-navigation.nav-center > ul {
        text-align: center;
        white-space: nowrap;
    }
}