/* questcontrol-styles.css */

/* ======================
 * Key Adjustments
   ====================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
    min-width: 17% !important;
}

.woocommerce-order-details table thead {
    display: table-header-group !important;
}

/* ======================
   Tooltip Styles
   ====================== */

/* Tooltip Container */
.questcontrol-tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip Content (always visible) */
.questcontrol-tooltip-content {
    text-decoration: underline dotted;
}

/* Tooltip Text (hidden by default) */
.questcontrol-tooltip-text {
    visibility: hidden;
    background: #ffffff;
    width: 250px;
    color: #000;
    text-align: left;
    position: absolute;
    z-index: 999;
    bottom: 125%;
    left: -110px;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: pre-line;
    font-size: 0.85em;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2) !important;
    padding: 10px;
    border-radius: 10px;
    font-weight: 400;
    border: 1px var(--bricks-color-tdkgvo) solid;
}

/* Tooltip Arrow */
.questcontrol-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Position at the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Show Tooltip on Hover */
.questcontrol-tooltip-container:hover .questcontrol-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Optional: Style for the FontAwesome tooltip icon */
.questcontrol-tooltip-container i.fas.fa-question-circle {
    color: var(--bricks-color-tdkgvo);
    font-size: 1em;
    cursor: help;
    margin-left: 4px;
}

/* ======================
   Mini-Cart Styles
   ====================== */

/* Mini-Cart Item Container */
.questcontrol-mini-cart-item {
    margin-bottom: 1em;
    border-bottom: 1px solid #eee;
    padding-bottom: 1em;
}

/* Mini-Cart Item Content Layout */
.qc-mini-cart-item-content {
    display: flex;
    gap: 10px;
}

/* Mini-Cart Thumbnail */
.qc-mini-cart-thumb {
    flex-shrink: 0;
}

/* Mini-Cart Details */
.qc-mini-cart-details {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Line Total (e.g., "5 × €9.99 = €49.95") */
/* No specific styles applied; add if needed */
.qc-mini-cart-line {
    /* Style for the row “5 × €9.99 = €49.95” */
}

/* Backorder Information */
.qc-mini-cart-backorder {
    color: var(--bricks-color-xpmhkh);
    font-weight: bold;
    margin-top: 0.3em;
}

/* Mini-Cart Summary */
.questcontrol-mini-cart-summary {
    margin-top: auto;
    padding-top: 1em;
}

/* BricksBuilder Mini-Cart Total Styling */
.brxe-woocommerce-mini-cart .cart-detail .total {
    border-top-style: none !important;
    border-top-width: 0 !important;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    display: flex;
    justify-content: space-between;
    margin: 20px 0 0;
    padding: 0;
}

/* ======================
   Cart Collaterals and Custom Checkout Totals Styles
   ====================== */

/* Cart Collaterals and Custom Checkout Totals Tables */
.cart-collaterals table,
.custom-checkout-totals table {
    border-top: none !important;
    border-bottom: none !important;
}

/* Specific Rows in Cart Collaterals and Custom Checkout Totals */
.cart-collaterals table tr.ordertotaal,
.cart-collaterals table tr.order-total,
.custom-checkout-totals table tr.ordertotaal-no-tax,
.custom-checkout-totals table tr.ordertotaal-incl-tax {
    border-top: 1px solid var(--bricks-border-color) !important;
}

.cart-collaterals table tr.ordertotaal-no-tax {
    border-bottom: 1px solid var(--bricks-border-color) !important;
}

/* ======================
   Proceed to Checkout Button Container
   ====================== */

/* Proceed to Checkout Button Container */
.wc-proceed-to-checkout {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
}

#wc-stripe-express-checkout-element {
    flex-wrap: nowrap !important;
}

/* Buttons within Proceed to Checkout */
.cart-collaterals .wc-proceed-to-checkout .button {
    line-height: 30px !important;
    width: 290px;
}

/* ======================
   Cart Form Styles
   ====================== */

/* Cart Form Table Header */
.woocommerce-cart-form thead {
    line-height: 20px !important;
}

/* BricksBuilder Mini-Cart Amount Styling */
.brxe-woocommerce-mini-cart .amount bdi {
    color: rgba(255, 255, 255, 0);
}

/* Disabled Submit Button Hover State */
.woocommerce-cart-form button[type=submit]:disabled:hover {
    color: #fff !important;
}

/* ======================
   Checkout Form Layout for BricksBuilder
   ====================== */

/* Checkout Form Layout for BricksBuilder */
form.woocommerce-checkout.bricks-default-checkout {
    display: flex !important;
    flex-direction: column-reverse !important;
}

/* ======================
   Custom Checkout Totals Styles
   ====================== */

/* Custom Checkout Totals Container */
.custom-checkout-totals {
    float: right !important;
    height: fit-content !important;
    width: 50% !important;
}

/* Custom Checkout Totals Table */
table.custom-checkout-totals-table {
    margin: 20px 0 !important;
}

/* ======================
   Billing Form Styles
   ====================== */

/* Custom Billing Grid Layout */
.custom-billing-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 5px !important;
    margin-bottom: 20px !important;
}

/* Grid Row - Uses display: contents to allow grid-col to occupy grid areas */
.grid-row {
    display: contents !important;
}

/* Grid Column */
.grid-col {
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* Grid Column Full Width */
.grid-col-full {
    grid-column: span 2 !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* Billing Fields Labels */
.custom-billing-fields label {
    display: block !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}

/* Billing Fields Displayed Values */
.custom-billing-fields span {
    display: block !important;
    padding: 8px !important;
    background-color: #f9f9f9 !important;
    border-radius: 4px !important;
}

/* ======================
   Shipping Form Styles
   ====================== */

/* Shipping Form */
.woocommerce-checkout .woocommerce-shipping-fields {
    margin: 0 !important;
}

/* Custom Shipping Grid Layout */
.custom-shipping-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 5px !important;
    margin-bottom: 20px !important;
}

/* Shipping Form Rows */
.custom-shipping-grid .form-row {
    width: 100% !important;
}

/* ======================
   Additional Table Styles
   ====================== */

/* Table Cells and Headers in Cart and Custom Checkout Review Order */
tr.woocommerce-cart-form__cart-item td,
table.shop_table_responsive.cart th,
.shop_table.custom_checkout_review_order td,
.shop_table.custom_checkout_review_order th {
    border: 1px solid var(--bricks-border-color) !important;
    text-align: center !important;
    padding: 10px 5px !important;
}

/* Product Thumbnail Image in Custom Checkout Review Order */
.shop_table.custom_checkout_review_order .product-thumbnail img {
    max-width: 50% !important;
}

/* Quantity Input Styling in Cart Forms */
form.cart .quantity,
form.woocommerce-cart-form .quantity {
    border: 1px solid #33ab49;
    border-radius: 20px;
    padding: 5px;
    width: 150px !important;
    gap: 5px;
}

form.cart .quantity .action,
form.woocommerce-cart-form .quantity .action {
    color: #363636;
    background-color: #e4e7e9;
    border-width: 1px !important;
    border: 1px solid var(--bricks-color-tdkgvo);
    border-radius: 15px;
}

form.cart .quantity .qty,
form.woocommerce-cart-form .quantity .qty {
    color: #363636;
    background-color: #e4e7e9;
    border-width: 1px !important;
    border: 1px solid var(--bricks-color-tdkgvo);
    border-left: 1px solid var(--bricks-color-tdkgvo) !important;
    border-right: 1px solid var(--bricks-color-tdkgvo) !important;
    border-radius: 15px;
    width: 50px !important;
}

form.cart .quantity .action svg,
form.woocommerce-cart-form .quantity svg {
    width: 25px !important;
    height: 25px !important;
}

td.product-quantity {
    display: flex;
    justify-content: center;
}

/* SKU Column Width */
td.product-sku {
    width: 7em !important;
}

/* Price Column Width */
td.product-price {
    width: 6em !important;
}

/* Shipping Methods List Styling */
.woocommerce-shipping-methods > li { 
    margin-bottom: 0 !important;
}

/* ======================
   WooCommerce Order Details Page Styles
   ====================== */

/* -----------------------------------------------------
   Section: Order Details
   ----------------------------------------------------- */

.woocommerce-order-details {
    margin: 2em 0 !important;
    padding: 1.5em !important;
    background-color: #fefefe !important; /* Light background for contrast */
    border: 1px solid #e0e0e0 !important; /* Subtle border */
    border-radius: 8px !important;
}

.woocommerce-order-details__title {
    font-size: 1.8em !important;
    margin: 0.5em 0 !important;
    color: #333333 !important;
}

/* -----------------------------------------------------
   Table: Order Details
   ----------------------------------------------------- */

.woocommerce-order-details table.order_details {
    width: 100% !important;
    border-collapse: collapse !important;
}

.woocommerce-order-details table.order_details thead th {
    background-color: #fff !important;
    color: #555555 !important;
    font-weight: bold !important;
    padding: 12px !important;
    text-align: center !important;
    border-bottom: 2px solid #dddddd !important;
	width: auto !important;
}

.woocommerce-order-details table.order_details tbody tr.order_item:nth-child(even) {
    background-color: #ffffff !important;
}

.woocommerce-order-details table.order_details tbody tr.order_item:nth-child(odd) {
    background-color: #fafafa !important;
}

.woocommerce-order-details table.order_details tbody tr.order_item:hover {
    background-color: #f0f0f0 !important;
}

.woocommerce-order-details table.order_details tbody td {
    padding: 12px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #eeeeee !important;
	width: auto !important;
}

.woocommerce-order-details table.order_details tbody td.product-thumbnail img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
}

p.order-again {
    display: flex !important;
    justify-content: center !important;
    font-size: 1.3em !important;
}

/* -----------------------------------------------------
   Table Headers: Specific Column Styles
   ----------------------------------------------------- */

/* Specific alignment adjustments */
.shop_table td.product-price,
.shop_table td.product-subtotal,
.shop_table td.product-leverbaar,
.shop_table td.product-backorders {
    text-align: center !important;
}

.shop_table td.product-sku,
.shop_table td.product-quantity {
    text-align: center !important;
}

/* -----------------------------------------------------
   Tooltips: QuestControl Tooltip Styling
   ----------------------------------------------------- */

/* Already defined above */

/* -----------------------------------------------------
   Table Footers: Order Totals and Actions
   ----------------------------------------------------- */

.shop_table tfoot th {
    background-color: transparent !important;
    color: #555555 !important;
    font-weight: bold !important;
    padding: 12px !important;
    text-align: left !important;
    border-top: 2px solid #dddddd !important;
}

.shop_table tfoot td {
    padding: 12px !important;
    text-align: center !important;
    border-top: 1px solid #eeeeee !important;
    font-weight: bold !important;
}

.shop_table tfoot td .woocommerce-Price-amount {
    font-weight: bold !important;
    color: #333333 !important;
}

.shop_table tfoot tr th,
.shop_table tfoot tr td {
    vertical-align: middle !important;
}

/* ======================
   Order Details Totals Styles
   ====================== */

/* Container for Order Totals */

/* Inner Table Styling */
.order-details-totals_inner {
    width: 100% !important;
    border-collapse: collapse !important;
}

table.shop_table.order-details-totals_inner {
    border-top: 0 !important;
}

.woocommerce-order-details .order-details-totals tr {
    border: 0 !important;
}

.woocommerce-order-details .order-details-totals tr.witregel {
	border-bottom: var(--bricks-border-color) 2px solid !important
}

.woocommerce-order-details .order-details-totals tr.ordertotaal.boven {
	border-bottom: 0 !important;
}
 
.woocommerce-order-details .order-details-totals tr.verzendkosten,
.woocommerce-order-details .order-details-totals tr.btw,
.woocommerce-order-details .order-details-totals tr.grand_total_incl-tax {
    border-bottom: #000 1px solid !important;
}

.order-details-totals_inner thead th {
    /* Not used since no thead, but kept for consistency */
}

.order-details-totals_inner tbody tr {
    /* Optional: Add alternating row colors */
}

.order-details-totals_inner th {
    color: #555555 !important;
    font-weight: bold !important;
    padding: 12px !important;
    text-align: left !important; /* Align headers to the left */
	border: 0 !important;
	background-color: #fafafa !important;
}

.order-details-totals_inner td {
    padding: 12px !important;
    text-align: center !important;
    vertical-align: middle !important;
	border: 0 !important;
	background-color: #fafafa !important;
}


.order-details-totals_inner tr.ordertotaal.boven th,
.order-details-totals_inner tr.ordertotaal.boven td,
.order-details-totals_inner tr.witregel th,
.order-details-totals_inner tr.witregel td,
.order-details-totals_inner tr.betaalmethode th,
.order-details-totals_inner tr.betaalmethode td{
	background-color: #fff !important;
}

.order-details-totals_inner tr.ordertotaal.boven td {
	text-align: right !important;
	padding-right: 24px !important;
	font-weight: bold !important;
}

/* Specific alignment for different columns */
.order-details-totals_inner th, 
.order-details-totals_inner td {
    /* Already aligned */
}

/* Refunded Quantity Styling */
.refunded {
    color: #d9534f !important; /* Red color for refund */
    font-size: 0.85em !important;
    display: block !important;
    margin-top: 5px !important;
}

.refunded del {
    color: #a94442 !important; /* Darker red for original quantity */
    text-decoration: line-through !important;
}

.refunded ins {
    color: #3c763d !important; /* Green color for remaining quantity */
    text-decoration: underline !important;
}

/* Betaalmethode Styling */
.order-details-totals_inner tr.betaalmethode th {
    text-align: left !important;
}

.order-details-totals_inner tr.betaalmethode td {
    text-align: center !important;
    font-weight: normal !important;
}

/* Responsive Design Enhancements for Order Details Totals */
@media (max-width: 768px) {
    .order-details-totals_inner {
        width: 100% !important;
    }

    .order-details-totals_inner th,
    .order-details-totals_inner td {
        display: block !important;
        width: 100% !important;
    }

    .order-details-totals_inner tr {
        margin-bottom: 1.5em !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 1em !important;
        background-color: #ffffff !important;
    }

    .order-details-totals_inner td {
        text-align: center !important;
        padding-left: 50% !important;
        position: relative !important;
    }

    .order-details-totals_inner td::before {
        content: attr(data-title) !important;
        position: absolute !important;
        left: 1em !important;
        width: 45% !important;
        padding-right: 1em !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-weight: bold !important;
        color: #555555 !important;
    }

    /* Ensure Text Alignments on Mobile */
    .order-details-totals_inner tbody td.product-price,
    .order-details-totals_inner tbody td.product-subtotal,
    .order-details-totals_inner tbody td.product-leverbaar,
    .order-details-totals_inner tbody td.product-backorders {
        text-align: center !important;
    }

    .order-details-totals_inner tbody td.product-sku,
    .order-details-totals_inner tbody td.product-quantity {
        text-align: center !important;
    }
}

/* ======================
   Order Details Totals Inner Table Specific Styles
   ====================== */

/* Adjusting Header Styles if Necessary */
.order-details-totals_inner th {
    /* Reuse existing styles or add new ones if needed */
}

/* Adjusting Payment Method Row */
.order-details-totals_inner tr.betaalmethode th {
    /* Specific styles if needed */
}

/* ======================
   Cart Totals Styles
   ====================== */

/* Cart Totals Container */
.cart_totals {
    margin-top: 2em !important;
    padding: 1.5em !important;
    border: 1px solid #e0e0e0 !important; /* Subtle border */
    border-radius: 8px !important;
}

/* Cart Totals Title */
.cart_totals h2 {
    font-size: 1.5em !important;
    margin-bottom: 1em !important;
    color: #333333 !important;
    border-bottom: 2px solid #dddddd !important;
    padding-bottom: 0.5em !important;
}

/* Cart Totals Table */
.cart_totals .shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 1.5em !important;
}

.cart_totals .shop_table th {
    color: #555555 !important;
    font-weight: bold !important;
    padding: 12px !important;
    text-align: left !important;
}

.cart_totals .shop_table td {
    padding: 12px !important;
    text-align: right !important;
    vertical-align: middle !important;
}

/* Specific Row Styles */
.cart_totals .shop_table tr.order-total th,
.cart_totals .shop_table tr.order-total td {
    font-weight: bold !important;
    font-size: 1.2em !important;
}

/* Order Total Price */
.cart_totals .shop_table tr.order-total .woocommerce-Price-amount {
    color: #0073aa !important; /* WooCommerce primary color */
}

/* Responsive Design for Cart Totals */
@media (max-width: 768px) {
    .cart_totals {
        padding: 1em !important;
    }

    .cart_totals .shop_table th,
    .cart_totals .shop_table td {
        font-size: 0.9em !important;
        padding: 8px !important;
    }

    .cart_totals h2 {
        font-size: 1.3em !important;
    }
}

/* ======================
   Backorder Table Styles
   ====================== */

/* Backorder Table */
.backorder-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

table.shop_table.order_details.backorder-table thead tr {
    background-color: #fff !important;
}

table.shop_table.order_details.backorder-table tbody tr:nth-child(odd) {
	background-color: #fafafa !important;
}

table.shop_table.order_details.backorder-table tbody tr:nth-child(even) {
	background-color: #fff !important;
}

.backorder-table th {
    color: #555555 !important;
    font-weight: bold !important;
    padding: 12px !important;
    text-align: center !important;
    border: 2px solid #dddddd !important;
}

.backorder-table td {
    padding: 12px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #eeeeee !important;
}

/* Responsive Design for Backorder Table */
@media (max-width: 768px) {
    .backorder-table {
        width: 100% !important;
    }

    .backorder-table th,
    .backorder-table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 8px !important;
    }

    .backorder-table tr {
        margin-bottom: 1em !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 1em !important;
    }

    .backorder-table td::before {
        content: attr(data-title) !important;
        display: inline-block !important;
        width: 100px !important;
        font-weight: bold !important;
        color: #555555 !important;
    }
}