 .wage-calculator-wrapper {
            padding: 20px;
            max-width: 800px;
            margin: auto;
            font-family: system-ui, -apple-system, sans-serif;
        }

        .calc-fieldset {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
        }

        .calculator-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
        }

        .calculator-grid label {
            font-size: 14px;
            font-weight: 500;
        }

        .vp-table {
            margin-top: 20px;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
            background: #fff;
            font-size: 14px;
        }

        .vp-header, .vp-row {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            align-items: center;
        }

        .vp-header {
            background: #f4f6f8;
            font-weight: 600;
            border-bottom: 2px solid #ddd;
        }

        .vp-header div, .vp-cell {
            padding: 10px;
            box-sizing: border-box;
        }

        .vp-row {
            border-bottom: 1px solid #eee;
        }

        .vp-row:last-child {
            border-bottom: none;
        }

        .vp-label {
            font-weight: 500;
            background: #fafafa;
            border-right: 1px solid #eee;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .vp-input-cell {
            border-right: 1px solid #eee;
            padding: 5px 10px;
        }

        .vp-input {
            width: 100%;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .vp-input:disabled {
            background: #f0f0f0;
            border-color: #e0e0e0;
            cursor: not-allowed;
        }

        .vp-result {
            text-align: right;
            font-weight: 600;
            background: #fcfcfc;
            padding: 10px;
        }

        .grand-total-box {
            margin-top: 20px;
            padding: 15px;
            border: 2px solid #333;
            background: #f9f9f9;
            font-size: 1.3em;
            font-weight: bold;
            text-align: right;
            border-radius: 6px;
        }

        input, select {
            width: 100%;
            padding: 8px;
            margin-top: 4px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* MOBILE */
        @media (max-width: 600px) {
            .vp-header {
                display: none;
            }
            .vp-row {
                grid-template-columns: 1fr;
                gap: 5px;
                padding: 10px;
            }
            .vp-label, .vp-input-cell, .vp-result {
                border-right: none;
                padding: 5px 0;
            }
            .vp-result {
                text-align: left;
                border-top: 1px dashed #eee;
            }
        }
		
		/* Stil za ikono pomoči */
		.tooltip-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			background-color: #007bff; /* Osnovna modra barva */
			color: #ffffff;            /* Bela barva za znak ⓘ */
			border-radius: 50%;
			font-size: 0.95rem;
			font-weight: bold;
			cursor: help;
			margin-left: 10px;
			position: relative;
			vertical-align: middle;
			transition: background-color 0.2s ease;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Nežen sencen rob za lepši izgled */
		}

		/* Učinek ob prehodu miške (blag prehod v temnejšo modro) */
		.tooltip-icon:hover {
			background-color: #0056b3; /* Elegantna temnejša modra */
			color: #ffffff;
		}

		/* Skriti oblaček, ki črpa besedilo iz data-tooltip */
		.tooltip-icon::after {
			content: attr(data-tooltip);
			position: absolute;
			bottom: 130%; /* Postavi oblaček nad ikono */
			left: 50%;
			transform: translateX(-50%);
			background-color: #2b2b2b;
			color: #ffffff;
			padding: 8px 12px;
			border-radius: 6px;
			font-size: 0.85rem;
			font-weight: normal;
			line-height: 1.3;
			white-space: normal; /* Omogoča prelom besedila, če je daljše */
			width: 220px; /* Omejimo širino, da je oblaček lepo berljiv */
			text-align: center;
			opacity: 0;
			pointer-events: none;
			visibility: hidden;
			transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
			z-index: 99;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		}

		/* Puščica pod oblačkom */
		.tooltip-icon::before {
			content: "";
			position: absolute;
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-width: 6px;
			border-style: solid;
			border-color: #2b2b2b transparent transparent transparent;
			opacity: 0;
			pointer-events: none;
			visibility: hidden;
			transition: opacity 0.2s ease-in-out;
			z-index: 99;
		}

		/* Prikaz oblačka in puščice ob prehodu miške */
		.tooltip-icon:hover::after,
		.tooltip-icon:hover::before {
			opacity: 1;
			visibility: visible;
		}

		/* Blaga animacija dviga oblačkov */
		.tooltip-icon:hover::after {
			transform: translateX(-50%) translateY(-4px);
		}
		
		/* Poseben stil za tekstovni info namig brez okroglega ozadja */
		.tooltip-icon.tooltip-text {
			display: inline !important;
			width: auto !important;
			height: auto !important;
			background-color: transparent !important;
			color: #007bff !important; /* Elegantna modra barva za besedilo */
			border-radius: 0 !important;
			box-shadow: none !important;
			font-size: 13px !important;
			font-weight: normal !important;
			cursor: pointer !important;
			margin-left: 5px !important;
		}

		/* Stil ob prehodu miške za tekstovni info (sprememba barve besedila) */
		.tooltip-icon.tooltip-text:hover {
			background-color: transparent !important;
			color: #0056b3 !important; /* Temnejša modra ob prehodu miške */
			text-decoration: underline; /* Opcijsko: podčrta tekst za občutek povezave */
		}