/*
 * CSS стилі для плагіна "Profit Calculator". Версія 1.8
 * Додано горизонтальні відступи для коректного відображення на мобільних пристроях.
 */

#profit-calculator-wrapper {
    font-family: 'Inter', sans-serif;
    padding: 0 1rem; /* ЗМІНА: Додано відступи зліва та справа для мобільної версії */
}

/* --- Адаптивна структура --- */
.pcp-grid-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .pcp-grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
        align-items: center;
    }
}

/* --- Оновлений блок результатів --- */
.pcp-results-card {
    background-image: linear-gradient(135deg, #1E40AF 0%, #059669 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

#profit-calculator-wrapper #totalReturn {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700;
    color: #fff;
    word-break: break-all;
}


/* --- Базові стилі з оновленими кольорами --- */
#profit-calculator-wrapper input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: #e5e7eb; border-radius: 2px; outline: none; margin-top: 8px; }
#profit-calculator-wrapper input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #2563eb; cursor: pointer; border-radius: 50%; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.2s ease; }
#profit-calculator-wrapper input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
#profit-calculator-wrapper input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.4); }
#profit-calculator-wrapper input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: #2563eb; cursor: pointer; border-radius: 50%; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
#profit-calculator-wrapper .input-field { background-color: transparent; border: none; color: #1e293b; border-radius: 0.5rem; padding: 0.5rem 0; width: 80px; text-align: right; font-weight: 600; font-size: 1rem; transition: box-shadow 0.2s; }
#profit-calculator-wrapper .input-field:focus { outline: none; box-shadow: none; }
#profit-calculator-wrapper input[type=number]::-webkit-inner-spin-button, #profit-calculator-wrapper input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#profit-calculator-wrapper input[type=number] { -moz-appearance: textfield; }
#profit-calculator-wrapper .drag-hint { opacity: 1; transition: opacity 0.5s ease-in-out; pointer-events: none; }
#profit-calculator-wrapper .drag-hint.hidden { opacity: 0; }
@keyframes pcp-bounce-horizontal { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
#profit-calculator-wrapper .animate-pcp-bounce-horizontal { animation: pcp-bounce-horizontal 1.5s infinite; }

/* Стилі, що емулюють Tailwind CSS класи */
#profit-calculator-wrapper .bg-white { background-color: #fff; }
#profit-calculator-wrapper .w-full { width: 100%; }
#profit-calculator-wrapper .max-w-2xl { max-width: 42rem; }
#profit-calculator-wrapper .mx-auto { margin-left: auto; margin-right: auto; }
#profit-calculator-wrapper .p-8 { padding: 2rem; }
#profit-calculator-wrapper .rounded-2xl { border-radius: 1rem; }
#profit-calculator-wrapper .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
#profit-calculator-wrapper .text-slate-800 { color: #1e293b; }
#profit-calculator-wrapper .text-center { text-align: center; }
#profit-calculator-wrapper .mb-8 { margin-bottom: 2rem; }
#profit-calculator-wrapper .text-2xl { font-size: 1.5rem; }
#profit-calculator-wrapper .font-bold { font-weight: 700; }
#profit-calculator-wrapper .text-slate-500 { color: #64748b; }
#profit-calculator-wrapper .mt-2 { margin-top: 0.5rem; }
#profit-calculator-wrapper .text-base { font-size: 1rem; }
#profit-calculator-wrapper .flex { display: flex; }
#profit-calculator-wrapper .justify-between { justify-content: space-between; }
#profit-calculator-wrapper .items-center { align-items: center; }
#profit-calculator-wrapper .mb-2 { margin-bottom: 0.5rem; }
#profit-calculator-wrapper .font-medium { font-weight: 500; }
#profit-calculator-wrapper .text-slate-700 { color: #334155; }
#profit-calculator-wrapper .ml-2 { margin-left: 0.5rem; }
#profit-calculator-wrapper .mr-1 { margin-right: 0.25rem; }
#profit-calculator-wrapper .relative { position: relative; }
#profit-calculator-wrapper .absolute { position: absolute; }
#profit-calculator-wrapper .top-full { top: 100%; }
#profit-calculator-wrapper .left-0 { left: 0; }
#profit-calculator-wrapper .text-teal-500 { color: #2563eb; }
#profit-calculator-wrapper .text-xs { font-size: 0.75rem; }
#profit-calculator-wrapper .uppercase { text-transform: uppercase; }
#profit-calculator-wrapper .tracking-wider { letter-spacing: 0.05em; }
#profit-calculator-wrapper .text-white { color: #fff; }
#profit-calculator-wrapper .text-indigo-200 { color: rgba(255, 255, 255, 0.8); }
#profit-calculator-wrapper .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }