/* Main container for the calculator */
.ddv-kalkulator-container {
    margin: 20px auto;
	max-width:800px;

/* Row layout */
.ddv-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* Individual element containers */
.ddv-amount-container,
.ddv-vat-container,
.ddv-add-line-container {
    margin-right: 10px;
}

/* Stack label above input in the amount and VAT containers */
.ddv-amount-container,
.ddv-vat-container {
    display: flex;
    flex-direction: column;
}

.ddv-add-line-container {
    display: flex;
	flex:0 0 80px;
    align-items: center;
    gap: 10px;
}

.ddv-amount-container,
.ddv-vat-container {
  flex: 1; 
}

.ddv-input-row {
	display:flex;
	width:100%;
}

/* Input and select styling */
.ddv-input,
.ddv-select {
    padding: 5px;
    font-size: 1em;
}

.ddv-input-amount,
.ddv-select-vat,
.ddv-input-vat {
	padding:5px 10px;
	border-radius:4px;
	width:100%;
}

/* Plus icon styling */
.ddv-add-line {
    cursor: pointer;
    font-size: 1.6em;
    font-weight: bold;
	color:#eef2ff;
	padding:22px 0 0 10px;
}

.ddv-remove-line {
    cursor: pointer;
    font-size: 1.6em;
    font-weight: bold;
    margin-left: 10px;
	color:#ffffff;
	padding:22px 0 0;
}


/* Button styling */
.ddv-btn {
    padding: 8px 20px;
    margin-right: 10px;
    cursor: pointer;
	border-radius:4px;
}

/* Results container styling */
.ddv-results-container {
    margin-top: 20px;
	background:#6366f1;
	padding:5px 20px 30px;
	border-radius:7px;
}

/* Each result row: label on left, output on right */
.ddv-result-row {
    display: flex;
    justify-content: space-between;
    margin: 15px 0 0;
	position: relative;
	background-image: radial-gradient(circle closest-side, #eef2ff 80%, #6366f1 10%);
	background-position: bottom;
	background-size: 4px 2px;
	background-repeat: repeat-x;
}

/* Container for result value and copy icon, aligned to the right */
.ddv-result-output {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: auto;
}

.ddv-result-vat-rate, .ddv-result-total-vat {
	background:#4338ca;
	border-radius:4px;
	padding:5px 10px 5px 0;
	margin-top:15px!important;
}

.ddv-result-total-vat {
	padding:5px 0;
}

.ddv-result-output {
	background:#6366f1;
	z-index: 2;
	position: relative;
	display: inline-block; /* Ensures proper spacing */
	bottom: -8px; /* Moves it down over the border */
	padding:0 10px;
}

.ddv-result-label {
	background:#6366f1;
	z-index: 2;
	position: relative;
	display: inline-block; /* Ensures proper spacing */
	bottom: -8px; /* Moves it down over the border */
	padding:0 10px;
}

.ddv-result-vat-rate .ddv-result-output, .ddv-result-total-vat .ddv-result-output {
	background:#4338ca!important;
	bottom: 0px;
}

.ddv-result-vat-rate .ddv-result-label, .ddv-result-total-vat .ddv-result-label {
	background:#4338ca!important;
	bottom: 0px;
}

/* Copy icon styling */
.ddv-copy-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 10px;
}
.ddv-copy-icon svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}
/* When the icon is in the 'copied' state, change the fill color to green */
.ddv-copy-icon.copied svg {
    fill: green;
}

/* Warning message styling */
.ddv-warning {
    color: red;
    font-size: 0.9em;
    margin-top: 2px;
}