/* =========================
   WIDGET CONTAINER
========================= */
#click-contact-widget {
    position: fixed;
    left: 20px;
    bottom: -280px; /* caché au départ */
    width: 220px;

    background: #007acc;
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    z-index: 9999;

    font-family: sans-serif;
    cursor: pointer;
    transition: bottom 0.5s ease;
}

/* =========================
   HEADER
========================= */
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================
   FORM ELEMENTS
========================= */
#click-contact-widget input,
#click-contact-widget button {
    width: 100%;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 4px;
}

#click-contact-widget input {
    border: none;
}

#click-contact-widget button {
    background: #fff;
    color: #007acc;
    border: none;
    cursor: pointer;
}

/* =========================
   STEP SYSTEM
========================= */
#click-contact-widget .step {
    display: none;
}

#click-contact-widget .step.active {
    display: block;
}

.step button {
    background: green;
    color: #fff;
}

.step button:hover {
    background: #e1e1e1;
    color: #fff;
}

/* =========================
   STEP 1 BUTTON
========================= */
#step1-yes {
    cursor: pointer;
}

#step1-yes:hover {
    background: green;
    color: #fff;
}

/* =========================
   TOGGLE (REDUCE / CLOSE)
========================= */
#widget-toggle {
    float: right;
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid;
    border-radius: 3px;
    margin: 0 auto 10px auto;

    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#widget-toggle.visible {
    opacity: 1;
}

#widget-toggle:hover {
    background: #fff;
    color: #007acc;
}

/* =========================
   COLLAPSED STATE
========================= */
#click-contact-widget.collapsed {
    bottom: -50px;
    height: 40px;
    overflow: hidden;
}

/* =========================
   MESSAGES
========================= */
#widget-msg {
    margin-top: 5px;
    font-size: 12px;
}

/* =========================
   CALL US INFO
========================= */
.call-us-info {
    display: none;
    margin-top: 10px;
    text-align: center;
}