// Componentes relacionados con el proceso de compra, carrito


// Ajuste del título del carrito
div.istorecustom_res_titulo_botoncarrito > table {
   float: right;
   margin: 3px 0 0 0;
}



// Componentes relacionados con el carrito




div.goInfoButton {
   margin: 6px 0 0 0;

   a {
      display: block;
      color: #f0f0f0;
      background-color: #501421;
      padding: 2px 8px 2px 8px;
      border-radius: 16px;

      &:hover {
         text-decoration: underline;
         color: #c0c0c0;
         background-color: rgba(0, 0, 0, 0.5);
      }
   }
}






/* El link para quick carrito */
a.quickcarrito1, a.quickcarrito2, a.deletecarrito {
   display: block;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   border: 0;
}

a.quickcarrito1 {
   display: inline-block;
   width: 16px;
   height: 16px;
   background-image: url("../res/v2/icons/cesta-de-la-compra-green.png");

   &:hover {
      background-image: url("../res/v2/icons/cesta-de-la-compra.png");
   }
}


a.quickcarrito2 {
   width: 40px;
   height: 40px;
   background-size: 65% 65%;
   background-image: url("../res/v2/icons/cesta-de-la-compra-green.png");

   &:hover {
      background-image: url("../res/v2/icons/cesta-de-la-compra.png");
   }
}


a.deletecarrito {
   width: 27px;
   height: 25px;
   background-image: url("../res/v2/icons/cesta-de-la-compra-green-x-small.png");

   &:hover {
      background-image: url("../res/v2/icons/cesta-de-la-compra-green-x-big.png");
   }
}



div.QuickCarritoMuestra {
   position: relative;
   user-select: none;
   outline: 0;
}

div.QCMWithC1 {
   width: 63px;

   > input[type="text"] {
      display: none;
   }

   div.inputPlusMinusWrapper {
      position: absolute;
      top: 0;
      right: 0;
      width: 39px;
      height: 38px;
      /*background-color : #ff0000;*/

      div.iPMButton {
         opacity: 0.3;
      }

      div.iPMPlus {
         top: 0;
         right: 0;
      }

      div.iPMMinus {
         top: 19px;
         right: 0;
      }

      input {
         position: absolute;
         left: 0;
         top: 1px;
         width: 20px;
         height: 26px;
         font-size: 18px;
         color: @color-main;
         background-color: transparent;
         border: 0 none;
         pointer-events: none;
         text-shadow:
            3px 3px 2px @color-nav,
            -3px 3px 2px @color-nav,
            -3px -3px 0 @color-nav,
            3px -3px 0 @color-nav;
      }
   }

   div.iPMValueOne input {
      visibility: hidden;
   }
}







/* Selector de tipo de selección de items en lista */
div.typeSelectorArea {
   display: flex;
   justify-content: flex-start;
   background-color:  @color-item-list-top-modeselector-bg;
   font-family: @font-item;

   div.typeSelectorTablaItems {
      display: flex;
      align-items: center;
      width: auto;
      padding: 1em 2em 1em 2em;

      p {
         color: @color-item-list-top-familia;
         font-weight: bold;
         font-size: 1em;
         text-transform: uppercase;
         padding: 0.4em 0 0.4em 0;
         margin: 0 1em 0 0;
      }

      ul {
         width: auto;
         display: flex;

         li {
            cursor: pointer;
            color: @color-main-80;
            border-radius: 3px;
            padding: 0.4em 1em 0.4em 1em;

            span, strong {
               display: inline-block;
               vertical-align: baseline;
            }

            strong {
               font-weight: 700;
               text-transform: uppercase;
            }

            &:hover {
               color: @color-main-80;
               background-color: @color-item-list-top-bg;
            }

            &.selected {
               color: @color-main;
               background-color: @color-main-80;
            }
         }
      }
   }
}





div#softcarritoPanel {
   display: none;
   position: fixed;
   width: 220px;
   height: 180px;
   left: 20px;
   top: 40px;
   background-color: @color-main-70;
   border-radius: 6px;
   border: 8px solid @color-main-55;
   box-shadow: 0 0 20px 4px @color-main-00;
   z-index: 2000;

   h1 {
      color: @color-main-80;
      background-color: @color-main-55;
      text-transform: uppercase;
      font-size: 1.3em;
      font-weight: bold;
      text-align: center;
      cursor: default;
   }

   div.totales, div.num, div.art {
      position: absolute;
      width: 160px;
      left: 30px;

      dt {
         cursor: default;
      }
   }

   div.totales {
      height: 50px;
      top: 30px;
      background-color: @color-main-80;
      border-radius: 4px;

      dt {
         margin: 4px 0 0 4px;
         color: @color-main-00;
      }

      dd {
         margin: 0 4px 4px 0;
         font-family: @font-price;
         font-size: 2em;
         color: @color-main-10;
         text-align: right;
      }
   }

   div.num, div.art {
      height: 20px;
      font-family: @font-price;
      font-size: 1.1em;

      dt {
         color: @color-main-10;
         float: left;
      }

      dd {
         color: @color-main-10;
         float: right;
         cursor: default;
      }
   }

   div.num {
      top: 86px;
   }

   div.art {
      top: 100px;
   }


   div.btn-createcarrito {
      position: absolute;
      width: 160px;
      height: 25px;
      bottom: 7px;
      left: 30px;

      input {
         width: 100%;
      }
   }
}



#carritoBtnConfirmarCambios {
   visibility: hidden;
}




/* El carrito lateral */
div.carritoLateralTit {
   width: 180px;
   text-align: center;
   padding: 4px 0 4px 0;
   border-bottom: 1px dotted #764522;

   a {
      color: #78ba84;

      &:hover {
         color: #bee4ad;
      }
   }
}


div.carritoLateralList {
   width: 180px;
   overflow: hidden;
   border-bottom: 1px dotted #764522;

   table {
      width: 180px;

      td {
         vertical-align: top;

         &.CLcantidad {
            text-align: right;
            width: 24px;

            a {
               color: #78ba84;

               &:hover {
                  color: #bee4ad;
               }
            }
         }

         &.CLnombr {
            a {
               &:hover {
                  color: #fcf1c5;
               }
            }
         }
      }
   }
}







tr.tras_carrito {
   td {
      vertical-align: top;

      div.tabla_portes {
         font-family: @font-item;
         width: 212px;
      }

      h3 {
         background-color: @color-main-70;
         color: @color-main-100;
         font-size: 0.9em;
         border-radius: 4px;
         padding: 0.5em;
         margin-right: 0.5em;
      }
   }
}



















div.area_direccion,
div.tabla_portes,
div.feselector,
div.feaviso {
   position: relative;
   background-color: @color-purchase-paneles-bg;
   padding: 0 0.5em 0 0.5em;
   margin: 0 0.5em 0.5em 0;
   border-radius: 4px;
}



div.area_direccion {

   table.direcciones {
      td {
         padding: 0 8px 0 4px;

         &.hayenvioalt {
            opacity: 0.8;
         }

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

         &.dirAcciones {
            padding-top: 1em;
         }
      }

      span.envioaltno {
         opacity: 0.8;
      }
   }
}








div.feselector legend,
table.bajocarrito .tituloBasico {
   font-size: 1.1em;
   color: @color-menu;
   text-align: left;
   padding: 0.2em 0 0.7em 0;
   cursor: default;

   em {
      display: block;
      font-style: normal;
      font-size: 0.8em;
   }
}

div.feselector {
   font-family: @font-item;

   table {
      margin: 0 auto;
      width: 100%;

      td {
         position: relative;
      }
   }

   a {
      display: block;
      overflow: auto;
      margin: 0 0 0.6em 0;
      padding: 0.2em 0.6em 0.2em 0.6em;
      border-radius: 8px;
      background-color: @color-client-bg;

      &.feitemselected {
         background-color: @color-client-fields-bg;
      }
   }

   div {
      &.feradio {
         float: left;
         margin: 10px 8px 0 0;
      }

      &.feitem {
         float: left;
         width: 100px;

         img {
            width:inherit;
            opacity: 0.2;

            &:hover {
               opacity: 0.5;
            }
         }

         span {
            &.fenombre {
               display: block;
               margin: 4px 0 0 0;
               font-size: 0.9em;
               color: #889b79;
            }

            &.fetiempo {
               color: @color-main;
            }
         }
      }

      &.feitemselected {
         opacity: 1;

         &:hover {
            opacity: 1;
         }

         img {
            opacity: 1;

            &:hover {
               opacity: 1;
            }
         }
      }

      &.feprice {
         float: left;
         margin: 12px 0 0 8px;
         font-size: 0.9em;
         color: @color-precio;
         font-family: @font-price;
      }

      &.faptofrio {
         position: absolute;
         top: 0;
         right: 0;
         color: @color-precio;
      }
   }

   blockquote {
      width: 200px;
      font-family: @font-item;
   }
}








div.feselector blockquote,
div.feavisoSection {
   font-size: 1em;
   font-weight: normal;
   color: @color-main;
   padding: 4px 0 0 36px;
   margin: 0 auto 16px auto;
   background-image: url("../res/icono_warning_40px.png");
   background-repeat: no-repeat;
   background-position: 0 0;
   background-size: 30px;
   min-height: 38px;
}

div.feselector blockquote {
   font-size: 0.9em;
}

div.feselector blockquote strong,
div.feavisoSection strong {
   font-weight: bold;
   color: @color-precio;
}


div.feavisoSection {
   width: 300px;
}





div.iStoreTablaPortesMain {
   font-family: @font-item;

   p.iStoreTablaPortesTxt {
      text-align: left;
      font-family: @font-price;
      font-size: 0.75em;
      color: @color-precio-tachado;
      padding-bottom: 0.9em;

      span.iStoreTablaPortesTxtSel {
         color: @color-main;
         font-weight: bold;
      }
   }

   div.fedesc {
      padding: 0.5em 0 0.5em 0;
      margin: 0 0 0.5em 0;
      text-align: center;
      background-color: @color-client-fields-bg;
      border-radius: 4px;

      p.femaindesc{
         font-size: 0.9em;
         color: @color-main;
      }
   }



   span.fetiempo {
      color: @color-main;
   }


   div.feicon, li.feicon {
      text-align: center;
      margin: 0 0 16px 0;
   }






   div.portesNoLogin {
      div {
         &.portesValor {
            display: none;
         }

         &.portesTabla {
            padding: 3px 0 3px 0;
            border: 2px dashed transparent;
            opacity: 1;
            border-radius: 8px;
         }
      }
   }
}