/**
 * Invoice Download Card Styles
 *
 * Theme-agnostic styles for the invoice download card displayed on WooCommerce
 * order view pages in the My Account area. Uses CSS custom properties to adapt
 * to both light and dark themes.
 *
 * @package LightEFX_Plugin
 * @since   1.0.0
 */

/* ============================================================================
   CSS Custom Properties for Theme Adaptation
   ========================================================================= */

:root {
  /* Inherit accent color from panel calculator if available, otherwise use default */
  --invoice-accent: var(--lightefx-accent, #daa14c);
  --invoice-accent-hover: var(--lightefx-accent-hover, #f0b970);

  /* Text colors - inherit from theme or use light theme defaults */
  --invoice-text-primary: var(--lightefx-text-primary, #1a1a1a);
  --invoice-text-secondary: var(--lightefx-text-secondary, #4a4a4a);

  /* Button text color - dark for light backgrounds */
  --invoice-btn-text: #1a1a1a;
  --invoice-btn-text-hover: #ffffff;
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  :root:not(.light-theme):not([data-theme="light"]) {
    --invoice-text-primary: var(--lightefx-text-primary, #ffffff);
    --invoice-text-secondary: var(--lightefx-text-secondary, #e0e0e0);
    --invoice-btn-text: #1a1a1a;
    --invoice-btn-text-hover: #ffffff;
  }
}

/* Explicit dark theme override */
body.dark-theme,
body.dark,
html[data-theme="dark"],
.dark-mode {
  --invoice-text-primary: var(--lightefx-text-primary, #ffffff);
  --invoice-text-secondary: var(--lightefx-text-secondary, #e0e0e0);
  --invoice-btn-text: #1a1a1a;
  --invoice-btn-text-hover: #ffffff;
}

/* ============================================================================
   Invoice Download Card Styles
   ========================================================================= */

/* Hide default WooCommerce invoice display */
.woocommerce-account .woocommerce .woocommerce-order-invoice {
    display: none !important;
}

/* Invoice download card container */
.cs-invoice-card {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 0;
    margin: 0 0 24px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    row-gap: 10px;
    column-gap: 16px;
}

/* Invoice card heading */
.cs-invoice-card h3 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: inherit;
    line-height: 1.2;
    color: var(--invoice-text-primary) !important;
}

/* Invoice card description */
.cs-invoice-card p {
    grid-column: 1 / 2;
    margin: 0;
    color: var(--invoice-text-secondary) !important;
}

/* Download button */
.cs-invoice-card .cs-invoice-btn {
    grid-column: 2 / 3;
    justify-self: end;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    background: var(--invoice-accent) !important;
    color: var(--invoice-btn-text) !important;
    padding: 10px 14px;
    border-radius: 6px;
    border: 0 !important;
    box-shadow: none !important;
    transition: background-color .3s, color .3s, transform .2s;
}

/* Download button hover state */
.cs-invoice-card .cs-invoice-btn:hover {
    background: var(--invoice-accent-hover) !important;
    color: var(--invoice-btn-text-hover) !important;
    transform: translateY(-1px);
}

/* Download button active state */
.cs-invoice-card .cs-invoice-btn:active {
    transform: translateY(0);
}

/* Download button focus state */
.cs-invoice-card .cs-invoice-btn:focus {
    outline: 2px solid var(--invoice-accent) !important;
    outline-offset: 2px;
}

/* Download button icon */
.cs-invoice-card .cs-invoice-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ============================================================================
   Responsive Layout
   ========================================================================= */

/* Mobile responsive layout */
@media (max-width: 600px) {
    .cs-invoice-card {
        grid-template-columns: 1fr;
    }

    .cs-invoice-card .cs-invoice-btn {
        justify-self: start;
        margin-top: 8px;
    }
}