/**
 * WC License Manager Connector - Frontend Styles
 * Styling for customer-facing order pages
 *
 * @package WC_License_Manager_Connector
 * @since 2.0.0
 */

/* ============================================
   COLOR SYSTEM
   ============================================ */
:root {
    /* Background colors */
    --wclmc-primary: #2271b1;
    --wclmc-success: #46b450;

    /* Text colors */
    --wclmc-primary-text: #ffffff;
    --wclmc-success-text: #ffffff;

    /* Utility colors */
    --wclmc-gray-dark: #333;
    --wclmc-gray-medium: #666;
    --wclmc-gray-light: #f5f5f5;
    --wclmc-border: #e0e0e0;
    --wclmc-border-light: #ccc;
    --wclmc-warning-bg: #fff3cd;
    --wclmc-warning-text: #856404;
}

/* ============================================
   ALIGNMENT FIXES
   ============================================ */

/* Force left-align purchase notes and table cells */
.woocommerce-order-details table tbody tr td,
.woocommerce-order-details .wc-item-meta,
.woocommerce-order-details .wc-item-meta *,
.woocommerce-table--order-details tbody tr td,
.woocommerce-table--order-details .wc-item-meta,
.woocommerce-table--order-details .wc-item-meta *,
.order_details .wc-item-meta,
.order_details .wc-item-meta *,
.shop_table .wc-item-meta,
.shop_table .wc-item-meta *,
td.product-name .wc-item-meta,
td.product-name .wc-item-meta *,
.woocommerce-table__product-name .wc-item-meta,
.woocommerce-table__product-name .wc-item-meta * {
    text-align: left !important;
}

/* Product name cell should allow inline content */
td.product-name,
.woocommerce-table__product-name {
    text-align: left !important;
    white-space: normal !important;
}

/* Right-align product total/price column */
.woocommerce-order-details .product-total,
.woocommerce-table--order-details .product-total,
.woocommerce-table__product-total,
td.product-total {
    text-align: right !important;
}

.wc-item-meta,
.wc-item-meta * {
    display: block !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Consistent font sizing for product name, quantity, and purchase notes */
.woocommerce-order-details .product-name,
.woocommerce-order-details .product-name a,
.woocommerce-order-details .product-quantity,
.woocommerce-table--order-details .product-name,
.woocommerce-table--order-details .product-name a,
.woocommerce-table--order-details .product-quantity,
.woocommerce-table__product-name,
.woocommerce-table__product-name a,
.woocommerce-order-details .product-purchase-note td,
.woocommerce-table--order-details .product-purchase-note td,
.woocommerce-table__product-purchase-note td {
    font-size: 15px !important;
}

/* Bold product names */
.woocommerce-order-details .product-name,
.woocommerce-order-details .product-name a,
.woocommerce-table--order-details .product-name,
.woocommerce-table--order-details .product-name a,
.woocommerce-table__product-name,
.woocommerce-table__product-name a {
    font-weight: bold !important;
}

/* ============================================
   PRODUCT THUMBNAIL
   ============================================ */

.wclm-product-thumbnail {
    border-radius: 4px;
    border: 1px solid var(--wclmc-border);
    vertical-align: middle !important;
    margin-right: 12px;
    display: inline-block !important;
}

/* Product wrapper - keep everything inline */
.wclm-product-wrapper {
    display: inline !important;
}

.wclm-product-name-wrapper {
    display: inline !important;
    vertical-align: middle !important;
}

.wclm-product-name-wrapper a {
    vertical-align: middle !important;
}

/* Ensure quantity stays on same line */
.woocommerce-order-details .product-quantity,
.woocommerce-table--order-details .product-quantity,
.woocommerce-table__product-quantity {
    margin-left: 8px !important;
    vertical-align: middle !important;
    display: inline !important;
}

/* ============================================
   LICENSE DISPLAY
   ============================================ */

.wclmc-license-container {
    display: block;
    margin-top: 20px;
    color: var(--wclmc-gray-medium);
}

.wclmc-license-label {
    color: var(--wclmc-gray-dark);
    font-size: 15px;
    font-weight: 600;
}

.wclmc-license-item {
    display: inline-block;
    margin: 10px 0;
}

.wclmc-license-code {
    background: var(--wclmc-gray-light);
    padding: 4px 8px;
    font-family: monospace;
    font-size: 14px;
    border-radius: 3px;
}

/* Copy button for frontend */
.wclm-copy-btn,
button.wclm-copy-btn {
    font-size: 11px;
    padding: 2px 6px;
    cursor: pointer;
    border: none;
    background: var(--wclmc-primary) !important;
    color: var(--wclmc-primary-text) !important;
    border-radius: 3px;
    margin-left: 6px;
    transition: all 0.2s ease;
}

.wclm-copy-btn:hover,
button.wclm-copy-btn:hover {
    background: var(--wclmc-primary-hover) !important;
    color: var(--wclmc-primary-text) !important;
    border: none !important;
}

.wclm-copy-btn.wclmc-copied,
button.wclm-copy-btn.wclmc-copied {
    background: var(--wclmc-success) !important;
    color: var(--wclmc-success-text) !important;
    border: none !important;
}

/* Processing status */
.wclmc-status-processing {
    background: var(--wclmc-warning-bg);
    color: var(--wclmc-warning-text);
    padding: 3px 8px;
    font-style: italic;
    border-radius: 3px;
    font-size: 15px;
}