/***************************************************
                 Header and Footer
***************************************************/
/** Sticky footer **/
html{height:100%;}
body{display:flex; flex-direction:column; min-height:100vh;}
footer{flex-shrink:0;}

/** Container **/
.o_form_container{position:relative; display:block; flex:1; width:100%; max-width:760px; margin:0 auto; font-size:14px; line-height:1.6; padding-bottom:2rem;}
.o_form_container > *{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}


/***************************************************
                Order form - General
***************************************************/
/** General **/
.o_form h2{border-bottom:1px solid #e6e6e6; margin:0; padding:0 0 10px 0;}
.o_form .text-end{text-align:right !important;}
.o_form .textright{text-align:right !important;}
.o_form .nomargin{margin:0;}
.o_form .amount_span{color:#6c757d; font-size:0.85em; padding-left:10px;}
.o_form .footer_excl_incl_vat { color:#6c757d; }
.o_form .align_right{text-align:right;}

/** Hyperlinks **/
.o_form a{color:#0d6efd; text-decoration:none; cursor:pointer;}
.o_form a:hover{text-decoration:underline;}

/** Error messages (Bootstrap overrides) **/
.o_form .error_message{border-radius:5px; border:1px solid #c02e19; margin-bottom:10px; padding:7px 21px 7px 7px; background-color:#f9ebeb; line-height:18px;}
.o_form .warning_message{border-radius:5px; border:1px solid #dad28d; margin-bottom:10px; padding:7px 21px 7px 7px; background-color:#fffbd4; line-height:18px;}


/** Navigation buttons **/
.o_form .nav{width:100%;}
.o_form .button_submit{
	cursor:pointer;
	text-decoration:none !important;
	color:#fff !important;
	font-size:0.925rem;
	padding:0.5rem 1.25rem;
	line-height:1.5;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	vertical-align:middle;
}
.o_form a.button_submit.back{background:none; border:1px solid #6c757d; color:#6c757d !important;}
.o_form a.button_submit.back:hover{background:#f8f9fa;}
.o_form .btn-outline-secondary.button_submit{color:#6c757d !important;}
.o_form .btn-outline-secondary.button_submit:hover{color:#fff !important;}
.o_form .button_submit.btn-sm{font-size:0.8125rem; padding:0.25rem 0.75rem;}


/** Form fields — let Bootstrap handle most styling, keep legacy compat **/
.o_form label{display:inline-block;}
.o_form label.no_width{width:auto;}
.o_form label.w1{display:inline-block; width:150px;}
.o_form input[type=text], .o_form input[type=password]{padding:5px; border:1px solid #ced4da; border-radius:0.375rem; margin-bottom:1px;}
.o_form input[type=text].large{width:80%; padding:5px; font-size:14px;}
.o_form input[type=text].small{width:60px;}
.o_form input[type=text].small_fill{width:213px;}
.o_form input[type=text].contactperson{width:137px;}
.o_form select{padding:4px 5px; border:1px solid #ced4da; border-radius:0.375rem; margin-bottom:1px;}
.o_form select.w1{width:300px;}
.o_form select.contactperson{width:auto; min-width:72px;}
.o_form textarea.comment{width:100%; height:125px; resize:none; border:1px solid #ced4da; border-radius:0.375rem;}


/***************************************************
            Progress Steps (Stepper)
***************************************************/
.progress-steps{padding:0; margin-top:0.5rem;}

.progress-steps .stepper{position:relative; padding:0 0 28px 0;}

.progress-steps .step-line-track{
	position:absolute;
	top:16px;
	left:16px;
	right:16px;
	height:3px;
	background:#dee2e6;
	z-index:0;
}
.progress-steps .step-line-fill{
	position:absolute;
	top:16px;
	left:16px;
	height:3px;
	background:#0d6efd;
	z-index:1;
	transition: width 0.4s ease;
}

.progress-steps .step-dots{
	position:relative;
	z-index:2;
	display:flex;
	justify-content:space-between;
}

.progress-steps .step{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	flex:0 0 32px;
	width:32px;
}
.progress-steps .step .step-circle{
	width:32px;
	height:32px;
	border-radius:50%;
	background:#fff;
	border:3px solid #dee2e6;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	font-weight:600;
	color:#adb5bd;
	transition: all 0.3s ease;
}
.progress-steps .step.active .step-circle{
	border-color:#0d6efd;
	background:#0d6efd;
	color:#fff;
}
.progress-steps .step.current .step-circle{
	box-shadow:0 0 0 4px rgba(13,110,253,0.25);
}
.progress-steps .step .step-label{
	position:absolute;
	top:36px;
	left:50%;
	transform:translateX(-50%);
	font-size:0.75rem;
	color:#adb5bd;
	white-space:nowrap;
}
.progress-steps .step.active .step-label{
	color:#0d6efd;
	font-weight:500;
}

/* Legacy progress bar compat (in case old class used) */
.o_form .progress{display:block; position:relative; width:95%; margin:0 auto; border-top:2px solid #0d6efd;}
.o_form .progress ol{width:100%; list-style:none; margin:0; padding:0;}
.o_form .progress ol li{position:absolute; width:12px; height:12px; margin:-11px 0 0 -10px; padding:0; text-indent:-4000px; border-radius:10px; border:4px solid #0d6efd; background:#ffffff;}
.o_form .progress ol li.active{width:20px; height:20px; margin:-15px 0 0 -14px; border-radius:14px; background:#0d6efd;}
.o_form .progress ol li:first-child + li{left:33%;}
.o_form .progress ol li:first-child + li + li{left:66%;}
.o_form .progress ol li:first-child + li + li + li{left:100%;}





/***************************************************
                Order form - Steps
***************************************************/
/** Step 0: Domain check **/
.o_form .w_form{line-height:normal;}
.o_form .w_form form{display:inline-flex; align-items:stretch; gap:0.5rem;}
.o_form .w_form input[type="text"]{
	padding:0.375rem 0.75rem;
	font-size:0.875rem;
	border:1px solid #ced4da;
	border-radius:0.375rem;
	line-height:1.5;
	height:auto;
}
.o_form .w_form .wf_form_submit{
	padding:0.375rem 0.75rem;
	font-size:0.875rem;
	line-height:1.5;
	border:1px solid #ced4da;
	border-radius:0.375rem;
	background:#f8f9fa;
	cursor:pointer;
	white-space:nowrap;
	transition:background 0.15s ease, border-color 0.15s ease;
}
.o_form .w_form .wf_form_submit:hover{background:#e9ecef; border-color:#adb5bd;}
.o_form .w_result .domain_warning{margin-top:1rem;}
.o_form .w_result .domain_error{margin-top:1rem;}
.o_form .goto_orderform{display:block;}
.o_form .w_result .goto_orderform{display:none; visibility:hidden;}


/** Step 1: Cart table **/
.o_form table.cart{width:100%;}
.o_form table.cart .noborder{border:0 !important; background:transparent !important;}
.o_form table.cart .bordertop{border-top:1px solid #e6e6e6 !important;}
.o_form table.cart th{padding:10px 5px; text-align:left; font-weight:600;}
.o_form table.cart td{padding:10px 5px; vertical-align:top;}
.o_form table.cart tr.addition{background:#f8f9fa; line-height:24px;}
.o_form table.cart tr.italic td, .o_form table.cart tr.fst-italic td{font-style:italic;}
.o_form table.cart .auth_key{margin-top:8px; color:#6c757d; padding-left:15px;}


/** Step 2: Customer information table **/
.o_form table.customer{width:100%;}
.o_form table.customer td{padding:1px 0;}
.o_form a.check_existing_customer_link{margin-left:10px;}


/** Step 2: Payment options **/
.o_form .payment_box{transition: border-color 0.2s ease, box-shadow 0.2s ease;}
.o_form .payment_box:hover{border-color:#86b7fe !important;}
.o_form .payment_box.active, .o_form .payment_box.border-primary{cursor:default; box-shadow: 0 0 0 2px rgba(13,110,253,0.15);}
.o_form .payment_box span.small_text{color:#6c757d; font-size:12px;}
.o_form .payment_box .payment_box_details{display:none;}


/** Step 3: Overview **/
.o_form .discount_coupon_add {cursor:pointer}
.o_form #discountDiv label {width:auto;margin-right:10px;}


/***************************************************
              Order form - Elements
***************************************************/
/** Domain element: Domain details table **/
.o_form .domain_table .ico-del{cursor:pointer; text-decoration:none;}
.o_form .domain_table .ico-del:hover{opacity:0.7;}
.o_form .domain_table .auth_key input{width:200px; padding:2px 5px; margin-left:5px;}


/** Hosting element: Package boxes **/
.o_form .package_container{width:100%;}
.o_form .package_box{transition: border-color 0.2s ease, box-shadow 0.2s ease;}
.o_form .package_box:hover{border-color:#86b7fe !important;}
.o_form .package_box.border-primary{box-shadow: 0 0 0 2px rgba(13,110,253,0.15) !important;}
.o_form .package_box .amount_span{padding:0; margin-top:8px; display:block;}

/* New Bootstrap grid packages — override legacy float */
.hosting_new_packages .package_box{float:none !important; width:auto !important; margin:0 !important;}

/* Legacy package box compat (for compare view mobile fallback) */
.o_form .package_container .package_box{float:left; width:140px; border:1px solid #e6e6e6; border-radius:0.5rem; margin:10px 10px 0px 0px; padding:10px; min-height:90px; cursor:pointer;}
.o_form .package_container .package_box.last_col{margin-right:0px;}
.o_form .package_container.grid1 .package_box{width:100%;}
.o_form .package_container.grid2 .package_box{width:calc(50% - 15px);}
.o_form .package_container.grid3 .package_box{width:calc(33.33% - 15px);}
.o_form .package_container .package_box.active, .o_form .package_container .package_box.border-primary{border:2px solid #0d6efd;}
.o_form .package_container .package_box span{display:block;}
.o_form .package_container .package_box span.amount_span { padding:0px; margin-top: 8px; }


/** Hosting element: Compare table **/
.o_form .hosting_table{width:100%; table-layout:fixed}
.o_form .hosting_table td{padding:5px; border:0px; border-left:1px solid #e6e6e6; text-align:center;}
.o_form .hosting_table td:first-child{text-align:left;}
.o_form .hosting_table td:last-child{border-right:1px solid #e6e6e6;}
.o_form .hosting_table tr:first-child td{border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;}
.o_form .hosting_table tr:first-child td:first-child{border-left:0px; border-top:0px;}
.o_form .hosting_table tr:last-child td{border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;}
.o_form .hosting_table tr:last-child td:first-child{border-left:0px; border-bottom:0px;}


/** Hosting element: Plan cards (compare view) **/
.o_form .hosting-plan-card{transition: border-color 0.2s ease, box-shadow 0.2s ease;}
.o_form .hosting-plan-card:hover{border-color:#86b7fe !important;}
.o_form .hosting-plan-card.border-primary{box-shadow: 0 0 0 2px rgba(13,110,253,0.15) !important;}
.o_form .hosting-plan-card .amount_span{padding:0; font-size:0.9em;}
.o_form .hosting-plan-card .form-check-label{font-size:1rem;}


/** Domain input group — ensure vertical alignment **/
.o_form .input-group{align-items:stretch;}
.o_form .input-group .form-control{padding:0.375rem 0.75rem; margin-bottom:0; border-radius:0.375rem 0 0 0.375rem;}
.o_form .input-group .btn{padding:0.375rem 0.75rem; margin-bottom:0; line-height:1.5; border-radius:0 0.375rem 0.375rem 0;}
.o_form .row .col-form-label{padding-top:calc(0.375rem + 1px); padding-bottom:calc(0.375rem + 1px);}


/***************************************************
              Card Styling
***************************************************/
.o_form .card{border-radius:0.5rem; border-color:#e2e8f0;}
.o_form .card-header{border-bottom:1px solid #e2e8f0; padding:1rem 1.25rem;}
.o_form .card-header h5{font-size:1.05rem; font-weight:600; color:#1e293b;}
.o_form .card-header h5 i{color:#0d6efd;}


/***************************************************
              Responsive / mobile
***************************************************/
@media only screen and (max-width: 700px) {

	/** Body and container **/
	body{margin:0;}
	.o_form_container{width:100%; min-width:inherit; max-width:inherit; padding:0 10px; line-height:24px; box-sizing:border-box;}
	.o_form_container *{box-sizing:border-box;}

	/** Progress stepper **/
	.progress-steps .step{flex:0 0 28px; width:28px;}
	.progress-steps .step .step-circle{width:28px; height:28px; font-size:12px; border-width:2px;}
	.progress-steps .step .step-label{top:32px;}
	.progress-steps .step.current .step-circle{box-shadow:0 0 0 3px rgba(13,110,253,0.2);}
	.progress-steps .step-line-track{top:14px; left:14px; right:14px; height:2px;}
	.progress-steps .step-line-fill{top:14px; left:14px; height:2px;}

	/** Legacy progress bar **/
	.o_form .progress *{box-sizing:content-box;}
	.o_form .progress ol li{width:10px; height:10px; margin:-7px 0 0 -5px; border-radius:6px; border:1px solid #0d6efd;}
	.o_form .progress ol li.active{width:10px; height:10px; margin:-7px 0 0 -7px; border-radius:10px;}

	/** Form fields **/
	.o_form label{display:inline-block; width:100%; line-height:26px; margin-top:5px;}
	.o_form label.no_width{margin-top:0;}
	.o_form input[type=text], .o_form input[type=password], .o_form select, .o_form textarea{font-size:14px; line-height:18px; width:100%; padding:7px 4px; }
	.o_form select{height:35px;}
	.o_form textarea{padding:5px;}
	.o_form input[type=radio], .o_form input[type=checkbox]{vertical-align: baseline;}
	.o_form input[type=text].small{width:80px;}
	.o_form input[type=text].small_fill{width:calc(100% - 85px);}
	.o_form input[type=text].contactperson{width:calc(100% - 161px);}

	/** Hides **/
	.mobile_hide_column{display:none; width:0; height:0; opacity:0; visibility: collapse;}
	.mobile_hide_text{display:none; width:0; height:0; opacity:0;}

	/** Generals **/
	.o_form .amount_span{font-size:inherit;}
	.o_form .active{background:#f9f9f9;}

	/** Step 0: Domain check **/
	.o_form .w_form form{width:100%;}
	.o_form .w_form input[type=text]{flex:1; min-width:0; width:auto;}
	.o_form table.cart td{padding:3px 0px 3px 3px;}
	.o_form table td.domain_td_order{ font-size:0;}
	.o_form table td.domain_td_order .order_link{ display:inline-block; width:14px;height:14px;margin-top:5px; text-indent: 100%;white-space: nowrap; overflow: hidden; background: url('../images/cart.png') no-repeat center center;}
	.o_form table td.domain_td_order .remove_link{display:inline-block; width:14px;height:14px;margin-top:5px; text-indent: 100%;white-space: nowrap; overflow: hidden; background: url('../images/delete.png') no-repeat center center;}
	.o_form table td.domain_td_order .remove_link img {display:none;}
	.o_form table tr.domain_td_checked_available td{color:#0E5704;}
	.o_form table tr.domain_td_checked_unavailable td{color:#c02e19;}
	.o_form .domain_table .ico-del{width:auto;}
	.o_form .domain_table table th:nth-child(2),
	.o_form .domain_table table td:nth-child(2){ display:none;}

	.o_form table td:first-child {word-break:break-all;}

	.o_form .show_amount_span + .amount_span { padding-left:10px; }

	.w_result table{table-layout: inherit; border-bottom: 1px solid #e6e6e6!important;}
	.w_result table th{border-bottom: hidden!important;}
	.w_result table th{display: none; opacity: 0; height: 0; visibility: collapse;}
	.w_result table th:nth-child(1){display: block; visibility: visible; opacity: 1; height: 31px;}
	.w_result table td{display: block; border: hidden!important;}
	.w_result table td:first-child{word-break:break-all;}
	.w_result table td .domain_td_checked_available{display: block; font-size: 12px; opacity: 1;}
	.w_result table tr td:nth-child(1){display: inline-block; float: left; width:80%; padding-bottom: 0!important; border-top: 1px solid #e6e6e6!important; color: #000;}
	.w_result table tr td:nth-child(2){display: block!important; float: right; width:20%; text-align: right;  padding-bottom: 0!important; border-top: 1px solid #e6e6e6!important;}
	.w_result table tr td:nth-child(3){display: block; float: left; text-align: left; color:#6c757d; clear:left;}
	.w_result table tr td:nth-child(4){display: none;  padding-bottom: 0!important;}
	.w_result table tr td:nth-child(5){float: left; display: block; color: #6c757d;}
	.w_result table tr td:nth-child(6){float: right; color: #6c757d; margin-top: -2px;}
	.w_result table td.domain_td_order{font-size:14px;}
	.w_result table td.domain_td_order .order_link{background: none; text-indent: 0; overflow: auto; height: auto; width: auto; margin-top: 0; display: block;}
	.w_result table tr.domain_td_checked_available td span{color: green;}
	.w_result table tr.domain_td_checked_unavailable td span{color: red;}
	.w_result table td.domain_td_order .remove_link{background-position: 5px 7px;}

	.w_form form input.wf_form_submit{width:auto!important; margin:0!important;}

	#DomainTypeDiv_new input.wf_form_submit{width:auto!important; margin:0!important;}
	#DomainTypeDiv_new > input[type="text"]{flex:1; min-width:0; width:auto;}

	/** Step 0: SSL wizard **/
	#wizard_result_table table th:nth-child(2),
	#wizard_result_table table td:nth-child(2){ display:none; }
	#wizard_result_table table th:last-child { width:auto;}
	#wizard_result_table table td:last-child a{ display:inline-block; width:14px;height:14px;margin-top:5px; text-indent: 100%;white-space: nowrap; overflow: hidden; background: url('../images/cart.png') no-repeat center center;}
	#ssl_main_options label + div { margin-left:0px !important; }

	/** Hosting element: Package boxes **/
	.o_form .package_container .details{margin-top:10px; color:#656565;}
	.o_form .package_container.grid1 .package_box{width:100%; margin-top:15px;}
	.o_form .package_container.grid2 .package_box{width:100%; margin-top:15px;}
	.o_form .package_container.grid3 .package_box{width:100%; margin-top:15px;}
	.o_form .package_container.grid4 .package_box{width:100%; margin-top:15px;}
	.o_form .package_container .package_box:last-child {margin-bottom:15px;}

	/** Navigation buttons **/
	.o_form .goto_orderform{width:100%; margin-bottom:15px; text-align:center;}
	.o_form .w_result .goto_orderform{display:none !important;}
	.o_form .nav p{width:100%; float:none;}
	.o_form .nav p:first-child + p{float:none; margin:20px 0 20px 0;}

	/** Step 2: Customer information table **/
	.o_form a.check_existing_customer_link{float:right;}
	.o_form #ExistingCustomerDiv br{display:none;}
	.o_form .payment_box td{white-space:normal;}

	/** Step 3: Overview **/
	.o_form #discountDiv{width:100%; margin:20px 0;}
	.o_form #discountDiv br{display:none;}
	.o_form #discountDiv label{line-height:26px; display:inline-block; width:100%;}

	.o_form .overview_customer { float:none !important; width:100% !important; margin-bottom: 30px;}
	.o_form .overview_customer.payment_data{margin-bottom:-40px;}
}

@media only screen and (min-width: 701px) {

	/** Hide desktop, show mobile **/
	.mobile_show_column{display:none; width:0; height:0; opacity:0; visibility: collapse;}
	.mobile_show_text{display:none; width:0; height:0; opacity:0;}

}