/**
 * Bulk Pricing Enquiry - Frontend Styles
 *
 * Uses CSS custom properties so themes can easily override colors.
 * Falls back to WooCommerce classes where possible for theme compatibility.
 *
 * @package BulkPricingEnquiry
 */

/* CSS Custom Properties - Themes can override these */
.bpe-enquiry-form-wrapper {
    /* Primary color - tries to inherit from common theme conventions */
    --bpe-primary-color: var(--wc-primary, var(--theme-primary, var(--primary-color, var(--accent-color, currentColor))));
    --bpe-primary-hover: var(--wc-primary-hover, var(--theme-primary-hover, var(--bpe-primary-color)));

    /* Text colors - inherit from theme */
    --bpe-text-color: var(--wc-text-color, var(--theme-text, inherit));
    --bpe-text-muted: var(--wc-secondary-text, #666);

    /* Background colors */
    --bpe-bg-color: var(--wc-secondary-bg, rgba(0, 0, 0, 0.02));
    --bpe-bg-alt: var(--wc-bg, #fff);

    /* Border colors */
    --bpe-border-color: var(--wc-border-color, rgba(0, 0, 0, 0.1));
    --bpe-border-radius: var(--wc-border-radius, 4px);

    /* Status colors */
    --bpe-success-color: var(--wc-green, #46b450);
    --bpe-success-bg: var(--wc-green-bg, rgba(70, 180, 80, 0.1));
    --bpe-error-color: var(--wc-red, #dc3232);
    --bpe-error-bg: var(--wc-red-bg, rgba(220, 50, 50, 0.1));
}

/* Form Wrapper - Subtle styling that works with any theme */
.bpe-enquiry-form-wrapper {
    margin: 1.5em 0;
    padding: 1.5em;
    background: var(--bpe-bg-color);
    border-radius: var(--bpe-border-radius);
    border: 1px solid var(--bpe-border-color);
    font-size: inherit;
    line-height: inherit;
    color: var(--bpe-text-color);
}

/* Form Header */
.bpe-form-header {
    margin-bottom: 1.25em;
}

.bpe-form-title {
    margin: 0 0 0.5em;
    font-size: 1.25em;
    font-weight: 600;
    color: inherit;
    font-family: inherit;
}

.bpe-form-description {
    margin: 0;
    color: var(--bpe-text-muted);
    font-size: 0.95em;
}

/* Variable product notice */
.bpe-variation-notice {
    padding: 1em;
    background: var(--bpe-bg-alt);
    border-radius: var(--bpe-border-radius);
    border: 1px dashed var(--bpe-border-color);
    text-align: center;
    color: var(--bpe-text-muted);
}

.bpe-variation-notice p {
    margin: 0;
}

/* Selected variation display */
.bpe-selected-variation {
    margin-bottom: 1em;
    padding: 0.75em 1em;
    background: var(--bpe-bg-alt);
    border-radius: var(--bpe-border-radius);
    border: 1px solid var(--bpe-border-color);
    font-size: 0.95em;
}

.bpe-selected-variation strong {
    color: var(--bpe-text-muted);
    font-weight: 500;
    margin-right: 0.5em;
}

/* Form Fields - Inherit from WooCommerce form styles where possible */
.bpe-enquiry-form {
    margin: 0;
}

.bpe-form-fields {
    display: grid;
    gap: 1em;
}

.bpe-field-wrapper {
    display: flex;
    flex-direction: column;
}

.bpe-label {
    margin-bottom: 0.4em;
    font-weight: 500;
    font-size: 0.95em;
    color: inherit;
}

.bpe-required-indicator {
    color: var(--bpe-error-color);
    margin-left: 0.15em;
}

/* Input fields - Style to match WooCommerce inputs */
.bpe-field {
    padding: 0.6em 0.8em;
    border: 1px solid var(--bpe-border-color);
    border-radius: var(--bpe-border-radius);
    font-size: 1em;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    background: var(--bpe-bg-alt);
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bpe-field:focus {
    outline: none;
    border-color: var(--bpe-primary-color);
    box-shadow: 0 0 0 1px var(--bpe-primary-color);
}

.bpe-field.bpe-field-error {
    border-color: var(--bpe-error-color);
}

.bpe-field::placeholder {
    color: var(--bpe-text-muted);
    opacity: 0.7;
}

textarea.bpe-field {
    min-height: 80px;
    resize: vertical;
}

/* Honeypot Field (hidden from users and bots) */
.bpe-hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Form Footer */
.bpe-form-footer {
    margin-top: 1.25em;
}

/* Submit Button - Provides solid defaults that work with any theme */
.bpe-submit-button {
    display: inline-block;
    padding: 0.75em 1.5em;
    font-size: 1em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;

    /* Solid fallback colors - ensures button is always visible */
    background-color: #333;
    color: #fff !important; /* Important to override theme's .button color */
    border: none;
    border-radius: var(--bpe-border-radius, 4px);
}

.bpe-submit-button:hover,
.bpe-submit-button:focus {
    background-color: #555;
    color: #fff !important;
    opacity: 0.95;
}

/* If theme provides WooCommerce primary color, use it */
@supports (background-color: var(--wc-primary)) {
    .bpe-submit-button {
        background-color: var(--wc-primary, #333);
    }
    .bpe-submit-button:hover,
    .bpe-submit-button:focus {
        background-color: var(--wc-primary-hover, var(--wc-primary, #555));
    }
}

.bpe-submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading state */
.bpe-submit-button.bpe-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.bpe-submit-button.bpe-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1em;
    height: 1.1em;
    margin: -0.55em 0 0 -0.55em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: bpe-spin 0.8s linear infinite;
    opacity: 0.8;
}

@keyframes bpe-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Messages */
.bpe-form-messages {
    margin-top: 1em;
}

.bpe-message {
    padding: 1em;
    border-radius: var(--bpe-border-radius);
    font-size: 0.95em;
}

.bpe-message-success {
    background: var(--bpe-success-bg);
    color: var(--bpe-success-color);
    border: 1px solid currentColor;
}

.bpe-message-error {
    background: var(--bpe-error-bg);
    color: var(--bpe-error-color);
    border: 1px solid currentColor;
}

/* Responsive */
@media (max-width: 600px) {
    .bpe-enquiry-form-wrapper {
        padding: 1.25em 1em;
    }

    .bpe-submit-button {
        width: 100%;
        text-align: center;
    }
}

/* Success State */
.bpe-enquiry-form-wrapper.bpe-success {
    text-align: center;
}

.bpe-enquiry-form-wrapper.bpe-success .bpe-enquiry-form,
.bpe-enquiry-form-wrapper.bpe-success .bpe-variation-notice {
    display: none;
}

.bpe-success-icon {
    font-size: 3em;
    color: var(--bpe-success-color);
    margin-bottom: 0.5em;
    line-height: 1;
}

.bpe-success-title {
    font-size: 1.25em;
    font-weight: 600;
    margin: 0 0 0.5em;
    color: inherit;
}

.bpe-success-message {
    color: var(--bpe-text-muted);
    margin: 0;
}

/*
 * Theme compatibility helpers
 * Themes can add these classes to customize appearance
 */

/* Dark theme support */
.bpe-enquiry-form-wrapper.bpe-dark,
.dark .bpe-enquiry-form-wrapper,
.dark-mode .bpe-enquiry-form-wrapper {
    --bpe-bg-color: rgba(255, 255, 255, 0.05);
    --bpe-bg-alt: rgba(255, 255, 255, 0.1);
    --bpe-border-color: rgba(255, 255, 255, 0.15);
    --bpe-text-muted: rgba(255, 255, 255, 0.6);
}

/*
 * Form Style Variants
 * Controlled via plugin settings
 */

/* Default style - boxed with background (already defined above) */
.bpe-style-default {
    /* Uses the default styles */
}

/* Minimal style - no background or border */
.bpe-style-minimal {
    background: transparent;
    border: none;
    padding: 1.5em 0;
}

.bpe-style-minimal .bpe-field {
    background: transparent;
}

/* Bordered style - border only, no background */
.bpe-style-bordered {
    background: transparent;
    border: 2px solid var(--bpe-border-color, rgba(0, 0, 0, 0.1));
}

.bpe-style-bordered .bpe-field {
    background: transparent;
}

/*
 * Additional helper classes for theme customization
 */

/* Borderless variant (legacy/manual) */
.bpe-enquiry-form-wrapper.bpe-borderless {
    border: none;
    background: transparent;
    padding: 0;
}

/* Compact variant */
.bpe-enquiry-form-wrapper.bpe-compact {
    padding: 1em;
}

.bpe-enquiry-form-wrapper.bpe-compact .bpe-form-fields {
    gap: 0.75em;
}