/*
Theme Name: Visual Composer Starter Child
Theme URI: http://visualcomposer.io
Description: Visual Composer Starter child theme
Author: The Visual Composer Team
Author URI: http://visualcomposer.io
Template: visual-composer-starter
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, blog, starter, responsive-layout, accessibility-ready, sandwich-menu
Text Domain: visual-composer-starter-child
*/

.sold-out-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 10;
}

.sold-out-message {
    color: red;
    font-weight: bold;
    margin-top: 15px;
}

.variation-stock-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 128, 0, 1); /* Green background with transparency */
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 10;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}
.product {
    position: relative; /* Ensure the badge is positioned relative to the product container */
}

.variation-stock-badge-single {
    position: absolute;
    top: 20px; /* Adjust vertical position */
    left: 20px; /* Adjust horizontal position */
    background: rgba(34, 139, 34, 1); /* A green background (Forest Green) with slight transparency */
    color: #fff; /* White text */
    font-size: 14px; /* Text size */
    font-weight: 600; /* Slightly bold text */
    padding: 8px 12px; /* Padding around the text */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
    z-index: 10; /* Ensure it appears above other elements */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Subtle text shadow for readability */
    white-space: nowrap; /* Prevent the text from breaking to a new line */
}

.single-product .product {
    position: relative; /* Make the product container relative to position the badge properly */
}

/* Style for the Order Items column */
.column-order_items {
    width: 30%; /* Adjust the column width */
    padding: 10px;
}

.column-order_items br {
    content: "\A";
    white-space: pre-line; /* Force line breaks between items */
}

.twitch-username-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.twitch-username-field img {
    width: 24px;
    height: 24px;
}
.twitch-username-field input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}


/* Styling the donation options */
.donation-option {
    margin-bottom: 20px;
}

.donation-option p {
    font-size: 16px;
    margin: 0;
    padding: 5px 0;
}

.donation-options {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
}

.donation-options input[type="radio"] {
    margin-right: 10px;
    accent-color: #6441a5; /* Twitch purple accent color */
}

.donation-options label {
    font-size: 14px;
    font-weight: normal;
    margin-right: 20px;
}