/* Ítems de regalo */
@import "lb-vars";

table.tablapedidoarticulos {
   background-color: @color-purchase-bg;
   color: @color-main;
   max-width: 1000px;
   font-size: 1rem;

   > tbody > tr {

      > td.tdcarritopedidototalesTit,
      > td.tdcarritopedidototales,
      > td.tdcarritopedidototalesFinal {
         font-family: @font-item;
         height: 1.8em;
         text-align: right;
         font-size: 0.9em;
         vertical-align: middle;
      }

      > td.tdcarritopedidototalesTit {
         color: @color-precio-tachado;
      }

      > td.tdcarritopedidototales,
      > td.tdcarritopedidototalesFinal {
         color: @color-precio;
         border-top-style: solid;
         border-top-color: @color-borders;
         border-top-width: 1px;
         font-family: @font-price;
      }

      > td.tdcarritopedidototalesFinal {
         font-size: 1.1em;
         font-weight: bold;
      }

      > td.cestaSinArticulos {
         padding: 2em 1em 2em 1em;
      }

      &.tabcabrow {
         td.tdcarritocabecera {
            height: 1.8em;
            vertical-align: middle;
            color: @color-main;
            background-color: @color-item-list-top-bg;
            text-align: center;
            font-size: 0.9em;
            font-weight: bold;
         }

      }



      &.tritemsb {
         td {
            &.tdcarrito {
               position: relative;
               color: @color-main;
               padding: 0.2em;
               font-size: 0.9em;
               vertical-align: middle;

               &[data-fn="__peso_por_cantidad_kg"] {
                  text-align: right;
                  color: @color-precio-tachado;
               }

               &[data-fn="precio"],
               &[data-fn="precio_final"] {
                  text-align: right;
                  color: @color-precio;
                  font-family: @font-price;
               }

               input {
                  color: @color-precio;
               }

               div.iconForCart {
                  width: 38px;
                  height: 38px;
               }

               span.itemNecesitaFrio {
                  position: absolute;
                  top: 8px;
                  right: 4px;
               }
            }
         }
      }




      &.ri {
         background-color: transparent;

         > td {
            position: relative;
            height: 2.8em;
            vertical-align: middle;
            font-size: 0.9em;

            &.ripicture {
            }

            &.riname {
               font-family: @font-item;
            }

            &.ricantidad {
               text-align: center;
               font-weight: normal;
               color: @color-precio;
            }

            &.riinfo {
               text-align: left;
               font-weight: normal;
               color: @color-precio-tachado;
            }
         }
      }

      &.riheader {
         color: @color-main-80;
         background-color: @color-item-list-top-bg;
         text-align: center;
         vertical-align: middle;

         > td {
            height: 1.8em;

            span{
               font-size: 1em;
               text-transform: uppercase;
               letter-spacing: 0.5em;
            }
         }

      }

      &.rifooter {
      }

      /* Ítems cercanos a regalo */
      &.ricloser {
         background-color: @color-menu;

         td {
            vertical-align: middle;

            &.riheader {
               position: relative;
               height: 2.5em;

               div.riclosericon {
                  position: absolute;
                  left: -9px;
                  top: 22px;
                  width: 64px;
                  height: 64px;
                  background-image: url("../res/v2/images/regalo_64px_green.png");
                  background-repeat: no-repeat;
                  background-size: contain;
               }
            }

            &.ripicturename {

               font-family: @font-item;
               font-size: 0.9em;

               > div {
                  display: flex;
                  align-items: center;
                  background-color: @color-purchase-bg;
                  border-radius: 5px;
                  padding: 0.5em;
                  height: 2.4em;
                  margin: 0 0.5em 0 0;

                  > span {
                     display: block;
                     padding: 0 0.4em 0 0;

                     img {

                     }
                  }
               }
            }

            &.riinfo {
               font-size: 0.9em;
            }
         }
      }

      &.ricloserheader {
         background-color: transparent;
      }

      &.ricloseradvice {
         td {
            &:first-child {
               width: 64px;
            }

            &.riadvice {
               height: 2em;
               font-size: 1em;

               span {
                  font-size: 0.8em;
                  vertical-align: text-bottom;
               }
            }
         }
      }

      &.ricloserfooter {
         height: 1em;
      }
   }

   td.noItemsInBasketControls div.MildTextButton {
      width: 300px;
      margin-left  : auto;
      margin-right : auto;
   }
}





table.bajocarrito {
   width: 100%;
   font-size: 1rem;

   td {
      > div {
         margin-bottom: 8px;
      }

      &.col1 {
         padding: 0 0 10px 10px;
      }

      &.col2 {
      }

      &.col3 {
         > table {
            margin: 0 auto 8px auto;
         }

         div.MildTextButton {
            font-size: 1em;
            width: 170px;
            margin-left: auto;
            margin-right: auto;
         }

         div.buttonContainerCheckout {
            > div {
               width: 170px;
               margin-left: auto;
               margin-right: auto;

               > input {
                  width: 100%;
               }
            }
         }
      }

      &.boton_final {
         vertical-align: bottom;
      }

      div.messageAfterButton {
         font-family: @font-item;
         width: 170px;
         font-size: 0.9em;
         padding: 0;
         margin: 0 auto 0 auto;
         text-align: left;
         color: @color-main;
         cursor: default;
      }
   }

   p.notice {
      text-align: center;
      font-size: 0.9em;
      font-weight: bold;
      color: @color-main;
      background-color: @color-alert;
      padding: 8px 8px 8px 8px;
      border-radius: 4px;
      margin: 0 4px 0 4px;
      cursor: default;
   }
}












/* Los selectores de formas de pago */
div.formaspagoselector {
   margin: 0 0 0 0;

   /* Cada forma de pago */
   > div {
      position: relative;
      overflow: auto;
      margin: 0 0 0.6em 0;
      padding: 0.6em;
      background-color: @color-neutral-85;
      color: @color-main;
      border-radius: 3px;

      /* El texto a modo de comentario B (la modificación del precio) */
      blockquote {
         font-size: 1em;
         color: @color-neutral-50;
         margin-left: 2.6em;

         /* El texto a modo de comentario */
         &.description {
            padding: 0.5em;
            margin-top: 0.5em;
            margin-right: 14em;
            margin-bottom: 0.5em;
            margin-left: 2em;
            font-size: 1.1em;
            color: @color-main-55;
            background: @color-neutral-84;
            border-radius: 2px;
         }
      }

      > blockquote {
         //opacity: 0.4;
         pointer-events: none;
         cursor: default;
      }

      /* Aquí va el logotipo */
      h6 {
         position: absolute;
         margin: 0;
         padding: 0;
         top: 8px;
         right: 8px;

         /* Logotipo en modo CSS (Cuando no existe el archivo con el logo) */
         &.fpLogo {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            width: 100px;
            height: 50px;
            /*outline: 1px dotted red;*/
         }
      }

      > h6 {
         //opacity: 0.4;
      }

      &.Bizum {
         h6.fpLogo {
            background-image: url('../res/external/bizum/btn_horizontal200x95.png');

            &:hover {
               background-image: url('../res/external/bizum/btn_horizontal200x95_hover.png');
            }
         }
      }

      &.PayPal {
         h6.fpLogo {
            background-image: url('../res/external/paypal/PayPal-Logo-200px.png');
         }
      }

      &.Redsys {
         h6.fpLogo {
            background-image: url('../res/external/redsys/redsys-pago-seguro-300x85.png');
            width: 140px;
            height: 47px;
         }
      }

      /* Las entradas de datos */
      input[type="text"], select {
         outline: none;
         color: @color-neutral-00;
         background-color: @color-neutral-100;
         text-align: left;
         border: 1px solid @color-neutral-70;
         margin: 1px;
         padding: 2px;
      }

      select {
         padding: 0;
      }

      /* Los input de tipo radio */
      input[type="radio"] {
         margin-right: 8px;
         vertical-align: top;
      }

      /* Las etiquetas de formularios */
      label {
         vertical-align:middle;
         font-size: 14px;
      }

      > label {
         //opacity: 0.6;
      }

      table {
         tr {
            /* Las celdas de las tablas */
            td {
               padding: 0 4px 0 8px;
            }
         }

         &.defs {
            tr {
               /* Tabla para definiciones */
               td {
                  vertical-align: text-bottom;
                  /* Valor de las definiciones */
                  pre {
                     font-size: 16px;
                  }
               }
            }
         }
      }

      > table {
         opacity: 0.0;
         pointer-events: none;

         > tbody {

            > tr {

               > td[align="right"], > td i {
                  cursor: default;
               }
            }
         }
      }

      &.selected {
         background-color: @color-client-fields-bg;
         border-left: 4px solid @color-main-60;
         box-shadow: rgba(0,0,0,0.2) 3px 3px 7px 0px;

         > label, > h6 {
            opacity: 1;
         }

         > blockquote, > table {
            opacity: 1;
            pointer-events: initial;
         }

         > blockquote.description {
            background-color: @color-neutral-95;
         }
      }

      &:not(.selected):hover {
         background-color: @color-neutral-84;

         > blockquote.description {
            background-color: @color-neutral-85;
         }
      }
   }
}




form#formpedidobacktocarrito table {
   margin: 0 auto;
}


div.PedidosPintaFormaPagoElegida {
   color: @color-neutral-50;

   strong {
      color: @color-neutral-20;
      font-weight: bold;
   }
}







/* Para el fieldset de dirección alternativa */
div#direnvioalt {
   position: relative;
   background-color: @color-client-bg;
   margin: 16px 6px 8px 6px;
   padding: 8px 16px 16px 16px;
   border-radius: 4px;

   fieldset {
      margin: 4px 0 0 0;

      legend {
         background-color: @color-main;
      }

      h6 {
         position: absolute;
         margin: 0;
         padding: 0;
         bottom: 8px;
         right: 4px;
         font-size: 0.9em;
         width: 171px;
      }

      div.MildTextButton {
         text-align: center;
      }
   }
}





/* Muestra la dirección de envío cuando se está componiendo el pedido */
div#direnvio {
   position: relative;

   > h3 {
      text-align: left;
      font-size: 1rem;
      margin: 0 0 0.5em 0;
      font-style: normal;
      color: @color-neutral-50;
      text-transform: uppercase;
   }

   > div.direnvioGroup {
      display: flex;
   }

   table {
      margin: 0 0.5em 0 1em;
      padding: 0;
      font-family: @font-price;
      font-size: 0.8rem;

      tr {
         color: @color-neutral-50;

         td {
            &:nth-child(2) {
               font-weight: bold;
               color: @color-main;
            }
         }
      }
   }

   div.pedResumenDocumentos {
      padding: 0.5em;
      background-color: @color-neutral-85;
      color: @color-neutral-20;
      border-radius: 3px;
      cursor: default;

      p {
         margin: 0 0 0.5em 0;
         padding: 0;
         font-size: 0.9em;
         color: @color-neutral-20;
         text-align: left;

         span {
            display: inline-block;
            width: 20px;
            color: @color-neutral-20;
            font-size: 1.5em;
            vertical-align: baseline;
         }
      }
   }
}







div.msgsituacionpedido {
   width: auto;
   height: 86px;
   font-family: @font-item;
   font-size: 1rem;
   padding: 16px;
   margin: 0 0 1rem 0;
   color: @color-main-00;
   background-color: @color-neutral-85;
   cursor: default;
   border-radius: 3px;

   img {
      margin-right: 8px;
   }
}





.pedidos_compone {
   position: relative;
   max-width: 800px;
   background-color: @color-neutral-90;
   padding-right: 1rem;

   h1 {
      font-size: 1rem;
      color: @color-main;
      text-transform: uppercase;
   }

   h5 {
      margin: 0 0 0 1rem;
      padding: 1rem;
      font-family: @font-item;
      font-weight: normal;
      font-size: 1rem;
      background-color: @color-main-80;
      color: @color-main-10;
      cursor: default;
      border-radius: 3px;
   }

   p {
      margin: 8px 48px 0px 48px;
      padding: 8px 0 8px 0;
      text-align: center;
      font-weight: normal;
      font-size: 14px;
      color: #f0f0f0;
      cursor: default;

      &.completado {
         margin: 16px 48px 32px 48px;
         padding: 8px 0 8px 0;
         text-align: center;
         font-weight: normal;
         font-size: 16px;
         color: #ffffff;
         cursor: default;
      }

      &.pedinfo {
         display: block;
         margin: 16px auto 32px auto;
         padding: 8px 0 8px 0;
         text-align: center;
         font-weight: normal;
         font-size: 16px;
         color: #ffffff;
         background-color: #5e1724;
         cursor: default;
         border-radius: 8px;
         box-shadow: 8px 8px 10px #000000;

         &.error {
            color: black;
            background-color: yellow;
         }
      }
   }

   div {
      &.esquemaSituacion {
         width: 460px;
      }

      &.infoAgenciaTransporte {
         position: absolute;
         top: 8px;
         right: 1rem;
         width: 300px;

         div.msgsituacionpedido {
            display: flex;
            flex-direction: row-reverse;

            div.pedlugardeenvio {
               font-size: 0.8em;
               margin-bottom: 0.8em;
            }
            div.pedlugardeenvioIcon {

            }
         }
      }

      &.selectorFormasPago {
         font-family: @font-item;
         margin-top: 3rem;
         padding: 0 0 0 1rem;
      }

      &.comentarioIncluir {
         margin-top: 3rem;
         padding: 0 0 0 1rem;

         textarea.sleDatosUsuario {
            display: block;
            width: calc(100% - (0.7em * 2));
            height: 100px;
            font-size: 1.1em;
            padding: 0.7em;
            background-color: @color-neutral-95;
            border-radius: 3px;
            outline: none;

            &:hover, &:focus {
               background-color: @color-neutral-100;
            }
         }
      }

      &.carritoReview {
         padding: 0 0 0 1rem;

         .carritoReviewGroup {
            display: flex;
         }
      }
   }
}







div.continuarCompra, div.finCompra {
   text-align: right;
   color: @color-main;
}


div.continuarCompra {
   margin: 1em 0 0.5em 0;

   blockquote {
      font-family: @font-item;
      text-align: right;
      font-size: 1.1em;
   }
}








.msgpanel {
   // Definido en iStore
   font-family: @font-item;
   font-size: 0.9rem;
   color: @color-main;
   background-color: @color-neutral-84;
   border: 0;
   border-radius: 3px;
   margin: 0 1em 1em 1em;

   h3 {
      color: @color-neutral-50;
      text-transform: uppercase;
      margin-bottom: 0.5em;
   }
}

.textomsgpanelAtt {
   font-family: @font-item;
   font-size: 1rem;
   color: @color-main-70;
   padding-left: 0.5em;
}


.iscMsgPanelAlerta {
   font-family: @font-item;
   font-size: 1.5em;
   color:@color-main-10;
   background-color: @color-alert;
   margin: 1em 0 1em 1rem;
   padding: 0.6em;
   border-radius: 3px;
   border-left: 4px solid @color-alert-accent;
}

.iscMsgPanelInfo {
   font-family: @font-item;
   font-size: 1.5em;
   color: @color-main;
   background-color: @color-main-80;
   margin: 1em 0 1em 1rem;
   padding: 0.6em;
   border-left: 4px solid @color-main-60;
}