/* ESTILOS DEL FORMULARIO DE METODOS DE PAGO */
/* Extraidos inicialmente desde step3.css */
/*
	Esta CSS afecta al formulario de los metodos de pago, tanto en el incrustado en el PurchasePortlet, como
	a la directiva generica payment-data que se usa en el resto de Portlets. El HTML es prácticamente idéntico,
	salvo por que en la directiva se han situtido los elementos <h> por <div>.
	Por tanto la CSS es aplicable a ambos componentes.

	DIFERENCIACION DE ESTILOS ENTRE EL PASO3 Y EL COMPONENTE GENERICO:
	Para las excepciones que apliquen solo a la directiva payment-data, se ha añadido el class 'payment-data-directive'
	al elemento padre. Por tanto:
	- Selectores con #payment_method_box_class                        -> afectan a ambos componentes
	- Selectores con #payment_method_box_class.payment-data-directive -> afectan solo a la directiva
	- Selectores con #step3FormsApp #payment_method_box_class         -> afectan solo al paso 3
*/

#payment_method_box_class{
    clear: both;
    background-color: #fff;
    padding: 16px;
    margin-top: 16px;
}

/*Solo directiva payment-data. No ponemos margenes al componente general: dejamos que el portlet
contenedor se lo asigne */
#payment_method_box_class.payment-data-directive {
	padding: 0;
	margin: 0;
}

/*solo en el paso 3. sombra de todo el contendor*/
#step3FormsApp #payment_method_box_class {
    -webkit-box-shadow: 0 18px 30px -12px rgba(56,51,59,0.1);
	box-shadow: 0 18px 30px -12px rgba(56,51,59,0.1);
}

/* En el componente generico payment-data no usamos elementos <h> porque al poder estar situados
 en cualquier pagina, no sabemos que jerarquia hay que conservar. Por ello sustituimos los <hx> por <divs>
 con clase "simula-hx" con el mismo estilo que los <h> del componente del proceso de compra.
 En ocasiones debemos además dotar a los "simula-hx" de estilos que beben los <hx> de los estilos generales*/

#payment_method_box_class h3,
#payment_method_box_class.payment-data-directive div.simula-h3 {
    color: #38333B;
    font-size: 1.143rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1.857rem;
}

/*Solo directiva payment-data */
#payment_method_box_class.payment-data-directive div.simula-h3 {
   	margin: 0px 0px 0px 15px;
	padding-top: 15px;
}

#payment_method_box_class ul {
    list-style-type: none;
}

#payment_method_box_class h4,
#payment_method_box_class.payment-data-directive div.simula-h4 {
	font-size: 1.143rem;
	margin: 0;
	padding: 0 20px;
}

#payment_method_box_class h4,
#payment_method_box_class.payment-data-directive div.simula-h4 {
	font-size: 1.143rem;
	margin: 0;
	padding: 0 20px
}

.payment-title--small {
	font-size: 1rem;
    padding-left: 10px;
}

/*------------ DATOL DEL PAGADOR ---------------------*/
#payment_method_box_class .payer {
	padding: 15px 32px;
}

#content-web2020 #payment_method_box_class .payer span,
#content-web2020 #payment_method_box_class .payer input,
#content-web2020 #payment_method_box_class .payer select,
#content-web2020 #payment_method_box_class .payer option{
	font-family: 'Open-Sans';
}

#payment_method_box_class .payer #copyDataChk + label {
	margin-left: -32px;
}

#payment_method_box_class .document-type, #passenger_contact_data .document-type {
	float: left;
    width: calc(50% - 15px);
    margin-right: 15px;
}
#payment_method_box_class .document-type ~ input, #passenger_contact_data .document-type ~ input {
	float: left;
	width: 50% !important;
}


/* ------------------ FORMAS DE PAGO ------------------- */

/* Ajuste altura radios de los metodos de pago: necesitamos el #content-web2020 para sobreescribir estilo general */
#content-web2020 #payment_method_box_class input[type="radio"] + label:before {
	top:-2px;
}

#content-web2020 #payment_method_box_class input[type="radio"]:checked + label:after {
	top:4px;
}
/* Fin ajuste altura radios de los metodos de pago */

/* Ajuste de tipo de letra en los radios de los metodos de pago:
EXCEPCION A LA REGLA de tipo de letra para SPAN. Usamos Blinker 1.1043 para que no sea más grande que la del titulo de seccion.
Hemos tenido que añadir el #content-web2020 al selector, porque necesitamos sobreescribir otro estilo */
#content-web2020 #payment_method_box_class .payment-type-options input[type="radio"] + label span,
#content-web2020 #payment_method_box_class .payment-type-options input[type="checkbox"] + label span,
#content-web2020 #payment_method_box_class .payment-type-options div.delete-token span{
    font-family: Blinker-Light;
}

#content-web2020 #payment_method_box_class .payment-type-options input[type="checkbox"] + label span,
#content-web2020 #payment_method_box_class .payment-type-options div.delete-token span{
    font-size: 0.929rem;
}

#payment_method_box_class span.text-separate{
	border-left: 1px solid #BCBCBC;
	padding-left: 10px;
	margin-left: 7px;
}

/* Puntos y monedero */
#payment_method_box_class .payment-type-options {
	margin-bottom: 10px;
}
#payment_method_box_class .purse-payment-type {
	margin-top: 20px;
	margin-bottom: 10px;
}
#payment_method_box_class .select-points,
#payment_method_box_class .purse-payment-type .form-group {
	padding: 0 20px 10px;
	border-bottom: 1px solid #ECEAE6;
	margin-bottom: 0;
}
#payment_method_box_class .points-msg {
	padding-top: 5px;
    padding-bottom: 15px;
}
#payment_method_box_class .select-points > div,
#payment_method_box_class .select-points > div.points-percentages > div,
#payment_method_box_class #moneyPaymentFieldset li,
#payment_method_box_class .purse {
	padding: 12px 0;
}
#payment_method_box_class .select-points > div.points-percentages > div:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}
#payment_method_box_class .select-points > div.points-percentages > div:first-of-type {
	padding-top: 0;
}
#payment_method_box_class .select-points label {
	float: none;
}

#payment_method_box_class #moneyPaymentFieldset {
	padding: 0 20px;
	margin: 0;
	display: inline-block;
/* 	margin-top: 16px; */
	width: 100%;
}

#payment_method_box_class #moneyPaymentFieldset li input[type="checkbox"] + label { /*!*/
	margin-left: 13px;
}
#payment_method_box_class .money-type-form {
	margin-top: 5px;
	padding-left: 5px;
}
#payment_method_box_class #moneyPaymentFieldset .money-type-form button{/*!*/
	background: none;
	box-shadow: none;
    line-height: 1.2rem;
    font-size: 1rem;
    color: #007398;
    padding-right: 0;
    padding-left: 25px;
}
/* Estilos para cuando tenemos imagen de la tarjeta guardada */
#payment_method_box_class #moneyPaymentFieldset .money-type-form .padding-credit-card { margin-top: -4px; }
#payment_method_box_class #moneyPaymentFieldset .money-type-form .padding-credit-card button {
	padding-left: 74px;
	margin-bottom: 5px;
}

/* Opciones de pago en un click */
#payment_method_box_class .option-token:first-of-type {
	margin-top: 10px;
	margin-bottom: 5px;
}

#payment_method_box_class .delete-token {
	width: auto;
    margin-top: 4px;
}
#payment_method_box_class .delete-token button { text-decoration: underline; }

#payment_method_box_class .form-group.group-radios { margin-bottom: 0; }

/* Ajustes en logos */
#payment_method_box_class .creditcard-title {
	font-family: var(--fuente-light);
	font-size: 1.143rem;
}
#payment_method_box_class .creditcard-title:not(:only-child) { margin-top: -9px; }

#payment_method_box_class .creditcard-img {
    display: inline-block;
    width: 112px;
    height: 28px;
    margin-top: -6px;
    margin-left: 10px;
    background-image: url(../images/metodosPago/3_card.png);
 }
#content-web2020 #payment_method_box_class .another-card { margin-bottom: 4px; }

#payment_method_box_class .credit-card-info {
	display: flex;
    align-items: center;
    padding-top: 3px;
}
#content-web2020 #payment_method_box_class input[type="radio"] + label.credit-card-info:before { top: 1px; }
#content-web2020 #payment_method_box_class input[type="radio"] + label.credit-card-info:after { top: 7px; }
#payment_method_box_class .credit-card-info__img {
	padding-right: 10px;
    padding-left: 2px;
}
#payment_method_box_class .visa .credit-card-info__img:before {
	content: url('../images/metodosPago/visa-small.png');
}
#payment_method_box_class .mastercard .credit-card-info__img:before {
	content: url('../images/metodosPago/master-card-small.png');
}
#payment_method_box_class .amex .credit-card-info__img:before {
	content: url('../images/metodosPago/amex-small.png');
}
#payment_method_box_class .visa { padding-top: 3px; }
#payment_method_box_class .mastercard .credit-card-info__img,
#payment_method_box_class .amex .credit-card-info__img { margin-top: -5px; }

#payment_method_box_class .fa.fa-paypal { left: 2px; }

#payment_method_box_class .money-type--paypalplazos {
	background-color: #60cdff;
	color: #01206a;
	font-size: .8rem;
	border-radius: 8px;
	font-family: var(--fuente-secundaria);
}

#payment_method_box_class .fa.fa-bizum { top: -9px; }

#payment_method_box_class .check-remember-me { padding-left: 10px; }

.other-money-payments {
	border-bottom: 1px solid #ECEAE6;
    padding: 0 15px 15px;
    margin: 0 -15px 5px;
}
.other-money-payments__text { font-size: 1.143rem; }
#payment_method_box_class .other-money-payments .icn-angle-down { color: var(--color-iconos-flecha); }


.fa.fa-paypal {
	width: 60px;
	height: 17px;
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.fa.fa-paypal:before {
	content:url(../images/metodosPago/logo_paypal_small_v2.png);
}

.fa.fa-bizum{
	width:60px;
	height:26px;
	position: relative;
	overflow:hidden;
	display:inline-block;
}

.fa.fa-bizum:before{
	content:url(../images/metodosPago/logo_bizum_small_v2.png);
}

.fa.fa-googlepay{
	width:55px;
	height:29px;
	position: relative;
	overflow:hidden;
	display:inline-block;
	margin-top: -7px;
}

.fa.fa-googlepay:before{
	content:url(../images/metodosPago/logo_gpay_small_v1.png);
}

.fa.fa-applepay{
	width:50px;
	height:32px;
	position: relative;
	overflow:hidden;
	display:inline-block;
	margin-top: -9px;
}

.fa.fa-applepay:before{
	content:url(../images/metodosPago/logo_applepay_small_v1.png);
}



/**** SOBREESCRITURA DE ESTILOS PARA LA DIRECTIVA payment-data ****/
/* Al incluir payment-data dentro de otro componente, se puede desmaquetar al afectarle los
   estilos del otro componente. A continuación definimos estilos definidos de forma particular
   en casos concretos, para sobreescribir estilos externos
*/

/* Vouchers */
 #content-web2020 .formulario.voucher #payment_method_box_class.payment-data-directive input {
	padding-left: 0;
 }