/*
 * Header sign-in pill styles — v2.0.1 shim.
 *
 * Tiny rules for the .cfl-signin-pill anchor that booking-signin.js
 * renders into the theme's #cyclefix-signin-pill element OR an
 * auto-injected one when the theme doesn't have a placeholder.
 *
 * Auto-injected case (.cfl-signin-pill-host--injected): the host
 * span sits at the end of the header, floated right with a small
 * z-index so it survives most theme layouts.
 */

/* Auto-inject placement — sits at end of header, right-aligned. */
.cfl-signin-pill-host--injected {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0 12px;
    z-index: 5;
    position: relative;
}
/* When the host's parent header is flex, push the pill to the
 * right edge. When it's not (the theme uses block / float), the
 * margin-left: auto above does nothing harmful but won't right-
 * align — the operator should consider adding a placeholder to
 * the theme header in that case. */

.cfl-signin-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cfl-signin-pill.is-signed-out {
    background: #00B4FF;
    color: #fff;
}
.cfl-signin-pill.is-signed-out:hover,
.cfl-signin-pill.is-signed-out:focus {
    background: #0096D6;
    color: #fff;
}

.cfl-signin-pill.is-signed-in {
    background: transparent;
    color: #0F172A;
    border: 1px solid #E2E8F0;
}
.cfl-signin-pill.is-signed-in:hover,
.cfl-signin-pill.is-signed-in:focus {
    background: #F1F5F9;
    color: #0F172A;
}