/* ============================================================
   QuarkCode Quote Manager – General Frontend CSS
   Covers: quote buttons, badges, notices, product-page
   integration, cart button, and shared utility classes.
   Loaded on all frontend pages where the plugin is active.
   ============================================================ */


/* ── 1. CSS Custom Properties ─────────────────────────────── */
:root {
    --qqm-primary        : #0073aa;
    --qqm-primary-dark   : #005a87;
    --qqm-primary-light  : #e8f4fd;
    --qqm-success        : #2e7d32;
    --qqm-success-light  : #d4edda;
    --qqm-warning        : #856404;
    --qqm-warning-light  : #fff3cd;
    --qqm-danger         : #721c24;
    --qqm-danger-light   : #f8d7da;
    --qqm-border         : #e0e0e0;
    --qqm-bg             : #f8f9fa;
    --qqm-text           : #333333;
    --qqm-text-muted     : #888888;
    --qqm-radius         : 6px;
    --qqm-radius-sm      : 4px;
    --qqm-shadow-sm      : 0 1px 4px rgba(0, 0, 0, 0.07);
    --qqm-shadow-md      : 0 3px 12px rgba(0, 0, 0, 0.10);
    --qqm-transition     : 0.18s ease;
    --qqm-font-size-base : 14px;
    --qqm-font-size-sm   : 12px;
    --qqm-font-size-lg   : 16px;
}


/* ── 2. Quote Request / Add-to-Quote Buttons ─────────────── */

/* Wrapper injected next to Add to Cart */
.qqm-product-quote-btn-wrap {
    display: block;
    margin: 10px 0;
}

/* Primary quote button */
.qqm-quote-btn,
a.qqm-quote-btn,
button.qqm-quote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    background-color: var( --qqm-primary );
    color: #ffffff !important;
    font-size: var( --qqm-font-size-base );
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    border: 2px solid var( --qqm-primary );
    border-radius: var( --qqm-radius );
    cursor: pointer;
    transition: background-color var( --qqm-transition ),
                border-color var( --qqm-transition ),
                box-shadow var( --qqm-transition );
    white-space: nowrap;
    vertical-align: middle;
}

.qqm-quote-btn:hover,
a.qqm-quote-btn:hover,
button.qqm-quote-btn:hover {
    background-color: var( --qqm-primary-dark );
    border-color: var( --qqm-primary-dark );
    box-shadow: 0 3px 10px rgba( 0, 115, 170, 0.28 );
    color: #ffffff !important;
}

.qqm-quote-btn:focus,
a.qqm-quote-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba( 0, 115, 170, 0.30 );
}

.qqm-quote-btn:disabled,
button.qqm-quote-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Outline variant (secondary) */
.qqm-quote-btn--outline,
a.qqm-quote-btn--outline {
    background-color: transparent;
    color: var( --qqm-primary ) !important;
    border-color: var( --qqm-primary );
}

.qqm-quote-btn--outline:hover,
a.qqm-quote-btn--outline:hover {
    background-color: var( --qqm-primary-light );
    color: var( --qqm-primary-dark ) !important;
    border-color: var( --qqm-primary-dark );
    box-shadow: none;
}

/* Small variant */
.qqm-quote-btn--sm {
    padding: 7px 14px;
    font-size: var( --qqm-font-size-sm );
}

/* Large variant */
.qqm-quote-btn--lg {
    padding: 14px 30px;
    font-size: var( --qqm-font-size-lg );
}

/* Cart page "Request Quote for Cart" button */
.qqm-cart-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    background-color: #fff;
    color: var( --qqm-primary ) !important;
    border: 2px solid var( --qqm-primary );
    border-radius: var( --qqm-radius );
    padding: 10px 20px;
    font-size: var( --qqm-font-size-base );
    font-weight: 600;
    cursor: pointer;
    transition: background-color var( --qqm-transition ),
                color var( --qqm-transition );
    text-decoration: none !important;
}

.qqm-cart-quote-btn:hover {
    background-color: var( --qqm-primary );
    color: #ffffff !important;
}

/* Shop loop quote button */
.qqm-shop-quote-btn-wrap {
    display: block;
    text-align: center;
    margin-top: 6px;
}


/* ── 3. Status Badges ────────────────────────────────────── */

.qqm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.5;
}

/* Individual status colours */
.qqm-badge.status-draft,
.qqm-status--draft {
    background-color: #e9ecef;
    color: #495057;
}

.qqm-badge.status-pending,
.qqm-status--pending {
    background-color: var( --qqm-warning-light );
    color: var( --qqm-warning );
}

.qqm-badge.status-review,
.qqm-status--review {
    background-color: #cce5ff;
    color: #004085;
}

.qqm-badge.status-approved,
.qqm-status--approved {
    background-color: var( --qqm-success-light );
    color: var( --qqm-success );
}

.qqm-badge.status-rejected,
.qqm-status--rejected {
    background-color: var( --qqm-danger-light );
    color: var( --qqm-danger );
}

.qqm-badge.status-expired,
.qqm-status--expired {
    background-color: #e2e3e5;
    color: #383d41;
}

.qqm-badge.status-accepted,
.qqm-status--accepted {
    background-color: #c3e6cb;
    color: #155724;
}

.qqm-badge.status-cancelled,
.qqm-status--cancelled {
    background-color: #f5c6cb;
    color: #491217;
}

.qqm-badge.status-converted,
.qqm-status--converted {
    background-color: #bee5eb;
    color: #0c5460;
}

.qqm-badge.status-modification,
.qqm-status--modification {
    background-color: #ffeeba;
    color: #7a5c00;
}

/* Larger badge variant */
.qqm-badge--lg {
    font-size: 13px;
    padding: 5px 14px;
}


/* ── 4. Notice / Alert Messages ──────────────────────────── */

.qqm-notice {
    display: block;
    padding: 12px 16px;
    border-radius: var( --qqm-radius );
    font-size: var( --qqm-font-size-base );
    font-weight: 500;
    line-height: 1.5;
    margin: 14px 0;
    border: 1px solid transparent;
}

.qqm-notice--success {
    background-color: var( --qqm-success-light );
    color: #155724;
    border-color: #c3e6cb;
}

.qqm-notice--error {
    background-color: var( --qqm-danger-light );
    color: var( --qqm-danger );
    border-color: #f5c6cb;
}

.qqm-notice--warning {
    background-color: var( --qqm-warning-light );
    color: var( --qqm-warning );
    border-color: #ffeeba;
}

.qqm-notice--info {
    background-color: #cce5ff;
    color: #004085;
    border-color: #b8daff;
}

/* Dismissible close button */
.qqm-notice .qqm-notice-dismiss {
    float: right;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
    padding: 0 0 0 10px;
}
.qqm-notice .qqm-notice-dismiss:hover {
    opacity: 1;
}


/* ── 5. Loading / Spinner ────────────────────────────────── */

.qqm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba( 255, 255, 255, 0.4 );
    border-top-color: #fff;
    border-radius: 50%;
    animation: qqm-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 5px;
}

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

/* Dark spinner (on light backgrounds) */
.qqm-spinner--dark {
    border-color: rgba( 0, 115, 170, 0.2 );
    border-top-color: var( --qqm-primary );
}


/* ── 6. Utility / Helper Classes ─────────────────────────── */

.qqm-text-muted   { color: var( --qqm-text-muted ) !important; }
.qqm-text-success { color: var( --qqm-success )    !important; }
.qqm-text-danger  { color: #dc3545                 !important; }
.qqm-text-primary { color: var( --qqm-primary )    !important; }
.qqm-text-center  { text-align: center             !important; }
.qqm-text-right   { text-align: right              !important; }
.qqm-text-sm      { font-size: var( --qqm-font-size-sm ) !important; }
.qqm-text-bold    { font-weight: 700               !important; }
.qqm-mt-0         { margin-top: 0                  !important; }
.qqm-mt-8         { margin-top: 8px                !important; }
.qqm-mt-16        { margin-top: 16px               !important; }
.qqm-mb-0         { margin-bottom: 0               !important; }
.qqm-mb-8         { margin-bottom: 8px             !important; }
.qqm-mb-16        { margin-bottom: 16px            !important; }
.qqm-hidden       { display: none                  !important; }
.qqm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}


/* ── 7. Tooltip ──────────────────────────────────────────── */

[data-qqm-tooltip] {
    position: relative;
    cursor: help;
}

[data-qqm-tooltip]::after {
    content: attr( data-qqm-tooltip );
    position: absolute;
    bottom: calc( 100% + 6px );
    left: 50%;
    transform: translateX( -50% );
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var( --qqm-transition );
    z-index: 99999;
    max-width: 240px;
    white-space: normal;
    text-align: center;
}

[data-qqm-tooltip]:hover::after {
    opacity: 1;
}


/* ── 8. Quote Validity Countdown Banner ──────────────────── */

.qqm-expiry-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var( --qqm-radius );
    font-size: var( --qqm-font-size-sm );
    font-weight: 600;
    margin-bottom: 16px;
}

.qqm-expiry-banner--urgent {
    background: var( --qqm-danger-light );
    color: var( --qqm-danger );
    border: 1px solid #f5c6cb;
}

.qqm-expiry-banner--warning {
    background: var( --qqm-warning-light );
    color: var( --qqm-warning );
    border: 1px solid #ffeeba;
}

.qqm-expiry-banner--ok {
    background: var( --qqm-success-light );
    color: var( --qqm-success );
    border: 1px solid #c3e6cb;
}

.qqm-expiry-icon { font-size: 16px; flex-shrink: 0; }


/* ── 9. Responsive Adjustments ───────────────────────────── */

@media ( max-width: 480px ) {

    .qqm-quote-btn,
    a.qqm-quote-btn,
    button.qqm-quote-btn {
        width: 100%;
        justify-content: center;
    }

    .qqm-cart-quote-btn {
        width: 100%;
        justify-content: center;
    }

    .qqm-badge {
        font-size: 10px;
        padding: 2px 8px;
    }
}


/* ── 10. WooCommerce Theme Overrides ─────────────────────── */

/* Ensure our button isn't overridden by storefront/other themes */
.woocommerce .qqm-quote-btn,
.woocommerce-page .qqm-quote-btn {
    border-radius: var( --qqm-radius ) !important;
    letter-spacing: 0;
}

/* Prevent WooCommerce from hiding our button wrapper */
.woocommerce .qqm-product-quote-btn-wrap,
.woocommerce-page .qqm-product-quote-btn-wrap {
    display: block !important;
}

/* "Out of stock" — still show quote button */
.woocommerce .stock.out-of-stock ~ .qqm-product-quote-btn-wrap {
    display: block !important;
}


/* ── 11. Dark Mode (prefers-color-scheme) ────────────────── */

@media ( prefers-color-scheme: dark ) {

    .qqm-quote-request-container,
    .qqm-my-quotes-container,
    .qqm-quote-detail-container {
        color: #e0e0e0;
    }

    .qqm-notice--info {
        background-color: #1a3a5c;
        color: #b8daff;
        border-color: #2a5a8c;
    }

    [data-qqm-tooltip]::after {
        background: #555;
    }
}