/* ============================================
   WEAM CTD Button System — Outline
   ============================================
   One CSS file. All buttons. All tabs.

   v2.1.11.3: Outline mode replaces solid fill.

   Anatomy (outline):
   ┌──────────────────────────────────┐
   │  ●── dot (inside pill, muted)   │
   │  ┌─┐── pill (border, no fill)   │
   │  On hover: pill fills, dot 100% │
   └──────────────────────────────────┘

   Socket element hidden (kept in HTML for
   backward compat, not rendered).

   Sizes: .sm (inline), default=md, .lg (hero CTA — stays filled)
   Colors: default (amber dot), .secondary (slate dot),
           .danger / .weam-ctd-danger (red dot), .upgrade (filled purple)
   States: :disabled, .is-loading, .has-changes

   HTML (unchanged — no PHP edits required):
   <div class="weam-ctd-wrap [sm|lg] [secondary|danger|upgrade]">
       <span class="weam-ctd-socket"></span>
       <span class="weam-ctd-dot"></span>
       <button class="weam-ctd">Label</button>
   </div>
   ============================================ */

/* --- Wrapper --- */
.weam-ctd-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* --- Socket: hidden in outline mode --- */
.weam-ctd-wrap .weam-ctd-socket {
    display: none;
}

/* --- Dot: inside pill, muted at rest --- */
.weam-ctd-wrap .weam-ctd-dot {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px !important;
    height: 10px !important;
    background: var(--weam-amber-500, #F59E0B);
    border-radius: 50% !important;
    z-index: 2;
    transition: opacity 0.2s ease;
    display: block;
    flex: none;
    pointer-events: none;
    opacity: 0.4;
}

/* Hover: dot full brightness, no size change */
.weam-ctd-wrap:hover .weam-ctd-dot {
    opacity: 1;
    width: 10px !important;
    height: 10px !important;
    left: 10px;
}

/* --- Button: outline pill --- */
.weam-ctd-wrap .weam-ctd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 10px 28px;
    font-family: inherit;
    font-size: var(--weam-text-md);
    font-weight: 500;
    color: var(--weam-slate-400);
    background: transparent;
    border: 1.5px solid #a7aaad;
    border-radius: 50px;
    cursor: pointer;
    margin-left: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
    line-height: 1.2;
    white-space: nowrap !important;
    text-decoration: none;
    flex-shrink: 0;
}
.weam-ctd-wrap:hover .weam-ctd {
    background: var(--weam-slate-800, #1E293B);
    border-color: var(--weam-slate-800, #1E293B);
    color: white;
    font-weight: 600;
}

/* ============================================
   SIZE: SM (inline / compact)
   ============================================ */
.weam-ctd-wrap.sm .weam-ctd-dot {
    width: 8px !important;
    height: 8px !important;
    left: 9px;
}
.weam-ctd-wrap.sm:hover .weam-ctd-dot {
    width: 8px !important;
    height: 8px !important;
    left: 9px;
}
.weam-ctd-wrap.sm .weam-ctd {
    padding: 6px 14px 6px 24px;
    font-size: var(--weam-text-base);
    margin-left: 0;
}

/* ============================================
   SIZE: LG (hero CTA — stays filled)
   ============================================ */
.weam-ctd-wrap.lg .weam-ctd-socket {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    background: white;
    border-radius: 50% !important;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    flex: none;
    pointer-events: none;
}
.weam-ctd-wrap.lg .weam-ctd-dot {
    width: 16px !important;
    height: 16px !important;
    left: 7px;
    opacity: 1;
}
.weam-ctd-wrap.lg:hover .weam-ctd-dot {
    width: 26px !important;
    height: 26px !important;
    left: 2px;
    opacity: 1;
}
.weam-ctd-wrap.lg .weam-ctd {
    padding: 14px 28px;
    font-size: var(--weam-text-xl);
    font-weight: 600;
    margin-left: 18px;
    color: white;
    background: var(--weam-slate-800, #1E293B);
    border: 2px solid white;
    border-radius: 8px;
}
.weam-ctd-wrap.lg:hover .weam-ctd {
    background: var(--weam-slate-700, #334155);
    border-color: white;
    color: white;
}

/* ============================================
   COLOR: SECONDARY (muted slate dot)
   ============================================ */
.weam-ctd-wrap.secondary .weam-ctd-dot {
    background: var(--weam-slate-400, #94A3B8);
}
.weam-ctd-wrap.secondary:hover .weam-ctd-dot {
    background: var(--weam-slate-600, #475569);
}

/* ============================================
   COLOR: DANGER (red dot)
   Both .danger and .weam-ctd-danger supported
   ============================================ */
.weam-ctd-wrap.danger .weam-ctd-dot,
.weam-ctd-wrap.weam-ctd-danger .weam-ctd-dot {
    background: #d63638;
}

/* ============================================
   COLOR: UPGRADE (stays filled — purchase CTA)
   ============================================ */
.weam-ctd-wrap.upgrade .weam-ctd-socket {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    background: white;
    border-radius: 50% !important;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    flex: none;
    pointer-events: none;
}
.weam-ctd-wrap.upgrade .weam-ctd-dot {
    opacity: 1;
    width: 16px !important;
    height: 16px !important;
    left: 4px;
}
.weam-ctd-wrap.upgrade:hover .weam-ctd-dot {
    width: 20px !important;
    height: 20px !important;
    left: 2px;
    opacity: 1;
}
.weam-ctd-wrap.upgrade .weam-ctd {
    margin-left: 12px;
    color: white;
    background: linear-gradient(135deg, var(--weam-purple-500, #6366F1), var(--weam-purple-600, #4F46E5));
    border: 2px solid white;
    border-radius: 8px;
    padding: 10px 18px;
}
.weam-ctd-wrap.upgrade:hover .weam-ctd {
    background: linear-gradient(135deg, var(--weam-purple-600, #4F46E5), var(--weam-purple-700, #4338CA));
    border-color: white;
    color: white;
}

/* ============================================
   STATE: DISABLED — freeze outline, no hover
   ============================================ */
.weam-ctd-wrap.disabled .weam-ctd,
.weam-ctd-wrap .weam-ctd:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.weam-ctd-wrap.disabled:hover .weam-ctd,
.weam-ctd-wrap:has(.weam-ctd:disabled):hover .weam-ctd {
    background: transparent;
    border-color: #a7aaad;
    color: var(--weam-slate-400);
    font-weight: 500;
}
.weam-ctd-wrap.disabled:hover .weam-ctd-dot,
.weam-ctd-wrap:has(.weam-ctd:disabled):hover .weam-ctd-dot {
    opacity: 0.4;
}
.weam-ctd-wrap.sm.disabled:hover .weam-ctd-dot,
.weam-ctd-wrap.sm:has(.weam-ctd:disabled):hover .weam-ctd-dot {
    opacity: 0.4;
}

/* Danger disabled: same freeze */
.weam-ctd-wrap.danger.disabled:hover .weam-ctd,
.weam-ctd-wrap.danger:has(.weam-ctd:disabled):hover .weam-ctd {
    background: transparent;
    border-color: #a7aaad;
    color: var(--weam-slate-400);
}

/* ============================================
   LOADING STATE
   ============================================ */
.weam-ctd-wrap .weam-btn-loading { display: none; }
.weam-ctd-wrap.is-loading .weam-btn-text { display: none; }
.weam-ctd-wrap.is-loading .weam-btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   UNSAVED CHANGES — pulse dot
   ============================================ */
.weam-ctd-wrap.has-changes .weam-ctd-dot {
    animation: weam-pulse-dot 1.5s ease-in-out infinite;
}
@keyframes weam-pulse-dot {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.6; transform: translateY(-50%) scale(1.3); }
}

/* ============================================
   LINK VARIANT (for <a> tags)
   ============================================ */
a.weam-ctd,
a.weam-ctd:visited {
    text-decoration: none;
}

/* ============================================
   TOOLTIP — disabled reason explanations
   ============================================ */
.weam-tooltip {
    position: fixed;
    z-index: 100000;
    background: #fff;
    color: var(--weam-slate-900);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: var(--weam-text-base);
    line-height: 1.6;
    max-width: 300px;
    border: 1.5px solid var(--weam-amber-500, #F59E0B);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.weam-tooltip-danger {
    border-color: #d63638;
}
.weam-tooltip-visible {
    opacity: 1;
    transform: translateY(0);
}
.weam-tooltip-reason {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.weam-tooltip-reason + .weam-tooltip-reason {
    margin-top: 3px;
}
.weam-tooltip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--weam-amber-500, #F59E0B);
    flex-shrink: 0;
    margin-top: 5px;
}
.weam-tooltip-dot-danger {
    background: #d63638;
}