/**
 * WC Vendors Engage — frontend styles.
 *
 * All rules use BEM-style class names under .wcv-engage-* so they are
 * namespaced and easy for themes to override.
 *
 * Shared design tokens are defined here on :root so that engage-tab.css
 * and following-stores.css can reference them without redeclaring values.
 */

:root {
    /* ── Colour ────────────────────────────────────────────────────────────── */
    --wcv-engage-accent:        oklch( 27% 0.16 274 ); /* #191d8a — WC Vendors brand indigo */
    --wcv-engage-accent-bg:     oklch( 96% 0.03 274 );
    --wcv-engage-accent-hover:  oklch( 33% 0.18 274 ); /* #2228be — gradient end / hover */
    --wcv-engage-text:          oklch( 22% 0.012 255 );
    --wcv-engage-muted:         oklch( 55% 0.008 255 );
    --wcv-engage-surface:       #fbfbfb;
    --wcv-engage-border:        oklch( 91% 0.007 80 );
    --wcv-engage-border-strong: oklch( 78% 0.007 255 );
    --wcv-engage-red:           oklch( 42% 0.18 18 );
    --wcv-engage-amber:         oklch( 60% 0.15 60 );
    --wcv-engage-amber-bg:      oklch( 96% 0.04 60 );
    --wcv-engage-success:       oklch( 50% 0.14 145 );
    --wcv-engage-success-bg:    oklch( 96% 0.04 145 );
    --wcv-engage-shadow:        oklch( 22% 0.012 255 / 0.08 );

    /* ── Shape & motion ────────────────────────────────────────────────────── */
    --wcv-engage-radius:        8px;
    --wcv-engage-radius-sm:     5px;
    --wcv-engage-ease:          0.15s ease;
}

/* =========================================================
   Container
   ========================================================= */

.wcv-engage-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    margin: 0.4em 0;
    width: fit-content;
}

.wcv-store-header.header-modern .about > .wcv-engage-wrap {
    flex-direction: row-reverse;
    align-items: center;
    margin: 0.25em 0;
    gap: 0.6em;
    font-size: 1rem;
}

/* Pro store header (classic + modern) — solid chip so the button stays legible
   over the cover banner. Covers both the logged-out "Follow" link and the
   logged-in toggle. Classic sits on a light scrim, modern over the cover image;
   a white chip with accent text reads on both. */
.wcv-store-header .wcv-engage-wrap .wcv-engage-btn,
.wcv-store-header .wcv-engage-wrap .wcv-engage-btn--logged-out {
    background: rgba( 255, 255, 255, 0.92 );
    border-color: transparent;
    color: var( --wcv-engage-accent );
}

.wcv-store-header .wcv-engage-wrap .wcv-engage-btn:hover,
.wcv-store-header .wcv-engage-wrap .wcv-engage-btn:focus-visible {
    background: #fff;
    border-color: transparent;
    color: var( --wcv-engage-accent-hover );
}

/* Following state stays accent-filled (already a follower). */
.wcv-store-header .wcv-engage-wrap .wcv-engage-btn--following {
    background: var( --wcv-engage-accent );
    border-color: transparent;
    color: #fff;
}

.wcv-store-header .wcv-engage-wrap .wcv-engage-btn--following:hover,
.wcv-store-header .wcv-engage-wrap .wcv-engage-btn--following:focus-visible {
    background: var( --wcv-engage-accent-hover );
    color: #fff;
}

/* Modern header only — the count sits directly over the dark cover image, so it
   needs light text. Classic header sits on a light scrim and keeps the default
   dark text (color: inherit). */
.wcv-store-header.header-modern .about > .wcv-engage-wrap .wcv-follower-count {
    color: rgba( 255, 255, 255, 0.95 );
    text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
}

/* Pro vendor list — Follow button absolutely positioned at bottom-left of the banner,
   mirroring the .wcv-view-store pill that sits at bottom-right.
   Push inner content up so it doesn't run behind the bottom button row. */
.wcv-pro-vendorlist .wcv-inner-details {
    padding-bottom: 52px !important;
}
.wcv-pro-vendorlist .wcv-banner-wrapper > .wcv-engage-wrap {
    position: absolute;
    bottom: 15px;
    left: 15px;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    width: auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.wcv-pro-vendorlist:hover .wcv-banner-wrapper > .wcv-engage-wrap {
    opacity: 1;
    transform: translateY(0);
}

.wcv-pro-vendorlist .wcv-banner-wrapper > .wcv-engage-wrap .wcv-engage-btn,
.wcv-pro-vendorlist .wcv-banner-wrapper > .wcv-engage-wrap .wcv-engage-btn--logged-out {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    border-color: transparent;
    color: #333;
}

.wcv-pro-vendorlist .wcv-banner-wrapper > .wcv-engage-wrap .wcv-engage-btn:hover,
.wcv-pro-vendorlist .wcv-banner-wrapper > .wcv-engage-wrap .wcv-engage-btn:focus-visible {
    background: #fff;
    border-color: transparent;
    color: #222;
}

.wcv-pro-vendorlist .wcv-banner-wrapper > .wcv-engage-wrap .wcv-engage-btn--following {
    background: var( --wcv-engage-accent );
    border-color: transparent;
    color: #fff;
}

.wcv-pro-vendorlist .wcv-banner-wrapper > .wcv-engage-wrap .wcv-engage-btn--following:hover {
    background: var( --wcv-engage-accent-hover );
    color: #fff;
}

.wcv-pro-vendorlist .wcv-banner-wrapper > .wcv-engage-wrap .wcv-follower-count {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Free vendor list shortcode — social row directly below the shop name */
.vendor_list_info > .wcv-engage-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0.3em 0 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.5em;
}

/* =========================================================
   Follow button — shared base
   ========================================================= */

.wcv-engage-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 1em;
    border: 2px solid currentColor;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.wcv-engage-btn:hover,
.wcv-engage-btn:focus-visible {
    background-color: var( --wcv-engage-accent );
    border-color: var( --wcv-engage-accent );
    color: #fff;
    outline: none;
}

/* =========================================================
   Following state (already a follower)
   ========================================================= */

.wcv-engage-btn--following {
    background-color: var( --wcv-engage-accent );
    border-color: var( --wcv-engage-accent );
    color: #fff;
}

.wcv-engage-btn--following:hover,
.wcv-engage-btn--following:focus-visible {
    background-color: var( --wcv-engage-accent-hover );
    border-color: var( --wcv-engage-accent-hover );
}

/* =========================================================
   Loading state (request in flight)
   ========================================================= */

.wcv-engage-btn--loading {
    opacity: 0.65;
    pointer-events: none;
    cursor: default;
}

/* =========================================================
   Logged-out link variant
   ========================================================= */

/* Logged-out variant intentionally has no rules of its own: it shares the full
   button affordance from .wcv-engage-btn (no dimming) so it reads as a clear CTA. */

/* =========================================================
   Follower count badge
   ========================================================= */

.wcv-follower-count {
    font-size: 0.875em;
    color: inherit;
    white-space: nowrap;
}

/* =========================================================
   Vendor dashboard — followers stat card
   ========================================================= */

.wcv-follower-stat {
    padding: 1.25em;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
}

.wcv-follower-stat-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4em;
}

.wcv-follower-stat-icon {
    color: #666;
}

.wcv-follower-stat-icon .wcv-icon {
    width: 2em;
    height: 2em;
}

.wcv-follower-stat-label {
    margin: 0 0 0.75em;
    font-size: 0.875em;
    color: #666;
}

/* =========================================================
   Follower period stats grid (Today / Week / Month / Total)
   ========================================================= */

.wcv-follower-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    max-width: 100%;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
}

/* Reflow to two columns on tablet/mobile so the grid stays within its
   container instead of overflowing at narrow widths. */
@media (max-width: 768px) {
    .wcv-follower-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wcv-follower-stat-period {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    min-width: 0;
    padding: 0.9em 0.5em 0.75em;
    border-right: 1px solid #e8e8e8;
    background: #fff;
    transition: background-color 0.12s ease;
}

.wcv-follower-stat-period:last-child {
    border-right: 0;
}

@media (max-width: 768px) {
    .wcv-follower-stat-period:nth-child(2),
    .wcv-follower-stat-period:nth-child(4) {
        border-right: 0;
    }

    .wcv-follower-stat-period:nth-child(1),
    .wcv-follower-stat-period:nth-child(2) {
        border-bottom: 1px solid #e8e8e8;
    }
}

.wcv-follower-stat-period:hover {
    background: #f9f9f9;
}

.wcv-follower-stat-period--total {
    background: #f5f5f5;
}

.wcv-follower-stat-period--total:hover {
    background: #efefef;
}

.wcv-follower-stat-period-value {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1;
    color: #222;
    letter-spacing: -0.02em;
}

.wcv-follower-stat-period--total .wcv-follower-stat-period-value {
    font-size: 1.75em;
    color: #111;
}

.wcv-follower-stat-period-label {
    font-size: 0.7em;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

/* =========================================================
   Milestone celebration message
   ========================================================= */

.wcv-follower-milestone {
    margin: 0.6em 0 0;
    font-size: 0.85em;
    color: #555;
    line-height: 1.4;
    text-align: center;
}

/* =========================================================
   Follower-only badge — coupon table column
   ========================================================= */

.wcv-engage-badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: var( --wcv-engage-radius-sm, 5px );
    background: var( --wcv-engage-accent-bg, #eef3ff );
    color: var( --wcv-engage-accent, #0f62fe );
    border: 1px solid currentColor;
}

.wcv-engage-badge--regular {
    background: var( --wcv-engage-surface, #fbfbfb );
    color: var( --wcv-engage-muted, #777 );
}

/* =========================================================
   Inline error notice (follow/unfollow failure)
   ========================================================= */

.wcv-engage-error {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX( -50% );
    z-index: 999999;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35em 0.8em 0.5em;    /* extra bottom padding for the progress bar */
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: var( --wcv-engage-radius-sm );
    background: #fff;
    color: var( --wcv-engage-red );
    box-shadow:
        0 0 0 1px oklch( 82% 0.08 18 ),
        0 4px 14px oklch( 42% 0.18 18 / 0.1 );
    overflow: hidden;
    pointer-events: none;
    animation: wcv-engage-error-enter 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;
}

/* Warning icon */
.wcv-engage-error::before {
    content: '⚠';
    font-size: 0.9em;
    line-height: 1;
    opacity: 0.85;
}

/* Depleting progress bar — drains left-to-right over 4 s */
.wcv-engage-error::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var( --wcv-engage-red );
    opacity: 0.45;
    transform-origin: left center;
    animation: wcv-engage-error-drain 4s linear forwards;
}

@keyframes wcv-engage-error-enter {
    from {
        opacity: 0;
        transform: translateX( -50% ) translateY( -12px ) scale( 0.93 );
    }
    to {
        opacity: 1;
        transform: translateX( -50% ) translateY( 0 ) scale( 1 );
    }
}

@keyframes wcv-engage-error-drain {
    from { transform: scaleX( 1 ); }
    to   { transform: scaleX( 0 ); }
}

/* =========================================================
   My Account menu — "Following" icon
   Heart drawn as an SVG mask so it inherits the theme link
   colour (incl. hover/active) with no icon-font dependency.
   ========================================================= */

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--following-stores a::before {
    content: "\f004";
}