/* =========================
   FONDO GENERAL
========================= */
body {
}

.page_presentation_card .background_image_container .page_presentation_card_description {
    position: absolute;
    background-color: transparent;
    left: 55%;
    top: 33%;
    width: 37%;
    height: 64%;
    color: var(--color26);
    text-align: left;
}

.page_presentation_card .background_image_container h1 {
  position: relative;
  font-family: var(--font18);
  color: var(--color32);
  font-size: 4vw;
  margin: 0;
}

.page_presentation_card {
  aspect-ratio: 1920/672;
}
/* =========================
   CONTENEDOR PRINCIPAL
========================= */
.shipping_container {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 4vw;
    justify-content: center;
    gap: 3vw;
    font-family: var(--font9);
}

/* =========================
   BLOQUE ENVÍO
========================= */
.shipping_container .shipment_detail {
    width: 45%;
    background-color: var(--color28);
    border-radius: 1.2vw;
    box-shadow: var(--boxshadow);
    padding-bottom: 3vw;
    border: solid .25vw transparent;
}

/* =========================
   TITULO BLOQUE
========================= */
.shipping_container .shipment_detail .shipment_title {
    font-size: 2vw;
    height: 3vw;
    width: 90%;
    margin: 1.5vw auto;
    text-align: left;
    color: var(--color32);
    border-bottom: .15vw solid var(--color32);
}

/* =========================
   LABELS
========================= */
.shipping_container .shipment_detail .data_label {
    font-size: 1.4vw;
    width: 90%;
    margin: 1.4vw auto .5vw 5%;
    color: var(--color32);
    font-weight: bold;
}

.shipping_container .shipment_detail .data_label span {
    color: red;
}

/* =========================
   INPUTS
========================= */
.shipping_container .shipment_detail .data_text,
.shipping_container .shipment_detail .data_select,
.shipping_container .shipment_detail #calendar {
    width: 85%;
    margin: 0 auto;
    margin-left: 5%;
    height: 3.2vw;
    padding: .6vw 1vw;
    border-radius: .6vw;
    border: solid .15vw var(--color32);
    background-color: var(--color28);
    font-size: 1.4vw;
    color: var(--color26);
    background-color: var(--color3);
}

.shipping_container .shipment_detail .data_text:focus,
.shipping_container .shipment_detail .data_select:focus,
.shipping_container .shipment_detail #calendar:focus {
    outline: none;
    box-shadow: 0 0 .6vw rgba(0,0,0,.15);
}

/* =========================
   TEXTAREA
========================= */
.shipping_container .shipment_detail .data_area {
    width: 85%;
    margin: 0 auto;
    margin-left: 5%;
    min-height: 5vw;
    padding: 1vw;
    border-radius: .6vw;
    border: solid .15vw var(--color32);
    background-color: var(--color3);
    font-size: 1.4vw;
}

.shipping_container .shipment_detail .data_area:focus {
    outline: none;
    box-shadow: 0 0 .6vw rgba(0,0,0,.15);
}

/* =========================
   MAPA
========================= */
.shipping_container .shipment_detail .data_map {
    width: 90%;
    height: 20vw;
    margin: 1.5vw auto;
    border-radius: .8vw;
    overflow: hidden;
    border: solid .15vw var(--color32);
}

/* =========================
   COLUMNA PAGO
========================= */
.shipping_container .payment {
    width: 25%;
}

/* =========================
   BOLETA
========================= */
.shipping_container .payment .ticket_detail {
    background-color: var(--color28);
    border-radius: 1.2vw;
    box-shadow: var(--boxshadow);
    padding-bottom: 3vw;
    border: solid .25vw transparent;
    margin-bottom: 1vw;
}

/* =========================
   TITULO BOLETA
========================= */
.shipping_container .payment .ticket_detail .shipment_title {
    font-size: 2vw;
    width: 90%;
    margin: 1.5vw auto;
    text-align: left;
    color: var(--color32);
    border-bottom: .15vw solid var(--color32);
}

/* =========================
   PRODUCTOS
========================= */
.shipping_container .payment .ticket_detail .shipment_products .shipment_item .item_title {
  position: relative;
  width: 40%;
  overflow-wrap: break-word;
  margin-left: 3%;
}

.shipping_container .payment .ticket_detail .shipment_type .shipment_type_title {
  width: 35%;
  margin-right: 10%;
  position: relative;
  top: 0;
  left: 3%;
}
.shipping_container .payment .ticket_detail .shipment_type {
  display: inline-flex;
  position: relative;
  width: 90%;
  margin-left: 5%;
  min-height: 3vw;
  height: fit-content;
  font-family: var(--font9);
  font-size: 1.5vw;
  color: var(--color32)
}

.shipping_container .payment .ticket_detail .shipment_products .shipment_item .item_quantity {
  position: relative;
  width: 10%;
  margin-right: 10%;
  margin-left: 2%;
  overflow-wrap: break-word;
}

.shipping_container .payment .ticket_detail .shipment_products .shipment_item .item_price {
  position: relative;
  width: 40%;
  overflow-wrap: break-word;
}

.shipping_container .payment .ticket_detail .shipment_products .shipment_item {
    position: relative;
    width: 90%;
    margin-left: 5%;
    min-height: 2vw;
    display: inline-flex;
    border: solid;
    border-width: 0 0vw 0.1vw 0;
    border-color: var(--color32);
    align-items: center;
    font-family: var(--font9);
    font-size: 1.4vw;
}

.shipping_container .payment .ticket_detail .data_label {
    font-size: 1.5vw;
    font-family: var(--font9);
    position: relative;
    margin-left: 5%;
    color: black;
    width: 90%;
}
.shipping_container .payment .ticket_detail .data_text {
    width: 89%;
    position: relative;
    margin-left: 5%;
    height: 3vw;
    border: solid;
    border-width: 0.1vw;
    font-family: var(--font9);
    font-size: 2vw;
    color: var(--color26);
    border-radius: .7vw;
    margin-bottom: 1vw;
}

.shipping_container .payment .ticket_detail .terms_information {
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-top: 1vw;
    margin-bottom: 1vw;
    text-align: left;
    font-family: var(--font9);
    font-size: 1.5vw;
}   


.shipping_container .payment .ticket_detail .shipment_type .shipment_type_selector{
    width: 55%;
    position: relative;
    display: block;
}

.shipping_container .payment .ticket_detail .shipment_type input {
    width: 2vw;
    aspect-ratio: 1/1;
}

.shipping_container .payment .ticket_detail .shipment_type .shipment_type_selector label {
    width: 100%;
    display: flex;
    margin-bottom: 1.5vw;
}

.shipping_container .payment .ticket_detail .data_label span {
    color: red;
}
/* =========================
   TOTAL
========================= */
.shipping_container .payment .ticket_detail .shipment_total {
    width: 90%;
    margin: 2vw auto 0 auto;
    font-size: 1.8vw;
    font-weight: 500;
    color: var(--color32);
    border-top: .2vw solid var(--color32);
    padding-top: 1vw;
}

.shipping_container .payment .ticket_detail .total_price_big {
    background-color: var(--color32);
    color: var(--color3);
    text-align: center;
    font-size: 2vw;
    border: solid .2vw transparent;
    border-radius: .7vw;
    padding: 1vw;
    font-family: var(--font9);
}

.shipping_container .payment .ticket_detail .condition_information {
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-top:2vw;
    font-family: var(--font9);
    font-size: 1.5vw;
    margin-bottom: 2vw;
}

.shipping_container .payment .ticket_detail .condition_information input{
    width: 1.5vw;
    aspect-ratio: 1/1;
}

/* =========================
   BOTONES
========================= */
.shipping_container .payment .ticket_detail .discount_button,
.shipping_container .payment .ticket_detail .payment_button {
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 1vw;
    padding: 1vw;
    border-radius: .8vw;
    font-size: 1.6vw;
    border: solid .2vw var(--color32);
    background-color: var(--color32);
    color: var(--color28);
    cursor: pointer;
    letter-spacing: .15em;
    transition: background-color .3s ease, transform .2s ease, box-shadow .2s ease;
}

.shipping_container .payment .ticket_detail .discount_button:hover,
.shipping_container .payment .ticket_detail .payment_button:hover {
    background-color: var(--color32);
    color: var(--color28);
    transform: translateY(-.15vw);
    box-shadow: 0 .4vw 1vw rgba(0,0,0,.2);
}

/* ========================= DESCUENTO ========================= */
.shipping_container .payment .ticket_detail .discount_status {
    position: relative;
    margin-left: 5%;
    margin-bottom: 1vw;
    font-size: 1.6vw;
    color: green;
    font-weight: 500; 
}

/* =========================
   RESPONSIVE
========================= */
@media screen and (max-width: 62.438em) {

    .shipping_container {
        flex-direction: column;
        width: 90%;
        margin: auto;
    }

    .shipping_container .shipment_detail,
    .shipping_container .payment {
        width: 100%;
    }

    h1 {
        font-size: 7vw;
    }

    .shipping_container .shipment_detail .shipment_title,
    .shipping_container .payment .ticket_detail .shipment_title {
        font-size: 6vw;
    }

    .shipping_container .shipment_detail .data_label {
        font-size: 4.5vw;
    }

    .shipping_container .shipment_detail .data_text,
    .shipping_container .shipment_detail .data_select,
    .shipping_container .shipment_detail #calendar {
        height: 7.5vw;
        font-size: 4.5vw;
    }

    .shipping_container .payment .ticket_detail .payment_button,
    .shipping_container .payment .ticket_detail .discount_button {
        font-size: 6vw;
    }
}