:root {
    --color-brand: #E3530F;
    --color-label: #01273E;
    --color-text: #444444;
    --color-placeholder: #797979;
    --color-border: #D2D6DB;
    --color-bg-extra: #F3F4F6;
	
	--font-heading: 1.5rem;
	--font-label: 1.125rem;
	--font-text: 1rem;
	--font-small: 0.875rem;
	
	--line-height: 1.2;
	
	--color-success-bg: #ECFDF5;  /* delikatne zielone tło */
	--color-success:    #065F46;  /* ciemna zieleń tekstu */
	--color-success-br: #10B981;  /* zieleń obramowania */

	--color-error-bg:   #FEF2F2;  /* delikatne czerwone tło */
	--color-error:      #7F1D1D;  /* ciemna czerwień tekstu */
	--color-error-br:   #EF4444;  /* czerwień obramowania */
}

.vilpe-calculator {
    width: min(50rem, 100%);
	box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.25);
	background-color: #fff;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-inline: auto;
	padding: 2rem;
	font-size: var(--font-text);
	line-height: var(--line-height);
	color: var(--color-text);
}

.vilpe-calculator p {
	margin: 0;
}

.vilpe-calculator .calculator__clear {
	text-decoration: none;
	margin-left: 0.5em;
	font-size: var(--font-heading);
	color: var(--color-label);
	line-height: 1;
    position: relative;
    top: 0.1em;

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

.vilpe-calculator .highlight {
	color: var(--color-brand);
}

.calculator__error:not(.show) {
	display: none;
}

.calculator__error {
	color:#AD3903;
	font-size: var(--font-small);
}

.calculator__wrapper {
	display: flex;
	width: 100%;
	flex-direction: row;
	gap: 2rem;
}

.calculator__field {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
}

.calculator__label {
	font-size: var(--font-label);
	color: var(--color-label);
	font-weight: bold;
}

.calculator__label.calculator__label--required:after {
	content: "*";
	color: red;
}

.calculator__radio-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.calculator__radio-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.25rem;
}

.calculator__radio-input {
	width: 0.875rem;
	height: 0.875rem;
	accent-color: var(--color-brand);
	cursor: pointer;
}

.calculator__price-range,
.calculator__info {
	padding: 1.5rem;
	background-color: var(--color-bg-extra);
	border-left: 2px solid var(--color-brand);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.calculator__price-range strong {
    white-space: nowrap;
}

.calculator__info {
	margin-block: 0.625rem;
	padding-block: 1.75rem;
}

.calculator__link {
	color: var(--color-brand);
	font-weight: 700;
}

.calculator__select,
.calculator__input,
.calculator__textarea {
	width: 100%;
	border: 1px solid var(--color-border);
	padding-inline: 1rem;
	padding-block: 0.75rem;
	outline: 0;
	color: var(--color-placeholder);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: border-color 250ms ease-in-out;
	background-color: #fff;
}

.calculator__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='11' viewBox='0 0 19 11' fill='none'><path d='M9.50005 10.1875C9.30024 10.1875 9.10024 10.1111 8.94771 9.95858L1.13521 2.14608C0.829932 1.84081 0.829932 1.34647 1.13521 1.04139C1.44048 0.736316 1.93481 0.736121 2.23989 1.04139L9.50005 8.30155L16.7602 1.04139C17.0655 0.736121 17.5598 0.736121 17.8649 1.04139C18.17 1.34667 18.1702 1.841 17.8649 2.14608L10.0524 9.95858C9.89985 10.1111 9.69985 10.1875 9.50005 10.1875Z' fill='%23D2D6DB'/></svg>") 
    no-repeat right 1rem center;
	background-size: 1rem auto;
}

.calculator__select:focus,
.calculator__input:focus,
.calculator__textarea:focus {
	border-color: var(--color-brand);
}

.calculator__info-title,
.calculator__heading {
	font-size: var(--font-heading);
	color: var(--color-label);
	font-weight: 700;
}

.calculator__info-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.calculator__info-item {
	position: relative;
	padding-left: calc(1.125rem + 0.5rem);
}

.calculator__info-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1625em;
	width: 1.125em;
	height: 0.875em;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'><path d='M17.7604 6.37062L12.0331 0.245623C11.8788 0.0862349 11.6721 -0.00196054 11.4576 3.30772e-05C11.2431 0.00202669 11.0379 0.0940497 10.8862 0.256282C10.7345 0.418514 10.6484 0.637975 10.6466 0.867397C10.6447 1.09682 10.7272 1.31785 10.8762 1.48287L15.2069 6.11425H0.81819C0.601192 6.11425 0.393083 6.20643 0.239642 6.37053C0.0862018 6.53462 0 6.75718 0 6.98925C0 7.22131 0.0862018 7.44387 0.239642 7.60797C0.393083 7.77206 0.601192 7.86425 0.81819 7.86425H15.2069L10.8762 12.4956C10.7981 12.5763 10.7357 12.6729 10.6928 12.7796C10.65 12.8864 10.6274 13.0012 10.6264 13.1174C10.6255 13.2336 10.6462 13.3488 10.6873 13.4563C10.7285 13.5639 10.7892 13.6616 10.8661 13.7437C10.9429 13.8259 11.0342 13.8908 11.1348 13.9348C11.2353 13.9788 11.3431 14.001 11.4517 14C11.5604 13.999 11.6677 13.9748 11.7675 13.929C11.8674 13.8831 11.9576 13.8164 12.0331 13.7329L17.7604 7.60787C17.9138 7.44379 18 7.22127 18 6.98925C18 6.75723 17.9138 6.53471 17.7604 6.37062Z' fill='%23E3530F'/></svg>") no-repeat center center;
	background-size: contain;
}

.calculator__contact {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.calculator__contact-fields {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.calculator__acceptance {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
}

.calculator__acceptance input {
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	border:0;
	padding:0;
	clip:rect(0 0 0 0);
	clip-path:inset(100%);
	overflow:hidden;
	white-space:nowrap;
}

.vilpe-invalid {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(227,83,15,0.15);
}

/* kwadracik */
.calculator__checkbox {
	width: 0.875rem;
	height: 0.875rem;
	border: 1px solid var(--color-placeholder);
	display: inline-block;
	position: relative;
	flex-shrink: 0;
	margin-block-start: 0.1625em;
}

/* stan zaznaczony */
.calculator__acceptance input:checked + .calculator__checkbox {
	background-color: var(--color-brand);
}

.calculator__acceptance input:checked + .calculator__checkbox::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.calculator__buttons {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.calculator__button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	flex: 1;
	border: 2px solid var(--color-brand);
	padding-inline: 2em;
	padding-block: 1em;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: all 250ms ease-in-out;
}

.calculator__button.calculator__button--primary {
	background-color: var(--color-brand);
	color: #fff;
}

.calculator__button.calculator__button--primary:hover {
	background-color: #AD3903;
	border-color: #AD3903;
}

.calculator__button.calculator__button--secondary {
	background-color: #fff;
	color: var(--color-brand);
}

.calculator__button.calculator__button--secondary:hover {
	color: #AD3903;
	border-color: #AD3903;
	background-color: #fbfbfb;
}

.calculator__message{
	padding: 0.875rem 1rem;
	border: 1px solid var(--color-border);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	position: relative;
	padding-left: 2.5rem;
}

.calculator__message:not(.show) {
	display: none;
}

.calculator__message.vilpe-success{
	background: var(--color-success-bg);
	border-color: var(--color-success-br);
	color: var(--color-success);
}

/* wersja błąd (czerwona) */
.calculator__message.vilpe-error{
	background: var(--color-error-bg);
	border-color: var(--color-error-br);
	color: var(--color-error);
}

/* ikona po lewej – „check” dla sukcesu */
.calculator__message.vilpe-success::before,
.calculator__message.vilpe-error::before{
	content:"";
	position:absolute;
	left:0.9rem;
	top:50%;
	transform:translateY(-50%);
	width:1.1rem;
	height:1.1rem;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	opacity:.95;
}

/* zielony „check” */
.calculator__message.vilpe-success::before{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23065F46' viewBox='0 0 20 20'><path d='M16.707 5.293a1 1 0 010 1.414l-7.364 7.364a1 1 0 01-1.414 0L3.293 9.536a1 1 0 011.414-1.414l3.05 3.05 6.657-6.657a1 1 0 011.293-.222z'/></svg>");
}

/* czerwony „alert” */
.calculator__message.vilpe-error::before{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%237F1D1D' viewBox='0 0 20 20'><path d='M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z'/></svg>");
}

.calculator__attachment {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
}

.calculator__attachment-button {
	background-color: var(--color-brand);
	color: #fff;
	padding-block: 0.5em;
	padding-inline: 1.125em;
	font-weight: bold;
	white-space: nowrap;
}

.calculator__attachment-info {
	color: var(--color-placeholder);
}

@media (max-width: 55rem) {
	.vilpe-calculator {
		padding: 0;
		box-shadow: none;
		background-color: transparent;
	}
	
	.calculator__wrapper {
		flex-direction: column;
	}
}