@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;700;800&display=swap');

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body{

    font-size: 16px;

    font-weight: 300;

    line-height: 30px;

    color: var( --text-color);

    font-family: 'Inter', sans-serif;

}

a,

button,

input{

	outline: none;

	-webkit-transition: all 0.4s ease-in-out;

	-moz-transition: all 0.4s ease-in-out;

	-ms-transition: all 0.4s ease-in-out;

}

:root{

    --primary--color: #000;

    --text-color: #737373;

    --accent:#ea8d43;

}

.checkout-con{

    padding-top: 100px;

    padding-bottom: 100px;

}

.checkout-title h2 {

    position: relative;

    padding-left: 12px;

    margin-bottom: 0;

}

.checkout-title{

    margin-bottom: 38px;

}

.checkout-title h2:after{

    top: 5px;

    left: 0;

    content: "";

    width: 5px;

    height: 22px;

    position: absolute;

    background: var(--accent);

}

.domain-generic-title{

    background: #ced5e0;

}

.domain-generic-title h3{

    margin-bottom: 0;

}

.domain-generic-title {

    padding: 23px 30px;

}

.checkout-box {

    gap: 29px;

    display: grid;

    grid-template-columns: 65.8% 31.6%;

}

[type="radio"]:checked,

[type="radio"]:not(:checked) {

    position: absolute;

    left: -9999px;

}

[type="radio"]:checked + label,

[type="radio"]:not(:checked) + label

{

    position: relative;

    padding-left: 23px;

    cursor: pointer;

    line-height: 16px;

    display: inline-block;

    color: var(--text-color);

    font-size: 14px;

}

[type="radio"]:checked + label:before,

[type="radio"]:not(:checked) + label:before {

    content: '';

    position: absolute;

    left: 0;

    top: 1px;

    width: 14px;

    height: 14px;

    border: 1px solid var(--accent);

    border-radius: 100%;

    background: #fff;

}

[type="radio"]:checked + label:after,

[type="radio"]:not(:checked) + label:after {

    content: '';

    width: 8px;

    height: 8px;

    background: var(--accent);

    position: absolute;

    top: 4px;

    left: 3px;

    border-radius: 100%;

    -webkit-transition: all 0.2s ease;

    transition: all 0.2s ease;

}

[type="radio"]:not(:checked) + label:after {

    opacity: 0;

    -webkit-transform: scale(0);

    transform: scale(0);

}

[type="radio"]:checked + label:after {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1);

}

.domain-register-box {

    background: #fff;

}

.domain-register-con{

    box-shadow: 0 0 100px rgb(0 0 0 / 5%);

}

.checkout-generic-box{

    padding: 30px 30px;

}

.checkout-con{

    background: #f0f3f8;

}

.domain-register-radio ul li label{

    margin-bottom: 0;

}

.domain-register-radio ul li{

    margin-bottom: 10px;

}

.domain-register-radio ul li:last-child{

    margin-bottom: 0;

}

.domain-register-radio ul{

    margin-bottom: 40px;

}

.domain-input span{

    padding-right: 17px;

    display: inline-block;

}

.domain-input input {

    font-size: 16px;

    line-height: 16px;

    color: var(--text-color);

    border: 1px solid #ddd;

    padding: 9px 8px 13px;

    width: 350px;

    margin-right: 12px;

}

.domain-input input:focus,

.domain-input select:focus,

.order-inner-box select:focus,

.domin-result-list ul li select:focus,

.chosse-plan-box select:focus {

    border-color: var(--accent);
	outline: 1px solid var(--accent) !important;

}

.domain-input input::placeholder{

    font-size: 16px;

    line-height: 16px;

    color: var(--text-color);

}

.domain-input {

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}

.domain-input select {

    font-size: 16px;

    line-height: 16px;

    color: var(--text-color);

    border: 1px solid #ddd;

    padding: 13px 18px;
	text-indent: 0;
    width: 175px;

    background: url(../images/angle-down.png) no-repeat 89% 50%;

    appearance: none;

}

.domain-btn button{

    border: none;

    color: #fff;

    font-size: 14px;

    line-height: 14px;

    padding: 15px 27px;

    margin-left: 59px;

    cursor: pointer;

    background: var(--accent);

}

.domain-btn button:hover,

.promo-input button:hover,

.order-btn-con .order-btn:hover{

    color: var(--accent);

    background: transparent;

    box-shadow: inset 0 0 0px 1px rgb(234 141 67);

}

.domin-result-box {

    border: 1px solid #ddd;

}

.domin-result-box h4 {

    margin-bottom: 0;

    background: #d0e7dc;

    padding: 13px 15px;

}

.domin-result-list {

    padding: 30px 30px;

}
.alert-info {
    padding: 10px 50px;
}

.domin-result-list ul {

    display: flex;

    gap: 34px;

    /* align-items: end; */

}
.login-client-info span {
    display: block;
    margin-bottom: 20px;
}
.login-client-info h5 {
    font-size: 16px;
    color: var(--primary--color);
    margin-bottom: 10px;
}

.domin-result-list ul li span{

    font-size: 16px;

    font-weight: 700;

    line-height: 16px;

    margin-bottom: 12px;

    color: var(--primary--color);

    font-family: 'Plus Jakarta Sans', sans-serif;

}

.domin-result-list ul li small {

    font-size: 14px;

    line-height: 33px;

    display: block;

}

.domin-result-list ul li:nth-child(2) small{

    color: #119f5b;

}

.domin-result-list ul li select {
    font-size: 14px;
    line-height: 14px;
    color: var(--text-color);
    border: 1px solid #ddd;
    padding: 8px 18px 9px;
    width: 175px;
    text-indent: 0;
    background: url(../images/angle-down.png) no-repeat 88% 50%;
    appearance: none;
}

.domin-result-list ul li select:focus,

.order-inner-box select:focus,

.chosse-plan-box select:focus{

    outline: none;

}

.add-cart-btn a {

    font-size: 14px;

    line-height: 14px;

    padding: 15px 27px;

    background: #e8e8e8;

    display: inline-block;

    text-decoration: none;

    color: var(--primary--color);

}

.add-cart-btn a:hover,.order-btn-con a:hover{

    color: #fff;

    background: var(--primary--color);

}

.login-link{

    font-weight: 700;

    margin-bottom: 25px;

    color: var(--primary--color);

}

.login-link a{

    color: var(--accent);

}

.add-cart-btn{

    margin-left: 10px;

}

.domain-input-con{

    margin-bottom: 30px;

}

.domain-service-box {

    background: #fff;

    padding: 30px;

    display: grid;

    gap: 27px;

    grid-template-columns: 48% 48%;

}

.domain-service-con,.payment-method-box{

    box-shadow: 0 0 100px rgb(0 0 0 / 5%);

}

.domain-service-item h4{

    margin-bottom: 20px;

}

.domain-service-item-box {

    padding: 20px 20px;

    border: 1px solid #ddd;

}

.domain-service-title {

    display: flex;

    gap: 16px;

    align-items: center;

    margin-bottom: 14px;

    position: relative;

}

.plus-icon{

    top: 0;

    right: 0;

    position: absolute;

}

.plus-icon a i{

    width: 34px;

    height: 34px;

    font-size: 18px;

    color: #fff;

    border-radius: 50%;

    background: #ced5e0;

    display: flex;

    align-items: center;

    justify-content: center;

}

.plus-icon a{

    text-align: center;    

    text-decoration: none;

}

.domain-service-content span {

    font-size: 14px;

    line-height: 17px;

    display: inline-block;

}

.domain-service-content span strong{

    color: var(--primary--color);

}

.domain-service-item-box p{

    font-size: 14px;

    line-height: 22px;

    margin-bottom: 0;

}

.payment-method-list{

    background: #FFF;

    padding: 30px 30px;

}

.payment-method-list ul{

    gap: 10px;

    display: flex;

}

.payment-method-list [type="radio"]:checked + label:before,

.payment-method-list [type="radio"]:not(:checked) + label:before{

    width: 22px;

    height: 22px;

    top: -2px;

    border: 1px solid #ddd;

}

.payment-method-list [type="radio"]:checked + label:after,

.payment-method-list [type="radio"]:not(:checked) + label:after {

    content: '\f00c';

    background: transparent;

    position: absolute;

    top: 2px;

    left: 4px;

    border-radius: 100%;

    transition: all 0.2s ease;

    font-family: "Font Awesome 5 free";

    font-weight: 700;

    color: #fff;

    font-size: 14px;

}



.payment-method-list [type="radio"]:checked + label:before{

    background: var(--accent);

    border-color: var(--accent);

}

.payment-method-list [type="radio"]:checked + label,

.payment-method-list [type="radio"]:not(:checked) + label {

    padding-left: 29px;

}

  

  .form-group input {

    padding: 0;

    height: initial;

    width: initial;

    margin-bottom: 0;

    display: none;

    cursor: pointer;

  }

  

  .notes-checkbox .form-group label {

    position: relative;

    cursor: pointer;

    width: 100%;

    font-size: 14px;

    line-height: 20px;
    white-space: pre-line;

}
.login-form .login-info {
    margin-top: 20px;
	flex-direction: column;
}
.login-client-info {
    display: grid;
    grid-template-columns: 50% 50%;
}
.notes-checkbox .form-group label span{

    position: absolute;

    width: 100%;

    display: inline-block;

}

.notes-checkbox .form-group label span strong{

    font-weight: 700;

    color: var(--primary--color);

}

.notes-checkbox .form-group label {

    position: relative;

    cursor: pointer;

    width: 100%;

    font-size: 14px;

    line-height: 20px;

}

.notes-checkbox .form-group label:before {

    content: '';

    -webkit-appearance: none;

    background-color: transparent;

    border: 1px solid var(--accent);

    padding: 8px;

    display: inline-block;

    position: relative;

    vertical-align: middle;

    cursor: pointer;

    margin-right: 12px;

    margin-top: 4px;

}

  

  .notes-checkbox .form-group input:checked + label:after {

    content: '';

    display: block;

    position: absolute;

    top: 6px;

    left: 8px;

    width: 6px;

    height: 11px;

    border: solid var(--accent);

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

  }

  .notes-checkbox {

    background: #FFF;

    padding: 22px 30px 38px;

}

.domain-register-con,.domain-service-con,.payment-method-box,.chosse-plan-con,.information-con {

    margin-bottom: 38px;

    box-shadow: 0 0 100px rgb(0 0 0 / 5%);

}

.notes-checkbox-box{

    box-shadow: 0 0 100px rgb(0 0 0 / 5%);

}

.chosse-plan-box{

    padding: 30px 30px;

    background: #fff;

}

.information-con{

    background: #fff;

}

.chosse-plan-box select {

    font-size: 16px;

    line-height: 16px;

    color: var(--primary--color);

    border: 1px solid #ddd;

    padding: 15px 18px;
    text-indent: 0;
    width: 100%;

    box-shadow: 20px 20px 30px rgb(0 0 0 / 10%);

    margin-bottom: 30px;

    background:url(../images/angle-down.png) no-repeat 97% 50%;

    appearance: none;

}
.checkout-con .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    margin: 0;
}
.checkout-con .btn {
    height: 46px;
    line-height: 18px;
}
.checkout-con .btn.logout{
	width: 120px;
}
.login-client-info {
    display: grid;
    grid-template-columns: 50% 50%;
}
.checkout-con button.btn{
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-con button.google-login.btn-light:hover{
	background:#007bff;
	color: #fff;
}
.login-info button.btn.btn-primary{
	width: 130px;
}
.billing-radio ul {

    border: 1px solid #ddd;

}

.billing-radio ul li{

    border-bottom: 1px solid #ddd;;

}

.billing-radio ul li label{

    margin-bottom: 0;

}

.billing-radio [type="radio"]:checked + label:before,

.billing-radio [type="radio"]:not(:checked) + label:before {

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

}

.billing-radio ul li label {

    width: 100%;

    padding: 10px 33px !important;

}

.billing-radio [type="radio"]:checked + label:after,

.billing-radio [type="radio"]:not(:checked) + label:after{

    left: 13px;

    top: 50%;

    transform: translateY(-50%);

}

.billing-radio [type="radio"]:checked + label{

    background: rgb(234 141 67 / 10%);

}

.billing-radio ul li label{

    font-size: 14px;

    line-height: 14px;

}

.billing-radio ul li label strong{

    font-weight: 700;

    color: var(--primary--color);

}

.billing-radio ul li label small{

    font-size: 14px;

    line-height: 14px;

    color: var(--accent);

}

.billing-radio ul li:last-child{

    border-bottom: none;

}

.billing-title h4{

    margin-bottom: 20px;

}

.information-box{

    background: #fff;

    padding: 30px 30px;

}

.order-box{

    padding: 20px 20px;

    background: #fff;

}
.checkout-con .domin-result-list ul li:first-child{
    width:127x;
}
.checkout-con .domin-result-list ul li:last-child{
    display: flex;
    align-items: end;
}
.checkout-con .domin-result-list ul li small{
    word-break: break-all;
    line-height: normal;
}
.checkout-con .order-con{
    top: 50px;
    position: sticky;
    box-shadow: 0 0 100px rgb(0 0 0 / 5%);

}

.order-inner-title{

    display: flex;

    align-items: center;

    margin-bottom: 16px;

}

.order-inner-box {

    padding: 20px;

    position: relative;

    margin-bottom: 20px;

    border: 1px solid #ddd;    

}

.order-inner-title h4 {
    margin-bottom: 0;
    font-size: 20px !important;
}

.order-inner-title a{

    font-size: 14px;

    line-height: 14px;

    display: inline-block;

    text-decoration: none;

    margin-left: 5px;

    color: var(--text-color);

}

.order-inner-box ul li{

    font-size: 14px;

    line-height: 14px;

    margin-bottom: 14px;

}

.order-inner-box ul li:last-child{

    margin-bottom: 0;

}

.order-inner-box ul{

    margin-bottom: 26px;

}

.shared-price{

    font-size: 14px;

    line-height: 14px;

}

.shared-price strong{

    font-weight: 700;

    font-size: 16px;

    line-height: 16px;

    color: var(--primary--color);

}

.close-btn {

    top: 10px;

    right: 10px;

    position: absolute;

}

.close-btn a{

    color: var(--text-color);

    text-decoration: none;

}

.order-inner-box select {

    font-size: 14px;

    line-height: 14px;

    color: var(--text-color);

    border: 1px solid #ddd;

    padding: 8px 5px 9px;

    width: 175px;

    margin-bottom: 9px;

    background: url(../images/angle-down.png) no-repeat 96% 50%;

    appearance: none;

}

.order-inner-box span{

    font-size: 14px;

    line-height: 14px;

}

.promo-input{

    margin-bottom: 20px;

    position: relative;

}

.promo-input input {

    width: 100%;

    background: #e8e8e8;

    border: 1px solid #ddd;

    padding: 6px 90px 6px 10px;

}
.promo-input input:focus{
	border: 1px solid #ddd;
}
.promo-input button {

    top: 0;

    right: 0;

    border: none;

    position: absolute;

    color: #fff;

    background: var(--accent);

    padding: 7px 19px 7px 18px;

    cursor: pointer;

}

.promo-input button:focus{

    outline: none;

}

.promo-con h4{

    font-size: 14px;

    margin-bottom: 14px;

}

.total-price-con{

    padding: 20px;

    margin-bottom: 20px;

    border: 1px solid #ddd;

}

.total-price-con li {

    display: flex;

    align-items: center;

    margin-bottom: 14px;

    line-height: 16px;

    justify-content: space-between;

}

.total-price-con li:last-child{

    margin-bottom: 0;

    font-weight: 700;

    margin-top: 34px;

    color: var(--primary--color);

}

.order-btn-con a{

    font-size: 14px;

    font-weight: 500;

    line-height: 14px;

    text-decoration: none;

}

.order-btn-con .order-btn {

    padding: 13px 31px 14px;

    color: #fff;

    background: var(--accent);

}

.empty-btn{

    padding: 13px 27px 14px 28px;

    color: var(--primary--color);

    background: #e8e8e8;

}

.order-btn-con {

    display: flex;

    gap: 15px;

}