/* Base styling for the entire form */
.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    font-family: Calibri, sans-serif;
}

/* Title styling */
.title {
    font-size: 24px; /* Reduced font size */
    margin-bottom: 15px; /* Reduced margin */
    text-align: center;
}

.sub-title {
    font-size: 16px; /* Reduced font size */
    margin-bottom: 15px; /* Reduced margin */
    text-align: center;
}

/* Input fields */
.input {
    width: 100%;
    margin: 5px 0;  /* Reduced margin */
    padding: 4px;  /* Reduced padding */
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 14px; /* Reduced font size */
    box-sizing: border-box;
}

.person-price {
    width: calc(100% - 20px); /* Adjusted width */
}

/* Base styling for buttons */
.button {
    padding: 6px 10px; /* Reduced padding */
    border: none;
    border-radius: 4px; /* Slightly smaller border-radius */
    color: #fff;
    font-size: 14px; /* Reduced font size */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Add/Remove person and price button styling */
.add-person, .add-price {
    background: #007BFF;
}

.add-person:hover, .add-price:hover {
    background: #0056b3;
}

.remove-person, .remove-price {
    background: #EC5159;
}

.remove-person:hover, .remove-price:hover {
    background: #BF3D3D;
}

/* Styling for the submit button */
.calculating {
    background: #28a745;
}

.calculating:hover {
    background: #218838;
}

/* Arrange buttons side by side */
.button-group {
    display: flex;
    justify-content: space-between; /* Space out buttons */
    gap: 10px; /* Add space between buttons */
    margin-top: 15px; /* Add some margin on top of the button group */
}

/* Ensure buttons have equal width */
.button-group .button {
    flex: 1; /* Make buttons take equal space */
}

/* Grid layout for person blocks */
.person-block {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px; /* Reduced margin */
    padding: 15px; /* Reduced padding */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px; /* Reduced gap */
    align-items: center;
}

/* Person block styling for heading */
.person-block h3 {
    grid-column: span 2; 
    margin: 0;
    font-size: 20px; /* Reduced font size */
}

/* Layout for person name and price fields */
.person-name, .person-price {
    margin: 5px 0; /* Reduced margin */
}

/* Container for prices */
.prices-container {
    display: flex;
    align-items: center;
    gap: 5px; /* Reduced gap */
    flex-wrap: wrap;
}

/* Style for price actions (buttons) */
.price-actions {
    display: flex;
    gap: 5px; /* Reduced gap */
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .person-block {
        grid-template-columns: 1fr;
    }
}

.total-bill-container {
    position: relative;
    margin-top: 20px;
}

#minimize-button {
    display: block;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#total-bill-table {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

#total-bill-table.hidden {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

#total-bill-table table {
    width: 100%;
    border-collapse: collapse;
}

#total-bill-table th, #total-bill-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}