/* 2. Set the header background image */
.wp-block-kubio-hero__outer {
    background-image: url('https://bybittradingbot.com/wp-content/uploads/2024/10/header_image.jpg') !important;
    background-size: cover; /* Make sure the image covers the entire section */
    background-position: center center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background from repeating */
}

/* 3. Change the price color to #ffb11a and / maand to yellow */
.summary.entry-summary .price .woocommerce-Price-amount,
.summary.entry-summary .price .woocommerce-Price-currencySymbol,
.summary.entry-summary .price .woocommerce-Price-amount + span {
    color: #ffb11a !important; /* Set the price, currency, and subscription period to yellow */
}

/* 5. Style the "Add to Cart" button */
.single_add_to_cart_button {
    background-color: #ffb11a !important; /* Set the button background to yellow */
    color: #ffffff !important; /* Set text color to white */
    border: none !important; /* Remove the border */
}

/* "Add to Cart" button hover state */
.single_add_to_cart_button:hover {
    background-color: #fea801 !important; /* Change the hover background color */
    color: #ffffff !important; /* Keep text white */
    border: none !important; /* Ensure no border on hover */
}

/* 6. Change the unreadable grey text to yellow */
.summary.entry-summary,
.product_meta,
.product_meta a,
.woocommerce-tabs .panel {
    color: #ffb11a !important; /* Set all grey text to yellow */
}

/* Make sure category links in the product meta are yellow */
.product_meta a {
    color: #ffb11a !important; /* Set category text to yellow */
}

/* Change category text hover to a lighter yellow */
.product_meta a:hover {
    color: #fea801 !important; /* Set hover color for links */
}

/* 7. Change the description and tab text to white */
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel p {
    color: #ffffff !important; /* Set the description and tab content text to white */
}

/* Change the tab title (e.g., "Beschrijving") to white */
.woocommerce-Tabs .wc-tab {
    color: #ffffff !important; /* Set the tab titles to white */
}

/* Optional: Change the active tab color to yellow for better visibility */
.woocommerce-Tabs .wc-tab.active {
    color: #ffb11a !important; /* Set active tab color to yellow */
}

/* 8. Change the page background color to #101014 */
body {
    background-color: #101014 !important; /* Set page background color */
}

/* Change the blue line color to yellow */
.woocommerce-message {
    border-top: 3px solid #ffb11a !important; /* Adjust thickness if needed */
}

/* Change the text "ByBit Trading Bot is toegevoegd aan je winkelwagen" to white */
.woocommerce-message {
    color: #ffffff !important; /* Set the text to white */
}

/* Change the "Bekijk winkelwagen" button to match the yellow color scheme */
.woocommerce-message .button {
    background-color: #ffb11a !important; /* Set the button background to yellow */
    color: #ffffff !important; /* Set the button text color to white */
    border: none !important; /* Remove any border */
}

.woocommerce-message .button:hover {
    background-color: #fea801 !important; /* Change the background color on hover */
    color: #ffffff !important; /* Ensure the text stays white on hover */
}

/* 9. Adjust text in the header to white for better contrast */
.wp-block-kubio-hero__inner h1,
.wp-block-kubio-hero__inner p {
    color: #ffffff !important; /* Set header text color to white */
}

/* 10. Change the marked blue text to white */
.fpf-fields-config-wrapper p,
.fpf-fields-config-wrapper p a {
    color: #ffffff !important;  /* Changes the blue text and links to white */
}
/* Change the background color of the button to yellow */
.wc-block-components-panel__button {
    background-color: #ffb11a !important; /* Set background to yellow */
    color: #ffffff !important; /* Set text color to white */
    border: none !important; /* Remove any border */
}

/* Change the hover state of the button */
.wc-block-components-panel__button:hover {
    background-color: #fea801 !important; /* Change background to lighter yellow on hover */
    color: #ffffff !important; /* Ensure text stays white */
}
#simpay-form-2387-field-4 {
    background-color: #ffb11a !important; /* Yellow background */
    color: #ffffff !important; /* White text */
    border: none !important; /* Remove any border */
}

#simpay-form-2387-field-4:hover {
    background-color: #fea801 !important; /* Darker yellow on hover */
    color: #ffffff !important; /* Keep white text on hover */
}
/* Target the form title (ByBit Trading Bot) */
.simpay-form-title {
    color: #ffb11a !important; /* Yellow */
}

/* Target the form subtitle (Subscribe) */
.simpay-form-subtitle {
    color: #ffb11a !important; /* Yellow */
}
label,
.simpay-checkout label, /* For Simple Pay Checkout fields */
.billing-address label, /* For billing address section */
.subscription-form label /* For subscription forms */
{
    color: #ffffff !important; /* Set all label text to white */
}
.simpay-form label {
    color: white !important;
}
.vp-target {
    width: 90% !important;  /* Set the width to 90% of the viewport */
    max-width: 90% !important;  /* Ensure it doesn't exceed 90% width */
    margin: 0 auto !important;  /* Center the video on the page */
    display: block !important;  /* Ensure it's treated as a block element */
}
a.edd_go_to_checkout.button.edd-submit {
    background-color: #ffb11a !important; /* Yellow background */
    color: #ffffff !important; /* White text */
    border: none !important; /* Remove border */
    border-radius: 0 !important; /* Remove rounded corners */
    padding: 10px 20px; /* Add some padding to make the button look good */
    text-transform: uppercase; /* Optional: Make the text uppercase */
		font-family: 'Poppins', sans-serif;
    font-weight: normal; /* Optional: Make the text bold */
    text-align: center; /* Ensure text is centered */
    display: inline-block; /* Make it behave like a block element, but inline */
}

a.edd_go_to_checkout.button.edd-submit:hover {
    background-color: #fea801 !important; /* Slightly darker yellow on hover */
    color: #ffffff !important; /* Keep text white on hover */
}
/* Container to align the button to the right */
.edd_purchase_submit_wrapper {
    text-align: right; /* Align the button to the right */
    margin-top: 20px; /* Add some space above the button */
    display: block; /* Ensure block-level display */
}

/* Style for the button */
input.edd-submit.button#edd-purchase-button {
    background-color: #ffb11a !important; /* Set button background to yellow */
    color: #ffffff !important; /* Set text to white */
    border: none !important; /* Remove border */
    border-radius: 0 !important; /* Remove rounded corners */
    padding: 10px 20px; /* Add padding to enlarge the button */
    font-weight: normal; /* Make the text bold */
		font-family: 'Poppins', sans-serif;
    cursor: pointer; /* Set pointer cursor */
    display: inline-block; /* Ensure inline-block display for size control */
}
/* Change button color on hover */
input.edd-submit.button#edd-purchase-button:hover {
    background-color: #fea801 !important; /* Change to a darker yellow on hover */
    color: #ffffff !important; /* Ensure text remains white */
}

/* Disabled button style */
input.edd-submit.button#edd-purchase-button:disabled {
    background-color: #e0e0e0 !important; /* Grey out the background when disabled */
    color: #8c8c8c !important; /* Grey text when disabled */
    cursor: not-allowed; /* Not-allowed cursor when disabled */
}
.edd-add-to-cart-label {
    background-color: #ffb11a !important; /* Yellow background, force it with !important */
    color: #ffffff !important; /* Dark text color */
    padding: 10px 20px; /* Adjust padding for button size */
    border-radius: 0px; /* No rounded corners */
    border: none !important; /* Remove any border, force with !important */
		font-family: 'Poppins', sans-serif;
    font-size: 16px; /* Adjust font size */
    font-weight: normal; /* Make text bold */
    display: inline-block; /* Keep it inline */
    cursor: pointer; /* Pointer cursor */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove any underline */
}

.edd-add-to-cart-label:hover {
    background-color: #e09e17 !important; /* Slightly darker yellow on hover */
    border: none !important; /* Ensure no border on hover */
}

.edd-add-to-cart { 
    background-color: transparent !important; /* Ensure no background in the container */
    border: none !important; /* Remove any borders in the container */
}
/* Target the form container */
body {
    margin: 0;
    padding: 0;
}

.contact-form-container {
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.contact-form-container form {
    width: 100%;
    max-width: 600px; /* You can adjust this to limit the max width */
    background-color: #1c1c1c; /* Keep or change your background color */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #ffcc00;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    background-color: #ff9900;
}
/* Style for the "Send" button before being pressed (normal state) */
input[type="submit"].wpcf7-submit {
    background-color: #FFB11A !important; /* Yellow background */
    color: #101014 !important; /* Dark text color */
    font-family: inherit; /* Normal font */
    border: 2px solid #FFB11A !important; /* Matching yellow border */
    padding: 10px 20px !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
    border-radius: 4px !important;
}

/* Style for the "Send" button when pressed (active state) */
input[type="submit"].wpcf7-submit:active {
    background-color: #101014 !important; /* Dark background when pressed */
    color: #ffcc00 !important; /* Yellow text when pressed */
    border-color: #101014 !important; /* Dark border when pressed */
}

/* Optional: Hover state to improve interactivity */
input[type="submit"].wpcf7-submit:hover {
    background-color: #fca703 !important; /* Slightly darker yellow on hover */
    color: #101014 !important; /* Text color remains dark */
/* Apply background color to the entire right panel */
}
/* Rollover (hover) color */
.edd-apply-discount.edd-submit.wp-block-button__link:hover {
    background-color: #e69d16; /* Slightly darker shade for hover */
}
/* Rollover (hover) color */
.edd-button-secondary.edd_discount_link:hover {
    background-color: #e69d16; /* Slightly darker shade for hover */
}

/* Main button style */
.edd-button-secondary.edd_discount_link {
    background-color: #ffb11a;
    color: #ffffff;  /* White text color */
    border: none;    /* No borders */
    border-radius: 0; /* Remove rounded corners */
    padding: 10px 20px; /* Adjust padding as desired */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
/* Main style for the submit button */
.edd-apply-discount.edd-submit.wp-block-button__link {
    background-color: #ffb11a;
    color: #ffffff;      /* White text color */
    border: none;        /* No borders */
    border-radius: 0;    /* Remove rounded corners */
    padding: 10px 20px;  /* Adjust padding for the desired size */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
/* Style the link element background color */
a[href="https://bybittradingbot.com/my-account-2/"] {
    background-color: #111014;
    color: #ffffff; /* Set text color to white for contrast */
    padding: 10px;  /* Optional padding for better appearance */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Allows the background color to wrap around the content */
}

/* Optional: Style the dropdown icons inside */
a[href="https://bybittradingbot.com/my-account-2/"] .mob-expand-submenu {
    color: #ffffff; /* Color of dropdown icons if needed */
}