/**
 * Followers Hub — tab, table, and banner styles.
 *
 * Scoped to .wcv-follower-list, .wcv-follower-offers, .wcv-offer-banner,
 * .wcv-engage-subnav, and .wcv-coupon-table to avoid collisions with
 * other WC Vendors or WooCommerce styles.
 *
 * Design tokens are inherited from :root in wcv-engage.css (always-loaded).
 *
 * @since 1.0.0
 */

/* ---------------------------------------------------------------------------
   Sub-navigation
--------------------------------------------------------------------------- */

.wcv-engage-subnav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var( --wcv-engage-border );
    padding-bottom: 0;
}

.wcv-engage-subnav__action {
    margin-left: auto;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    padding: 0.625em 1em !important;
}

.wcv-engage-subnav__link {
    display: inline-block;
    padding: 0.625em 1em;
    text-decoration: none;
    color: var( --wcv-engage-muted );
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var( --wcv-engage-radius-sm ) var( --wcv-engage-radius-sm ) 0 0;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: -5px;
    transition: color var( --wcv-engage-ease );
}

.wcv-engage-subnav__link:hover {
    color: var( --wcv-engage-text );
}

.wcv-engage-subnav__link--active {
    color: var( --wcv-engage-accent );
    border-bottom-color: var( --wcv-engage-accent );
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Follower List toolbar
--------------------------------------------------------------------------- */

.wcv-follower-list__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.wcv-follower-list__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    flex: 1 1 auto;
}

.wcv-follower-list__search {
    min-width: 180px;
}

/* All filters + buttons on one inline row */
.wcv-follower-search-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Search input — grows to fill available space */
.wcv-filter-search {
    flex: 2 1 180px;
    min-width: 0;
}

/* Has Purchased / From / To — equal, narrower columns */
.wcv-filter-col {
    flex: 1 1 130px;
    min-width: 0;
}

/* Reset WCV's default bottom margin inside the flex children */
.wcv-filter-search .control-group,
.wcv-filter-col .control-group {
    margin-bottom: 0;
}

/* Align buttons flush to the bottom of the label+input pairs */
.wcv-follower-search-bar > .button {
    flex-shrink: 0;
    align-self: flex-end;
}


/* ---------------------------------------------------------------------------
   Follower table
--------------------------------------------------------------------------- */

.wcv-follower-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.wcv-follower-table th,
.wcv-follower-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var( --wcv-engage-border );
    vertical-align: middle;
}

.wcv-follower-table th {
    background: var( --wcv-engage-surface );
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var( --wcv-engage-muted );
}

.wcv-follower-table tbody tr:hover {
    background: var( --wcv-engage-surface );
}

.wcv-follower-table__empty td {
    text-align: center;
    color: var( --wcv-engage-muted );
    padding: 1.5rem;
}

.wcv-follower-table__col-avatar {
    width: 44px;
}

.wcv-follower-avatar {
    border-radius: 50%;
    display: block;
}

/* ---------------------------------------------------------------------------
   Purchase badge
--------------------------------------------------------------------------- */

.wcv-badge {
    font-size: 0.85em;
    font-weight: 600;
}

.wcv-badge--purchased {
    color: var( --wcv-engage-accent );
}

.wcv-badge--not-purchased {
    color: var( --wcv-engage-muted );
}

/* ---------------------------------------------------------------------------
   Pagination
--------------------------------------------------------------------------- */

.wcv-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.wcv-pagination__info {
    color: var( --wcv-engage-muted );
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   Loading overlay
--------------------------------------------------------------------------- */

.wcv-follower-list__table-wrap.wcv-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var( --wcv-engage-ease );
}

/* ---------------------------------------------------------------------------
   Follower Offers section
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Create Offer form
--------------------------------------------------------------------------- */

.wcv-follower-offers .wcv-create-offer-form {
    background: var( --wcv-engage-surface );
    border: 1px solid var( --wcv-engage-border );
    border-radius: var( --wcv-engage-radius );
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.wcv-create-offer-form--hidden {
    display: none;
}

.wcv-create-offer-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.wcv-create-offer-form legend {
    font-size: 1.25rem !important;
    font-weight: 600;
    margin-bottom: 1rem;
}

.wcv-offer-more-options {
    margin-bottom: 1rem;
}

.wcv-offer-more-options > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var( --wcv-engage-muted );
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    user-select: none;
    list-style: none;
}

/* Hide the native disclosure triangle; we draw our own CSS caret below. */
.wcv-offer-more-options > summary::-webkit-details-marker {
    display: none;
}

.wcv-offer-more-options > summary::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate( -45deg );
    transition: transform 0.18s ease;
}

.wcv-offer-more-options[open] > summary::before {
    transform: rotate( 45deg );
}

.wcv-offer-more-options > summary:hover {
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Coupon table
--------------------------------------------------------------------------- */

.wcv-coupon-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.wcv-coupon-table th,
.wcv-coupon-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var( --wcv-engage-border );
    vertical-align: middle;
}

.wcv-coupon-table th {
    background: var( --wcv-engage-surface );
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var( --wcv-engage-muted );
}

.wcv-coupon-table__empty td {
    text-align: center;
    color: var( --wcv-engage-muted );
    padding: 1.5rem;
}

.wcv-coupon-table__col-actions {
    white-space: nowrap;
    width: 1%;
}

.wcv-coupon-table__col-actions .button + .button {
    margin-left: 0.25rem;
}

.wcv-coupon-delete {
    color: var( --wcv-engage-red );
}

.wcv-coupon-delete:hover {
    color: oklch( from var( --wcv-engage-red ) calc( l - 0.08 ) c h );
}

/* ---------------------------------------------------------------------------
   Cart/Checkout offer banner

   All visuals are driven by the `--wcv-banner-*` custom properties declared
   on `.wcv-offer-banner`. Themes override the banner by setting any of those
   properties — no need to retarget inner selectors. Example:

       .wcv-offer-banner {
           --wcv-banner-bg: #f7f4ee;
           --wcv-banner-border: #d6cfc0;
           --wcv-banner-radius: 0;
           --wcv-banner-accent: #c0392b;
       }

   `!important` is used only where WooCommerce's `.button` rules would
   otherwise overpower the apply control. Theme overrides should likewise
   raise specificity (or use `!important`) when targeting `.button`.
--------------------------------------------------------------------------- */

.wcv-offer-banner {
    /* Surface */
    --wcv-banner-bg:           var( --wcv-engage-surface );
    --wcv-banner-fg:           var( --wcv-engage-text );
    --wcv-banner-muted:        var( --wcv-engage-muted );
    --wcv-banner-border:       var( --wcv-engage-border );
    --wcv-banner-divider:      var( --wcv-engage-border );
    --wcv-banner-radius:       var( --wcv-engage-radius );
    --wcv-banner-padding:      0.875rem 1.125rem;
    --wcv-banner-gap:          1rem;
    --wcv-banner-font-size:    0.9375rem;
    --wcv-banner-line-height:  1.4;

    /* State-driven accent — overridden per modifier below */
    --wcv-banner-accent:       var( --wcv-engage-accent );
    --wcv-banner-success:      var( --wcv-engage-success );
    --wcv-banner-warning:      var( --wcv-engage-amber );

    /* Status pip + small-caps label sizing */
    --wcv-banner-pip-size:     6px;
    --wcv-banner-label-size:   0.75rem;
    --wcv-banner-label-track:  0.04em;

    /* Apply control */
    --wcv-banner-apply-fg:     var( --wcv-banner-accent );
    --wcv-banner-apply-size:   0.875rem;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var( --wcv-banner-gap );
    row-gap: 0.5rem;
    padding: var( --wcv-banner-padding );
    margin-bottom: 0.625rem;
    background: var( --wcv-banner-bg );
    border: 1px solid var( --wcv-banner-border );
    border-radius: var( --wcv-banner-radius );
    font-size: var( --wcv-banner-font-size );
    line-height: var( --wcv-banner-line-height );
    color: var( --wcv-banner-fg );
}

.wcv-offer-banner--locked,
.wcv-offer-banner--partial-applied {
    --wcv-banner-accent: var( --wcv-banner-warning );
}

.wcv-offer-banner--all-applied {
    --wcv-banner-accent: var( --wcv-banner-success );
}

/* Header ------------------------------------------------------------------ */

.wcv-offer-banner__header {
    display: contents;
}

.wcv-offer-banner__title {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.wcv-offer-banner__summary {
    font-weight: 500;
    color: var( --wcv-banner-fg );
}

.wcv-offer-banner__summary strong {
    font-weight: 600;
}

.wcv-offer-banner__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var( --wcv-banner-label-size );
    letter-spacing: var( --wcv-banner-label-track );
    text-transform: uppercase;
    color: var( --wcv-banner-muted );
}

.wcv-offer-banner__hint::before {
    content: "";
    display: inline-block;
    width: var( --wcv-banner-pip-size );
    height: var( --wcv-banner-pip-size );
    border-radius: 50%;
    background: var( --wcv-banner-accent );
    flex-shrink: 0;
}

.wcv-offer-banner--all-applied .wcv-offer-banner__hint,
.wcv-offer-banner--partial-applied .wcv-offer-banner__hint,
.wcv-offer-banner--locked .wcv-offer-banner__hint {
    color: var( --wcv-banner-accent );
}

.wcv-offer-banner__hint-sep {
    color: var( --wcv-engage-border-strong );
    margin: 0 0.125rem;
}

/* Toggle ------------------------------------------------------------------ */

.wcv-offer-banner__toggle,
.wcv-offer-banner__toggle:hover,
.wcv-offer-banner__toggle:focus,
.wcv-offer-banner__toggle:focus-visible,
.wcv-offer-banner__toggle:active {
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
    border-radius: 0 !important;
}

.wcv-offer-banner__toggle {
    padding: 0.25rem 0;
    cursor: pointer;
    color: var( --wcv-banner-muted );
    font-size: 0.8125rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    transition: color var( --wcv-engage-ease );
}

.wcv-offer-banner__toggle:hover,
.wcv-offer-banner__toggle:focus-visible {
    color: var( --wcv-banner-fg );
}

.wcv-offer-banner__chevron {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY( -1px ) rotate( 45deg );
    transition: transform 0.18s ease;
}

.wcv-offer-banner__toggle[aria-expanded="true"] .wcv-offer-banner__chevron {
    transform: translateY( 1px ) rotate( -135deg );
}

/* Offer list -------------------------------------------------------------- */

.wcv-offer-banner__list {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0 0;
    border-top: 1px solid var( --wcv-banner-divider );
}

.wcv-offer-item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4375rem 0;
}

.wcv-offer-item + .wcv-offer-item {
    border-top: 1px dashed var( --wcv-banner-divider );
}

.wcv-offer-item__text {
    flex: 1 1 auto;
    line-height: 1.45;
}

.wcv-offer-item--locked .wcv-offer-item__text {
    color: var( --wcv-banner-muted );
}

.wcv-offer-item--applied .wcv-offer-item__text {
    color: var( --wcv-banner-muted );
    text-decoration: line-through;
    text-decoration-color: var( --wcv-engage-border-strong );
    text-decoration-thickness: 1px;
}

/* Small-caps inline label, no bubble */
.wcv-offer-item__badge {
    background: none;
    color: var( --wcv-banner-muted );
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0;
    flex-shrink: 0;
    align-self: center;
}

.wcv-offer-item--best .wcv-offer-item__badge {
    color: var( --wcv-banner-accent );
}

.wcv-offer-item__badge--applied {
    color: var( --wcv-banner-success );
}

.wcv-offer-item__badge--applied::before {
    content: "✓ ";
    font-weight: 700;
}

.wcv-offer-item__locked-msg {
    font-size: 0.8125rem;
    color: var( --wcv-banner-warning );
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Apply — text link with arrow ------------------------------------------- */

.wcv-offer-banner__apply-btn,
.wcv-offer-banner__shop-btn {
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0;
    color: var( --wcv-banner-apply-fg ) !important;
    font-size: var( --wcv-banner-apply-size );
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.wcv-offer-banner__apply-btn::after,
.wcv-offer-banner__shop-btn::after {
    content: "→";
    font-weight: 500;
    transition: transform var( --wcv-engage-ease );
}

.wcv-offer-banner__apply-btn:hover:not( :disabled )::after,
.wcv-offer-banner__apply-btn:focus-visible:not( :disabled )::after,
.wcv-offer-banner__shop-btn:hover:not( :disabled )::after,
.wcv-offer-banner__shop-btn:focus-visible:not( :disabled )::after {
    transform: translateX( 2px );
}

.wcv-offer-banner__apply-btn:focus-visible,
.wcv-offer-banner__shop-btn:focus-visible {
    outline: 2px solid color-mix( in oklch, var( --wcv-banner-accent ) 40%, white );
    outline-offset: 3px;
    border-radius: 2px;
}

.wcv-offer-banner__apply-btn--conflicted,
.wcv-offer-banner__apply-btn:disabled,
.wcv-offer-banner__shop-btn:disabled {
    color: var( --wcv-banner-muted ) !important;
    cursor: not-allowed !important;
    opacity: 0.55;
}

.wcv-offer-banner__apply-btn--conflicted::after,
.wcv-offer-banner__apply-btn:disabled::after,
.wcv-offer-banner__shop-btn:disabled::after {
    transform: none !important;
}

/* Remove — subtle destructive text link ---------------------------------- */

.wcv-offer-banner__remove-btn {
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0;
    color: var( --wcv-banner-muted ) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color var( --wcv-engage-ease ), text-decoration-color var( --wcv-engage-ease );
}

.wcv-offer-banner__remove-btn:hover:not( :disabled ),
.wcv-offer-banner__remove-btn:focus-visible:not( :disabled ) {
    color: var( --wcv-engage-red ) !important;
    text-decoration-color: currentColor;
}

.wcv-offer-banner__remove-btn:focus-visible {
    outline: 2px solid color-mix( in oklch, var( --wcv-engage-red ) 40%, white );
    outline-offset: 3px;
    border-radius: 2px;
}

.wcv-offer-banner__remove-btn:disabled {
    color: var( --wcv-banner-muted ) !important;
    cursor: not-allowed !important;
    opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */

@media ( max-width: 640px ) {
    .wcv-follower-list__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .wcv-follower-table th,
    .wcv-follower-table td {
        padding: 0.5rem;
        font-size: 0.875rem;
    }

    .wcv-offer-banner__header {
        flex-wrap: wrap;
    }

    .wcv-offer-item {
        flex-wrap: wrap;
    }

    .wcv-offer-item__locked-msg {
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
   Follower card — 30-day trend chart + actions
--------------------------------------------------------------------------- */

.wcv-follower-trend {
    width: 100%;
    margin-top: 0.75em;
    text-align: left;
}

.wcv-follower-trend-label {
    display: block;
    margin-bottom: 0.35em;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var( --wcv-engage-muted, #666 );
}

.wcv-follower-trend-chart {
    display: block;
    width: 100%;
    height: 48px;
    overflow: visible; /* Keep the end dot and stroke from clipping at the edges. */
}

.wcv-follower-trend-line {
    stroke: var( --wcv-engage-accent, #191d8a );
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none; /* Let hover fall through to the bars (which carry the tooltips). */
}

/* Cumulative growth area — a soft wash anchored to the baseline so the chart
   reads as a chart even when the line is nearly flat at low follower counts. */
.wcv-follower-trend-area {
    fill: var( --wcv-engage-accent, #191d8a );
    fill-opacity: 0.08;
    stroke: none;
    pointer-events: none; /* Sits on top of the bars; must not swallow their hover. */
}

/* Faint daily-activity bars sitting behind the cumulative line. */
.wcv-follower-trend-bars rect {
    fill: var( --wcv-engage-accent, #191d8a );
    fill-opacity: 0.18;
}

/* Marker on the most recent day. */
.wcv-follower-trend-dot {
    fill: var( --wcv-engage-accent, #191d8a );
    stroke: #fff;
    stroke-width: 1.5px;
    pointer-events: none;
}

/* Keep the action links grouped on the right of the section header. */
.wcv-follower-stat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-left: auto;
}

/* Product-page offers ----------------------------------------------------- */
/* The single-product banner reuses .wcv-offer-banner in a read-only variant
   (no Apply/lock controls). Only spacing/placement differs from the cart. */

.wcv-offer-banners-wrap--product {
    margin: 1rem 0 1.25rem;
}

.wcv-offer-banners-wrap--product .wcv-offer-banner {
    margin-bottom: 0;
}