.wlab-well-cta {
box-sizing: border-box;
max-width: 100%;
margin: 32px 0;
padding: 20px;
border: 2px solid #0f766e;
border-radius: 8px;
background: #f1f5f9;
color: #1f2937;
}
.wlab-well-cta .wlab-well-cta__title {
margin: 0 0 8px;
color: #111827;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.5;
}
.wlab-well-cta .wlab-well-cta__text {
margin: 0 0 16px;
color: #374151;
font-size: .9375rem;
line-height: 1.7;
}
.wlab-well-cta .wlab-well-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 100%;
}
.wlab-well-cta .wlab-well-cta__button {
display: inline-flex;
flex: 0 1 auto;
align-items: center;
justify-content: center;
width: 200px;
min-width: 160px;
max-width: 240px;
min-height: 64px;
box-sizing: border-box;
padding: 10px 14px;
border: 0;
border-radius: 6px;
color: #fff;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
transition: background-color .15s ease, transform .15s ease;
}
.wlab-well-cta .wlab-well-cta__actions--count-3 .wlab-well-cta__button {
width: min(200px, calc((100% - 24px) / 3));
}
.wlab-well-cta .wlab-well-cta__button--phone {
background-color: #0f766e;
}
.wlab-well-cta .wlab-well-cta__button--phone:hover {
background-color: #115e59;
color: #fff;
}
.wlab-well-cta .wlab-well-cta__button--line {
background-color: #07883f;
}
.wlab-well-cta .wlab-well-cta__button--line:hover {
background-color: #066b35;
color: #fff;
}
.wlab-well-cta .wlab-well-cta__button--detail {
background-color: #2563eb;
}
.wlab-well-cta .wlab-well-cta__button--detail:hover {
background-color: #1d4ed8;
color: #fff;
}
.wlab-well-cta .wlab-well-cta__button:focus-visible {
outline: 3px solid #111827;
outline-offset: 3px;
box-shadow: 0 0 0 2px #fff;
}
.wlab-well-cta .wlab-well-cta__button:active {
transform: translateY(1px);
}
@media (max-width: 599px) {
.wlab-well-cta {
padding: 16px;
}
.wlab-well-cta .wlab-well-cta__actions {
flex-direction: column;
align-items: center;
gap: 10px;
}
.wlab-well-cta .wlab-well-cta__button {
width: 100%;
min-width: 0;
max-width: 320px;
}
.wlab-well-cta .wlab-well-cta__actions--count-3 .wlab-well-cta__button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.wlab-well-cta .wlab-well-cta__button {
transition: none;
}
}