/* ==========================================================================
   Container
   ========================================================================== */

.social-account-pill {
    background-color: #85b4562a;
    border-radius: 20px;
    padding: 0.5rem 0.75rem;

    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;

    max-width: 100%;
    flex-wrap: wrap;
}

.social-account-pill span {
    white-space: normal;
    word-break: break-word;
    /* asegura que nunca desborde */
    text-align: center;
    /* queda más bonito al partir */
}

.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    margin-right: 0.6em;
    background-color: #eaf6ef;
    border-radius: 50%;
    flex-shrink: 0;

    align-self: center;
}

.check-svg {
    display: block;
    width: 1.1em;
    height: 1.1em;
    stroke: #2d8a5f;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-account-fs-sm {
    font-size: 14px;
}

.social-account-brand-color {
    color: #28754e;
}

/* ==========================================================================
   Social Buttons
   ========================================================================== */

.social-account-backdrop {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bg-black-50 {
    background: rgba(0, 0, 0, 0.5);
}

body.social-account-modal-open *:not(.modal, .modal *) {
    user-select: none;
    -webkit-user-select: none;
}

body.social-account-modal-open {
    overflow: hidden;
}

.social-account-btn-instagram {
    background: linear-gradient(45deg, #feda75, #d62976, #962fbf, #4f5bd5);
    color: white;
    border-radius: 5px;
    border: 1px;
}

.social-account-btn-instagram:hover,
.social-account-btn-instagram:active {
    filter: brightness(0.9);
    color: white !important;
}

button.social-account-btn-instagram:disabled {
    background: linear-gradient(45deg, #feda75, #d62976, #962fbf, #4f5bd5) !important;
    opacity: 0.6;
    color: white !important;
}

.social-account-btn-facebook {
    background: linear-gradient(45deg, #1877f2, #0c63d4);
    color: white;
}

.social-account-btn-facebook:hover,
.social-account-btn-facebook:active {
    filter: brightness(0.9);
    color: white !important;
}

button.social-account-btn-facebook:disabled {
    background: linear-gradient(45deg, #1877f2, #0c63d4) !important;
    opacity: 0.6;
    color: white !important;
}

.social-account-btn-twitter {
    background: linear-gradient(45deg, #1da1f2, #0d8ae8);
    color: white;
}

.social-account-btn-twitter:hover,
.social-account-btn-twitter:active {
    filter: brightness(0.9);
    color: white !important;
}

button.social-account-btn-twitter:disabled {
    background: linear-gradient(45deg, #1da1f2, #0d8ae8) !important;
    opacity: 0.6;
    color: white !important;
}

.social-account-btn-tiktok {
    background: linear-gradient(45deg, #000000, #111111);
    color: white;
    position: relative;
}

/* Detalle sutil tipo TikTok (cian/rojo borde glow) */
.social-account-btn-tiktok::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(45deg, #ff0050, #00f2ea);
    filter: blur(8px);
    opacity: 0.4;
}

.social-account-btn-tiktok:hover,
.social-account-btn-tiktok:active {
    filter: brightness(1.15);
    color: white !important;
}

button.social-account-btn-tiktok:disabled {
    background: linear-gradient(45deg, #000000, #111111) !important;
    opacity: 0.6;
    color: white !important;
}

.social-account-btn-disconnect {
    color: #2d8a5f !important;
    border-color: #709a48;
}

.social-account-btn-disconnect:hover,
.social-account-btn-disconnect:active {
    background-color: #85b456;
    border-color: #709a48;
    color: white !important;
}

.social-account-btn-disconnect:disabled {
    opacity: 0.6;
    background-color: transparent !important;
    border-color: #709a48;
    color: #2d8a5f !important;
}

.social-account-brand-secondary-color {
    color: #2d8a5f;
}

.social-account-warning-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    /* tamaño del círculo */
    height: 40px;
    background-color: #e8f6ef;
    /* verde muy claro (similar al de tu imagen) */
    border-radius: 50%;
}

.social-account-warning-icon i {
    color: #1e8543;
    /* verde que resalta (ajustable) */
    font-size: 22px;
    /* tamaño del signo ! */
    font-weight: bold;
}

.social-account-modal-button-disconnect {
    background-color: #196c2f;
    /* verde más oscuro */
    border-color: #196c2f;
    color: white;
}

.social-account-modal-button-disconnect:hover,
.social-account-modal-button-disconnect:active {
    background-color: #1e8543;
    border-color: #1e8543;
    color: white;
}

/* ==========================================================================
   Popup Pages (accept-terms, message)
   ========================================================================== */
.social-popup {
    font-family: sans-serif;
    background: white;
}

.social-account-btn-green {
    background: #00703c;
    border-color: #00703c !important;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.social-account-btn-green:disabled {
    background: #aaa;
    cursor: not-allowed;
}

.social-account-btn-green:hover,
.social-account-btn-green:focus {
    background-color: #00703c !important;
    border-color: #00703c !important;
    color: white !important;
}

.social-account-btn-outline,
.social-account-btn-outline:hover,
.social-account-btn-outline:focus {
    background: #fff;
    color: #00703c;
    border: 1px solid #00703c;
    margin-left: 10px;
}

.social-account-success {
    background: #f4fff8;
    border: 1px solid #d6f2e0;
}

.social-account-error {
    background: #fff6f6;
    border-color: #f2d6d6;
}

.social-account-info {
    background-color: #f0f8ff;
    border-color: #b8daf2;
}

.social-account-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
}