.wc-csv-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Ensure fixed layout */
    border: 2px solid #e0e0e0; /* Outside border */
    border-radius: 7px; /* Add border radius */
    background-color: #f9f9f9;
    margin-bottom: 15px; /* Add bottom margin to the table */
}

.wc-csv-table td, .wc-csv-table th {
    padding: 10px;
    word-wrap: break-word; /* Ensure word wrapping */
    border: none; /* No vertical borders */
    font-size: 1em; /* Responsive font size */
}

.wc-csv-table .wc-csv-label {
    font-weight: 600;
    color: #333;
    background-color: #f9f9f9;
    max-width: 150px !important; /* Max width for the left column */
    width: 150px !important; /* Set width for the left column */
    text-transform: uppercase; /* All caps */
    text-align: left; /* Left justified */
}

.wc-csv-table .wc-csv-value {
    font-weight: 400;
    color: #777;
    background-color: #fff;
    text-align: center; /* Center text */
}

/* Remove double border issue */
.wc-csv-table tr:first-child td:first-child {
    border-top-left-radius: 7px;
}

.wc-csv-table tr:first-child td:last-child {
    border-top-right-radius: 7px;
}

.wc-csv-table tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

.wc-csv-table tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

.wc-csv-title, .wc-video-title {
    text-align: center !important;
    text-transform: uppercase;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 15px;
    border-radius: 10px !important;
}

.video-container .video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container .video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .wc-csv-table .wc-csv-label {
        max-width: 120px !important; /* Max width for the left column on tablets */
        width: 120px !important; /* Set width for the left column on tablets */
        font-size: 0.875em; /* Slightly smaller font size on tablets */
    }
    .wc-csv-table td, .wc-csv-table th {
        font-size: 0.875em; /* Slightly smaller font size on tablets */
    }
    .video-container {
        margin-bottom: 15px; /* Ensure video containers have bottom margin on tablets */
    }
}

@media (max-width: 768px) {
    .wc-csv-table .wc-csv-label {
        max-width: 100px !important; /* Max width for the left column on mobile */
        width: 100px !important; /* Set width for the left column on mobile */
        font-size: 0.75em; /* Slightly smaller font size on mobile */
    }
    .wc-csv-table td, .wc-csv-table th {
        font-size: 0.75em; /* Slightly smaller font size on mobile */
    }
    .video-container {
        margin-bottom: 15px; /* Ensure video containers have bottom margin on mobile */
    }
}


#faq-accordion {
    margin-top: 20px;
}

#faq-accordion h3 {
    background: linear-gradient(to bottom, #e0e0e0, #f1f1f1); /* Light gray gradient for closed state */
    padding: 10px 15px; /* Added right padding for icon */
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: #333; /* Charcoal text for closed state */
    position: relative;
    font-weight: normal; /* Make text not bold */
}

#faq-accordion h3.ui-state-active {
    background: linear-gradient(to bottom, #333, #595959); /* Charcoal gradient for opened state */
    color: #fff; /* White text color for opened state */
}

#faq-accordion h3::before {
    content: "\002B"; /* Unicode for plus sign */
    font-size: 1.5em;
    padding-right: 15px;
    color: #333; /* Charcoal icon for closed state */
    position: relative; /* Change to relative */
    left: 0px!important; /* Move to the left */
}

#faq-accordion h3.ui-state-active::before {
    content: "\2212"; /* Unicode for minus sign */
    color: #fff; /* White icon for opened state */
}

#faq-accordion div {
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    border-top: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #faq-accordion h3 {
        font-size: 1em;
        padding: 8px 15px;
    }
    #faq-accordion div {
        padding: 8px;
    }
}
