/*
Theme Name: GP Child
Template: generatepress
Theme URI: https://generatepress.com
Description: A WooCommerce optimized GP child
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amgpc
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, fluid-layout, fixed-layout, responsive-layout, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, light, white, dark, black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, yellow
*/

/* Root Variabelen */
:root {
    --primary-color: #006FB7;
    --secondary-color: #0073aa;
    --hover-color: #005177;
    --text-color: #fff;
    --background-color: #fff;
    --border-color: #ddd;
    --input-background-color: #f4f4f4;
}

/* Basisstijl */
.page .entry-header {
    display: none;
}

/* Gebruik een standaardfont */
body, 
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price .amount,
.woocommerce-account input,
.woocommerce-checkout input,
.woocommerce button.button,
.woocommerce a.button,
.order-history-button,
.continue.button {
    font-family: Arial, Helvetica, sans-serif;
}

/* Besteloverzicht Afrekenen */
#order_review {
    box-sizing: border-box;
    border: 3px solid var(--primary-color);
    padding: 5px;
    background: var(--primary-color);
}

#order_review_heading {
    box-sizing: border-box;
    color: var(--text-color);
    background: var(--primary-color);
    padding: 10px;
    margin-bottom: 0;
}

/* WooCommerce Stijlen */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price .amount {
    font-size: 20px !important;
}

.woocommerce-account input,
.woocommerce-checkout input,
#order_comments.input-text {
    background-color: var(--background-color) !important;
    color: #000 !important;
    border: 1px solid #000;
}

.woocommerce button.button,
.woocommerce a.button {
    text-transform: capitalize !important;
    background: #E1081B !important;
    color: var(--text-color) !important;
    border: 1px solid #000;
    border-radius: 8px; /* Toegevoegd voor afgeronde hoeken */
    padding: 10px 20px; /* Toegevoegd voor betere klikbaarheid */
}

.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background: #E1081B !important;
    color: #fff !important;
    border-radius: 8px; /* Toegevoegd voor afgeronde hoeken bij hover */
}

/* Formulier & Layout Aanpassingen */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment,
.woocommerce form.checkout #customer_details,
h3#order_review_heading,
form.woocommerce-EditAccountForm.edit-account {
    border: 0 !important;
    background: #042134;
}

/* Winkelwagen Tabel */
.woocommerce-cart-form {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-cart-form th, 
.woocommerce-cart-form td {
    border: 1px solid var(--primary-color);
    padding: 8px;
    text-align: left;
}

/* Zet thumbnail vakje uit in winkelwagen */
.woocommerce table.cart td:nth-of-type(2),
.woocommerce table.cart th:nth-of-type(2) {
    display: none;
}

/* Producten Tabel */
.woocommerce-product-table {
    border: none;
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-product-table th, 
.woocommerce-product-table td {
    border: none;
    padding: 8px;
    text-align: left;
    background-color: transparent;
}

.woocommerce-product-table th {
    background-color: var(--primary-color);
    color: var(--text-color);
}

.woocommerce-product-table .product-info-row {
    border-bottom: 2px solid var(--primary-color);
}

.woocommerce-product-table tr:not(.product-info-row),
.woocommerce-product-table tr:last-child {
    border-bottom: none;
}

/* Betaalopties Styling */
.woocommerce-checkout #payment ul.payment_methods li {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
    border-bottom: none;
}

.woocommerce-checkout #payment .payment_box {
    background-color: var(--input-background-color);
    border: 1px solid var(--border-color);
    padding: 10px;
    margin-bottom: 10px;
}

.woocommerce-checkout #payment .payment_box input[type="radio"] {
    margin-right: 10px;
}

.woocommerce-checkout #payment .payment_box h3 {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Order History Styling */
.order-history-field {
    padding: 10px;
    border: 1px solid #ccc;
    width: calc(100% - 22px);
    box-sizing: border-box;
    border-radius: 8px; /* Toegevoegd voor afgeronde hoeken */
}

.order-history-button {
    padding: 10px 20px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: none;
    cursor: pointer;
    border-radius: 8px; /* Toegevoegd voor afgeronde hoeken */
}

.order-history-button:hover,
.continue.button:hover {
    background-color: var(--hover-color);
}

.continue.button {
    background-color: var(--secondary-color);
    color: var(--text-color);
    padding: 10px 20px;
    border: none;
    text-decoration: none;
    display: inline-block;
    margin: 10px 0;
    border-radius: 8px; /* Toegevoegd voor afgeronde hoeken */
}

/* Verbreder selectieveld voor aantallen in de winkelwagen */
.woocommerce-cart .quantity select.input-text.qty {
    width: 60% !important; /* Verander dit percentage naar wens */
    max-width: 100px; /* Beperk de maximale breedte als dat nodig is */
}


/* style voor verkoop rapport */
/* Gebruik !important om de CSS te forceren */
table.widefat {
    border-collapse: collapse !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

table.widefat th, table.widefat td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
    text-align: left !important;
}

table.widefat th {
    background-color: #f1f1f1 !important;
    font-weight: bold !important;
}

table.widefat td {
    background-color: #fff !important;
}

h3 {
    margin-top: 20px !important;
}


/* Responsive Aanpassingen */
@media only screen and (max-width: 900px) {
    body {
        font-size: 16px; /* Verklein de lettergrootte voor kleinere schermen */
        padding: 10px;
    }

    .woocommerce button.button,
    .woocommerce a.button {
        padding: 8px 16px; /* Verminder padding voor knoppen op kleinere schermen */
    }

    .woocommerce-checkout #payment .payment_box {
        padding: 8px; /* Verminder padding in de betalingsbox */
    }

    .order-history-field {
        width: calc(100% - 16px); /* Pas de breedte aan voor mobiel */
    }

    .woocommerce-cart .quantity select.input-text.qty {
        width: 80% !important; /* Verander dit percentage naar wens voor mobiel */
        max-width: 120px; /* Pas maximale breedte aan voor mobiel */
    }
}

/* Tickera Order Details Tabel */
.order-details.widefat.shadow-table {
    background-color: #042134 !important; /* Nieuwe achtergrondkleur */
    color: var(--text-color) !important; /* Zorg dat de tekst zichtbaar blijft */
    border-collapse: collapse !important;
    width: 100% !important;
}

.order-details.widefat.shadow-table th {
    background-color: #042134 !important; /* Tabelkopkleur */
    color: var(--text-color) !important;
    padding: 10px;
    text-align: left;
}

.order-details.widefat.shadow-table tr,
.order-details.widefat.shadow-table td {
    background-color: #042134 !important; /* Cel achtergrondkleur */
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    padding: 8px;
}

.order-details.widefat.shadow-table .alternate {
    background-color: var(--hover-color) !important; /* Alternatieve rijkleur */
}

/* Zorg dat de downloadknop de juiste stijl heeft */
.order-details.widefat.shadow-table a.button {
    background: #E1081B !important;
    color: var(--text-color) !important;
    border: 1px solid #000;
    border-radius: 8px;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
}

.order-details.widefat.shadow-table a.button:hover {
    background: #C10716 !important;
}

/* Witte Order Details Tabel */
.woocommerce-order-details {
    color: #fff !important; /* Witte tekst */
}

.woocommerce-order-details thead th,
.woocommerce-order-details tbody td {
    color: #fff !important; /* Witte tekst voor de tabelcellen */
    border: 1px solid #fff !important; /* Witte randen voor de tabel (behalve het totaalgedeelte) */
}

.woocommerce-order-details tfoot th,
.woocommerce-order-details tfoot td {
    color: #fff !important; /* Witte tekst voor het totaalgedeelte */
    border: none !important; /* Geen randen voor het totaalgedeelte */
}

.woocommerce-order-details table {
    border-collapse: collapse !important; /* Zorg ervoor dat de randen goed samenvallen */
}