/*
|--------------------------------------------------------------------------
| EcoTech Explain-Before-Action UI
|--------------------------------------------------------------------------
| Hover/focus explains the consequence before click.
| On touch devices, the helper copy remains visible below the action.
|--------------------------------------------------------------------------
*/

.ec-action-help{
    position:relative;
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    max-width:100%;
}

.ec-action-tip{
    position:absolute;
    left:50%;
    bottom:calc(100% + 10px);
    z-index:100;
    width:min(310px,80vw);
    padding:10px 12px;
    border-radius:10px;
    background:#071f18;
    color:#fff;
    font-size:.78rem;
    font-weight:600;
    line-height:1.45;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,6px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
    pointer-events:none;
}

.ec-action-tip::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:#071f18;
}

.ec-action-help:hover .ec-action-tip,
.ec-action-help:focus-within .ec-action-tip{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

.ec-action-mobile{
    display:none;
    margin-top:6px;
    max-width:310px;
    color:#607168;
    font-size:.76rem;
    line-height:1.4;
}

.ec-learn-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    color:#1f5c4d;
    font-size:.82rem;
    font-weight:800;
    text-decoration:none;
}

.ec-learn-link:hover,
.ec-learn-link:focus{
    text-decoration:underline;
}

@media (hover:none), (pointer:coarse){
    .ec-action-tip{
        display:none;
    }

    .ec-action-mobile{
        display:block;
    }
}