/* ================================================================
   CW Dual Button — Front-end Styles
   All dimensions use CSS custom properties set by PHP so the
   admin settings immediately cascade here without JS.
   Colors fall back to theme CSS variables when left blank.
   ================================================================ */

/* ── Fallback palette (overridden by :root vars from PHP) ── */
:root {
    --cwdb-radius:       50px;
    --cwdb-border-w:     2px;
    --cwdb-divider-w:    2px;
    --cwdb-font-size:    15px;
    --cwdb-pad-v:        12px;
    --cwdb-pad-h:        28px;
    --cwdb-color-border: var(--wp--preset--color--primary, var(--color-primary, var(--theme-color, #0073aa)));
    --cwdb-color-bg:     transparent;
    --cwdb-color-text:   var(--wp--preset--color--primary, var(--color-primary, var(--theme-color, #0073aa)));
    --cwdb-hover-bg:     var(--wp--preset--color--primary, var(--color-primary, var(--theme-color, #0073aa)));
    --cwdb-hover-text:   #ffffff;
    --cwdb-transition:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wrapper ── */
.cwdb-wrap {
    display: block;
    line-height: 1;
}
.cwdb-wrap.cwdb--align-center { text-align: center; }
.cwdb-wrap.cwdb--align-left   { text-align: left;   }
.cwdb-wrap.cwdb--align-right  { text-align: right;  }

/* ── The pill container ── */
.cwdb {
    display:         inline-flex;
    align-items:     stretch;
    border:          var(--cwdb-border-w) solid var(--cwdb-color-border);
    border-radius:   var(--cwdb-radius);
    overflow:        hidden;          /* clips button hover fills */
    background:      var(--cwdb-color-bg);
    /* Subtle depth */
    box-shadow:
        0 0 0 calc(var(--cwdb-border-w) - 1px) rgba(0,0,0,.04) inset,
        0 2px 8px rgba(0,0,0,.08);
    transition:
        box-shadow var(--cwdb-transition),
        transform  var(--cwdb-transition);
}
.cwdb:hover {
    box-shadow:
        0 0 0 calc(var(--cwdb-border-w) - 1px) rgba(0,0,0,.04) inset,
        0 4px 18px rgba(0,0,0,.14);
    transform: translateY(-1px);
}

/* ── Buttons ── */
.cwdb__btn {
    position:       relative;
    display:        flex;
    align-items:    center;
    gap:            6px;
    padding:        var(--cwdb-pad-v) var(--cwdb-pad-h);
    font-size:      var(--cwdb-font-size);
    font-family:    inherit;                  /* pull from theme */
    font-weight:    600;
    line-height:    1;
    color:          var(--cwdb-color-text);
    text-decoration: none;
    background:     transparent;
    cursor:         pointer;
    overflow:       hidden;
    transition:
        color      var(--cwdb-transition),
        background var(--cwdb-transition);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

/* Hover fill */
.cwdb__btn::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: var(--cwdb-hover-bg);
    opacity:  0;
    transition: opacity var(--cwdb-transition);
    pointer-events: none;
}
.cwdb__btn:hover::before,
.cwdb__btn:focus-visible::before { opacity: 1; }
.cwdb__btn:hover,
.cwdb__btn:focus-visible { color: var(--cwdb-hover-text); }

/* Focus ring (accessibility) */
.cwdb__btn:focus-visible {
    outline: 3px solid var(--cwdb-color-border);
    outline-offset: 2px;
    border-radius: 2px;
    z-index: 1;
}

/* Icon */
.cwdb__icon {
    font-size:   1.1em;
    flex-shrink: 0;
    position:    relative;  /* sits above ::before */
    z-index:     1;
    line-height: 1;
}

/* Label */
.cwdb__label {
    position: relative;
    z-index:  1;
}

/* ── Inner divider line ── */
.cwdb__divider {
    display:    block;
    flex-shrink: 0;
    width:      var(--cwdb-divider-w);
    background: var(--cwdb-color-border);
    opacity:    0.5;
    /* scale vertically with padding */
    margin:     calc(var(--cwdb-pad-v) * 0.4) 0;
    border-radius: 999px;
    transition: opacity var(--cwdb-transition);
}
.cwdb:hover .cwdb__divider { opacity: 0.8; }

/* ── Ripple effect ── */
.cwdb__ripple {
    position:   absolute;
    inset:      0;
    pointer-events: none;
    overflow:   hidden;
    border-radius: inherit;
}
.cwdb__ripple::after {
    content: '';
    position: absolute;
    width:  200%;
    padding-bottom: 200%;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    opacity: 0;
}
.cwdb__btn:active .cwdb__ripple::after {
    animation: cwdb-ripple .45s ease-out forwards;
}

/* ── Entrance animation ── */
.cwdb-wrap.cwdb--animate .cwdb {
    animation: cwdb-enter .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Keyframes ── */
@keyframes cwdb-enter {
    from {
        opacity:   0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity:   1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cwdb-ripple {
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .cwdb {
        flex-direction: column;
        border-radius: calc(var(--cwdb-radius) * 0.55);
    }
    .cwdb__btn {
        justify-content: center;
    }
    .cwdb__divider {
        width:  auto;
        height: var(--cwdb-divider-w);
        margin: 0 calc(var(--cwdb-pad-h) * 0.4);
        border-radius: 999px;
    }
}