/*
Theme Name:   Synergy Theme
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/

.jet-select__control, .jet-sorting-select {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 100%;
}

.woocommerce .woocommerce-MyAccount-navigation-wrapper.type-new {
        border-radius: 32px;
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, 0.70);
        box-shadow: 0 4px 36.9px 0 rgba(0, 0, 0, 0.10);
        display: flex;
        padding: 40px 0 40px 0;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        align-self: stretch;
}

.woocommerce-MyAccount-navigation {
    width: 100%;
}

.MyAccount-user-info {
    justify-content: center;
}

.woocommerce-MyAccount-navigation-link.is-active {
    border-top: 2px solid var(--Gradient-Green-Gradient, #0C9048);
border-bottom: 2px solid var(--Gradient-Green-Gradient, #0C9048);
background: linear-gradient(90deg, #F5F5F5 0%, #FFF 100%);
}

.woocommerce-MyAccount-navigation-link a {
    justify-content: center;
}

/* Container and Table Base */
.woocommerce-orders-table {
    border-collapse: collapse !important;
    border: none !important;
    width: 100%;
    font-family: 'Sarabun', sans-serif; /* Recommended for Thai web design */
}

/* Header Styling */
.woocommerce-orders-table thead th {
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: 2px solid #333 !important; /* Thick dark line like image */
    padding: 15px 10px !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 1.1em;
}

/* Table Body Cells */
.woocommerce-orders-table td, 
.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number {
    border-top: none !important;
    border-bottom: 1px solid #eee !important; /* Subtle gray line */
    padding: 20px 10px !important;
    vertical-align: middle !important;
    background: #fff !important;
}

/* Order ID Styling */
.woocommerce-orders-table__cell-order-number a {
    font-weight: 800 !important;
    color: #000 !important;
    text-decoration: none;
}

/* Status and Date text */
.woocommerce-orders-table__cell-order-date,
.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__cell-order-total {
    color: #333 !important;
    font-weight: 400;
}

/* Gradient Button Styling (The "ดูรายละเอียด" Button) */
.woocommerce-orders-table__cell-order-actions a.button.view {
    background: linear-gradient(90deg, #4da352 0%, #d4e05b 100%) !important;
    color: #fff !important;
    border-radius: 50px !important; /* Pill shape */
    padding: 10px 25px !important;
    border: none !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    display: inline-block;
}

.woocommerce-orders-table__cell-order-actions a.button.view:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Cancel Button - Subtle Red/Grey */
.woocommerce-orders-table__cell-order-actions a.button.cancel {
    background: transparent !important;
    color: #cc0000 !important; /* Muted Red */
    border: 2px solid #cc0000 !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
}

.woocommerce-orders-table__cell-order-actions a.button.pay:hover,
.woocommerce-orders-table__cell-order-actions a.button.cancel:hover {
    background: #f8f8f8 !important;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 600px) {
    .woocommerce-orders-table__header {
        display: none;
    }
    .woocommerce-orders-table__row {
        display: block;
        margin-bottom: 20px;
        border-bottom: 2px solid #eee;
    }
    .woocommerce-orders-table__cell {
        display: block;
        text-align: right !important;
        padding-left: 50% !important;
        position: relative;
    }
    .woocommerce-orders-table__cell::before {
        content: attr(data-title);
        position: absolute;
        left: 10px;
        font-weight: bold;
    }
}