/* FK Coupon Search — front-end styles
   BEM: .fkcs-* namespace
   Uses CSS custom properties so themes can override colours.
--------------------------------------------------------- */

:root {
    --fkcs-bg:            #ffffff;
    --fkcs-border:        #e2e6ea;
    --fkcs-border-focus:  #2563eb;
    --fkcs-text:          #1a1f2e;
    --fkcs-text-muted:    #6b7280;
    --fkcs-accent:        #2563eb;
    --fkcs-accent-hover:  #1d4ed8;
    --fkcs-accent-text:   #ffffff;
    --fkcs-success:       #16a34a;
    --fkcs-error:         #dc2626;
    --fkcs-radius:        8px;
    --fkcs-radius-sm:     5px;
    --fkcs-shadow:        0 2px 12px rgba(0,0,0,.08);
    --fkcs-font:          inherit;
    --fkcs-transition:    .18s ease;
}

/* ── Panel wrapper ──────────────────────────────────────── */
.fkcs-panel {
    font-family: var(--fkcs-font);
    background:  var(--fkcs-bg);
    border:      1px solid var(--fkcs-border);
    border-radius: var(--fkcs-radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--fkcs-shadow);
}

/* ── Toggle header ──────────────────────────────────────── */
.fkcs-panel__header {
    border-bottom: 1px solid transparent;
    transition: border-color var(--fkcs-transition);
}
.fkcs-panel--open .fkcs-panel__header {
    border-bottom-color: var(--fkcs-border);
}

.fkcs-panel__toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .9rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fkcs-text);
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    transition: background var(--fkcs-transition);
}
.fkcs-panel__toggle:hover {
    background: rgba(0,0,0,.025);
}
.fkcs-panel__toggle-icon {
    color: var(--fkcs-accent);
    display: flex;
    flex-shrink: 0;
}
.fkcs-panel__toggle-label {
    flex: 1;
}
.fkcs-panel__toggle-chevron {
    display: flex;
    color: var(--fkcs-text-muted);
    transition: transform var(--fkcs-transition);
}
.fkcs-panel--open .fkcs-panel__toggle-chevron {
    transform: rotate(180deg);
}

/* ── Panel body ─────────────────────────────────────────── */
.fkcs-panel__body {
    padding: 1.1rem;
}

/* ── Section label ──────────────────────────────────────── */
.fkcs-section__label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fkcs-text-muted);
    margin: 0 0 .55rem;
}

/* ── Search ─────────────────────────────────────────────── */
.fkcs-search {
    position: relative;
}
.fkcs-search__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.fkcs-search__icon {
    position: absolute;
    left: .75rem;
    color: var(--fkcs-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}
.fkcs-search__input {
    width: 100%;
    padding: .65rem .75rem .65rem 2.4rem;
    border: 1.5px solid var(--fkcs-border);
    border-radius: var(--fkcs-radius-sm);
    font-size: .9rem;
    color: var(--fkcs-text);
    background: var(--fkcs-bg);
    outline: none;
    transition: border-color var(--fkcs-transition), box-shadow var(--fkcs-transition);
    box-sizing: border-box;
}
.fkcs-search__input:focus {
    border-color: var(--fkcs-border-focus);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.fkcs-search__spinner {
    position: absolute;
    right: .75rem;
    width: 16px;
    height: 16px;
    border: 2px solid var(--fkcs-border);
    border-top-color: var(--fkcs-accent);
    border-radius: 50%;
    animation: fkcs-spin .7s linear infinite;
}

/* ── Results dropdown ───────────────────────────────────── */
.fkcs-search__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--fkcs-bg);
    border: 1.5px solid var(--fkcs-border);
    border-radius: var(--fkcs-radius-sm);
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
}
.fkcs-search__result-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--fkcs-border);
    transition: background var(--fkcs-transition);
    color: var(--fkcs-text);
}
.fkcs-search__result-item:last-child {
    border-bottom: none;
}
.fkcs-search__result-item:hover,
.fkcs-search__result-item:focus {
    background: rgba(37,99,235,.06);
    outline: none;
}
.fkcs-search__result-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.fkcs-search__result-code {
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fkcs-text);
}
.fkcs-search__result-desc {
    font-size: .78rem;
    color: var(--fkcs-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.fkcs-search__result-badge {
    flex-shrink: 0;
    background: #eff6ff;
    color: var(--fkcs-accent);
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 20px;
    white-space: nowrap;
}
.fkcs-search__empty {
    padding: .8rem 1rem;
    color: var(--fkcs-text-muted);
    font-size: .85rem;
    margin: 0;
}

/* ── Divider ────────────────────────────────────────────── */
.fkcs-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    color: var(--fkcs-text-muted);
    font-size: .8rem;
}
.fkcs-divider::before,
.fkcs-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--fkcs-border);
}

/* ── Creator ────────────────────────────────────────────── */
.fkcs-creator__row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.fkcs-creator__input {
    flex: 1;
    padding: .65rem .75rem;
    border: 1.5px solid var(--fkcs-border);
    border-radius: var(--fkcs-radius-sm);
    font-size: .9rem;
    color: var(--fkcs-text);
    background: var(--fkcs-bg);
    outline: none;
    transition: border-color var(--fkcs-transition), box-shadow var(--fkcs-transition);
    text-transform: uppercase;
    letter-spacing: .06em;
    box-sizing: border-box;
}
.fkcs-creator__input:focus {
    border-color: var(--fkcs-border-focus);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.fkcs-creator__input::placeholder {
    text-transform: none;
    letter-spacing: normal;
    color: var(--fkcs-text-muted);
}

.fkcs-creator__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .65rem 1.2rem;
    background: var(--fkcs-accent);
    color: var(--fkcs-accent-text);
    border: none;
    border-radius: var(--fkcs-radius-sm);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fkcs-transition), opacity var(--fkcs-transition);
    white-space: nowrap;
    min-width: 80px;
}
.fkcs-creator__btn:hover:not(:disabled) {
    background: var(--fkcs-accent-hover);
}
.fkcs-creator__btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}
.fkcs-creator__btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fkcs-spin .7s linear infinite;
}

.fkcs-creator__status {
    margin: .5rem 0 0;
    font-size: .82rem;
    min-height: 1.1em;
    color: var(--fkcs-text-muted);
}
.fkcs-creator__status--success { color: var(--fkcs-success); font-weight: 600; }
.fkcs-creator__status--error   { color: var(--fkcs-error); }

/* ── Login notice ───────────────────────────────────────── */
.fkcs-login-notice {
    margin: .5rem 0 0;
}
.fkcs-login-notice a {
    color: var(--fkcs-accent);
    text-decoration: underline;
}

/* ── Spinner keyframes ──────────────────────────────────── */
@keyframes fkcs-spin {
    to { transform: rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .fkcs-creator__row {
        flex-direction: column;
    }
    .fkcs-creator__btn {
        width: 100%;
    }
}

/* ── Attribution chips ──────────────────────────────────────────────────────── */

.fkcs-attr-chip {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 600;
    padding: .18rem .55rem;
    border-radius: 20px;
    letter-spacing: .03em;
    white-space: nowrap;
    margin-left: .35rem;
    vertical-align: middle;
}
.fkcs-attr-chip--lar {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.fkcs-attr-chip--fluent_affiliate {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* ── Search result code row ─────────────────────────────────────────────────── */
.fkcs-search__result-code-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
}
.fkcs-search__result-expire {
    font-size: .72rem;
    color: #9ca3af;
    display: block;
    margin-top: .1rem;
}

/* ── Creator attribution area ───────────────────────────────────────────────── */
.fkcs-creator__attribution {
    margin-top: .5rem;
}

/* ── Active attribution notice (pre-session) ────────────────────────────────── */
.fkcs-active-attribution {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    font-size: .82rem;
    font-weight: 500;
    border-bottom: 1px solid var(--fkcs-border);
}
.fkcs-active-attribution::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fkcs-active-attribution--lar {
    background: #eff6ff;
    color: #1e40af;
}
.fkcs-active-attribution--lar::before {
    background: #3b82f6;
}
.fkcs-active-attribution--fluent_affiliate {
    background: #f0fdf4;
    color: #166534;
}
.fkcs-active-attribution--fluent_affiliate::before {
    background: #22c55e;
}

/* ── Auto-login shareable link ──────────────────────────────────────────────── */
.fkcs-autologin__row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.fkcs-autologin__input {
    flex: 1;
    padding: .65rem .75rem;
    border: 1.5px solid var(--fkcs-border);
    border-radius: var(--fkcs-radius-sm);
    font-size: .82rem;
    color: var(--fkcs-text-muted);
    background: #f9fafb;
    outline: none;
    cursor: default;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fkcs-autologin__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .65rem 1rem;
    background: var(--fkcs-accent);
    color: var(--fkcs-accent-text);
    border: none;
    border-radius: var(--fkcs-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fkcs-transition), opacity var(--fkcs-transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.fkcs-autologin__btn:hover:not(:disabled) {
    background: var(--fkcs-accent-hover);
}
.fkcs-autologin__btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.fkcs-autologin__btn--copied {
    background: var(--fkcs-success);
}
.fkcs-autologin__btn--copied:hover {
    background: var(--fkcs-success);
}
.fkcs-autologin__btn-icon {
    flex-shrink: 0;
}
.fkcs-autologin__hint {
    margin: .45rem 0 0;
    font-size: .76rem;
    color: var(--fkcs-text-muted);
}

@media (max-width: 480px) {
    .fkcs-autologin__row {
        flex-direction: column;
    }
    .fkcs-autologin__btn {
        width: 100%;
    }
}

/* ── User search + magic login ──────────────────────────────────────────────── */
.fkcs-user-search {
    position: relative;
}
.fkcs-user-search__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.fkcs-user-search__input-wrap .fkcs-search__icon {
    position: absolute;
    left: .75rem;
    color: var(--fkcs-text-muted);
    pointer-events: none;
}
.fkcs-user-search__input {
    width: 100%;
    padding: .65rem 3.5rem .65rem 2.4rem;
    border: 1.5px solid var(--fkcs-border);
    border-radius: var(--fkcs-radius-sm);
    font-size: .9rem;
    color: var(--fkcs-text);
    background: var(--fkcs-bg);
    outline: none;
    transition: border-color var(--fkcs-transition), box-shadow var(--fkcs-transition);
    box-sizing: border-box;
}
.fkcs-user-search__input:focus {
    border-color: var(--fkcs-border-focus);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.fkcs-user-search__spinner {
    position: absolute;
    right: .6rem;
}

.fkcs-user-search__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--fkcs-bg);
    border: 1.5px solid var(--fkcs-border);
    border-radius: var(--fkcs-radius-sm);
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
    z-index: 9999;
    max-height: 260px;
    overflow-y: auto;
}
.fkcs-user-search__result-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .65rem 1rem;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--fkcs-border);
    transition: background var(--fkcs-transition);
    color: var(--fkcs-text);
}
.fkcs-user-search__result-item:last-child {
    border-bottom: none;
}
.fkcs-user-search__result-item:hover,
.fkcs-user-search__result-item:focus {
    background: rgba(37,99,235,.06);
    outline: none;
}
.fkcs-user-search__result-name {
    font-weight: 600;
    font-size: .88rem;
}
.fkcs-user-search__result-email {
    font-size: .78rem;
    color: var(--fkcs-text-muted);
}
.fkcs-user-search__result-login {
    font-size: .74rem;
    color: var(--fkcs-text-muted);
    opacity: .7;
}
.fkcs-highlight {
    background: transparent;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(37,99,235,.4);
    text-underline-offset: 2px;
}
.fkcs-user-search__input-clear {
    position: absolute;
    right: 1.9rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fkcs-text-muted);
    font-size: .85rem;
    line-height: 1;
    padding: .2rem .3rem;
    border-radius: 50%;
    transition: color var(--fkcs-transition), background var(--fkcs-transition);
}
.fkcs-user-search__input-clear:hover {
    color: var(--fkcs-error);
    background: rgba(239,68,68,.08);
}

.fkcs-user-search__link-wrap {
    margin-top: .65rem;
}
.fkcs-user-search__selected-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .45rem;
}
.fkcs-user-search__selected-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--fkcs-text);
}
.fkcs-user-search__clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fkcs-text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0 .25rem;
    transition: color var(--fkcs-transition);
}
.fkcs-user-search__clear:hover {
    color: var(--fkcs-error);
}
.fkcs-user-search__copy-btn--full {
    width: 100%;
    justify-content: center;
    margin-top: .1rem;
}

/* ── FunnelKit Checkout compatibility ───────────────────────────────────────
   FK wraps its checkout sections in .wfacp-sec-wrap which constrains widths
   and may apply conflicting input/button resets. These overrides ensure the
   panel renders correctly inside FK's layout.
---------------------------------------------------------------------------- */

/* Prevent FK's section wrapper from squashing the results dropdown */
.wfacp-sec-wrap .fkcs-search,
.wfacp_coupon_field .fkcs-search {
    position: relative;
}

/* FK applies box-sizing: content-box to some inputs; enforce our model */
.wfacp-sec-wrap .fkcs-search__input,
.wfacp-sec-wrap .fkcs-creator__input {
    box-sizing: border-box;
    width: 100%;
}

/* FK sometimes forces button styles — restore our creator button */
.wfacp-sec-wrap .fkcs-creator__btn,
.wfacp_coupon_field .fkcs-creator__btn {
    background: var(--fkcs-accent);
    color: var(--fkcs-accent-text);
    border: none;
    padding: .65rem 1.2rem;
    border-radius: var(--fkcs-radius-sm);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fkcs-transition), opacity var(--fkcs-transition);
}
.wfacp-sec-wrap .fkcs-creator__btn:hover:not(:disabled),
.wfacp_coupon_field .fkcs-creator__btn:hover:not(:disabled) {
    background: var(--fkcs-accent-hover);
}

/* Keep dropdown above FK's order review and sticky elements */
.wfacp-sec-wrap .fkcs-search__results {
    z-index: 99999;
}