/* Direction-aware hover effect for buttons */
.btn-dir {
    position: relative;
    overflow: hidden;
    transition: color .35s ease;
}

.btn-dir::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--btn-contrast, #fff);
    transform: translateY(100%);
    transition: transform .35s ease;
}

.btn-dir:hover::before,
.btn-dir:active::before {
    transform: translate(0, 0);
    background: var(--btn-contrast, #fff) !important;
}

.btn-dir:hover,
.btn-dir:active {
    color: var(--btn-bg, #198754) !important;
    background: var(--btn-contrast, #fff) !important;
    border-color: var(--btn-bg, #198754) !important;
}

.btn-dir > * {
    position: relative;
    z-index: 1;
    color: inherit !important;
    transition: color .35s ease;
}

.btn-dir:hover > *,
.btn-dir:active > * {
    color: var(--btn-bg, #198754) !important;
}

/* Specific styles for consultation floating button */
.consult-float {
    position: fixed !important;
    right: 86px !important;
    bottom: 18px !important;
    border-radius: 999px !important;
    padding: .6rem 1rem !important;
    z-index: 9999 !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.2) !important;
    --c: #198754;
    background: var(--c) !important;
    color: #fff !important;
    border: 2px solid var(--c) !important;
    overflow: hidden;
    transition: color .35s ease, box-shadow .2s ease;
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

.consult-float::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: translateY(100%);
    transition: transform .35s ease;
}

.consult-float:hover::before,
.consult-float:active::before {
    transform: translate(0, 0);
}

.consult-float:hover,
.consult-float:active {
    background: #fff !important;
    color: var(--c) !important;
}

.consult-float i,
.consult-float span {
    position: relative;
    z-index: 1;
    color: inherit;
    transition: color .35s ease;
}

/* Responsive: avoid overlap on small screens */
@media (max-width: 575.98px) {
    .consult-float {
        right: 18px;
        bottom: 86px;
    }
}