/* ==========================================================================
   DEVO CTA Buttons — B1 Studio
   Preseturile de mai jos sunt DOAR valori de bază.
   Orice setare din tabul Stil al Elementorului le suprascrie automat
   (Elementor generează CSS cu specificitate mai mare). De aceea aici
   NU se folosește !important — altfel panoul din Elementor nu ar mai avea efect.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap');

/* ---------- Wrapper (aliniere) ---------- */
.devo-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ---------- Butonul (structura comună) ---------- */
.devo-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 340px;
    min-height: 56px;
    padding: 11px 18px;
    border: 0 solid transparent;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Mulish', system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .15s ease, box-shadow .18s ease;
}

.devo-cta-btn:hover,
.devo-cta-btn:focus {
    text-decoration: none;
}

.devo-cta-btn:focus-visible {
    outline: 3px solid #2BB9A6;
    outline-offset: 2px;
}

.devo-cta-texts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.devo-cta-lbl {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.2;
    text-align: center;
}

.devo-cta-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    opacity: .85;
}

.devo-cta-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.devo-cta-icon svg {
    width: 17px;
    height: 17px;
    fill: #25D366;
}

/* ==========================================================================
   PRESETURI
   ========================================================================== */

/* --- 1. REGISTRATION — verde plin --- */
.devo-cta-btn.devo-cta-style-green {
    background-color: #08C923;
    border-width: 0;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(8, 201, 35, .25);
}
.devo-cta-btn.devo-cta-style-green .devo-cta-lbl { color: #FFFFFF; font-weight: 800; }
.devo-cta-btn.devo-cta-style-green .devo-cta-hint { color: #FFFFFF; font-weight: 600; }
.devo-cta-btn.devo-cta-style-green:hover {
    background-color: #07A81D;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(8, 201, 35, .32);
}

/* --- 2. APPLY TO ATTEND — grafit, bordură 2px --- */
.devo-cta-btn.devo-cta-style-graphite {
    background-color: #FFFFFF;
    border-width: 2px;
    border-color: #2B3340;
    min-height: 56px;
}
.devo-cta-btn.devo-cta-style-graphite .devo-cta-lbl { color: #2B3340; font-weight: 800; }
.devo-cta-btn.devo-cta-style-graphite .devo-cta-hint { color: #2B3340; font-weight: 600; }
.devo-cta-btn.devo-cta-style-graphite:hover {
    background-color: #F5F6F8;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(43, 51, 64, .14);
}

/* --- 3. REQUEST INFO — același grafit, retras: 1px, 52px, weight 700 --- */
.devo-cta-btn.devo-cta-style-graphite-soft {
    background-color: #FFFFFF;
    border-width: 1px;
    border-color: #2B3340;
    min-height: 52px;
}
.devo-cta-btn.devo-cta-style-graphite-soft .devo-cta-lbl {
    color: rgba(43, 51, 64, .8);
    font-weight: 700;
}
.devo-cta-btn.devo-cta-style-graphite-soft .devo-cta-hint {
    color: rgba(43, 51, 64, .8);
    font-weight: 500;
    opacity: .75;
}
.devo-cta-btn.devo-cta-style-graphite-soft:hover {
    background-color: #F5F6F8;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(43, 51, 64, .12);
}
.devo-cta-btn.devo-cta-style-graphite-soft:hover .devo-cta-lbl,
.devo-cta-btn.devo-cta-style-graphite-soft:hover .devo-cta-hint {
    color: #2B3340;
    opacity: 1;
}

/* --- 4. WhatsApp --- */
.devo-cta-btn.devo-cta-style-wa {
    background-color: #FFFFFF;
    border-width: 1px;
    border-color: #128C4A;
    min-height: 48px;
}
.devo-cta-btn.devo-cta-style-wa .devo-cta-lbl {
    color: #128C4A;
    font-weight: 600;
    letter-spacing: .02em;
}
.devo-cta-btn.devo-cta-style-wa .devo-cta-hint { color: #128C4A; font-weight: 600; }
.devo-cta-btn.devo-cta-style-wa:hover {
    background-color: #F1FBF5;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(18, 140, 74, .16);
}

/* --- 5. CUSTOM — bază neutră, totul se setează din tabul Stil --- */
.devo-cta-btn.devo-cta-style-custom {
    background-color: #FFFFFF;
    border-width: 1px;
    border-color: #2B3340;
    min-height: 56px;
}
.devo-cta-btn.devo-cta-style-custom .devo-cta-lbl { color: #2B3340; font-weight: 800; }
.devo-cta-btn.devo-cta-style-custom .devo-cta-hint { color: #2B3340; font-weight: 600; }
.devo-cta-btn.devo-cta-style-custom:hover {
    transform: translateY(-2px);
}

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
    /* pe ecrane foarte mici butonul nu mai e limitat de max-width */
    .devo-cta-btn { max-width: 100%; }
}

/* ---------- Accesibilitate ---------- */
@media (prefers-reduced-motion: reduce) {
    .devo-cta-btn,
    .devo-cta-btn:hover { transition: none; transform: none; }
}