/*
 * Descripción: VIDEOCHAT
 * Copyright (c) 2023
*/


.zona_videochat {display: flex; flex-wrap: wrap; box-sizing: border-box; position:relative;}
.zona_videochat_inner {width: 100%; display: flex; box-sizing: border-box; align-items: stretch; margin-right: 0px;	padding-left: 0px;}

/*vídeo*/
.videochat_video{
	margin-right: 3px; position: relative; user-select: auto; box-sizing: border-box; flex-shrink: 0;
	height: auto;
	width: 70%;/*aquí va la programación del ancho de pantalla*/
	max-width: 1800px;/*programado en función de la pantalla*/
	/*min-width: 420px;programado en función de la pantalla*/
}

.videochat_video.redondo, .videochat_video video{border-radius:4px;}

.videochat_video .boton.circulo{width:38px!important; height:38px!important; margin-bottom:6px; background-color:rgba(0,0,0,0.5);}
.videochat_video .boton.circulo img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7475%) hue-rotate(236deg) brightness(112%) contrast(100%);}


/*chat*/
.contenedor-chat{display:flex; width:100%; padding-left:15px}

.videochat_chat{
	flex: 1; position: relative;
	/*min-width: 295px;programado en función de la pantalla*/
}

.videochat_chat_inner {height: 100%; display: flex; flex-direction: column;}

.chat_top {position:relative; /*background-color: #fff;*/ color: #333; border-bottom: 1px solid var(--fa-color-borde); min-height: 46px; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; align-items: center; /*padding:0 10px;*/}
.chat_top .derecha{margin-left: auto; display: inline-flex;}

.chat_top .btnschat a{padding:0px 0px 0px 10px;}/*añadido para que los botones se separen por la izquierda*/
.chat_top .derecha .btnschat a{padding:0px 10px 0px 0px;}/*añadido para que los botones se separen por la derecha*/

.chat_content {flex: 1; background: transparent; overflow: hidden;}/*se puede cambiar el color del fondo del chat*/

.chat_fullheight {height: 100%;}

.zona_chat_content {flex: 1; height: 100%; display: flex; min-width: 100%; flex-direction: column; overflow:hidden; position: relative;}
.zona_chat_texto {
	top: 0;
	flex: 1;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 10px 11px 5px 9px;
	padding:0px;
	position: absolute;
	overflow-x: hidden;
	overflow-y: auto;
}

.chat_bottom {padding: 5px 5px 5px 9px; padding:0px; position: relative;}


@media (max-width: 780px) {
	.videochat_video{min-width:100%;margin-right: 3px;}
	.zona_videochat_inner{flex-direction: column;}
	
	.videochat_video .boton.circulo{width:34px!important; height:34px!important;}
	
	.video_handler_wrapper{display:none;}
	.contenedor-chat{/*position:absolute; top:0; left:0; z-index:10;*/ padding-left:0px; height:100%; width:100%;}
	.videochat_chat{min-width:100%; height:100%;}
		
	.chat_top {background-color: transparent;}
	.chat_content{background:transparent;}
		
	.zona_chat_texto {top:auto;bottom: 0; height:100%; padding-left:0px}
	.zona_chat_content {height: 20vh;}
}


/*chat externo*/
.message-item{margin-bottom:10px; font-size:0.875em;}
.message-item:first-child{margin-top:10px}
.message-item .nick{font-weight:bold}
.message-item .message{line-height:1.4}
.message-item .message img, .message-item .message span{position: relative;}
.message-item .message img {vertical-align: middle;}
.message-item .message a{color:inherit; text-decoration:underline}
.message-item.model .nick{background-color:#fd0796; color:#fff; border-radius:50px; padding:1px 8px; margin-right:2px}
.message-item.model .message{color:inherit;}
.message-item.guest .nick{color:#b78bad}
.message-item.guest .message{color:inherit}
.message-item .tip{position:relative; background-color:#343434; padding:7px 80px 7px 10px; border-radius:4px 99px 99px 4px; margin:7px 0; color:#fff}
.message-item .tip img{position:absolute; display:block; width:70px; top:50%; right:0; transform:translateY(-50%)}


/*zona botones*/
.zona-botones-chat, .zona-propinas{display: flex; justify-content:space-between; margin-top:.25rem; gap:4px;}

/*zona-propinas*/
.zona-propinas{gap:20px; text-align:center; width:100%;}
.zona-propinas .full:not(:last-child){border-right:2px solid black; padding-right:20px}

@media (max-width: 480px) {
	.zona-propinas .full:not(:last-child){border-right:0px solid black; padding-right:0px}
}

.botones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 9px;
  gap: 9px;
  margin: 15px 0px;
}

.boton-propina {
  -webkit-appearance: none;
  -webkit-border-radius: none;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 2px;
  gap: 2px;
  border-radius: 7px;
  background-color: #444;
  border: 2px solid #444;
  height: 35px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all .1s;
}

.boton-propina:hover:not(:disabled){border:2px solid #ff2ca7/*9ce255*/;background-color:#6d3a58/*4e6438*/}
.boton-propina:disabled{cursor:not-allowed;opacity:.5}
.boton-propina img{display:block;width:18px;height:18px}

/*formulario chat*/
form.chat-form{display:flex;position:relative;}
form.chat-form button.emojis{position:absolute;background:transparent;border:none;padding:7px; cursor:pointer;}
form.chat-form button.emojis:hover:not(:disabled) img{transform:scale(1.2)}
form.chat-form button.emojis:focus{outline:none}
form.chat-form button.emojis img{display:block;width:25px;height:25px;transition:all .1s}
form.chat-form button.emojis:disabled{opacity:.3}

form.chat-form input[type=text]{background-color:var(--fa-formchat-fondo); color:var(--fa-formchat-input); border-radius:3px 0 0 3px;border:none;padding:0px 2px 0 5px;flex-grow:1;font-size:0.875em}
.dark form.chat-form input[type=text]{background-color:var(--fa-formchat-fondo); color:var(--fa-formchat-input)}

form.chat-form input[type=text][with-emojis=true]{padding-left:38px}
form.chat-form input[type=text]:focus{outline:none}
form.chat-form input[type=text]:disabled{background-color:var(--fa-formchat-disabled)}
.dark form.chat-form input[type=text]:disabled{background-color:var(--fa-formchat-disabled)}

form.chat-form button.send{background-color:var(--fa-formchat-btn-fondo);color:var(--fa-formchat-btn-txt);position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:0 4px 4px 0;border:none;padding:6px;cursor:pointer}
.dark form.chat-form button.send{background-color:var(--fa-formchat-btn-fondo);color:var(--fa-formchat-btn-txt);}

form.chat-form button.send::before{background-color:var( --fa-formchat-btn-linea); position:absolute;top:0px;bottom:0px;left:0;content:"";display:block;width:1px;}
.dark form.chat-form button.send::before{background-color:var( --fa-formchat-btn-linea)}

form.chat-form button.send svg{display:block}

form.chat-form button.send svg path{fill:var(--fa-formchat-btn-fill)}
.dark form.chat-form button.send svg path{fill:var(--fa-formchat-btn-fill)}

form.chat-form button.send:focus{background-color:#d3d3d3;outline:none}
.dark form.chat-form button.send:focus{background-color:#d3d3d3;}

form.chat-form button.send:hover{background-color:var(--fa-formchat-btn-hover)}
.dark form.chat-form button.send:hover{background-color:var(--fa-formchat-btn-hover)}

form.chat-form button.send:disabled {background-color:var(--fa-formchat-disabled); cursor:default}
.dark form.chat-form button.send:disabled {background-color:var(--fa-formchat-disabled); cursor:default}
.dark form.chat-form button.send:disabled svg path{fill:var(--fa-negro)}


/*form.chat-form button.send:disabled{opacity:.4}*/


/*formulario cantidad*/
.zona-cantidad{margin: 10px auto 0 auto; max-width: 150px;}
.zona-cantidad form {position: relative; display: flex;}
.zona-cantidad form > img {position: absolute; top: 50%; left: 11px; transform: translateY(-50%); width: 24px; height: 24px; pointer-events: none;}
.zona-cantidad form input {
  -webkit-appearance: none;
  -webkit-border-radius: none;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 12px 10px 12px 40px;
  width: 100%;
  background-color: #f2f2f2;
  border: none;
  border-radius: 3px 0 0 3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #000;
}
.zona-cantidad form button {-webkit-appearance: none; -webkit-border-radius: none; background-color: #e9e9e9; border: none; flex-grow: 0; flex-shrink: 0; border-radius: 0 3px 3px 0; cursor: pointer;}





/*borra lo de abajo*/

.smile {background-size: 100%; display: inline-block; margin-right: 4px;}

.smile-grinning {
 -webkit-animation:smile-grinning 1.7s steps(34) infinite;
 animation:smile-grinning 1.7s steps(34) infinite;
 background-image:url(../images/grinning.png);
 height:26px;
 width:30px;
}
@-webkit-keyframes smile-grinning {
 0% {
  background-position:0 0
 }
 100% {
  background-position:0 -884px
 }
}
@keyframes smile-grinning {
 0% {
  background-position:0 0
 }
 100% {
  background-position:0 -884px
 }
}

.smile-heart {
 -webkit-animation:smile-heart 1.2s steps(24) infinite;
 animation:smile-heart 1.2s steps(24) infinite;
 background-image:url(../images/heart.png);
 height:26px;
 width:30px
}
.retina .smile-heart {
 background-image:url(/assets/common/components/ui/Smiles/images/heart@2x.png)
}
@-webkit-keyframes smile-heart {
 0% {
  background-position:0 0
 }
 100% {
  background-position:0 -624px
 }
}
@keyframes smile-heart {
 0% {
  background-position:0 0
 }
 100% {
  background-position:0 -624px
 }
}