@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root {
    --color1: #680907;
    --color2: #070600;
    --color3: #F2F2F2;
    --color4: #80011f;
    --gradient1: linear-gradient(90deg, rgba(104, 9, 7, 1) 30%, rgba(128, 1, 31, 1) 100%);
    --title-font: "Concert One", sans-serif;
    --text-font: "Roboto Flex", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--text-font);
}

body {
    background: var(--color3)
}

.main:not(.modal__content) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0px 20px;
}

.content_box {
    max-width: 500px;
    min-width: 70vw;
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 3px #00000021;
}

.reset_button {
    margin-bottom: 40px;
    a {
        text-decoration: none;
        color: var(--color4);
        font-weight: bold;
        letter-spacing: 1px;
        font-style: italic;
    }
}

.shipping_form {
    margin-bottom: 20px;

    h3 {
        margin-bottom: 20px;
        color: var(--color4);
        font-family: var(--title-font)
    }

    input:not(input[type=checkbox]) {
        border: 1px solid #e0e0e0;

        &:focus {
            color: var(--bs-body-color);
            background-color: var(--bs-body-bg);
            border-color: var(--color1);
            outline: 0;
            box-shadow: 0 0 0 1px var(--color4);
        }
    }

    input[type=checkbox] {
        color: var(--color4);
    }

    .error_field {
        color: var(--color1);
    }

    label {
        font-weight: bold;
    }
}

.required {
    color: var(--color1);
}

.shipping_form_buttons {
    text-align: right;
    width: 100%;

    button {
        min-width: 100px;
        font-weight: bold;
        text-transform: uppercase;
        background: var(--gradient1);
        border: 1px solid var(--color4);

        &#previous {
            background: none;
            color: var(--color1);

        }

        &:hover {
            border-color: var(--color1);
        }
    }
}

#myModal {
    background: #0000008c;

    .modal-title {
        font-family: var(--title-font);
        text-transform: uppercase;
        color: var(--color1)
    }
}

.address_option {
    display: flex;
    flex-direction: column;

    border: 2px solid #e0e0e0;
    padding: 20px;
    border-radius: 10px;

    margin-bottom: 20px;

    min-width: 300px;

    transition: border 0.3s ease-in-out;

    &:has(.radio input:checked){
        border: 2px solid var(--color1);
    }
    
    .title {
        font-weight: bold;
        font-family: var(--title-font);
        font-size: 18px;
        margin-bottom: 20px;
        /* color: var(--color1); */
    }

    .content {
        display: flex;
        
        .radio {
            width: 30px;
            input {
                accent-color: var(--color1)
            }
        }

        .details {
            p {
                margin-bottom: 0px;
            }

            span {
                display: inline-block;
                font-weight: bold;
                width: 100px;
            }
        }
    }
}

.hidden {
    display: none;
}

.address_error {
    p {
        margin-bottom: 0px;
        font-style: italic;
        font-weight: bold;
    }
    .address_details {
        margin-top: 20px;
    }
    .error_details {
        margin-top: 20px;
        p {
            color: var(--color4);
        }
    }
}

.parcel {
    .add_parcel_btn {
        border: 1px solid var(--color4);
        color: var(--color4);
        font-weight: bold;

        display: flex;
        align-items: center;

        text-transform: uppercase;
        margin-top: 20px;

        i {
            margin-right: 10px;
        }
    }

    .parcel_item {
        position: relative;
        margin-bottom: 20px;
    }

    .parcel_item i {
        position: absolute;
        top: 0;
        right: 15px;
    }

    .delete_parcel {
        text-decoration: none;
        color: #b9b9b9;
        position: absolute;
        right: 0;

        transition: 0.3s color ease-in-out;

        &:hover {
            color: var(--color4);
        }
    }
}

.input-group {
    position: relative;

    .error_field {
        position: absolute;
        bottom: -25px;
        margin-bottom: 0px;
        color: var(--color1);
    }

    &:has(.error_field:not(.hidden)){
        margin-bottom: 45px !important;
    }
}

.services_list {
    p {
        margin-bottom: 0px;
    }

    .col-1:has(input[type=radio]){
        display: flex;
        align-items: start;
        justify-content: center;
        padding-top: 5px;
    }

    input[type=radio] {
        accent-color: var(--color4);
    }
}

.invoice {
    .address_field {
        .address_title {
            font-weight: bold;
            font-style: italic;
        }
        .address_details {
            p {
                margin-bottom: 0px;
            }
        }
    }
}

.shipping_invoice {
    .invoice_header {
        text-align: right;

        .logo {
            display: grid;
            place-items: center;

            img {
                width: 300px;
            }
        }

        .header {

            h3 {
                font-size: 60px;
                font-weight: bold;
                font-family: var(--title-font);
                color: var(--color4);
            }

            p {
                margin-bottom: 0px;
                font-size: 28px;
            }

            p.company_name {
                font-weight: bold;
            }
        }

    }

    .invoice_information {

        background-color: var(--color3);
        border-radius: 5px;
        padding: 20px 10px;

        p {
            margin-bottom: 0px;
        }

        h3.paid {
            color: green;
            font-family: var(--text-font);
            font-weight: bold;
            letter-spacing: 2px;
        }

        h3.approved {
            color: blueviolet;
            font-family: var(--text-font);
            font-weight: bold;
            letter-spacing: 2px;
        }

        .details {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .due {
            display: flex;
            flex-direction: column;
            font-weight: bold;
            font-size: 30px;
            justify-content: center;
        }
    }

    .customer_information {

        padding: 20px 10px;
        
        p {
            margin-bottom: 0px;
        }

        .details p:nth-of-type(1) {
            font-weight: bold;
        }
    }

    .bill_details {
        padding: 20px 10px;

        p {
            margin-bottom: 0px;
        }

        .boxes {
            span {
                color: #a2a2a2;
                font-style: italic;
            }
        }

        .details p:nth-of-type(1), .boxes p:nth-of-type(1) {
            font-weight: bold;
        }
    }

    .price_details {
        padding: 20px 10px;
        font-weight: bold;
        font-size: 20px;
    }

    .promo_code_field {
        padding: 0px 10px;
        margin-bottom: 10px;

        span {
            display: flex;
            gap: 10px;

            button {
                border: none;
                background: transparent;
                font-weight: bold;
                color: var(--color1)
            }
        }
    }

    .paypal_link {
        img {
            width: 300px;
        }
    }

    .net14_btn {
        text-decoration: none;
        background: #319fff;
        width: 285px;
        border-radius: 100px;
        height: 50px;
        margin-left: 10px;
        color: var(--color3);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        text-transform: uppercase;
        box-shadow: 0.1px 0.3px 1px #000000f5;
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 900px) {
    .invoice_header {
        .header {

            h3 {
                font-size: 40px;
                font-weight: bold;
                font-family: var(--title-font);
                color: var(--color4);
                text-align: center;
                margin-bottom: 20px;
            }
    
            p {
                margin-bottom: 0px;
                font-size: 18px !important;
                text-align: left;
            }
    
            p.company_name {
                font-weight: bold;
            }
        }
    }
    
}

.nice_checkbox {
    .checkbox-wrapper-46 input[type="checkbox"] {
        display: none;
        visibility: hidden;
      }
      
      .checkbox-wrapper-46 .cbx {
        margin: auto;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
      }
      .checkbox-wrapper-46 .cbx span {
        display: inline-block;
        vertical-align: middle;
        transform: translate3d(0, 0, 0);
      }
      .checkbox-wrapper-46 .cbx span:first-child {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        transform: scale(1);
        vertical-align: middle;
        border: 1px solid #9098a9;
        transition: all 0.2s ease;
      }
      .checkbox-wrapper-46 .cbx span:first-child svg {
        position: absolute;
        top: 3px;
        left: 2px;
        fill: none;
        stroke: #ffffff;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 16px;
        stroke-dashoffset: 16px;
        transition: all 0.3s ease;
        transition-delay: 0.1s;
        transform: translate3d(0, 0, 0);
      }
      .checkbox-wrapper-46 .cbx span:first-child:before {
        content: "";
        width: 100%;
        height: 100%;
        background: var(--color4);
        display: block;
        transform: scale(0);
        opacity: 1;
        border-radius: 50%;
      }
      .checkbox-wrapper-46 .cbx span:last-child {
        padding-left: 8px;
      }
      .checkbox-wrapper-46 .cbx:hover span:first-child {
        border-color: var(--color4);
      }
      
      .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
        background: var(--color4);
        border-color: var(--color4);
        animation: wave-46 0.4s ease;
      }
      .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
        stroke-dashoffset: 0;
      }
      .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before {
        transform: scale(3.5);
        opacity: 0;
        transition: all 0.6s ease;
      }
      
      @keyframes wave-46 {
        50% {
          transform: scale(0.9);
        }
      }

}

.no_courier {
    margin-bottom: 0px;
    color: var(--color4);
}

.invalid_couriers {
    p:first-child {
        color: red;
    }

    p:not(:first-child) {
        text-indent: 5ch;
    }
}

.form-label {
    font-weight: bold;
}

.ts-control {
    border: none;
    border-radius: var(--bs-border-radius);
    width: 100%;

    .item, input {
        color: var(--bs-secondary-color);
        font-size: 1rem;
        font-weight: 400;

        font-family: var(--text-font);
    }
}

.ts-wrapper {
    padding: 0px;
    border-radius: var(--bs-border-radius);
}

.additional_data_field {
    max-width: 500px;
    min-width: 70vw;
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 3px #00000021;
    
    h3 {
        font-family: var(--title-font);
        color: var(--color1);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .additional_data {
        position: relative;

        i {
            position: absolute;
            top: 0;
            right: 10px;
            cursor: pointer;
            transition: 0.2s all ease-in-out;
            color: #aaa;
            
            &:hover {
                color: var(--color1)
            }
        }
    }

    .additional_buttons {
        button {
            padding: 3px 20px;
            background: var(--color4);
            color: white;
            border-radius: 5px;
            font-weight: bold;
            border: 2px solid var(--color4);
            transition: 0.2s all ease-in-out;
            user-select: none;
            
            &:hover {
                background: var(--color3);
                color: var(--color4);
            }
        }
    }
}

.alert_box {
    height: 100px;
    max-width: 500px;
    min-width: 70vw;
    width: 100%;
    background: var(--color4);
    padding: 20px;
    border-radius: 10px;
    margin-top: 50px;
    box-shadow: 0px 0px 3px #00000021;
    color: var(--color3);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    
    p {
        text-align: center;
        margin-bottom: 0px;
    }

    i {
        width: 50px;
    }
}

.ts-wrapper.single .ts-control {
    z-index: 0;
}

.customs_info {
    .error_field {
        color: var(--color1);
        div:has(.error_field:not(.hidden)) {
            margin-bottom: 0px;
        }
    }
}

.paypal_error {
    color: var(--color1);
    font-weight: 400;
    font-style: italic;
}

.predefined_package_note {
    font-weight: lighter;
    font-style: italic;
    margin: 0;
}

.discounted {
    text-decoration-line: line-through;
    color: #68686899;
}

.discount_badge {
    border: 1px solid var(--color4);
    border-radius: 5px;
    margin-left: 10px;
    color: var(--color1);
    height: 40px;
    display: flex;

    div { padding: 5px 10px; }
    
    div:nth-of-type(1) {
        border-right: 1px solid #68686899;
        background-color: var(--color1);
        color: var(--color3);
    }
}

.discounted-col {

    p {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        gap: 10px;
    }
    .promo_amount {
        font-size: 30px;
    }
}