/* ==========================================
   SHOUTBOX.CSS - THEME SHAMAN
   CrazySpirits - Shoutbox officielle
========================================== */

/* IMPORTANT : les menus Couleur/Police/Taille doivent passer par-dessus les smileys/messages */
#shoutbox_top,
.shoutbox_form_container,
.shoutbox_form_container form,
.bbcode-bar,
.cf-bbcode-selects {
    overflow: visible !important;
}

/* ===== BARRE BBCODE ===== */
.bbcode-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 14px auto 8px auto !important;
    position: relative !important;
    z-index: 30 !important;
	transform: translateX(40px) !important;
}

.bbcode-bar br {
    display: none !important;
}

.bbcode-bar table,
.bbcode-bar tbody,
.bbcode-bar tr,
.bbcode-bar td {
    display: contents !important;
}

.bb_icon.shout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 3px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid rgba(170,185,195,.55) !important;
    background:
        linear-gradient(
            to bottom,
            rgba(70,82,92,.75),
            rgba(20,25,30,.92)
        ) !important;
    color: var(--theme-color) !important;
    text-decoration: none !important;
    text-shadow:
        0 0 4px #000,
        0 0 5px var(--theme-shadow) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 6px rgba(0,0,0,.75) !important;
    transition: all .18s ease !important;
}

.bb_icon.shout-btn:hover {
    border-color: var(--theme-color) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 0 12px var(--theme-shadow) !important;
    transform: translateY(-1px) scale(1.05) !important;
}

.bb_icon.shout-btn i {
    font-size: 13px !important;
    line-height: 1 !important;
}

.bbcode-bar {
    gap: 9px !important;
    margin: 12px auto 12px auto !important;
}

/* ===== CONTENEUR DES 3 SELECTS ===== */
.cf-bbcode-selects {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 8px auto 14px auto !important;
    position: relative !important;
    z-index: 99990 !important;
}

.cf-select {
    position: relative !important;
    display: inline-block !important;
    min-width: 122px !important;
    z-index: 99991 !important;
}

.cf-select.open {
    z-index: 100000 !important;
}

/* Bouton fermé */
.cf-select-current {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 31px !important;
    padding: 4px 26px 4px 12px !important;
    border-radius: 7px !important;
    border: 1px solid var(--theme-color) !important;
    background: linear-gradient(to bottom, rgba(86,104,115,.96), rgba(27,33,38,.98)) !important;
    color: #f4f0e5 !important;
    font-family: Papyrus, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    text-shadow: 0 0 4px #000 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -1px 0 rgba(0,0,0,.70),
        0 0 8px var(--theme-shadow) !important;
    cursor: pointer !important;
    transition: all .18s ease !important;
}

.cf-select-current:hover {
    background: linear-gradient(to bottom, rgba(104,122,132,.98), rgba(33,39,44,.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        0 0 12px var(--theme-shadow) !important;
}

.cf-select-current-text {
    display: inline-block !important;
    pointer-events: none !important;
}

/* Texte des 3 boutons */
.cf-select-current{
    font-size: 9px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
}

/* Flèche */
.cf-select-arrow{
    font-size: 8px !important;
}

/* Bouton Taille un peu plus étroit */
.cf-select.cf-select-size{
    min-width: 95px !important;
}

/* Bouton Police */
.cf-select.cf-select-font{
    min-width: 120px !important;
}

/* Bouton Couleur */
.cf-select.cf-select-color{
    min-width: 125px !important;
}

/* Flèche stable : reste blanche, tourne seulement quand ouvert */
.cf-select-arrow {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #f7f1df !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-shadow: 0 0 4px #000 !important;
    pointer-events: none !important;
    transition: transform .18s ease !important;
}

.cf-select.open .cf-select-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Liste ouverte */
.cf-select-list {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 35px !important;
    width: 220px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px !important;
    border-radius: 8px !important;
    border: 1px solid var(--theme-color) !important;
    background: linear-gradient(to bottom, rgba(36,38,38,.99), rgba(13,14,14,.99)) !important;
    box-shadow:
        0 0 22px rgba(0,0,0,.95),
        0 0 14px var(--theme-shadow) !important;
    z-index: 100001 !important;
}

.cf-select.open .cf-select-list {
    display: block !important;
}

/* Largeur automatique selon le contenu */
.cf-select-list{
    width: max-content !important;
    min-width: 100% !important;
    max-width: 180px !important;
}

/* Option */
/* Option */
.cf-select-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 100% !important;
    min-height: 18px !important;
    margin: 1px 0 !important;
    padding: 2px 5px !important;
    box-sizing: border-box !important;
    border-radius: 5px !important;
    border: 1px solid rgba(165,175,182,.35) !important;
    background: linear-gradient(
        to bottom,
        rgba(76,83,87,.92),
        rgba(31,35,38,.98)
    ) !important;
    color: #f0eadc !important;
    font-family: Papyrus, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-shadow: 0 0 4px #000 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
}

.cf-select-option:hover {
    border-color: var(--theme-color) !important;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--theme-color) 38%, #555), #1d1d1d) !important;
    color: #fff !important;
    box-shadow: 0 0 8px var(--theme-shadow) !important;
}

.cf-color-dot {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow:
        inset 0 0 2px rgba(0,0,0,.75),
        0 0 4px rgba(0,0,0,.85) !important;
}

/* Les smileys doivent rester derrière les dropdowns */
.bbcode-smilies {
    text-align: center !important;
    margin: 10px 0 8px 0 !important;
    position: relative !important;
    z-index: 5 !important;
}

.bbcode-smilies img {
    margin: 2px 4px !important;
    vertical-align: middle !important;
    transition: transform .15s ease !important;
}

.bbcode-smilies img:hover {
    transform: scale(1.15) !important;
}

.bbcode-bar + hr,
.bbcode-smilies + hr {
    width: 75% !important;
    margin: 9px auto !important;
    border: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--theme-color) 45%, transparent) !important;
}

/* Carrés couleur dans le menu Couleur */
.cf-select-color .cf-select-option {
    display: flex !important;
    align-items: center !important;
}

.cf-select-color .cf-color-dot {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    margin-right: 7px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    box-shadow:
        inset 0 0 2px rgba(0,0,0,.75),
        0 0 4px rgba(0,0,0,.85) !important;
    background-clip: padding-box !important;
}


/* ===== FIX FINAL BBCODE SHAMAN ===== */

.bbcode-bar a {
    display: inline-flex !important;
    text-decoration: none !important;
    margin: 0 3px !important;
}

.bbcode-bar a .bb_icon.shout-btn {
    width: 26px !important;
    height: 26px !important;
    border: 1px solid var(--theme-color) !important;
    border-radius: 6px !important;
    background: linear-gradient(to bottom, rgba(70,82,92,.85), rgba(18,22,26,.95)) !important;
    color: var(--theme-color) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 0 7px var(--theme-shadow) !important;
}

.bbcode-bar a .bb_icon.shout-btn i,
.bbcode-bar a .bb_icon.shout-btn .fa,
.bbcode-bar a .bb_icon.shout-btn .fas,
.bbcode-bar a .bb_icon.shout-btn .fab {
    color: var(--theme-color) !important;
    font-size: 12px !important;
    text-shadow:
        0 0 4px #000,
        0 0 6px var(--theme-shadow) !important;
}

.bbcode-bar a:hover .bb_icon.shout-btn {
    border-color: var(--theme-color) !important;
    background: linear-gradient(to bottom, rgba(95,110,120,.95), rgba(22,28,32,.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 0 12px var(--theme-shadow) !important;
}

.bbcode-bar a:hover .bb_icon.shout-btn i {
    color: #fff !important;
}