/**
 * ChinaExpoHub Follow – Button Styles
 *
 * All visual properties are expressed via CSS custom properties (--ceh-*).
 * Elementor's selectors write directly into those custom properties, so
 * every styling control in the widget panel flows through naturally.
 *
 * Override order:
 *   Plugin defaults (here)  <  Elementor selectors  <  inline style attr
 */

/* ─── Wrapper ─────────────────────────────────────────────────── */
.ceh-follow-wrapper {
    display: inline-flex;
    align-items: center;
}

.ceh-follow-wrapper--full {
    display: flex;
    width: 100%;
}

.ceh-follow-wrapper--full .ceh-follow-btn {
    width: 100%;
    justify-content: center;
}

/* ─── Button base ─────────────────────────────────────────────── */
.ceh-follow-btn {
    /* defaults – all overridable from Elementor */
    --ceh-btn-color:           #111111;
    --ceh-btn-bg:              #ffffff;
    --ceh-btn-border:          #111111;
    --ceh-btn-hover-color:     #111111;
    --ceh-btn-hover-bg:        #f0f0f0;
    --ceh-btn-hover-border:    #111111;
    --ceh-btn-following-color: #ffffff;
    --ceh-btn-following-bg:    #1a6e3c;
    --ceh-btn-following-border:#1a6e3c;
    --ceh-btn-radius:          4px;
    --ceh-btn-padding:         0.5em 1.25em;
    --ceh-btn-min-height:      40px;
    --ceh-btn-font-size:       inherit;
    --ceh-btn-transition:      background-color 0.18s ease,
                               color 0.18s ease,
                               border-color 0.18s ease,
                               transform 0.1s ease;

    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.4em;
    cursor:          pointer;
    font-size:       var(--ceh-btn-font-size);
    min-height:      var(--ceh-btn-min-height);
    padding:         var(--ceh-btn-padding);
    color:           var(--ceh-btn-color);
    background:      var(--ceh-btn-bg);
    border:          1px solid var(--ceh-btn-border);
    border-radius:   var(--ceh-btn-radius);
    transition:      var(--ceh-btn-transition);
    white-space:     nowrap;
    user-select:     none;
    -webkit-appearance: none;
    appearance:      none;
    line-height:     1;
}

/* Prevent button from being focusable without visible focus ring */
.ceh-follow-btn:focus-visible {
    outline: 2px solid var(--ceh-btn-border);
    outline-offset: 2px;
}

/* ─── Hover (un-followed state only) ──────────────────────────── */
.ceh-follow-btn:hover:not(.is-following):not(:disabled) {
    color:            var(--ceh-btn-hover-color);
    background:       var(--ceh-btn-hover-bg);
    border-color:     var(--ceh-btn-hover-border);
}

/* ─── Following state ─────────────────────────────────────────── */
.ceh-follow-btn.is-following {
    color:        var(--ceh-btn-following-color);
    background:   var(--ceh-btn-following-bg);
    border-color: var(--ceh-btn-following-border);
}

.ceh-follow-btn.is-following:hover {
    /* Subtle darkening on hover, avoid accidental red-like states */
    filter: brightness(0.9);
}

/* ─── Text span toggling ──────────────────────────────────────── */
/* Default: show "Follow", hide "Following" */
.ceh-follow-btn__text-follow    { display: inline; }
.ceh-follow-btn__text-following { display: none;   }

/* When is-following: swap */
.ceh-follow-btn.is-following .ceh-follow-btn__text-follow    { display: none;   }
.ceh-follow-btn.is-following .ceh-follow-btn__text-following { display: inline; }

/* ─── Loading state ───────────────────────────────────────────── */
.ceh-follow-btn.is-loading {
    opacity:        0.7;
    pointer-events: none;
}

/* ─── Click micro-animation ───────────────────────────────────── */
.ceh-follow-btn:active:not(:disabled) {
    transform: scale(0.96);
}

/* ─── Editor preview note ─────────────────────────────────────── */
.ceh-follow-preview-note {
    margin:     4px 0 0;
    font-size:  11px;
    color:      #888;
    font-style: italic;
}

/* ─── Disabled state ──────────────────────────────────────────── */
.ceh-follow-btn:disabled {
    opacity:        0.5;
    cursor:         not-allowed;
    pointer-events: none;
}