// Compra
.panel-compra {
   background: #fbfbfb;
   margin-bottom: 1rem;
   padding: 1rem;

   .panel-compra-header {
      p {
         margin-bottom: 1rem;

         &.panel-compra-title {
            font: {
               size: 13px;
               weight: 600;
            }
            margin-bottom: 0.5rem;
            small {
               color: $grey;
            }
         }
      }

      &.header-center {
         @media (min-width: $small) {
            display: flex;
            flex-direction: column;
            align-items: center;
         }
      }
   }

   .panel-compra-content {
      .input-group {
         margin: 0 20px 0 0;
      }
   }
   @media (max-width: $small) {
      padding: 1rem;
   }
}

.panel-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 0 15px;
   @media (max-width: $medium) {
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   .panel-list-box {
      background: white;
      margin: 1rem 0;
      padding: 15px;
      width: 48%;

         .row {
            @media (max-width: $medium) {
               margin-left: 0 !important;
               margin-right: 0 !important;
            }
            .col-md-4 {
               @media (max-width: $medium) {
                  padding-left: 0 !important;
                  padding-right: 0 !important;
               }
            }
         }

      p,
      p * {
         color: $blue;
         font-weight: 600;
      }

      .col-md-4 {
         flex: 100%;
         max-width: 100%;
      }
   }

   @media (max-width: $large) {
      .panel-list-box {
         background: none;
         border-bottom: 2px solid #dfdfdf;
         margin: 0 0 0.5rem 0;
         padding: 0.5rem 0;
         width: 100%;

         &:last-child {
            border: none;
         }
      }
   }
}

.panel-socios {
   margin-top: 20px;
   p {
      margin-bottom: 10px;
   }

   .panel-socios-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;

      .check-block {
         margin: 5px 10px 5px 0;
      }

      @media (max-width: $medium) {
         flex-direction: column;
         .check-block {
            margin-bottom: 5px;
         }
      }
   }
}

// Panel extra: Promocode
.panel-extra {
   padding: 20px 0;

   .panel-extra-container {
      .form-group {
         display: flex;
         align-items: center;
         flex-direction: column;
         text-align: center;
         margin: 0;
         width: 100%;

         label {
            color: $blue;
            font-weight: 600;
         }
         .form-control {
            max-width: 300px;
         }

         @media (max-width: $small) {
            align-items: start;
            text-align: left;
         }
      }
   }
}

// Pago
.suscripcion {
   align-items: flex-end;
   justify-content: space-between;
   display: flex;
   a {
      flex-basis: 180px;
      margin-bottom: 10px;
   }
   .item {
      align-items: center;
      display: flex;
      .item-logo {
         margin-right: 10px;
      }
      .item-txt {
         display: flex;
         p {
            color: $black;
            font: {
               size: 12px;
               weight: 600;
            }
            margin: 0;
         }
         span {
            color: $black;
            font: {
               size: 11px;
               weight: 600;
            }
            margin: 0;
            margin-left: 2px;
            text-align: left;
         }
      }
   }
   @media (max-width: $large) {
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
      a {
         flex-basis: auto;
      }
   }
}

.agregar-suscripcion {
   margin-top: 40px;
   display: flex;
   align-items: center;
   a {
      padding-right: 25px;
      position: relative;
      margin-left: 20px;
      &:after {
         content: "";
         background: url("../assets/svg/ico-add.svg");
         background-size: contain;
         display: inline-block;
         margin-left: 5px;
         @include position(absolute, $right: 0, $height: 20px, $width: 20px);
      }
   }
   ul {
      display: flex;
   }
}
.panel-compra-box {
   background: white;
   align-items: center;
   padding: 20px;
   display: flex;
   margin: 10px;

   p {
      margin: 0 0 0 5px;
   }
}

// Formas de pago
.formas-pago {
   align-items: flex-end;
   display: flex;
   flex-wrap: wrap;

   .item {
      display: block !important;
      margin-right: 20px;
      margin-bottom: 10px;

      span {
         font-size: 10px;
         display: block;
         margin-bottom: 5px;
         text-align: center;
      }

      img,
      svg,
      span.pago-btn {
         cursor: pointer;
         border: 2px solid #eaeaea;
         padding: 3px 5px;
         border-radius: 20px;
         position: relative;
         overflow: hidden;
         transition: all 0.3s ease;
         width: 100px;
      }

      span.pago-btn {
         font-size: 12px;
         margin: 0;
         padding: 7px 5px;
         /*margin-top: 20px;*/
         height: 35px;
         text-align: center;
         width: auto;
      }

      &:hover,
      &:focus {
         opacity: 0.5;
      }

      &.selected {
         span {
            color: #006cd8;
            font-weight: 700;
         }
         img,
         svg,
         span.pago-btn {
            border: 2px solid #006cd8;
         }
      }
   }
}

.formas-pago-grupo {
   cursor: pointer;
   border: 2px solid #eaeaea;
   padding: 0 10px;
   border-radius: 20px;
   width: max-content;

   &:hover,
   &:focus {
      opacity: 0.5;
   }

   item {
      margin: 0;
      &:hover,
      &:focus {
         opacity: 1;
      }

      img,
      svg,
      span.pago-btn {
         border: none;
      }
      svg {
         padding: 0;
      }
   }
   .selected {
      border: 2px solid #006cd8;
   }

   @media (max-width: $medium) {
      justify-content: space-between;
      padding: 10px;
      width: 100%;
      li {
         margin: 0;
      }
      .item {
         img {
            padding: 0;
            width: 100%;
         }
      }
   }
}

// Box cuotas
.box-cuotas {
   background: #eff7fd;
   border-radius: 5px;
   /*align-items: center;*/
   padding: 15px 25px;
   margin: 0;
   display: flex;
   flex-direction: column;
   max-width: 350px;
   .box-flex {
      align-items: center;
   }
   label {
      font-weight: 600;
      margin: 0;
   }
   select {
      border-radius: 5px;
      border: 2px solid #006cd8;
      margin: 5px;
      width: 80px;
   }
   p {
      font-size: 12px;
      margin: 0;
      line-height: 14px;
   }
   .ayuda {
      margin-top: 5px;
      font-size: 11px;
      * {
         font-size: 11px;
      }
   }
}

// Canje entradas
.canje-entradas {
   margin: 40px 0;
   text-align: center;

   h1 {
      font-size: 16px;
      margin-bottom: 10px;

      small {
         color: #007ddf;
         font-size: 20px;
         margin: 10px 0 20px 0 !important;
         line-height: 22px;
      }

      span.nro {
         color: #414141;
         font-size: 13px;
      }
   }

   p {
      margin-bottom: 10px;
   }

   .detalle-canje {
      justify-content: center;
      display: flex;
      p {
         margin-right: 5px;
      }
   }

   .form-group h4 {
      max-width: 1000px;
      margin: 0 auto 20px auto;
      text-align: left;
   }

   .header-box p {
      text-align: left;
   }

   .box-canje {
      align-items: center;
      flex-direction: column;
      display: flex;
      justify-content: center;
      margin: 20px 0;

      input {
         background: transparent;
         border: 2px solid #006cd8;
         border-radius: 5px;
         font-size: 16px;
         padding: 15px;
         margin-bottom: 20px;
         text-align: center;
         max-width: 300px;
         width: 100%;
         transition: all 0.3s ease;
         -webkit-transition: all 0.3s ease;
         -moz-transition: all 0.3s ease;

         &:hover,
         &:focus {
            border: 2px solid #044a90;
            outline: 0px;
         }

         &:disabled {
            background: #f3f3f3;
            border: none;
            color: #006cd8;
            font-size: 14px;
            font-weight: 600;
            margin: 0;
         }
      }

      &.error {
         margin: 40px;
         input {
            background: #fff2f2;
            color: red;
         }
         span {
            color: red;
            display: inline-block;
            font-weight: 600;
            margin: 10px;
         }
      }
   }

   @media (max-width: $small) {
      .canje-entradas {
         margin: 20px 0;
      }
   }
}

@media (max-width: 768px) {
   .proceso-compra {
      padding-bottom: 150px;
      h2 {
         margin: 0 100px 1rem 0;
         line-height: 1.2;
      }
   }
   .fa-lg.ml-2 {
      font-size: 1.1em;
      line-height: 0.05em;
      vertical-align: -0.065em;
      margin-left: 0.25rem !important;
   }

   .ol-viewport.ol-touch {
      min-height: 250px;
   }
}

.tarifas-ventanilla {
   .panel-compra {
      background: transparent;
      padding: 0;
      margin-bottom: 30px;
      .panel-compra-header {
         align-items: flex-start;
         padding: 0;
         .panel-compra-title {
            margin-bottom: 5px;
         }
      }
      .panel-compra-content {
         display: flex;
         align-items: center;
      }
   }
}

.total {
   color: $grey;
   margin: 20px 0;
   text-align: center;
   font: {
      size: 16px;
      weight: 600;
   }
}

@media (max-width: $small) {
   .proceso-compra {
      .form-item-wrapper {
         label {
            text-align: left;
         }
      }
   }
}