/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/components/cart/styles.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.cart-component{
    padding: 2rem}

@media (min-width: 1024px){

    .cart-component{
        padding-top: 4rem;
        padding-bottom: 4rem;
        padding-left: 6rem;
        padding-right: 6rem}}

.cart-component .cart-header{

}

.cart-component .cart-header a{
    font-family: "Exo 2", sans-serif;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))}

.cart-component .cart-header a:hover{
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
    text-decoration-line: underline}

.cart-component .cart-header img{
    margin-bottom: 2rem}

.cart-component .cart-header h3{
    font-family: "Exo 2", sans-serif;
    margin-bottom: 2rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))}

.cart-component .cart-body{
    font-family: "Exo 2", sans-serif;
    display: flex;
    flex-direction: column}

@media (min-width: 1024px){

    .cart-component .cart-body{
        flex-direction: row}}

.cart-component .cart-body select{
    height: 56px;
    width: 100%;
    min-width: 218px;
    border-radius: 0.125rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px}

@media (min-width: 1024px){

    .cart-component .cart-body select{
        max-width: 264px}}

.cart-component .cart-footer{
    display: flex;
    width: 100%;
    justify-content: center}

@media (min-width: 1024px){

    .cart-component .cart-footer{
        justify-content: flex-start}}

.cart-component .cart-footer p{
    font-family: "Exo 2", sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))}

.cart-component .select-product-details{

}

.cart-component .select-product-details h3{
    font-family: "Exo 2", sans-serif;
    font-size: 20px;
    font-weight: 800;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))}

.cart-component .product-content{
    
}

.cart-component .product-content h5{
    font-family: "Exo 2", sans-serif;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1))}

.cart-component .product-content .product-items{
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    display: grid;
    width: 100%;
    gap: 0.5rem}

.cart-component .product-content .product-items li{
    font-family: "Exo 2", sans-serif;
    display: flex;
    list-style-type: none;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/components/cart/components/cartValue/styles.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.cart-value{
    font-family: "Exo 2", sans-serif;
}

.cart-value .cart-name{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.cart-value .cart-name p{
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(240 253 244 / var(--tw-text-opacity, 1));
}

.cart-value .initial-value{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left-width: 1px;
    border-right-width: 1px;
    padding: 0.5rem;
}

.cart-value .initial-value label{
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.cart-value .initial-value p{
    font-size: 20px;
    font-weight: 800;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.cart-value .year-discount{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
}

.cart-value .year-discount label{
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.cart-value .year-discount p{
    margin-top: -0.25rem;
    font-size: 36px;
    font-weight: 800;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.cart-value .coupon-discount{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
}

.cart-value .coupon-discount label{
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.cart-value .coupon-discount p{
    margin-top: -0.25rem;
    font-size: 36px;
    font-weight: 800;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.cart-value .final-value{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    padding: 0.5rem;
}

.cart-value .final-value label{
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.cart-value .final-value p{
    font-size: 36px;
    font-weight: 800;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.cart-value .final-value small{
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.cart-value .cart-coupon .coupon-input{
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.cart-value .cart-coupon .coupon-input input{
    width:calc(100% - 68px);
    height: 40px;
    border-start-start-radius: 15px;
    border-end-start-radius: 15px;
    border-width: 1px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    outline: 2px solid transparent;
    outline-offset: 2px}

.cart-value .cart-coupon .coupon-input button{
    width: 68px;
    border-start-end-radius: 15px;
    border-end-end-radius: 15px;
    --tw-bg-opacity: 1;
    background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(240 253 244 / var(--tw-text-opacity, 1));
}

.cart-value .cart-coupon .coupon-input button:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.cart-value .cart-cta{
    margin-top: 0.5rem;
}

.cart-value .cart-cta button{
    height: 42px;
    width: 100%;
    border-radius: 15px;
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(240 253 244 / var(--tw-text-opacity, 1));
}

.cart-value .cart-cta button:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.cart-value .cart-coupon .coupon-feedback{
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}