/* Hide Leave Feedback button */
.woocommerce-orders-table__cell-order-actions .leave_feedback {
    display: none !important;
}

/* Modernize Orders Table */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table {
    border-collapse: collapse;
    font-size: 12px; /* Further reduced font size */
    border: none;
}

.woocommerce-orders-table thead th {
    background-color: #f9fafb;
    color: #4b5563;
    font-weight: 600;
    padding: 10px 6px; /* Reduced horizontal padding */
    text-align: left !important; /* Forced left align */
    border: none;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

/* Adjust Order column width */
.woocommerce-orders-table th.woocommerce-orders-table__header-order-number,
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number {
    width: auto; /* Let it size naturally */
}

.woocommerce-orders-table tbody td {
    padding: 10px 6px; /* Reduced horizontal padding */
    color: #374151;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap; /* Prevents text wrapping for data */
    vertical-align: middle;
    text-align: left !important; /* Forced left align */
}

/* Row Hover Effect */
.woocommerce-orders-table tbody tr:hover td {
    background-color: #fbfbfc;
}

/* Modernize Action Buttons Layout - Allow Wrapping */
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
    text-align: right !important;
    white-space: normal !important; /* Allows buttons to wrap instead of overflowing */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px; /* Reduced spacing between wrapped buttons */
}

.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button {
    padding: 4px 8px; /* Reduced button padding */
    font-size: 11px; /* Reduced button font size */
    border-radius: 6px;
    margin: 2px !important; /* Reset margin since gap is handling spacing */
    display: inline-block;
    white-space: nowrap;
}

/* Force Table Layout on Tablets (576px to 768px) overriding WooCommerce defaults */
@media (min-width: 576px) and (max-width: 768px) {
    .woocommerce-account table.woocommerce-orders-table { display: table !important; width: 100% !important; }
    .woocommerce-account table.woocommerce-orders-table thead { display: table-header-group !important; }
    .woocommerce-account table.woocommerce-orders-table thead tr { display: table-row !important; }
    .woocommerce-account table.woocommerce-orders-table tbody tr { display: table-row !important; }
    .woocommerce-account table.woocommerce-orders-table th, 
    .woocommerce-account table.woocommerce-orders-table td { 
        display: table-cell !important; 
        text-align: left !important;
    }
    .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { 
        text-align: right !important; 
        justify-content: flex-end;
    }
    .woocommerce-account table.woocommerce-orders-table td::before { display: none !important; }
}

/* Responsive Stacked Design for Mobile (< 576px) */
@media (max-width: 575px) {
    /* Add Separator/Card style for each order */
    .woocommerce-account table.woocommerce-orders-table tbody tr {
        display: block;
        margin-bottom: 24px;
        border: 1px solid #e5e7eb;
        border-bottom: 6px solid #d1d5db; /* Visual separator */
        border-radius: 8px;
        overflow: hidden;
    }
    
    .woocommerce-account table.woocommerce-orders-table tbody td {
        border-bottom: 1px solid #f3f4f6;
    }
    
    .woocommerce-account table.woocommerce-orders-table tbody td:last-child {
        border-bottom: none;
    }

    /* Remove the empty label/colon from the actions cell */
    .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
        display: none !important;
    }

    /* Align buttons properly and allow them to wrap */
    .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
        text-align: center !important;
        justify-content: flex-start;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* Target the status cell to prevent wrapping */
td.woocommerce-orders-table__cell-order-status {
  white-space: nowrap !important;
}

/* The capsule styling */
small.received {
  display: inline-block !important; /* Force it to stay inline */
  margin-left: 6px !important;      /* Smaller gap to save space */
  font-size: 9px !important;        /* Slightly smaller font */
  padding: 1px 6px !important;      /* Compact padding */
  border-radius: 999px;
  border: 1px solid #10b981;
  color: #10b981;
  background-color: transparent;
  font-weight: 700 !important;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1;
  position: relative;
  top: -1px; /* Fine-tunes the vertical alignment */
}

/* Fix for the nested <small> tag inside */
small.received small {
  font-size: inherit;
  display: inline;
}

/* Target the "Mark received" button using its specific class */
.woocommerce-button.button.wcv-mark-all-received {
    background-color: #008037 !important;
    border-color: #008037 !important;
    color: #ffffff !important;
}

/* Optional: Add a hover state for a better user experience */
.woocommerce-button.button.wcv-mark-all-received:hover {
    background-color: #00662c !important; /* A slightly darker green */
    border-color: #00662c !important;
}

/* Style the table header background */
.woocommerce-orders-table thead tr th {
    background-color: #008037 !important;
    color: #ffffff !important; /* Ensure text is readable */
    border-color: #008037 !important;
}

/* Optional: remove borders between header cells for a cleaner look */
.woocommerce-orders-table thead th {
    border-bottom: none !important;
}

/* 1. Prepare the table for rounded corners */
table.woocommerce-orders-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* 2. Apply the radius to the top corners of the header */
table.woocommerce-orders-table thead th:first-child {
    border-top-left-radius: 12px !important;
}

table.woocommerce-orders-table thead th:last-child {
    border-top-right-radius: 12px !important;
}

/* Optional: If the table has a border, ensure it follows the radius */
table.woocommerce-orders-table {
    border-radius: 12px;
}