/* ============================================================
   Rachlap Login Bar v1.1.0  –  login-bar.css
   Uses CSS custom properties injected by PHP from Customizer:
     --rachlap-accent        (primary theme colour)
     --rachlap-accent-dark   (darker shade for hover)
   ============================================================ */

/* Safe fallbacks if PHP hasn't injected values yet */
:root {
    --rachlap-accent:       #3a9fd6;
    --rachlap-accent-dark:  #2e82b0;
}

/* ---------- bar container ---------- */
#rachlap-login-bar {
    position:       fixed;
    top:            0;
    right:          0;
    z-index:        99999;

    /* Use theme primary colour at 88% opacity */
    background:     color-mix(in srgb, var(--rachlap-accent) 88%, #111 50%);
    /* Fallback for browsers without color-mix */
    background:     rgba(40, 40, 40, 0.88);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-bottom-left-radius: 10px;
    color:          #fff;
    font-family:    inherit;
    font-size:      13px;
    line-height:    1;
    transition:     background 0.25s ease, box-shadow 0.25s ease;
    box-shadow:     0 2px 12px rgba(0,0,0,0.18);
}

/* Accent left border using theme colour */
#rachlap-login-bar::before {
    content:          '';
    position:         absolute;
    left:             0;
    top:              0;
    bottom:           0;
    width:            3px;
    border-radius:    0 0 0 10px;
    background:       var(--rachlap-accent);
    opacity:          0.85;
}

#rachlap-login-bar:hover {
    background: rgba(25, 25, 25, 0.96);
    box-shadow: 0 4px 18px rgba(0,0,0,0.26);
}

/* ---------- inner wrapper ---------- */
.rachlap-bar__inner {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     6px 14px 6px 16px;
    min-height:  36px;
}

/* ---------- greeting (logged-in) ---------- */
.rachlap-bar__greeting {
    display:     flex;
    align-items: center;
    gap:         5px;
    color:       #fff;
    font-size:   13px;
    white-space: nowrap;
}

.rachlap-bar__greeting svg {
    flex-shrink: 0;
    stroke:      var(--rachlap-accent);
}

/* ---------- toggle button (guest) ---------- */
.rachlap-bar__toggle {
    display:     flex;
    align-items: center;
    gap:         5px;
    background:  none;
    border:      none;
    color:       rgba(255,255,255,0.85);
    font-size:   13px;
    cursor:      pointer;
    padding:     2px 4px;
    border-radius: 4px;
    transition:  color 0.2s;
    white-space: nowrap;
}

.rachlap-bar__toggle:hover { color: #fff; }
.rachlap-bar__toggle svg   { flex-shrink: 0; stroke: var(--rachlap-accent); }

/* ---------- login form ---------- */
.rachlap-bar__form {
    display: none;
    align-items: center;
    gap: 6px;
}

.rachlap-bar__form.is-open {
    display:   flex;
    flex-wrap: wrap;
}

@media (max-width: 520px) {
    .rachlap-bar__form.is-open { flex-direction: column; align-items: flex-end; }
    #rachlap-login-bar         { right: 0; left: 0; border-radius: 0; }
    #rachlap-login-bar::before { border-radius: 0; }
}

.rachlap-bar__fields {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

/* ---------- inputs ---------- */
.rachlap-bar__input {
    height:        28px;
    padding:       0 8px;
    border:        1px solid rgba(255,255,255,0.22);
    border-radius: 4px;
    background:    rgba(255,255,255,0.10);
    color:         #fff;
    font-size:     12px;
    width:         140px;
    outline:       none;
    transition:    border-color 0.2s, background 0.2s;
}

.rachlap-bar__input::placeholder { color: rgba(255,255,255,0.42); }

.rachlap-bar__input:focus {
    border-color: var(--rachlap-accent);
    background:   rgba(255,255,255,0.16);
    box-shadow:   0 0 0 2px color-mix(in srgb, var(--rachlap-accent) 35%, transparent);
}

/* ---------- buttons ---------- */
.rachlap-bar__btn {
    height:        28px;
    padding:       0 12px;
    border:        none;
    border-radius: 4px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s, transform 0.1s;
    white-space:   nowrap;
    line-height:   28px;
    letter-spacing: 0.01em;
}

/* Submit – theme accent colour */
.rachlap-bar__btn--submit {
    background: var(--rachlap-accent);
    color:      #fff;
}

.rachlap-bar__btn--submit:hover  { background: var(--rachlap-accent-dark); }
.rachlap-bar__btn--submit:active { transform: scale(0.97); }

.rachlap-bar__btn--submit:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

/* Logout */
.rachlap-bar__btn--logout {
    background:      rgba(255,255,255,0.10);
    color:           rgba(255,255,255,0.85);
    border:          1px solid rgba(255,255,255,0.20);
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
}

.rachlap-bar__btn--logout:hover {
    background:   rgba(220, 60, 60, 0.35);
    color:        #fff;
    border-color: rgba(220, 60, 60, 0.5);
}

/* ---------- error message ---------- */
.rachlap-bar__error {
    width:      100%;
    margin:     4px 0 0;
    padding:    0;
    font-size:  11px;
    color:      #ff8f8f;
    min-height: 0;
}

.rachlap-bar__error:empty { display: none; }

/* ---------- loading ---------- */
.rachlap-bar--loading .rachlap-bar__btn--submit::after { content: ' …'; }


/* ---------- responsive behaviour ---------- */
@media (max-width: 767px) {
    #rachlap-login-bar {
        position: relative;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        border-bottom-left-radius: 0;
        box-shadow: none;
        z-index: 20;
    }

    #rachlap-login-bar::before {
        border-radius: 0;
    }

    .rachlap-bar__inner {
        min-height: 40px;
        padding: 6px 12px;
        justify-content: flex-start;
    }

    .rachlap-bar__toggle,
    .rachlap-bar__greeting {
        max-width: 100%;
    }

    .rachlap-bar__form.is-open {
        width: 100%;
        align-items: stretch;
    }

    .rachlap-bar__fields {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .rachlap-bar__input,
    .rachlap-bar__btn {
        width: 100%;
    }

    .rachlap-bar__btn--logout {
        width: auto;
    }
}