@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');

:root {
    /* پالت رنگی شاد و دوستانه */
    --primary-color-start: #4CAF50; /* سبز روشن */
    --primary-color-end: #8BC34A;   /* سبز تیره‌تر */

    --secondary-color-start: #FFC107; /* زرد پرتقالی */
    --secondary-color-end: #FFEB3B;   /* زرد روشن */

    --accent-color-start: #2196F3; /* آبی روشن */
    --accent-color-end: #03A9F4;   /* آبی فیروزه‌ای */

    --danger-color-start: #F44336; /* قرمز */
    --danger-color-end: #E57373;   /* قرمز روشن */

    --background-light: #F0F2F5; /* خاکستری خیلی روشن برای پس‌زمینه */
    --background-dark: #E0E2E5; /* خاکستری کمی تیره‌تر برای گرادیانت */
    --card-background: #FFFFFF; /* سفید برای کارت‌ها */
    --text-color: #333; /* رنگ متن اصلی */
    --border-radius: 15px; /* گوشه‌های گردتر */
    --shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* سایه عمیق‌تر */
    --button-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* سایه دکمه */
}

body {
    font-family: 'Vazirmatn', sans-serif;
    margin: 0;
    padding: 25px; /* پدینگ بیشتر برای حس باز بودن */
    background: linear-gradient(135deg, var(--background-light), var(--background-dark)); /* گرادیانت پس‌زمینه */
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
}

.container {
    max-width: 950px; /* عرض بیشتر برای محتوا */
    width: 100%;
    padding: 40px; /* پدینگ بیشتر داخل کانتینر */
    border-radius: var(--border-radius);
    background-color: var(--card-background); /* سفید برای کانتینر اصلی */
    box-shadow: var(--shadow);
    animation: fadeIn 1s ease-out;
}

header {
    text-align: center;
    margin-bottom: 50px; /* فاصله بیشتر برای هدر */
}

h1 {
    color: var(--accent-color-start);
    font-size: 3.5em; /* سایز بزرگتر برای عنوان اصلی */
    margin-bottom: 10px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* فاصله بین آیکون و متن */
}

h1 i {
    font-size: 0.8em; /* سایز آیکون‌ها نسبت به متن */
    color: var(--primary-color-start);
}

.friendly-text {
    font-size: 1.3em;
    color: #666;
    margin-top: 15px;
    line-height: 1.6;
}

h2 {
    color: var(--primary-color-start);
    border-bottom: 3px solid var(--primary-color-start); /* خط زیر عنوان‌ها */
    padding-bottom: 12px;
    margin-top: 35px;
    margin-bottom: 30px;
    font-size: 2.2em; /* سایز بزرگتر برای عنوان سکشن‌ها */
    display: flex;
    align-items: center;
    gap: 10px;
}

h2 i {
    color: var(--accent-color-start);
    font-size: 0.9em;
}

.card {
    background-color: var(--card-background);
    padding: 30px; /* پدینگ بیشتر داخل کارت‌ها */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05); /* حاشیه کمرنگ */
}

.card:hover {
    transform: translateY(-8px); /* افکت سه‌بعدی‌تر در هاور */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* ورودی‌های متنی و عددی */
input[type="text"],
input[type="number"],
select {
    width: 100%; /* عرض کامل */
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid #ddd;
    border-radius: 10px; /* گوشه‌های گردتر */
    font-size: 1.15em;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fcfcfc;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: var(--accent-color-end);
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.25); /* سایه آبی روشن‌تر */
    outline: none;
}

/* دکمه‌های کلی (add, remove, main) */
.add-btn, .remove-btn, .main-btn {
    color: white;
    border: none;
    padding: 15px 25px; /* پدینگ بیشتر برای دکمه‌ها */
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.25em;
    font-weight: bold;
    transition: background-size 0.5s ease, transform 0.2s ease, box-shadow 0.3s ease;
    background-size: 200% 100%; /* برای انیمیشن گرادیانت */
    box-shadow: var(--button-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* فاصله بین متن و آیکون */
}

/* گرادیانت برای دکمه اضافه کردن */
.add-btn {
    background-image: linear-gradient(to right, var(--primary-color-start), var(--primary-color-end), var(--primary-color-start));
}
.add-btn:hover {
    background-position: right center; /* حرکت گرادیانت در هاور */
    transform: translateY(-4px); /* افکت بالا آمدن */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* گرادیانت برای دکمه حذف */
.remove-btn {
    background-image: linear-gradient(to right, var(--danger-color-start), var(--danger-color-end), var(--danger-color-start));
    padding: 10px 18px; /* پدینگ کوچکتر برای دکمه حذف */
    font-size: 1.1em;
    margin-right: 0; /* حذف margin-left که باعث مشکل در راست‌چین می‌شد */
}
.remove-btn:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* دکمه اصلی محاسبه */
.main-btn {
    background-image: linear-gradient(to right, var(--accent-color-start), var(--accent-color-end), var(--accent-color-start));
    display: block;
    width: fit-content;
    margin: 40px auto; /* فاصله بیشتر و قرارگیری در وسط */
    padding: 18px 35px;
    font-size: 1.5em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.main-btn:hover {
    background-position: right center;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* سکشن هر شرکت کننده */
.participant-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    background-color: #F9F9F9;
    padding: 18px;
    border-radius: 12px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
}

.participant-section input {
    flex-grow: 1;
    margin-bottom: 0;
}

.participant-section .remove-btn {
    flex-shrink: 0; /* جلوگیری از کوچک شدن دکمه حذف */
}

/* آیتم خرید */
.purchase-item {
    display: flex;
    flex-direction: column; /* برای موبایل بهتر است */
    gap: 15px;
    margin-bottom: 20px;
    background-color: #F9F9F9;
    padding: 18px;
    border-radius: 12px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
}

.purchase-item-inputs {
    display: flex;
    flex-direction: column; /* Stack inputs vertically on smaller screens */
    gap: 15px;
}

.purchase-item-inputs > div { /* Group inputs for better layout */
    display: flex;
    align-items: center;
    gap: 10px;
}

.purchase-item-inputs label {
    font-weight: bold;
    color: #555;
    min-width: 80px; /* Minimum width for labels */
}

.purchase-item .remove-btn {
    align-self: flex-end; /* دکمه حذف در پایین و راست */
    margin-top: 10px;
}

/* بخش نتایج */
.result-section {
    background: linear-gradient(135deg, var(--secondary-color-start), var(--secondary-color-end)); /* گرادیانت زرد */
    color: #333; /* رنگ متن تیره برای کنتراست */
    margin-top: 40px;
    padding: 35px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.result-section h2 {
    color: white; /* رنگ سفید برای عنوان نتایج */
    border-bottom-color: white;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.result-section h3 {
    color: #444;
    font-size: 1.6em;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px dashed rgba(0,0,0,0.2);
    padding-bottom: 8px;
}

.result-item {
    background-color: rgba(255, 255, 255, 0.9); /* پس‌زمینه نیمه‌شفاف سفید */
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.15em;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.result-item:hover {
    transform: translateX(5px); /* انیمیشن کوچک در هاور */
}

.result-item strong {
    color: var(--primary-color-start); /* سبز برای اعداد مهم */
    font-size: 1.2em;
}

.result-item .owes-amount {
    color: var(--danger-color-start); /* قرمز برای بدهی */
}

.result-item .receives-amount {
    color: var(--primary-color-end); /* سبز برای دریافتی */
}

.total-summary {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 3px dashed rgba(255, 255, 255, 0.7);
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    body {
        padding: 15px;
    }

    .container {
        padding: 25px;
    }

    h1 {
        font-size: 2.5em;
        flex-direction: column; /* آیکون‌ها و متن زیر هم */
        gap: 5px;
    }

    h2 {
        font-size: 1.8em;
        flex-direction: column;
        align-items: flex-start; /* در موبایل راست‌چین */
        gap: 5px;
    }

    .add-btn, .remove-btn, .main-btn {
        padding: 12px 20px;
        font-size: 1.1em;
        width: 100%; /* دکمه‌ها عرض کامل در موبایل */
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .remove-btn {
        margin-right: 0;
    }

    input[type="text"],
    input[type="number"],
    select {
        padding: 10px;
        font-size: 1em;
        margin-bottom: 10px;
    }

    .participant-section {
        flex-direction: column; /* آیتم‌ها زیر هم */
        align-items: stretch;
        padding: 15px;
    }

    .purchase-item {
        padding: 15px;
    }

    .purchase-item-inputs > div {
        flex-direction: column;
        align-items: stretch;
    }

    .purchase-item-inputs label {
        min-width: unset;
        margin-bottom: 5px;
    }

    .purchase-item .remove-btn {
        align-self: center; /* دکمه حذف وسط قرار می‌گیرد */
    }

    .result-item {
        flex-direction: column;
        align-items: flex-start;
        font-size: 1em;
    }

    .result-item span, .result-item strong {
        margin-bottom: 5px;
    }
}

/* انیمیشن فیدین سفارشی */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}