/* Pricing Calculator Styles */
.pricing-calculator {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* Reduced from 1.5rem for more compact layout */
    padding: 0.8rem; /* Reduced from 1rem */
    background-color: var(--bg-primary, #fff);
    border-radius: 5px;
}

.pricing-calculator-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem; /* Reduced from 1rem for more compact layout */
}

.pricing-summary {
    background-color: var(--bg-secondary, #f5f5f5);
    padding: 0.8rem; /* Reduced from 1rem */
    border-radius: 5px;
    border: 1px solid var(--border-color, #ddd);
}

.pricing-summary h4 {
    margin-top: 0;
    margin-bottom: 0.3rem; /* Reduced by 40% from 0.5rem */
    font-size: 0.85rem; /* Reduced by 35% from 1rem */
    font-weight: 600;
    color: var(--text-primary, #333);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.18rem; /* Reduced by 40% from 0.3rem */
    font-size: 0.75rem; /* Reduced by 30% from 0.875rem */
    line-height: 1.2; /* Tighter line height for more compact appearance */
}

.summary-item.total {
    margin-top: 0.3rem; /* Reduced by 40% from 0.5rem */
    padding-top: 0.3rem; /* Reduced by 40% from 0.5rem */
    border-top: 1px solid var(--border-color, #ddd);
    font-weight: 600;
    font-size: 0.8rem; /* Slightly larger than other items but still reduced */
}

.summary-label {
    color: var(--text-secondary, #666);
}

.summary-value {
    font-weight: 500;
    color: var(--text-primary, #333);
}

/* Items Lists */
.items-list {
    max-height: 180px; /* Reduced from 200px */
    overflow-y: auto;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: 0.5rem; /* Reduced from 1rem */
}

.accessory-item,
.discount-item {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem; /* Reduced vertical padding from 0.5rem */
    border-bottom: 1px solid var(--border-color, #eee);
}

.accessory-item:last-child,
.discount-item:last-child {
    border-bottom: none;
}

.accessory-checkbox,
.discount-checkbox {
    margin-right: 0.75rem;
}

.accessory-details,
.discount-details {
    flex: 1;
    cursor: pointer;
}

.accessory-name,
.discount-name {
    font-weight: 500;
    color: var(--text-primary, #333);
    margin-bottom: 0.25rem;
}

.accessory-price,
.discount-value {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

/* Manual Discount */
.manual-discount-container {
    margin-bottom: 0.5rem; /* Reduced from 1rem */
}

.manual-discount-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.manual-discount-form select,
.manual-discount-form input {
    flex: 1;
    min-width: 100px;
}

/* Pricing actions */
.pricing-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem; /* Reduced from 1rem */
}

/* Empty states */
.empty-accessories,
.empty-discounts {
    color: var(--text-muted, #999);
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
}

/* Media queries for responsive layout */
@media (min-width: 768px) {
    .pricing-calculator {
        flex-direction: row;
    }
    
    .pricing-calculator-form {
        flex: 2;
        padding-right: 1rem; /* Reduced from 1.5rem */
    }
    
    .pricing-summary {
        flex: 1;
    }
}

/* Currency selector styles */
.currency-selector {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.currency-selector label {
    margin-right: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.currency-selector .currency-options {
    display: flex;
    gap: 0.5rem;
}

.currency-option {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
}

.currency-option input {
    margin-right: 0.25rem;
}

/* No contract checkbox styling */
.no-contract-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.25rem;
}

.checkbox-container input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
}

.checkbox-label {
    font-weight: 500;
    color: #495057;
    user-select: none;
}

.no-contract-container .text-muted {
    font-size: 0.8rem;
    margin-left: 21px; /* Align with checkbox label */
}