/* Start:/local/templates/onehost_2020/components/bitrix/form.result.new/ask_self_tarif_gutman/style.css?177329440610209*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--red: #E8192C;
	--red-dark: #c41020;
	--red-glow: rgba(232, 25, 44, 0.15);
	--bg: #1a1a1e;
	--bg2: #E5E5E5;
	--bg3: #fff;
	--border: rgba(255,255,255,0.07);
	--text: #000;
	--muted: #333;
	--main-color: #333;
	--card-bg: rgba(255,255,255,0.03);
	--font: 'OpenSans-Regular';
}

body {
	font-family: var(--font);



}


.bdr .form-feedback:has(.new_config_form){
	background: transparent;
	padding: 0;
}
.bdr .form-feedback:has(.new_config_form):hover{
	box-shadow: none;
}
.mt-10{
	margin-top: 10px;
}

.page-header p {
	margin-top: 12px;
	color: var(--muted);
	font-size: 15px;
}

.wrapper {
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 800px) {
	.wrapper { grid-template-columns: 1fr; }
}

.card {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 1rem;
}

.section-label {
	font-family: var(--font);
	font-size: 16px;
	letter-spacing: 0.15em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 15px;
	font-weight: 600;
}

/* DISK TYPE TOGGLE */
.disk-toggle {
	display: flex;


	background: #D1D1D1;
	border-radius: 8px;
	margin-bottom: 20px;
	width: fit-content;
}

.disk-toggle button {
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	padding: 10px 28px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
	color:#fff;
	background: #D1D1D1;
	letter-spacing: 0.05em;

}
.disk-toggle button{
	z-index: 2;
}
.disk-toggle button:last-child{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	z-index: 1;
}

.disk-toggle button.active {
	background: var(--red);
	color: white;
	box-shadow: 0 4px 16px var(--red-glow);
}
.disk-toggle button:last-child.active{
	border-radius: 8px;
}
/* SLIDERS */
.slider-group {
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: 40px 1fr 90px;
	gap: 1rem;
	align-items: center;
}

.slider-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

}

.slider-header .param-name {
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--text);
	text-transform: uppercase;
}

.slider-value-box {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 12px;
}

.slider-value-box input[type="number"] {
	background: transparent;
	border: none;
	outline: none;
	color: var(--main-color);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	width: 40px;
	text-align: center;

}

.slider-value-box input[type="number"]::-webkit-inner-spin-button,
.slider-value-box input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

.slider-value-box .unit {
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
}

.slider-track-wrap {
	position: relative;
	height: 6px;
	background: var(--bg3);
	border-radius: 6px;
	cursor: pointer;

}

.slider-fill {
	position: absolute;
	height: 100%;
	background: var(--red);
	border-radius: 6px;
	transition: width 0.1s;
}

input[type="range"] {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	cursor: pointer;
	height: 20px;
	margin: 0;
}

.slider-thumb {
	position: absolute;
	width: 18px;
	height: 18px;
	background: white;
	border: 3px solid var(--red);
	border-radius: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 8px rgba(232,25,44,0.4);
	pointer-events: none;
	transition: left 0.1s;
}

.slider-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}
.slider-labels span {
	font-size: 11px;
	color: var(--muted);
}

.divider {
	height: 1px;
	background: var(--border);
	margin: 28px 0;
}

/* BACKUP TOGGLE */
.backup-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.backup-row .label {
	font-size: 14px;
	color: var(--text);
}
.backup-row .label small {
	display: block;
	font-size: 11px;
	color: var(--muted);
	margin-top: 2px;
}

.toggle-switch {
	position: relative;
	width: 44px;
	height: 24px;
	cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
	position: absolute;
	inset: 0;
	background: var(--bg3);
	border-radius: 24px;
	transition: 0.2s;
	border: 1px solid var(--border);
}
.toggle-slider::before {
	content: '';
	position: absolute;
	width: 16px; height: 16px;
	left: 3px; top: 3px;
	background: var(--muted);
	border-radius: 50%;
	transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--red); border-color: var(--red); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: white; }

/* BACKUP SIZE */
.backup-size-row {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	margin-bottom: 20px;
}
.backup-size-row.visible { display: flex; }
.backup-size-row input[type="number"] {
	flex: 1;
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	padding: 8px 12px;
	outline: none;
	transition: border-color 0.2s;
}
.backup-size-row input[type="number"]:focus { border-color: var(--red); }
.backup-size-row .unit { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ISPMANAGER */
.isp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* PRICE CARD */
.price-card {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 1rem;
	position: sticky;
	top: 20px;
}

.plan-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-family: var(--font);
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
}
.plan-badge.ssd { background: rgba(100,180,255,0.1); color: #64b4ff; border: 1px solid rgba(100,180,255,0.2); }
.plan-badge.nvme { background: rgba(255,160,50,0.1); color: #ffa032; border: 1px solid rgba(255,160,50,0.2); }
.plan-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.price-main {
	margin-bottom: 8px;
}
.price-main .amount {
	font-family: var(--font);
	font-size: 42px;
	font-weight: 700;
	color: var(--text);
	line-height: 1;
}
.price-main .currency {
	font-family: var(--font);
	font-size: 18px;
	color: var(--muted);
	margin-left: 4px;
	vertical-align: super;
	font-size: 14px;
}
.price-period {
	color: var(--muted);
	font-size: 12px;
	margin-bottom: 20px;
}

.price-monthly {
	background: var(--bg3);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 20px;
}
.price-monthly .row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 6px;
}
.price-monthly .row span{
	font-size: 15px;
}
.price-monthly .row span{
	margin-left: 0 !important;
}
.price-monthly .row:last-child { margin-bottom: 0; }
.price-monthly .row .val {
	font-weight: 600;
	color: var(--text);
	font-size: 15px;
}

.discount-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 20px;
}

.discount-box {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px;
	text-align: center;
}
.discount-box .pct {
	font-family: var(--font);
	font-size: 10px;
	color: var(--muted);
	margin-bottom: 4px;
	letter-spacing: 0.05em;
}
.discount-box .disc-price {
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	color: #4ade80;
}

.breakdown {
	border-top: 1px solid var(--border);
	padding-top: 16px;
	margin-bottom: 20px;
}
.breakdown-title {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 12px;
}
.breakdown-item {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 6px;
}
.breakdown-item .val {
	color: var(--text);
	font-weight: 500;
}

.note {
	font-size: 11px;
	color: var(--muted);
	line-height: 1.6;
	padding: 12px;
	background: var(--card-bg);
	border-radius: 8px;
	border-left: 2px solid var(--red);
	margin-bottom: 20px;
}

.contact-section { margin-top: 4px; }
.contact-section .input-field {
	width: 100%;
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	padding: 12px 14px;
	outline: none;
	transition: border-color 0.2s;
	margin-bottom: 10px;
	display: block;
}
.contact-section .input-field:focus { border-color: var(--red); }
.contact-section .input-field::placeholder { color: var(--muted); }

.submit-btn {
	width: 100%;
	padding: 15px;
	background: var(--red);
	border: none;
	border-radius: 10px;
	color: white;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 4px 20px rgba(232,25,44,0.3);
}
.submit-btn:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(232,25,44,0.4); }
.submit-btn:active { transform: translateY(0); }

/* TOAST */
.toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #222;
	border: 1px solid rgba(74,222,128,0.4);
	color: #4ade80;
	padding: 12px 24px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
	z-index: 1000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* End */


/* Start:/local/templates/onehost_2020/components/bitrix/form.result.new/ask/style.css?1717507749707*/
table.form-table
{
	width:100%;
	background-color:white;
	border-collapse:collapse;
	font-size:100%;
	font-weight:normal;
	line-height:160%;
}

table.form-table th, table.form-table td
{
	border:1px solid #ADC3D5;
	padding: 5px 5px;
	vertical-align:top;
}

table.form-table th
{
	background-image:url(/local/templates/onehost_2020/components/bitrix/form.result.new/ask/images/table_head.gif);
	background-repeat:repeat-x;
	text-align: left;
	color:#25639A;
}


table.form-table td
{
	padding: 15px 5px;
}

.form-required 
{
	color: red;
}

.error-fld {
	display: block;
	float: left;
	height: 13px;
	width: 15px;
	background-repeat: no-repeat;
	background-image: url(/local/templates/onehost_2020/components/bitrix/form.result.new/ask/images/icon_warn.gif);
}

.ask-form .field {
	width: 90%;
}

/* End */
/* /local/templates/onehost_2020/components/bitrix/form.result.new/ask_self_tarif_gutman/style.css?177329440610209 */
/* /local/templates/onehost_2020/components/bitrix/form.result.new/ask/style.css?1717507749707 */