:root {
    --wa-color: #25D366;
    --wa-size: 64px; /* buton boyutu */
    --wa-icon-size: 40px;
    --wa-radius: 50%;
    --wa-z: 99999;
    --modal-width: 360px;
}

/* Floating icon only button */
#whatsapp-float {
    position: fixed;
    left: 18px;
    bottom: 18px;
    width: var(--wa-size);
    height: var(--wa-size);
    border-radius: var(--wa-radius);
    /*background: var(--wa-color);*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    z-index: var(--wa-z);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
    border: solid 1px #7aa436;
}

    #whatsapp-float:hover {
        transform: translateY(-4px);
    }

    #whatsapp-float:active {
        transform: translateY(-1px);
    }

    /* small ripple accessible focus styles */
    #whatsapp-float:focus {
        outline: 3px solid rgba(37,211,102,0.25);
    }

    /* svg inside button */
    #whatsapp-float svg {
        width: var(--wa-icon-size);
        height: var(--wa-icon-size);
        display: block;
    }

/* Modal overlay */
.wa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--wa-z) + 1);
}

    .wa-modal-overlay.open {
        display: flex;
    }

/* Modal box */
.wa-modal {
    width: calc(var(--modal-width));
    max-width: calc(100% - 36px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
    padding: 14px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.wa-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.wa-title {
    font-weight: 600;
    font-size: 16px;
    color: #111;
}

.wa-sub {
    font-size: 13px;
    color: #666;
}

.wa-close-btn {
    margin-left: auto;
    background: transparent;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    color: #444;
}

/* form */
.wa-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

    .wa-form input[type="text"], .wa-form textarea {
        width: 100%;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        padding: 10px;
        font-size: 14px;
        resize: vertical;
    }

    .wa-form label {
        font-size: 13px;
        color: #444;
    }

.wa-submit {
    margin-top: 6px;
    background: var(--wa-color);
    color: white;
    border: 0;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37,211,102,0.18);
}

    .wa-submit:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

/* small helper text */
.wa-note {
    font-size: 12px;
    color: #777;
    margin-top: 6px;
}

/* responsive - hide text and keep small icon on narrow screens if requested */
@media (max-width:420px) {
    :root {
        --wa-size: 44px;
        --modal-width: 92vw;
    }
}