/* Sticky Search Widget — style.css */

:root {
    --ssw-bg:     #2563eb;
    --ssw-text:   #ffffff;
    --ssw-size:   52px;
    --ssw-pos-v:  bottom;
    --ssw-pos-h:  right;
    --ssw-offset: 24px;
    --ssw-radius: 999px;
    --ssw-shadow: 0 4px 20px rgba(0,0,0,.18);
    --ssw-ease:   cubic-bezier(.4,0,.2,1);
    --ssw-dur:    220ms;
}

/* ── Wrapper ─────────────────────────────────────────────────── */
#ssw-wrap {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    /* Dynamic positioning via CSS variables injected by PHP */
    bottom:  var(--ssw-offset);
    right:   var(--ssw-offset);
}

/* When positioned top */
#ssw-wrap[data-v="top"]    { bottom: auto; top:   var(--ssw-offset); flex-direction: column-reverse; }
#ssw-wrap[data-h="left"]   { right:  auto; left:  var(--ssw-offset); align-items: flex-start; }

/* ── Toggle button ───────────────────────────────────────────── */
#ssw-toggle {
    width:            var(--ssw-size);
    height:           var(--ssw-size);
    border-radius:    var(--ssw-radius);
    background:       var(--ssw-bg);
    color:            var(--ssw-text);
    border:           none;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    box-shadow:       var(--ssw-shadow);
    transition:       transform var(--ssw-dur) var(--ssw-ease),
                      box-shadow var(--ssw-dur) var(--ssw-ease);
    flex-shrink: 0;
}

#ssw-toggle:hover  { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.24); }
#ssw-toggle:active { transform: scale(.96); }
#ssw-toggle:focus-visible {
    outline: 3px solid var(--ssw-bg);
    outline-offset: 3px;
}

#ssw-toggle svg {
    width:  46%;
    height: 46%;
    display: block;
}

/* ── Search form ─────────────────────────────────────────────── */
#ssw-form {
    display:         flex;
    align-items:     center;
    background:      #fff;
    border-radius:   var(--ssw-radius);
    box-shadow:      var(--ssw-shadow);
    overflow:        hidden;

    /* Collapsed state */
    width:           0;
    opacity:         0;
    pointer-events:  none;
    transform:       translateY(6px) scale(.97);
    transition:      width     var(--ssw-dur) var(--ssw-ease),
                     opacity   var(--ssw-dur) var(--ssw-ease),
                     transform var(--ssw-dur) var(--ssw-ease);
}

#ssw-form.ssw-open {
    width:           min(280px, calc(100vw - var(--ssw-offset) * 2 - var(--ssw-size) - 14px));
    opacity:         1;
    pointer-events:  all;
    transform:       translateY(0) scale(1);
}

#ssw-input {
    flex:         1;
    border:       none;
    outline:      none;
    padding:      0 14px;
    font-size:    15px;
    line-height:  var(--ssw-size);
    height:       var(--ssw-size);
    background:   transparent;
    color:        #111;
    min-width:    0;
}

#ssw-input::placeholder { color: #aaa; }

#ssw-form button[type="submit"] {
    width:           var(--ssw-size);
    height:          var(--ssw-size);
    border:          none;
    background:      var(--ssw-bg);
    color:           var(--ssw-text);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background var(--ssw-dur);
}

#ssw-form button[type="submit"]:hover { filter: brightness(1.1); }

#ssw-form button[type="submit"] svg {
    width:  40%;
    height: 40%;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #ssw-toggle, #ssw-form { transition: none; }
}