/* Cart page specific styles */
.cart-item {
    padding: 1.5rem !important;
    border-bottom: 1px solid #dee2e6;
}

.cart-item:hover {
    background-color: #f8f9fa;
}

.quantity-input {
    max-width: 60px;
    text-align: center;
    border-radius: 0.375rem;
}

.quantity-btn {
    width: 35px;
    height: 31px;
    padding: 0;
    border-radius: 0.375rem;
}

/* Better spacing for quantity controls */
.cart-item .flex.items-center.space-x-2 {
    gap: 0.5rem;
}

.cart-item .remove-item {
    margin-left: 0.5rem;
}

/* Continue shopping button styling */
.continue-shopping-section {
    margin-top: 1.5rem;
}

/* Desktop alignment for continue shopping */
@media (min-width: 1024px) {
    .continue-shopping-section {
        text-align: right;
    }
}

/* Read-only field styles */
.form-control[readonly] {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.8;
    position: relative;
    font-style: italic;
}

.form-control[readonly]:focus {
    background-color: #e9ecef;
    border-color: #ced4da;
    box-shadow: none;
    color: #6c757d;
}

.form-control[readonly]::after {
    content: "🔒";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.7;
    pointer-events: none;
}

/* Read-only field labels */
.form-label[for*="CustomerEmail"] {
    color: #6c757d;
    font-weight: 500;
}

.form-label[for*="CustomerEmail"] i {
    opacity: 0.7;
}

.form-label[for*="CustomerEmail"]::after {
    content: " (Read-only)";
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: normal;
    font-style: italic;
}

/* Read-only field container styling */
.form-control[readonly] {
    border-left: 4px solid #6c757d;
    padding-left: 12px;
}

/* Read-only field help text */
.text-muted.readonly-help {
    font-size: 0.875rem;
    color: #6c757d;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Editable field emphasis */
.form-label[for*="CustomerPhone"] {
    color: #495057;
    font-weight: 600;
}

.form-label[for*="CustomerPhone"] i {
    color: #0d6efd;
}