@import url('global-vars.css');

/*Confirmacion de pedido*/
#order-confirmation{
    background:var(--backgrounud-myacc-pages);
}

#order-confirmation #content-wrapper{
    margin-top:50px;
    padding:0;
}

#order-confirmation .row,
#order-confirmation  .col-md-12
{
    padding:0;
    margin:0;
}
#order-confirmation #wrapper{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
#order-confirmation #content{
    border-radius:var(--radius-primary);
    box-shadow: 0px 3px 6px #00000029;
    padding:70px 90px;
    background:#fff;
    margin-bottom: 45px;
}
#order-confirmation  #content-hook_order_confirmation .card-block,
#order-confirmation  #content .card-block{
    padding:0;
}
#order-confirmation  #content-hook_order_confirmation{
    border-radius:var(--radius-primary);
    box-shadow: 0px 3px 6px #00000029;
    padding:35px 90px;
    background:#fff;
    margin-bottom:35px;
}
#order-confirmation  #content-hook_order_confirmation .card-title{
    display:flex;
    flex-direction:row;
    gap:20px;
    align-items:center;
    margin-bottom:25px;
    font:500 24px/24px Outfit;
}
#order-confirmation  #content-hook_order_confirmation p{
    font:500 16px/24px Outfit;
    color:#979797;
}

#order-confirmation  #content  #order-items{
    border-right:none;
    width: 100%;
}
#order-confirmation  #content #order-items .c-oc-header {
    display: grid;
    grid-template-columns: 1fr 160px 120px 180px;
    align-items: center;
    margin-bottom: 50px;
    gap: 0 12px;
}
#order-confirmation  #content #order-items .c-oc-header-title--center {
    text-align: center;
}

#order-confirmation  #content #order-items .c-oc-header-title--right {
    text-align: right;
}
#order-confirmation  #content .c-oc-header h3{
    font:500 18px/24px Outfit;
    text-align:left;
    text-transform:uppercase;
}

#order-confirmation  #content .c-oc-table .c-oc-line{
    font:500 18px/24px Outfit;
}
#order-confirmation  #content #order-items .c-oc-table {
    width: 100%;
}
#order-confirmation  #content #order-items .c-oc-line {
    display: grid;
    grid-template-columns: 100px 1fr 160px 120px 180px;
    align-items: start;
    padding: 16px 0;
    /* border-bottom: 1px solid #e5e5e5; */
    gap: 0 12px;
}
#order-confirmation  #content #order-items .c-oc-image {
    width: 100px;
    flex-shrink: 0;
}
#order-confirmation  #content #order-items .c-oc-image img {
    width: 100%;
    height: auto;
    display: block;
}
#order-confirmation  #content #order-items .c-oc-details {
    padding: 0 8px;
}
#order-confirmation  #content #order-items .c-oc-unit-price,
#order-confirmation  #content #order-items .c-oc-qty{
    text-align: center;
}
#order-confirmation #content #order-items .c-oc-total {
    text-align: right;
}
#order-confirmation #content .c-oc-price-row{
    display:none;
}

#order-confirmation #content .c-oc-hr{
    border-top: 1px solid #707070 !important;
    margin-bottom: 0;
}
#order-confirmation #content .c-oc-table .c-oc-totals-table td{
    padding:15px;
    font:500 18px/24px Outfit;
}
#order-confirmation #content .c-oc-totals-table {
  border-collapse: separate;
  border-spacing: 0 20px;
}
#order-confirmation #content .c-oc-total-row td {
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 12px;
  background:#FAFAFA;
}

#order-confirmation #content .c-oc-total-row td:first-child {
  border-left: 1px solid #707070;
  border-radius: 4px 0 0 4px;
}

#order-confirmation #content .c-oc-total-row td:last-child {
  border-right: 1px solid #707070;
  border-radius: 0 4px 4px 0;
  text-align: right;
}

#order-confirmation #content #order-details{
    padding:0;
    margin-top: 20px;
    width:100%;
}
#order-confirmation #content #order-details h3{
    font:500 18px/24px Outfit;
    color:#000;
    margin-bottom:25px;
}
#order-confirmation #content #order-details ul{
    font:400 18px/28px Outfit;
    color:#000;
}
#order-confirmation  #content-hook_payment_return{
    border-radius:var(--radius-primary);
    box-shadow: 0px 3px 6px #00000029;
    padding:35px 90px;
    background:#fff;
    margin-bottom:35px;
}
#order-confirmation  #content-hook_payment_return .card-block{
    padding:0;
}
#order-confirmation  #content-hook_payment_return p{
    font:400 18px/24px Outfit;
    margin-bottom:20px;
}
#order-confirmation  #content-hook_payment_return dl dd,
#order-confirmation  #content-hook_payment_return dl dt{
    border:1px solid #707070;
    border-radius:var(--radius-primary);
    background:#FAFAFA;
    font:500 18px/28px Outfit;
}
#order-confirmation  #content-hook_payment_return a{
    transition:0.5s all ease;
    color:var(--color-hover);
}
#order-confirmation  #content-hook_payment_return a:hover{
    color:color-mix(in srgb, var(--color-hover) 50%, white);;
}

@media(max-width:992px){
    #order-confirmation #content,
    #order-confirmation #content-hook_order_confirmation,
    #order-confirmation #content-hook_payment_return{
        padding:30px; 
    }
    #order-confirmation  #content .c-oc-table .c-oc-line,
    #order-confirmation #content .c-oc-table .c-oc-totals-table td{
        font:500 16px/20px Outfit;
    }
    #order-confirmation  #content #order-items .c-oc-header-title--desktop {
      display: none;
    }
    #order-confirmation  #content #order-items .c-oc-header {
      grid-template-columns: 1fr;
    }
    #order-confirmation  #content #order-items .c-oc-header{
      margin-bottom:30px;
    }
    #order-confirmation  #content #order-items .c-oc-line {
      display:flex;
      flex-direction: row;
      gap: 8px 12px;
      align-items: stretch;
    }

    #order-confirmation  #content #order-items .c-oc-image {
      width: 80px;
    }

    #order-confirmation  #content #order-items .c-oc-details {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    #order-confirmation  #content #order-items .c-oc-price-row {
      grid-column: 2;
      grid-row: 2;
      display: flex;
      gap: 24px;
      align-items: center;
    }
    #order-confirmation  #content #order-items .c-oc-unit-price,
    #order-confirmation  #content #order-items .c-oc-qty,
    #order-confirmation  #content #order-items .c-oc-total {
      display: none;
    }

    #order-confirmation  #content #order-items .c-oc-price-row .c-oc-unit-price,
    #order-confirmation  #content #order-items .c-oc-price-row .c-oc-qty,
    #order-confirmation  #content #order-items .c-oc-price-row .c-oc-total {
      display: block;
      text-align: left;
    }
    #order-confirmation #content #order-details h3,
    #order-confirmation #content #order-details ul,
    #order-confirmation  #content-hook_payment_return p,
    #order-confirmation  #content-hook_payment_return dl dd,
    #order-confirmation  #content-hook_payment_return dl dt{
        font-size:16px;
    }
    #order-confirmation #content #order-details .card-title{
        padding-bottom: 0px;
        border:none;
    }
}
@media(max-width:420px){
    #order-confirmation #content,
    #order-confirmation #content-hook_order_confirmation,
    #order-confirmation #content-hook_payment_return{
        padding:30px 15px; 
    }
}
/*END Confirmacion de pedido*/