/**
 * DROIX Preorders & Deposits - Product Page Styles
 *
 * Design Philosophy: Theme-Agnostic
 * - Inherit typography from active theme
 * - Use minimal, semantic styling
 * - Leverage WooCommerce's existing design patterns
 * - Adapt to any theme without manual configuration
 *
 * @package DROIX_Woo_Deposits
 * @since 0.2.0
 */

/* ==========================================================================
   Container - Adapts to Theme Context
   ========================================================================== */

.cwdp-payment-options {
    /* Hidden by default - shown by JavaScript when eligible */
    display: none;

    /* Inherit spacing from theme */
    margin-block-end: var(--wc-block-spacing, 1.5rem);

    /* Left padding for visual alignment */
    padding-left: 5px;
}

.cwdp-payment-options.cwdp-visible {
    display: block;
}

/* Additional text inherits WooCommerce notice styling */
.cwdp-additional-text {
    /* Uses woocommerce-info class for theme consistency */
}

/* ==========================================================================
   Payment Method Title - Explicit Typography for Hierarchy
   ========================================================================== */

.cwdp-payment-method-title {
    /* Explicit styling for clear hierarchy */
    font-family: inherit;
    font-size: 16px;
    font-weight: 600; /* Semi-bold */
    line-height: 1.5;
    color: #000;

    /* Structural spacing */
    margin-block-start: 1em;
    margin-block-end: 0.5em;
}

/* ==========================================================================
   Payment Options - Flex Layout (Theme-Neutral)
   ========================================================================== */

.cwdp-payment-variants {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 2vw, 1rem); /* Responsive gap */
    margin-block-end: 1em;
}

.cwdp-payment-option {
    /* Explicit styling for consistency */
    font-family: inherit;
    font-size: 16px;
    font-weight: 400; /* Normal */
    line-height: 1.5;
    color: #000;

    /* Basic label behavior */
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}

.cwdp-payment-option:hover {
    /* Subtle interaction - theme-agnostic */
    opacity: 0.8;
}

.cwdp-payment-option input[type="radio"] {
    /* Native radio styling inherits from theme */
    margin: 0;
    accent-color: currentColor; /* Respects theme's color */
}

.cwdp-payment-option-text {
    /* Inherit from parent .cwdp-payment-option (16px, normal, black) */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* ==========================================================================
   Date Information - Modern Info Box with Icons
   ========================================================================== */

/* Container with subtle background and border */
.cwdp-dates-container {
    background: #f8f9fa;
    border-left: 3px solid #4a90e2;
    border-right: 3px solid #4a90e2;
    padding: 14px 21px 14px 16px; /* top, right, bottom, left */
    margin-block-start: 16px;
    border-radius: 4px;
    display: none; /* Hidden by default, shown by JS when dates exist */
}

/* Show container when it has the .cwdp-has-dates class (added by JS) */
.cwdp-dates-container.cwdp-has-dates {
    display: block;
}

.cwdp-restock-date,
.cwdp-partial-pay-date {
    /* Smaller, lighter typography for secondary info */
    font-family: inherit;
    font-size: 0.875rem; /* ~14px, reduced from base */
    font-weight: 400;
    line-height: 1.6;
    color: #555;

    /* Spacing between date rows */
    margin-block-start: 0;
    margin-block-end: 8px;

    /* Icon spacing */
    padding-left: 24px;
    position: relative;

    /* Hidden by default, shown by JS when dates exist */
    display: none;
}

.cwdp-restock-date.cwdp-has-date,
.cwdp-partial-pay-date.cwdp-has-date {
    display: block;
}

.cwdp-partial-pay-date.cwdp-has-date {
    margin-block-end: 0; /* Last item has no bottom margin */
}

/* Calendar icon for restock date using Unicode */
.cwdp-restock-date::before {
    content: "📅";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1em;
}

/* Credit card icon for payment date using Unicode */
.cwdp-partial-pay-date::before {
    content: "💳";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1em;
}

/* Date labels slightly bolder */
.cwdp-partial-label {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: #444;
}

.partial-pay-date-value {
    /* Date value styling */
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    color: #555;
}

/* ==========================================================================
   Responsive Behavior - Theme-Agnostic
   ========================================================================== */

@media (max-width: 782px) {
    .cwdp-payment-variants {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cwdp-payment-option {
        width: 100%;
    }
}

/* ==========================================================================
   Accessibility - Universal Standards
   ========================================================================== */

.cwdp-payment-option:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Screen reader only text for better context */
.cwdp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================================================
   Theme Integration Examples (No Overrides Needed)
   ========================================================================== */

/**
 * Example Theme Scenarios:
 *
 * Shoptimizer (Current):
 * - Base font: 16px � Inherits automatically
 * - Headings: Bold � Title inherits weight
 * - Colors: Brand colors � Uses currentColor
 *
 * Astra:
 * - Base font: 15px/18px � Inherits automatically
 * - Headings: Custom weight � Title inherits weight
 * - Colors: Custom palette � Uses currentColor
 *
 * GeneratePress:
 * - Base font: 17px � Inherits automatically
 * - Line height: 1.5 � Inherits automatically
 * - Typography scale � Inherits completely
 *
 * Custom Theme:
 * - Any font stack � Inherits via font-family: inherit
 * - Any sizing system � Inherits via font-size: inherit
 * - Any color scheme � Uses currentColor
 *
 * Result: Component looks native in ALL themes.
 */