/* ------------------------------------------- Header ------------------------------------- */
.checkout-header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}

.checkout-header-div {
    height: 100%;
    width: 1260px;
    display: flex;
    justify-content: space-between;
    margin: 0 35px 0 35px;
}

.checkout-header-amazon-img {
    height: 100%;
    display: flex;
    align-items: end;
}

.checkout-header-amazon-img .large{
    width: 112px;
    height: 34px;
}

.checkout-header-amazon-img .small{
    width: 40px;
    height: 40px;
    display: none;
}

.checkout-header-text {
    height: 100%;
    display: flex;
    align-items: center;
}

.checkout-header-text p {
    color: var(--font-color);
    font-weight: 500;
    font-size: 28px;
}

.checkout-header-text span {
    font-size: 26px;
    color: #007185;
}

.checkout-header-lock {
    height: 100%;
    display: flex;
    align-items: center;
}

.checkout-header-lock img {
    width: 18px;
    height: 25px;
}


/* ------------------------------------------- Main ------------------------------------- */
.checkout-main {
    width: 100%;
    display: flex;
    justify-content: center;
}

.checkout-main-div {
    width: 1260px;
    margin: 0 35px 0 35px;
}

.checkout-heading {
    color: var(--font-color);
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
}

.checkout-content-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.checkout-products {
    flex: 1;
    max-width: 900px;
    height: 100px;
}

.checkout-products .product {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 20px 15px;
    margin-bottom: 15px;
}

.checkout-products .product .delivery {
    color: green;
    font-weight: bold;
    font-size: 21px;
    margin-bottom: 25px;
}

.checkout-products .product .details {
    width: 100%;
    display: flex;
}

.checkout-products .product .product-details {
    display: flex;
    margin-right: 10px;
}

.product-details img {
    width: 100px;
    height: 125px;
    margin-right: 30px;
}

.product-details .name {
    color: var(--font-color);
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
}

.product-details .price {
    color: #b12704;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
}

.product-details .variation {
    color: var(--font-color);
    font-size: 18px;
    margin-bottom: 3px;
}

.product-details .variation a {
    cursor: pointer;
    color: #098ad5;
    margin-left: 8px;
}

.product-details .variation a:hover {
    color: #c56301;
}

.checkout-products .product .COD-options {
    flex: 1;
    display: flex;
    justify-content: center;
}

.checkout-products .COD-options div {
    min-width: 215px; 
}

.checkout-products .COD-options .heading {
    color: var(--font-color);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.COD-options .option {
    display: flex;
    margin-bottom: 15px;
}

.COD-options .option input {
    width: 25px;
    height: 45px;
    margin-right: 5px
}

.COD-options .option .date {
    color: green;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}

.COD-options .option .shipping-fee {
    color: #807878;
}


.checkout-total {
    width: 312px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-left: 50px;
    padding: 20px;
}

.checkout-total .checkout-total-heading {
    color: var(--font-color);
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.checkout-total .checkout-price {
    color: var(--font-color);
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.checkout-total .check-price-total {
    color: #b12714;
    font-weight: bold;
    font-size: 20px;
    margin: 20px 0 20px 0;
}

.checkout-total button, .checkout-products .empty-button {
    width: 100%;
    border: none;
    border-radius: 8px;
    background-color: #ffd814;
    padding: 15px 0;
    margin-top: 20px;
}

.checkout-total button:hover, .checkout-products .empty-button:hover  {
    background-color: #f5cb00;
}

.checkout-products .empty-button {
    width: auto;
    font-size: 18px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--font-color);
}

.checkout-products .empty {
    font-size: 18px;
    margin-bottom: 20px;
}

.empty-div {
    margin-bottom: 50px;
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 10px 0;
}

.bar {
    width: 55px;
    margin-left: auto;
}