body { font-family: 'Noto Sans Bengali', 'Poppins', sans-serif; color: #333; } .user-product-list, .product-edit-form { max-width: 1200px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .user-product-list h2, .product-edit-form h2 { font-size: 1.8rem; margin-bottom: 20px; color: #222; text-align: left; } /* Product Table */ .product-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.95rem; } .product-table th, .product-table td { border: 1px solid #e1e1e1; padding: 10px 12px; text-align: left; vertical-align: middle; } .product-table th { background: #f9f9f9; font-weight: 600; color: #555; } .product-table td form input[type="number"] { width: 70px; padding: 5px; margin-right: 5px; border: 1px solid #ccc; border-radius: 5px; } .product-table td form input[type="submit"] { padding: 5px 10px; background: #0073aa; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; } .product-table td form input[type="submit"]:hover { background: #005177; } .product-table a { color: #0073aa; text-decoration: none; margin-right: 5px; } .product-table a:hover { text-decoration: underline; } /* Product Edit Form */ .product-edit-form form { display: flex; flex-direction: column; gap: 15px; } .product-edit-form .form-group { display: flex; flex-direction: column; } .product-edit-form label { font-weight: 500; margin-bottom: 5px; color: #444; } .product-edit-form input[type="text"], .product-edit-form input[type="number"], .product-edit-form input[type="url"], .product-edit-form select, .product-edit-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.95rem; transition: border-color 0.3s; } .product-edit-form input:focus, .product-edit-form select:focus, .product-edit-form textarea:focus { outline: none; border-color: #0073aa; } .product-edit-form .submit-button { background: #28a745; color: #fff; border: none; padding: 12px 20px; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background 0.3s; align-self: flex-start; } .product-edit-form .submit-button:hover { background: #1e7e34; } .product-edit-form .button.cancel { display: inline-block; background: #dc3545; color: #fff; padding: 10px 18px; border-radius: 6px; text-decoration: none; font-size: 0.95rem; margin-left: 10px; transition: background 0.3s; } .product-edit-form .button.cancel:hover { background: #a71d2a; } .product-edit-form .back-to-list { display: inline-block; margin-bottom: 15px; color: #0073aa; text-decoration: none; } .product-edit-form .back-to-list:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 992px) { .product-table th, .product-table td { font-size: 0.85rem; padding: 8px 10px; } .product-edit-form input, .product-edit-form select, .product-edit-form textarea { font-size: 0.9rem; } } @media (max-width: 768px) { .product-table { display: block; overflow-x: auto; white-space: nowrap; } .product-table th, .product-table td { white-space: nowrap; } } @media (max-width: 480px) { .user-product-list, .product-edit-form { padding: 15px; } .product-edit-form .submit-button, .product-edit-form .button.cancel { width: 100%; text-align: center; margin-left: 0; } }